→　日経ビジネスオンライン　ドコモ、来年夏にiPhone参入　次世代高速通信規格「LTE」に対応 [business.nikkeibp.co.jp]

前回のauのiPhone発売の記事に続いて、またも日経のみが報じている大ニュースです。

まず来年夏に高速通信規格である「LTE」に対応したiPadを発売し、秋までに同じくLTE対応のiPhoneを発売する見通しとのことです。

信憑性がどのくらいあるのか気になるところです。

auのiPhone参入に伴い、国内メーカーをはじめとするAndroid端末が駆逐されているという状況が起きていますので、ドコモでも同じ形になるかもしれませんね。

そうなると、世界の中でもiPhoneのシェアだけがやけに高い（＝Androoidが売れない）国という、特異な環境になってしまうかもしれません。

今回の発表はユーザの立場から見ると嬉しいニュースですが、国内のAndroid技術者にとっては、判断を迫られる問題かもしれませんね。

追記:

ドコモが自社のサイトで報道を否定する旨の掲載を行ったようです。

→　NTTdocomo　ドコモからのお知らせ　弊社に関する一部報道について [nttdocomo.co.jp]

関連：

• iPhone4Sを買って来ました
• KDDIからiPhone5が発売されるという報道が流れています
• 2011年12月17日に札幌のガレージラボで「Titanium Mobileハンズオン」が行われます

ITmedia オルタナティブ・ブログに、先日行われた「グロバール×スマホゲームの勝ち方！」というセミナーのスライド資料が公開されていました。

→　ITmedia オルタナティブ・ブログ　グロバール×スマホゲームの勝ち方セミナーの資料を公開しました。 [blogs.itmedia.co.jp]

先日こちらの記事で紹介させていただいた、アドウェイズさんの資料も公開されていますね。

→　Android事業の収益性や可能性、押さえたいポイントなどがわかるセミナー資料「Androidアプリで本当に儲かるのか？」 [ke-tai.org]

なお、終了したイベントですが、内容詳細はこちらで見ることができます。

→　ATND　グローバル × スマホゲームの勝ち方！セミナー [atnd.org]

次回１１月末か１２月初旬に、また同様のイベントが開催される予定らしいので、興味のある方はチェックしてみてはいかがでしょうか。

関連：

• Android事業の収益性や可能性、押さえたいポイントなどがわかるセミナー資料「Androidアプリで本当に儲かるのか？」
• Google I/O 2011で行われたセッション「HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？」
• ブックレビュー：iPhoneアプリで稼ごう

レビューを書かせて戴きたいと思います。

→　Amazon　iPhone & Android スマートフォンサイト制作の教科書 [amazon.co.jp]

本書「iPhone & Android スマートフォンサイト制作の教科書」は、スマートフォンサイトのデザインや制作についてのノウハウを解説した入門書です。

著者は、こもりまさあき氏、谷拓樹氏、石本光司氏、いちがみトモロヲ氏、4名の共著という形になっています。

目次は次の通りです。

• 序章　スマートフォン向けサイト制作をはじめる前に
• 第1章　スマートフォン制作のための基礎知識
• 第2章　制作・テスト環境のセットアップ
• 第3章　スマートフォンサイトの企画、構造設計
• 第4章　スマートフォン向けのパーツ制作
• 第5章　HTML5による実装
• 第6章　CSS3によるレイアウトと装飾
• 第7章　JavaScriptを使ったインタラクション
• 第8章　フレームワークやオーサリングツールを使ったサイト制作
• 第9章　パフォーマンスの最適化
• 付録　スマートフォン各機種　画面解像度一覧表

入門書というスタンスが取られていますので、スマートフォン向けサイト制作の基礎知識の部分から、制作に必要な環境の構築方法、どんなサイトを参考にしたらよいかのギャラリーなど、基本的な部分からしっかり解説されています。

しかしながら、基礎的なことしか書かれていないというわけではなく、タップなどスマホ特有のUIの解説や、HTML5・CSS3といった新しめの技術など、一歩進んだ部分の説明も書かれています。

