つぶやきの限界(140文字)への挑戦


4627847327拙著『Webアプリケーション構築入門』のサンプルとして、Twitterクライアントを作りました。

単なるクライアントではつまらないので、つぶやきが140文字未満のときは、文字を追加して139から140文字になるようにしています。

本稿執筆時点でのTwitterの仕様では、ちょっと面白い結果になるみたいです。仕様が変わったら公開を止めます。

Twitterのアカウント情報は保存しませんが、気になる人は https://twitter.com/settings/applications で削除してください。

試してみる

しばらくすると改竄されてしまいました。Twitter社には書き換える権限があるのかもしれませんが、それを頻繁に行使されるとちょっと不安になりますね(ジャスミン革命に使えるのかしら)。

参考書

矢野啓介『プログラマのための文字コード技術入門』(技術評論社, 2012)

4797361190徳丸浩『体系的に学ぶ 安全なWebアプリケーションの作り方』(ソフトバンククリエイティブ, 2011)

OAuth認証でTwitterを利用するWebアプリケーション(PHPの場合)


OAuth認証が必要なAPIでは、Twitter APIとFacebook APIが有名ですが、ちょっと仕様が違うので、使い方を簡単に紹介しようとすると、記事を分けなければなりません。さらに、JavaとPHPの両方を学べるというお得な本を書いたこともあって、その読者をサポートするために、JavaとPHPの両方で記事を書かなければなりません。都合、以下の4パターンが必要です。

今回は、「PHPでTwitter API」です。「JavaでFacebook API」はまた別の機会に。

アプリの登録

http://dev.twitter.com/appsでアプリケーションを登録し、Concumer keyとConsumer secretを取得してください。その際、クライアントアプリケーションではなくブラウザウェブアプリケーションとして登録するように注意してください。

OAuthのためのライブラリ

PHPには、標準の「PECL/oauth」や準標準と言える「Pear HTTP_OAuth」、Twitterに特化した「Pear Services_Twitter」がありますが、例によって、PECLはWindowsで使いにくいし、HTTP_OAuthはベータ版、Services_Twitterはアルファ版なので、さっさと見限って「abraham / twitteroauth」を使いましょう。

OAuth.phpとtwitteroauth.phpをダウンロードして、ウェブサーバで配信できる場所に置きます。

cURL

XAMPP

PHPでcURLを使うために、php.iniに以下のように記述して、Apacheを再起動します。

extension=php_curl.dll

Ubuntu

次のコマンドを実行してcURLモジュールをインストールしてからApacheを再起動します。

sudo apt-get install php5-curl

4627847327お約束ですが、このあたりでもうついて行けないという場合は、拙著『Webアプリケーション構築入門』などを参照してください。以下のPHPプログラミングで必要な知識も本書にまとめてあります。

OAuth認証

以下の3画面で認証することにします(oauth-start.phpとoauth-end.phpは一つのファイルにまとめることもできますが、ここではわかりやすいように二つに分けています)。

  1. OAuth認証のためのURIを生成し、それにアクセスするためのリンクを表示するoauth-start.php
  2. アプリケーションを許可するTwitterページ
  3. Twitterからのコールバックを受信し、access tokenとtoken secretを取得するoauth-end.php

実装

oauth-start.php

OAuth認証の入り口となるoauth-start.jspは以下のようになります。「Consumer key」や「Consumer secret」、コールバックURIの部分は、状況に合わせて書き換えてください。

<?php
require_once('twitteroauth.php');

session_start();

//セッションを節約したい場合は別ファイルに書いておく。
$_SESSION['consumer_key'] = Consumer key;
$_SESSION['consumer_secret'] = Consumer secret;
$callbackUri = 'http://localhost/twitter/oauth-end.php';

$connection = new TwitterOAuth($_SESSION['consumer_key'], $_SESSION['consumer_secret']);
$request_token = $connection->getRequestToken($callbackUri);
$_SESSION['oauth_token'] = $token = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];

