OpenLaszloでマルチデバイス対応RIAを作ろう

第12回FlashライクなiPhone/iPod touch対応サイトの作成その1]

これまでの記事の総仕上げとして、PC/iPhone/iPod touchなどのマルチデバイスで動くFlashっぽいアプリを作成してみましょう。

OpenLaszloは一つのソースからFlashあるいはHTML5で動くアプリを作成できます。HTML5として作成すればiPhone/iPod touchといったFlash非対応デバイスでもFlashで作ったかのような動きのあるアプリ・サイトを作成できます。

アプリの概要

Twitterの画像付きツイートを検索して、画像リストを表示する、というアプリです。見た目は最近流行りのInstagram風にしてみたいと思います。

アプリのデモ

まずはiPhone/iPod touchから以下をクリックして完成品デモをご覧ください。

OpenLaszloデモ
URL:http://www.openlaszlo-ason.com/DEMO/g12/

画面のレイアウトサイズはiPhone/iPod touch向けに作っていますが、もちろんPC(HTML5対応のブラウザ)でも動作します。

画面は2種類。初期画面はサムネイル画像の一覧表示です。更新ボタンを押すと、画像一覧を取得しなおします。

画像

サムネイル画像のどれか(この例では右上の画像)をクリックすると、拡大画像とともにツイートが表示されます。戻るボタンを押すとサムネイル画像一覧に戻ります。

画像

アプリの仕様・制限

アプリの仕様、制限は次のとおりです。学習用に大雑把に作っており、細かい調整はしていません。

  • OpenLaszlo4.9.0のHTML5のSOLOモードでコンパイル・デプロイする
  • Twitterの検索APIを使用してツイートを取得する
  • ツイートの取得はクロスドメイン通信を簡単にするためにPHPプログラムを経由する
  • 取得するツイートはtwitpicの画像URLが含まれているもののみ
  • twitpicの画像URLが短縮URLになっているものは展開できない
  • iPhone/iPod touchの画面の縦横切り替えに対応

ソースコード

完成品デモのソースコードです。これを詳細に解説していきます。

リスト1
<canvas proxied="false" width="100%">  
  <!--【設定部】-->
  <attribute name="num" value="32"/><!--Twitterからの取得データ数-->
  <dataset name="ds" request="true" src="${'http://www.openlaszlo-ason.com/php/request.php?url=http://search.twitter.com/search.atom?rpp='+canvas.num+'%26lang=ja%26q=twitpic'}" />
  <class name="twitpic_mini" extends="image" width="${this.height}" height="${(canvas.height-btn.height)/4}" stretches="both" />
  <!--【表示部】-->
  <simplelayout/>
  <!--ボタン-->
  <button id="btn" width="${canvas.width}" height="40" fontsize="18" fontstyle="bold">更新
    <handler name="onclick">
      if(this.text=="更新"){
        ds.doRequest();
      }else{
        this.setAttribute('text',"更新");
        showLeft.doStart();
      }
    </handler>
  </button>
  <!--画像エリア-->
  <hbox width="${canvas.width*2}">
    <animator id="showLeft" start="false" attribute="x" to="0" duration="300" onstop="parent.setAttribute('align','left');"/>
    <animator id="showRight" start="false" attribute="x" to="${-canvas.width}" duration="300" onstop="parent.setAttribute('align','right')"/>
    <!--左画面(サムネイル画像一覧)-->
    <view width="${parent.width/2}" >
      <wrappinglayout spacing="0"/>
      <twitpic_mini datapath="ds:/feed/entry" >
        <handler name="ondata">
          var tweet = this.datapath.xpathQuery('content/text()');
          var start = tweet.indexOf("http://twitpic.com/");
          var url = "http://twitpic.com/show/mini" + tweet.substring(Number(start)+18,Number(start)+25);
          this.setAttribute('src',url);
        </handler>
        <handler name="onclick">
          showRight.doStart();
          btn.setAttribute('text',"戻る");
          rightview.datapath.setFromPointer(this.datapath);
          img.setAttribute('src',this.src); 
        </handler>
      </twitpic_mini>
    </view>
    <!--右画面(画像拡大、ツイート)-->
    <vbox id="rightview" width="${parent.width/2}" datapath="" spacing="2">
      <image id="img" align="center" width="${canvas.height/1.7}" height="${this.width}" stretches="both"/>
      <text datapath="author/name/text()" fontstyle="bold" fgcolor="blue" textdecoration="underline">
        <handler name="onclick">
          var url = this.datapath.xpathQuery('../uri/text()');
          lz.Browser.loadURL(url,'_blank'); 
        </handler>
      </text>
      <text datapath="content/text()" multiline="true" width="${parent.width}"/>
    </vbox>    
  </hbox>
