かんたん twitter アプリをつくろう
TRANSCRIPT
第 2 回初心者勉強会
04/13/2023 UT Startup Gym1
UT Startup Gym
UT Startup Gym とは?
アイデアをカタチにするプログラム
04/13/2023 2
プロジェクト企画から実装までスタートアップ
UT Startup Gym
スケジュール
04/13/2023 3
Oct, 12
• プログラミング入門
Nov,
12
• プラニング• プロジェクトスタート
Dec,
12
• 開発開始• 冬季開発合宿
Jan, 13
• ウェブデザイン• 週間報告会
Feb, 13
• jQuery, 中間発表
Mar,
13
• 作業会
Apr, 13
• リリース会
ソーシャルウェブアプリケーション , API,bot, HTML5
Keywords:
リーンスタートアップ , ビジネスプラニング , HTML, CSS, PHP, javascript
チーム結成 , 企画 , ディスカッションgit, フレームワーク , MySQL, Apache
シナリオ , ペルソナ , ワイヤフレーム , サイトマップ , DB スキーム
ゲーミフィケーション , 仮説検証 , データマイニング , アクセシビリティ
レスポンシブデザイン , プレゼンテーション
UT Startup Gym
M D 講師 タイトル 要素
10 13飯塚 かんたん Facebook アプリをつくる HTML, CSS, js
21飯塚 かんたん Twitter アプリをつくる UNIX, vim, PHP
27川上 かんたん アンケートフォームをつくる MySQL, MVC
11 3石村 ビジネスプランニング ビジネスプラン、リーンスタートアップ
10AWS 高山様 サーバを立てよう 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 リリース会
04/13/2023 4
UT Startup Gym
ウェブアプリの仕組み
04/13/2023 5
URI ( リクエスト )
HTML ( レスポンス )
HTTP
ブラウザ ウェブサーバ
データベース
PHP などで記述
外部サービスAPI
前回今回
UT Startup Gym
PHP でやります• PHP でプログラムを書いて、実行する。• ターミナルを起動– mac「アプリケーション」→「ユーティリティ」→「ターミナル .app 」– winVirtualBox 起動→「検索」→「端末」
• エディタでプログラムを編集– vim か emacs か nano
• 実行
04/13/2023 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
04/13/2023 7
UT Startup Gym
エディタで書く$emacs test.php # emacs で test.php
を編集する
# vim でもおk
<?phpecho "Hello World!\n";
Ctrl+X Ctrl+S => 保存Ctrl+X Ctrl+C => 終了04/13/2023 8
UT Startup Gym
実行する$php test.phpHello World!$
04/13/2023 9
UT Startup Gym
プログラムの編集 -> 実行$ emacs test.php # 編集
<? ...
$ php test.php # 実行
04/13/2023 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 というデータ形式。
04/13/2023 11
UT Startup Gym
json
{“id”: 1,“name”: “Shuhei Iitsuka”,“age”: 23,“friends”: [
{“id”: 2,“name”: “Kazuhiro Kawakami”,
},{
“id”: 3,“name”: “Naofumi Wakabayashi”,
}]
}
04/13/2023 12
UT Startup Gym
よくわからないので
04/13/2023 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.php
json_decode? (´ ・ ω ・` )var_dump? (´ ・ ω ・` )
とりあえず、かけました。
UT Startup Gym
PHP 入門
04/13/2023 14
UT Startup Gym
PHP でつくるウェブアプリ• ユーザが php ファイルにリクエストを送る• サーバ (Apache) のモジュール (mod_php) がその
php ファイルを実行• 出力結果がレスポンスとして返される• ブラウザがその出力結果を表示する
04/13/2023 15
URI ( リクエスト )
出力結果 ( レスポンス )
ブラウザ ウェブサーバ PHP ファイル
実行
実行結果
UT Startup Gym
( 発展 ) Module と CGI
• PHP は Module タイプで開発するのがメジャー
04/13/2023 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.json?screen_name=tushuhei"));
var_dump($content);?>
</body></html>04/13/2023 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 仕様になってる " ["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) ["id_str"]=> string(9) "109813658" ["name"]=> string(12) " 飯塚修平 " ["screen_name"]=> string(8) "tushuhei" ["location"]=> string(14) "Tsukuba, Japan" ["url"]=> string(19) "http://tushuhei.com”
04/13/2023 18
$content[0]->text
UT Startup Gym
<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 を駆使してユーザ名を入力できるようにしよう
04/13/2023 19
UT Startup Gym
おまけ$ emacs yahoo.php
<?echo file_get_contents("http://yahoo.co.jp");
04/13/2023 20