2015年12月アーカイブ

ここが変だよ Movable Type シリーズの続きです。「ニュースカテゴリに属する記事をトップページに最新10件表示して」で、後で追加で「非表示フラグ設定できるようにしてよ」って。もう、あるある過ぎますよね。

そこで、みんな大好きカスタムフィールド。チェックボックスフィールドをひとつ作ってフラグ付きを除外するとか、やるじゃないですか。で、以下のようにする。

チェックボックスカスタムフィールドを追加する

<mt:Entries limit="10" field:entrynotop="0" category="ニュース">

</mt:Entries>

実はこいつは上手くいかない。

上手く行きますよね? 上手く行くと思うでしょ? でもこれ実は上手く行かないんだよ既に記事が入っていると。なぜならカスタムフィールドを追加で記事に対して作成しても、既に存在する記事フィールドには値は入ってくれんのである。じゃぁ、「表示フラグ」に変更して、初期値を1(checked) にしたら、ってこれも同じですわ。ね、やはりお前らのMTは間違っているでしょ?

そんな時のために、案件開始時には mt_dir/tools の下にひとつスクリプトを置いておくといいです。クライアント名とかプロジェクト名とかサイト名でいいです。あなたがビートルズのサイトを構築しているなら

mt_dir/tools/Beatles

のようなファイルです。ファイルの内容は以下でいいです。気になる人は package MT::Tool::Foo; を package MT::Tool:: Beatles; とかに変更すればいい。

https://gist.github.com/alfasado/4167792

#!/usr/bin/perl
package MT::Tool::Foo;
use strict;
use warnings;
use File::Spec;
use FindBin;
use lib map File::Spec->catdir( $FindBin::Bin, File::Spec->updir, $_ ), qw/lib extlib/;
use base qw( MT::Tool );

sub usage { '--debug 1' }

sub help {
    return q {
        Description Foo.
        --debug 1
    };
}

my ( $debug );

sub options {
    return (
        'debug=s'   => \$debug,
    );
}

sub main {
    my $class = shift;
    my ( $verbose ) = $class->SUPER::main( @_ );
    if ( $debug ) {
        print 'Some debug message.' ."\n";
    }
    # Do something.
    1;
}

__PACKAGE__->main() unless caller;

で、今回の要件なら main サブルーチンに以下のように書いて,

my $field = 'field.entrynotop';
my $iter = MT::Entry->load_iter( { class => 'entry' } );
while ( my $obj = $iter->() ) {
    if (! $obj->$field ) {
        $obj->$f( 0 );
        $obj->save or die $obj->errstr;
    }
}

サーバーにログインして以下を実行すればOK。今後追加される記事は値が空になることはないしね。

$ cd path/to/mt_dir 
$ perl tools/Beatles

他にも色々使えるよ。

  • ブログで作成していたテンプレートを全部グローバルテンプレートに移し替えたい
  • カテゴリの指定が聞いてた話しと途中で変わってしまった
  • 大量のファイルをアップしておいてまとめてアイテムに登録したい
  • アップしちゃいけないファイルがアップされているので纏めて削除したいがアイテムが1万件くらいある

とかね。まー要件変更とかあるあるだから、スクリプト置いておいて簡単な処理が書けるようにしておけば、芸は身を助けますよ。これ本当。

KeynoteScreenSnapz001

この記事は Movable Type Advent Calendar 2015 の最終日の記事です。

いや、今年も色々ありましたが実は地味に今年のトピックは Movable Type でテンプレートをフル実装する機会に恵まれたことですね。自分のブログ以外ではそんな機会はこれまでなかったのです。しかも PowerCMS じゃありません。予算の関係もあり、今回は Movable Type で行きましょう、ということになったのです。

本題に入る前に少し MTDDC の続きを

日本語変数名の使いどころ

日本語変数名の話しを少ししたよね。実際に有用なシーンに出会ったので紹介しておく。多言語サイトで。

<mt:BlogLanguage setvar="language">
<mt:If name="language" eq="ja">
    <mt:Setvars>
        サイト・パス=/jp/
        ホーム=ホーム
        最新ニュース=最新ニュース
        関連ニュース=関連ニュース
        年度=年度
        キーワード検索=キーワード検索
        サイト内検索=サイト内検索
    </mt:Setvars>
