freoカスタマイズ集

以前、独自にfreoのiPhone版テンプレートをカスタマイズしてみましたが、やっぱりしょぼいので、jQuery Mobile を使って再度カスタマイズしなおしました。
※iPhoneでの動作確認はちゃんとできてないので表示に多少不具合があるかもしれません。
※実際の動作については freoSAMPLE を参照して下さい（PCからでも閲覧可能ですがブラウザによっては正しく表示しない場合があります）。

今回のカスタマイズでは、jQuery MobileのVer1.3（正式版）を使用しています。
※プラグイン用のテンプレートは別途 こちら で配布しています。
※修正の内容については こちら をご覧ください。

• ver1.1ダウンロード
• ver1.1差分ダウンロード（過去にダウンロードしている場合はこちらでOKです）

ファイルの構成（※は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を導入しているディレクトリに上書きしてください。

【主な特徴】

• ヘッダ部分にMenuボタンを設置
  ナビゲーションバーにMenuを取り付けトップページへのリンクやログインなどができるようにし、上部に固定して表示。
  
  エントリーを表示しているときは、カテゴリー別、エントリー過去ログ、エントリー検索の表示。
  ページを表示しているときはページ検索、ページ過去ログの表示（ページアーカイブ表示プラグインを導入している場合）。
  ログイン後は、ユーザー名の表示と管理者用ページ、エントリー登録、ページ登録、設定管理（管理者のみ）へのリンクの表示（ゲストの場合はユーザー用ページの表示）。
  
• インデックス部分
  最新エントリーのリンク表示と最新ページのリンク表示（新着ページプラグインを導入している場合）。
  上部にインフォメーション、下部にコンテンツ（ギャラリーと親ページ）のリスト、メニューのリスト（メニュープラグインを導入している場合）を折りたたみ表示。
  
• 個別エントリー表示
  前の記事と次の記事、記事一覧へのリンクボタンを設置。
  トラックバックとコメントを折りたたみ表示。
  関連エントリーの折りたたみ表示（関連エントリーを導入している場合）。
  
• 個別ページ表示
  目次、ページ移動の部分を折りたたみ表示。
  トラックバックとコメントを折りたたみ表示。
  パンくずリスト表示プラグインを導入している場合はページ移動の部分に親ページの表示。
  ページ一括表示プラグイン、兄妹ページ表示プラグインを導入している場合はそれぞれページのリストを折りたたみ表示。
  
• 画像のアップロードが可能。
  freo本体についているiPhone版テンプレートではファイルのアップロードの部分は省略されていますが、safariがiOS6から「input type="file"」に対応するようになったので、メディア管理（インラインフレームを含む）、エントリー投稿、ページ投稿から画像のアップができるようになっていますが、メディア管理から一度に複数の画像登録はできません。
  ※登録した画像はiPhoneとPCでは向きが異なって表示される場合がありますのでご注意下さい（この現象はfreoが原因ではなくブラウザの問題）。
• 各プラグインの導入用にあらかじめテンプレートとcssの編集済。

詳しくは 別ページ（同梱のreadmeファイルと同じもの）を参照して下さい。

 【修正履歴】

2013/2/25 11:58修正

• エントリー登録、ページ登録で、日時の欄を日付整形プラグインでセレクトボックスにし、本文の上の欄に移しました。ただしブラウザに準じた表示のためセレクトの表示が小さくなってしまいました。
• 一部ファイルに表記の不具合があったので修正しました。
• ※以前の版をダウンロードしていた方は
  admin/entry_form.html
  admin/iframe_media_form.html
  admin/media_form.html
  admin/page_form.html
  を上書きして下さい。

2013/3/1 20:16修正

• view/default.html と page/default.html のコメント欄のidがtrackbackになっていたので修正しました。
  view/default.html の153行目の id="trackback_url" を id="comment_form" に、
  また page/default.html の157行目の id="trackback"を id="comment" に、
  同じく186行目の id="trackback_url" を id="comment_form" に、それぞれ修正して下さい。
• ※当初、comment_url と記載していましたが、comment_form の誤りです。

