a-blog cms Training Camp 2019 Springに参加しました

2019年5月17日・18日の二日間、今年も半年に一度の「a-blog cms Training Camp 2019 Spring」に参加してきました。

https://ablogcms.doorkeeper.jp/events/87478/

前回は東京での開催となりましたが、今年の春はいつもの国際センターとベースキャンプ名古屋が会場です。
参加するともらえる、公式Tシャツも新しくなったので早速二日目に着ました。

一週間遅れになりましたが、イベントの主な内容と、最近のa-blog cmsコミュニティの動向をレポートします。


a-blog cms awards 2019授賞式



今回のCampの最大の見どころは「a-blog cms awards 2019」の結果発表でした。
a-blog cmsの公開事例をレポートも含め募集する、という、これまでにない本格的な公募企画です。a-blog cmsに限らず、CMSの構築を仕事にしている方なら参考になる事例集サイトにもなりました。ぜひ、サイトを見てみてください。

https://www.a-blogcms.jp/awards/

受賞した4サイトの雑感としては以下です。

影響?

この企画があった影響なのか、イベントの「ユーザー発表」の内容がいつもと大きく変わりました。
いつもは最新事例の紹介が中心ですが、新しい技術を試した実験的なレポートや、a-blog cmsを使い始めて三ヶ月の感想など、未来を見ている発表が多かったです。こんな事ができるのか…!という驚きも多く、活気があるCampになったと感じます。

リーグラフィさん


写真:水越祐介(株式会社リーグラフィ)

リーグラフィの水越さん

私は「いえズーム」で応募しましたが見事に落選しました。全力でレポートを書いただけに悔しくて商品のiPad Proを自腹で買ってしまったくらいです。

https://www.a-blogcms.jp/awards/case/iezoom.html

ですが、同じ札幌のリーグラフィさんがデザイン賞を受賞したのはとてもうれしいことでした。
リーグラフィの水越さんと平澤さんは、CSS Nite in Sapporoのサイトを共同運営していることもあり、だいぶ前からa-blog cmsの勉強会や協業を通して情報交換をしています。

今回、リーグラフィさんがawardsにたくさん素晴らしい事例を応募したので、いろいろな事情で勉強会の維持が難しい北海道のウェブ業界でも、検索などを通して注目してもらえるだろう、と願っています。

すずきカレーさん

ユーザビリティ賞を受賞した「リフォームのヤマハナ」を制作したのは愛知県の制作会社、ルーコの鈴木(すずきカレー)さんです。
汎用テーマを使用しているので一見オーソドックスですが、その裏側はCMS構築をしている人なら驚くような気配りにあふれています。「a-blog cmsは、PHPを書かずに高度な管理画面のカスタマイズが可能である」という事例でもあります。

鈴木さんは、かなりの古参ユーザーです。a-blog cmsに関する有用な記事を多数公開し、フォーラムでの投稿数もダントツで多いです。…が、非常に謙虚な人で、いつも申し訳なさそうにしていて、目立とうとしません。
先日、鈴木さんのインタビューが公開されましたが、やっぱり自分のことを「パワー控えめ」と言っています。awards受賞で、すずきカレーさんがもっと注目されればいいなあと思っています。

「 a-blog cms がクライアントの架け橋に。」”パワー控えめ”でも確かなスキルと信頼関係を築ける | ユーザーインタビュー

ユーザー発表の感想

非常に多くの発表があったので、一部の感想のみ書きます。すみません。

Ver.2.10について(アップルップル伊藤さん)

a-blog cmsは、アップデートが活発なCMSです。伊藤さんによる最新バージョンの紹介を毎回楽しみにしています。   2.9系までは新機能の追加が多かったのですが、2.10は根幹に関わる既存機能の見直しが行われました。

  • メディア機能の拡張
  • 管理画面スタイルシートの改良
  • サブカテゴリーの追加
  • コンフィグセットの追加(コンフィグの使い回しが可能に)

私は既にいくつかのサイトを2.10にアップデートしていますが、これだけの変更をして、テーマへの影響が最小限だったのがすごいです。

