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)がおすすめです。

Googleを使ったなんちゃって地域化

テレビで子供が、言った。たぶん。

自動翻訳についてどう思いますか?

あのう、その質問自体が古いと思います。今では、外国語を見ることは珍しいですから。

ソフトウェアやWebサイトを世界に向けて発信したいと思うなら、複数の言語や地域に対応させるというのがよくやられる戦略です。複数の言語や地域に簡単に対応できるようにするのが「国際化」、実際に特定の言語や地域に対応させるのが「地域化」です。国際化・地域化にはある程度決まったやり方があります。拙著(Java)記事(PHP)でかつて紹介しました。しかし、そういった伝統的な方法には問題があります。地域化のためには、対象となる言語に堪能な人に頼らなければならないのです。友達が世界中にいたり予算が潤沢にあったりしない限り、日本語と英語、あと一つくらいで精一杯なことが多いのではないでしょうか。

しかし実は、ソフトウェアの国際化はとても簡単ですし、地域化に至ってはほぼ自動的にできてしまうのです。次のような単純な手順で実現できます。

  1. jQueryを有効にする
  2. http://labs.unfindable.net/translator.min.js を読み込む
  3. 対象の要素に特定のクラス属性を与える(例:message)
  4. 地域化のための関数を呼び出す(最初の引数はクラス属性値。2番目の引数は元の言語)
    net.unfindable.labs.translator.translate('message','ja');

サンプル

日本語が第1言語の人が開いたときには何も起こりません(機械翻訳を意識した日本語)。

日本語

英語が第1言語の人が開くと、(だいたい読める)英語に自動的になります。事前に英語の文章を用意しておく必要はありません。

英語

フランス語が第1言語の人が開くと、(たぶん通じる)フランス語に自動的になります。もちろん、事前にフランス語の文章を用意しておく必要はありません。

フランス語

HTMLはこんな感じになります(当たり前ですが、英語やフランス語の文章を用意する必要はありません。ブラウザの言語を取得するための処理も不要です)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title class="message">Googleを使ったなんちゃって地域化</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.4.2");
      google.load("language", "1");
    </script>
    <script type="text/javascript" src="http://labs.unfindable.net/translator.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        net.unfindable.labs.translator.translate('message','ja');
      });
    </script>
  </head>
  <body>
    <h1 class="message">Googleを使ったなんちゃって地域化</h1>
    <p class="message">テレビで子供が、言った。たぶん。</p>
    <blockquote>
      <p class="message">自動翻訳についてどう思いますか?</p>
      <p class="message">あのう、その質問自体が古いと思います。今では、外国語を見ることは珍しいですから。</p>
    </blockquote>
    <p class="message">ソフトウェアの国際化はとても簡単ですし、地域化は自動です。</p>
    <ol>
      <li class="message">jQueryを有効にする</li>
      <li class="message">http://labs.unfindable.net/translator.min.js を読み込む</li>
      <li class="message">対象の要素に特定のクラス属性を与える(例:message)</li>
      <li><span class="message">地域化のための関数を呼び出す(最初の引数はクラス属性値。2番目の引数は元の言語)</span><br /><code>net.unfindable.labs.translator.translate('message','ja');</code></li>
    </ol>
  </body>
</html>

こうなると、機械翻訳でうまく訳せるような日本語を書く能力が大切になるかもしれません。Google翻訳であーだこーだと試してみるのもいいかもしれませんが、オンライン翻訳ツールをうまく使う10の秘訣!みたいな定石ができてくるとうれしいです。(いずれにしても、うまく訳せているかどうかを判断するために、日本語以外の言語を一つ読めなければなりません。)

補足

  • 地域化のための関数呼び出しは、ページのロードが終わってからでなければなりません。サンプルのように、
    $(document).ready(function() { net.unfindable.labs.translator.translate('message','ja'); });

    とするのが簡単でしょう。

  • FirefoxのアドオンQuick Locale Switcherを使えば、ブラウザの言語を簡単に切り替えられます(ユーザインターフェイス言語は切り替えないようにします。そうしないと、切り替えのたびに再起動を要求されてうるさいです)。
    Quick Locale Switcher

お約束ですが、こういう話を基本から学びたいという方には、拙著『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 で取得できるもののうち、位置情報がついているもののみです。
  • 非力なサーバでストリーミングをしているので、アクセスが多いときっとだめになります。
  • 「宇宙からつぶやく」という表現において、「宇宙」には大気圏内は含まれません。
  • 宇宙(というか大気圏外)からの最初のつぶやきには、位置情報は含まれていません。

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

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

TwitterとGoogleマップ, Google翻訳

Twitearth

Twitterに流れ込み、はき出される膨大な情報を、エンドユーザ向けのエンタメに生かせないものか。Twitterのつぶやきには位置情報を付加できるのだが、今日現在、位置情報が付加されているつぶやきは、全体の0.5%程度しかない。特別な手続きなしにTwitterから取れるつぶやきの0.5%程度なら、地図上でリアルタイムに配置していくことができるだろう。ついでに、外国語が苦手な人向けに、すべてのつぶやきは日本語に訳しておこう。

厳密に言えば、翻訳先の言語はつねに日本語というわけではなく、ブラウザの言語設定にあわせている。たとえば、ブラウザの言語設定を英語にしているユーザが相手なら、すべてのつぶやきを英語に訳しておくのが親切だろう。

これはいわゆるマッシュアップというやつだが、使っているサービスは以下の通り。

適当なサーバがあれば、認証方法をOAuthに変えて公開する。

公開した:Twitearth この星のつぶやき

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