modx＠GSF

ajaxsearch1.9.2でも、全角スペースで検索させる

毎度のことながらAjaxSearchはアップデートごとにファイル構成とかマイナーチェンジされます。

検索するときの区切り文字はスペースですが、日本語の全角スペースをいれると全角スペース含みの文字列として検索するので、これをなんとかしたいです。

過去記事
ajaxsearch1.8.4で全角スペースでも検索させる
で対処法を書きましたが、AjaxSearch1.9.2には
assets/snippets/ajaxSearch/classes/search.class.inc.php　のファイルがありません…。またかよ。

classes/の中を見ると
ajaxSearchInput.class.inc.php　というのがあやしい。
開いてみると223行目あたりに

$searchString = $this->_stripTags($searchString);

というのがあるので
このすぐ下に

// zenkakuhankaku space
$searchString=mb_convert_kana($searchString, s, "UTF-8");

と入れてあげれば、全角スペースは自動で半角に変換して検索してくれますｗ

-------追記--------
こちらからダウンロードできるAjaxSearch1.9.2c　は全角スペース問題は解決されていますので、修正する必要はありません。

ロリポでAjaxSearch1.9.2を動かす modx1.0.5J-r10 およびr5

G研サイトをmodx1.0.5J-r5からr10にアップデートしたのを機に、サイト内検索をつけようとAjaxSearch1.9.2を使ってみた。

以前記事に書いたが
ロリポップでAjaxSearch 1.8.1を動かす
このときはmodxもまだ0.9あたりだったので、この情報はもうかなり古い。

でmodx1.0.5J-r10でAjaxSearch1.9.2bを使ってみたのだけど、いきなりエラーで動かないorz
日本公式フォーラムで質問したところ対処法を教えていただいたので、メモ。

assets/snippets/ajaxSearch/classes/ajaxSearch.class.inc.php
78行目あたりの
set_time_limit($asCfg->cfg['timeLimit']);
を削除orコメントアウトすることで動くようになりました。
※コメントアウトするには行頭に//をつける。

ロリポサーバーの人はお試しください。
※ちなみにさくらサーバーでは上記の処理をしなくても動きました。
ためしにコメントアウトしたファイルをさくらサーバーでも使ってみましたが、問題なく動きました。
さくらはどっちでもokみたいです。

ファイルサイズを計算してくれるスニペット

便利なスニペットを見つけたのでメモ。

pdfファイルとかzipファイルをアップしてダウンロードしてもらうとき、ファイルサイズが書いてあったほうがありがたいよね。
管理してるサイトで、実は今まで手動で書いてたのだが＾＾；
今後pdfのアップが増えることになったので、自動で計算できないかなぁ？　と検索したらスニペットありました。

SNIPPET: filesize

スニペットコール

[[filesize? &file=`filename` &unit=`unit` ]]
Where:
filename - the path to file (for example: assets/file/index.htm)
unit - the maximum unit (for example: KB)

ポイント・filenameは最初に/なしでOK ・unitはKBにしても1MB超えると表示は1.19 MBみたいに出力してくれます。

便利です。

IE背景消え対策

mootoolsとjQueryを一緒に使う方法でめでたく内容量に差があるボックスの高さをそろえるは完成したのだけど、IEで見てみたら、いろんなとこで背景やらボーダーやら消えまくり…。

ああーまたかよー、とがっくり。
IEはfloat使うと高確率で、ボックスの背景が消える。それも一回読んで、一瞬表示されるのに全部読み込みが終わると見えなくなってる、というなぞIE仕様。

参考サイト：IE6で背景が表示されない際にチェックすること

前にもやったけど、結局背景・ボーダーが消える要素に
position: relative;
をつけてやれば、ほとんど解決する。その要素にposition使ってなければだけど。

背景・ボーダーが消える要素にwidth指定という手もあるのだが、
floatを使って、入れ子のボックスにpadding、marginなんかを指定している場合、
すごくややこしいことになるので、position: relative;が使えないときの最後の手段にしてます。

しかし
position: relative;　とそのまま書くのは、どうも釈然としない。IEにしか必要ないんだからなおさら。

というわけで
参考サイト：CSSハック一覧 -- IE, Firefox, Safariなどなど:
を参考にIEハックで書くことに。

position/*¥**/: relative¥9;

これでIE7,IE8のみに適応される。IE6以下はもう無視ｗ。
こう書いておけば実際に必要なpositionと区別できるのでわかりやすいです。

ちまちまと各要素にIEハックをつけて、ようやく完成しました。へろへろ。

mootoolsとMaxigalleryのslimboxを一緒に使う方法

今日もmootoolsがらみです。
mootoolsのかっこいいにょろにょろメニューを使ってるるページで、スニペットMaxigalleryを入れて、画像をslimboxで表示したい！　と思った。

