ラック
Home > CMS > 記事 > 2015年10月 > テーブル(表)を楽に管理したい

テーブル(表)を楽に管理したい

カテゴリ: MODx

前回の続きです。

 

テーブルを楽に管理したい、ということで実装した方法を。

ここでいう「楽に管理したい」というのは、テーブルタグはもちろん、投稿画面の行・列の指定やclass、idの指定など余計なパラメータを一切気にせず、単純に表の中身だけテキストべた打ちで更新したい、ということです。

…せめてCMSの投稿画面くらいで勘弁してくだしあ…とは行かず、こういう仕組みを考えなければならないというのが悲しみですね。

 

ということで、今回自分が考えた方法を以下に記します。

 

目次

  1. テンプレートの作成
  2. テンプレート変数の作成
  3. コンテナを用意
  4. 投稿画面をシンプルに
  5. テーブルの中身をリソースとして作成

もうこれで何をするかは大体想像付きますね。

では、実際に見ていきましょう。

ちなみに、用意した環境は他の件で使用したのと同じXAMPPのMODx Evolution 1.0.14J-R9です。

 

1.テンプレートの作成


今回の手法は、ページタイトルに項目名、テンプレート変数に項目の内容を入力する、という形で実装します。

そのためには、まずテンプレート変数を使用するためのテンプレートを作成する必要があるので、テンプレートを作成します。

実際にこのリソース(ページ)へ飛ぶということは考えていないので、テンプレートの中身は空っぽでも構いません。

ここでは例としてMinimal Templateをコピーしています。(テンプレート名は上記スクショから「table_test」に変更しました)

 

2.テンプレート変数の作成


次に、先ほどのテンプレートに紐付けるテンプレート変数を作成します。

テンプレート変数の名前はここでは「テーブル内容」、入力フォームは「Text」にしました。

これを1.で作成したテンプレートに関連付けます。

 

3.コンテナを用意


次に出力部分を作成します。ここでは「テーブルテスト」という名前、「teble_test」というエイリアスにしました。

一点注意するとすれば、テンプレートは先ほど作成したテンプレートではない、ということです(ここでテンプレート変数に入力するわけではないため)。

 


出力は伝家の宝刀Dittoを使って、テーブルタグをパターンで表示してもらいます。

<table>
[[Ditto?
&parents = 'XXX' //リソースIDがXXXを親とするリソースの中から
&display = '50' //最新50件を表示
&language = 'japanese-utf8' //言語指定
&orderBy = 'createdon ASC' //作成昇順
&tpl = '@CODE:
	<tr>
		<th>[+title+]</th>
		<td>[+テーブル内容+]</td>
	</tr>
' // 表示パターン
]]
</table>

このコンテナ以下にあるリソースのページタイトルと先ほど作成したテンプレート変数をテーブルタグで一覧表示、と。

他のリソースで使いたい場合は、そのリソースの本文の中に上記コードを直接書いてしまうか、チャンクに書いて呼び出すか…いずれにしても、「あるコンテナの下のリソースをDittoで一覧表示させる」ことができればOKです。

 

4.投稿画面をシンプルに


ここでちょっと寄り道。プラグイン「ManagerManager」を使用して、これからページタイトルとテンプレート変数だけを入力するリソースの投稿画面をシンプルにしましょう、というお話。

本文を一切書かないのに本文投稿画面は必要ないですし。

ということで、チャンクの「mm_rules」の末尾に以下を追記して保存。

mm_hideFields('longtitle,description,link_attributes,introtext,template,menutitle,parent,is_folder,is_richtext,log,keywords,metatags,content', '', '3'); //テンプレートID=3(=テーブルレイアウト用テンプレート)に摘要。タイトル、テンプレート変数、メニューオーダーなど必要最低限以外を画面から隠す
mm_renameField('pagetitle', '項目名', '', '3'); //管理画面の「タイトル」という表示を「項目名」に変更

コメントの通りですが、これで必要ない画面を隠し、ページタイトルを別の名前で表示するように変更を加えました。

パラメータの最後の"3"は1.でMinimap Templateをコピーして作成したテンプレート「table_test」のテンプレートIDですので、必要に応じてIDを変更してください。

(しかしこれだと誤って他のリソースでテンプレートをtable_testにすると戻せなくなるので、テンプレート選択も残しておいた方が良いかも…)

 

5.テーブルの中身をリソースとして作成


以上で準備が整ったので、実際にテーブルに項目を追加します。

3.で作成したコンテナの下にサブリソースとしてテーブルの項目を追加していきます。

ここでは「テーブルターニング」というページタイトルのリソースを作成していますが…

ここで使用テンプレートを1.で作成した「table_test」に変更すると…。

 


4.で行った設定により、不要な項目が消えました。ページタイトル(画面上では「リソース名」)も「項目名」に変わっていますね。

必要なのは「項目名」と2.で作成したテンプレート変数「テーブル内容」です。

これで保存。

 


同様にもう1つ「レインボーテーブル」というリソースを追加しました。

 


これでサイト(ここでは「テーブルテスト」のコンテナのページ)を表示すると、入力した内容でテーブル(表)ができています。

このようにして、テーブルテストの下にサブリソースとして項目を追加していけば、表の行を増やしていくことができます。

サブリソースを編集すればテーブルの中身を変えられますし、非公開にしたり削除したりすればテーブルからその項目が消えます。

 

このようにすれば、必要なフィールドにテキストを打ち込むだけで表を編集することができます。

基本的に列は固定ですが、テンプレート変数を増やしてDittoの項目も追加してあげれば列の追加も可能です。

 

項目を編集する度にリソースを開かないといけなかったり、新規追加の際はテンプレートを選ばないといけなかったり(他の項目をコピーするという手はありますが)と若干不便なところもあります。

しかしながら、表の管理という面で見ればhtmlのテーブルタグを一切気にしなくて済む、というだけでもだいぶ違うのではないでしょうか?

(このアイディア自体は車輪の再発明だとは思うのですが、今後のためにメモ。)

タグ: テンプレート変数, スニペット, チャンク

 



関連する記事一覧