メディア機能は、WordPressと遜色ない機能になりました。伊藤さんのスライドを抜粋すると以下のとおりです。

  • 画像・ファイルの一元管理
  • メディア機能画面で画像の編集が可能になった
  • トリミングの際に被写体を指定できる
  • SVGに対応
  • ファイルに公開ステータスを追加
  • メディアを使うMedia_Bannerモジュールの追加

ただし、既存の画像ユニットからメディアユニットへの移行は工数がかかるし、両方を混在させると混乱のもとになるので、必ずしも採用しなくても良い、新規案件ならアリかも、といった話をされていました。

ここぞというときに使えるCSVインポート(ヘルツ筒井さん)

筒井さんの発表は、a-blog cmsのCSVインポートの事例と、活用する利点についてでした。
a-blog cmsはCSVインポート機能を標準で搭載しています。もちろん、プラグインは不要です!カスタムフィールドはもちろん、テキストやマークダウンであれば、ユニットとして移行することもできます。

他のCMSで運用されていた、コンテンツが多いサイトの移行の際は、CSVインポートが活躍します。また、新規追加だけでなく更新も可能なので、カスタムフィールドをスプレッドシートで編集して一気に書き換えるということもできます。

カスタムフィールドのデータを表敬式でPDFに書き出す方法(SUZULABO太田さん)

まったく知らなかったのですが、テキスト形式でデータを送ると、クライアントサイドでPDFを生成するスクリプトがあるのだそうです。

クライアントサイドでPDFを生成できる「pdfmake」を使ってみる | Tips Note by TAM

この「pdfmake」のデータをa-blog cmsのカスタムフィールドで生成して、表形式のPDFにして返すという事例の発表でした。
複雑な会員情報や食品のアレルギー情報の提供などをするコンテンツに大いに使えそうな技術で、久しぶりに何か理由をつけて実装してみたくなる発表でした。

a-blog cmsの初心者向けコンテンツを整備してる話(アップルップル井斉さん)

開発元の一番若い社員さんは、二年目の井斉さんと菅原さんです。今回は井斉さんの発表について書こうと思います。

井斉さんはこの一年間、a-blog cms関連の初心者が見るコンテンツの整備を進めていました。アップルップルに入社して、自分が学習をはじめたときに、チュートリアルのページ構成がわかりにくかったことがきっかけだったそうです。

プログラミング的思考に慣れていたり、他のCMSで豊富な構築経験があると、ちょっとくらい、文章の流れがずれていても理解できるようになります。また、書く側も反復学習とか文章の構造にに視点をおいて書くようになります。
ですが、そういう補完ができない初心者には、初心者向けの文書構造を考える必要があるのです。そういった、初心者の目線をまだ覚えている人にしかできない施策を説明されていました。

製品紹介動画は、すべてAdobe XDのアニメーションで作ったもので、ナレーションも井斉さん自身が声を当てている力作です。

もうひとりの菅原さんの発表も、すずきカレーさんの管理画面カスタマイズの基礎を解説した内容なので、a-blog cmsがこれからな人は見てほしいです。

私の1年間とa-blog cmsだからできる簡単UI対応 - Speaker Deck

グループワーク「a-blog cms川柳」

Campでは、毎回適当に班決めをして行う、グループワークがあります。昨年春はクイズ、昨年秋はかるた大会で、今年はどうなるのかと思ったら「川柳」でした。

限られた文字数で意味が通る文章にして、かつ、ウケを狙うというのはけっこう難しいです。私と、大阪のエバンジェリストの坂本さんがいる班ではこうなりました。3つのうち2つが内輪ネタです。

田村しか 使っていない レイアウト
だけだと、ワクグミの田村さんをdisっているようにしか見えませんが、レイアウト機能は新規作成の工数が高すぎて、頻繁に使用している田村さんしか有効活用できていないので、他のCMSのウィジェットのような、もっとシンプルな機能にしてほしいという要望が込められています。
私個人は、サイトの根幹に関わる設定が、エクスポートしにくいデータベース依存になってしまうという懸念もあります。

内輪ネタって、コミュニティの信頼関係を伝えるものでもありますが、躊躇います。初心者が多いWordPressコミュニティでは、よく「内輪ネタが多すぎてひく」という感想があって悩んだりしていると聞きます。私と坂本さんは、同じ班のはじめて参加した人たちに言葉の整理をしてもらったり、川柳に出てきた人のことを紹介したりしていました。

