sky-blue blog::スマートフォン

スマートフォンサイト公開
12/Dec.2012(Wed)17:06

スマートフォンサイトがやっと完成しましたので公開します。＾＾

「ぱたぱたアニメ館」スマートフォンサイト
http://pata2.jp/sp/

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

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

「jQuery Mobile」
http://jquerymobile.com/

「jQuery Mobile」の特徴：「Wikipedia」より引用

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

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

　サンプルページ
　http://pata2.jp/sp/sample/app.html
　カラーも数種類から選べるみたいです。ほんと凄いですね。

　でも、「jQuery Mobile」も「jQuery Mobile」の独自のルールを覚えないと自由にカスタマイズできないので、html5を覚えるだけでも精一杯の私は、「jQuery Mobile」を利用せずに自分で好きなように作ることにしました。
　どのみち、私がスマートフォンサイトで掲載する予定の物は、FlashをHTML5で変換したアニメーションと今後新しく作るGIFアニメのみになると思いますから、簡単な基本的な操作さえできれば問題ないんですね。

スマートフォンサイトを作るにあたって注意した点

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

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

　当分スマホを買う予定がないのでこのままになっちゃいますねぇ。というかこれ以上は出来ないとも。ですので、おかしな箇所や分かり難い箇所がありましたらお知らせいただけるととても助かります。＾＾；

※ 携帯サイトも宜しく。（フリーFlashを時々更新しています）

http://pata2.jp/i/
「ぱたぱたアニメ館」モバイルサイト

※ キッズサイトも宜しく。（こちらは広告なし・更新なし）

http://pata2.jp/kids/
「ぱたぱたアニメ館」キッズサイト

comments (x) : trackback (x)