画像や余白だらけだとか、文字でびっしりなどということはなく、どのページも適度なバランスで書かれています

また、jQuery Mobileや、各種スマホサイト向けフレームワークの紹介など、広く浅くではあるものの、幅広く解説がなされています。

むしろ後半部分は、入門書というにはやや高度すぎると言えるくらいかもしれませんが、このあたりは無理に理解しなくてはならない部分でもないので、これで良いのかもしれません。

全体として学習の流れを考えてうまく作られており、タイトル通り教科書として使える良書になっていると思います。

今後スマートフォン向けのサイトやサービスはどんどん増えていく傾向にあると思いますので、まだ制作の経験の無いかたは本書を参考に勉強をはじめてみてはいかがでしょうか。

なお内容の一部は、こちらのサイトから見れるようになっています。
購入前に雰囲気がつかみたい方はどうぞご覧ください。

→　MdN Design Interactive　iPhone & Android スマートフォンサイト制作の教科書 [mdn.co.jp]

関連：

• ブックレビュー:PhoneGap入門ガイド
• ブックレビュー：iPhoneアプリで稼ごう
• ブックレビュー：位置情報ビジネス ~「位置ゲー」が火をつけた新しいマーケット~

auの64GB・白です。

iPhone4からの移行のためか、軽く使った感じでは、体感では特に変化が感じられないですね。

電波はずいぶん良くなるみたいなので、そこに期待したところです。

とりあえず参考までにユーザエージェントを書いておきます。

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

IP帯域はこうでした。
さすがにガラケーとは違う帯域ですね。

182.249.101.58

調べるとKDDI株式会社の割り振りのようですが、広すぎてまだ何ともですね。

関連：

• KDDIからiPhone5が発売されるという報道が流れています
• ブックレビュー:PhoneGap入門ガイド
• ブックレビュー：iPhoneアプリで稼ごう

→　KDDI株式会社　プレスリリース　auの2011秋冬ラインアップについて [kddi.com]

→　au by KDDI　2011年　秋冬モデル　ラインアップ [kddi.com]

公式ページのフライングでラインアップ情報が流出した、というハプニングもあったみたいですが、新たにスマートフォンが6モデル、フィーチャーフォンが2モデル、WiMAX対応のモバイルWi-Fiルータが1モデル、法人向けモデルが2モデル発表されたようです。

残念ながら、皆が気になっているiPhoneについての発表は無かったようですが、「Android(tm) au」のサイトが閉鎖されたり、新キャッチコピーが「未来は選べる」になったりで、au版iPhoneは現実見を帯びているように感じます。

さて今回のラインアップでは、フィーチャーフォン（ガラケー）は、ほとんど注目されていませんが、今回発売されるモデルから大きな仕様変更が入っています。

一つはHDMLの非サポート化です。

→　ke-tai.org　auの2011年秋冬モデル以降から、HDMLが非サポートになるようです [ke-tai.org]

もう一つは、使用されるIPアドレスの帯域がPCサイトビューアーと共通になる点です。
→　auのIPアドレス帯域が追加され、EZブラウザとPCサイトビューアーとが共通の帯域となるようです [ke-tai.org]

※EZfactoryの情報によると、これはF001のみで適用されるようです

対象端末は少ないとはいえ、ケータイ向けサイトをお持ちの方には大きな仕様変更となります。ご注意ください。

関連：

• auの2011年秋冬モデル以降から、HDMLが非サポートになるようです
• auのIPアドレス帯域が追加され、EZブラウザとPCサイトビューアーとが共通の帯域となるようです
• KDDIが2011夏モデル15機種発表しました

→　SHINGOLOG　通勤中でも寝る前でも！iPhoneプログラミングを勉強出来る簡単な方法！ [golog.plus.vc]

iOSに関するドキュメントは、AppleがPDFで公開しています。

これらは簡単にiPhoneに入れて読むことができます。

ちなみに、公式のドキュメント置き場はこちらです。