なお優勝は「その機能 有償ならば できますよ?」でした…
大規模案件あるあるですね…

私にとってのCamp


川邉さんの描く、謎のユルいイラストのファンです


今回は、関わっている人たちを軸にCampのレポートを書きました。ああまた長くなった。4時間もかかっています。

私が半年に一度、遠方から参加している理由は、もちろん最新情報を得るためでもありますが、私の精神的健康のためです。私が日々自宅から配信していることが、他のユーザーに届いていることを確認するのが目的になりつつあるのです。

金沢の15VISIONのデザイナー、川邉さんはウェブ制作だけでなく、商業漫画、イラスト、動画、最近はPythonにまで手を出しはじめている人です。
ですが、私について「うぇびんさんは、金沢でa-blog cmsの勉強会があることをTwitterで教えてくれて、それがきっかけでa-blog cmsに出会って、15VISIONに入った」と言います。川邉さんの最近のスキルを見るにつけ恐縮してしまいます。

それでも、こうして私が札幌でコツコツa-blog cmsの情報共有を続けていることが、日本の誰かに届いているというのはうれしくもありますし、今後も続けると思います。今回も「Twitterでa-blog cms関係のツイートを見ていたら悟空みたいにワクワクしてきた!」と言って参加された方がいました。

a-blog cmsはもうすぐ、リリース10年になります。既に国内のCMSでは屈指の機能とコミュニティを有している、安定したCMSになりました。
興味がありましたら次は8月くらいになりそうですが、札幌のCMS Mix「a-blog cmsの回」に来てください。
次回のa-blog cms Traning Campは11月ですよ!


投稿者名 うぇびん 投稿日時 2019年05月25日 | Permalink

クイズメーカーでWordPressとMTとa-blog cmsのクイズを作った感想


今日からウェビングスタジオの2019年の営業開始です。宜しくお願いいたします。

今年もいろいろとCMSで変わったことをするつもりですが、正月休みにさっそくやっていました。
簡単にクイズを作れるサービス「クイズメーカー」で、WordPressとMovable Typeとa-blog cmsの横断知識がないと満点を取れないというクイズを作って公開しています。

すべての知識がなくても、どれかが詳しければ6割は正解できるようにしています。興味がある方は挑戦してみてください。

https://quiz-maker.site/quiz/play/JtfVPB20190102113456

裏付けを取る

軽い気持ちで作り始めたものの、10問揃うのには丸二日かかりました。問題が正しいかの裏付けを取らなくてはならなかったからです。

例えば4問目の「以下のうち、初期状態でダッシュボードに『最近の投稿』が表示されているCMSはどれか。」はすべてのCMSの最新バージョンのダッシュボードをチェックしなくてはいけませんでした。自社開発のa-blog cmsは、しれっと機能が増えていたりするので…

それを逆利用したひっかけ問題もあります。

思ったより正解率が低い

横断知識が必要なものの、すべて選択方式にするなど、個人的には割と簡単にしたつもりでした…が、正解率は現時点で40%くらいです。ううむ、問題文が分かりづらかったのだろうか。正直すまんかった。

WordPressの基本用語を問う1問目の回答率が、これを書いている時点で33%でした。
私は勉強会で、初心者の人には用語は無理に覚えなくていいと話しています。しかし実務で頻繁に使うようになり、テクニカルディレクションをする場合は話は別です。基本用語の正確な使用は、資料作成の際に、読み手=更新担当者の理解度に直結します。MTユーザーが多かったのかな?と思いつつも、この結果はちょっと残念です。

全く同じ機能は少ない

横断知識を問う問題を作りはじめた段階で、CMS間で機能の概要は同じでも、完全に同じとは限らないということに気付いてけっこう悩みました。

特にテンプレートタグは、細かいオプションが異なるとか、適用範囲が異なるとかの障害が多く、思ったより問題を作ることができませんでした。「これはどのCMSのタグ?」なんて簡単すぎますし…

