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

第2回初心者勉強会

2013/2/13 1 UT Startup Gym

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


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 リリース会

ウェブアプリの仕組み
HTTP
PHP など
で記述

URI (リクエスト) データベース

HTML (レスポンス)

ブラウザウェブサーバ

前回
今回
API
外部サービス


PHP でやります
• PHP でプログラムを書いて、実行する。
• ターミナルを起動
– mac
「アプリケーション」→「ユーティリティ」→「ター
ミナル.app」
– win
VirtualBox起動→「検索」→「端末」
• エディタでプログラムを編集
– vim か emacs か nano
• 実行


PHP ある？
• $php –v;
PHP 5.x.x (cli) (built: ...

• mac はあるはず。なければ port とか brew とか

• ubuntu はないかも。なければ
$sudo apt-get update
$sudo apt-get install php5


エディタで書く
$emacs test.php # emacs で test.php
を編集する
# vim でもおｋ

<?php
echo "Hello World!n";

Ctrl+X Ctrl+S => 保存
Ctrl+X Ctrl+C => 終了


実行する
$php test.php
Hello World!
$


プログラムの編集->実行
$ emacs test.php #編集

<? ...

$ php test.php #実行


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 というデータ形式。


json
{
“id”: 1,
“name”: “Shuhei Iitsuka”,
“age”: 23,
“friends”: [
{
“id”: 2,
“name”: “Kazuhiro Kawakami”,
},
{
“id”: 3,
“name”: “Naofumi Wakabayashi”,
}
]
}


よくわからないので
$ 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? (´・ω・｀)

とりあえず、かけました。


PHP 入門


PHP でつくるウェブアプリ
• ユーザが php ファイルにリクエストを送る
• サーバ (Apache) のモジュール (mod_php) がその php ファ
イルを実行
• 出力結果がレスポンスとして返される
• ブラウザがその出力結果を表示する

URI (リクエスト) 実行

出力結果 (レスポンス) 実行結果

ブラウザウェブサーバ PHP ファイル


(発展) Module と CGI

• PHP は Module タイプで開発するのがメジャー


つくってみよう
$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>

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)
["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 を駆使してユーザ名を入力できるようにしよう


おまけ
$ emacs yahoo.php

<?
echo file_get_contents("http://yahoo.co.jp");


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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

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

Más de Shuhei Iitsuka

Más de Shuhei Iitsuka (20)

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