その他

フレンドリーURLを有効にする

各ページのURLはindex.php?id=xxxという形式になっていますが、サーバ側にインストールされているmod_rewriteモジュールの機能を利用し、静的構成のサイトのような /dir/page.html という形式でURLを扱うこともできます。

まず、インストールディレクトリにある「ht.access」を「.htaccess」にリネームします(※サーバによってはOptions +FollowSymlinks記述を有効にしないとサーバのURL書き換え機能が働かないことがあります)。次にMODX側のフレンドリーURL出力を有効にするために「グローバル設定」を開き、「フレンドリーURLの使用」を「はい」にしてください。すると関連する設定項目が追加表示されます。

一般的にはこのように設定します。拡張子を自由にコントロールしたい場合は「フレンドリーURLの接尾辞」を空白にしておいて、リソースのエイリアスで拡張子込みのファイル名を指定するとよいでしょう。たとえばCSSファイルやXMLファイルもリソースとして管理したいが、拡張子がhtmlになるのを避けたい場合に有効です。また、MODXのURLコントロール機能を補佐する「SEO Strict URLs」プラグインが知られています。

相対パスを利用する

同梱のTinyMCEプラグインに関する設定です。MODXのリンクタグは、常にMODX稼働ルートディレクトリ基準の相対URLを出力します。このためフレンドリーURL設定でサイト運用を行なっている場合は、サイト内のページや画像にリンクを張った時にディレクトリずれが発生します。これを防ぐために、TinyMCE側では「絶対パス自動補完オプション」により、基準となるパスを自動的に補うようになっています。パスを補う際の判定基準は「パスの先頭がスラッシュまたはhttp:で始まっているかどうか」となっています。このような設定になっていることで、既存のオーサリングツールによるサイト構築スキルをそのまま生かしてテンプレートを作ることができます。

より高度な使い方として、baseタグの利用を推奨します。これにより、論理的にクリーンな状態でサイトを運用することができます。この場合はTinyMCEプラグインの「Path Options」設定で「rootrelative」を選択します。具体的なメリットとしては、リンクの内容(srcまたはhrefの値)をスニペットやチャンクで抽象化するなどしてコントロールしやすくなります。スニペットやチャンクが出力する値が常に相対パスであれば問題ありませんが、httpから始まるURLを出力したいこともあるでしょう。そのような場合、TinyMCEの絶対パス自動補完オプションが障壁になることがあります。

相対パスをbaseタグでコントロールする場合のデメリットとしては、アンカータグによるサイト内移動の場合に多少の工夫が必要になることが挙げられます。baseタグで補われるのはルートURLのみなので、Base URL Same-Page-Link Fixプラグインなどを用いて、アンカーに関してはアクセスしているページのURLごと補わないと、常にトップページにリンクが張られることになります。また、baseタグを解釈しない一部のクローラーが404ログを残していくことがあります。

ナビゲーションを設置する

標準で同梱されているWayfinderを利用します。テンプレート中に[[Wayfinder]]と記述するだけで、とりあえずその時点で作られているリソースのリンク一覧を動的に出力します。

[[Wayfinder?startId=0&hideSubMenus=true]]

一般的にはこのように記述します。startIdパラメータは指定されたリソースIDのサブリソースのリストを出力するもので、ここで「0」を指定すると「サイト全体」のリストを表示できるので、ナビゲーションとして用いることができます。

Wayfinderには他にも豊富なオプションがあり、親子関係の表現なども自由にできます。ナビゲーションに関してはなんでもできる万能型のスニペットです。サイトマップも作れます。詳細についてはドキュメントを確認してください。
※規模が小さく構成変更も少ないサイトなら、スニペットを利用せず静的にナビゲーションを記述するのもよいでしょう。

パン屑リストを設置する

標準で同梱されているTopicPathスニペットを利用します。[[TopicPath]] と記述するだけで適切な出力を得ることができますが、パラメータを追加して細かくカスタマイズすることもできます。詳細についてはドキュメントを確認してください。

新着情報の一覧を設置する

標準で同梱されているDittoを利用します。リソースの一覧出力に関してはあらゆることができる、万能型スニペットです。新着情報の一覧だけでなく、ブログの実装も可能です。

