携帯・iPhone・スマートフォン対応ホームページ制作 Grand Licenseオフィシャルブログ

2012年01月26日

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 5

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 1
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 2
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 3
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 4
に続き、part5です。

jQuery Mobileではスマホで使いやすく作られたフォームの要素が用意されています。
「問合せフォーム」などを作るときにこれを使うと簡単にスマホ用のページっぽいフォームが簡単に制作できます。

まぁはっきりいって細かい機能はjQuery Mobileの日本語リファレンスを見てもらうのが早いんですが・・・
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/

とはいえ、PCサイトでは使われない、モバイル端末に特化した機能だけ紹介。

■フリップスイッチ

　　　　　　　↓

オン/オフやYes/Noなどを設定するのに便利です。

select 要素を使って制作します。
select 要素にdata-role=“slider” 属性をつけます

YES/NOの場合

■スライダー
バーをぐいぐいすることで左側の数字の値を動かすことができるスライダー。

　　　　　　　↓

input 要素にHTML5で追加された type=“range” を指定することで設置できます。

valueがデフォルトの値、minが一番左←にスライドさせたときの値、maxが一番右⇒にスライドさせたときの値です。

というわけで
jQuery Mobileではモバイル端末に特化したフォームインターフェイスが用意されていますので、
サクっとフォームを作ることができるわけです。
他にも色々用意されてますので、jQuery Mobile日本語リファレンス内の
ギャラリーを参考に！
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/gallery/
というわけで今日はこの辺で。

-------------------------------------------------------------------
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽に
Grand License オフィシャルサイトより承ります。
http://www.grandlicense.com/
-------------------------------------------------------------------

■今日の気分の一曲

- Posted by grandlicense at 11:33
- | スマートフォンサイト制作
- 0 Comment |
- 0 Trackback |

2012年01月04日

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 4

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 1
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 2
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 3
に続き、part4です。

前回はページの遷移について書きましたが、
今回はそのページ遷移時のアニメーションの指定方法について。

ページ遷移時のアニメーションの指定方法は
a要素にdata-transition属性を指定してあげることで可能です。

例えば

<a href="page2" data-transition="slide">2ページ目へ移動</a>

と書くと右から左へスライドしながたページが遷移します。

他にも
data-transition="slideup"　は下から上にスライド。
data-transition="slideup"　は下から上にスライド。
data-transition="slidedown"　は上から下にスライド。
data-transition="slidedown"　は上から下にスライド。
data-transition="pop" 　はページが拡大しながら。
data-transition="fade"　はフェードイン／フェードアウトで。
data-transition="flip"　は回転しながら。

という感じです。

というわけで今日はこの辺で。。。

-------------------------------------------------------------------
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽に
Grand License オフィシャルサイトより承ります。
http://www.grandlicense.com/
-------------------------------------------------------------------

■今日の気分の一曲

タグ：: jQuery; スマートフォン; iPhone; Android

- Posted by grandlicense at 11:36
- | スマートフォンサイト制作
- 0 Comment |
- 0 Trackback |

2011年11月08日

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 3

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 1
jQuery Mobileで簡単にスマートフォン用サイトを作る Part 2
に続き、part3です。

今回はスマートフォン用サイトでのページの遷移（せんい）について。
つまりページの移動ですね。

通常のPCサイトだと1つのhtmlファイルで1ページという感じですが、
jQuery mobileを使うと1つのhtmlファイルに複数のページ用のソースを記述し、
1つのhtmlで擬似的に複数のページを表現できます。

data-role=“page” という属性指定することでそれを可能にするのですが、
つまり↓のようなソースのhtmlページだとすると、

<body>

<div data-role="page" id="page1">
<p>1ページ目</p>

<p><a href="page2">2ページ目へ移動</a></p>
<p><a href="page3">3ページ目へ移動</a></p>
<p><a href="page4">4ページ目へ移動</a></p>
</div>

<div data-role="page" id="page2">
<p>2ページ目</p>

<p><a href="page1">1ページ目へ移動</a></p>
</div>

<div data-role="page" id="page3">
<p>3ページ目</p>

<p><a href="page1">1ページ目へ移動</a></p>
</div>

<div data-role="page" id="page4">
<p>4ページ目</p>

<p><a href="page1">1ページ目へ移動</a></p>
</div>

</body>

スマートフォンのブラウザで表示すると↓のようになります。
sb_1

