これまでの記事の総仕上げとして，
OpenLaszloは一つのソースからFlashあるいはHTML5で動くアプリを作成できます。HTML5として作成すればiPhone/
アプリの概要
Twitterの画像付きツイートを検索して，
アプリのデモ
まずはiPhone/
- OpenLaszloデモ
- URL：http://
www. openlaszlo-ason. com/ DEMO/ g12/
画面のレイアウトサイズはiPhone/
画面は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>