<mt:Else>
    <mt:Setvars>
        サイト・パス=/en/
        ホーム=Home
        最新ニュース=Latest News
        関連ニュース=Related News
        年度=Fiscal
        キーワード検索=Keyword Search
        サイト内検索=Search
    </mt:Setvars>
</mt:If>

<h1><mt:Var name="キーワード検索"></h1>

超わかりやすくないですかい? <mt:Var name="keyword_search_title"> みたいにわざわざ指定する必要ないんだから。同じテンプレートで行けるし、わざわざたくさんのカスタムフィールドを作る必要もない。比較や変数渡しの必要がなければ日本語でOK。

SetVarTemplate の使いどころ

Movable Type Advent Calendar の初日で BUNさんがちょうど書いていましたが、function(関数)のような形で使いまわしできるのがこのタグの良いところです。

複雑な分岐ロジックでなくとも、以下のようなテンプレートを直に分岐等を入れながら書くと、コーディングに修正が入った時の修正箇所が多くなります。

<mt:SetvarTemplate name="breadcrumbs_tmpl" note="パンくずのマークアップ">
<mt:Unless name="no_image"><img class="breadcrumb" src="/assets/img/common/breadcrumb.png" alt=""></mt:Unless>
<mt:If name="breadcrumbs_url">
<a class="breadcrumb" href="<mt:Var name="breadcrumbs_url">">
</mt:If>
<mt:Var name="breadcrumbs_title">
<mt:If name="breadcrumbs_url"></a>
</mt:If>
</mt:SetvarTemplate>

<mt:Var name="breadcrumbs_tmpl" breadcrumbs_url="$url" breadcrumbs_title="$title">

(※コーディングがどうとか言うなよ。俺が書いたんじゃねーんだ。) 要するに、URLとタイトル、画像の有無を渡せばパンくずのマークアップで出力できるというもの。

ここから本題。やはりお前らのMTは間違っている!

タイトルは釣り本気ですが、おおまかなテンプレート構築のフローを書きながらどんな風に作ったのかご紹介しつつ、何が間違っているのかについて考えていきましょう。

※ここで紹介したツール群は、年始に PowerCMS およびそれ以外の方法で(単品やクラウドサービスなど)でご提供する予定です。一部については既に公開しているものもあります。

コーディング素材を受け取って、MTのテンプレートに登録する

まず、制作会社から上がってきたコーディングデータと画像等の素材一式をMTのインデックステンプレートやアイテムに登録します。いくらなんでも自分でチマチマやるのは何なので、新人のデザイナーに「ここからこうやって登録...」といいかけて思ったのです。ハッ! いくら新人でもこんな単純作業に時間を割かせて良いものだろうか。今回の案件ではコーディングに SSIを利用していました。公開サイトでは動的なしくみは使えない制約があったので、ま、MTIncludeにすればええやと思いつつ...

納品されたコーディングデータ素材

とりあえずプラグインを作るところから始めました。でき上がったのがこいつです。

共通アイテム登録画面

ZIPファイルに素材を固めて管理画面からアップロードすると拡張子によってテキストファイル系はテンプレートに(インデックスか、テンプレートモジュールに)、画像等はアイテムに(@commonタグ付きで)登録してくれるものです。インクルードファイルをモジュールに、インクルード元ファイルをインデックス・テンプレートに登録すると、ちゃんと MTIncludeに変換してくれるんですぜ。

テンプレート編集画面の不便いろいろ

これはもう色々あるんですが、最初に大きな声で言っておきたいのは「お前ら声が小さい」「お前ら文字が小さい!」。デフォルトのフォントサイズは14ポイントです。で、これ設定とかで変えられません。アクセシビリティを何だと思ってるのか。年寄りを何だと思っているのか。

ということで次に作ったのがこいつです。ついでに最新の CodeMirror を入れてキーバインディングやスキンを変更できるようにしました。で、僕は MTのテンプレートにおいては「行を折り返す派」です!

テンプレート編集の設定

どうです? 見やすくなったでしょ?

改良後のテンプレートエディタ

次に手をつけたのはウィジェットとメモ欄です。メモ欄のことは MTDDCで話したので今日は詳しく触れませんが、ここ ( alfasado/mt-plugin-template-note ) からダウンロードできます改良されたテンプレート編集画面

