最近私がよく使用しているサイト構築ツールがMODxです。まだ未完成なところもありますが、非常に強力なCMSです。私は他のサイト様の解説などを頼りになんとか使っているようなものですが、どのような構築をしているのかをまとめておくことは自分のためにもなり、もしかしたら他の人の助けに少しでもなるかと思いましてこのようなページを作ることにしました。
インストールやスニペット・プラグインなどの導入に関しては参考サイトの記述のほうがはるかに良いコンテンツがありますのでそちらを読んでいただきたいと思います。こちらでは実際にどのようなオプションをつけているのか、どう実装したのかなどを書いていきます。稚拙な実装ではありますが、具体例があったときに私も助かるなと思ったことが多々ありましたので……。
私は自宅サーバを運用しており、当サイトをはじめとして私の構築するサイトはすべてそのサーバ上で動いています。したがって以後の記述は以下の環境を前提としております。事実上なんでも出来る環境なので、制限のあるプロパイダやレンタルサーバなどの場合は事情が異なるかもしれません。
基本的に1km.info様の記述に従います。私の場合、事前にphpMyAdminによってMODxが使うDBだけは作っておきます。文字コードはUTF-8を使用しますので特に文字コードモジュールを入れ替えることはしていません。後は全て説明通りに行います。
とにかく一つテンプレートを作ってしまいます。後で変更は出来るので、極論を言えば
<html> <head></head> <body> </body> </html>
でも構いません。
私の個人的なサイトの一つである『凉武装商隊』では次のようなテンプレートをトップページ用に使用しています。かなり簡単なコードになっています。
ドキュメントやチャンク、スニペットなどから呼び出して置換できる変数です。見出しに使う言葉が決まらないとき、仮見出しをテンプレート変数にしておくという手も使えます。
テンプレート変数はドキュメントなどから
[*ryanacurl*]
のように書くと呼び出すことが出来ますが、どのテンプレートから呼び出すことを許可するか、というのを設定しないと無効になりますので注意してください。
MODxはそのまま使ってもサイト構築ツールとして有用ですが、各種の機能拡張を使えばさらに強力になります。インストール段階でも代表的なスニペットやプラグインはほとんど入っていますが、私も最初はまったく使い方がわかりませんでした。というわけで一ヶ月ほどMODxと格闘してなんとかわかったところまでを書いておきます。
これを使いこなすかどうかでMODxが使い物になるかどうかが決まるといわれるほど強力なスニペットです。作成したドキュメントを収集分類し、望みの形で出力することが出来ます。うまく使えば新着情報やカテゴリページを作ったり、rssやsitemapの生成も出来ますし、ブログやニュース形式でページを作ることもできます(というかできるそうです)。
MODx 0.9.6にはDitto 2.0.2が入っていますので、とくにスニペットを導入する必要はありません。以下に私が具体的にはどのようなことをしたかをメモしておきます。
私のサイトでは主にサイドメニューに新着情報を出しています。そこで新着情報を載せたいところに
[!Ditto? &config=`recententry` !]
と書きます。パラメータはすべてコンフィギュレーションファイルに書いています。
コンフィギュレーションファイルは次のようになっています。
<?php $id='recententry'; $parents='0'; $depth='4'; $display='10'; $showInMenuOnly='1'; $hideFolders='1'; $sortBy='editedon'; $tpl='recententry'; ?>
表示用テンプレートは「recententry」というチャンクを使います。リソース→リソース管理→チャンクに行き、この名前で次のようなチャンクを作ります。
<div class="recententry_box"> <h4><a href="[~/~]">[+pagetitle+]</a></h4> <p>[+description:limit+]</p> </div>
これで最新10件の新着記事が表示されます。
2008年3月はじめの段階ではまだタギングがわかっていません。次はこれを習得したいものです。タグクラウドとか使ってみたいんですよね。
MODxのドキュメント構成を動的に作成してくれるスニペットです。Dittoでも同じようなことは出来ると思いますが、「activeTreeOnly」が再現できるのかどうかわかりません。activeTreeOnlyは該当カテゴリーを表示している間だけそのカテゴリー内のメニューを表示する、という機能です。大量のドキュメントがあるサイトでは必須の機能です。
DropMenu自体は最初から入っていますが、まだバグがいろいろとあるようです。まあそれをいうならMODx自体がまだまだ開発中で、バグがあるのは当たり前です。それを覚悟で使っているのですからいろいろと調べなくてはなりません。
使い方はコミュニティフォーラムのこのアーティクルに詳しく記述してあります。私は基本的には次のように記述しています。
[[DropMenu? &activeTreeOnly=`true`]]
単にacriveTreeOnlyを使っているだけです。メニューに出すかどうかは管理ページで「メニューに表示 」にチェックを入れるかどうかで変えています。なお、凉武装商隊の各コーナーで表示するメニューを切り替えていますが、その場合は次のように書きます。
[[DropMenu? &activeTreeOnly=`true` &startDoc=`4` ]]
DropMenuのスニペット内に他のパラメータの説明は一通り書いてあります(英語ですが)。よくわからないものもありますが、他に私が使っているパラメータは
orderBy 並べ替えをなにで行うか、を指定します。例えば orderBy=`longtitle` とすれば、「長いタイトル」でソートします。
orderDesc 降順で並べ替えをするかどうかをtrueかfalseで指定します。 orderDesc=`true` のように指定します。
orderAsc 昇順で並べ替えをするかどうかをtrueかfalseで指定します。 orderAsc=`true` のように指定します。
こんなところでしょうか。
なお、フレンドリーURLをON、フレンドリーエイリアスをON、エイリアスバスをONの状態でDropMenuを使うと、サブディレクトリに移った後に他のリンクをクリックすると、そのサブディレクトリの下からそのリンクを探そうとします。
例 http://www.hoge.com/piyo/index.html にDropMenuで表示された http://www.hoge.com/help.html をクリックすると、 http://www.hoge.com/piyo/piyo/help.html を探そうとするので、当然エラーになります。
これはDropMenuでのリンク生成が
<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">
となっているから、らしいです。そこでDropMenuスニペットを
<a href="/[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">
と修正すると絶対パスでリンクを生成するようになるのでちゃんと飛ぶようになります。
Ajaxを使ったサイト内検索システムです。なかなか格好いい表示をします。
必要ファイルはこちらからダウンロードします。MODx 0.9.6に同梱されているのは1.5ですが、最新は1.7のようですので入れ替えます。
1.まずは「snippet.ajaxSearch.php」というファイルを開きます。次にMODxの管理ページから「リソース→リソース管理→スニペット→AjaxSearch」を開いて、中身を新しいAjaxSearchと入れ替えます。ついでに説明も変えておくといいと思います。
2.次に「assets/snippets」の下に「ajaxSearch」というディレクトリを作成します。
3.ダウンロードした書庫内の「js/ajaxSearch.js」に検索中に表示される画像などの指定があるので必要があれば変更します。私はそのままにしています。
4.書庫内のファイルをすべて2.で作成したディレクトリ内にアップロードします。
5.検索窓をつけたいところにスニペット呼び出しコードを書きます。最低限次のコードを書いておけば動作します。
[!AjaxSearch!]
次に「manager/includes/config.inc.php」の「database_connection_charset」に「utf8」という値をセットします。
$database_connection_charset = 'utf8';
さらに文字化け対策として「.htaccess」にmbstring関係の設定を付け加えておきます。すでにやっている人は無視して良いです。
php_value default_charset UTF-8 php_value mbstring.languages natual php_value mbstring.internal_encoding UTF-8 php_value mbstring.script_encoding auto php_value mbstring.http_input auto php_value mbstring.http_output pass php_flag mbstring.encoding_translation Off php_value mbstring.detect_order auto php_value mbstring.substitute_character none; php_value mbstring.func_overload 1
ハイライト表示は次のようにします。
a.「管理ページ→リソース→リソース管理→プラグイン」に行き、「プラグインの生成」をクリックします。
b.書庫の「plugin.searchHighlight.tpl」の中身をコピーして「Search_Highlight」という名前でプラグインを作成します。「システムイベント」タブに切り替え、「OnWebPagePrerender」という項目にチェックを入れてください。
d.テンプレートのどこかに「」というフレーズを入れておくと、ここに現在の検索語とハイライト表示を消すリンクが生成されます。私は入れていません。
e.あとは検索をするだけです、と書いてありますが、実際にはcssで背景色とかを指定してやらないと意味がありません。以下に例を示します。設定していないところもありますが。
#ajaxSearch_form {
padding:10px 0 10px 10px;
}
#ajaxSearch_input {
margin:0 0 5px 0;
}
#ajaxSearch_submit {
}
#ajaxSearch_output {
}
#ajaxSearch_resultListContainer {
padding:0 0 0 10px;
}
.ajaxSearch_paging {
}
.ajaxSearch_pagination {
}
.ajaxSearch_result {
}
.ajaxSearch_resultLink {
}
.ajaxSearch_resultDescription {
}
.ajaxSearch_extract {
}
.ajaxSearch_highlight {
background-color:#FFFF66;
color:#000000;
}
.ajaxSearch_resultsIntroFailure {
}
.ajaxSearch_inrto {
}
.AS_ajax_result {
padding:0 0 0 10px;
}
.AS_ajax_resultLink {
font-size:0.7em;
}
.AS_ajax_resultDescription {
font-size:0.9em;
}
.AS_ajax_extract {
font-size:0.6em;
}
.AS_ajax_highlight {
background-color:#FFFF66;
color:#000000;
}
.AS_ajax_more {
}
.AS_ajax_resultsIntroFailure {
}
※ more resultsを使いたいときなんですが、どうも思うとおりに行きません。ここはまた後で勉強する予定です。
非常に強力な画像ギャラリーです。私はlightboxの代わりにしか使っていませんが、実際にはアルバム作成なども出来る高機能なスニペットです。
インストールはLet's enjoy MODxさんの解説がわかりやすいと思いますが、こちらにも一応書いておきます。
まずこちらからMaxiGalleryを探します。検索すればすぐに見つかります。
これを解凍し、「管理ページ→リソース→リソース管理→スニペット」に行って「スニペットの作成」をクリックします。「maxigallery.txt」の中身を貼り付けます。スニペット名は「MaxiGallery」とします。
次に解凍したファイルの中に「assets」というフォルダがあると思いますので、これを同名のフォルダに上書きします。そして「assets/galleries」のパーミッションを「777」にします。
パラメータはコンフィギュレーションファイルで設定する方が良いと思います。例えば私はフィギュアギャラリーでは「assets/snippets/maxigallery/configs/figureimage.config.php」というコンフィギュレーションファイルを作り、次のような設定にしています。
<?php // Use the following syntax $param = 'value'; $pics_per_row = '4'; $embedtype='lightboxv2'; $display = 'embedded'; $order_by = 'id'; $order_direction = 'ASC'; $max_thumb_size = '160x160'; $max_pic_size = '0'; $smoothgallery_fadeDuration = '100'; ?>
ギャラリーを表示したいドキュメントで次のようなスニペットコールを行います。
[!MaxiGallery? &config=`figureimage` !]
次にこのドキュメントをブラウザで開きます。すると「Manage pictures」というボタンがあるはずです。これをクリックするとどの画像をこのギャラリーで扱うのかを指定できます。カスタマイズしたい場合にはLet's enjoy MODxさんのMaxigalleryの解説が役立つと思います。
エイリアスパスをONにすると相対URLが違ってくるので、うまくボタンなどが読み込めず、CLOSE出来なくなったりします。少なくともウチでは。
その時は「assets/snippets/maxigallery/lightboxv2/js/lightbox_lang_en.js」に記述してある画像パスを絶対パスに書き換えてみましょう。これでうまく表示されるはずです。
CASSIOPEIA WORKSさんの作成された各種サイトマップを生成するスニペットです。Dittoでも作成できます(Phize on the WebさんのXML形式(標準仕様)のサイトマップの作り方)が、どちらがよいかは好みの問題でしょうか。
インストールやセットアップはサイトの解説通りにすれば問題ないはずです。私はこれでgoogleのsitemapを生成し、ウェブマスターツールに登録しています。
生成用ドキュメントの中身はこう記述しています。
[[GenSitemap_XML? &sitemapType=`google` &showSearchableOnly=`1` &showMenuOnly=`0`]]
MODxではDBからコンテンツを動的生成していることもあり、おなじページを複数の方法で指定することが出来ます。しかしこれはSEO的にはあまりよろしくない、ということで、それを統一するためのツールがこれです。詳しい解説はLet's enjoy MODxさんの解説をご覧下さい。
なお、現時点ではいくつかの不具合があるということで、これを改良したバージョンをPhize on the Webさんで公開してくれています。今回はこれを使用します。インストールの方法もこちらに詳しく書いてあるのでそれを参考にして下さい。
このページはまだまだ作成中です。今後も更新していく予定です。
管理者 小佐井正憲