→　Apple　iOS Developer Library(日本語版) [developer.apple.com]

上のブログやサイトなどから、iPhoneのSafariで保存したいPDFを開きます。

続いて「iBooksで開く」を押せばiBook上の本棚に保存されます。

他のアプリで開きたい場合は、「次の方法で開く」を押せばOKです。

このようにiBook上から読むことができ、空いた時間に読むことができ便利です。

iPhoneだと小さいですが、横持ちにすれば全然見れますね。

関連：

• P1エミュレータがバージョンアップしiPhoneにも対応したようです
• ブックレビュー：iPhoneアプリで稼ごう
• 話題のPhoneGapを使ったアプリ開発手順がまとめられている記事「HTML5でiPhoneアプリ開発！PhoneGap入門」

→　amazon　iPhoneアプリで稼ごう [amazon.co.jp]

本書「iPhoneアプリで稼ごう」は、丸山弘詩氏、川畑雄補氏、脇俊済氏、三名による共著の、iPhoneアプリのマーケティングとプロモーションについて書かれた書籍です。

タイトルにもあらわれていますが、本書はいわゆる技術書ではありません。
帯にも「年間1億円のチャンス」「売れるアプリを作るための必需品」といったコピーが書かれており、序章でも自書の紹介で「稼ぐための指南書」という表現がとられています。
全体として「売れるにはどうすればいいか」ということをターゲットとした内容になっていると思います。

正方形に近い変形サイズの本となっており、ぱっと見でも目を引きますね。
また、通常の技術書などとは逆の右開きです。

目次は次の通りです。

→　マイコミ　ブックス　iPhoneアプリで稼ごう [book.mycom.co.jp]

基本的な流れは、

01 情報収集・準備編
02 企画・マネタイズ編
03 開発・受発注編
04 設計・デザイン編
05 プロモーション編
06 運用・サポート

のような形です。

さらに章の間に掲載されている有名アプリ制作者へのインタビュー記事があり、読み応えがあって参考になります。

◇Interview SM診断 臼井氏
◇Interview Art & Mobile 深津氏
◇Interview ノボット 小林氏
◇Interview tekunodo. 宮永氏
◇Interview 小学館 山本氏
◇Interview foryou,inc. 金田氏
◇Interview SpeedText 広部氏
◇Interview モバイル広告 事業部長

ページ数は約180ページ、前述のインタビュー記事がやや文字が細かく長文ですが、それ以外は図解が多く、文字も大きいため、割と抵抗なく読み切ることができると思います。

書かれていることはマーケティング面では一般的に使える内容のため、Androidやソーシャルゲームなど、他環境にも応用が利くとは思います。

しかしながら、例えばAppleに審査をリジェクトされたときの対応や、評価が荒れたときの沈静の仕方など、iPhoneアプリ独自の内容も多いです。

私のような開発者がうとい部分、例えばプロモーションの仕方や、プレスリリースの打ち方などといった部分にも触れてくれているので嬉しいですね。

私は技術者だからか、なかなかこういった本を手に取る機会がなかったのですが、読んでみるとなかなかためになり、面白いものですね。

値段も1680円＋税と、技術書と比較すると全然安いので、iPhoneアプリを開発している方も、これから始めようという方も、手に取ってみて損のない一冊になっていると思います。

関連：

• ブックレビュー：位置情報ビジネス ~「位置ゲー」が火をつけた新しいマーケット~
• ブックレビュー：WEB+DB PRESS Vol.62
• ブックレビュー：Flash　プロの現場の仕事術 CS5/CS4/CS3対応

→　ASCII.jp　古籏一浩のJavaScriptラボ　HTML5でiPhoneアプリ開発！PhoneGap入門 [ascii.jp]

PhoneGapは、iPhone/iPadやAndroidなどに対応するフレームワークで、HTMLやCSS、JavaScriptを使ってアプリケーションを開発できます。

今回の記事ではXcodeを使って開発環境を構築し、iOS向けのサンプルアプリを作成するところまでの例がでています。

