Modx Jot改造 入力フォームを入れ替え 覚書 【表示スニペット】

Jotはお手軽で比較的高機能？なブログツールですが、以外と関連情報が無いのが、玉に傷。

と言うことで、先日かなりイジリまわして、まぁ忘れないうちに覚書にでもしておくか。てな内容です。

タイトルからだとわかりづらいかも知れませんが、要するに、デフォルトだと、入力フォームがあって、その下にコメント一覧があるレイアウトになります。

これを、まずコメント一覧があって、その下に入力フォームが来るようにブロックの配置を変えるだけの事です。

では、変更箇所です。

表示位置変更　**********************************************

Jot　ｖ1.1.4

入力欄と、コメント表示欄を上下入れ替え

変更ファイル：jot.class.inc.php
場所：　assets/snippets/jot/


355行　// Display default
の、箇所を修正。

デフォルト

$output = $this->getOutputForm();
$output .= $this->getOutputComments();

を、

$output = $this->getOutputComments();
$output .= $this->getOutputForm();

に変更。

この時、＄変数後の.を下の項目のみに使用すること。
これを間違える（上の欄に付ける）と表示しなくなるので、注意。
（単純に上下を入れ替えるだけでは、ダメと言う事ですね）


たったこれだけです。
簡単でしょう。


覚えていて損はない変更箇所です。

おそらくヴァージョンが違っても、jot.class.inc.phpファイルに、記述があるはずですので、古いヴァージョンでも、出来ると思います。
（古いヴァージョン未確認のため、若干無責任かな？）

Modx ユーザーエージェントによる表示切り替え 【表示スニペット】

ブラウザーのユーザーエージェントを使って、表示（内容）を切り替える極簡単なスニペット。

ページ全体の表示を切り替えるのであれば、MobileConverter※1を使用すれば、指定したブラウザー毎に表示変更が可能になりますが、そこまで必要ないと言ったような場合に意外と便利。

ページの極一部の表示がそのブラウザーに対応していないなどの場合、新たにテンプレートを作るよりは効率的？ではないかな。


例
●iPadなどでFlashを採用している箇所を他のパーツに置き換える。
●IE8以前のブラウザーは、別のCSSを読み込ませる。

など。

基本的に、スニペットなので、テンプレート内のどこに設置しても動作しますし、書き換えの内容もスニペット・チャンクの別を問わないので、使用範囲も幅広いはずです。



サンプル
**************************************************************************

<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(ereg("^DoCoMo", $agent)){
■■■;// DoCoMo対応
}else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
■■■;// ソフトバンク部類
}else if(ereg("^UP.Browser|^KDDI", $agent)){
■■■;// AU？
}else if(ereg("iPhone", $agent)){
■■■;// iPhone
}else if(ereg("WILLCOM", $agent)){
■■■;// WILLCOM
}else if(ereg("^PDXGW", $agent)){
■■■;// PDXGW
}else if(ereg("DDIPOCKET", $agent)){
■■■;// DDIPOCKET
}else{
■■■;// 上記以外　ＰＣ等？
}
?>


**************************************************************************

■■■部に、表示させたい内容を書き出す。
書き出す方法は、echo または、return　文で。

また、ターゲットとするブラウザーが決まっている場合は、こんなにユーザーエージェントを列挙する必要はないので、ターゲットとするブラウザーのみを書けばよいです。


ユーザーエージェントの種類に関しては、下記サイトを参照。
PCブラウザ
http://www.openspc2.org/userAgent/

スマートフォン関連
http://www.kagua.biz/android/ualist.html


※1
MobileConverterはユーザーエージェントで指定したブラウザーに対して、使用できるテンプレートは１種類しか利用できなくなるので、MobileConverterのタイトル通り、モバイル用にした方が無難でしょうかね…

Modx 入力されたら表示する。【表示スニペット】

テンプレート上にテンプレート変数を挿入して、使用する事はModxユーザーであれば、ごく当たり前に行なっていますよね。

しかし、必ずしもそのテンプレート変数を使うとは限らない場合もありますよね。

そうした場合、ソースにはテンプレート変数を表示させる為に使ったDIVタグや、他のタグだけが表示されることになります。



例えばソースはこんな感じに製作した場合、

<div class="txt_box">
[*テンプレート変数*]
</div>

実際の出力は（ソース）

<div class="txt_box">

</div>


という具合になりますよね。
まぁ、別にこれでも悪くは無いのですが、どうも中身が空のDIVタグが見えているのは、いかがなものかと言う事で、テンプレート変数に入力（値）がある時だけ表示するスニペットをつくりました。