2013/3/20 15:47修正（ver1.1）

• メディア管理で使われる jquery.tablesorter.js（テーブルの順番をソートする機能）は無視されるようなのでヘッダとjsの表記を外しました。
• ヘッダにあったPC版への切り替えボタンをフッタに移しました。
• 日時、カテゴリ、タグなどの表記をアイコン化しました。
• 一部ボタンのアイコンを変更しました。
• コメント表示でメールアドレス、URLの表示をリンクからボタンに変更しました。
• トラックバック、コメントの設定が「表示のみ」の場合は登録できない旨の表示が出ます。
• Colorboxのインラインフレームを利用してメディア管理、メディア登録、メディア挿入ができるようになりました。 ※お使いの端末の機種、ブラウザ、サーバの状況によっては不具合が出る可能性があります。
• インライン用のメディア管理のテーブルはディレクトリ名またはファイル名（画像）と作業欄のみにしました。
• インライン用のテンプレートのボタンを小型化しました。
• 本文入力用に簡易エディタを取り付けました。 ※お使いの端末の機種、ブラウザ、サーバの状況によっては不具合が出る可能性があります。
• 更新するファイル（※はver1.1で追加） css/icon-custom.css※ images/jqm/custom-18-black.png※ images/jqm/custom-18-white.png※ images/jqm/custom-36-black.png※ images/jqm/custom-36-white.png※ js/jquery.flicksimple.js※ js/jquery.selection.js※ js/iphone/common.js templates/iphones/error.html templates/iphones/footer.html templates/iphones/header.html templates/iphones/internals/admin/comment.html templates/iphones/internals/admin/default.html templates/iphones/internals/admin/entry.html templates/iphones/internals/admin/entry_form.html templates/iphones/internals/admin/iframe_header.html templates/iphones/internals/admin/iframe_media.html templates/iphones/internals/admin/iframe_media_form.html templates/iphones/internals/admin/information_form.html templates/iphones/internals/admin/media.html templates/iphones/internals/admin/media_form.html templates/iphones/internals/admin/page.html templates/iphones/internals/admin/page_form.html templates/iphones/internals/admin/trackback.html templates/iphones/internals/default/default.html templates/iphones/internals/page/default.html templates/iphones/internals/view/default.html templates/iphones/plugins/entry_gallery/default.html

2013/5/23 11:05修正

• コメントで指摘を受けましたが、templates/iphones/internals/admin/default.html を差し替えました。 修正箇所は同ファイルの25～31行目あたりを

     <li><a href="{$freo.core.http_file}/admin/page">ページ管理</a></li>
  <!--{foreach from=$plugin_page_shortcuts|smarty:nodefaults item='plugin_page_shortcut'}-->
    <li><a href="{$freo.core.http_file}/admin/page_form?pid={$plugin_page_shortcut.id}">  {$plugin_page_shortcut.text}</a></li>
  <!--{/foreach}-->
    <li><a href="{$freo.core.http_file}/admin/page_form">ページ登録</a></li>
  <!--{foreach from=$plugin_page_shortcuts|smarty:nodefaults item='plugin_page_shortcut'}-->
    <li><a href="{$freo.core.http_file}/admin/page?pid={$plugin_page_shortcut.id}">  {$plugin_page_shortcut.text}</a></li>

  から、

     <li><a href="{$freo.core.http_file}/admin/page">ページ管理</a></li>
  <!--{foreach from=$plugin_page_shortcuts|smarty:nodefaults item='plugin_page_shortcut'}-->
    <li><a href="{$freo.core.http_file}/admin/page?pid={$plugin_page_shortcut.id}">  {$plugin_page_shortcut.text}</a></li>
  <!--{/foreach}-->
    <li><a href="{$freo.core.http_file}/admin/page_form">ページ登録</a></li>
  <!--{foreach from=$plugin_page_shortcuts|smarty:nodefaults item='plugin_page_shortcut'}-->
    <li><a href="{$freo.core.http_file}/admin/page_form?pid={$plugin_page_shortcut.id}">  {$plugin_page_shortcut.text}</a></li>

  に変更（緑字を赤字に）しています。