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

1,024 views
932 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

かんたん 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, 132013/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 php52013/2/13 7 UT Startup Gym
  8. 8. エディタで書く$emacs test.php # emacs で test.php を編集する # vim でもおk<?phpecho "Hello World!n";Ctrl+X Ctrl+S => 保存Ctrl+X Ctrl+C => 終了2013/2/13 8 UT Startup Gym
  9. 9. 実行する$php test.phpHello 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<?echofile_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?screen_name=tushuhei");$ php twitter.phpfile_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.json?screen_name=tushuhei"));var_dump($contents)$ php twitter.phpjson_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.json?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=tushuhei")); ?> <? 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

×