アシアルブログ for iPhone
こんにちは、中川です。
先日、コントロールプラスさんと一緒に、iPhoneアプリ公開用のサイト、iPhone LABS を公開しました。手始めにそろばんアプリの「Abacus」を作り、今後ますます力を入れていくことになると思います。
本当は、iPhoneアプリ用のネタを書きたいところではありますが、iPhone SDKのNDAの問題でどこまで、書いていいのかわからないため、今回は、息抜きがてらアシアルブログのiPhone用インターフェースを作ってみました。
iPhone用アシアルブログは、
http://blog.asial.co.jp/iphone/
でアクセスすることができます。
とりあえず、別開発で忙しいこともあり、あまり時間をかけず簡単に実装したかったので、「iui」という、JavaScriptのライブラリを使うことにしました。
設置は、いたって簡単で、http://code.google.com/p/iui/downloads/listから、
最新版 iui-0.13.tar.gz（2008/07/30現在）をダウンロードし、ドキュメントルート以下に、「iui.css」と「iui.js」を配置し読み込みます。
あとは、以下のようにHTML(リンク先は適宜修正してください。)を書くだけです。(あまり量がないので、http://blog.asial.co.jp/iphone/のソースを見てもらったほうが早いかもしれません。)
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="home" title="トップ" selected="true">
<li><a href="/iphone/type/new">新着一覧</a></li>
<li><a href="/iphone/type/ranking">ランキングTOP20</a></li>
<li><a href="/iphone/type/users">ユーザ一覧</a></li>
<li><a href="/iphone/type/category">カテゴリ一覧</a></li>
<li><a href="/iphone/type/tag">人気タグ一覧</a></li>
</ul>
Aタグのリンク先で、以下のような部分的なHTMLを返すようなスクリプトを書けば、
横スライドでいかにもiPhoneアプリらしい、アニメーションで閲覧できるようになります。(リンク先は適宜修正してください。）
<ul id="newlist" title="新着一覧">
<li><a href="/iphone/419">Linuxクライアント...</a></li>
<li><a href="/iphone/418">PostgreSQLの手軽な...</a></li>
<li><a href="/iphone/417">WOWEngine+Away3Dを...</a></li>
<li><a href="/iphone/416">PHPカンファレンス2008に...</a></li>
<li><a href="/iphone/415">アシアル社員のイラスト...</a></li>
<li><a href="/iphone/414">AIRアプリ開発用Eclipse...</a></li>
<li><a href="/iphone/413">JavaScriptフレーム...</a></li>
<li><a href="/iphone/412">Webシステムのテスト</a></li>
<li><a href="/iphone/411">DoCoMo向けにCSS指定...</a></li>
<li><a href="/iphone/410">フリーで使えるセキュリティ...</a></li>
</ul>
若干、私のスクリプトに手抜きがあるため、挙動に怪しい部分も見られますが、簡単に実装できる点ではすばらしいですね。
Yahoo!やGoogleもしっかりiPhone用インターフェースを用意してますし、今後もっといろいろなサイトでも対応してくるのではないでしょうか。
iPhone発売前は、絶対いらないと思っていましたが、社内で開発用にiPhoneを使っていて段々ほしくなってきてしまいました。
悩ましいところですね。。。
