SlideShare a Scribd company logo
第2回初心者勉強会




2013/2/13     1         UT Startup Gym
UT Startup Gym とは?



            アイデアをカタチにするプログラム

            プロジェクト
            企画から実装まで
            スタートアップ



2013/2/13               2          UT Startup Gym
スケジュール
                                              Keywords:

              • プログラミング入門            ソーシャルウェブアプリケーション, API,
    Oct, 12                          bot, HTML5
            • プラニング
                                     リーンスタートアップ, ビジネスプラニン
    Nov, 12 • プロジェクトスタート
                                     グ, HTML, CSS, PHP, javascript
            • 開発開始
    Dec, 12 • 冬季開発合宿                 チーム結成, 企画, ディスカッション
                                     git, フレームワーク, MySQL, Apache
            • ウェブデザイン
    Jan, 13 • 週間報告会
                                     シナリオ, ペルソナ, ワイヤフレーム,
                                     サイトマップ, DB スキーム
              • jQuery, 中間発表
    Feb, 13
                                     ゲーミフィケーション, 仮説検証, データマ
                                     イニング, アクセシビリティ
              • 作業会
    Mar, 13

                                     レスポンシブデザイン, プレゼンテーショ
              • リリース会                ン
    Apr, 13


2013/2/13                        3                         UT Startup Gym
M        D        講師      タイトル                       要素
10 13 飯塚                  かんたん Facebook アプリをつくる      HTML, CSS, js
             21 飯塚        かんたん Twitter アプリをつくる       UNIX, vim, PHP
             27 川上        かんたん アンケートフォームをつくる         MySQL, MVC
    11        3 石村        ビジネスプランニング                 ビジネスプラン、リーンスタートアップ
             10 AWS 高山様   サーバを立てよう                   Apache, AWS
             17           企画プレゼン + チーム
             24 佐藤        プロダクトデザイン                  シナリオ、ペルソナ、ワイヤフレーム
12            1 前原        マッシュアップアプリをつくる             OAuth, Facebook API, Youtube API
              8 飯塚        チームでけんかをしないために             Git
             15 天野        MVC モデル                    MVC
             22           ハッカソン
    1 12 石村               ユーザがハマるアプリデザイン             ゲーミフィケーション
             19 飯塚        かんたん・きれい・便利なウェブデザイン        Twitter Bootstrap, Responsive Design, LESS
             26 天野        ウェブから情報を集める                cron, xpath
    2         2 斎藤        アニメーションをつくる                javascript, jQuery
              9 ゲスト       ゲストスピーカー
             16           中間発表
                          作業会
    4 13                  プレゼンテーション
             20           リリース会
2013/2/13                                        4                                 UT Startup Gym
ウェブアプリの仕組み
                          HTTP
                                      PHP など
                                       で記述


                 URI (リクエスト)                   データベース



             HTML (レスポンス)

ブラウザ                             ウェブサーバ

            前回
                         今回
                                        API
                                               外部サービス


2013/2/13                         5              UT Startup Gym
PHP でやります
• PHP でプログラムを書いて、実行する。
• ターミナルを起動
       – mac
       「アプリケーション」→「ユーティリティ」→「ター
       ミナル.app」
       – win
       VirtualBox起動→「検索」→「端末」
• エディタでプログラムを編集
       – vim か emacs か nano
• 実行

