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

かんたん Twitter アプリをつくろう
第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 でもおｋ <?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

Check these out next

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

Recommended

More Related Content

Slideshows for you(20)

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

More from Shuhei Iitsuka(20)

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