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

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

この記事を読むのに必要な時間:およそ 3.5 分

これまでの記事の総仕上げとして,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>

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/

コメント

コメントの記入