この記事は「古籏一浩のJavaScriptラボ」という連載の一部のようですが、今回で完結していませんので、数回に渡ってPhoneGapが取上げられることになりそうです。

PhoneGapに関する情報はまだまだ少ない状態ですので、次回以降も期待したいところですね。

関連：

• @ITのスマホ開発ツール紹介記事「スマホ用JavaScriptフレームワーク5つ＋1を徹底研究」
• JavaScriptでiPhone/Android向けのソーシャルアプリが作成できるという「ngCore」について解説されたスライドが公開されていました
• HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発ができるツール「PhoneGap」

いつも素敵な情報を提供してくれる「かちびと.net」さんに、iOSでjQueryをつかってシェイクジェスチャー（iPhoneを振る操作）を検出するサンプルというのがありました。

→　かちびと.net　iOS4.2+ / モバイルSafariの「振る動作（シェイクジェスチャー）」をjQueryを使って検知する [kachibito.net]

利用しているgShakeというライブラリは、GitHubで公開されています。

→　GitHub　GerManson/gShake [github.com]

公開されているデモも試してみましたが、きちんと動作するようです。

なお、jQueryを使わないべた書きのサンプルはこちらにあります。

→　KAYAC DESIGNER’S BLOG　iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作る [design.kayac.com]

これを使えば何か面白いものが作れるかもしれません。

興味のある方はチェックしてみてはどうでしょう。

関連：

• iOS4.2から実装されたというJavaScriptの加速度センサーAPIを試してみました
• iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
• 90秒で理解するiPhone JavaScript（マルチタッチ編）

本家サイトはこちらです。
右下のダウンロードボタンからダウンロードできます。

→　springbox　Mobilizer [springbox.com]

情報はこちらのブログで知りました。

→　かちびと.net　iPhone等での表示をPCで確認出来るAir製のシュミレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった [kachibito.net]

実際に表示したところは、こんな感じです。

iPhone、Androidの他にも、Palm Pre、Blackberry Stormでの表示もシュミレートできます。

Adobe AIRで作られてますので、プラットフォームを選ばないのもいいですね。

モバイル向けサイト開発をやられている方にとっては便利なツールになりそうなので、チェックしてみてはいかがでしょうか。

関連：

• MacOSX上で動くiPhoneシミュレーター「iPhoney」
• Adobe AIRで作成されたiPhoneエミュレータ「AIR iPhone」
• ブックレビュー： iPhone Web Style

当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。

今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。

本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。

→　jQuery Mobile　本家サイト（英語） [jquerymobile.com]

→　jQuery Mobile　ダウンロード [jquerymobile.com]

日本語訳されたリファレンスはこちら。

→　jQuery Mobile 日本語リファレンス [dev.screw-axis.com]

スライド資料系。jQuery Mobileを布教する際に便利かも。

吉川氏のスライド資料「jQuery Mobile[基礎編]」、かなり丁寧な資料で、jQuery Mobileがどんなものなのか理解できると思います。

キーボードの上下左右キーまたは、ダブルクリックで次のページに進み、ブラウザバックで戻れるようです。（私の環境ではIEでは、あまりうまく動きませんでした）

→　jQuery Mobile[基礎編] [yst.web.infoseek.co.jp]

slideshareに公開されている@ichigami氏の資料。

→　jQuery Mobileで手軽にスマートフォンサイト制作 [www.slideshare.net]

動作サンプル系。実際にスマートフォンで動作を見てみたいという方に。

本家サイトのデモページ。

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

「jQuery Mobile サンプル」などでググると出てくるサンプル集。
上で紹介させていただいた吉川氏のサイトのようです。

→　jQuery Mobile サンプル集 [yst.web.infoseek.co.jp]

IBMの技術サイトで公開されている文書「jQuery Mobile の紹介」。
サンプルコードが多く、良いまとめになっています。

→　IBM　developerWorks　jQuery Mobile の紹介 [www.ibm.com]

以前当サイトでも取上げさせていただいた入門記事。こちらもわかりやすいです。

