【テーマ名 】 aipon4s
【バージョン】 0.87a
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2
【ライセンス】 MIT
【公 開 日 】 2011-10-25
=======================================
説明（概要）
=======================================
iPhone 等のスマートフォン対応のXCL2.1x(HD1.04)・XCL2.2用テーマです。HTML5で作っています。
Xoops Cube Legacy 2.2 で動作確認しました。
iPhoneという名称のテーマが既に存在していたので、aiponなんてふざけたテーマ名になっていますが、結構頑張って作りました。
基本は１カラム構成のリキッドデザインで、iPhone等に対応するため、公開時点でもっとも注目されている「jQuery Mobile」を利用しています。
このバージョンでは、初期表示は黒色のベースカラーとなっていますが、全部で５種類のベースカラーがあり、設定ファイル１カ所の書換だけで簡単に変更可能です。
さらに、xugj_block プラグインにより同じページ内に各モジュールのコンテンツを自動で書き出しすことにより画面遷移を高速化したり、ヘッダー右側には、xugj_assign プラグインを利用してインストールされたモジュールに対応するメニューを自動表示するようにしています。
また、ユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。
「jQuery Mobile」が MIT と GPL のデュアルライセンスとなっているので、このテーマについては MIT ライセンスとさせていただきます。
2012.01.15 ファイル破損してたので、ファイルを差し替えました。
=======================================
説明（詳細）
=======================================
とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということとスマートフォンでは utf8ベースで動作すると思いますので、eucでの動作は確認していません。
iPhone用テーマの切り替えについては、株式会社RYUS様作の「iPhone用テーマ切り替えプリロード」を利用し、プリロード内のテーマ名記述部分を変更することにより、このテーマを使うことができます。
（本テーマ下にあるup/preloadにこのプリロードを同封させていただいております。テーマ名も書き替え済みですので、ご利用ください。）
http://ryus.co.jp/modules/d3downloads/index.php?page=singlefile&cid=2&lid=38 メニューは、Xoops Users Group Japan(XUGJ) で GIJOEさんが提唱された xugj_assign.php を利用したメニューを採用しています。
通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。
http://www.xugj.org/modules/d3forum/index.php?topic_id=125 なお、同封しているものは、オリジナルの xugj_assign.php から少し変更しているので、xugj_assign_aipon4.php という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。
なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
domifaraさん、ありがとうございます。
（javascriptオフ時には、リダイレクトの文字などがボックス表示されます。）
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。
(xugj_already_js.php をXCL2.1対応版に差し替えております。）
【画面表示について】
このテーマでは、基本、全てのコンテンツが横幅一杯に表示されるように設定しています。
表示順は画面上から次のとおりとなっています。
■ 中央中央カラム 表示順 ０
■ モジュールコンテンツ（$xoops_contents）・・・モジュールページの場合
■ 中央中央カラム 表示順 １～９９
■■ 中央左カラム、中央右カラム （これのみ半分の幅で表示）
■ 中央中央カラム 表示順 １００以上
■＋ サブコンテンツ（クリックすると展開する）
■ 左右カラム
■＋ ユーザーメニュー（ゲストの場合は、「ログイン」メニュー。クリックすると展開する。）
■ ユーザーメニュー表示（ゲストは、ログインブロック表示）
【メニューから選択したモジュールへの画面遷移について】
前述のとおり、このテーマでは xugj_assign.php プラグインを用いてメニュー項目を自動で作成しており、画面上のヘッダー右端部分に「menu」と表示されるボタンをクリックすることで、メニュー画面に切り替わります。
このメニュー画面において、各モジュールに対応するメニュー項目をクリックすると、それぞれのコンテンツが表示されますが、モジュールのタイプにより次の２とおりの表示があります。
●１ xugj_blockプラグイン によりブロックテンプレート情報が抽出できるモジュールの場合
トップページにデータが抽出、初期状態では非表示となっており、「jQuery Mobile」のページ内リンク表示機能により、あたかも次のページがスライドインするような表示を実現。これにより高速な画面遷移が可能となっています。
対応しているモジュールは次のとおりです。
bulletin、d3blog、d3forum、pico、webphoto、myalbum、d3dialy、weblinks、d3downloads、piCal
ただし、次のページを表示したのち、当該ページ内にリンクされている各モジュールの詳細ページ等に移動する場合は、通常のリンクと同様の動作となるため、表示するには一定の時間が必要となります。
●２ xugj_blockプラグイン に対応していないモジュールの場合
xugj_blockプラグイン によるブロックテンプレート情報が抽出できないため、通常のリンクとしてモジュールのトップ画面に移動します。そのため、表示するには一定の時間が必要となります。
なお、次のモジュールについてメニューへの表示・リンク設定を行っていますので、それ以外の非対応モジュールの場合、またはディレクトリ名を変更してモジュールした非対応モジュールの場合は、下記カスタマイズに従って設定変更してください。
モジュールをインストールしたディレクトリ名 wordpress、liaise、ccenter
=======================================
インストール
=======================================
インストールはテーマのアップロード＋αが必要です。
まずは、解凍してできあがったフォルダ「aipon4」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。
次に、xugj_block 等の smartyプラグイン 利用のための作業や各モジュールの表示をこのテーマに最適化するため、次の手順でテーマ下テンプレート利用のための作業行ってください。
完了したら通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
【テーマ下テンプレートが利用可能な場合】
ご利用になっている xoops がテーマ下テンプレート利用可能な場合は、本テーマディレクトリ下にある 「templates」ディレクトリに収納されたカスタマイズ済みのテンプレートを利用するようになります。
この場合、xugj_date や xugj_block を利用しますので、本テーマ下の「up/plugin」フォルダに収納されている modifier.xugj_date.php と function.xugj_block.php をFTPにてサイトの「plugin」ディレクトリにコピーしてください。（既に存在する場合は不要）
「plugin」ディレクトリは、XCL2.1x と XCL2.2 では場所が違うのでご注意ください。
XCL2.1xの場合 /XOOPS_ROOT_PATH/class/smarty/plugins/
XCL2.2の場合 /XOOPS_TRUST_PATH/libs/smarty/plugins/ または
/XOOPS_TRUST_PATH/libs/smartyplugins/ （preload「HdXoopsTplHook.class.php」を使っている場合）
【テーマ下テンプレートが利用できない場合】
もし、テーマ下テンプレートを利用できない環境の場合、本テーマ下の「up/preload」フォルダにある HdXoopsTplHook.class.php をFTPにてサイトの「preload」ディレクトリに、本テーマ下の「up/plugin」フォルダにある resource.db.php をサイトの「plugin」ディレクトリにそれぞれコピーしてください。
詳細はこちらを参照して下さい。
http://xoops.peak.ne.jp/md/news/index.php?page=article&storyid=450【テーマ下テンプレート利用可能だが、本テーマのテーマ下テンプレートを使いたくない場合】
逆に、ご利用になっている xoops がテーマ下テンプレート利用可能な状態であって、本テーマ下のテンプレートを使いたくない場合は、テーマ下にある「templates」ディレクトリを削除してください。（当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。）
■理由：テーマ下テンプレート利用可能なxoops（HDなど）では、次の優先順位でテンプレートを読み込むため
１ テーマ下テンプレート
２ 現在ActiveなDBテンプレート
３ Default(DB)テンプレート
つまり、テンプレートを変更しようとして、Altsysで「現在ActiveなDBテンプレート」をいくら修正しても、テーマ下テンプレートがある場合はそちらが優先されてしまうのです。
【prettyPhotoを利用する場合】
このテーマでは、jQuery のプラグインである prettyPhoto を利用するとお洒落なポップアップ画像表示ができるように設定しています。
特に webphotoモジュールの画像一覧ページでは、ポップアップ画像のグループ化を行っており、ギャラリーのような表示が可能です。
ご利用になるには、同封している jQuery_Pretty.class.php をサイトのプリロードディレクトリにアップロードしてください。
xcl2.2の場合は、xoopsのcommonディレクトリに jQuery と一緒に prettyPhoto が入っていると思いますので、それで作動すると思います。もし、commonディレクトリに prettyPhoto がない場合は、このテーマに同封しているものをアップロードしてください。
利用しているプリロードはdomifaraさん作のもので、最新のものは次のurlとなります。（domifaraさん、感謝します。）
http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?page=singlefile&cid=3&lid=67=======================================
カスタマイズ
=======================================
【メニュー表示項目の変更】
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用）
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_aipon4_menus_****.php を削除してください。
再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。（domifaraさん、ありがとうございます。）
http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?cid=2【メニューに対応するリンク設定など】
xugj_block 非対応モジュールの場合、iPhone_menu.html 内の記述を編集してください。
もし、wordpressMe(XPress)を blog というディレクトリでインストールした場合、同html内の wordpress というディレクトリ名記述部分を変更してください。
xugj_block 対応モジュールの場合、iPhone_contents.html 内の記述を編集してください。
インストールしたディレクトリ名が異なる場合は、上記と同様にディレクトリ名に対応する部分を編集してください。
その他、xugj_block による抽出やテーマ下テンプレートを変更したい場合は・・・google先生にお尋ねください。
・・・というのも不親切なので、とりあえず簡単に説明させていただきます。
【xugj_block によるモジュール情報の抽出について】
このテーマでは、iPhone_contents.html の記述により、「menu」ページから遷移する各モジュールのページの情報を表示させています。
これは、前述のとおり xugj_block の機能を利用しており、ファイル内に簡単な説明も付記しているのでご覧ください。
ここでは、webphoto に対応する部分の説明を行うことにします。（webphotoのギャラリーページ）なお、ファイルを編集する際は、UTF-8を取り扱うことができるエディターをご利用ください。
■インストールディレクトリ名がwebphoto 以外の場合
<{* webphoto の場合 *}> 以下の６行が webphoto に関する記述で、もし webphoto をインストールしたディレクトリが webphoto ではない場合、次のとおり変更を行いましょう。
１ <{elseif $menu0.dirname == "webphoto"}> の webphoto とある箇所をインストールしたディレクトリ名に変更する。
２ <{xugj_block file="modules/webphoto/blocks/blocks.php" func="b_webphoto_tophits_p_show" opt="webphoto,15,0,1,20,1,0,1,0,0,0,300" item="block"}> の opt設定の１番目、webphoto と記述されている部分をインストールディレクトリ名に変更する。
■表示させる枚数を変更する場合
opt設定の２番目、15 という半角数字を変更してください。（ここでは１５枚表示させる設定としています。）
■表示させるカテゴリを変更する場合
opt指定の３番目、0 という半角数字を変更してください。（ここでは全てのカテゴリを表示させる設定としています。）
【表示色の変更】
このテーマでは、黒色系・青色系・シルバー系・グレー系・黄色系と５種類のベースカラーを装備しており、次のような作業により簡単にベースカラーを変更することができるようになっています。
１ 最初に、ローカル（ご自身がお使いのPC）に保存しているこのテーマフォルダ内の language フォルダに配置されている ja_utf8.php ファイルをエディターで開いてください。（重要：秀丸などのUTF8を取り扱うことができるエディターをお使いください。）
２ 同ファイルの最終行にある次の記述の半角英字部分を変更します。（一番後ろにある半角英字部分のみ変更してください。）
黒色系（デフォルト）の場合 define('_COLORS_JQM', 'a');
青色系の場合 define('_COLORS_JQM', 'b');
シルバー色系の場合 define('_COLORS_JQM', 'c');
グレー系の場合 define('_COLORS_JQM', 'd');
黄色系の場合 define('_COLORS_JQM', 'e');
３ 変更後、保存した ja_utf8.php ファイルをFTPソフトにてサイトのこのテーマ下 language ディレクトリに上書きしてください。
======================================================
バージョンアップ履歴
======================================================
2011-10-25 ver0.87a
各モジュール用テンプレートの a 要素に rel="external" を追記
モジュールコンテンツ表示時の「menu」ボタン a要素 を rel="external" に変更
2011-10-24 ver0.87 （aipon4sに変更）
カラー設定等を簡単に変更できるよう、各種ファイルを修正。テーマ名を aipon4s とした。
色設定変更のための手法として、言語ファイル内にCSSファイルのクラス名に追記する定数を定義しておき、テーマやテンプレート等の色変更に関連するクラス名の末尾に追記するなどにより、言語ファイル内の定数１カ所を変更するだけで関連する全ての色設定を変更可能とした。（５色のベースカラーを採用）
言語ファイル内の設定 define('_COLORS_JQM', 'a');
ファイル内のクラス名設定部分 class="color_<{$smarty.const._COLORS_JQM}>"
ブラウザにより表示されるクラス名 class="color_a"
（これにより、color.cssファイル内の color_a クラスが適用される。）
別ページへの画面遷移の際、jQueryMobile の ajax を使わないようにするためのjavascriptの設定を変更
従来 jQuery("a").attr("rel","external");
変更 jQuery("a").attr("data-ajax","false");
次のプリロードファイルを同封
HdXoopsTplHook.class.php
テーマ下テンプレート機能等を実現する
jQuery_Pretty.class.php
Lightbox風の表示を実現するjQueryのプラグインPrettyPhotoの機能をサイト全体に適用させる。（BBCodeでも適用可）
次のオプション追加されたものに換装：deeplinking: false,
http://www.xugj.org/modules/d3forum/index.php?post_id=6442 （xoopsディレクトリの common ディレクトリ下に prettyphoto ディレクトリを配置して、関連ファイルを保存する必要あり）
SaveTheme.class.php
選択したテーマを次回表示時に優先表示させる
2011-10-20 ver0.86
xugj_blockによるd3downloadsの表示ページを改修
センター左右ブロック表示時の崩れを修正
色指定用のcolor.css を追加、ブロックコンテンツのh3用の設定などを追記
ユーザーメニューのログインフォームに data-ajax="false" を追加（フォームに jQueryMobile の ajaxを使わない）
d3downloadsのテーマ下テンプレートを修正（data-ajax="false"追加もあり）
d3forumのテーマ下テンプレートを修正（xugj_dateを使って投稿日の表示を修正など）
2011-10-18 ver0.85
バージョン１に届くまでの完成度はないけれど、何とか使える形になったので公開
=======================================
お願い
=======================================
できましたら、当方のサイト掲示板（ご訪問帳）に何か書き込んでいただけると嬉しいです～m(_ _)m
http://xoops123.com/modules/d3forum/?forum_id=1
175
537.96 KB
XOOPS Cube Legacy 2.1x | 2.2x
MIT
