freoのjQuery Mobileカスタマイズテンプレートについて
freoのjQuery Mobileカスタマイズテンプレートについて（Ver1.1）
ダウンロードはこちらから行って下さい。
今回のカスタマイズでは、jQuery MobileのVer1.3（正式版）を使用しています。
※実際の動作についてはfreoSAMPLEを参照して下さい（iPhone、Android、iPadで閲覧可能）
ファイルの構成（※はver1.1で追加）
freo_iphone_1_1
┃
┣ css ━ iphone ┳ common.css（独自にカスタマイズ）
┃ ┣ icon-custom.css※（カスタムアイコン用）
┃ ┗ jquery.mobile.css（画像のパスのみ変更）
┣ images ━ jqm ┳ ajax-loader.gif
┃ ┣ custom-**-***.png※（カスタムアイコン画像）
┃ ┗ icon-**-***.png（jQuery Mobileデフォルトアイコン用）
┣ js ┳ jquery.flicksimple.js※（Androidのスクロール用）
┃ ┃┗ jquery.selection.js※（簡易エディタ用）
┃ ┗iphone ┳ common.js（独自にカスタマイズ）
┃ ┗ jquery.mobile.js
┣ libs ┳ freo ━ internals ━ admin ━ config.php（設定管理の表示用にカスタマイズ）
┃ ┗ smarty ━ plugins ━ modifier.date_select.php（日時整形プラグイン）
┗ templates ━ iphones（以下（略））
以上をfreoを導入しているディレクトリに上書きしてください。
【従来のfreoのiPhone版テンプレートとの機能の違い】※はver1.1で追加
各プラグインの導入時に表示されるようあらかじめテンプレートを編集してあります。
- 各プラグインを導入しなくても使用には問題ありません。
- 各プラグイン用の部分については
<!--{if $freo.plugin.xxxx}-->
～（略）～
<!--{/if}-->
で記載してあります（xxxxはプラグイン名）ので適宜編集して下さい。
入力フォームを強化しました。
- メールアドレスは「input type="email"」、URLは「input type="url"」、キーワードは「input type="search"」、並び順：「input type="number"」に変更し、極力入力に合ったキーボードが出てくるようにしています。
- 入力部分にはplaceholderでガイドテキストを表示し、リセットボタン（jQuery Mobileの機能）も設置（textareaや並び順などは除く）。
- 必要に応じてautocapitalize="off"（英字で入力時の先頭文字が大文字になる機能を制御）やautocorrect="off"（英字で入力時のオートコレクト機能を制御）を追加しています。
プラグイン用ファイルの追加
- freo本体に同梱して配布されているエントリーギャラリー、インポート、エクスポートの各プラグイン用のテンプレートを同梱しています。
※インポート、エクスポートの各プラグインは使用できないようにしてあります。
画像のアップロードができます。
- 登録した画像はiPhoneとPCでは向きが異なって表示される場合がありますのでご注意下さい（この現象はfreoが原因ではありません）。
※こちらにあるように右側に丸いホームボタンがくるように横向きで撮影すればiPhoneからでもPCからでも同じ向きに表示されます。
Colorboxのインラインフレームを利用してメディア管理、メディア登録、メディア挿入ができるようになりました。※
- お使いの端末の機種、ブラウザ、回線状況によってはフレームのスクロールができないなどの不具合が出る可能性があります。
- メディア登録にはしばらく時間がかかるようですので気長にお待ち下さい(^^ゞ
本文入力用に簡易エディタを取り付けました。※
- エディタの使用は予め文章を打ってタグを挟んでも、先にタグを入れても使えるようにしています。
- キー入力時に左にスワイプすると本文のプレビューが表示され、右にスワイプするとプレビューを閉じるようにしています。
- freoの本文変換プラグインにより改行などが自動変換される場合があります。
ヘッダ部分（header.html）
- メディア管理で使われているjquery.tablesorter.js（テーブルの順番をソートする機能）は無視されるようなので表記から外しました（jquery.tablesorter.js本体はPC版で使用しているので削除しないで下さい）。※
- ナビゲーションバーにMenuボタンを取り付け従来はフッタにあったトップページへのリンクやログインなどができるようにし、上部に固定して表示します。
※固定表示を辞めたい場合は18行目のdata-position="fixed"をdata-position="inline"に変更して下さい。 - エントリーを表示しているときは、Menuボタンからカテゴリー別の表示、エントリー過去ログの表示、エントリー検索（検索プラグインを導入するとそちらが表示※）ができるようになっています。
- ページを表示しているときは、Menuボタンからページ検索（検索プラグインを導入するとそちらが表示※）、ページ過去ログの表示（ページアーカイブ表示プラグインを導入している場合）ができるようになっています。
- ログイン後は、Menuボタンからユーザー名の表示と管理者用ページ（ゲストの場合はユーザー用ページ）、エントリー登録（管理者と投稿者の場合）、ページ登録（管理者と投稿者の場合）、設定管理（管理者のみ）などへのリンクが表示されるようになっています。
フッタ部分（footer.html）
- 「Created by freo.」の表記を追加しました。
- ヘッダにあったPC版への切り替えボタンを移しました。※
インデックス部分（default/default.html）
- 最新エントリーのリンク表示と最新ページのリンク表示（新着ページ表示プラグインを導入している場合）ができるようになっています。
タイトルは全文表示されます。 - インフォメーションを表示する場合は上部に折りたたんでいます。
- コンテンツ（ギャラリーと親ページ）のリスト、メニューのリスト（メニュー登録プラグインを導入している場合）は折りたたみ表示されるようになっています。
※リストを開いた状態のまま表示させたい場合は
<div data-role="collapsible">
の部分を
<div data-role="collapsible" data-collapsed="false">
に変更（赤字の部分を追加）します。 - 最新エントリーのリンク表示にあるカテゴリ、コメント、トラックバックの表記をアイコン化しました。※
個別エントリー表示（view/default.html）
個別ページ表示（page/default.html）
- 目次、ページ移動はページのリストが折りたたみ表示されるようになっています。
- トラックバックとコメントは折りたたみ表示されるようになっています。
- パンくずリスト表示プラグインを導入している場合はページ移動の部分に親ページの表示ができるようになっています。
- ページ一括表示プラグイン、兄妹ページ表示プラグインを導入している場合はそれぞれページのリストが折りたたみ表示されるようになっています。
- Twitterフォロワー限定公開プラグイン、Twitterフレンド限定公開プラグイン、フィルター認証確認プラグインを導入している場合はその旨の表示ができるようになっています（表示部分はPC版のテンプレートを使用）。
※ページ一括表示プラグインと兄妹ページ表示プラグインのリストでは現在表示しているページのタイトルにはリンクしないように設定しています。 - タグの表記をアイコン化しました。※
- コメント表示でメールアドレス、URLの表示をリンクからボタンに変更しました。※
- トラックバック、コメントの設定が「表示のみ」の場合は登録できない旨の表示が出ます。※
ファイル一覧のエラーページ（file/error.html）
ユーザー用ページ（user/default.html）
管理画面（admin/）
- 各管理ページから関連のページヘのリンクボタンをつけています。
- 各管理の一覧は、jQuery Mobileのレスポンシブテーブルに対応しています（画面の幅によって表示が変わります）。
※jQuery Mobileのレスポンシブテーブルについてはこちらの記事を参照して下さい。
エントリー登録、ページ登録（admin/entry_form.html、admin/page_form.html）
- オプション、添付ファイル、エントリーまたはページ情報、コメント・トラックバック、閲覧制限の入力部分をそれぞれ折りたたみ表示にしました。
- 現在日時の一括入力ができるようにしています。
日時の設定は日付整形プラグインでセレクトボックスにしましたが、jQuery Mobileに準じた表示だと機能しないのでブラウザに準じて表示する方法に切り替えて使用しています。そのためセレクトの表示が小さくなってしまいました。
※日付整形プラグインは公開終了の日時設定にも使用しています（プラグインは同梱しています）。 - 添付ファイル、イメージ、オプションの画像のアップロードができます。
- 本文の欄にあるボタンからメディア管理だけでなくメディア登録もできます（Colorboxのインラインフレームを利用※）。
- 編集時には添付ファイル、イメージ、オプションの画像が登録されている場合は画像のサムネイルを表示するようにしています。
- ページID変更プラグインを導入している場合は、ページ編集時にIDの変更画面が表示されます。
- 本文入力用に簡易エディタを取り付けました。※
メディア登録（admin/media_form.html、admin/iframe_media_form.html）
- 画像のアップロードができます。
※メディア管理から一度に複数の画像登録はできません（iPhoneやiPadのカメラロールに保存されている画像のファイル名はすべてimage.jpegとなりfreoでは同じファイル名での同時保存ができないため）。 - ファイルの内容入力用に簡易エディタを取り付けました。※
インフォメーション管理（admin/information_form.html）
- 本文の欄にあるボタンからメディア管理だけでなくメディア登録もできます（Colorboxのインラインフレームを利用※）。
- 本文入力用に簡易エディタを取り付けました。※
CSSファイル（css/iphone/common.css）
JSファイル（css/iphone/common.js）
- メディア管理の部分を削除しました。※
- メディア挿入の部分の記載をインラインフレーム用に改良しました。※
- 「現在日時設定」（現在日時の一括入力用）の部分を追加しました。
- jQuery Mobileではページ遷移でAjaxを使用するのですが、これを使うとColorBoxがうまく起動しないため（fancyBoxだとそんなことないんですが(^_^;)）「jQuery MobileのAjax遷移を無効化」の部分を追加しています。
- ColorBoxのフレームがむやみに大きくならないよう調節しています。
- 簡易エディタ用とAndroidのインラインフレームのスクロール用の表記を追加しました。※
【jQuery Mobileテンプレートのカスタマイズについて】
- 色などのデザインを変更したい場合は、jQuery Mobileが用意している「ThemeRoller」を使用するといいでしょう。
使用方法についてはjQueryMobileのテーマローダーで簡単テーマ作成を参考にして下さい。 - jQuery Mobile形式のテンプレートの書き方などについてはjQuery Mobile例文辞典を参考にして下さい。
ただし、jQuery MobileのAjax遷移を無効化している関係でダイアログ表示は使用できません。 - jQuery MobileのAjax遷移を有効にしてColorBoxを使用する方法が判明しました。
css/iphone/common.jsの129行目あたりにある
$(target).colorbox({maxHeight:"90%"});
の部分を
$(target).on('tap', function() {
$(this).colorbox({maxHeight:"90%"});
});
に変更（当初.liveと記載していましたがjQuery1.7以降で非推奨であることが判明し.onに変更しています）し、173行目辺りの
//jQuery MobileのAjax遷移を無効化
$(document).on("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
の部分を削除して下さい。
※Ajaxによるページ遷移を有効にするとアクセスログ解析で正しい解析がなされないなど不具合が出る恐れがありますのでご注意下さい。
配布元：cccabinet