</canvas>

PHPプログラムの準備

Twitterから情報を取得するためにPHPプログラムを経由します。アプリのあるドメインとは別のドメインのサイトと通信するいわゆるクロスドメイン通信を可能にするためです。リスト2のrequest.phpをWebサーバに保存します。urlというパラメータで受け取ったURLにアクセスし、取得したデータを返すだけのPHPプログラムです。

リスト2 request.php
<?php
$url = $_GET['url'];
header("Content-type: application/xml; charset=UTF-8");
readfile($url);
?>

ソースのアウトライン

ソースは設定部と表示部に分かれています。

設定部では設定している取得画像数は今回ソースの中にハードコーディングしていますが、こういった数値設定などは別ファイルにしておくと設定を変えたときにいちいちコンパイルしなおす手間が省けます。

クラスの設定については、他のアプリでも使えそうな汎用的なものにできた場合は、これも別ファイルにして必要に応じてインクルードする形にすると使い回しができて良いです。

設定部

グローバル設定

リスト3
  <attribute name="num" value="32"/><!--Twitterからの取得データ数-->

リスト3はTwitterからデータをいくつ取得するかの設定です。valueで数値を設定しています。この値にはソースのどこからでもcanvas.numでアクセスできます。いわゆる定数・変数の設定です。

データセット

リスト4
  <dataset name="ds" request="true" src="${'http://www.openlaszlo-ason.com/php/request.php?url=http://search.twitter.com/search.atom?rpp='+canvas.num+'%26lang=ja%26q=twitpic'}" />

リスト4はデータセットです。srcにXMLデータの場所を指定します。ここではTwitter検索APIのURLを指定しています。前半の http://www.openlaszlo-ason.com/php/request.php?url= は、PHPプログラムです。request.phpのurlパラメータの値として、Twitter検索APIのURLである http://search.twitter.com/search.atom?rpp='+canvas.num+'%26lang=ja%26q=twitpic を指定しています。%26というのは&のことです。意味は、twitpicという文字列を含む日本語のツイートをcanvas.num個取得、です。

どんなXMLが返ってくるかは試しにブラウザで下記のURLににアクセスしてみてください。

request="true"で、アプリ起動時に自動的にデータ取得するようにしています。

サムネイル画像クラス

リスト5
  <class name="twitpic_mini" extends="image" width="${this.height}" height="${(canvas.height-btn.height)/4}" stretches="both" />

リスト5はサムネイル画像用のクラスです。extends="image"で&ltimage&gtを継承しています。高さの設定はheight="${(canvas.height-btn.height)/4}"で、ブラウザ画面の高さ(canvas.height)からボタンの高さ(btn.height)を引いた残り全部の4分の1、の意味です。幅(width)は高さと同じになるようにしているので、正方形になります。stretches="both"で縦横のサイズをオリジナルサイズに関係なく指定サイズに自動調整されるようにしています。

表示部

リスト6
  <simplelayout/>
  <button width="${canvas.width}" height="40" />
  <!--画像エリア-->
  <hbox width="${canvas.width*2}">
    <!--左画面(サムネイル画像一覧)-->
    <view width="${parent.width/2}" />
    <!--右画面(画像拡大、ツイート)-->
    <view width="${parent.width/2}" />
  </hbox>

リスト6に表示部つまり画面レイアウトのアウトラインを記述しています。おおきく分けるとボタン<button>と画像エリア<hbox>の2つで、<simplelayout>で縦に並べています。タグの入れ子関係と、実際の画面表示を注意深く見比べておいてください。

ボタンの高さは40ピクセル固定。

幅についてはボタンはブラウザ画面の幅、画像エリアはブラウザ画面の2倍。画像エリアは、サムネイル表示用の左画面と拡大画像表示用の右画面の2つに分けています。

続きは次回に。

おすすめ記事

記事・ニュース一覧