しかしそれよりも何よりも「インクルードテンプレート」ウィジェットがあるのに「インクルードされているテンプレート」ウィジェットがないじゃん!

ということで次にこれを作りました。全テンプレートをロードするのでこれ、非同期読み込みです。ええ、これ書くために jQuery 勉強したんだぜマジで。

リンクされているテンプレートウィジェット

これで完璧だよね、とか自己満足して作業進めてたらそれでも足りない何かに気づいたのです。グローバルテンプレートへの移動が不便! そんなこともあろうかと、こいつ ((MT5)ユーザーダッシュボードに左メニューを追加する。 - Junnama Online) を入れておいたのです。でれでもテンプレート編集してる時だし移動したいのは。ということで、次にこれ作ったのさ。テンプレートをブックマーク保存できて、一覧画面、編集画面の右側のウィジェットに表示されるように。

ブックマークウィジェット

グローバルテンプレートの改良

(追記)グローバルテンプレート嫌いな人いるよとなんてうだけど、多言語サイトの共通テンプレートとかどこかのブログに置くのも気持ち悪いし、ブログIDが開発と本番で変わることってざらにあるのだからやはりそういうのはグローバルテンプレートが素直だと思う。ウェブサイトの配下にブログって手もあるけど、ひとつのサイトなのにブログ数が多いのってスマートじゃないと思う。いろんな意味で。(追記ここまで)

Twitter 検索してみたら色々出てくるじゃん。

あれ、途中からリビジョンの話しになったよ。グローバルテンプレートにはリビジョンがない。

2015年ですぜこれ。MT Studioで対応してたので、そいつを切り出して移植。ついでに Diffを見られるようにした(グローバルテンプレートに限らない)。

グローバルテンプレートのリビジョン対応

続いてこれ。

これ見たの、東京から新大阪へ向かう新幹線の中。京都に着いたあたりで見たんだよね。で、新大阪に着くまでにかけるやろかと思って、書けた。

シェルで、また敷居が高いとか何とか、ちゃんとUIも作っといた。

テンプレート一覧画面から実行できる

てか、そもそもテーマが当てられた時にリビジョンが保存されるようにしておいた。

これもなぁ。。。多分MT4で導入された MTInclude多様のテンプレートでページの先頭に空行たくさん入る問題の解決のためなんだろうが、これこそ安易な解決をするな、の好例だと思う。これについての対処としては、コメントタグを先頭に入れて正規表現で置換と言う美しくない解決を(今回は)した。

納品ドキュメントを作りやすく

乗ってきたのでついでに作った。というか上半期末の全社会議での社員の発表で話題に上がっていたので作った。テンプレートに「メモ」を付けておけば、それを含めて一覧に表示してくれる。HTMLで生成したけど、PDF化すればいいんじゃないかと(CSVも考えたけどこっちのほうが現実的っぽかった)。

テンプレートの納品ドキュメント

いい加減疲れてきた。他にも色々作った。他の Advent Calendar に書いたネタ( Authoring Tool Accessibility Guidelines の観点から CMSの画像挿入フローを検証する - Junnama Online )ですが、リッチテキストエディタと画像挿入のところを何とかしたくて リッチテキストエディタ及びエディタへのアイテム挿入に関する機能を拡張する Advanced Editorというプラグインを作った。

だいたい、記事編集画面の title要素は何だ ?

この画面キャプチャ見て何とも思いませんか?

記事編集画面の title要素が不適切。全ての記事で「記事の編集 - ブログ名 - ソフト名」となっている

アクセシビリティもそうだし、そもそもウィンドウやタブをいっぱい開いて作業してる時に何が何だかわかんないと思うんだがこれ、いつからなの? 誰も指摘しなかったのだろうか。プラグイン書いといたので、ご自由に使ってください。

ヒントは現場に転がっているし、声を上げることがコミュニティへの貢献に繋がる

このエントリで言いたかったことは、まさにこの一文なのです。MTQ でも FogBugz でも日本語でもOK。お前ら本当に Data APIが欲しかったの? いや、 Data APIが駄目だとか言ってるわけではなくて、普段 Movable Type 乗りまわしてるのってテンプレート、サイト構築してる我々じゃないか。何も考えずに目の前の仕事を進めるのではなく、考えるヒントは日常の仕事の中に転がっている。“事件は会議室で起こっているんじゃない、現場で起こってるんだ” ってことを再認識した師走の午後でした。

