第3期キックオフ説明会+勉強会

Post on 19-Jun-2015

411 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

第3期キックオフ &勉強会

2012/10/13 UT Startup Gym 1

2012/10/13 UT Startup Gym 2

飯塚修平 東京大学工学系研究科!技術経営戦略学専攻 (TMI)修士1年!オーマ株式会社 お花サプライズ!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第1回勉強会

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!スキーム!

ゲーミフィケーション,!仮説検証,!データマイニング,!アクセシビリティ!

レスポンシブデザイン,!プレゼンテーション!

第2期サービスの紹介 •  henerico!

•  Morning!Relay!

•  貯金エクササイズ!

•  ELIXA!

•  sumiqa!

•  ともパズ!

•  フォト☆レポ!

2012/10/13 UT Startup Gym 13

グループ分け •  メンター(第2期生)1名以上!•  リーダー(第3期生)1名!

•  一時的なものです!– 再編成あり!

– 交渉あり!

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

プログラミング学習の心得 •  書けるようになるまで、他のプログラミング言語に浮気しないことが重要!– 1個できるようになれば、次の言語はすぐできるようになる。!

– 2個できるようになれば、だいたいどんな言語もすぐできるようになる。!

•  ひたすらたくさんのコードを書きまくることも重要

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

ワーク1 •  以上のすべてのタグを使って自己紹介のページを作ってください。

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

ワーク2 •  自己紹介ページをデザインしてください。!– 「これできないかな?」と思ったらググる!

– だいたいできるはず

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

ワーク3 •  自己紹介ページのどこかをクリックしたらポップアップが出るようにしてください。!–  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

ワーク4 •  相性診断アプリを写経してください。!– まずは、サービスを触って挙動を理解する。!

– ひとつひとつのタグの意味を考えながら、書き写す。!•  無駄なタグは無い!

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

top related