→　Mach3.laBlog　はじめてのjQueryMobile [blog.mach3.jp]

ASCII.jpで連載されているjQuery Mobileデザインに関する連載記事。
技術よりの記事が多い中、デザインに関するものは珍しいです。

→　ASCII.jp　西畑一馬のjQuery Mobileデザイン入門 [ascii.jp]

AdobeのWebオーサリングツールDreamweaverは、CS5.5がjQuery Mobileに本格対応しています。
Dreamweaver使いの人は要チェックです。

→　Publickey　jQuery MobileにDreamweaverが対応。モバイルアプリケーション開発ツールとして本命に急浮上！ [publickey1.jp]

→　ASCII.jp　Dreamweaver CS5.5でスマホアプリ作ってみた [ascii.jp]

最後にノウハウ系です。

日本語環境でまじめに使うなら。

→　ハブろぐ　jQuery Mobileをマジメに使うならやっておくべきローカライズとかの設定 [havelog.ayumusato.com]

つまづきやすいポイントをまとめたエントリー。ためになります。

→　コリス　jQuery Mobileでスマフォ対応ページをはじめて作成する際に役立つコード集とつまづきやすいポイント [coliss.com]

よく使うマークアップの日本語サンプルを配布しているページ。
jQuery Mobileネタに限らずですが、かちびと.netさんには良い情報が多いですね。

→　かちびと.net　jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します [kachibito.net]

今日のところはこの辺で。また情報が集まったらご紹介させていただこうと思います。

関連：

• ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています
• DreamweaverがjQuery Mobileに本格対応し、スマホアプリも作成できるようになったようです
• スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」

→　ASCII.jp　西畑一馬のjQuery Mobileデザイン入門　目次 [ascii.jp]

→　第1回　jQuery Mobileとは――スマホ時代の到来とWeb制作 [ascii.jp]

→　第2回　いまから始める、jQuery Mobileの基本 [ascii.jp]

スマートフォンサイトの構築用のフレームワークとして、今かなり注目されているjQuery Mobileですが、今までは技術的な目線での記事がほとんどでした。

この連載では、「jQuery Mobileデザイン入門」と題して、デザイン側のアプローチから記事が書かれていくようです。

プログラマにもデザイナーにも、興味深い内容になりそうですね。

関連：

• DreamweaverがjQuery Mobileに本格対応し、スマホアプリも作成できるようになったようです
• JavaScriptを使ってQRコードを作れる「jQuery.qrcode」
• スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」

既存のケータイサイトを、スマートフォン向けサイトに変更するテクニックをまとめた「1時間で携帯サイトをスマートフォン対応にする方法」という記事です。

→　GREE Engineers’ Blog　1時間で携帯サイトをスマートフォン対応にする方法 [labs.gree.jp]

その題名の通り、ケータイ向けサイトをスマートフォン向けサイトに対応させるためのポイントが、チュートリアル形式でまとめられています。

ステップとしては8つに分かれるようで、「jQuery Mobile」をうまく使うのがポイントのようです。

この手の仕事は今後増えてくると思いますので、デザイナーの方もプログラマーの方も要チェックの記事ではないでしょうか。

関連：

• グリーが全世界でスマートフォンプラットフォームを提供するOpenFeint社を買収したとのことです
• Flash LiteのSWFバイナリを直接いじる方法を紹介した記事「GREE Engineer’s Blog SWFバイナリ編集のススメ」
• GREEデベロッパーセンターが開設されました

結構以前からあるものなので、ご存じの方も多いとは思いますが、最近Titanium Mobileを始めた方も多いと思いますので、ご紹介させたいただきます。

PDFを公開しているのはこちらのページです。
国内でTitanium Mobileを使う方でしたら、見たことのあるページだと思います。

→　titanium-mobile-doc-ja – Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト [code.google.com]

PDFは画面中央くらいの「主なドキュメントについて」の覧にあります。

→　Titanium MobileではじめるiPhoneアプリケーション開発 [code.google.com]　※PDFへのリンクです

