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

夏休みから戻ったら、あまりに大きなニュースが流れていたので、既に知っている方も多いと思いますが記事にします。

Androidを開発していることでおなじみのGoogleが、米携帯電話メーカーのMotorola Mobility社を約125億ドルで買収したようです。

→　engadget日本語版　Google、モトローラ・モビリティを買収へ。総額125億ドル [japanese.engadget.com]

→　ITmedia +D モバイル　Google、Motorola Mobilityを125億ドルで買収 [plusd.itmedia.co.jp]

買収の狙いは、Motorola Mobilityの所有する特許らしいですが、この買収によって今までAndroid端末を作っていた多くのパートナー携帯電話メーカーを、敵にまわしてしまうことになりそうです。

結果、MicrosoftのWindows Phone 7に有利に働くのでは、という見方も出てきています。

今後の展開や影響が気になるところです。

関連：

• Google I/O 2011で行われたセッション「HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき？」
• @ITに掲載されているGoogleのApp Inoventorに関する連載「App Inventorでアプリ開発はどこまでできるのか」
• マイコミジャーナルにGoogleの「App Inventor」によるAndroidアプリ開発の記事がありました

調査会社であるMM総研が、2015年までのスマートフォン市場規模の最新予測レポートを公開しているようです。

調査結果ページはこちら。

→　株式会社MM総研　 スマートフォン市場規模の推移・予測（11年7月） [www.m2ri.jp]

各ニュースサイトでも紹介記事が書かれています。

→　ITmediaプロモバ　2014年度末、過半数がスマートフォンの契約者に – MM総研調べ [itmedia.co.jp]

→　ケータイ Watch　MM総研調査、スマートフォンが国内出荷全体の49％に [k-tai.impress.co.jp]

それによると、2014年度にスマートフォンの契約者が50%に達し、2015年度には7割超がスマートフォンユーザになるとのことです。

思ったよりも遅いなという印象ですね。

なお先日のニュースによると、ドコモは機種の75%をスマホ端末にするようです。

→　Yahoo!ニュース　ドコモ携帯、秋から春発売はスマホが４分の３に [headlines.yahoo.co.jp]

端末の新機種自体はスマホ一色となっていくものの、それでも根強いガラケーファンがいるので、完全に入れ替わるには時間がかかりそう、ということなのでしょうか。

関連：

• 2015年にはスマートフォンの販売数が全体の54.6%を占めるという調査結果が出ています
• 2009年のモバイルコンテンツ関連の動向や市場規模がまとめられた資料「総務省　モバイルコンテンツの産業構造実態に関する調査結果」
• MMD研究所にスマートフォンの所有率についての調査がありました

良い記事があったのでご紹介します。

Yahoo!検索スタッフブログに、「スマートフォン版Yahoo!検索の作り方　第1回：UI設計編」という、リニューアルした検索ページのUIについて解説した記事がありましたのでご紹介させて戴きます。

私も実際に使ってみましたが、かなり使いやすく、よく考えられています。

これは、現時点でのスマートフォン向けWebユーザインターフェイスとしては、高いレベルで完成されており、我々にとっては良いお手本となると思います。

→　Yahoo!検索 スタッフブログ　スマートフォン版Yahoo!検索の作り方　第1回：UI設計編 [searchblog.yahoo.co.jp]

スマホをお持ちの方は、記事を読むだけよりは、実際に使われてみるのが理解しやすいかと思います。

ユーザエージェントを騙ってiPhoneにすると、HTMLやJavaScriptなども見ることができそうですので、気になる方はどんな仕組みかチェックしてみてはいかがでしょうか。

関連：

• 機種やキャリアによって異なる十字キーの操作性について解説された記事「入力フォームの操作性、機種による違いにご注意！」
• スマホ向けデザインのコツをまとめた記事「スマートフォンサイトをデザインする上で知っておくべき10のTIPS」
• ASCII.jpに「jQuery Mobileデザイン入門」という連載記事が掲載されています

スマホサイトのデザインに関するエントリーで、人気を集めているものがあったのでご紹介させていただきます。

→　to-R　スマートフォンサイトをデザインする上で知っておくべき10のTIPS [blog.webcreativepark.net]

次のようなTIPSが紹介されています。

1. 実機で確認する
2. 横幅は320pxもしくは640pxでデザインする
3. 横向きを想定したデザインにする
4. フォントはヒラギノ角ゴで
5. ボールド体で表現しない
6. フォントサイズは12px以上で作成する
7. 1pxのこだわりを捨てる
8. 極力画像を使わずコーディングできるように意識する
9. リンクの領域は44px以上で
10. Webクリップアイコンを準備する
11. ハイライトカラーを指定する

スマホサイトのデザインのノウハウはまだ溜まっていないという方も多いと思いますので、参考になるのではないでしょうか。

ただ、10のTIPSというタイトルになっていますが、11個あるのは何故なのか気になります。

関連：

• ASCII.jpで連載されている「jQuery Mobileデザイン入門」の第3回が公開されたようです
• ケータイ向けサイトでのスペーサーの書き方について解説されたウノウラボの記事「I love spacer」
• ASCII.jpに掲載されているスマートフォンサイトキャプチャ集「絶対見ておきたい有名企業のスマホサイトまとめ」、「スマホサイトを作る前に見たい国内38社の実例」

モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。

当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、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」