エントリー

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

  • 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

  • 2014/01/11 22:04:00

ポコ

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

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

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

  • 2014/01/14 12:43:00

haneta

freoのiPhone版テンプレートを利用させていただいております。
ありがとうございます。

実は、投稿キープラグインを導入したため、管理人以外がiPhone版テンプレートからコメントを投稿することができなくなりました。
次の記述をどこかに入れなければならないと思うのですが、うまく行かず、作者様に質問させていただくことにしました。

<!--{if !$freo.user.id and !$smarty.session.plugin.postkey.approved}-->
<dt>投稿キー(スパム対策に、<img src="{$freo.core.http_file}/postkey" alt="投稿キー" title="投稿キー" width="50" height="20" /> を半角で入力してください。)</dt>
<dd><input type="text" name="plugin[postkey][key]" size="10" value="" /></dd>
<!--{/if}-->

どうすればいいのか、ご教示賜りますと幸甚です。
よろしくお願いします。

  • 2020/01/06 11:14:30

ccc

freo公式サイトの掲示板で

iPhone用のテンプレートを修正し、無事解決することができました。

解決されたかもしれませんが、遅ればせながら回答を

templates/iphones/internals/view/default.htmlの
201行目あたりにある

<div class="ui-grid-a">
  <div class="ui-block-a"><input type="submit" name="preview" value="確認する"></div>
  <div class="ui-block-b"><input type="submit" value="登録する" data-theme="b"></div>
</div>

の前あたりに入れて下さい。

  • 2020/01/11 22:02:37

haneta

ccc様

ご教示ありがとうございました。
なんとか自己解決して、うまく使わせていただいております。

微妙に違う場所

<label for=restriction" class="select">閲覧制限</label>

の直前に入れておりましたが、問題なく動いています。
なお、

templates/iphones/internals/page/default.html

も同様に書き換えています。

試しにご教示の通りに書き換えると、

Warning: mb_strimwidth() [function.mb-strimwidth]: Width is negative value in /home/省略/libs/freo/plugins/end.inform.php on line 41
Warning: Cannot modify header information - headers already sent by (output started at /home/省略/libs/freo/plugins/end.inform.php:41) in /home/省略/libs/freo/common.php on line 1221

のようなメッセージが出て、エラーが起こる前の元のファイルを上書きアップロードし直しても、二度と直らないという不具合に出くわしました。
理由はさっぱりわからないのですけれども。
このエラーで、何かが書き換わってしまうのか?さっぱりわかりませんが…。

ともあれ、ご教示いただき、ありがとうございました。

  • 2020/01/12 16:08:32

haneta

ccc様

上記コメント、非常に失礼な書き方になっていることに気付きました。
決してccc様のご教示に従った結果、エラーを生じたという意味ではなく、それまでも何度か何かを書き換えてアップロードした後、似たようなエラーを起こし、元のファイルを上書きアップし直しても、元に戻らないという現象に悩まされているだけのことです。
誤解を招くような書き方をしたこと、お許しください。

  • 2020/01/12 18:33:51

haneta

CCC様

先日はご教示を賜りありがとうございました。
貴iPhone版テンプレートを快適に使わせていただいております。

質問があり、コメントを差し上げます。
iPhoneについてはこのテンプレートで閲覧できるのですが、[freo/templates/iphones]を[androids]にリネームすることで、アンドロイドにも対応させることができるのでしょうか?
私がiPhoneユーザーでアンドロイドでの検証ができないので、おたずねした次第です。
お手すきの折がございましたら、ご教示ください。

なお、前コメントでのエラーは、メール通知の設定で、通知する長さを1にしていたための、単純なエラーでした。
お恥ずかしい限りです。

よろしくお願いいたします。

  • 2020/01/31 19:15:56

ccc

[freo/templates/iphones]を[androids]にリネームすることで、アンドロイドにも対応させることができるのでしょうか?

スマホ用のテンプレートはviewportの大きさで切り替わる仕様なので、特にリネームしなくてもOKだと思います。
iPhone用とAndroid用で表示を変えたいのなら、別々に用意してください。
参考:スマホ用テンプレートをandroidに対応させる方法
https://32877.xii.jp/index.php/view/7

  • 2020/02/01 16:24:14

haneta

ccc様

ご教示ありがとうございます。
では、別にアンドロイド用に用意しなくても、何もしなくてもいいということですね。
実は投稿キープラグインを導入しているのですが、アンドロイドでアクセスされた時に、アンドロイド用のテンプレートの(…view/default.html)がなく、いので、投稿キーが入力できないんじゃないかと心配でした。
アンドロイドをもっていないので確認はできませんが、大丈夫ということですね?
質問ばかりで申し訳ありません。

  • 2020/02/01 17:00:45

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 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
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed