Web　酒　肴

MODx(0.9.6)において、Dittoは記事をソートして一覧表示などする場合に必須のスニペットだ。 今回、一覧表示した記事を10件ごとにページングして表示する機会があったので、その方法をここに残しておく。

1. 必要最小限の書式は以下

   [!Ditto? &id=`id` &display=`10` &paginate=`1` &language=`japanese-utf8` !]

   パラメータ名	役割
   id	Dittoごとに一意なID
   display	１ページに表示する件数
   paginate	1でページング処理を有効にする
   language	デフォルトでは英語になっていたので日本語を指定（「前へ」「次へ」などの文言）

   注意点

   • ページのキャッシュを無効にするために [[Ditto ～ ]] ではなく [!Ditto ～ !] の書式にする
   • 必ずidパラメータに適当な値を設定する（Dittoを同ページで複数使用するときにはそれぞれ別の値を設定する）

2. ページのナビゲーションを表示したい場所に以下のタグを追加する

   <p id="ditto_pages">[+id_previous+] [+id_pages+] [+id_next+]</p>

   強調している「id」のところには自分がDittoのタグに使用したidの値と置きかえる。 HTMLは別にPタグでなくとも良いが、スタイルの指定のためタグのID指定はditto_pagesにする。（まぎらわしいがDittoのidのことではなくHTMLタグのこと）

3. スタイルシートに以下を追加する

   .ditto_paging {
       border-top: 1px solid #ccc;
       padding: 10px;
       font-size: 86%;
       color: black;
   }
   #ditto_pages .ditto_currentpage {
       border: 1px solid black;
       padding: 1px 5px 2px;
       margin-right: 1px;
       background-color: #008CBA;
       color: #fff;
   }
   #ditto_pages .ditto_off {
       border: 1px solid #ccc;
       padding: 1px 5px 2px;
       margin-right: 1px;
       color: #ccc;
   }
   #ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
       border: 1px solid #008CBA;
       padding: 1px 5px 2px;
       margin-right: 1px;
       text-decoration: none !important;
       color: black;
   }
   #ditto_pages a:hover {
       background-color: #fff;
       color: #000;
   }
   

   このスタイルシートは以下のページでDittoの作者が提供しているものだ。 好きに改変して使用すればいいだろう。

   Pagination - Ditto Support Site

4. 以上

   これでid="ditto_pages"のタグ内が自動で変換されてページングのナビゲーションが表示される。 うまくいかないときはid指定、ページのキャッシュなどに気をつけて確認してみよう。

ちなみに使ってみるとこんな感じにできました。

破れGo on !! - 未経験２７歳プログラマーへの道（イバラ）

[[スニペット名? &パラメータ=`値`]]

上記の「?」を忘れていませんか？ （これでハマったのすでに3回目・・・）

知らぬ間に一か月も更新をほったらかしていた。

MODxにはリンク属性というパラメータがあり、そのドキュメントに対するリンクを生成するときにその属性を付加することができる。 よく使うのはtarget="_blank"だろうか。 で、このリンク属性をドキュメント変数として取得する方法がなかなか見つからなかった。 ドキュメント漁るのもめんどくさいし、Wayfinderのソースの中探したら簡単に見つけた。

[*link_attributes*]

です。 一か月ぶりというのになんという小ネタ・・・。

よく技術情報のページなんかに

この記事は役に立ちましたか？

なんていって5段階評価の投票ができるようなページがあります。 Amazonの書評みたいなものですね。 あれを実現するスニペット。

参考サイトはこちら

• CSS Star Rating（本家サイト　英語）
• CSS Star Rating - 1km.info

導入手順は上記サイトを参考にしてもらえばわかるので、簡単に。

1. 環境： MODx 0.9.6 / CSS Star Rating 1.0
2. 本家サイトから必要なファイルをダウンロード＆解凍＆適切な場所に設置
3. star_rating.snippet.tpl の内容で新しいスニペットを作成（スニペット名：star_rating）
4. star_ratingという名前のテンプレート変数を作成し、投票機能をつけたいテンプレートへのアクセスを追加
5. 先ほどのテンプレートにCSS Star Ratingのスタイルシートへのリンク追加
6. テンプレートや記事の好きな場所に[!star_rating!]と追加

以上。（ホンマにテキトーやな）

