Your SlideShare is downloading. ×
0
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

750

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
750
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 第2回初心者勉強会2013/2/13 1 UT Startup Gym
  • 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, 132013/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 php52013/2/13 7 UT Startup Gym
  • 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. 実行する$php test.phpHello World!$2013/2/13 9 UT Startup Gym
  • 10. プログラムの編集->実行$ emacs test.php #編集<? ...$ php test.php #実行2013/2/13 10 UT Startup Gym
  • 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. 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.json?screen_name=tushuhei"));var_dump($contents)$ php twitter.phpjson_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.json?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=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. おまけ$ emacs yahoo.php<?echo file_get_contents("http://yahoo.co.jp");2013/2/13 20 UT Startup Gym

×