2013/2/13                     6   UT Startup Gym
PHP ある?
• $php –v;
  PHP 5.x.x (cli) (built: ...

• mac はあるはず。なければ port とか brew とか

• ubuntu はないかも。なければ
  $sudo apt-get update
  $sudo apt-get install php5



2013/2/13                       7   UT Startup Gym
エディタで書く
$emacs test.php # emacs で test.php
             を編集する
                     # vim でもおk

<?php
echo "Hello World!n";

Ctrl+X Ctrl+S => 保存
Ctrl+X Ctrl+C => 終了

2013/2/13                8           UT Startup Gym
実行する
$php test.php
Hello World!
$




2013/2/13        9     UT Startup Gym
プログラムの編集->実行
$ emacs test.php #編集

<? ...

$ php test.php #実行




2013/2/13              10   UT Startup Gym
Twitter から情報を取得する
$ emacs twitter.php
<?
echo
file_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?screen_
name=tushuhei");

$ php twitter.php

file_get_contents 便利。
ここで表示されるのが json というデータ形式。




2013/2/13                              11                            UT Startup Gym
json
{
       “id”: 1,
       “name”: “Shuhei Iitsuka”,
       “age”: 23,
       “friends”: [
             {
                 “id”: 2,
                 “name”: “Kazuhiro Kawakami”,
             },
             {
                 “id”: 3,
                 “name”: “Naofumi Wakabayashi”,
             }
       ]
}

2013/2/13                              12         UT Startup Gym
よくわからないので
$ emacs twitter.php
<?
$contents =
json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.j
son?screen_name=tushuhei"));
var_dump($contents)

$ php twitter.php

json_decode? (´・ω・`)
var_dump? (´・ω・`)

とりあえず、かけました。




2013/2/13                              13                             UT Startup Gym
PHP 入門




2013/2/13     14     UT Startup Gym
PHP でつくるウェブアプリ
• ユーザが php ファイルにリクエストを送る
• サーバ (Apache) のモジュール (mod_php) がその php ファ
  イルを実行
• 出力結果がレスポンスとして返される
• ブラウザがその出力結果を表示する


             URI (リクエスト)            実行



            出力結果 (レスポンス)            実行結果

   ブラウザ                    ウェブサーバ          PHP ファイル


2013/2/13                  15                UT Startup Gym
(発展) Module と CGI




• PHP は Module タイプで開発するのがメジャー


2013/2/13           16          UT Startup Gym
つくってみよう
$cd ドキュメントルート
$emacs test.php

<html>
    <head>
        <title>test</title>
        <meta charset=“utf-8”>
    </head>
    <body>
        <?
        $content =
json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.j
son?screen_name=tushuhei"));
        var_dump($content);
        ?>
    </body>
</html>
2013/2/13                              17                             UT Startup Gym
var_dump の結果をよく見る
array(16) {
 [0]=>
 object(stdClass)#1 (19) {
  ["created_at"]=>
  string(30) "Fri Oct 19 12:49:07 +0000 2012"
  ["id"]=>
  int(259274981630947329)
  ["id_str"]=>
  string(18) "259274981630947329"
  ["text"]=>
  string(54) "iconfinder が twitter bootstrap 仕様になってる"      $content[0]->text
  ["source"]=>
  string(3) "web"
  ["truncated"]=>
  bool(false)
  ["in_reply_to_status_id"]=>
  NULL
  ["in_reply_to_status_id_str"]=>
  NULL
  ["in_reply_to_user_id"]=>
  NULL
  ["in_reply_to_user_id_str"]=>
  NULL
  ["in_reply_to_screen_name"]=>
  NULL
  ["user"]=>
  object(stdClass)#2 (38) {
   ["id"]=>
   int(109813658)
2013/2/13                                             18                       UT Startup Gym
   ["id_str"]=>
<html>
(略)
     <body>
          <?
          $tweets =
json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?screen_name=tus
huhei"));
          ?>
          <? foreach ($tweets as $tweet): ?>
                 <div>
                       <img src="<?=$tweet->user->profile_image_url?>">
                       <span><?=$tweet->text?></span>
                       <span><?=$tweet->created_at?></span>
                 </div>
          <? endforeach ?>
     </body>
</html>

# さらに CSS を駆使してデザインしてみよう
# さらにさらに javascript を駆使してユーザ名を入力できるようにしよう




2013/2/13                                       19                                    UT Startup Gym
おまけ
$ emacs yahoo.php

<?
echo file_get_contents("http://yahoo.co.jp");




2013/2/13                           20          UT Startup Gym

More Related Content

What's hot

WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
 
後期02
後期02後期02
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
 
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
賢 秋穂
 
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
光晶 上原
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
Nishida Kansuke
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
Shinya Okano
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
Shinya Okano
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
 
運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用
真治 米田
 
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解するScc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
 
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっているJJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
Koichi Sakata
 
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
nico0927
 
JavaScriptの落とし穴
JavaScriptの落とし穴JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
 

What's hot (20)

WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb API
 
後期02
後期02後期02
後期02
 
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
 
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
20160521 大規模映像配信サービスの Java8による全面リニューアルの裏側
 
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニックWordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
 
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく - Django Redshift Backend の開発 - PyCon JP 2016
 
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
 
⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5⑲jQueryをおぼえよう!その5
⑲jQueryをおぼえよう!その5
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
 
Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証Djangoフレームワークのユーザーモデルと認証
Djangoフレームワークのユーザーモデルと認証
 
Djangoフレームワークの紹介
Djangoフレームワークの紹介Djangoフレームワークの紹介
Djangoフレームワークの紹介
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
 
運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用運用の現場での監視運用ツールの活用
運用の現場での監視運用ツールの活用
 
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解するScc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
 
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっているJJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
JJUG CCC 2016 fall バイトコードが君のトモダチになりたがっている
 
-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう-入門- enchant.js でゲームを作ろう
-入門- enchant.js でゲームを作ろう
 
JavaScriptの落とし穴
JavaScriptの落とし穴JavaScriptの落とし穴
JavaScriptの落とし穴
 

Similar to かんたん Twitter アプリをつくろう

かんたんキレイなウェブデザイン
かんたんキレイなウェブデザインかんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
Shuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
Shuhei Iitsuka
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
Naoyuki Yamada
 
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスドMicrosoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Kazumi Hirose
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Yuji Takayama
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
 
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourceMashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
Ippei Arita
 
【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】
Kengo Shimada
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
Yoshitaka Seo
 
Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発
Yuki Hattori
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
Redmineosaka 20 talk_crosspoints
Redmineosaka 20 talk_crosspointsRedmineosaka 20 talk_crosspoints
Redmineosaka 20 talk_crosspoints
Shinji Tamura
 

Similar to かんたん Twitter アプリをつくろう (20)

かんたんキレイなウェブデザイン
かんたんキレイなウェブデザインかんたんキレイなウェブデザイン
かんたんキレイなウェブデザイン
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
Git
GitGit
Git
 
データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回データマイニング+WEB勉強会資料第6回
データマイニング+WEB勉強会資料第6回
 
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスドMicrosoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
Microsoft azure上にwebサイトやアプリケーションを構築する方法 アドバンスド
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
 
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSourceMashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】【ネイティブアドを支えるPhantomJS】
【ネイティブアドを支えるPhantomJS】
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
 
Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発
 
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
Redmineosaka 20 talk_crosspoints
Redmineosaka 20 talk_crosspointsRedmineosaka 20 talk_crosspoints
Redmineosaka 20 talk_crosspoints
 

More from Shuhei Iitsuka

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
Shuhei Iitsuka
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
Shuhei Iitsuka
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
Shuhei Iitsuka
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
Shuhei Iitsuka
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous space
Shuhei Iitsuka
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
Shuhei Iitsuka
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Shuhei Iitsuka
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web development
Shuhei Iitsuka
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
Shuhei Iitsuka
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
Shuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
Shuhei Iitsuka
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Shuhei Iitsuka
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
Shuhei Iitsuka
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
Shuhei Iitsuka
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得る
Shuhei Iitsuka
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
Shuhei Iitsuka
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
Shuhei Iitsuka
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
 
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
Shuhei Iitsuka
 

More from Shuhei Iitsuka (20)

Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition  a comprehensive...Online and offline handwritten chinese character recognition  a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
 
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behaviorInferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
 
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
 
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networksProcedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
 
Generating sentences from a continuous space
Generating sentences from a continuous spaceGenerating sentences from a continuous space
Generating sentences from a continuous space
 
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システムウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
 
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
 
Machine learning meets web development
Machine learning meets web developmentMachine learning meets web development
Machine learning meets web development
 
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめるPython と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
 
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
 
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
 
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web DataAsia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
 
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
 
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
 
ウェブサイトで収益を得る
ウェブサイトで収益を得るウェブサイトで収益を得る
ウェブサイトで収益を得る
 
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくるHTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
 
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザインウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
 
データベースを使おう
データベースを使おうデータベースを使おう
データベースを使おう
 
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会 第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
 
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
 

かんたん Twitter アプリをつくろう

  • 2. UT Startup Gym とは? アイデアをカタチにするプログラム プロジェクト 企画から実装まで スタートアップ 2013/2/13 2 UT Startup Gym
  • 3. スケジュール Keywords: • プログラミング入門 ソーシャルウェブアプリケーション, API, Oct, 12 bot, HTML5 • プラニング リーンスタートアップ, ビジネスプラニン Nov, 12 • プロジェクトスタート グ, HTML, CSS, PHP, javascript • 開発開始 Dec, 12 • 冬季開発合宿 チーム結成, 企画, ディスカッション git, フレームワーク, MySQL, Apache • ウェブデザイン Jan, 13 • 週間報告会 シナリオ, ペルソナ, ワイヤフレーム, サイトマップ, DB スキーム • jQuery, 中間発表 Feb, 13 ゲーミフィケーション, 仮説検証, データマ イニング, アクセシビリティ • 作業会 Mar, 13 レスポンシブデザイン, プレゼンテーショ • リリース会 ン Apr, 13 2013/2/13 3 UT Startup Gym
  • 4. M D 講師 タイトル 要素 10 13 飯塚 かんたん Facebook アプリをつくる HTML, CSS, js 21 飯塚 かんたん Twitter アプリをつくる UNIX, vim, PHP 27 川上 かんたん アンケートフォームをつくる MySQL, MVC 11 3 石村 ビジネスプランニング ビジネスプラン、リーンスタートアップ 10 AWS 高山様 サーバを立てよう Apache, AWS 17 企画プレゼン + チーム 24 佐藤 プロダクトデザイン シナリオ、ペルソナ、ワイヤフレーム 12 1 前原 マッシュアップアプリをつくる OAuth, Facebook API, Youtube API 8 飯塚 チームでけんかをしないために Git 15 天野 MVC モデル MVC 22 ハッカソン 1 12 石村 ユーザがハマるアプリデザイン ゲーミフィケーション 19 飯塚 かんたん・きれい・便利なウェブデザイン Twitter Bootstrap, Responsive Design, LESS 26 天野 ウェブから情報を集める cron, xpath 2 2 斎藤 アニメーションをつくる javascript, jQuery 9 ゲスト ゲストスピーカー 16 中間発表 作業会 4 13 プレゼンテーション 20 リリース会 2013/2/13 4 UT Startup Gym
  • 5. ウェブアプリの仕組み HTTP PHP など で記述 URI (リクエスト) データベース HTML (レスポンス) ブラウザ ウェブサーバ 前回 今回 API 外部サービス 2013/2/13 5 UT Startup Gym
  • 6. PHP でやります • PHP でプログラムを書いて、実行する。 • ターミナルを起動 – mac 「アプリケーション」→「ユーティリティ」→「ター ミナル.app」 – win VirtualBox起動→「検索」→「端末」 • エディタでプログラムを編集 – vim か emacs か nano • 実行 2013/2/13 6 UT Startup Gym
  • 7. PHP ある? • $php –v; PHP 5.x.x (cli) (built: ... • mac はあるはず。なければ port とか brew とか • ubuntu はないかも。なければ $sudo apt-get update $sudo apt-get install php5 2013/2/13 7 UT Startup Gym
  • 8. エディタで書く $emacs test.php # emacs で test.php を編集する # vim でもおk <?php echo "Hello World!n"; Ctrl+X Ctrl+S => 保存 Ctrl+X Ctrl+C => 終了 2013/2/13 8 UT Startup Gym
  • 10. プログラムの編集->実行 $ emacs test.php #編集 <? ... $ php test.php #実行 2013/2/13 10 UT Startup Gym
  • 11. Twitter から情報を取得する $ emacs twitter.php <? echo file_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?screen_ name=tushuhei"); $ php twitter.php file_get_contents 便利。 ここで表示されるのが json というデータ形式。 2013/2/13 11 UT Startup Gym
  • 12. json { “id”: 1, “name”: “Shuhei Iitsuka”, “age”: 23, “friends”: [ { “id”: 2, “name”: “Kazuhiro Kawakami”, }, { “id”: 3, “name”: “Naofumi Wakabayashi”, } ] } 2013/2/13 12 UT Startup Gym
  • 13. よくわからないので $ emacs twitter.php <? $contents = json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.j son?screen_name=tushuhei")); var_dump($contents) $ php twitter.php json_decode? (´・ω・`) var_dump? (´・ω・`) とりあえず、かけました。 2013/2/13 13 UT Startup Gym
  • 14. PHP 入門 2013/2/13 14 UT Startup Gym
  • 15. PHP でつくるウェブアプリ • ユーザが php ファイルにリクエストを送る • サーバ (Apache) のモジュール (mod_php) がその php ファ イルを実行 • 出力結果がレスポンスとして返される • ブラウザがその出力結果を表示する URI (リクエスト) 実行 出力結果 (レスポンス) 実行結果 ブラウザ ウェブサーバ PHP ファイル 2013/2/13 15 UT Startup Gym
  • 16. (発展) Module と CGI • PHP は Module タイプで開発するのがメジャー 2013/2/13 16 UT Startup Gym
  • 17. つくってみよう $cd ドキュメントルート $emacs test.php <html> <head> <title>test</title> <meta charset=“utf-8”> </head> <body> <? $content = json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.j son?screen_name=tushuhei")); var_dump($content); ?> </body> </html> 2013/2/13 17 UT Startup Gym
  • 18. var_dump の結果をよく見る array(16) { [0]=> object(stdClass)#1 (19) { ["created_at"]=> string(30) "Fri Oct 19 12:49:07 +0000 2012" ["id"]=> int(259274981630947329) ["id_str"]=> string(18) "259274981630947329" ["text"]=> string(54) "iconfinder が twitter bootstrap 仕様になってる" $content[0]->text ["source"]=> string(3) "web" ["truncated"]=> bool(false) ["in_reply_to_status_id"]=> NULL ["in_reply_to_status_id_str"]=> NULL ["in_reply_to_user_id"]=> NULL ["in_reply_to_user_id_str"]=> NULL ["in_reply_to_screen_name"]=> NULL ["user"]=> object(stdClass)#2 (38) { ["id"]=> int(109813658) 2013/2/13 18 UT Startup Gym ["id_str"]=>
  • 19. <html> (略) <body> <? $tweets = json_decode(file_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?screen_name=tus huhei")); ?> <? foreach ($tweets as $tweet): ?> <div> <img src="<?=$tweet->user->profile_image_url?>"> <span><?=$tweet->text?></span> <span><?=$tweet->created_at?></span> </div> <? endforeach ?> </body> </html> # さらに CSS を駆使してデザインしてみよう # さらにさらに javascript を駆使してユーザ名を入力できるようにしよう 2013/2/13 19 UT Startup Gym
  • 20. おまけ $ emacs yahoo.php <? echo file_get_contents("http://yahoo.co.jp"); 2013/2/13 20 UT Startup Gym