Successfully reported this slideshow.

More Related Content

More from Shuhei Iitsuka

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

  1. 1. 第2回初心者勉強会 2013/2/13 1 UT Startup Gym
  2. 2. UT Startup Gym とは? アイデアをカタチにするプログラム プロジェクト 企画から実装まで スタートアップ 2013/2/13 2 UT Startup Gym
  3. 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. 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. 5. ウェブアプリの仕組み HTTP PHP など で記述 URI (リクエスト) データベース HTML (レスポンス) ブラウザ ウェブサーバ 前回 今回 API 外部サービス 2013/2/13 5 UT Startup Gym
  6. 6. PHP でやります • PHP でプログラムを書いて、実行する。 • ターミナルを起動 – mac 「アプリケーション」→「ユーティリティ」→「ター ミナル.app」 – win VirtualBox起動→「検索」→「端末」 • エディタでプログラムを編集 – vim か emacs か nano • 実行 2013/2/13 6 UT Startup Gym
  7. 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. 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
  9. 9. 実行する $php test.php Hello World! $ 2013/2/13 9 UT Startup Gym
  10. 10. プログラムの編集->実行 $ emacs test.php #編集 <? ... $ php test.php #実行 2013/2/13 10 UT Startup Gym
  11. 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. 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. 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. 14. PHP 入門 2013/2/13 14 UT Startup Gym
  15. 15. PHP でつくるウェブアプリ • ユーザが php ファイルにリクエストを送る • サーバ (Apache) のモジュール (mod_php) がその php ファ イルを実行 • 出力結果がレスポンスとして返される • ブラウザがその出力結果を表示する URI (リクエスト) 実行 出力結果 (レスポンス) 実行結果 ブラウザ ウェブサーバ PHP ファイル 2013/2/13 15 UT Startup Gym
  16. 16. (発展) Module と CGI • PHP は Module タイプで開発するのがメジャー 2013/2/13 16 UT Startup Gym
  17. 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. 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. 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. 20. おまけ $ emacs yahoo.php <? echo file_get_contents("http://yahoo.co.jp"); 2013/2/13 20 UT Startup Gym

×