オラ○リーのパロディーで作られたと思われる表紙で108ページもある大作です。

少し情報が古いところもありますが、十分に役に立ってくれるのではないでしょうか。

こんなにクオリティの高いものが無料で読めるとは、作者の方に感謝ですね。

関連：

• 新入社員によるスマートフォンアプリ開発事例「初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件」
• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• JavaScriptを使ったスマートフォンアプリの開発方法を解説した連載記事「Titanium Mobileで作る！ iPhone／Androidアプリ」

今月号のSoftwareDesginに、「特集：MacBook Airで環境構築 iPhoneアプリ開発[超]入門」という特集記事がありましたので、レビューを書かせていただきたいと思います。

→　Software Design (ソフトウェア デザイン) 2011年 04月号 [雑誌] [amazon.co.jp]

→　技術評論社　SoftwareDesign 2011年4月号 [gihyo.jp]

最近はさすがスマートフォン開発が流行っているようで、先月のAndroidに続いて、今月はiPhone開発の特集記事です。

巻末に下の写真のように付録のような形で、32ページの記事が掲載されています。
しかもフルカラーです。

目次は次のようになっています。

• 第1章：Macがなければはじまらない　iOSアプリ開発の環境を整えよう
• 第2章：Xcode／Interface Builderにふれてみよう　iOSアプリ開発ツールの使い方
• 第3章：手を動かして開発のイメージをつかもう　くるくる回るおみくじアプリの実装
• 第4章：改良／アイコン設定／ローカライズで仕上げ　完成！ おみくじアプリ
• 第5章：これからなにを，どう学べばいいのか　思い描いたアプリを創るための道標

内容としては、Macを持ってない人のために、Macの機種選定から始めるという、まさにタイトル通りの「超入門」となっています。

記事の中も、写真がいっぱいで、しかも間違えないように赤矢印で明確な指示が書かれています。

これ以上親切な入門記事を見たことがない、というくらいに親切丁寧な内容となっています。

指示に従い操作を行って、サンプルコードを打ち込めば、動くおみくじアプリが実装できるようになっています。

SoftwareDesignの読者層を考えると、少し簡単すぎやしないかと心配になるくらいです。

その分、過去に挫折したという方や、非プログラマの方には、とても良い入門記事になっていると思います。

また、特集ではありませんが、Androidエンジニアからの招待状という6ページの連載でも、Googleの「App Inventor」に関する記事がありましたので、興味のある方はそちらもチェックしてみてはいかがでしょうか。

関連：

• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• ブックレビュー：SoftwareDesign 2011年3月号 (特集：はじめよう！Androidアプリ開発)
• ブックレビュー：PHP×携帯サイト実践プログラミング

→　ASCII.jp　日本語サイトの事例を一挙紹介（前編）　絶対見ておきたい有名企業のスマホサイトまとめ [ascii.jp]

→　ASCII.jp　日本語サイトの事例を一挙紹介（後編）　スマホサイトを作る前に見たい国内38社の実例 [ascii.jp]

誰もが知っている国内有名企業のスマートフォンサイトがまとめられています。

ジャンルとしては次のようにわかれています。

前編：

• ファッション・アパレル
• メーカー（自動車・家電）
• メーカー（食品・飲料）
• 交通・旅行
• 小売・飲食
• 不動産・建設

後編：

• 金融（銀行）
• 金融（保険・証券）
• 金融（クレジット・消費者金融）
• 通信
• メディア（ニュース）
• メディア（テレビ）
• EC・通販
• ポータル・Webサービス
• その他の業種

iPhoneのホーム画面のようにアイコンを並べるのが、どの業種でも比較的よく使われているレイアウトのようですね。

どのサイトも凝ったデザインとなっており、参考になりそうです。

関連：

• デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」

→　かちびと.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」について解説されたスライドが公開されていました

使い方はごく簡単で、次のようにして加速度が取得できます。

event.accelerationIncludingGravity.x;

iPhoneを傾けると赤い点がコロコロと移動するというサンプルプログラムを作ってみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
</head>