<h3><a href="[~[+id+]~]">[+date+] - [+pagetitle+]</a></h3>
<div>[+introtext+]</div>

まず、上記のように記事一件あたりの出力パターンをチャンクで作ります。

[[Ditto?tpl=パターン名]]

任意のページに上記のように記述すると、サブリソースの一覧を指定パターンで出力します。

問い合わせフォームを設置する

標準で同梱されているeFormスニペットが利用できます。

[!eForm?tpl=form&report=mailtpl!]

この2つのパラメータは必須です。また、スニペットの性格上、出力のキャッシュを回避する必要があります。詳細はドキュメントを確認してください。

さらに高機能なスニペットとしてはcfFormMailerが知られています。eFormでは実装が難しい確認画面を作ることもできます。

サイト内検索を設置する

同梱のAjaxSearchスニペットを用います。

[[AjaxSearch]]

上記のように記述すると、検索窓が表示されます。検索結果の一覧はAjax制御を通じて検索窓の直下に出力されるため、検索結果一覧を表示するためのページを作る必要がありません。Ajaxならではの手軽さです。
※AjaxSearchは動作が重いスニペットなので、本格的なサイトに導入する場合は事前のチェックを念入りに行なうようおすすめします。

検索窓のデザインをコントロール

AjaxSearchが出力する検索窓は、サイトのデザインによっては入力フィールド・検索ボタンなどの構成要素の並びが不自然になることがあります。これは、ブロック要素であるfieldset・labelタグで各要素がwrapされているためです。

<style type="text/css">
<!--
fieldset, label {display:inline;border:none;margin:0;padding:0;}
-->
</style>

このようにスタイルを設定すると、表示に関する影響を抑えることができます。AjaxSearchはコードをhtmlソースに出力しませんので、細かいカスタマイズにはFirebugなどを用いるとよいでしょう。

/assets/snippets/ajaxSearch/templates/input.tpl.html をカスタマイズしてデザインを調整することもできます。このファイルを直接編集せず、コードをチャンクに移し、&tplInputパラメータでチャンク名を指定してカスタマイズデザインを割り当てることを推奨します。

検索結果一覧を任意のブロックに出力する

AjaxSearchのデフォルトでは、検索窓の直下に検索結果一覧を出力します。任意の領域に出力したい場合は、&outputパラメータを用います。

[[AjaxSearch?output=1]]

上記のように記述すると、出力を2つのプレースホルダーに分割できます。検索窓を表示したいポイントに[+as.inputForm+]を、検索結果一覧を出力したい領域に[+as.results+]と記述してください。このパラメータを指定した場合、スニペットコールを記述したポイントには何も出力しません。同じ場所に[+as.inputForm+]を記述するとよいでしょう。

検索結果一覧のリンクに付加されるクエリストリングを抑制する

[[AjaxSearch&highlightResult=0]]

このように記述します。URLの末尾に付加されるクエリストリングは、同梱のSearch Highlightプラグインで用いられるもので、検索に用いたキーワードを検索結果一覧・遷移先のページの両方で強調表示するために必要です。検索結果一覧のみ強調すればいい場合は、スニペットコールを上記のように記述します。

日付タイプのリソース変数の出力書式を変更する

日付タイプのリソース変数は、そのまま[*createdon*]などと記述すると、UNIX Timestamp形式で日時データが出力されるため、実際の日時が分かりません。以下のようなスニペットを書いて出力するとよいでしょう。

<?php
return date('Y年m月d日', $modx->documentObject['createdon']);
?>

スニペット名を「ページ作成日」とした場合、[[ページ作成日]] と記述します。このような小さな機能を手軽に作って利用できるのがMODXの有利な点であり、システムが扱うデータは加工のしやすさを優先したデータ形式となっています。

配布されているアドオン(スニペット・プラグイン)をインストールする

MODX開発元のアドオン配布コーナーではさまざまなスニペット・プラグイン・モジュールが配布されています。現在のMODXはこれらのアドオンをシンプルで一律な手順でインストールする仕組みを持っていないため、基本的には配布ページに記述されている手順に沿ってインストールします。プラグインやモジュールに関してはインストーラが提供されていることもあります。連携ファイルを持たない小さなアドオンの場合は、管理画面の「エレメント管理」で新規作成フォームを開き、コードをコピー・ペーストするだけで使えるようになります。

