第3期キックオフ説明会＋勉強会
TRANSCRIPT
第３期キックオフ ＆勉強会
2012/10/13 UT Startup Gym 1
2012/10/13 UT Startup Gym 2
飯塚修平 東京大学工学系研究科!技術経営戦略学専攻 （ＴＭＩ）修士１年!オーマ株式会社 お花サプライズ！PM!Google!ウェブマスターインターン
UT!Startup!Gym!とは？
アイデアをカタチにするプログラム
2012/10/13 UT Startup Gym 3
! プロジェクト!! 企画から実装まで!! スタートアップ
目的
• アントレプレナーシップの養成!• インパクトのあるウェブサービスのローンチ
2012/10/13 UT Startup Gym 4
対象
• 学生、社会人不問!• 混合チーム
2012/10/13 UT Startup Gym 5
2012/10/13 UT Startup Gym 7
utgym2第１回勉強会
2012/10/13 UT Startup Gym 8
utgym1開発合宿
2012/10/13 UT Startup Gym 9
utgym2作業会
2012/10/13 UT Startup Gym 10
utgym2特別講演会
2012/10/13 UT Startup Gym 11
スケジュール
2012/10/13 UT Startup Gym 12
Sept,!12 • つくってみよう
Oct,!12 • プラニング • プログラミング入門
Nov,!12 • プロジェクトスタート • 技術要素勉強会
Dec,!12 • 開発開始 • 冬季開発合宿
Jan,!13 • ゲスト講演会 • 週間報告会
Feb,!13 • リリース
ソーシャルウェブアプリケーション,!API,!bot,!HTML5
Keywords:*
リーンスタートアップ,!ビジネスプラニング,!HTML,!CSS,!PHP,!javascript
チーム結成,!企画,!ディスカッション!git,!フレームワーク,!MySQL,!Apache!
シナリオ,!ペルソナ,!ワイヤフレーム,!!サイトマップ,!DB!スキーム!
ゲーミフィケーション,!仮説検証,!データマイニング,!アクセシビリティ!
レスポンシブデザイン,!プレゼンテーション!
第２期サービスの紹介 • henerico!
• Morning!Relay!
• 貯金エクササイズ!
• ELIXA!
• sumiqa!
• ともパズ!
• フォト☆レポ!
2012/10/13 UT Startup Gym 13
グループ分け • メンター（第２期生）１名以上!• リーダー（第３期生）１名!
• 一時的なものです!– 再編成あり!
– 交渉あり!
2012/10/13 UT Startup Gym 14
ウェブサーバ、HTML
2012/10/13 UT Startup Gym 15
第一回初心者勉強会
目次 • 勉強会に参加するにあたって!• ウェブアプリとは!– 仕組み!
– HTML!とは!
– javascript!とは!– API!とは!
• Facebook!アプリをつくろう（ワーク）!
2012/10/13 UT Startup Gym 16
勉強会に参加するにあたって
• 何かをするということ!＝何かをしないということ!
• ウェブサービスをつくるのは意外と泥臭い!
• 辛いこともあるかと思いますが、一緒に頑張って行きましょう。!
2012/10/13 UT Startup Gym 17
プログラミング学習の心得 • 書けるようになるまで、他のプログラミング言語に浮気しないことが重要!– １個できるようになれば、次の言語はすぐできるようになる。!
– ２個できるようになれば、だいたいどんな言語もすぐできるようになる。!
• ひたすらたくさんのコードを書きまくることも重要
2012/10/13 UT Startup Gym 18
ウェブアプリの仕組み
2012/10/13 UT Startup Gym 19
URI!(リクエスト)
HTML!(レスポンス)
HTTP
ブラウザ ウェブサーバ
データベース
PHP!などで記述
外部サービス API
HTML!とは
2012/10/13 UT Startup Gym 20
ウェブページができるまで
2012/10/13 UT Startup Gym 21
ブラウザ HTML ウェブページ
CSS!とは • ウェブサイトの見た目を記述する!
– 色を変えたい!– 囲み線を加えたい!
– 配置を変えたい!
– 角を丸くしたい!– 影を加えたい!
– グラデーションをかけたい!
2012/10/13 UT Startup Gym 22
2012/10/13 UT Startup Gym 23
2012/10/13 UT Startup Gym 24
javascript!とは
• HTML!に動的な要素を加える。!– ✕✕をクリックしたら〇〇!
– 一定時間経過したら〇〇!
• アニメーション!
• スムーズな読み込み!(ex.!Google!Maps,!フィード)!
2012/10/13 UT Startup Gym 25
javascript!とは
2012/10/13 UT Startup Gym 26
onclick=“hoge()”
API!とは • 外部サービスのデータや機能を使うことができる。!
• ex.!http://graph.facebook.com/あなたのID/picture?type=large!
• ex.!https://api.twitter.com/1/statuses/user_timeline.json?screen_name=あなたのTwitter!ID
2012/10/13 UT Startup Gym 27
Facebook アプリをつくろう
2012/10/13 UT Startup Gym 28
HTML!の文法 <!DOCTYPE!html>!<html>!
!<head>!
! !<meta!charset=“utfd8”>!
! !<title>!My!Web!App!</title>!
!</head>!
!<body>!
! !This!is!content.!
!</body>!
</html> 2012/10/13 UT Startup Gym 29
head:!タイトルやエンコードなど!メタな情報を記述する!
body:!ブラウザに描写される!内容を記述する!
HTML!の文法 • タグ!– <p>!や!</p>!のように <!と!>!で囲まれた部分のこと!
– <p>!のように!/!がつかないタグは「開きタグ」!– </p>!のように!/!がつくタグは「閉じタグ」!
• 要素!– 開きタグ～閉じタグまで含んで要素という!
• 内容!– タグの間に挟まれた部分を内容という!
2012/10/13 UT Startup Gym 30
さまざまなタグ • h1,*h2*...!(heading)!タイトル、見出し • img*src!(image!source!is...)!画像 • a*href!(anchor,!hypertext!reference)!リンク • ur*(unordered!list)!箇条書き • li!(list!item)!箇条書きの項目!
2012/10/13 UT Startup Gym 31
ワーク１ • 以上のすべてのタグを使って自己紹介のページを作ってください。
2012/10/13 UT Startup Gym 32
CSSの文法 • style!要素の内容に書く!
<style>!selecter!{!! !property:!value;!! !property:!value;!}!</style>!
• HTML!開きタグの中に書く!<div!style=“property:value”></div>!
2012/10/13 UT Startup Gym 33
ワーク２ • 自己紹介ページをデザインしてください。!– 「これできないかな？」と思ったらググる!
– だいたいできるはず
2012/10/13 UT Startup Gym 34
javascript!の文法 • script!要素の内容に書く!
<script>!! !var!hoge!=!“piyo”;!! !alert!(hoge);!</script>!
• HTML!開きタグの中に書く!<div!onclick=“alert(‘hoge’);”></div>!
2012/10/13 UT Startup Gym 35
ワーク３ • 自己紹介ページのどこかをクリックしたらポップアップが出るようにしてください。!– onclick
2012/10/13 UT Startup Gym 36
API • Facebook!Graph!API!
http://graph.facebook.com/YOUR_ID!
• サードパーティのアプリケーションのデータを利用することが出来る。
2012/10/13 UT Startup Gym 37
ワーク４ • 相性診断アプリを写経してください。!– まずは、サービスを触って挙動を理解する。!
– ひとつひとつのタグの意味を考えながら、書き写す。!• 無駄なタグは無い!
2012/10/13 UT Startup Gym 38
成果物発表
2012/10/13 UT Startup Gym 39
交流会 • チムニー本郷店!– 18:30-20:30 – イイツカ
2012/10/13 UT Startup Gym 40