$authUrl = $connection->getAuthorizeURL($token);
?>
<!doctype html>
<html>
  <head>
    <title>OAuth Start</title>
  </head>
  <body>
    <p><a href="<?php echo $authUrl; ?>">Twitter OAuth認証開始</a></p>
    <p><a href="logout.php">logout</a></p>
  </body>
</html>

oauth-end.php

コールバック後の処理を実装するoauth-endは以下のようになります。

<?php
require_once('twitteroauth.php');

session_start();

$connection = new TwitterOAuth($_SESSION['consumer_key'], $_SESSION['consumer_secret'],
                $_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
$access_token = $connection->getAccessToken($_GET['oauth_verifier']);
unset($_SESSION['oauth_token']);
unset($_SESSION['oauth_token_secret']);

//セッションに記録する。データベースなどを使ってもよい。
$_SESSION['access_token'] = $access_token;
?>
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Twitter OAuth認証完了</title>
  </head>
  <body>
    <pre><?php print_r($access_token); ?></pre>
    <p>access_tokenをセッションに保存した</p>
    <p><a href="post.php">送信テスト</a></p>
    <p><a href="logout.php">logout</a></p>
  </body>
</html>

つぶやく

認証が終わったら、以下のようなコードでつぶやけます。

<?php

header('Content-type:text/plain; charset=utf-8');
require_once('twitteroauth.php');

session_start();

$access_token = $_SESSION['access_token'];
$connection = new TwitterOAuth($_SESSION['consumer_key'], $_SESSION['consumer_secret'],
                $access_token['oauth_token'], $access_token['oauth_token_secret']);

$message = "テスト at " . time();
$parameters = array('status' => $message);
$status = $connection->post('statuses/update', $parameters);
print_r($status);

ブラウザを再起動すればはじめに戻りますが、次のようなlogout.phpを作っておいてもいいでしょう。

<?php
session_start();
session_destroy();
?>
<!doctype html>
<html>
  <head>
    <title>Logout</title>
  </head>
  <body>
    <p><a href="oauth-start.php">start</a></p>
  </body>
</html>

なぜブログを書くのか(第8の説)—小さなかけら


「ブログ始めました」ということを聞かなくなって久しい。代わりによく聞くのが、「Twitter始めました」や「Facebook始めました」だ。ところが先日、ある学生がブログを始めたという。そこで、その学生に勇気を与えるために、ブログについての言説を、ローゼンバーグ『ブログ誕生 』(NTT出版, 2010)から引用していくつか紹介しよう。

「ウェブにゴミを増やすのか?」と不安になったら、この言葉を思いだそう(SFをブログに置換)。

スタージョンの法則「たしかにSFの90%はゴミだ。でもそれは、どんなものでも90%はゴミだからだ」(p.390)

「FacebookやTwitterのほうがいいんじゃないの?」と思ったら、この言葉を思いだそう。

フェイスブックやマイスペースやツイッターに人が集まるようになったからといって、ブログの記事が書かれたり読まれたりすることがなくなるわけではない。ただ、読み書きのパターンは変化するだろう。ごく少数の友達と気軽にやりとりをするチャンネルとしては、ソーシャルネットワークの方が簡単で効率的だ。世界に訴えたいことが140文字以内で表現できることなら、ブログではなくツイッターを選んでいい。このような状況の変化をうけ、ブログの世界ではすでに変化が始まっている。遠くまで声を届かせたいという意識が若干ながら弱くなり、じっくりと語る雰囲気へと変化しようとしている。(p.426)

「なぜブログを書くのか?」と思ったら、この言葉を思いだそう。

ブログの記事は小さなかけらだが、優れたブログはライターがビジョンを持ってかけらを集めており、そこには確たる根拠がある。単なる切れ端ではなく、T・S・エリオットの有名な『荒地』にあるように、「廃墟とならないように集められた」かけらなのだ。(p.446)

『ブログ誕生 』はブログの歴史をよくまとめている良書。膨大な参考文献リストはここで公開されている。

すでに廃墟となってしまったかもしれない世界で、私もかけらを集めている。

ブラジル・シンドローム(Google Earth)


Google Maps版の続き。

Google Earthプラグインは操作環境の制約が厳しいという問題があります。たとえば、iPadでは動きません。

Google Earth
フクシマの反対側は海

ピンをクリックすると、地球の反対側に移動するようになっています。地球が完全な球では無いことは考慮していませんが、WolframAlphaの結果とだいたい同じなので、とりあえずよしとしましょう。

Googleのサンプルがありましたか(私のFirefoxはいつも固まってしまうけど)。

追記:Mathematicaでやるのが簡単です。

ブラジル・シンドローム(Google Maps)


メルトダウンと聞いて「何をいまさら」と思うのは、体制にとって都合のいい反応なのでしょう。

それはともかく、「メルトダウンした燃料がどんどん下に落ちていって、ついには地球の反対側つまりブラジルを汚染する」という話があって、ブラジルの人たちが逃げ惑っているそうです(嘘)。

地球儀を使えば、フクシマの反対側が陸地ではないことはわかるのですが、Google Mapsで確認しておきましょう。ブラジルでパニックや風評被害があってもいけませんし(WolframAlphaで確認する方法を先日紹介しました)。

Google Maps
フクシマの反対側は海

地球が完全な球では無いことは考慮していませんが、WolframAlphaの結果とだいたい同じなので、とりあえずよしとしましょう。

お約束ですが、Google Mapsを使ってオリジナルのウェブページをつくる方法は、拙著『Webアプリケーション構築入門』で紹介しています。

Mathematicaでやるのが一番簡単と思いつつ、Google Earthで確認する方法を後で書きます。(追記:書きました。

スリーマイル島の裏側はチャイナではないしフクシマの裏側もブラジルではない (WolframAlpha)


まあ、常識なんでしょうが、みんな大好きWolframAlphaで確認しておきましょう。

「location “three mile island”」で検索
スリーマイル島は40.15°N, 76.72°W
「40.15°N, 76.72°W antipode」で問い合わせ

チャイナからはかなり遠いですね。

スリーマイル島よりレベルが高いせいか、フクシマは「antipode fukushima」という1回の問い合わせでできました。ブラジルというよりは、ブラジルの南の海ですね。



Google Mapsで調べる方法:ブラジル・シンドローム

PayPalサンドボックス入門


PayPalを使って課金する方法が、情報系の学生に必須の知識になりつつあるそうです(そういえば私のいる研究室の卒論生にも、システムにPayPalを組み込んでいる人がいました)。乗り遅れたくない人のために、最初の部分を書いておきます。

  1. PayPal Sandbox で「Sign Up Now」をクリックして開発者登録をする
  2. ログイン後、テストアカウント(preconfigured account)を作る(sellerとbuyer)
  3. Enter Sandbox Test Site
  4. Sellerでログインする
  5. 個人設定→保存したボタン
  6. 商品を登録するとフォームが生成される(100万円くらいの商品にすると気持ちがいい)
  7. フォームのボタンをクリックして、buyerでログインすると買い物ができる

Enjoy!

去年はこんなに暑かったっけ?


とか「7月ってこんなに暑かったっけ?」というセリフをよく聞いたのですが、実際のところどうだったのでしょう。夏暑いのはあたりまえなので、気のせいのような気もしますが。

まずは、「weather tokyo 2008 july」

次に「weather tokyo 2009 july」

最後に「weather tokyo 2010 july」

(Wolfram|Alphaのデータを信用して)結果を見ると、最低気温・最高気温ともに今年の7月は高かったということがわかります。「たった1度なんかだから、暑いと感じるのは気のせいなんじゃない」かとも思いますが、(温度変化のパターンがだいたい同じだとすれば)グラフが上に1度平行移動したと思えば、やっぱり暑かったと言えるでしょう。

みんな大好きWolfram|Alphaでした。

3次元版Twitearth この星のつぶやき


Twitterのつぶやきのうち、位置情報の付いているものの一部を翻訳して表示するWebアプリを作ったら、

TwitearthというよりもTwitmapですね

と言われてしまいました。たしかに、2次元的に表示するGoogle Mapsと3次元的に表示するGoogle Earthとの関係から言えば、あれはTwitmapになるのかもしれません。でも、閲覧者の環境にGoogle Earth Pluginがインストールされていれば、下の動画のように3次元的な表示が可能です。


iPhone問題は、Google Earth Pluginが動く環境が限られていることです。Windowsでは、IEとFirefox、Chrome、MacではFirefoxとChrome、Safariで動きます。iPhoneのSafariでは動きません。特に、TwitearthはIEでは動かないので、Windowsは結局FirefoxとChromeだけになります。個人的にはこれで十分なのですが、一般的にはまずいと思うので、起動時は2次元的な(つまりMapsの)表示にしてあるのです。2次元的な表示なら、iPhoneも含めたたいていの環境で動くでしょう。

3次元的な表示にしたい場合は、Google Earth PluginをインストールしてからTwitearthを開いて、「Earth」をクリックしてください。ブラウザをフルスクリーン表示にしてぼーっと眺めるのがおすすめです。

もう一つ、

なんでTwitterのアカウント情報が必要なの?

という問い合わせもありました。

現在は、実装を単純にするために、Twitter Streaming APIへのリクエストをユーザごとに行っています。Streaming APIへのリクエストは、1アカウントにつき1つまでなので、私のアカウントを使い回すわけにはいきません(リクエストが重複すると、古いほうが切断されます)。そのため、ユーザごとのアカウント情報が必要なのです。ユーザごとのストリーミングデータを、現在はサーバで中継していますが、JavaScriptでストリーミングAPIをうまく使う方法がわかれば、今の実装をそのまま移行します。それに期待しているので、今すぐに複雑な実装を試すつもりはありません。ですから、申し訳ないのですが、このアプリを許可してください。許可は恒久的なものではなく、Twitterの連携アプリ確認ページで簡単に取り消せます。

お約束ですが、こういう話を基本から学びたいという方には、拙著『Webアプリケーション構築入門 実践!Webページ制作からマッシュアップまで 』(森北出版, 2011)がおすすめです。

Twitearth この星のつぶやき


宇宙からつぶやくことができるのに、つぶやきに付ける位置情報が「緯度・軽度」ではまずいだろうと思う今日この頃ですが、「緯度・軽度」の情報を持ったつぶやきが、リアルタイムに日本語に(やや無理に)訳され、表示されるようになっています。

Twitearth(Twitterのアカウントで許可してもらう必要があります。許可は、Twitterの連携アプリの確認ページで簡単に取り消せます。)


2010年6月27日(日)の夕方(日本時間)にしばらく動かすと下のようになりました。Twitterが普及していない、位置情報を付加できる端末が少ない、位置情報をつけ(たく)ない人が多い、みんな寝てる、などの理由(?)でつぶやきの少ない地域があります。

Twitearth

補足

  • 翻訳先の言語はブラウザの設定によります。例えば、ブラウザの設定をフランス語にしていれば、つぶやきはフランス語に訳されます。
  • 詳細は「Twitter とGoogleマップ, Google翻訳」を参照。
  • FirefoxやChrome、Safari、Operaで動作を確認しています。Internet Explorerでは動きません。
  • 対象にしているのはTwitterの全つぶやきのごく一部、何もせずにhttp://stream.twitter.com/1/statuses/sample.json で取得できるもののうち、位置情報がついているもののみです(Streaming API Documentation)。
  • 非力なサーバでストリーミングをしているので、アクセスが多いときっとだめになります。
  • 「宇宙からつぶやく」という表現において、「宇宙」には大気圏内は含まれません。
  • 宇宙からの最初のつぶやきには、位置情報は含まれていません(詳細データ)。

3次元版Twitearth この星のつぶやき

お約束ですが、こういう話を基本から学びたいという方には、拙著『Webアプリケーション構築入門 実践!Webページ制作からマッシュアップまで 』(森北出版, 2011)がおすすめです。