<body>

X:<span id="g_x"></span><br />
Y:<span id="g_y"></span><br />
Z:<span id="g_z"></span><br />
<br />
<div id="target" style="background-color:red; width:10px; height:10px; position:absolute; top:240px; left:240px;"> </div>

<script type="text/javascript" charset="utf-8">

// 加速度を格納するための変数
var x = y = z = 0;

// 動かす対象の座標を格納するための変数
var target_top = target_left = 0;

// イベントリスナー登録
window.addEventListener('devicemotion', function(event) {
	var gv = event.accelerationIncludingGravity;
	x = gv.x;
	y = gv.y;
	z = gv.z;
	refresh();
});

// 画面を再描画する
function refresh() {
	// デバッグ用表示
	document.getElementById('g_x').innerHTML = x;
	document.getElementById('g_y').innerHTML = y;
	document.getElementById('g_z').innerHTML = z;

	// 対象を動かす
	var el = document.getElementById('target');
	el.style.top = (parseInt(el.style.top.replace('px', '')) - y) + 'px';
	el.style.left = (parseInt(el.style.left.replace('px', '')) + x) + 'px';
}

</script>

</body>
</html>

動作確認はiPhone4で行っています。
実機をお持ちの方はこちらにアクセスしてください。

→　iOS4.2向け　加速度センサーAPIデモ [ke-tai.org]

動いたのは良いのですが、まあ問題は使いどころですね。
ブラウザ上での使い道を考えるのは、なかなか難しいです。

とりあえず、部屋の床が微妙に傾いているということはわかりました（笑）

関連：

• 90秒で理解するiPhone JavaScript（マルチタッチ編）
• 90秒で理解するiPhone JavaScript（ジェスチャー編）
• iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法

HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発ができるツール「PhoneGap」に関する記事です。

→　マイコミジャーナル　HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」
[journal.mycom.co.jp]

「PhoneGap」の概要から、HelloWorldアプリの作り方までが解説されています。

この手のツールでは、JavaScriptでiPhone/Androidアプリが作れる「Titanium Mobile」が有名ですが、「PhoneGap」もかなり昔からあります。

大体2年くらい前の記事ですが、当サイトでもご紹介させて貰ったことがあります。

→　ke-tai.org　JavaScriptでiPhoneアプリを作る方法 – AppStore登録も可能 [ke-tai.org]

色々と選択肢が増えるのは嬉しいことですね。
時間があればそのうちに比較記事でも書いてみたいところです。

関連：

• JavaScriptを使ったスマートフォンアプリの開発方法を解説した連載記事「Titanium Mobileで作る！ iPhone／Androidアプリ」
• スマートフォン開発についての2つの発表があった「はてな技術勉強会 #2」の資料と動画が公開されています
• iPhoneやAndroid用のネイティブアプリがJavaScriptで作れる「Titanium Mobile」がすごいらしいです

→　gihyo.jp　Titanium Mobileで作る！ iPhone／Androidアプリ [gihyo.jp]

ここのところ大変人気のある、JavaScriptを使ってスマートフォンアプリを開発できる「Titanium Mobile」に関する記事です。

筆者は先日こちらの記事でもご紹介させていただいたはてなid:r_kurain氏です。

まだ連載第一回目ということで、インストールからプロジェクト作成までの基礎的な内容になっています。
次回の掲載が楽しみですね。

少し前のものですが、@ITにも似たような感じの記事があります。
こちらも合わせて見てみると理解が深まるかもしれません。

→　@IT　HTML＋JavaScriptでiPhone/Androidアプリを作れる　Titanium Mobileとは [atmarkit.co.jp]

関連：

• スマートフォン開発についての2つの発表があった「はてな技術勉強会 #2」の資料と動画が公開されています
• iPhoneやAndroid用のネイティブアプリがJavaScriptで作れる「Titanium Mobile」がすごいらしいです
• JavaScriptでiPhoneやAndroidのアプリを作れるTitanium Mobile