96th Street | GeSHi実験結果

GeSHi実験。。。。不採用確定www

GeSHiはコード表示用のプラグイン

このページはコード表示プラグイン『GeSHi』の実験結果です。結局、オレの使いたいことには合わなくて不採用になったんだけども、どんな結果になったかというのを残しておくのもいいかな。。。とw

先に言っておくと、GeSHiそのものはちゃんと動作してくれた。立派に使えるプラグインです。ただ、このサイトでの使い方には合わない。だから不採用となったわけだが、その理由は以下で説明していきます。

もともとは、このコーナーでスニペットの実験結果や設定の公開をしていくために、コードの記述をする必要があり、その作業がMODx上だと結構大変なんだょね。それで簡単にコードを表示できる方法がないかと思って探し当てたのがGeSHi。

要は、どんなスニペットコールを書いたか、を説明しようとすると

 [!MaxiGallery? &display=`childgalleries`!]

こんな風に表示させなきゃいけないわけなんだけども、スニペットが動いちゃうと困るわけで、実際には

[<!-- -->!MaxiGallery? &display=`childgalleries`!<!-- -->]

と書いて、スニペットが発動しないように、そして表示はうまくいくようにしてあるわけだ。

ただまぁ、基本１行だけですむスニペットコールならいいけども、チャンクに書かれたスニペット用のテンプレートなんかを書こうとすると、結構たくさんの<!--  -->をいれていく必要がある。

例えばMaxiGalleryのテンプレを説明してる箇所だと、

<li>
 <a href="[+maxigallery.childurl+]">
  <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]" />
 </a><br />
[+maxigallery.pageinfo.pagetitle:htmlent+]
</li>

↑これを表示するために実際に書いたコードは

<<!-- -->li>
 <<!-- -->a href="[<!-- -->+maxigallery.childurl+<!-- -->]">
  <<!-- -->img src="[<!-- -->(base_url)<!-- -->][<!-- -->+maxigallery.path_to_gal+<!-- -->]tn_[<!-- -->+maxigallery.picture.filename+<!-- -->]" class="thumbnail" title="[<!-- -->+maxigallery.strings.go_to_gallery+<!-- -->]" alt="[<!-- -->+maxigallery.strings.go_to_gallery+<!-- -->]" />
 <<!-- -->/a><<!-- -->br />
[<!-- -->+maxigallery.pageinfo.pagetitle:htmlent+<!-- -->]
<<!-- -->/li>

こんなに長ったらしくなる。。。htmlタグとMODxタグを動作させないように<!-- -->をいれていくわけだが、たった7行のチャンクコード書くだけでこれだもん。しかもチェックも大変だしね。。。。(*-∇-)･･･

で、GeSHiの登場となったわけだが、このプラグインは、<pre>～</pre>で囲まれたhtmlコードがあると、その間のコードをそのまま表示してくれるというスグレモノのプラグインだ。

ただ、この『そのまま』がこのサイトでは仇になっちゃった。。。。。

このサイトでは、できる限り通常の使い方をする為、contentを編集するのにデフォルトのリッチテキストエディタ、TinyMCEを使っている。

RTE(リッチテキストエディタ)をオフにしてコードをそのまま書いていってもいいんだけども、最終的には仕事でMODxサイトを立ち上げる為のさまざまな実験をしていくのが目的なんで、他のページとの兼ね合いやなんかいろんな理由で、TinyMCEをはずさないでやっていくというのは最低限のルールのひとつにしてある。

で、このTinyMCE、なかなか使い勝手のいいRTEなんだけども、今回の場合、ひとつ親切すぎる機能がついてる。

もともと、MODxタグやhtmlタグに使われてる&とか<　>　という記号は、特殊な記号の部類に入るらしく、TinyMCEではこういう記号を自動的にhtmlエンティティ化して記述しちゃってくれます。

htmlエンティティに関してはこちらを読んでねw(別窓)

要するに、TinyMCE上で　& と書くと、自動で変換され、実際のコードには　&amp; と書き込まれてしまうわけだ。

この状態で書き込まれたコードをGeSHiで表示すると、コードがそのまま表示されちゃうんで、

[!MaxiGallery? &display=`childgalleries`!]

と表示したいのに

[!MaxiGallery? &amp;display=`childgalleries`!]

と表示されちゃうわけですよ。。。。ﾏｲｯﾀ。。。。。(*-∇-)･･･

MODx日本語フォーラムで助けを求めたところ、ZeRoさんがプラグインの改造までしてくれて(大感謝♪)いけるかな。。。と思ったんだけどね。。。やっぱりこの使い方にはムリがあるみたい。。。。(*-∇-)･･･

結論としては、GeSHi自体はすばらしいプラグインです。ただし、TinyMCEなどのRTEを使ってる環境だと、ちゃんと動くけども、ちゃんと動いてるが故に目的どおりの表示ができないことがある。。。って感じでしょうか。

RTEを使わない環境ではその機能は十分な結果を出してくれることでしょう。

単純に、このサイトの使い方に合わなかっただけだ、ということは強調しておきます。

(※実はGeSHiのDLページにこのことは書いてある。RTEとの併用はオススメしないみたいなことが。。。まぁ、なんでなのかは実際にやってみてわかったわけなんだけども。。。。。www)

■ここから先はZoRoさん、tkfmさんに提供していただいたスニペット版GeSHiのテストです■

<li>
<a href="[+maxigallery.childurl+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]" />
</a><br />
[+maxigallery.pageinfo.pagetitle:htmlent+]
</li>