jQueryを用いてDrag & Dropを実装。
その際のサンプルソースを紹介します。
【 主なスマートフォン機種の画像解像度 】
機種名 | キャリア | 画像解像度 |
GALAXY S Ⅱ LTE SC-03D | docomo | 480 x 800 ピクセル |
Xperia SO-01B | docomo | 480 x 850 ピクセル |
Xperia SO-02D | docomo | 720 x 1280 ピクセル |
AQUOS PHONE IS14SH | au | 540 x 960 ピクセル |
iida INFOBAR A01 | au | 540 x 960 ピクセル |
iPhone 3GS | SoftBank | 320 x 480 ピクセル |
iPhone 4 / 4S | SoftBank、au | 640 x 960 ピクセル |
【 Viewportと画像解像度の違い 】
ViewPortとは、コンテンツ表示領域のこと。ステータスバー、コントロールボタンを覗いた画像領域を指す。
必ずしも画像解像度=ViewPort ではない。
例としてiPhone 4 を紹介。
iPhone 4の画面解像度は、640ピクセル。
iPhoneのViewPortのデフォルト値は、980ピクセル。
ここに、幅320ピクセルの画像が入ったHTMLを表示すると、横幅の1/3 に画像が表示される。
もちろん、ViewPortの設定値が320ピクセルだったら、画面いっぱいに画像は表示される。
これは、iPhoneの標準ブラウザである、Mobile SafariのViewPortの幅が980ピクセルの為。
jQuery Mobileを用いてスマフォ向けサイトを作る時は、次のような指定をすること。
<meta name="viewport" content="width=device-width, initial-scale=1">
上記コードの意味は、幅をデバイス幅にする、初期拡大率を1にする。この設定をしておけば、jQuery Mobileを利用して作られたサイトは、どのスマフォでも適切なサイズで表示されるようになる。
前からHTML5には興味があったのだが、以下のサイトを見て、ビビッと身体に電気が走った。(ビビビッではない、ビビビッだと松田聖子になってしまう)
HTML5サンプル集・デモリンク集まとめ / HTML5の普及の序章(8)
という事で、最近、技術的な事を殆ど勉強していないので本格的に勉強しようと思う。
まだまだ何も分からない事だらけ。あせらず、一歩一歩理解して行こう。
最終目標としては、
・HTML5のホームページを開設する(HTML5のカテゴリ数が20を超えたら作ってOK)
・小生が持っているホームページをHTML5で作る(万歩計、お買い得、Etc)
・HTML5でスマフォアプリを公開する
・HTLM5のホームページで、無料テンプレートを公開する(下部にタブ付き、取りたければ1000円おくれみたいな)
・本を出版したい(本を出すのは長年の夢)
ざっ と書き出した所、こんな感じでしょうか。
情報も多そうだし、まずは簡単な本を購入しようと思います。
記事ネタを考えてみる
1.そもそもHTML5って何?
2.HTML5で作られたアプリってどんなのがあるか?
2-1 HTML5を使うと何のメリットがあるの?
2-2 各ブラウザの対応状況ってどんな感じ?
2-3 各スマフォの対応状況ってどんな感じ?
3.HTML5って難しいの?
小生が経験した言語と比較する ⇒ Java、VB6、.Net、PHP、JavaScript、Etc
どんなコードを書けばどんな事が出来るの?
4.これからやっぱり主流になるの?
5.サンプル見せて
6. スマフォの各機能のどれだけ実装されているの?
7.HTML5を作るには、何から勉強すれば良いの?(HTMLは知ってるけど)
8.HTML5のサンプルコード1
9.HTML5のサンプルコード2
10.HTML5のサンプルコード3