MaxiGallery（0.5.2）のスニペットコール

[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`4` &max_thumb_size=`80` &max_pic_size=`700` &order_direction=`ASC` &order_by=`pos`!]

としたら、slimbox動きません。サムネイル画像クリックすると、画像のみリンク先ページに表示する…。（mootoolsのにょろにょろメニューはうごく）

書き出したソース見るとheadの中で

となっていてmootoolsを2回読み込んでる。（赤字の部分）
また順番をいじるのかなーと思ったら、MaxigalleryにはJSライブラリを自動で挿入させないパラメータがあった。

&disable_js_libs=`1`（デフォルトは&disable_js_libs=`0`で自動挿入する）
をくわえてやったら

となって、mootools.jsは一回のみになり、無事slimboxが動くようになりました。

参考
Let's enjoy MODx Maxigallery - 0.5.2
MaxiGalleryのエラー（その２）

※MaxiGalleryのエラー（その２）にはMaxigalleryのマネージャー画面でもドロップダウンメニュー（mootoolsのにょろにょろメニュー）を動かす方法も出てますが、Maxigalleryのマネージャー画面は基本管理者しか入らないので、必要ないので修正していません。

mootoolsとjQueryを一緒に使う方法

G研のサイトでは使ってないけど、他のサイトで苦労したのでメモ。

modxのデフォルトテンプレートに入っているheader menuはwayfinderで作られてて、mootoolsというjavascriptのライブラリを使って、かっこよくにょろにょろと下に伸びる。
これいいわ、と使っていたのだけど、その後いろいろあって、jQueryのライブラリを使ったのにいいのがあって、一緒に使いたくなった。

使いたかったのは
複数のブロック要素の高さを揃えてくれる「fixHeight.js」

css3のdisplay: box;を使えばjavascriptいらないのだけど、相変わらずIEがダメだし、他のブラウザもいまいち挙動がぶれるしで、残念ながらまだ実用はきびしい。
なので　fixHeight.js　をつかってみることに。

しかしmootoolsと一緒に使うと、やっぱりというか、動かない…orz
どちらかのみなら問題なく動くのに。

mootools　jQuery　でググルと悩んでる人いっぱいいて、回避作も複数でてきた。
結局一番わかりやすかった
jQueryとmootoolsを同時に使う方法
を参考にしました。

問題なのは読み込む順番。
-------順番------
1番目　jQuery.js
2番目　fixHeight.js　←ボックスの高さそろえる
間に
jQuery.noConflict();
var j$ = jQuery;
3番目　mootools.js
4番目　drop_down_menu.js　←にょろにょろメニュー
------------------
以下にhead部分のソースです。

さらにjquery.jsとfixHeight.jsを開いて
「$」をすべて「j$」に変換。
※！うまくいかなかったときのために変換前のファイルはとっておくこと！

保存して指定の場所にアップロードしたら、どちらもうまく動きました。

id名の大文字小文字のなぞ

CSSのid名に関してちょっと不思議な現象を発見しました。

div#Container ←外側ボックス、背景画像指定
div#contents ←本文部分　フロート右
div#MenuBox ←メニュー　フロート左
div#footer ←フロートクリアしてフッター

という構造の場合、div#Containerの背景が1画面分しか表示されなくてスクロールすると消える、という現象が起きます。
これを防止するためにcssには

html, body {
min-height: 100%;
height: auto !important;
height: 100%;
}
#Container{
height:100%;
}

とhtml, body両方にも高さ指定する必要があります。

ところがこれ、
div#container
と小文字にすると、html, bodyの指定がなくても、背景消えません！

古いページを修正していて、id名大文字小文字がバラバラで気持ち悪かったので、div#containerをdiv#Containerに直したら、背景消え現象が発生して気が付きました。cssよく見てみたら、div#containerのときはhtml, bodyの指定してなかった…。

クラス名やid名に大文字が使えないというわけでもないのに、これはなんでしょうねー？？
他のクラス名やid名でもこうゆうことはあるのでしょうか？

PHxでelseifみたいな使い方をしたいとき

PHxはMODxのテンプレート変数などの値によって、条件分岐や表示非表示を切り替えることのできるプラグインです。
便利なんだけどプログラム系でないわたしは、まず書き方を理解するのが大変でした＾＾；

■書き方の例
・テンプレート変数hogeの値が1のときは画像1を表示し、それ以外のときは画像2を表示する。
[*hoge:is=`1`:then=``:else=``*]

・テンプレート変数hogeの値が1のときは画像1を表示し、それ以外のときは何も表示しない。
[*hoge:is=`1`:then=``:else=``*]