プラグインの場合はさらにシステムイベント設定タブでシステムイベントを設定する必要がありますが、MODX 1.0.3J以降はコードを貼り付けてtextarea以外の領域をクリックするだけで自動的にセットすることができるようになっています。

ログイン時に管理画面にアクセスさせない

「ユーザ管理」の対象ユーザのアカウント編集ページの「詳細」タブを開き、「管理画面ログイン開始ページ」としてトップページのリソースIDを指定します。こうすると、対象ユーザがログインした時、自動的にサイトのトップページにリダイレクトされます。QuickManagerを併用すれば、管理画面を使わずフロントエンドだけで基本的なコンテンツ管理ができます。

QuickManagerのインライン編集ボタンの使い方(1)

QuickManager1.4.1より、インライン編集機能が実装されました。これは旧MODX0.9系の頃に利用されていたQuickEditプラグインの機能に倣ったもので、content・pagetitle・longtitleなど、リソース変数ごと・テンプレート変数ごとに編集ボタンを表示します。「この領域を編集する」状態が分かりやすく、より直感的な編集操作を行なうことができます。QuickManagerプラグインの設定画面で「Inline template variable buttons」オプションをtrueに設定した上で、リソース変数・テンプレート変数を下記のように記述します(※例示です)。

[*#content*]
[*#テンプレート変数*]

「#」を変数名の先頭に追記します。

QuickManagerのインライン編集ボタンの使い方(2)

「インライン編集ボタン」と呼ばれるものはもう一種類あります。Dittoなどのように複数のリソースを束ねて表示しているページで、個々のリソース単位で編集ボタンを表示できます。QuickManagerの「Inline edit buttons」オプションをtrueに設定した上で、

<!-- qm-edit [+id+] 'ここを編集' -->

Dittoのテンプレートなどに上記のように記述します。

QuickManagerのインライン編集ボタンの使い方(3)

新規投稿ボタンを任意の領域内にインラインで表示することができます。

<!-- qm-new 1 3 '新規投稿' -->

上記のように記述します。この例示では、ID=1の親リソースの下・テンプレートID=3という条件で新規リソースを作成することを示しています。

Googleマップを貼り付ける(1)

投稿画面を開き、「使用エディター」で「なし」を選びます。次に「ページ設定」のタブを開き「リッチテキストで編集」のチェックを外します。このチェックを外しておかないと、次に編集画面を開いた時にRTEがタグを削除してしまうことがあります。これでhtmlタグを自由に記述できるようになったので、Googleマップの「埋め込み地図」のタグを貼り付けます。

http://since20080425.blog32.fc2.com/blog-entry-828.html
http://www.shurey.com/html/googlemaps.html
http://eswan.blog120.fc2.com/blog-entry-103.html
http://living.undo.jp/?p=406
http://imakoko.didit.jp/imakoko_html/memo/parameters_google.html
http://www.shurey.com/html/googlemaps.html
http://techracho.bpsinc.jp/piichan1031/2010_06_16/1837
吹き出しの表示・縮尺の変更などについては上記ページに分かりやすくまとめられています。

Googleマップを貼り付ける(2)

MODX投稿画面のTinyMCEツールバーの「HTMLソース編集」ボタンをクリックし、開いたダイアログに貼り付けます。

Googleマップを貼り付ける(3)

textareaタイプのテンプレート変数を作り、ここにGoogleマップのコードを貼り付けます。このテンプレート変数を、リソース本文内で呼び出します。テンプレート変数名を「補助フィールド」などの汎用的な名前にしておくと、他の目的に使っても違和感ありません。

Googleマップを貼り付ける(4)

パラメータを与えて定型のコードを出力するだけなので、簡単なスニペットを作るのも効率的です。

Googleマップを貼り付ける(5)

ManagerManagerのmm_widget_googlemapウィジェット(MODX Evolution 1.0.5J-r1以降)を利用すると簡単です。

YouTubeの動画を貼り付ける

そのまま貼り付けられます。TinyMCEで開いている場合は「埋め込みメディアの挿入/編集」アイコンをクリックし、YouTubeの動画URLを貼り付けます。タイプは「Flash」を選んでください。HTMLソース編集ダイアログでプレイヤー展開コードをそのまま貼り付けることもできます。

改行はシフト+エンターキーで

TinyMCEやCKEditorでリソース編集画面を開いている場合、エンターキーを押すとp要素で段落整形されるため、意図しない空行が挿入されたように見えることがあります。Validな文書を作るには便利な機能ですが、改行のみですませたいこともあります。シフトを押しながらエンターキーを押すと、改行(<br />)のみが挿入されます。

文字コードeuc-jpで運用する

管理画面に関しては標準でeuc言語ファイルを同梱しており、エンコード設定とセットで設定を変更することでMODXをeuc-jpで運用できます。設定を変更する前に必ずデータベースのバックアップをとってください。

MySQLのバージョンが4.1以上の場合は、グローバル設定の設定変更と共に、manager/includes/config.inc.phpの$database_connection_charsetの値をujisに書き換えてください。4.0系の場合はデータベースの中身をeuc-jpに変換する必要があります。

スニペットやプラグインなどアドオンに関しては自前で環境を整える必要があります。すでにjapanese-utf8.inc.phpが用意されているケースが多いと思いますので、これをテキストエディタで開いて「japanese-euc.inc.php」というファイル名で、文字コードeuc-jpとして別名保存してください。これがeuc-jp言語ファイルとして、該当アドオンで利用できます。

euc-jp運用はポイントさえ押さえていれば難しくありませんし、MODXのシステム自体はutf-8・euc-jpどちらに優位ということもなく対等に動作します。しかしデフォルト設定の多くがutf-8寄りになっていますので、リスクがあることをしっかりと意識する必要があります。

日常の運用で気をつけるべきこと

「イベントログ」に時々目を通し、想定外のエラーが発生してないか確認しましょう。また、データベースのバックアップはできるだけ定期的にとるようにします。ログは蓄積される一方なので、時々削除しましょう。将来的には上限を設定できるようになる予定です。

携帯電話向けコンテンツを作る

MobileConverterプラグインが便利です。携帯電話向けに、エンコードや画像形式の変換などを行ないます。

テンプレート変数の便利な使い方

テンプレート変数は「カスタムフィールド」のようなもので、投稿画面にオリジナルの入力項目を追加することができます。MODXでは十分に実用的な仕様となっており、入力・出力のそれぞれにおいて様々な制御ができるようになっています。

まず入力においては、通常のテキスト入力以外に、ドロップダウンメニュー・チェックボックス・ラジオボタン・ファイルアップロード(画像も可)など一般的なフォーム要素と、リッチテキストやカレンダー入力などさらに高度なGUIを持つものを選ぶことができます。

ドロップダウンメニューやチェックボックスなど、複数の選択肢を持つタイプのテンプレート変数は下記のように設置します。

入力時のオプション値
チャーリー||ハドソン||ダニエル||タイチ||ユーリー

既定値
ハドソン

このように「|| 」で区切ります。

ウィジェット

テンプレート変数の出力においては、ウィジェットを利用すると高度な制御が可能です。特に「HTML Generic Tag」や「Image」は実用的で、これらのウィジェットを適用したテンプレート変数は、値が何も入力されなかった場合は何も出力しません。

<img src=" " />

このような、属性が空のままのimg要素を出力してしまうことがありません。

ウィジェット処理を自作する(1)

標準実装のウィジェット機能は基本的な処理しかできません。しかしこれがMODXの限界ではありません。スニペットを通じてテンプレート変数にアクセスするとよいでしょう。

<?php
return mb_convert_kana($modx->documentObject['pagetitle'], 'Kas', 'utf-8');
?>

上記のコードを「全角半角変換」というスニペット名で保存すると、リソース名を半角に揃えて出力できます。

<?php
return mb_convert_kana($modx->documentObject['商品コード'][1], 'Kas', 'utf-8');
?>

テンプレート変数を処理したい場合は上記のように[1]を追加します。print_r してみると分かりますが、テンプレート変数は配列構成になっています。

<?php
$imagePath = $modx->documentObject[$tv][1];
$width = ($width) ? '&w=' . $width : '';
$height = ($height) ? '&h=' . $height : '';
if($imagePath && file_exists(getenv('DOCUMENT_ROOT'). $imagePath))
{
$site_url = rtrim($modx->getConfig('site_url'), '/');
$imagePath = str_replace($site_url, '', $imagePath);
$str = '<img src="/ajaxlib/phpthumb/phpThumb.php?src=';
$str .= $imagePath . $width . $height . '&q=90&fltr[]=usm|80|0.5|3&fltr[]=wb';
$str .= '" />';
}
return $str;
?>

上記のようなコードを「画像ウィジェット」というスニペット名で保存し、

[[画像ウィジェット?tv=テンプレート変数名&width=300&height=225]]

このように呼び出すと、phpThumbライブラリを利用して横幅・縦幅を揃えつつガンマ調整・ホワイトバランス処理まで施す高度な画像処理を行なうウィジェットを実現できます。

[[画像ウィジェット?tv=[+value+]&width=300&height=225]]

ウィジェット処理を自作する(2)

<?php
if (empty($modx->documentObject['longtitle']))
{
$title = $modx->documentObject['pagetitle'];
}
else
{
$title = $modx->documentObject['longtitle'];
}
return $title;
?>

上記のようなスニペットを作って「タイトル」などの適当な名前で保存します。

<h1>[[タイトル]]</h1>

テンプレートなどに上記のように記述すると、投稿画面の「タイトル」に入力がある場合は「タイトル」を、ない場合はリソース名を出力します。
※この程度の処理であればPHxプラグインのほうが分かりやすいかもしれません。
(PHxを導入している場合は [*longtitle:ifempty=`[*pagetitle*]`*] と記述します)

リソース保存時に値を変換

データベースに値を保存する時点で形式を正しく揃えたい場合は、プラグインを作って保存時に処理を行ないます。

global $pagetitle;
$pagetitle = mb_convert_kana($pagetitle, 'Kas', 'utf-8');

上記のようなプラグインを作って、システムイベント「OnBeforeDocFormSave」にフックします。

global $tmplvars;
foreach ($tmplvars as $field => $value) {
if (is_array($value)) {
switch($field) {
case '3':
$tmplvars[$field][1] = mb_convert_kana($tmplvars[$field][1], 'Kas', 'utf-8');
break;
}
}
}

テンプレート変数を処理したい場合は少し複雑です。上記のように書いて、同じくシステムイベント「OnBeforeDocFormSave」にフックします。「3」というのはテンプレート変数のIDで、テンプレート変数名では指定できません。

Dreamweaverなどで作ったhtmlファイルをそのままテンプレートにする

Dreamweaverなどでhtmlを組みテンプレート編集画面に貼り付けるのは、細部の調整が続く場合は面倒に感じます。Dreamweaverの高度なテンプレート管理機能を利用して複数のテンプレートを一括管理している場合も、少しの変更のたびに全てのテンプレートを貼り付け直すのは手間がかかります。この場合、Dreamweaverで作ったhtmlファイルをそのまま読み込んでテンプレートとして解釈する方法を用いると便利です。残念ながらdwtファイルは解釈できませんが(スニペットを作ってパス変換すれば可能)、htmlファイルを読み込む前提で以下に方法を説明します。

詳細はこちらのトピックをご覧ください。テンプレート内にphpコードなどを書いて外部ファイルを直接呼び出すことはできないため、テンプレート変数の機能を経由します(スニペットを利用する方法もあります)。MODXのテンプレート変数には「@Bindings」(アットバインディング)と呼ばれる機能があり、これを利用します。「@Bindings」は、リソース編集画面でテンプレート変数に入力する値(通常は文字列)を、他のソースに差し替えるものです。「他のソース」としてどんなものがあるのかというと、htmlファイルやCSVファイルなどの「外部ファイル」、任意のリソース(旧称ドキュメント)、チャンク、php文のインライン実行結果、データベースからの抽出結果などが利用できるようになっています。つまりテキストを入力する代わりに、これらのソースから値を動的に引っ張ってくることができます。

実験的なスニペットとしてdwtincというものもあります。

テンプレート製作にDreamweaverを用いる場合はMODX for Dreamweaverを利用すると便利です。

MODXのタグをパースせず文字列として出力する

MODXの解説記事を書きたい場合などに、MODXタグを書けるようにする必要があります。

$src  = array('[ [', '] ]', '[ !', '! ]', '[ *', '* ]', '[ (', ') ]', '{ {', '} }', '[ +', '+ ]', '[ ~', '~ ]');
$dist = array();
foreach($src as $v){
    $dist[] = str_replace(' ', '', $v);
}
$modx->documentOutput = str_replace($src, $dist, $modx->documentOutput);

上記のようなプラグインを作って、OnWebPagePrerenderイベントに登録します。[ [スニペット名] ]というふうに、半角スペースをはさんでパースを回避します。

会員制サイトを作る

まず「ウェブユーザ」アカウントを必要な人数ぶん作ります。次に、同梱のPersonalizeスニペットを用いて「ログインしている時」「ログインしていない時」の状態をそれぞれ制御します。とりあえず [!Personalize!] と記述するだけでも、ログイン状態を表示できます。

グローバル設定の「グループ管理」を有効にすれば、会員領域を作ってコントロールできます。

ページの公開・非公開を正しくコントロールする

リソースごとの「公開ステータス」と「公開開始日時」「公開終了日時」の関係を正しく理解する必要があります。MODXは公開ステータスにチェックが入ってないと、そのページを公開しません。公開ステータスにチェックを入れるためには、公開開始日時が未来の日時になってないこと・公開終了日時が過去の日時になってないことが必要で、値が空でもかまいません。公開開始日時・公開終了日時の値が条件を満たしてなくても投稿画面上では公開ステータスをオンにすることができますが、リソースを更新保存すると元の状態に戻りますのでご注意ください。公開したつもり・非公開にしたつもりなのに、そのようになっていないという事故が起きる可能性があります。

確実・手軽に公開・非公開にしたい場合は、サイトツリー右クリックのコンテキストメニューを使ってください。コンテキストメニューを使うと、公開開始日時・公開終了日時の値をクリアしたうえで強制的に公開・非公開にします。

サイト内の文字列を大量に一括置換する

Doc Finderモジュールを利用するとよいでしょう。

絶対パス・相対パス

MODXは、通常のサイト構築で用いられるパス表現を3つとも扱うことができます。ただし現時点では、全体の表現を一律に揃えることはできません。

WayfinderやBreadcrumbsは、設置ディレクトリ基準の絶対パスを出力します。TinyMCEでは画像やリンクのパスの表現を3つのうちから選ぶことができ、デフォルトでは設置ディレクトリ基準の相対パスになっています。MODX内蔵のファイルブラウザがTinyMCEに渡すパスは、URL・相対パスのうちいずれかをグローバル設定の「相対パスを渡す」で選択でき、デフォルトではURLが渡されます。渡された値はTinyMCE側で変換・上書きされます。

TinyMCEのようにパス形式を選択できる場合、どの形式がよいかは目的によって異なります。コンテンツとの整合性が正確で問題が起きにくいのは絶対パスやURL、コンテンツデータの可搬性に優れているのは相対パスです。たとえばJavaScriptやAjax技術による特殊な効果を盛り込みたい場合は絶対パスやURLが無難ですし、サブディレクトリでテスト構築したものを本番移行させるような構築フローを組む場合は相対パスが便利です(※baseタグの記述が必要です)。

Dittoは相対パスを出力します(※デフォルトのテンプレートの場合)。サブリソースの一覧として用いることが多いため、通常の静的htmlによるウェブサイト構成ではディレクトリがずれますが、MODXでは親リソースはサブリソースの上位に存在します。静的htmlによるウェブサイト構成の場合は、同じ階層のindex.htmlに一覧の役割を持たせることが多いですが、この点がMODXでは異なっており、パスの設定の違いに影響を受けることなく合理的にリンクを扱うことができます。MODXでは「index」というエイリアス名に特別な意味はありません。

リソースリンク(リンクタグ)は常に相対パスを出力します。絶対パスやURLを出力したい場合は、「/」や[(site_url)]を組み合わせて表現するとよいでしょう。

日常の運用で気をつけるべきこと

「イベントログ」に時々目を通し、想定外のエラーが発生してないか確認しましょう。また、データベースのバックアップはできるだけ定期的にとるようにします。1.0.5J-r9からスナップショット機能が追加されていますので、これを利用すると簡単です。

PR

  • KAGOYA
  • ASP at AKIHABARA Japan
  • CMS AWARDS 2007 Winner
ページトップへ