ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

かちびと.netさんに、iPhoneやAndroid向けのJavaScriptフレームワーク「Wink Toolkit」についての日本語解説記事がありましたのでご紹介させていただきます。

→　かちびと.net　iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った [kachibito.net]

WinkToolkitは、JavaScriptで作られたスマートフォン向けのフレームワークで、エフェクトなどのデザイン面に特化した作りになっているようです。

→　WINK TOOLKIT　公式サイト [winktoolkit.org]

上記のかちびと.netさんの解説記事はサンプルが豊富でわかりやすいですね。

見て貰えると分かるのですが、iPhoneやAndroidのブラウザに対応した実用的なエフェクトがかなりの数用意されているようです。

今後スマートフォン向けサイトもどんどん凝った物になっていくでしょうから、この手の技術は要チェックですね。

関連：

• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• IBM developerWorksにHTML5モバイルアプリ用フレームワーク「Sencha Touch」の記事がありました
• JavaScriptでiPhone/Android向けのソーシャルアプリが作成できるという「ngCore」について解説されたスライドが公開されていました

昨日に続いて今日もブックレビューです。

WEB+DB PRESS vol.61（2011年2月発売号）に、Titanium Mobileを使ったiPhone・Android開発についての記事がありましたので、ご紹介します。

→　amazon　WEB+DB PRESS vol.61 [amazon.co.jp]

→　技術評論社　WEB+DB PRESS vol.61 [gihyo.jp]

Titanium Mobile（以下Titanium）は、カリフォルニアのAppcelerator社が提供している最近人気の開発環境で、JavaScriptでコードを書くことで、iPhoneやAndroidのネイティブアプリを開発できるものです。

今回の記事は巻頭特集として36ページものページを割いて特集が組まれており、このあたりからも人気の高さが伺えます。

記事の構成としては次の通りです。

第1章：Titaniumが拓くiPhone＆Androidアプリ開発の世界
　Webアプリ開発者にとっての「救世主」

第7章：Androidならではの機能を活用！
　「はてなハイクアプリ」開発から学ぶアプリ間連携とメニューボタン活用法

Titaniumとは何かというところから、開発環境のインストール、カメラやGPSといったスマートフォン独自の機能の使い方、そしてさらなる本格アプリ開発と、順を追って解説されているため、どの層の人にとっても読める間口の広い記事になっていると思います。

さすがにJavaScriptの文法などの説明はないため、全くの素人には難しいですが、要所要所でサンプルコードも多く掲載されわかりやすい内容だと思いました。

わたしなどはWebページでのJavaScriptしか使ったことがないため、JavaScriptでネイティブアプリを書くのにはいったいどのように書かれているのだろうと疑問に思いましたが、これらのサンプルコードを見るうちに大体理解することができました。

他にもファイルシステムやSQLiteを使った内部データベースの利用や、検索バーや一覧表示などのスマートフォンならではのUI表示、はてなとの連携など、さらに一歩踏み込んだ実践的な記事も掲載されています。

Titaniumに興味を持っている方は多いと思いますので、ぜひこの機会に試してみてはいかがでしょうか。

関連：

• ブックレビュー：WEB+DB PRESS vol.60
• ブックレビュー：PHP×携帯サイト実践プログラミング
• ブックレビュー：ケータイHTML ポケットリファレンス

IBMの技術文書サイトdeveloperWorksに、HTML5モバイルアプリ用フレームワーク「Sencha Touch」の記事がありました。

→　IBM developerWorks Japan　モバイル Web アプリケーション・フレームワークの比較: 第 4 回 完全なモバイル Web ソリューションとして Sencha Touch を利用する [ibm.com]

「Sencha」は、何度も名前が変わっておりややこしいのですが、むかし「Ext JS」（さらに前はYUI-Ext）と呼ばれていたJavaScriptのフレームワークで、「Sencha Touch」はそのスマートフォン版という位置づけです。

公式ページはこちらになります。

→　Ext Japan　Sencha Touch機能概要 – HTML5モバイルアプリ用フレームワーク [extjs.co.jp]

IBMの記事では、モバイル Web アプリケーション・フレームワークの比較という形で、その「Sencha Touch」について解説しています。

簡単なサンプルと、特徴を紹介しているだけの簡単な記事にはなりますが、Sencha Touchに関する記事はあまり見たことがないので、参考になるのではないでしょうか。

関連：

• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• ケータイのダメダメなJavaScript実装について解説された記事「携帯電話事業者に学ぶ”XSS対策”」
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです

スマートフォン向けのJavaScriptフレームワークとして期待されているjQueryMobileですが、先日新しいバージョンである「jQuery Mobile Alpha 3」がリリースされたようです。

→　jQuery Mobile　jQuery Mobile Alpha 3 Released [jquerymobile.com]

上記のリリースノートによると、480のコミット、150個のバグFIX、240個のユニットテスト項目の追加が行われているとのことです。

合わせてドキュメントも更新されています。

→　jQuery Mobile: Demos and Documentation [jquerymobile.com]

以前のアナウンスではAlpha版は3までという話だったので、そろそろ1.0版正式リリースも近そうですね。

期待したいところです。

関連：

• スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」
• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• @ITのJavaとGoogle App Engineを使ったケータイ開発に関する連載記事「クラウドとフレームワークで超簡単ケータイ開発」

デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」というサイトがオープンしたようです。

→　参考にしたい優れたiPhone(スマフォ)Webデザイン集 – iPhoneデザインボックス [design.web-hon.com]

この手のデザインの参考になりそうなサイトのキャプチャを集めるという手法は以前からあり、幾つか同様のサイトがあります。

当ブログで過去にご紹介させていただいたことのあるサイトや書籍を改めてまとめてみました。

まず、恐らくこの手のサイトの元祖であると思われる、ケータイサイトのキャプチャを集めたサイト「case:MobileDesign!　モバイルサイトのデザイン」

→　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]

続いて、同じくケータイサイトのキャプチャをジャンル別に大量に掲載している大御所「モバイルデザインアーカイブ」
→　モバイルデザイン集のモバイルデザインアーカイブ [mobiledesignarchive.jp]

そのiPhone版である「iPhoneデザインアーカイブ」

→　iPhoneサイトデザイン集のiPhoneデザインアーカイブ [iphonedesignarchive.jp]

PC版もあります。「ブブンデザインアーカイブ」

→　Webデザインの“ブブン”を集めたブブンデザインアーカイブ [bubundesignarchive.jp]

Androidも含めスマートフォンサイトを集めている「スマートフォンサイト集めました。」

→　スマートフォンサイト集めました。 [sp-web.jp]

サイトの他に書籍も出版されています。
過去にレビューを書いたデザインアーカイブ系の本はこれだけあります。

→　ke-tai.org　ブックレビュー：携帯サイト年鑑2010 – ケータイサイトの最新デザインがわかる厳選500サイト超掲載 [ke-tai.org]

→　ke-tai.org　ブックレビュー：モバイルデザインアーカイブの本。Ver.2.0 [ke-tai.org]

→　ke-tai.org　ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。 [ke-tai.org]

参考になれば幸いです。

関連：

• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• iPhoneサイトのデザインがまとめられた「iPhoneデザインアーカイブ」がオープンしたとのことです