10問目の問題文に「各CMSの記事中には、常に一点の画像もしくはアイキャッチが存在する前提とする。また、属性は無視する。」という冗長な前提が書いてあるのもそのためです。WordPressのthe_post_thumbnail関数は属性も出力するためです。
更に細かいことを言うと、10問目のMovable Typeは、このタグだけでは期待した動作にはなりません。前後を「記事中にアップロードされたアセットを呼び出す」ブロックタグで囲む必要があります。ここで間違えて「ファンクションタグ」と書こうとしてMovable Typeの公式ドキュメントを調べに行ったのは内緒です。

「クイズを作る」というブレインストーミング

このような高難度クイズになってしまいましたが、せっかくなのでもっとたくさんの人にやってみてほしいです。

クイズを作りながら「CMS間の横断知識を書いたサイト」を作るための構想を練っていました。これは数年前から考えていたことで、「○○をするには△△のCMSでどのようにすればよいか」というのをまとめたいのです。クイズのような軽いものは、ちょうどいいブレストになるなあと思いました。

何かをしたことをきっかけに、新しいアイディアが芋づる式に出てくるかもしれません。迷いも多いですが、私もいろいろ手を動かしてみようとおもいます。


投稿者名 うぇびん 投稿日時 2019年01月07日 | Permalink

a-blog cmsの、include・extendの実案件での活用について

これは、a-blog cms Advent Calendar 2018の12日目の記事です。
a-blog cms Advent Calendar 2018 - Adventar

今回は、かなり制作者向けの記事です。a-blog cmsを利用していても、運用やディレクションが中心の方には、少し難しい内容であることを前置きしておきます。ですが、テーマの制作をしている方は、ぜひ読んでいただけるとうれしいです。

はじめに

北海道住宅新聞社さんの情報サイト「いえズーム」の管理をはじめてから、一年半くらい経ちます。

【iezoom】(いえズーム)北海道の住宅会社選び | いえズーム(iezoom)

いえズームの制作をはじめた頃は、「includeの変数渡し」「extendによるコードの継承」はリリースされていませんでした(バージョン2.8.0から)。 旧来のインクルードを使用したまま改修を重ねていたら、テーマがカオス化してきたこともあり、新しい機能を使用してコード整理をしています。

新しい機能のそれぞれの特徴と、いえズームでの実際の利用場面を紹介します。

includeの変数渡し

概要

旧来のインクルードは、SSI風の書式で、読み込むファイル名を指示するのみのシンプルなものでした。

<!--#include file="/path/to/filename"-->

しかし、2.8以降では、JSON風の書式で、読み込み先で使用できる独自変数を渡せるようになっています。

@include("/path/to/filename", {"key": "value", "key2": "value2"})

詳細な仕様解説は公式ドキュメントを参照ください。
インクルード | テンプレート | ドキュメント | a-blog cms developer

構造図

図で解説すると以下の通りです。 「sample_01.html」と「sample_02.html」は同じパーツ、module.htmlを読み込んでいますが、変数「button」の値が異なるため、実際に表示されるコードが一部変わります。 「sample_01.html」では、新着記事一覧の下に「詳しくはこちら」ボタンが表示されるはずです。



includeの特徴

includeの変数はグローバル変数ではないので、読み込み先以外に干渉することはありません。いくつでも渡すことができ、変数の初期値も定義できますが、長いコードを渡すことはできません(できたとしても可読性が著しく落ちます)。

extendによるコードの継承

概要

いっぽうextendですが、WordPressやa-blog cmsに実装されている「親・子テーマ」の「コードの使い回し」を、テンプレート間で実行することができます。

テンプレート冒頭で「@extend」を書くと、指定したファイルを丸ごと読み込むことができます。ここまではincludeと変わりませんが…

@extend(/path/to/filename)

指定した読み込み元のファイルに「@section(任意の英数字名) 」〜「@endsection 」で囲んだ領域があると、読み込み先のファイルでコードを上書きすることができます。

@section(sample)
  <h2>内容を書き換えちゃうよ!</h2>
@endsection

つまり、読み込み先では、差分コードだけ記述すれば良いのです。

詳細な仕様解説は公式ドキュメントを参照ください。
テンプレートの継承 | テンプレート | ドキュメント | a-blog cms developer

構造図

