ユーティリティ

2017年06月

- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoのiPhone版テンプレートをjQuery Mobileでカスタマイズ(ver1.1)

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

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

ファイルの構成(※はver1.1で追加)
freo_iphone_1_1
 ┃
 ┣ cssiphonecommon.css(独自にカスタマイズ)
 ┃                ┣ icon-custom.css※(カスタムアイコン用)
 ┃                ┗ jquery.mobile.css(画像のパスのみ変更)
 ┣ imagesjqmajax-loader.gif
 ┃               ┣ custom-**-***.png※(カスタムアイコン画像)
 ┃               ┗ icon-**-***.png(jQuery Mobileデフォルトアイコン用)
 ┣ jsjquery.flicksimple.js※(Androidのスクロール用)
 ┃    ┣ jquery.selection.js※(簡易エディタ用)
 ┃    ┗ iphonecommon.js(独自にカスタマイズ)
 ┃              ┗ jquery.mobile.js
 ┣ libsfreointernalsadminconfig.php(設定管理の表示用にカスタマイズ)
 ┃      ┗ smartypluginsmodifier.date_select.php(日時整形プラグイン)
 ┗ templatesiphones(以下(略))

以上をfreoを導入しているディレクトリに上書きしてください。

【主な特徴】

  • ヘッダ部分にMenuボタンを設置
    ナビゲーションバーにMenuを取り付けトップページへのリンクやログインなどができるようにし、上部に固定して表示。
    ファイル 66-1.jpg
    エントリーを表示しているときは、カテゴリー別、エントリー過去ログ、エントリー検索の表示。
    ページを表示しているときはページ検索、ページ過去ログの表示(ページアーカイブ表示プラグインを導入している場合)。
    ログイン後は、ユーザー名の表示と管理者用ページ、エントリー登録、ページ登録、設定管理(管理者のみ)へのリンクの表示(ゲストの場合はユーザー用ページの表示)。
    ファイル 66-2.jpg
  • インデックス部分
    最新エントリーのリンク表示と最新ページのリンク表示(新着ページプラグインを導入している場合)。
    上部にインフォメーション、下部にコンテンツ(ギャラリーと親ページ)のリスト、メニューのリスト(メニュープラグインを導入している場合)を折りたたみ表示。
    ファイル 66-3.jpg
  • 個別エントリー表示
    前の記事と次の記事、記事一覧へのリンクボタンを設置。
    トラックバックとコメントを折りたたみ表示。
    関連エントリーの折りたたみ表示(関連エントリーを導入している場合)。
    ファイル 66-4.jpg
  • 個別ページ表示
    目次、ページ移動の部分を折りたたみ表示。
    トラックバックとコメントを折りたたみ表示。
    パンくずリスト表示プラグインを導入している場合はページ移動の部分に親ページの表示。
    ページ一括表示プラグイン、兄妹ページ表示プラグインを導入している場合はそれぞれページのリストを折りたたみ表示。
    ファイル 66-5.jpg
  • 画像のアップロードが可能。
    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.htmlpage/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.cssimages/jqm/custom-18-black.pngimages/jqm/custom-18-white.pngimages/jqm/custom-36-black.pngimages/jqm/custom-36-white.pngjs/jquery.flicksimple.jsjs/jquery.selection.jsjs/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>

    に変更(緑字赤字に)しています。

ページ移動

関連エントリー

コメント

あばん

こんばんは、修正お疲れ様です。
iPhone版テンプレート、快適に利用させていただいております。
他にもFreoに関する様々なカスタマイズ、ご活用させて頂いております。

2013/2/25 11:58に修正されたようですが
ダウンロードのリンクを押しても、404エラーが表示されてしまいます。
ご報告をと思いまして、コメント投稿させて頂きます。

  • 2013/02/25 23:27:00

ccc

どうもご迷惑をお掛けしましたm(__)m
ダウンロード元のリンクが誤ってたので修正しました。

  • URL
  • 2013/02/25 23:48:00

もりた

テンプレート活用させていただいております。
素晴らしいです、ありがとうございます。

  • 2013/04/08 00:50:00

陽子

こんにちは!
先日急ぎでスマホ用サイトを作る事になり、こちらのiPhone版テンプレートをほぼそのまま使わせて頂きました。
サイトの性質上レスポンシブデザインの適用が難しく、jQuery Mobile等全く把握していなかったので大変助かりました…ありがとうございます(__)!
まだ修正すべき箇所は沢山あるのですが、これからじっくりとカスタマイズしていきたいと思います。

ご報告が一点…iPhone版の管理画面ですが、
ページ管理のショートカットを設定している場合、
「ページ管理」以下のショートカットと「ページ登録」以下のショートカット(の管理と登録のリンク)が逆になるようです。ご確認下さい(私の勘違いでしたらすみません(^^;)。

これからも参考にさせて頂きます(*^o^*)ノ

  • 2013/05/22 23:08:00

ccc

>「ページ管理」以下のショートカットと「ページ登録」以下のショートカット(の管理と登録のリンク)が逆になるようです。
陽子さんご指摘ありがとうございます。確認したところそのとおりでございました。
修正いたしましたm(__)m

  • URL
  • 2013/05/23 11:05:00

ポコ

こんばんは、初めまして。
テンプレート、カスタマイズを活用させて頂いています。
ありがとうございます。

iPhone版テンプレートのエントリー記事のコメントの部分なのですが、iPhone&Androidで見た時に長い文章が
【例】
いぬ
あいうえおかき...
よろしくお願い...

というようになります。

縦画面・横画面にしても上記の様になります。
コメントを全文表示されるようにしたいのですがどのようにすれば宜しいのでしょうか?

  • 2014/01/08 19:57:00

ccc

>iPhone&Androidで見た時に長い文章が...
同現象確認しました。

jQuery Mobileの方で自動的に長文がカットされているようなので、とりあえずcss/iphone/common.cssに

/********* コメント長文省略解除 ***********************************************/

.ui-li-desc {
overflow: visible;
white-space: normal;
}

を追加すれば全文が表示されるようになります。

参考:jQuery Mobileにテキストを省略させずに表示する(ポケット詳解 jQuery Mobile辞典 サンプルサイト)
http://jquerymobile-memo.com/sample/1-5-nosim.html

  • URL
  • 2014/01/11 22:04:00

ポコ

ccc様
返事遅くなってすいませんでした。

教えて頂いた通りに追加し、確認しました。
きちんと全文表示されるようになりました。
ありがとうございます。

とても助かりました。
本当にありがとうございました。

  • 2014/01/14 12:43:00

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)