本文スペースに文章を入れると、写真ギャラリー内の各カテゴリーごとに紹介文を書くことができます。

本文スペースに文章を入れると、写真ギャラリー内の各カテゴリーごとに紹介文を書くことができます。

本文スペースに文章を入れると、写真ギャラリー内の各カテゴリーごとに紹介文を書くことができます。

まぁ、まだまだやること山積みで、完成度10%ってトコですけどw

全体像が見えてくると、やりがいがあるね。

一応書き込みはできるんだけど…

なんだこれ…?? どうすればちゃんと表示するんだろう?

2011-09-09追記

あきらめてたら翌日、突然表示されるようになってました。

設定が反映されるのに時間がかかるってことなのかな?
よくわからないけど、とりあえず完成?w

今回のリニューアルは、今まで漫然と使っていたMODxの機能を本腰をいれて掘り下げ、自分用としてだけではなく、汎用として使い回せるHP構築ツールを目指して、自分の拙い知識を総動員して作成しています。

今まで敬遠してて使ってこなかった便利な機能にもいくつか手を出しているので、そのあたりも整理してここに紹介していけたらなと思います。

但し!!! 

この2.01rc1はあくまでも暫定版。今回、私の要望に応える形でSoushi様が即興でソースに手を加えてくださったものなので、正式版として公開されているものではありません。その点、ご注意ください。
不安な方は今回の改造点を含めた正式版が発表されるのを待ちましょう。といっても、このサイトでは既に実働していまして、今のところなんら不具合は発生していません(´∇｀;A 

URLはこちら→Mobile Converter 2.01rc1(github)

さて、導入するにあたり、いくつか設定が必要なのでそれも書いておきます。

ファイルブラウザ及びTinyMCEの設定

現在のMobile Converterは、変換する画像のパス等を相対パスで扱っています。それに対して、現行のMODxのデフォルト設定では、ファイルブラウザ、TinyMCE両方ともが絶対パスで扱うように設定されています。
その為、このふたつの設定を変えて相対パスで扱うように変更する必要があります。 

・ファイルブラウザ
 ツール→グローバル設定→インターフェイスとその他の機能　と進み、『相対パスを渡す』を『はい』に変える。

・TinyMCE
 エレメント→エレメント管理→プラグイン→TinyMCE Rich Text Editor　と進み、設定タブを開いて『Path Options』を『SiteConfig』に切り替える。

Mobile Converter正式版と2.01rc1の違いについて

上の設定をして、Mobile Converter 2.01rc1をインストールし、サイトごとの設定を加えれば完了です。インストールや設定に関しては、Mobile Converterのreadmeに詳しく書いていますが、今回の暫定版で変わっている点をご紹介しておきます。

■realpathに関する記述が変更されている

現行のMODxに合わせてソースの一部が変更されています。

$realChgFile = realpath(MODX_BASE_PATH . $chgFile);
↓
$realChgFile = MODX_BASE_PATH . $chgFile;

参考URL
popowa - メーヴェに乗りたい『MobileConverterを入れてみる』

■ユーザーエージェント判定部分は正規表現で

ユーザーエージェント判定部分は　&g[groupNo]_useReg　をYesにして　&g[groupNo]_[ruleNo]_matchStr　には正規表現で記述しましょう。

ちなみにこのサイトでの設定では、スマートフォンのユーザーエージェントは以下のように記述しています。

/iphone/i,/Android.*mobile/i,/mobile.*Android/i

正規表現については知識が全くなかったので、アンドロイドについてはSoushi様に教えていただいた記述をそのままに、iphoneについてはそれを元に試行錯誤して記述。合ってるかどうか怪しいですが(´∇｀;A  ｱｾｱｾ
でもまぁ、手持ちのiphoneでちゃんと動いているから大丈夫!!　な…はず…w 

あ…そういえば、友達に頼んだアンドロイドでうまく動いてるかどうかの確認、まだ報告きてないな　(ぇ?www
まぁ、たぶん、iphoneでうまく動いてるんだから、大丈夫でしょう!! 大丈夫…だよね?w

■imgMaxX/imgMaxYがルール別に記述できるようになっています!!

スマートフォンサイトの横幅は通常320px。対して携帯サイトは通常240px。
このふたつの横幅で作っている方が多いと思います。

正式版のMobile Converterでは、imgMaxX/imgMaxYはグループまでしか対応していない為、変換できる横幅は１種類のみとなります。今回、Soushi様に改造していただき、2.01rc1では　&g[groupNo]_[ruleNo]_imgMaxX/imgMaxY　が使えるようになりました。これにより、複数ルールで別々のサイズの画像を生成することができるようになっています。

■最後に、一応、このサイトでの設定の一部を紹介

&g1_targetDoc=Grp1:Target IDs;string;1
&g1_useReg=Use Regexp;list;yes,no;yes
&g1_1_matchStr=Grp1:UserAgent for iphone;string;/iphone/i,/Android.*mobile/i,/mobile.*Android/i
&g1_1_imgPath=Target img path;string;assets/images/
&g1_1_imgMaxX=Grp1:Target img max X;string;300
&g1_1_thumbImgPath=Thumbnail path;string;assets/images/tmp/
&g1_1_template=Grp1:Template for iphone;string;T_Smartphone01
&g1_1_imgType=Grp1:ImageType for iphone;string;gif
&g1_1_charset=Grp1:Charset;string;UTF-8
&g1_2_matchStr=Grp1:UserAgent for Keitai;string;/^DoCoMo/,/^Vodafone/,/^J-PHONE/,/^SoftBank/,/^KDDI/
&g1_2_imgPath=Target img path;string;assets/images/
&g1_2_imgMaxX=Grp1:Target img max X;string;240
&g1_2_thumbImgPath=Thumbnail path;string;assets/images/tmp_k/
&g1_2_template=Grp1:Template for Keitai;string;T_Keitai01
&g1_2_imgType=Grp1:ImageType for Keitai;string;gif

↓8/25追記　ここから↓

すいません、上記のやり方は間違ってたようです(･ω･｀;A

&imgPath=Target img path;string;assets/images/
&thumbImgPath=Thumbnail path;string;assets/images/tmp/
&g1_targetDoc=Grp1:Target IDs;string;1
&g1_useReg=Use Regexp;list;yes,no;yes
&g1_1_matchStr=Grp1:UserAgent for iphone;string;/iphone/i,/Android.*mobile/i,/mobile.*Android/i
&g1_1_imgMaxX=Grp1:Target img max X;string;300
&g1_1_template=Grp1:Template for iphone;string;T_Smartphone01
&g1_1_imgType=Grp1:ImageType for iphone;string;gif
&g1_1_charset=Grp1:Charset;string;UTF-8
&g1_2_matchStr=Grp1:UserAgent for Keitai;string;/^DoCoMo/,/^Vodafone/,/^J-PHONE/,/^SoftBank/,/^KDDI/
&g1_2_imgMaxX=Grp1:Target img max X;string;240
&g1_2_template=Grp1:Template for Keitai;string;T_Keitai01
&g1_2_imgType=Grp1:ImageType for Keitai;string;gif

このようにしたら意図通りに反映されました。
imgPathとthumbimgPathはルールナンバーに対応してなかったですね…orz..... 

↑追記ここまで↑ 

Group1_rule1でスマートフォンに対応して横幅を300pxに
Group1_rule2で携帯に対応して横幅を240pxに 
という設定です。

うまく動いてるから間違えてないはず…。でもあまり自信はありませんので流用する時はちゃんと確認して設定してくださいね?w 

最後に、今回、親身に対応していただいた作者のSoushi様に感謝!! こちらの拙い説明から対応策をほとんど即応の形で出していただき、予想よりはるかに順調に携帯・スマートフォン両対応のサイトを作ることができました。ホントのホントにありがとうございました!!

アップグレードの詳細は、開発者のSoushi様のサイト『あ～ゆ～どりま～』で確認していただくとして、私がサンプルサイトで使っている設定を載せておこうと思います。 
(なんでここじゃなくてサンプルサイトの方かというと、サンプルサイトの方でずっとMODxの設定を続けてて、MCのテストもそっちでやっていたので、中身はこのサイトよりサンプルサイトの方がずっとカスタマイズが進んでいたりするのですw)

まずは簡単に設定を書いておくと

&imgPath=Target img path;string;assets/images/
&thumbImgPath=Thumbnail path;string;assets/images/tmp/
&imgPathExcept=Target img pathExcept;string;assets/images/default/

&g1_targetTemplate=Grp1:Target IDs;string;PC用テンプレート01
&g1_1_matchStr=Grp1:UserAgent for iphone;string;iphone,Android+mobile
&g1_1_imgMaxX=Grp1:Target img max X;string;52%
&g1_1_imgMaxY=Grp1:Target img max Y;string;52%
&g1_1_template=Grp1:Template for iphone;string;T_Smartphone01
&g1_1_imgType=Grp1:ImageType for iphone;string;gif
&g1_1_charset=Grp1:Charset;string;UTF-8
&g1_2_matchStr=Grp1:UserAgent for Keitai;string;DoCoMo,Vodafone,J-PHONE,SoftBank,KDDI
&g1_2_imgMaxX=Grp1:Target img max X;string;42%
&g1_2_imgMaxY=Grp1:Target img max Y;string;42%
&g1_2_template=Grp1:Template for Keitai;string;T_Keitai01
&g1_2_imgType=Grp1:ImageType for Keitai;string;gif

1～3行目までは全グループの共通設定です。
１行あけて、４行目から15行目までが一塊りのグループで、あとはテンプレートの数だけこの部分を繰り返して&g2以降を作ります。

とりあえず１行目から順に説明。

&imgPath=Target img path;string;assets/images/
変換対象となるフォルダを指定しています。

&thumbImgPath=Thumbnail path;string;assets/images/tmp/
変換した画像をどこに保存するかを指定しています。

&imgPathExcept=Target img pathExcept;string;assets/images/default/
【新機能部分】
1行目で指定した変換対象のフォルダの中で、変換の対象からはずすフォルダを指定しています。

ここまでが全グループ共通。 
ここからはグループ毎の個別設定。
簡単にグループの流れを書くと、
■グループ1-ルール1
『PC用テンプレート01』というテンプレートが割り当てられているページをスマートフォンから見たときは 『T_Smartphone01』というテンプレートに切り替えて表示。
■グループ１-ルール2
同じく携帯から見たときは『T_Keitai01』というテンプレートに切り替えて表示。
という設定です。 

&g1_targetTemplate=Grp1:Target IDs;string;PC用テンプレート01
【新機能部分】
グループ1の対象となるテンプレートを指定しています。

&g1_1_matchStr=Grp1:UserAgent for iphone;string;iphone,Android+mobile
【新機能部分】
エージェント判別でスマフォからのアクセスを判別。アンドロイド系のスマフォの場合、タブレットと区別する為にAndroidという文字列に加えてmobileがエージェントに含まれます。
以前のバージョンだと2つの文字列の組み合わせは正規表現で書く必要があったものが、+で文字列を繋げるだけというシンプルな書き方になっています。

&g1_1_imgMaxX=Grp1:Target img max X;string;52%
&g1_1_imgMaxY=Grp1:Target img max Y;string;52%
【新機能部分】
以前のバージョンでピクセルでしか指定できなかった『imgMaxX』『imgMaxY』がパーセント表示でも指定できるようになっています。
用途としては、このページの画像をPC、スマフォ、携帯で見比べてもらうと判りやすいかなと思います。
ピクセル最大サイズ指定だと、例えば横幅300px以上の画像は全て300pxに変換　という使い方になりますが、
パーセント表示だと、3キャリアそれぞれの記事部分の横幅にあわせて、同じ比率で画像を表示してくれます。(なんか説明がわかりにくい…汗) 

&g1_1_template=Grp1:Template for iphone;string;T_Smartphone01
スマフォからアクセスされた場合に切り替えるテンプレートを指定。 

&g1_1_imgType=Grp1:ImageType for iphone;string;gif
変換する画像形式をgifに指定。

&g1_1_charset=Grp1:Charset;string;UTF-8
スマートフォンでアクセスされた場合のページのエンコード形式を指定。
ちなみにこの指定がない場合は、自動的にShift-JISで出力されます。
デフォルトがShift-JISになっているのは、MCがもともとPC用ページを携帯で表示することを目的として作られたプラグインだからですね。

↓ここからはルール2で携帯への出力を設定していますが、ルール1の繰り返しになるので説明は省きます。
ひとつだけ違っているのは、&g1_2_charsetの設定がないことです。携帯にはShift-JISで出力していますので。

&g1_2_matchStr=Grp1:UserAgent for Keitai;string;DoCoMo,Vodafone,J-PHONE,SoftBank,KDDI
&g1_2_imgMaxX=Grp1:Target img max X;string;42%
&g1_2_imgMaxY=Grp1:Target img max Y;string;42%
&g1_2_template=Grp1:Template for Keitai;string;T_Keitai01
&g1_2_imgType=Grp1:ImageType for Keitai;string;gif

 ざっくりと書いてみましたが、誰かの参考になるかな～?w

編集する必要のないフィールドを隠せるからちゃんと設定すれば編集画面がすごくシンプルになる。

で、どうせならリソースによって初期設定としては必要だけどあとで編集することはまずないだろうっていうカスタムテンプレート変数を隠しておこうって思いまして。
いろいろググって、

mm_hideFields('tv4', ``,``);

みたいな感じで tv+隠したいカスタムテンプレート変数のID番号　を指定してやれば隠れるっていう情報を得たわけですよ。

…でも隠れない…汗

なんでだろ…最新のMMバージョンが開発バージョンなせいかなとかいろいろ試したんだけど駄目。

ホントにいろいろ試して、あきらめかけてたときに、ダウンロードしたMMの中にマニュアルの原本があることに気づいた。

覗いてみる…。

あった!!!!

tv+隠したいカスタムテンプレート変数のID番号　ではなく

tv+隠したいカスタムテンプレート変数の名前　らしい!!!

つまり、例えばID4のカスタムテンプレート変数　hoge　を隠したいとすると

mm_hideFields('tv4', ``,``);　ではなく

mm_hideFields('tvhoge', ``,``); と設定する必要がある

どっかで仕様が変わったのかな?

ググってヒットした日本語のサイトではどこでもID番号の指定で説明されていたので一応、忘備録として書いておく。