スマートフォンサイト公開(2012/12/12)

スマートフォンサイトがやっと完成しましたので公開します。(元々「ぱたぱたアニメ館」はパソコンにもスマホにも対応していますが、作りました。)

pata_smart.png

サイトを作るにあたって、いろいろと参考にさせていただいたサイトを紹介します。

まず、CSSやJavaScriptの知識が無くても簡単にスマートフォンサイトが作れる「jQuery Mobile」ですが、 ほんと簡単な入力だけでサクサクと綺麗なサイトが作れちゃうので驚きました。

「jQuery Mobile」の特徴:「Wikipedia」より引用
  • jQueryプログラムを同時に組み込んで使用。
  • HTMLのバージョンはHTML4.01でなくHTML5、CSSはCSS3を対象として開発。
  • 幅広いOS・ブラウザに対応するよう制作されている。
  • スマートフォンの通信速度でも軽快に動くように開発。
  • HTML、CSSの知識があれば、簡単にスマートフォンサイトが作れる。
  • ThemeRoller for jQuery Mobile で作業を高速化する事が出来る。

↓「jQuery Mobile」サイトにあるUIビルダーで作ったサンプル

jquerymobile.png

サンプルページ https://pata2.jp/sp/sample/app.html

カラーも数種類から選べるみたいです。ほんと凄いですね。

でも、「jQuery Mobile」も「jQuery Mobile」の独自のルールを覚えないと自由にカスタマイズできないので、 html5を覚えるだけでも精一杯の私は、「jQuery Mobile」を利用せずに自分で好きなように作ることにしました。

どのみち、私がスマートフォンサイトで掲載する予定の物は、 FlashをHTML5で変換したアニメーションと今後新しく作るGIFアニメのみになると思いますから、 基本的な操作さえできれば問題ないんですね。

スマートフォンサイトを作るにあたって注意した点
  • 文字コードはutf-8、htmlはhtml5で記述
  • 段組みを使わないシンプルなデザイン
  • 指で操作しやすいリンク
  • 横320pixelを基本に縦はなるべく短く
  • Flashに対応していない端末への対処

表示確認はsafariの開発メニューで行っていました。(一番上の画像参照)でも、実機ではないので実際のところは分かりません。 もしかして、アコーディオンメニューが動かない可能性も?!Σ( ̄∀ ̄;)!

当分スマホを買う予定がないのでこのままになっちゃいますねぇ。というかこれ以上は出来ないとも。まあ、そういうことです。(←??)

※ 携帯サイトも宜しく。

上に戻る