でもここで問題。僕のサイトでは「フレンドリーURL：ON」、「エイリアスパス：使用」の環境で使用しているのですが、投票時にアクセスするURLにエイリアスパスが反映されないという不具合が。 要するに親フォルダ（エイリアス名：parent）の下に子ドキュメント（エイリアス名：child）があり、接尾詞が.htmlの場合は以下のURLになる。

http://(site_url)/parent/child.html

そのドキュメントを評価するときに接続するURLは、以下のようになるべきである。

http://(site_url)/parent/child.html?starvote=5&pid=xx
（starvoteは5段階評価の数値、pidはドキュメントID）

だが、そこがうまく動作せず、以下のように親のパスがなくなったURLになってしまっている。

http://(site_url)/child.html?starvote=5&pid=xx

そしてページが見つからないというエラーになる。 こちらのフォーラムを参照したところ、どうやらこれはバグだ。

Support/Comments for CSS Star Rating

次のバージョンで修正されると思われるが、次バージョンがリリースされるまでは以下の修正で対応できる。

star_ratingスニペットを修正する

star_rating.snippet.tplファイルの内容でstar_ratingスニペットを作成したが、その内容を修正する。 star_rating.snippet.tplでいうところの157行目から161行目までの5行でURLを作成している。 （最低評価から最高評価まで5段階分のURL) そこを修正する。

修正前

 $modx->makeUrl($modx->documentObject['id'], $modx->documentObject['alias'], 'starvote=1&pid=' . $docID)
                               ･･･
 $modx->makeUrl($modx->documentObject['id'], $modx->documentObject['alias'], 'starvote=5&pid=' . $docID)

修正後

$modx->makeUrl($modx->documentObject['id'], '', 'starvote=1&pid=' . $docID)
                               ･･･
$modx->makeUrl($modx->documentObject['id'], '', 'starvote=5&pid=' . $docID)

つまり以下の部分を空文字列に置き換える。

$modx->documentObject['alias']　→　''

これで正常に動作しました。 同じユーザが何度も投票しないようにするためのセッション管理などで、ややこしい部分はまだありそうだけど、それはおいおい調査します。

追記

検索エンジンのクローラーのせいで、勝手に投票されて少し困っています。 対処法はまだわかりません。

n46さんに指摘いただいて調査した結果、google-code-prettifyとIEの相性が悪いことが判明。 結局IEのみgoogle-code-prettifyを使用しないように逃げたのですが、以下悪あがきした経緯を書いておきます。 コード部分の改行が全て削除されてしまうというもの。 こちらを参照するとどうもIEが悪いっぽい。

Favorite Labo - google-code-prettify

ここを参考にさせてもらいました。 ただし現在のバージョン（prettify_31_Aug_2007）ではいじる場所が少し違い990行目を修正。 修正に関して、JavaScriptに疎いため知人に助言をもらいました。 （guccyon, fujioka0729ありがとう！）

prettify.js修正前

pre.innerHTML = newContent;

prettify.js修正後

pre.innerHTML=(/*@cc_on!@*/false) ? newContent.replace(/<br\s?\/?>/g, '&nbsp;<br/>') : newContent;

ブラウザ判定方法がやや特殊ですが、毎回読み込まれ実行されるため、コード量や処理負荷をできる限り減らそうという意図があります。 <br>だけではなくて、<br/>や<br />（/の前に空白あり）にも対応させました。 また、僕はサイズ縮小版のprettify-small_31_Aug_2007を使用しているので、そちらの場合の修正ポイントも書いておきます。 修正箇所はprettify.jsファイルの中をinnerHTMLでテキスト検索していって一番最後に見つかった部分です。最終行である18行目の後ろのほうを以下のように修正しました。

prettify.js修正前

～（省略）～l.innerHTML=m;～（省略）～

prettify.js修正後（上記のl.innerHTML=m;部分を以下に置き換え）

l.innerHTML=(/*@cc_on!@*/false) ? m.replace(/<br\s?\/?>/g, '&nbsp;<br/>') : m;

で、これでとりあえずいけるかと思ったけど・・・ダメだったと（実際は少し惜しかった）。 日本語表示行の改行ができない。<br>タグすらないと思われる。 それを調べるためにMicrosoft提供のIE版FirebugのようなものInternet Explorer Developer Toolbarなんてものを入れたりして格闘しました。