図で解説すると以下の通りです。
レイアウト用に作成した非公開テンプレート「_layout.html」のコードを3つの公開テンプレートで使い回していますが、それぞれ実際の表示結果が変わります。特にsample_03.htmlの「継承しつつ追記」はいろいろ便利です。



extendの特徴

extendは、前もってレイアウト用のテンプレートを作り、どの箇所を継承可能にするか定義することになります。

長いコードをテンプレート間で渡すことができるので、似ているけれど微妙に違うレイアウトが多いサイトでは、書くべきテンプレートの行数を大幅に節約できます。反面、includeとは異なり、条件分岐などに使える変数を渡すことはできません。

いえズームでの活用

includeの変数渡し

いえズームは一見シンプルなサイトですが、訪問者の導線を意識しているため、コンテンツごとに記事の表示件数や体裁、ページ内での表示位置などが細かく違っています。改修を重ねているうちに、モジュール部分のテンプレート数が肥大してしまっていました。

例えば「summary_sub_story_future」モジュールと「summary_sub_story_recent」モジュールは、IDが違うだけでコードがまったく同じなのに別ファイルになっています。

<!-- BEGIN_MODULE Entry_Summary id="summary_sub_story_future" -->
・・・
<!-- END_MODULE Entry_Summary -->
<!-- BEGIN_MODULE Entry_Summary id="summary_sub_story_recent" -->
・・・
<!-- END_MODULE Entry_Summary -->

これを、includeの変数渡しに書き換えることで、ひとつのファイルでidだけ違うコードを出力することができました。

さらに、なんと、読み込み先のincludeのファイル名に変数を引き継ぐことができることに気付いてしまいました。エントリーの繰り返し部分の体裁だけが違うテンプレートも共通化できそうです。

@include("/include/module/summary_sub.html", {"mid": "summary_sub_story_recent", "loop": "story_media.html"})
<!-- BEGIN_MODULE Entry_Summary id="{{mid}}" -->
・・・
@include("/include/module_loop/{{loop}}")
・・・
<!-- END_MODULE Entry_Summary -->

extendによるコードの継承

いえズームは、すべてのページのフッタ上部に、「いえズームとは?」というサイトの概要が記載されています。



ですが、一箇所だけ例外があります。地域別企業一覧のページでは、ヘッダの地域紹介の直下にあるのです。

札幌圏の住宅会社(ハウスメーカー・工務店)一覧 | いえズーム(iezoom)



地域ページは、冒頭に地域情報のパーツがあったり、地域名を変数に入れていたりと、かなりレイアウトが異なっています。以前は地域ページだけまったく違うテンプレートを用意していたのですが、extendを使うことで、他のテンプレートが利用している「/_layout_col2.html」との共通化ができるようになりました。

@extends("/_layout_col2.html")

@section(head_before)
(地域名を変数に取得)
@endsection

@section(pagehead)
(地域情報とサイト紹介パーツ)
@endsection

以下略

まとめ、使ってみての雑感

このように、わかりやすいところから少しずつコードの整理をしています。

使ってみての感想は、やはりテーマ職人としては、extendが手応えがある分面白いなあと感じています。大幅にテンプレートの数を減らせそうです。ただし、テーマ全体の構成を把握していないと実装できませんから、コーダーとテーマ制作者が違う案件では苦戦するかもしれません。

includeの変数渡しは便利な反面、インクルード先のテンプレートで、その変数がどこから定義されたものなのかわかりにくいという欠点があります(変数名でテンプレートを検索すればいいのですが)。 同じような変数名を使いすぎてカオス化しないよう、ルール決めが必要です。

いえズームは現在も、数週間に一度のペースでコンテンツの改修や追加が続いています。 このため、私も手早く対応できるようにしなければなりません。テンプレートを整理することで余裕が出て、より良い制作や提案ができればと期待しています。


投稿者名 うぇびん(管) 投稿日時 2018年12月11日 | Permalink

「a-blog cms Training Camp 2018 TOKYO」に参加しました

ええりんご社長さんがむいてくれとるで、はよ食べりん



「a-blog cms Training Camp 2018 TOKYO」に参加しました。これまで沖縄開催はありましたが、東京は初開催です。
会場は茅場町のコワーキングスペースのコエドさんでした。