それでは、メリークリスマス、良いお年をお迎えください。

この記事は Web Accessibility Advent Calendar 2015 の19日目の記事です。

職業柄 CMS を扱うことが日常になっているわけですが、私たちにはCMSから出力されるコンテンツのウェブアクセシビリティを確保することが求められます。

テンプレートをアクセシブルにすれば後はコンテンツ登録者に委ねられるというのは一見最もな主張に聞こえますが、アクセシブルなコンテンツ入力がしやすいよう、もしくはそこにコンテンツ登録者が注意を払えるように入力インターフェイスを設計するのはCMS開発者の義務だと言えるでしょう。

W3Cには Authoring Tool Accessibility Guidelines (以後ATAG) というガイドラインがあります。文字通り、オーサリングツールのアクセシビリティに関するガイドラインです。

このガイドラインでは、オーサリングツールそのものがアクセシブルであることはもちろん、オーザリングツールがアクセシブルなコンテンツを作成できるようにすること、そのためのガイドラインが前者(オーサリングツールそのものがアクセシブルであること)については別の機会に譲り(ここが難しくて、自分たちもできていないという認識はあります)、ここでは後者、「オーザリングツールがアクセシブルなコンテンツを作成できるようにする」部分、しかも一点、画像の代替テキストを指定するためのCMSの実装について少しだけ考察してみます。

ATAGには Guideline B.2.3: Assist authors with managing alternative (非テキストコンテンツの代替コンテンツを管理して著者を支援する) とあります。ざっくり紹介します(訳には誤りがある可能性があります)。

  • 不適切に生成された代替コンテンツは、ウェブコンテンツのアクセシビリティの問題を発生させ、アクセシビリティチェックを妨げる可能性があります。
  • 代替コンテンツが編集可能であること。オーサリングツールが非テキストコンテンツを追加するための機能を提供する場合は、コンテンツ作成者は、非テキストコンテンツのためのプログラムで関連付けられている代替テキストを変更することができます。
  • 非テキストコンテンツが、装飾、フォーマッティング、不可視またはCAPTCHAである時に例外を指定できること。
  • 代替テキスト生成を自動化する場合、例えば「画像」や、ファイル名、ファイル形式等であってはいけません。また、自動で生成されることをコンテンツ作成者が拒否できるようにしてください(勝手に自動生成しない、キャンセルできる)。
  • 指定した代替テキストは保存されており、同じ非テキストコンテンツが再利用された場合に代替テキストが自動的にオーサリングツールによって提案されています。そしてその保存された代替テキストを編集または削除するオプションがあります。

WYSIWYG リッチテキストエディタでは代替テキストを確認できない

WYSIWYGリッチテキストエディタ

CMSの多くで採用されている WYSIWYG リッチテキストエディタでは画像の代替テキストを視覚的に確認することができません。WYSIWYG エディタは ATAG の対象とされています。

WYSIWYG エディタにおける画像挿入の課題は以下の2点に集約されると思います。

  • 画像挿入時における代替テキストの指定インターフェイス
  • 画像挿入後の代替テキストの確認、修正方法

WordPress の画像の挿入フロー

WordPress のファイルアップロードインターフェイス

さて、ここではCMSへの画像の挿入フローの例として、WordPress と Movable Type を取り上げます。まずは WordPress。最新のWordPress(4.4)では、投稿画面からメディアの挿入を選択した後、ドラッグ&ドロップで画像をアップロードできます(もちろんファイル選択してアップロードすることもできます。ドラッグ&ドロップのみではそれ自体が非アクセシブルになってしまいます)。

WordPress のメディア挿入インターフェイス

メディア挿入のインターフェイスでは「代替テキスト」の入力欄があります。アップロードした時点では、値は入っていません。唯一残念なのはまとめての指定ができない点でしょうか。選択状態の画像の代替テキストを選択状態を変えながら一つ一つ指定していくことになります。

コントロールキー+クリックでエディタ上から画像のプロパティを編集できる

