新規でスマートフォン用サイトを作る際に使えそうなjQueryMobileベースのテンプレートを作成しました。
jQuery Mobileのテンプレート
以下のサンプルをPCから見る場合はブラウザ「Safari」で開発→ユーザーエージェント→Safari iOS 4.~ -iPhoneを設定してご確認下さい。
画面構成
解説
簡単にテンプレートの内容をまとめると以下になります。
1）jQuery MobileのプラグインをCDN経由で読み込み
2）デバイスの幅に合わせる「viewport」の設定
3）ローディングやエラー時のメッセージの日本語化
4）Google Analyticsのトラッキングコード埋め込み
5）ホーム、戻るボタンの自動表示設定
6）Googleマップの表示設定
7）ページの基本構造サンプル
8）項目のフィルタリングサンプル
9）リスト、グリッドのサンプル
10）問い合わせフォームサンプル
以下はテンプレートを作る上で大変参考になったサイトです。
○jQuery Mobile 1.0b1 日本語リファレンス
本家のドキュメントを和訳したサイト、jQuery Mobileの基礎がわかります。
○jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット
ヘッダーに記述しているスクリプトのほとんどを参考にさせて頂いました。
○jQuery Mobileによる問い合わせフォームの作成
フォーム部品作成の参考になるエントリーです。
○西畑一馬のjQuery Mobileデザイン入門
一歩先を行くjQuery Mobileの使い方をしたい人はこちらのページ。
はじめまして。
ウエブサイト制作初心者ですが、
リサーチ中にこちらのサイトを見つけ、http://www.finefinefine.jp/web/kiji1834/
こちらの携帯サイトテンプレートをダウンロードさせて頂き、携帯サイト作りを始めました。こちらのテンプレートを使うにあたり、質問があるのですが、
戻るボタンはどのようにしたら動作可能になりますか？DW上でデバイスでのプレビューでは昨日していないようにおもうのですが。。。
また、携帯用グーグルマップのコードが見つけられずに困っています。。
そして、こちらを作ったテンプレートですが、どのようにしたら自動で携帯用とパソコン用に振り分けられるのでしょうか？
初心者の質問で大変失礼いたしますが、こちらのテンプレートがすばらしく、是非活用させて頂きたいと思いましたので、恐縮ながら質問させて頂きました。
返信いただけたら大変助かります。
ありがとうございました。
閲覧ありがとうございます。
以下回答させて頂きます。
①戻るボタンはどのようにしたら動作可能になりますか？
こちらはサンプルをそのまま使って頂ければ問題なくうごくかと思います。
DWのプレビュー機能は使ったことがないのでわからないのですが、PCで確認する場合は以下の方法が一番確実な動作検証方法になるかと思います。
「Safari」で開発→ユーザーエージェント→Safari iOS 4.~ -iPhoneを設定して閲覧。
②Googleマップのコード
以下のサイトを参考にされるのが一番わかり易いかと思います（私も以下のサイトを参考にしました）。
ページの中段に「Google Mapを利用する」という項目があります。
http://www.adobe.com/jp/devnet/dreamweaver/articles/jq_snippets.html
③携帯用とパソコン用に振り分けられるのでしょうか？
以下のjavascriptで振り分けられます。
if (document.referrer.indexOf(‘visual-w.co.jp’) == -1 && ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0 || navigator.userAgent.indexOf(‘Android’) > 0)) {
if(confirm(‘このサイトにはスマートフォン用のサイトがあります。表示しますか？’)) {
location.href = ‘■ここにスマホ用のURL■’;
}
}
はじめまして！
こちらのテンプレートを使用して
スマートフォン用のサイトを作ろうと思っているのですが
フォームの部分で送信先などの設定はどこですればよろしいですか？
宜しくお願いいたします！
閲覧ありがとうございます。
当サンプルでは、フォームの送信プログラム等の動的な部分に関しては用意してありませんので、各自で用意していただくことになります。
はじめまして(^^)
JQuery Mobileを業務で使い始め、現在猛勉強中のものです。
検索していて見つけ早速ダウンロードしてローカルでサクサク動くの、GMOのVPS(VM)サーバーに、CentOS6.2をApacheとMySQLが可動する最小環境で設定して実際に運用で使っているサーバーにダウンロードしたものを、そのまま丸ごとUPしてTESTしてみました。
httpでは正常動作しますが、https環境では、JQuery Mobile自体が存在しないのではと疑うほど、まったく動く気配すらありません。
スマホ対応のログイン管理画面を作らないといけないので、とても困っていますが、なにか解決策をご存じないでしょうか？
大変、お忙しいとは存じますが、よろしくお願い致します。
すみません自己解決しました。m(__)m
初歩的なところを忘れていました。
JQueryなどを外部httpリンクで取り込んでいる部分を、ローカルにダウンロードして設定したら正常に動作しました。
お騒がせして申し訳ありません。
閲覧ありがとうございます。
解決したようでよかったです。
ちなみにCDNで外部から読み込んでいるスクリプトのurlをhttpsにしてもダメでしたか？
はじめまして!
自作CMSのスマートフォンページを作成中の者です。
今回このテンプレートがとてもシンプルで機能的だったので使わせて頂きました。
そこでちょっと問題があって質問させて頂きます。
現在CMSでブログが投稿出来る様になっているのですが、投稿時ではPC向けのスタイルで投稿されると言う形になっています。そこで、スマートフォンページではJavaScriptでスタイルを書き換えてページに合ったスタイルを適応させようと思っているのですが、いくらJavaScriptを書いても動作しません。
ブログではGETで値を送って結果を出しているのでページ自体を別々にファイル化しています。ちゃんと1つ1つにJavaScriptのソースを書いているのですが、開発者向けツールなどで見てみるとソース自体が無い状態になっています。
この場合どの様にすればいいのでしょうか?
当ブログ閲覧頂きありがとうございます。
javascriptでのhtml生成がうまくいかないとのことですが開発者ツールで確認したさいにエラー等は出ていないのでしょうか？
ソースを見せて頂ければ具体的なアドバイスができるかもしれません。