【テーマ名 】 aipon4gsa
【バージョン】 0.89
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2
【ライセンス】 MIT
【公 開 日 】 2011-11-2
========================================
説明（概要）
========================================
iPhone 等のスマートフォン対応のXCL2.1x(HD1.04)・XCL2.2用テーマです。HTML5で作っています。
Xoops Cube Legacy 2.2 で動作確認しました。
iPhoneという名称のテーマが既に存在していたので、aiponなんてふざけたテーマ名になっていますが、結構頑張って作りました。
基本は１カラム構成のリキッドデザインで、iPhone等に対応するため、公開時点でもっとも注目されている「jQuery Mobile」を利用しています。
webphotoモジュールの画像をiPhoneなどのスワイプ動作に対応したギャラリー表示する機能を追加（webphotoモジュールページにも対応）
このバージョンでは、初期表示は黒色ベースカラーとなっていますが、全部で５種類のベースカラーがあり、設定ファイル１カ所の書換だけで簡単に変更可能です。
さらに、xugj_block プラグインにより同じページ内に各モジュールのコンテンツを自動で書き出しすことにより画面遷移を高速化したり、ヘッダー右側には、xugj_assign プラグインを利用してインストールされたモジュールに対応するメニューを自動表示するようにしています。
また、ユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。
「jQuery Mobile」が MIT と GPL のデュアルライセンスとなっているので、このテーマについては MIT ライセンスとさせていただきます。
2012.01.15 ファイル破損してたので、ファイルを差し替えました。
========================================
説明（詳細）
========================================
とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということとスマートフォンでは utf8ベースで動作すると思いますので、eucでの動作は確認していません。
iPhone用テーマの切り替えについては、株式会社RYUS様作の「iPhone用テーマ切り替えプリロード」を利用し、プリロード内のテーマ名記述部分を変更することにより、このテーマを使うことができます。
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対応版に差し替えております。）
webphoto画像を利用した画像ギャラリーは、PhotoSwipe という jQuery プラグインを用いて実現しました。（MITライセンス）
http://www.photoswipe.com/【画面表示について】
このテーマでは、基本、全てのコンテンツが横幅一杯に表示されるように設定しています。
表示順は画面上から次のとおりとなっています。
■ 中央中央カラム 表示順 ０
■ モジュールコンテンツ（$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」ディレクトリを削除してください。（当該ディレクトリ内の個別のテンプレートを削除するのも良いでしょう。）
ただし、webphotoモジュール使用時のギャラリー表示などはできなくなります。
■理由：テーマ下テンプレート利用可能な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【webphotoの利用について】
photoswipeやprettyPhotoを利用する場合、webphotoの一般設定画面にて、次の設定を行ってください。
PopBoxを使用する 「いいえ」
LightBoxを使用する「いいえ」
一般設定画面にて設定する各種画像の大きさはデフォルトを想定しています。
一覧表示の表示タイプは、「テーブル表示」「説明文付きリスト表示」のいずれでも photoswipe や prettyPhoto が動作するように設定していますが、テーブル表示を選択した場合、テーブルではなく div（ボックス）を利用した表示としており、画面幅に応じてボックスが並ぶように設定していますので、テーブル表示時のカラム数欄の数値は意味をなしません。
なお、このテーマでは、webphotoモジュールを「webphoto」ディレクトリ名にて利用する場合を想定して、テンプレート等の設定を行っています。もし、違うディレクトリ名でご利用の場合は、別途カスタマイズが必要となりますので、ご了承ください。
========================================
カスタマイズ
========================================
【メニュー表示項目の変更】
このテーマでは、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-11-2 ver0.89
webphotoモジュールページでもphotoswipeを利用可能とした。
2011-10-24 ver0.88
各モジュール用テンプレートの a 要素に rel="external" を追記
モジュールコンテンツ表示時の「menu」ボタン a要素 を rel="external" に変更
ユーザーメニュー移動用ボタンをフッターに移動（ユーザーメニュー表示時は、フッターに「ホーム」表示）
ユーザーメニューへの画面遷移を flip に変更
2011-10-24 ver0.87 （aipon4gsに変更）
カラー設定等を簡単に変更できるよう、各種ファイルを修正。テーマ名を 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");
理由 PrettyPhoto用のプリロードが、relを追記する動作をするため、バッティングを避けた。
webphotoページのギャラリー表示に PhotoSwipe を利用、iPhone等のスワイプ動作に対応。
http://www.photoswipe.com/ 次のプリロードファイルを同封
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 ========================================
追記
========================================
●PhotoSwipe の設定
Configuration
allowUserZoom: Allow the user to zoom / pan around images. Default = true
autoStartSlideshow: Automatically starts the slideshow mode when PhotoSwipe is activated. Default = false
allowRotationOnUserZoom: iOS only - Allow the user to rotate images whilst zooming / panning. Default = false
backButtonHideEnabled: This will hide the gallery when the user hits the back button. Useful for Android and Blackberry. Works in BB6, Android v2.1 and above and iOS 4 and above. Default = true
captionAndToolbarAutoHideDelay: How long to wait before the caption and toolbar automatically disappear. Default = 5000. Set to 0 to prevent auto disappearing
captionAndToolbarFlipPosition: Place the caption at the bottom and the toolbar at the top. Default = false
captionAndToolbarHide: Hide the caption and toolbar. Default = false
captionAndToolbarOpacity: The opacity of the caption and toolbar. Default = 0.8
captionAndToolbarShowEmptyCaptions: Shows a blank caption area even if a caption cannot be found for the current image. Default = true
cacheMode: Code.PhotoSwipe.Cache.Mode.normal (default) or Code.PhotoSwipe.Cache.Mode.aggressive. Changes how PhotoSwipe manages it's cache. Aggressive will purposely set images that are not either the current, next or previous to be an empty "spacer" type image. This helps on older iOS versions if you have excessively large images. In the main, normal should suffice
doubleTapSpeed: Double tap speed in milliseconds. Default = 300
doubleTapZoomLevel: When the user double taps an image, the default "zoom-in" level. Default = 2.5
enableDrag: Enables dragging the next / previous image into view. Default = true
enableKeyboard: Enables keyboard support. Default = true
enableMouseWheel: Enables mouse wheel support. Default = true
fadeInSpeed: The speed of any fading-in elements in milliseconds. Default = 250
fadeOutSpeed: The speed of any fading-out elements in milliseconds. Default = 250
imageScaleMethod: How images will fit onto the screen. Either "fit", "fitNoUpscale" or "zoom". "fit" ensures the image always fits the screen. "fitNoUpscale" works like "fit" but will never upscale the image. "zoom" the image will always fill the full screen, this may cause the image to be "zoomed" in and cropped. Default = "fit"
invertMouseWheel: By default, moving the mouse wheel down will move to the next image, up to the previous. Setting this to true reverses this. Default = false
jQueryMobile: Whether PhotoSwipe is integrated into a jQuery Mobile project or not. By default, PhotoSwipe will try and work this out for you
jQueryMobileDialogHash: The window hash tag used by jQuery Mobile and dialog pages. Default = "&ui-state=dialog"
loop: Whether the gallery auto-loops back to the beginning when you reach the end. Default = true
margin: The margin between each image in pixels. Default = 20
maxUserZoom: The maximum a user can zoom into an image. Default = 5.0 (set to zero for this to be ignored)
minUserZoom: The minimum a user can zoom out of an image. Default = 0.5 (set to zero for this to be ignored)
mouseWheelSpeed: How responsive the mouse wheel is. Default = 500
nextPreviousSlideSpeed: How fast images are displayed when the next/previous buttons are clicked in milliseconds. Default = 0 (immediately)
preventHide: Prevents the user closing PhotoSwipe. Also hides the "close" button from the toolbar. Useful for "exclusive mode" (see examples/08-exclusive-mode.html). Default = false
preventSlideshow: Prevents the slideshow being activated. Also hides the "play" button from the toolbar. Default = false
slideshowDelay: The delay between showing the next image when in slideshow mode in milliseconds. Default = 3000
slideSpeed: How fast images slide into view in milliseconds. Default = 250
swipeThreshold: How many pixels your finger has to move across the screen to register a swipe gesture. Default = 50
swipeTimeThreshold: A swipe must take no longer than this value in milliseconds to be registered as a swipe gesture. Default = 250
slideTimingFunction: Easing function used when sliding. Default = "ease-out"
zIndex: The intial zIndex for PhotoSwipe. Default = 1000
========================================
) 掲載日 (
1494
572.53 KB
XOOPS Cube Legacy 2.1x | 2.2x
MIT
