メディアデザイン実習J vol.1 2013/4/9

=ZL?� uÍ�b� 2013/4/1 ■ ßÚ� UG10G<2_�ìJ ■ ¼È!ÚÙē~ćÚÊĔ �!¼È�"�Aa=W\9aT(Web;aM?/ă�»��O^7ZS_7vô����úĀ�$��¤tî"��Ď!È�/¯����ĂÙ�¼È/Ą���

IT{Ċ���O^7ZRa`3_>K0`G<2Ja�¬đ��ÜÙgĐ/Ë¿Ù��ì�$�� ãâ�G<2Ja/­�¤tî����"�¢Ç�'�ig/�,����,O^

7ZRa!ig/Ôú�,�&!Ûā/�ì�,Ìl��+$��O^7ZS_7

/¢Ç!ig!ùĊ�u-��,¤tî�"��!����,�ÆÙ�µÏ/�ì

�,Ìl/¾q�$�� Ò�P_CWa`c£kÈ`SOHO©²�!È��¡®� ,ñ�/ð³��ó{!c�� �ùÑ�!����/Ó«� ,$�/;QaH�$�� ■¼È!ü×�#y  ■¼È!ü× 1� O^7ZS_7�"ēĕĔG<2Ja�O^7ZRa!ïÈĒ� � � ó{����O^7ZS_7/��më��,� 2� O^7ZS_7�"ēĖĔĖÂČ�.�,O^7ZS_7!�Æ � � døO^7ZTûÿ`ċØÕ�`È�N^a/Ôú�, 3� o��%�ēĕĔAndroid0O[8a=Y_/o��%)� 4� o��%�ēĖĔWeb;aM?/o��%)� 5� GaB/¶�ēĕĔAPI/p��%)� � � �Ù�GaB!�«�öÝ 6� GaB/¶�ēĖĔRD=X0DO��%)� � � API/Ö��:_F_EU26!�Ă 7� GaBéēėĔ;aLa;2I�º´�)� � � WordPress!F_O]aH3_>_�PHP!�Ü 8� :_F_EU26ēĕĔ[0\B2TĄs��%)� � � Aa=W\9aT!iæ%/Ôú�, 9� :_F_EU26ēĖĔ;aM?(9aT/k×�)� � � á��Web;aM?`0O[`4_Z2_9aT!k× 10� :_F_EU26ēėĔýü��%)�

� � oÈøj!wn��iÉ!à��)#k×]MXa�7\aO{� 11� :_F_EU26ēĘĔċØ/�&)� 12� :_F_EU26ēęĔcČ]MXa 13� :_F_EU26ēĚĔċØ/Ć&)� 14� :_F_EU26ēěĔ÷���)� 15� ÷�]MXa�è¹ ■¼È!y  �$�$�È�/¯������O^7ZS_7�Ü`Android0O[�o`WebAPI}Ö�����ì�$���!���@^�*ó{��!02G0�:_F_EU26��+æ%$�� :_F_EU26!�ì�����"�á��[0\B2TĄs��ñ�;aLa

Õ�/¤tî�¾q�$��v��*k×/ď&�7\aO{��k×½¸/x

�·Þ/õ��ª�7\aOy�����k×!÷��oÈ�ò%$�� |§¨�� ���!¼Èy "�Ã��,����+$��$��¤tî!øÅ

�Î��¼Èy /�Ã�,��'�+$�� ■g�ēgªĔ�ì ¼Èy�čÂĀÁ�$�� ■F5?H pÖ���f���� ■�íÄ ¼Èy�Ĉ�äh�$�� ■¤tî�Ö°�,'!�#øÅ ¼Èy�čÂĀÁ�$�� ■³êþr!ÀÏ�#�Ð z¦Ñ!%/�Ð��$��¼ÈåeÂ�ĉ¥`���,ąç(±¯)UV/'��z¦Ñ��$��

東京造形大学　メディアデザイン実習　授業内容（案） 2013/1/21　入江太一

課題

シリーズ タイトル 目的・ねらい・テーマ 1コマ目（座学） 2コマ目（実習） 配布資料 出席確認ノート もっと学びたい人のための課題

1

自分にとってプログラミングをどう位置づけるか ・自己認識

・昨年度からの継続性維持

・再度動機付け

・講師の自己紹介と実績紹介

・デザイナーとプログラマーの仕事

・デザインとプログラムの分離

・プログラミングは人間と社会の自動化

・オープンソースとハッカー文化

・プログラミングは楽しい

・「仕組み」自体のデザインに踏み込むということ

・プログラミングを武器にするという選択肢

昨年度までの復習 （未定） ・小テスト

・つまづいているところはありますか？

（未定）

2

現在のプログラミング事情 ・様々な開発言語を「とりあえず聞いたことはある」「見たこと

はある」状態に

・ヒアリング

・授業全体の進め方を説明

・用語解説

・様々な言語(とその用途・特徴・HelloWorld)

・サーバーサイドとクライアントサイド

　・クライアントサイド実例（生JS）

　・サーバーサイド実例（PHP）

・データベース

　・実例（phpMyAdmin・SQL・PHPから接続）

・CMSとフレームワーク

　・CSSフレームワーク実例（Bootstrap）

　・JSフレームワーク実例（jQuery）

　・PHPフレームワーク実例（CakePHP）

　・CMS実例（WordPress）

・様々なオープンソースライセンス

・様々なプラットフォーム

・業界/用途別 傾向と対策

（実例を交えて）

　・ソーシャルゲーム業界の要件

　・ホームページ制作の要件

　・Webプロモーションの要件

　・Webサービスの要件

　・アプリ開発の要件

　・業務系システムの要件

　・コンシュマーゲーム業界の要件

　など

・言語一覧

・フレームワーク一覧

・業界分析

など

・小テスト

・いま何を学びたいですか？

（未定）

3

HTML5によるAndroidアプリ制作手順 ・なぜAndroidなのか

・今日作ろうとしているものの説明

・サンプルアプリを作る手順を見せる

・ステップバイステップで手順を解説

・並行して、アプリのパッケージ化

・端末での確認

手順マニュアル （未定） ・他にもこんな作り方が（制限のないアプリ制作）

4

HTML5によるAndroidアプリ制作 ・前回のサンプルはブラウザでそのまま動きます

・サンプルプログラムの改善余地を提示

・改善方法を説明

・機能追加またはUI改善（自由に）

・かんたんなレビュー

（未定） （未定） （未定）

5

動的なデータを表示するには ・スタンドアローンなアプリには限界がある

・データの加工

・データの表示

＜クライアントサイド(JS)＞

・表組(テーブル)にデータを表示させる

（データは取得済みの状態のサンプルを利用）

（未定） （未定） （未定）

6

APIを使ってみよう ・APIとは

・さまざまなウェブAPIを紹介

・APIの利用の仕方（取得と送信）

・データ形式（XMLとJSON）

＜クライアントサイド(JS)＞

・データを取得

・データをパース（XML・JSON）

・データを表示

・代表的なAPI一覧

など

（未定） （未定）

7

マッシュアップしてみよう ・データの扱い方を復習

・機能やデザインを自発的に考える

・成果物によって小さな成功体験を得る（自信）

・成果物の可能性を感じさせる（新たな動機）

・任意のAPI（未定）の簡単マニュアルを配布

（認証が必要なものにするかどうかは要検討）

・各自APIでHTML5アプリを作ってみる

・レビュー

・理解すべき点とステップアップの両方を示す

（未定） （未定） （未定）

8

サーバーサイドのテンプレートエンジン ・サーバーサイドという概念を知る

・テンプレートとプログラムの区分を知る（再）

・デザイナーとプログラマーの仕事領域を知る

・とりあえずWordPressのテンプレートをPHPでいじれるよう

に

・サーバーサイドとクライアントサイド

・テンプレートエンジンとAPI

＜サーバーサイド(PHP・WP)＞

・PHP記述の基礎をステップバイステップで

・WPのテンプレートでページにデータを表示

（未定） （未定） （未定）

9

リアルタイム通信APIを使おう ・リアルタイム通信APIの紹介

・サンプルプログラムの紹介

・ソースコードの紹介

・基本アクセス

・ゼロからサンプルプログラム同等のものを作

る

（未定） （未定） （未定）

・HTML5/jQueryの復習

・HTML5の汎用性と将来性を知る

・今後主流となるAndroidプラットフォームに親しむ

・成果物によって小さな成功体験を得る（自信）

・成果物の限界を感じさせる（問題意識）

・機能追加・デザイン改善を自発的に考える（新たな動機）

・自分たちの仕事はデータを扱う仕事であるという認識

・データベースというものの存在を知る

・データを扱う基本的な概念を理解する

・データを扱う具体的な方法を知る

・データの表示を制御することが出来る状態＝プログラマーとス

ムーズに仕事ができる状態を目指しましょう

データを扱う

コンテンツメイク ・仕事現場を想定したグループワークを行う

・共同作業を通じて、様々な役割を理解する

・ゲームライクなコンテンツを制作する楽しみ

・主要な就職先としてのソーシャルゲーム業界を想定

・より大きな成功体験を得る

・理解度に応じ、役割を分けることで成功体験へのリスクヘッジ

・コンテンツメイクの楽しさと難しさを体感する

・コンテンツの要件

　・何らかのAPIを使用した動的なコンテンツ

　・JavascriptとHTML5を使用する

　・Webでもアプリでもよい

・可能であれば、制作したコンテンツはWebを通じて一般公開し

てユーザーの反応を得る

HTML5によるAndroidア

プリ制作

プログラミングとは何か

各回タイトル 印刷物授業内容

10

コンテンツ企画（１） ＜企画＞

・いくつかのAPIを提示/説明する

・企画の考え方

・チーム分け

・企画の開始

（各チームディスカッション）

・チーム内の役割分担を決める

（未定） （未定） （未定）

11

プログラムの設計と画面の設計 ・企画のレビュー

・内部設計と画面設計の考え方

・企画の修正

・設計の開始

（未定） （未定） （未定）

12

コンテンツメイク（１） ・設計のレビュー ・プログラム開発の開始

・デザインの開始

（未定） （未定） （未定）

13

コンテンツメイク（２） ・プログラム開発のつづき

・デザインのつづき

・中間レビュー

・デバッグの方法

・プログラムとデザインの結合について

（未定） （未定） （未定）

14

コンテンツメイク（３） ・プログラム開発のつづき

・デザインのつづき

・プログラム開発のつづき

・デザインのつづき

（未定） （未定） （未定）

15

製品化・製品レビュー・まとめ ・プログラムとデザインの結合

・デバッグ

（・プログラム開発のつづき）

（・デザインのつづき）

・製品レビュー（簡単なプレゼン）

・まとめ（最後に）

（未定） （未定） （未定）

※備考

本資料の内容について

単位の認定

初年度につき、上記の内容は適宜変更になる場合があります。

出席点のみとします。（授業終了時に感想/連絡メモを配布・回収する）

コンテンツメイク ・仕事現場を想定したグループワークを行う

・共同作業を通じて、様々な役割を理解する

・ゲームライクなコンテンツを制作する楽しみ

・主要な就職先としてのソーシャルゲーム業界を想定

・より大きな成功体験を得る

・理解度に応じ、役割を分けることで成功体験へのリスクヘッジ

・コンテンツメイクの楽しさと難しさを体感する

・コンテンツの要件

　・何らかのAPIを使用した動的なコンテンツ

　・JavascriptとHTML5を使用する

　・Webでもアプリでもよい

・可能であれば、制作したコンテンツはWebを通じて一般公開し

てユーザーの反応を得る

自己紹介

• 入江太一（いりえたいち）と申します

• 1980年大阪府生まれ、東京工芸大学 芸術学部 映像学科 メディア計画コース卒

• 200%文系人間です

• まず映像業界に就職して、社会常識(?)と厳しさ、自分の能力不足・ズレを学ばせていただく

• eラーニング業界に転職して、ActionScriptとPHPとHTMLで仕事ができるレベルに

• Webクリエイター(?)として独立したものの仕事が無いので業務委託の常駐案件をこなす

• 常駐案件／受託案件／自主展開の３本柱

• 都内のいろいろな会社を手伝いまくる　～３ヶ月以上同じ仕事をしないルール～

• 受託案件と自主展開の２本柱に絞った段階で、ちょうど自主サービスがヒット

2002

2004

2006

2009

オススメしません

TBS

ベンチャー

このへんまでただのワープア

「ぽりったー」について（１）

「ぽりったー」について（２）掲載メディア

• The Economist（英・経済誌）

• Forbes.com

• Bloomberg Businessweek

• AP通信

• 共同通信

• 日本経済新聞

• 毎日新聞

• 産経新聞

• asahi.com（朝日新聞社）

• Yahoo!Japan（トップニュース）

• 日本テレビ

• テレビ朝日

• BSフジ

• ニッポン放送

• 週刊ダイアモンド

• 週刊アスキー

• 「Twitter社会論」(津田大介・著)

• ITmedia News

• CNET Japan

• gihyo.jp

• ITpro

• PConline（日経BP社）

• はてなブックマークニュース

• livedoorニュース

• mixiニュース

• など

•  プログラム：PHP •  データベース：MySQL

独自のCMSとして設計・開発

プログラムがなければ・・・

•  更新作業＝HTML/CSSを記述する必要＝毎回ページを増やす作業

•  動的なデータ表示ができない •  ユーザーが作ったコンテンツ（CGM）を掲載できない

プログラムの恩恵

•  管理画面から情報入力するだけでサイトのページが自動生成される

•  HTMLやプログラムは、最初に作ったまま、いじる必要がない

•  技術知識がないスタッフでも更新できる

CMS ＝ Content Management System （コンテンツ管理システム）

ᴗ䞉ᅋయ䜈䛾䛂䜍䜚䛳䛯䞊䛃㌿⏝

&06ᥦ౪

䜽䝷䜴䝗䝃䞊䝡䝇 �6DD6�䛸䛧䛶䚸&06䝟䝑䜿䞊䝆ᥦ౪䜢ᒎ㛤䚹

䠘ᑟධ䠚�-,&$㟷ᖺᾏእ༠ຊ㝲ဨᵝ䚸ᮾ༊ఏ⤫ᕤⱁ⯆ᵝ�䛺䛹

䜽䝷䜴䝗

プログラムの目的（役割）

•  計算処理・集計処理 •  動的なコンテンツ表示 •  自動生成 •  データベースへの保存・データの呼び出し

コンピューター •  人間の作業を自動化する •  人を労働から開放する •  苦しい人を助ける

「プログラムがなければ、ただの箱」

スキルセット

• PHP4/5

• Actionscript1.0/2.0/3.0/lite1.1-

• Javascript(AJAX)

• Python

• Java

• VB

主な開発言語

• 企画

• 対顧客の活動（営業、プレゼン、打ち合わせ、検収に向けた活動など）

• ディレクション

• プロジェクトマネージメント

• 要件定義、設計、ドキュメント作成

• プログラムコーディング

• デザイン（グラフィック/インターフェイス）

• (X)HTMLコーディング（マークアップ）

• PR

• コンサルティング

担当できる範囲

Webに関することはほとんど全部独学

受託案件の場合は、企画以外だいたい全部やります。外注にも出してません。

ᴫ␎

䠘䛺ᐇ⦼䠚䞉⤒῭⏘ᴗ┬䛂䜸䞊䝥䞁䜺䝞䝯䞁䝖䛃ᐇドᐇ㦂䝥䝻䝆䜵䜽䝖ཧ⏬䞉ཌ⏕ປാ┬⛉Ꮫ㝔䚷◊✲ㄢ㢟ホ౯䝅䝇䝔䝮䞉⥲┬බᐖ➼ㄪጤဨ䚷䜴䜵䝤䝃䜲䝖䚷䜲䞁䝍䞊䝣䜵䜲䝇䜰䝗䝞䜲䝄䝸䞊䞉ᰴᘧ♫䝍䜲䝖䞊䛂䝇䝨䞊䝇䜲䞁䝧䞊䝎䞊ୡ⏺ᡓ䛃䠄 ��࿘ᖺ3&䝀䞊䝮䠅

䞉䝰䝞䝀䞊䛺䛹䛡䛾䜹䝆䝳䜰䝹䝀䞊䝮㛤Ⓨ䞉䛭䛾䚸⯡䛡䝃䜲䝖ไస䠋ᴗ⣔䝅䝇䝔䝮ᵓ⠏䛺䛹ከ

䠘ᴗ⤒Ⴀ䠚䚷䚷䚷����ᖺ��᭶䛻ἲே䚹䠄ᰴᘧ♫䝁䜶䜹䝍䝬䝸䞁䠅

䠘せᘬඛ䠚䞉ཌ⏕ປാ┬ �ᅜ❧ಖ་⒪⛉Ꮫ㝔ᵝ

䞉ఫ⏘ᰴᘧ♫ᵝ䞉ᰴᘧ♫䝬䜲䝘䝡ᵝ䞉⚄ᡞⱁ⾡ᕤ⛉Ꮫᵝ

䠘䝯䝕䜱䜰⤂䠚 �᪥ᮏ⤒῭᪂⪺䚸ᮅ᪥᪂⪺䚸ẖ᪥᪂⪺䚸 :HE�'HVLJQLQJ䚸�7KH�(FRQRPLVW�䛺䛹

䝖䝶䝍⮬㌴ᵝ

WR\RWD�MS䛂䝖䝶䝍䜹䞊䝡䝳䞊䝽䞊䛃

䝖䝶䝍♫䛾�'⮬㌴䜹䝍䝻䜾䝃䜲䝖䚹

䝪䝕䜱య䛜���ᗘᅇ㌿䛧䚸╔Ⰽ䜔䝟䞊䝒ษ䜚䛘䜒⬟䚹

:HE䛻䛚䛡䜛䛣䛾㢮䛾䝅䝭䝳䝺䞊䝍䞊䛸䛧䛶䛿䚸㣕㌍ⓗ䛻㧗ᗘ䛛䛴ඛ㐍ⓗ䛷䛩䚹

ᚑ᮶䛾)/$6+䜒䛧䛟䛿&XOW�'䛻䜘䜛⾲⌧䜢䚸+70/�䛸$-$;䛻䜘䛳䛶ๅ᪂䚹

➃ᮎ౫Ꮡᛶ䜢పῶ䛧䚸㐠⏝䝁䝇䝖䜢๐ῶ䛩䜛┠ⓗ䚹

ᰴᘧ♫䝍䜲䝖䞊�ᵝ䝇䝨䞊䝇䜲䞁䝧䞊䝎䞊ୡ⏺ᡓ䠄䜸䞁䝷䜲䞁䝀䞊䝮䠅

㛤Ⓨ

䝕䝄䜲䞁

䝀䞊䝮䛻ṧ䜛స䛂䝇䝨䞊䝇䜲䞁䝧䞊䝎䞊䛃䛾 ��࿘ᖺグᛕ䝥䝻䝆䜵䜽䝖䛻䚸䝯䜲䞁䝥䝻䜾䝷䝬ව䝯䜲䞁䝕䝄䜲䝘䞊䛸䛧䛶ཧຍ䚹ୡ⏺୰䛸䛾䝛䝑䝖䝽䞊䜽ᑐᡓ䛻䜘䜛䚸ᅜᑐᢠ䛾ኊ䛺Ⅼ䜚ᡓ䜢ᐇ⌧䛧䜎䛧䛯䚹

䛭䛾䛾:HE䝃䜲䝖ไస

&06ᑟධ

䝕䝄䜲䞁

8,ᐇ

•  ���!•  ���!•  ������&��!•  #+����%!.�'./PM0!•  #+����).�./PL0!•  ��*��.!•  ���&�-� /SE0!•  !��,.��-� !•  �.�$.��-� !•  #+�(%!•  ����.!•  HTML�.�./%.� �#�-� 0!•  ���.!•  ��/����"0!

職種

「制作」と「製作」

制作 製作

•  実作業 •  現場スタッフ •  　

•  資金集め •  スポンサーとの折衝 •  コスト管理 •  人員配置 •  プロジェクト運営

VS�

•  業界や組織によっては逆の場合も •  Web業界は基本的にどちらの言葉も使わない •  よくわかっていない大人も多い

開発・構築

プログラマー デザイナー

裏 表

•  営業が仕事を取ってくる •  プロジェクトが立ち上がる •  プロジェクトマネージャーがプロジェクトチームを招集する •  ディレクターが企画をまとめる •  システムエンジニアが設計する（システム外部設計・画面設計） •  プログラマーが開発する（システム内部設計・プログラム開発） •  デザイナーがデザインする •  HTMLコーダーがコーディングする •  テスターがテストする •  クライアントが承認する •  ローンチ（サービスイン・カットオーバー・オープン・公開）

上流工程

下流工程

エンドユーザーから遠いところから、近いところへと開発作業は進められる

プログラマー デザイナー

•  テンプレート •  Twitter Bootstrap •  CSSフレームワーク •  Fireworks

•  jQuery •  WordPress •  CMS •  LL言語

開発 デザイン

デザイナー （の下のほう）

プログラマー （の下のほう）

•  UIデザインとUI開発は、上流と下流の境目にあると考えられている •  誰が行うか、プロジェクトによって臨機応変に対応が迫られることがある

•  Lightweight Language、略して「LL」 •  軽量プログラミング言語 •  スクリプト言語ともいう

LL言語

•  JavaScript •  ActionScript •  PHP •  Ruby •  Python •  Perl（俗にいう「CGI」） •  Lua など…

ECMAscript互換 ）

「人気10言語」

「日経ソフトウェア」2013年 5月号

•  Java •  C言語 •  C#

•  JavaScript + HTML5 •  VBA

•  Visual Basic •  PHP •  Scala

•  Python •  Objective-C

多くの職場で使われる言語

•  Java •  C言語 •  C#

•  JavaScript + HTML5 •  VBA

•  Visual Basic •  PHP •  Scala

•  Python •  Objective-C

•  JavaScript + HTML5 •  PHP •  Ruby

•  Objective-C •  Java

•  C# •  Python

���10����

用途別に分類

クライアントサイド開発 サーバーサイド開発 アプリ開発

•  JavaScript + HTML5 •  PHP •  Ruby •  Python •  Java

Android ・Java ・Javascript+HTML5 iOS ・Objective-C Windows8/RT ・C#

名前

ふりがな

メディアデザイン実習 J

2013/4/9

将来の希望（具体的でなくてもよいので率直に）

さいきん考えること

（悩みでもいいよ）

所有している端末・ハードウェア

自分のスキル全般を自己分析して教えてください

大きな関心・習得したいこと

これが好き！

これに詳しい！

こういう授業にしてほしい

メディアデザイン実習 J

2013/4/9名前

分野 自分はこれくらいできます（未経験なら空欄で構いません）

HTML

CSS

WordPress

PHP(4/5)

未経験

未経験

未経験

JavaScript 未経験

未経験

Windows 操作

OSX操作

Linux 操作

未経験まかせろ 問題ない まだまだ

未経験まかせろ 問題ない まだまだ

未経験まかせろ 問題ない まだまだ

jQuery 未経験

Java 未経験

ActionScript3 未経験

学びたい言語はありますか

（理由もあれば）