【表示スニペット】
<?php
$hyouji = $modx->getTemplateVar('テンプレート変数名');　//表示したいテンプレート変数名を設定
if ( $hyouji ['value'] ) {
echo '{{表示チャンク}}';　//　$hyoujiに値があるとき
}
  else {
echo '' ;　//$hyoujiに値が無い時
  } ;
?>


【表示チャンク】
<div class="txt_box">
[*テンプレート変数*]
</div>


としておけば、テンプレート内に表示スニペットを設置すれば、指定したテンプレート変数に入力があった時のみチャンクが表示されるので、ソースは見た目もきれいになります。

この【表示スニペット】は他にも色々と使い道があるので、工夫次第で使い道が色々とありそうです。

Modx 指定した時間に、変更する。

使用テンプレート内の、一部を変更するスニペット


ページの一部だけに、時間で変更できる表示を入れたかった。
キャンペーンとかで、ページそのものを表示させるには、公開開始日時の設定で、対応出来ますが、表示の一部のみ（バナーや、時間指定のログインパーツなど）を変更したい時に使えます。

<?php
$output = & $modx->documentOutput;
$time_stamp = mktime(17,3,0,11,1,2011); //変更時間
$now_time = time();
if ($now_time <= $time_stamp) {
return '変更前の指定' ;　　//変更時間前
} elseif($now_time >= $time_stamp) {
return '変更後の指定' ;　　//変更時間後
  } ;
?>

$time_stamp = mktime(時,分,秒,月,日,年);


変更前の箇所に、現在使用しているデータをチャンクやテンプレート変数を使って指定します。
変更後に表示したい内容のこれまたチャンクやテンプレート変数を設定して、このスニペットを使用しているテンプレート内の変更箇所に入れれば出来上がり。


テンプレート内に記述する時は、スニペットの表記では

[[スニペット名]]

と記述しますが、この記述方法では、キャッシュがクリアされない為に、指定の時間になっても、表示が切り替わりません。

そこで、下記のように記述してください。

[!スニペット名!]


これで、キャッシュがクリアされるので、指定時間になれば、表示が切り替わります。


可能なかぎりシンプルにしました。
本当は指定時間に、使用テンプレートが変わるのが理想ですが、さすがにそこまでの物は作れないので…

CMSでHTML5とHTML4を共存させる方法

と言う事で、やり方は色々ありますが…

一番確実で手っ取り早いのは、DIVタグを使ったブロック要素でのレイアウトが無難でしょう。
ソースの見栄えは悪くなりますが、これが一番確実でしかもW3Cにも準拠した方法でしょうね。

そもそもHTML4は現行の？ブラウザーではIE8以前の物が殆どです。そのIE対策としてはブラウザーのユーザーエージェントでテンプレートを振り分けるという方法を以前ご紹介しました。（うちのサイトもそうしてます）が、IEだけの為にわざわざテンプレートを作るのはどうなのよ？そこまでの労力を掛ける必要があるの？

と言うのが正直なところです。

幸いな事に、IE8以前のブラウザーはHTML5の新しいタグやCSS3の新規に追加されたプロパティは無視されるので、昔のCSSハックではありませんが、そこを上手く利用させてもらいます。

製作方法は簡単です。
IE8でもHTML5のソースを読まない訳ではないので、基本のソースはHTML5＆CSS3で製作します。
普通にHTML5とCSS3でガンガン書いてゆきます…が、CSSのクラス設定で、クラス名に特定のHTML5のタグを指定せずにあくまでDIVタグでレイアウト作業をします。

もちろんHTML4で使用されているタグに関しては、クラス指定をしても問題ありません。
問題になるタグは、HTML5から追加された新しいタグのみです。
新しいタグはIE8では無視されるタグなので、タグにクラス指定をしても無視されます。
ちなみに、タグに直接指定をしても、タグ内にクラス指定をしても、どちらも無視されるので、ご注意ください。

例：＜section＞に対して直接クラス指定をしても、＜section class="●●●"＞としても結果は同じ。
HTML5で追加された＜section＞はIE8では無視されるので、全く意味をなさない。

一見、タグ内にクラス指定すれば、CSSが効きそうに思えますが、ブラウザーがタグを認識しない時点で、次のクラス指定は無意味なものになるので、無駄です。

こうなると、もう見栄え云々以前の問題として、まともに表示（レイアウト）されないのですから、仕方がありません。
DIVタグを使って、がっちり固めるしかありません。

別にW3CではDIVタグを認めていないわけではないので、現状ではこれが最も簡単にできる、HTML4&HTML5の表示対策になるでしょうね。
ソースはかなり煩雑になりますが、表示（レイアウト）されないよりははるかにマシ。という事で。