こんな感じでチャンクやテンプレートに書きます。
dittoのテンプレートに使う場合は[+hoge　でプレースフォルダにします。

詳しくはMEGUさんのとこの解説などをご覧ください。

さて、ここで以下のような振る舞いをさせたいときどうするか？
テンプレート変数hogeの値が1のときは画像1を表示し、値3のときは画像3を表示し、それ以外のときは何も表示しない。

実はPHxにはelseifに相当する文法がない！
参考：MODx : phx の使い方

これでしばらく悩みましたが、あっけなく解決。値1のときの振る舞いと値3のときの振る舞いを別々に書けばいいのです。

[*hoge:is=`1`:then=``:else=``*]
[*hoge:is=`3`:then=``:else=``*]

どちらも値がちがう場合は何も表示しないので、実際に表示されるのは片方のhogeの値のみです。

ロリポでMySQL4→MySQL5でmodxが文字化けしたときの対処法

「MODx Evolution における SQL インジェクションの脆弱性」をうけて、ほったらかしにしていたmodxの某サイト（G研サイトじゃないよ）もアップデートすることにした。なんせmodx0.9.6のままだ。そこもロリポ使ってまして、MySQLもバージョン4のままだったので、こいつもバージョン5に移行することにした。

ロリポのユーザーページから、データベース移行ツールでバージョン5に移行。以前もやったし、問題ないと思ったのだが、MySQLではちゃんと表示されてるのに、なぜかmodxでは日本語が文字化けしたorz
modx上でに化けてるところを入力して保存しなおすと直るのだが、こんどはMySQL上で化けてる。
このサイトはコンテンツページが少ない（一桁だ）ので、もう新しいmodxをインストールしてページ手動で直そうかなぁ〜、と思ったけどぐぐったら解決策でてました。

SOHO KOEDAをMODｘで（文字化け解消）

こちらを参考に
/manager/index.php（143行目）
/manager/includes/extenders/dbapi.mysql.class.inc.php（107行目）

mysql_query('SET NAMES utf8;');
を追加してアップしたらMySQL5でも文字化け直りました。

んで無事modxのほうも1.0.5Jにアップデート完了です。
このサイトはAjaxSearch使ってなかったので、特にスニペットコールの変更もなしです。

ajaxsearch1.8.4で検索の最大文字数を変更する

ajaxsearch1.8.4デフォルトでは検索の最大文字数が30文字（日本語だと15文字）です。
英語圏では問題ないでしょうが、日本語で少し長い商品名などをいれるには少々足りないことも。

AjaxSearch Wikiをみると、パラメータに最小文字数 &minChars 　と　最大単語数 &maxWords はありますが最大文字数がありません(ToT)

いったいどこで変更するのか探し回りましたが
最大文字数の変更は全角スペースでも検索の変更と同じファイルにありました。

assets/snippets/ajaxSearch/classes/search.class.inc.php
の18行目
define('MAX_CHARS',30); // maximum number of characters
の30を任意の文字数に変更すればOKです。

ajaxsearch1.8.4で全角スペースでも検索させる

ajaxsearchはバージョンがあがるごとに、微妙に細かい変更が多いので、旧バージョンと同じ変更ではうまくいかないことが多いです。

バージョン1.8.1では
報告：ajaxsearch 全角スペースで区切ってand検索
の方法でうまくいったのですが、1.8.4では位置がすこし違いますw
assets/snippets/ajaxSearch/classes/search.class.inc.php
の155行目あたり
// Strip HTML tags
$searchString = stripHtml($searchString);

の下に

// zenkaku space=>hankaku space
$searchString=mb_convert_kana($searchString, s, "UTF-8");

にいれればうまくいきました。
またパラメータの書き方が変更になっているので、前バージョンと同じスニペットコールでは動かなかったり…。

AjaxSearch Wiki　とバージョン変更点の書いてある
assets/snippets/ajaxSearch/ajaxSearch_version_184.txt
は必読です。

dittoで更新履歴　1年分だけ表示する

dittoで更新履歴を作る場合、トップページに最新のみを表示させるなら　&display=`10`　で10件表示とかにします。
ここで「もっと読む」とか「続きをよむ」などのリンクをつけて過去の履歴も見せたい場合、リンク先のページで　&display=`all`　にすればいいのだけど、長くやってるサイトだと件数が膨大になる。なので1年ごととか、更新日時でページを分けたい場合どうするか？　ちょっと悩んだのですがfilterパラメータで簡単にできましたw

&display=`all` &filter=`pub_date,1262271600,6|pub_date,1293807599,5|`

これで公開日（pub_date）が2010年1月1日00：00：00以上（6）、2010年12月31日23：59：59以下（5）のリソースをすべて表示になります。

日付時刻はmodxが読めるようにunixタイムスタンプの形式にします。unixtime変換はググるといろいろでてきます。
ここが便利でした。

unixtime変換ツール

pub_dateでなくeditedonにすれば編集日時で区切れます。

filterパラメータの書き方と意味はMEGUさんのDitto - 2.1の解説を参考にどうぞ。
Let's enjoy MODx　Ditto - 2.1

あと、これはサイトをmodxに移行して、過去の履歴は静的htmlを使いmodx移行後の履歴のみDittoで作りたい、という場合にも使えます。
というのも　&orderBy=`pub_date DESC`　で公開日ソートにした場合、公開日が未入力の時はリソース作成日時が使われます。
サイト移行の場合、過去のページでも作成日時はすべて、当然ですが移行日以後です。単に&display=`all`にした場合、困ったことに…。古いページにいちいち公開日を設定するのはうんざりするくらい大変です。（←実は途中までやったorz）
filterで公開日がサイト移行日以後のものだけ表示にすれば、この問題も解決ですｗ

コピーライトの年号を自動で入れるスニペット（10.03.02追記あり）

サイト管理していて、フッターのコピーライト©の年号変更をつい忘れがち。
modxでつくってれば、フッター部分はチャンクにしてる人がほとんどだろうから、一箇所直せばすむのだが、それでも結構忘れるんだよなぁ。

なので年号表記部分をphpで書いてスニペットにすることにした。




echo 'Copyright © '.date('Y').'';

?>

Copyright © の部分は自分のサイトに合わせて書き方変更してくまさい。
スニペット名はAutoCopyrightとでも。

[[AutoCopyright?]] サイト名 All Rights Reserved.

と書いておけば来年になったら自動で年号変わります。

modxなくてもphpが使えるサイトなら、php直接書いておけば楽ですよ。

------------
追記（10.03.02）

バックアップを取った時に、イベントログが異様に溜まっていることに気が付いた。

date() [function.date]: It is not safe to rely on the system's timezone settings. Please use the date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Tokyo' for 'JST/9.0/no DST' instead

というエラーログが大量にある。（AutoCopyrightスニペットで）タイムゾーンの設定がないから、設定しろといってるらしい。

PHPのtimezoneの設定メモ
PHP | php.ini の date.timezone を変更する

このあたりを参考にして修正しました。

方法1　スニペットの記述に設定を加えて以下のように変更にする。




ini_set("date.timezone", "Asia/Tokyo");

echo 'Copyright © '.date('Y').'';

?>

方法2　php.iniに直接記述する



date.timezone = Asia/Tokyo

※テキストエディタにこの1行を書いて、ファイル名をphp.iniで保存。modxのindex.phpと同じ階層にアップします。

どちらかをすれば、エラーはでなくなります。

Ditto内でGetFieldスニペットを使う時はキャッシュに注意【1.0.5J-r7で解決済み】

テンプレートにDittoを記述して、それぞれの親idを取得したい時など、GetFieldスニペットを使うと便利です。

&parents=`[[GetField? &field=`id` &parent=`1` &parentLevel=`1`]]`

このときDittoのスニペットコールはキャッシュなしの

[!Ditto? &parents=`[[GetField? &field=`id` &parent=`1` &parentLevel=`1`]]`!]

にしないとうまくいきません。

外側のDittoはキャッシュなしの[!Ditto?
入れ子のGetFieldはキャッシュありの[[GetField?

ここ、はまりました。
そもそも[!と[[どっちがキャッシュありだっけ？　といっつも混乱する…^^;

あとDittoでページ分割パラメータpaginateを使う時はキャッシュありにしないとうまく動きません。
なのでDittoコール内でGetFieldコールした場合は、paginateは使えないです。（未検証ですが）

-------------------------
2012.2.13 追記
modx 1.0.5J-r7　アップデートでこの問題は解決されました。
r7以降は外側のDittoも以下のように[[で記述できます。

[[Ditto? &parents=`[[GetField? &field=`id` &parent=`1` &parentLevel=`1`]]`]]

height100%適用方法メモ

コンテナ用のdivに
height:100%;
だけではうまく行かないし、min-heightやmax-hightをつけてもだめ。
結構前から悩んでて、大抵は内容が短いページに対応できるようなデザインで作ってた。
以下の方法でうまく100%ボックスになります。

参考：標準準拠でheight100%のボックス

html,bodyにもheight:100%;設定して
コンテナdivには
height:100%;
min-height:100%;
両方つける。

これだけだと1画面より長いコンテンツがあったとき
コンテナdivに指定した背景が消えます。
その解消に

body > #コンテナdiv
height: auto;

を指定してやれば、スクロールしても背景表示ｗ

こんな単純な方法だったとはｗ