エディタからコントロールキー+クリックで画像のプロパティを編集できます。一度指定した代替テキストは保存されており、次回同じ画像を挿入する際にも初期値として指定されており、このあたりはATAGに沿っていると言えます。

ATAGに照らし合わせて唯一問題となっている点は、代替テキストが空の時にファイルのbasename(拡張子を除いたファイル名)が入ってしまう点です。つまり、代替テキストフィールドが空の時、タイトルフィールドの値が入ってしまうのです。タイトル欄を空欄にすれば、alt属性は空になりますが、これは少々わかりにくい実装です。代替テキストというラベルのついているフィールドが空なのに、自動生成された値が入ってします。これはガイドラインに沿っていない点かと思います。

<img class="alignnone size-medium wp-image-16" src="http://localhost/wordpress/wp-content/uploads/2015/12/banner-sample-02-300x100.gif" alt="banner-sample-02" width="300" height="100" />

それでも、WordPress の画像の挿入に関する機能よく考えられている印象でした。

Movable Type の画像の挿入フロー

Movable Type のファイルアップロードインターフェイス

最新のMovable Type(6.2)では、投稿画面からメディアの挿入を選択した後、ドラッグ&ドロップで画像をアップロードできます(もちろんファイル選択してアップロードすることもできます。このあたりはWordPressと同じですね)。

Movable Typeの画像挿入インターフェイス

問題は次のステップです。 Movable Type の場合、アップロード後に各画像の「編集」をクリックして画像のプロパティを指定していかなければなりません。1点ずつ指定しなければならないのは WordPressと同じですが画面遷移が伴うだけひと手間多くかかります。また、ここで「挿入」ボタンをクリックしてしまうと、画像の代替テキストを指定することができません。

Movable Type の画像挿入インターフェイスの次のステップ。代替テキストの指定ができない。

貼り付け後、HTML編集モードにして代替テキストを指定することはできます。尚、Movable Type の場合、ラベルを空にすれば alt属性値は空になります。ここはガイドラインに沿った挙動と言えます。

尚、WordPressにあった、貼り付け済みの画像のプロパティをコントロール+クリックで再編集する機能は Movable Type にはありません(これについては後述します)。

PowerCMS の場合

最後に、PowerCMS の場合です。PowerCMS のベースエンジンは Movable Type ですから、基本的には Movable Type の画像挿入フローを継承していますが、代替テキスト指定については独自に機能を追加しています。詳細は以下の記事をご覧下さい。

PowerCMS の画像挿入インターフェース

また、WordPress にあって Movable Type にないエディタ上で画像のプロパティを編集する方法ですが、システム >PowerCMS設定 >TinyMCE設定で advanced_buttons1 に「image」を追加することでできるようになります。Movable Type でも plugins に「advimage」を追加し、「image」を追加することでできるようになります(この機能から代替テキストを修正した場合、この値を次回同じ画像を利用するときの推奨値として利用してくれない点は課題として残りますが)。

TinyMCE設定画面

エディタから画像のプロパティを編集できる

PowerCMS / Movable Type のオプションプラグインである PowerCMS 8341では別途「画像の検証」ボタンがあり、画像と画像の代替テキストを一覧化して表示できます。画面キャプチャのように、不適切な値(例:ファイル名)は指摘してくれ、この画面から纏めて修正を可能にしています。

PowerCMS8341の画像の検証画面

尚、PowerCMSではサイドバーへのドラッグ&ドロップで画像をアップロードする際に、日本語ファイル名を指定しておくと、拡張子を削除した日本語のファイル名が代替テキストとして登録される裏技? があります。

Authoring Tool Accessibility Guidelines 目線で CMSを再評価する

今年は MTDDC をはじめとして CMS夏祭り(東京/大阪)とかCMSを比較したり座談会のようなイベントに本当に多数呼んでいただいたのですが、ウェブアクセシビリティに関する質問をされたことは一度もありませんでした。CMS は ATAGで定義されているオーサリングツールに他なりません。こういった視点で CMSを再評価するような場があってもいいのではないでしょうか。他の CMS のエバンジェリストの方の見解も是非おきかせください。現場からは、以上です。

Facebook

Twitter

このアーカイブについて

このページには、2015年12月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2015年11月です。

次のアーカイブは2016年1月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 6.2.6