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

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

→　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」

ASCII.jpにjQuery Mobileデザインに関する連載記事「西畑一馬のjQuery Mobileデザイン入門」が掲載されていましたのでご紹介します。

→　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」

GREEのエンジニアブログに興味深い記事がありましたのでご紹介します。

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

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

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

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

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

関連：

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

JavaScriptでiPhone・Androidのアプリが作れてしまうことで最近大人気の「Titanium Mobile」ですが、titanium-mobile-doc-jaプロジェクトのページで無料の書籍風PDFが公開されています。

結構以前からあるものなので、ご存じの方も多いとは思いますが、最近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アプリ」