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

第 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 でもおｋ

<?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

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

Documents

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