お昼ごはんを食べて会場に行くとなぜか大量のりんごがありました。シールがかわいいので名刺入れに貼り付けて保護しました。三河弁になっていることは見逃しません。

さて、今回のa-blog cms Training Campでのレポートなんですが、以下の話に絞ることにします。

  • 機能の追加・改良
  • a-blog cmsかるた

ユーザーセッションについてもご紹介したいのですが、今回もすごいボリュームなので、このふたつだけで記事一個分になりそうなんですよね…すみません。ツイッターの「#ablogcms」ハッシュタグをぜひ早めにご覧ください。

https://twitter.com/search?q=%23ablogcms&src=typd

機能の追加・改良

オープニングの後で、a-blog cmsのコア開発を担当しているアップルップル伊藤さんから、先月リリースされたバージョン2.9系、次期バージョンの2.10系の新機能紹介がありました。2.9.0の詳細は、こちらのリリースノートを参照ください。

https://developer.a-blogcms.jp/blog/changelog/release290.html

OpenStreetMapに対応

Google Mapsが規約の変更で気軽に利用できなくなったため、a-blog cmsでは地図機能でOpenStreetMapが選択できるようになりました。OpenStreetMapはAPIキーなどを設定せず利用できますが、メンテナンスなどで一時的に見られなくなったり、検索が優秀ではなどの難点はあります。

プレビュー機能



公開していないエントリーを、モバイル環境を再現した画面でプレビューできるようになりました。また、Pro版ライセンス以上では、URLを発行してプレビュー画面をクライアントと共有することも可能です。MovableType.netではURLプレビューが標準機能でできますが、モバイルプレビューはないので、どちらが良いかはワークフローの問題になってきますね。

ユーザーの切り替え

これはイベント前に気がついてスクショを撮っていたのですが、管理者でログインしていると、管理画面内で他のユーザーに切り替わることができるようになりました。もちろん、元に戻せます。 このユーザーではどのように見えるのだろう、とか、特定のユーザーで有効になる判定をチェックしたいときに使えます。

テキスト置換



ユーザー待望の、テキスト一括置換機能が実装されました。カスタムフィールドを指定して置換できるので、フィールドに施設名を入れていて、その施設名が変わってしまった…という状況に役立ちます。ただし、正規表現は使用できません。

管理画面カスタマイズの簡略化

テーマ製作者に好評の、@extendsが改良され、@sectionの入れ子ができるようになりました…と言ってもわかりませんよね。私もわからないです。

ですが、管理ページの左メニューや投稿画面のカテゴリー・タグなどを、自作テーマ側で隠したり上書きできるようになりました、と書くとなんとなくわかるかと思います。これまで本当に苦労したので感動にむせび泣いていました( T-T )

サブカテゴリーの実装

これはリリース予定の、2.10系の機能です。Movable Typeの特徴的な機能としてご紹介してきた、「プライマリカテゴリー」「サブカテゴリー」の概念がa-blog cmsにも実装されます。

個人的には、サイト設計に大きく関わる変更と捉えています。a-blog cmsはシングルカテゴリーによるシンプルなマッピングを特徴としていたため、方針の変換とも言えます。a-blog cmsが中心の方向けにライトニングトークでもざっくり解説しましたが、これについては専用の記事を書きたいと思います。

エントリー編集画面の統一オプション

これまで、a-blog cmsは公開サイト内での見たまま編集を前提としつつ、管理ページの「エントリー」からも管理ページ画面での編集が可能となっていました。これが混乱を招くケースがあったり、背景に強い色を使っているサイトではa-blog cmsのUIが合わないということで、どちらかに固定できるようになりました。



ただし、管理ページに固定した場合の「このページを見る」ボタンの位置がわかりにくいという感想を持っています。やはり、Movable TypeやWordPressのように、タイトル直下にあるとよいかと。

a-blog cmsかるた、なまら遊ばさるんだけど



一日目のセッション終了後は、アップルップルさんが毎回いろいろネタを持ってくるグループワークでした。なんと、今回は「a-blog cmsかるた」でした。

取り札に機能名やタグ名が書いてあって、スタッフが持っている読み札にはその説明が書いてあります。