また、この修正でもIEでコード部分をコピペした場合、やはり改行が削除されてしまうという問題は解決していません。 ということでFavorite Laboの中の人は導入を見送ったみたいです。 そこで後から知ったことだけど、dan kogai氏も同じ問題に対してIEのみオフという対処をしたようなので（参照：404 Blog Not Found - google-code-prettify vs IE 6）、僕も同じ手段を取りました。 IEかどうかの判定部分は知人のアドバイスを受け入れdan氏とは少し違う方法を取りました。

if (1 /*@cc_on -1 @*/)

ではなく

if (/*@cc_on!@*/true)

という方法。数値型を真偽値にキャストするコストを抑えるため、らしい。そういう風に解釈した。間違ってないよね？ そして以前google-code-prettifyの導入時に、bodyタグのonLoadで２つの関数を実行しているので、そこを丸ごとこのif文で囲みました。

<body onload="if (/*@cc_on!@*/true){prettyPrepare();prettyPrint();}">

とりあえずこれで逃げます。 指摘くださったn46さん、ありがとうございました。

MODxを使用して以下のようなことをしたいと思っていました。

前提条件

• MODx0.9.6
• サイトには随時、記事が追加される
• サイトは外部のブログへのリンク集も持ち、そのリンクも随時追加される
• MODx上で記事はドキュメント、リンクはウェブリンクで保持している

やりたいこと

• 新着記事、リンクをDittoを使って表示する
• 記事もリンクも時系列でソートされ、どちらもごちゃまぜで表示する
• 記事の場合は内容（[+content+]）の一部、リンクの場合はリンクの説明文（[+description+]）を表示する

例えば以下のようなファイル構成です（カッコ内はそのオブジェクトが持つID）。

記事用フォルダ(1)
　└記事A
　└記事B
　└記事C

ウェブリンク用フォルダ(2)
　└リンクA
　└リンクB
　└リンクC

このようなファイル構成から記事とウェブリンクをごちゃ混ぜにして公開日が最新の3件を取得するには、Dittoスニペットを以下のように使用します。表示に使用するチャンク名はchunkとします。

[[Ditto?parents=`1,2` &sortBy=`pub_date` &total=`3` &sortDir=`DESC` &tpl=`chunk` &hideFolders=`1`]]

それぞれの設定内容は以下の意味です。

設定内容	意味
parents=`1,2`	記事用フォルダとウェブリンク用フォルダ両方から取得する
sortBy=`pub_date`	公開日でソートする
total=`3`	3件取得する
sortDir=`DESC`	降順でソート（新しいものが上にくる）
tpl=`chunk`	使用するチャンク名
hideFolders=`1`	親フォルダを表示対象にしない

そしてチャンクを以下のようにし、PHxファンクションを使用してドキュメントかウェブリンクかで表示内容を変えます。プレースホルダ[+type+]がドキュメントの場合はdocument、ウェブリンクの場合はreferenceとなるのでそれをもとに条件式で判定します。

注意
以下の例はうまく動作しません。

[+phx:if=`[+type+]`:is=`reference`:then=`[+description+]`:else=`[+content:limit=`500`+]`+]

これでドキュメントのときは内容（[+content+]）の最初の500文字を、ウェブリンクの場合は説明文（[+description+]）を表示できる・・・と思ってたらできませんでした。色々試行錯誤しているうちに、どうやら[+type+]の中にオブジェクトのタイプがちゃんと取れるときと取れないときがあることがわかりました。

結局、[+type+]を別の場所で一度使用してやるとPHxファンクションの中でも使用できるようになることを発見。以下のようにHTMLのコメント部で一度表示するとうまくいきます。なぜかはわかりませんが。

一応の解決策

<!-- this is [+type+] -->
[+phx:if=`[+type+]`:is=`reference`:then=`[+description+]`:else=`[+content:limit=`500`+]`+]

Dittoのソースとか追っかければ理由はわかるかもしれないけど、今までPHPはほとんどノータッチだったので、とりあえず動いたということでよしとします。

以下から入手して、ここ数日急きょ増えたスパムコメントに対応。 コメント時に画像内の文字を入力するという、よくあるやつ。

captcha [Wiki:NucleusCMS]

それはそうとコメントフォームの表示が崩れるんだけど、修正する方法がわからない。 スキンやテンプレートで定義されているのでもないみたい。 どっかでカスタマイズできるのかな。

追記

CSSの修正でなおることがわかった。どうやらNucleus3.3独自の問題なのかな？
以下参照。

nucleusの時間です | コメントフォーム