つまり上記のソース内の

<div data-role="page" id="page1">
<p>1ページ目</p>

<p><a href="page2">2ページ目へ移動</a></p>
<p><a href="page3">3ページ目へ移動</a></p>
<p><a href="page4">4ページ目へ移動</a></p>
</div>

だけが表示されている状態です。
2ページ目へ
のリンクをタップすると↓のように表示されます。
sb_2

つまり上記のソース内の

<div data-role="page" id="page2">
<p>2ページ目</p>

<p><a href="page1">1ページ目へ移動</a></p>
</div>

だけが表示されている状態です。

1ページ目へ
のリンクをタップすると最初のページ↓へもどります。
sb_1

というわけで3ページ目、4ページ目も2ページ目と同様の動きをします。

そしてこのページ間の移動はスマートフォンサイトらしく、
横にスクロールしたかのような動きで移動します。

というわけで今日はこの辺で。。。

また次回もjQuery Mobileについて記述します。

-------------------------------------------------------------------
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽に
Grand License オフィシャルサイトより承ります。
http://www.grandlicense.com/
-------------------------------------------------------------------

■今日の気分の一曲

タグ：: jQuery; スマートフォン; iPhone; Android

- Posted by grandlicense at 17:06
- | スマートフォンサイト制作
- 0 Comment |
- 0 Trackback |

2011年10月13日

jQuery Mobileで簡単にスマートフォン用サイトを作る Part 2

前回に引き続き
jQuery Mobileをスマートフォン用サイト制作についてです。

body内に「data-role」というhtml属性でパーツを作っていくことで
ページが生成されることは前回にも書きましたが、

具体的にどんなもんかというと、、、

まず
「data-role=“page”」という属性の親となるものを作ります。
その子として「ヘッダー」や「コンテンツ」や「フッター」の属性を作ります。

まぁ論より↓を見てもらったほうが早いですね。

<div data-role="page">

<div data-role="header">ヘッダーとなる場所</div>
<div data-role="content">コンテンツとなる場所</div>
<div data-role="footer">フッターとなる場所</div>

</div>

で、↓みたな感じになります。デフォルトの状態です。

色、テーマを変更する場合はdata-themeの属性をpageに追加します。
data-themeの値はa～eまであります。これを変えることで色、テーマを変更します。
例えば

例えば

といった感じで変更することができます。

ちょっと時間がなくなってきたので
続きはまた次回！

-------------------------------------------------------------------
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽に
Grand License オフィシャルサイトより承ります。
http://www.grandlicense.com/
-------------------------------------------------------------------

■今日の気分の一曲

タグ：: jQuery; スマートフォン

- Posted by grandlicense at 00:00
- | スマートフォンサイト制作
- 0 Comment |
- 0 Trackback |

2011年09月29日

jQuery Mobileで簡単にスマートフォン用サイトを作る

世の中には便利なものがいっぱいあるもので、、、、
pc用のサイト制作でもjQueryは便利ですが、
iPhone、androidなどのスマートフォン用サイト用、、というか
それっぽいデザインがjQuery Mobileというライブラリーを使えば簡単にできてしまう。。
というわけです。

jQuery mobileのライブラリーはダウンロードして利用することもできますが、
head間に以下のように記述してライブラリーをサーバーから呼び出すこともできます。

ダウンロードする場合は以下より
http://jquerymobile.com/download/

これで準備は完了です。

あとはbody内に「data-role」というhtml属性でパーツを作っていくだけです。

例えばヘッダーをいれたい場所に

<div data-role="header">
<h1>ここはヘッダーですよー</h1>
</div>

例えばフッターをいれたい場所に

<div data-role="footer">
<h1>ここはフッターですよー</h1>
</div>

といった感じで、「data-role」の属性をによって簡単にデザインができます。
具体的にはまた次回！

-------------------------------------------------------------------
ホームページ制作(スマートフォンサイト,WordpressなどのCMS、ECサイト対応)
ホームページ更新代行・運営管理
ご相談はお気軽に
Grand License オフィシャルサイトより承ります。
http://www.grandlicense.com/
-------------------------------------------------------------------

今日の気分の一曲

タグ：: スマートフォン; CSS; jQuery

- Posted by grandlicense at 16:22
- | スマートフォンサイト制作
- 0 Comment |
- 0 Trackback |