「初心者」「中級者」「エバンジェリスト」でチーム分けされてしまったため、プレッシャーが上がるエバンジェリストたち。しかもやたら難しい。管理画面用のタグとか使わないし。微妙に綴りが違う引っ掛け問題があるし。

取りながら「これは知ってたw」「知らなかったw」「感覚で憶えちゃってるから読み札の説明を聞いてもわからんw」と変なテンションで盛り上がりながらのプレイでした。



私が取れたのはこの6枚。URLコンテキストのキーやフォームオプションの判定など、他のCMSでも使用されている機能や用語ばかりになりました。

キャッシュバスティングとは、ブラウザキャッシュは有効のまま、CSSやJSなどの依存ファイルのみキャッシュを無効化する技術もしくは機能です。WordPress、a-blog cmsだけでなく、Drupalも実装していたかと思います。

優勝は神戸の岡田さんと大阪の坂本さんの、それぞれ7枚でした。全然使ったことがないグローバル変数やタッチモジュールを知っていてさすがです。

こういうゲーム形式の勉強は会話も発生して楽しいですね。初心者グループのみなさんがついて行けたか心配なので、初級者セット・上級者セットがあるといいのかもしれません。

雑感:a-blog cmsのエンタープライズ化

今回は体調が良く、イベントのほぼ全日程にきちんと参加することができました。2.9系以降、また、将来的な新しいCMSの話を聞いて感じるのは、a-blog cmsは確実にエンタープライズCMSへ向かっているということです。

いえ、以前から向かっていましたし、エバンジェリストのほとんどはディレクターのスキルを持った人が多いです。ですが、機能に関する部分で、ディレクター、デザイナー、フロントエンドエンジニア、クライアントの四者が円滑に協業できることを意識した変更が増えているように感じます。投稿画面の固定化、プレビュー共有などがそうです。

これだけ機能が揃っていると、すでに5万円ではおさまらないCMSとなっており、次期CMSは確実にライセンス料がアップします。その場合、私のようなCMSの決定権を持たないエンジニアは、どのようにa-blog cmsを選択してもらえるか真剣に考えないと、実務で使えなくなってしまいます。そんな危機感も持っています。


いつまでついていけるだろうか、とも感じつつ、参加するたびにモチベーションがこれだけ上がるのはa-blog cms Training Campくらいです。スタッフ、エバンジェリストの皆さんとの話も、濃くて勉強になります。 私は仕事のためだけではなく、自分の維持のためにCampに向かうのです。


投稿者名 うぇびん 投稿日時 2018年11月21日 | Permalink

CMSでの「事例コンテンツ」の5つの構築パターン


先月の「WCAN 2018/10」で、講師の谷口さんが、WordPress 5.0のGutenbergに対する懸念と同時に、小規模のコーポレートサイトはこれまでのWordPress一択ではなく、ASP型のシンプルなCMSへ移行していく選択肢もあるというお話をされていました。

コーポレートサイトの軽量化が進む中でも、CMSで構築すべきコンテンツはいくつかあります。そのひとつが「ユーザー事例」「導入事例」などの、事例コンテンツです。

事例コンテンツは、クライアントの業種、業態などで適したパターンが異なるので構築の最適解がありません。だいたいはすでに決まっているワイヤーに添って構築することが多いですが、私が中間の制作会社さんに「このパターンはこういうリスクがありますが大丈夫ですか」と提案したり、逆に意見を求められることもあります。

だいたい、5パターンに分けられると思うので、今後のために特徴と構築手法をまとめてみます。

ワイヤーがかなり縦に長いので、少し読みづらいですがご容赦ください。画像はクリックで拡大できます。

リッチテキスト型


冒頭にお客様の画像と名前が入り、その後はリッチテキストの自由文となります。
最も軽量なパターンで、特別なフィールドもお客様名くらいですから、JimdoなどのASP型も含め、どのCMSでも実装可能です。

このパターンの欠点は、データの再利用性が低いこと、リッチテキストであるためウェブ担当者のセンスに左右されることです。固定ページとほぼ同じですね。


データベース型


すべての項目をカスタムフィールドでがっちり構築し、事例の情報を細かいデータとして開示します。

大手企業さんで数回経験しました。すべての情報の再利用性を考えていることや、大きな社内で投稿ルールを統一するのが難しいからではないかと思います。

上記の通りデータの再利用性が高い、つまりAPI連携、リニューアルにめっぽう強いことが長所として挙げられます。一方で例外が許されなかったり、この事例だけ思い切り推したい、ということができないのが欠点です。このため、中間のテキストをリッチテキストの自由文にして、HTMLを書けるようにしておくという「逃げ」を考えたりします。

工数も多くなりますし、CMS本体への負荷も高めです。そういう意味でも大企業向けなように思います。


ギャラリー型


画像とキャプションがグループになった「繰り返しフィールド」を作り、カルーセルとして表示します。繰り返しフィールドについてはまとめで後述します。

jQueryが普及した頃から現在まで人気があり、コンパクトで、クライアントのOKも出やすそうなパターンですが、私はこのパターンにあまり良さを感じません。

このパターンは、最初に画像が集中しているため、画像と文章を対比して見ることができません。文中に「キッチンのタイルのあしらいは…」と書かれていて気になっても、ページの最初まで戻って、カルーセルをめくらなければならないのです。

また、スマートフォンの普及で画面が狭くなり、かつ訪問者の滞在時間が少なくなったため、2枚目以降を見てもらいにくいです。縦長の素材が多いとますます見づらくなってしまうのも難点です。文章は少ないけど良い写真がたくさんある、というなら採用しても良いかと思います。


リピートフィールド型


前項のギャラリー型の変形です。画像、キャプション、見出し、本文がセットになった繰り返しフィールドを重ねてページを作成します。見出しやキャプションは必ずしも必要ありません。

縦長の画像にも対応できたり、画像と文章を対比できるなど、ユーザビリティに利点があります。更新担当者にも説明しやすいパターンですが、同じパーツの繰り返しなので、そうとう文章に力を入れなければ単調になってしまいます。 また、途中に任意のコンテンツを割り込ませることができません。

画像に力が入っているならギャラリー型、文章に力が入っているならリピートフィールド型がいいのかなと考えています。


ユニット型


本文中のすべてのパーツを「ユニット」として自由に並べていくパターンです。

このブログへ何度か来られた方はすでにご存知かと思いますが、a-blog cmsが最も得意としているパターンです。concrete5も実質このパターンになります。WordPressのGutenbergやMovable Typeのブロックエディタも…近い、とは言えます。

例外対応ができる、段組ができる、事例専用のユニットを追加できるなど、なんでもありですが、a-blog cmsのエバンジェリストとして敢えて言うと「データの再利用性が低い」「手厚い導入説明が必須」という問題があります。このため、急ぎ案件やまとめてインポートをしたい場合には向きません。

また、これはリッチテキストエディタと同質の問題でもありますが、投稿ルールを決めておかないと、各ページがカオス化しがちです。


まとめ


以上、事例コンテンツのパターンをまとめてみました。いつものように突っ込みを待つことにします。

繰り返しフィールドは、「リピートフィールド」「フィールドグループ」などと呼ばれ、a-blog cmsはコアでこの機能を持っています。WordPressでは「Advanced Custom Fields」プラグインのPROライセンス、Movable Typeでは「FreeLayoutCustomField」で可能です。

個人的にはデータベース型はけっこう好きだったりしますが、サイトのレイアウトがデータに大きく縛られてしまうため、やはり繰り返しフィールドと単体フィールドの併用が良いのかなと思います。

すべてのパターンに言えることですが、事例を「インタビュー」としていた場合は「インタビューに応じてくれる寛容なお客様が、今後どのくらいいるのか」について検討しなければなりません(私はこれを「希望的観測問題」と呼んでいます)。なので、インタビューと通常事例でカテゴリー分けをして、通常事例はギャラリー型などにすることが考えられます。

なんにせよ、なぜ事例コンテンツを作りたいのか、事例を通して訪問者(将来の顧客、もしくは掲載された顧客)に対してどのようなユーザー体験を与えたいのか、この二点を明確にしてから進めたいものです。


投稿者名 うぇびん(管) 投稿日時 2018年11月10日 | Permalink