「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

自作のCSSフレームワークで特に気に入っているコンポーネントの話

先月公開したCSSフレームワーク「echo.css」ですが、「どんなページが作れるかのサンプルがないと、イメージしにくいんじゃないかな」と言われました。

それで、ドキュメントよりも先にテンプレートを作っています。日曜日はチクチク制作をしておりました。

echo.cssのモジュール群で特に気に入っているのが、冒頭の画像の「c-flip」というコンポーネントです。デスクトップでは写真を大胆に表示し、モバイルでは写真が上、文章が下となります。

初出は、昨年稲葉さんと制作したa-blog cms用のテーマ「zeroichi_lp」です。

この時点でも充分使い勝手は良かったですが、実際の案件で使ううちに、デスクトップでの表示が8パターンまで必要なことがわかってきました。使用する背景画像によって、適切な文字配置は全く異なるためです。デザイン上の理由もあります。

  • 画像全面＋コンテンツ白背景・左寄せ
  • 画像全面＋コンテンツ黒背景・左寄せ
  • 画像全面＋コンテンツ白背景・右寄せ
  • 画像全面＋コンテンツ黒背景・右寄せ
  • 画像半分＋コンテンツ白背景・左寄せ
  • 画像半分＋コンテンツ黒背景・左寄せ
  • 画像半分＋コンテンツ白背景・右寄せ
  • 画像半分＋コンテンツ黒背景・右寄せ

8パターンのデザインを簡単に切り替えるために、サブクラスなどをずいぶん整理して現在に至ります。詳しくはこのコンポーネントの解説ページをご覧ください。

https://cms-skill.com/echo-css/styleguide/component-flip.html

私が制作するサイトは、ほぼすべてCMSを介して制作し、さらにその半分くらいが、フォーマットができてから原稿が入ります。その際に想定外の画像やテキストをどれだけ少ない工数で補完できるかを、自分の独自スキルとして磨きたいと日々考えています。これは少なくとも、AIには当分できないことです。

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

いい加減、音声入力でブログを書きたい

勝間和代さんが今年のはじめころから、執筆を音声入力にしたらびっくりするくらい効率化できた、とレポートを書いています。

音声入力による生産性の向上は、ざっくり「３倍」くらいのイメージ - 勝間和代が徹底的にマニアックな話をアップするブログ

私はずっと、音声入力でブログを書くことに憧れています。だいたい、月旅行が実現するような未来に生きているのに、文字入力が未だに手でしかできないなんておかしいじゃないですか。

一年に一度のペースで何度も試しているのですがその度に挫折しています。今回また、何度目かの挑戦をすることにしました。

普段はブログ記事を、メイン機であるMacBook Proの2016年モデルで書きます。先日、OSをMojaveにバージョンアップしたばかりなので、Mojaveと Bluetoothヘッドセットでの音声入力を試しました。

占星術士の石井ゆかりさんの占いを読み上げてみたのですが…

散々な結果でした…これではSiriもまともに使えるか怪しいものです。Appleの純正イヤホンなら大丈夫ではないかと思い、まったく同じ文章を読み直しましたが…

(°言° )

精度が変わらないどころか悪化しました。

音声入力の精度はスマートフォンの方が高いといいます。なので今度は、ZenFone3+Google音声入力と、最初と同じBluetoothヘッドセットで試してみました。

おぉ。今度はほぼ正確に入力することができました。

ですが、文節ごとに半角スペースが入ってしまうので、入力後にスペースを削除しなければいけません。ちょっと面倒くさいです…しかも音声で入力された箇所はタップして別の候補に変更するか、削除するかを選べるのですが、句読点を入れるときにこの機能が仇となり、間違って文節を一個消してしまいました。

音声入力をするにあたって、もうひとつハードルがあります。それは、肝心の私の言葉が出てこないという、身も蓋もない話です。

私はかなり饒舌で、一般の人と比べると語彙も多いと自覚しています。ですが、私 の頭に浮かぶ文章は、通常100文字くらいのフレーズが多く、順番もバラバラで、しかもあっという間に忘れてしまいます。

日常会話やTwitterなどは大得意ですが、 セミナーのプレゼンや、こういった音声入力は、文章をまとめきれずに言葉に詰まってしまい、まるでうまくいきません。

勝間さんは、音声入力の精度の問題で実用化できなかったと記事に書いていましたが、どちらかというと一般の人は私のように、言葉をまとめることが苦手だからできない人が多いのではないかと思います。人前で話す機会が少ない仕事をしていると尚更でしょう。

実は、ここまでのブログ記事は音声入力で書いてから、あとでキーボードで加筆しています。

Google音声入力の精度はやはり凄いですが、先述の通り、文節ごとにスペースが入ってしまう問題があったり、句読点が入力できなかったりするので、いちいち戻って文章を直さなければなりません。

入力は一瞬ですが、キーボードと違って「とりあえず考えついた順に書き出す」ということができないので、少しずつしか進みません。スマートフォンのUIだと、文章を直すのにも時間がかかります。 やはり、人前でまとまった話をすることに相当慣れている人でなければ、長い文章を音声入力にするのは、なかなか難しいなと感じました。

ただ、スマートフォンの音声入力は完全に実用レベルになったと思うので、もっと積極的に使いたいです。常にメモアプリを起動しておいて、思いついたブログの記事のネタを、忘れないうちに音声入力するという手がありますよね。

スマートフォンをiPhoneXsに変えることにしたので、Siriや音声入力の精度が、以前使っていたiPhone 7と比べてどのくらい高くなっているのか期待したいです。

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

ブログをリニューアルしました

このブログ、つまり、ウェビングスタジオのメインブログをリニューアルしました。

リニューアルというか、長年積み重なった設定を初期化して、a-blog cmsのブログ用公式テーマ「blog2015」をベースにしたという縮小に近い改修です。
blog2015は読みやすく扱いやすいテーマです。使っている他の人のブログを見て気になっていました。この機会に使ってみることにします。

15年近く続けてきたブログが昨年ころから書けなくなり、g.o.a.tへ移転してみたり、非公開の場所で完全にプライベートの日記を書いてみたりしていました。
一方でTwitterやFacebookは大量に投稿していたので、書けなかったのは「役に立つ情報が充実した、人気が出そうな記事を書かなければならない」というプレッシャーのせいだと思います。
私のライフログが、私のドメインにまったく残っていないのは、やっぱり悲しいです。

純粋な技術情報はQiitaで書いているので、今後はブログをはじめた頃の原点に戻って、私個人の日記と対外活動を中心に書いていこうと思います。

ちょっと待て、カテゴリーを消す前に

リニューアルにあたって、記事の分類を、タグのみにしました。昨今のレンタルブログはカテゴリーを廃したものが多いですし、ブログのような雑多な記事は複数のタームを持つタイプの分類の方が自分自身も後々探しやすいです。

a-blog cmsはエントリーからカテゴリーを外すのが簡単です。管理ページで全記事を選択して、一括修正のプルダウンで「カテゴリー＞なし」を選ぶだけです。

300件から、えいやっとカテゴリーを剥がしたところで、あることに気づきました。

a-blog cmsは、エントリーURLにカテゴリー名が含まれるということに。

例えば、このブログ内で歴代最高の人気記事となっている「GitHubとBitbucketの比較：Webデザイナーの業務にはBitbucketが向いている」だと、

https://webbingstudio.com/weblog/internet/entry-651.html
が
https://webbingstudio.com/weblog/entry-651.html
になり、すべての被リンクが切れてしまうということです。

心の中で「ああああああああああああああああああああああああああああああああああああああああああ」と叫びましたがもう遅いです。それに、ある程度手数やリスクをかけても、このタイミングでカテゴリーは廃止したい気持ちは変わりません。

加筆

アップルップルのかずみちさんから「.htaccessを書かなくてもいいんだよ」と、「entry_301_redirect」オプションのことを教えていただきました。これがオンになっていると、エントリーのファイル名に重複がなければ、カテゴリーを変更してもエントリーのリンクが切れません。

結局、以下のように.htaccessを書いてリダイレクトさせました。どう考えてももっと短い書き方があります。

# a-blog cms以外のコンテンツ（a-blog cmsを動作させないディレクトリ）
RewriteCond %{REQUEST_URI} !^/?weblog/life/
RewriteCond %{REQUEST_URI} !^/?weblog/work/
RewriteCond %{REQUEST_URI} !^/?weblog/cms/
RewriteCond %{REQUEST_URI} !^/?weblog/webdesign/
RewriteCond %{REQUEST_URI} !^/?weblog/others/
RewriteCond %{REQUEST_URI} !^/?weblog/internet/
RewriteCond %{REQUEST_URI} !^/?weblog/study/
RewriteCond %{REQUEST_URI} !^/?weblog/think/

・・・

# ブログカテゴリー廃止
RewriteCond %{REQUEST_URI} ^/?weblog/life/
RewriteRule ^/?weblog/life/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/work/
RewriteRule ^/?weblog/work/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/cms/
RewriteRule ^/?weblog/cms/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/webdesign/
RewriteRule ^/?weblog/webdesign/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/others/
RewriteRule ^/?weblog/others/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/internet/
RewriteRule ^/?weblog/internet/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/study/
RewriteRule ^/?weblog/study/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/think/
RewriteRule ^/?weblog/think/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

私らしいフォント

CSSフレームワークが完成したので、屋号サイトも、シンプルでコンテンツ押しのデザインへのリニューアルを考えているところです。

ブログの外観は公式テーマのままですが、全体のフォントを新しいサイトで使用予定のフォントにしました。
中見出し、本文は「FOT-セザンヌ ProN M」、大見出しは「FOT-ロダンカトレア Pro DB」を採用しています。

https://webfont.fontplus.jp/font-list/cezannepron-m

セザンヌは東京駅でも採用されている比較的ありふれたゴシック体ですが、ヒラギノよりも文字幅が細く、文字の書き始めに強い力が入った跡があります。
背筋を伸ばし、凛と声を張って話す、年配の女性を連想させます。
それは私がなりたい姿で、このサイトに合っている文字かなと考えて選びました。

そんなこんなで、またブログの記事が長くなってしまうのでこの辺で。
書きたいことは浮かんでいるのだから、タイトルだけ付けた下書き記事を作っておくといいのかも。

投稿者名 うぇびん（管） 投稿日時 2018年11月01日 | Permalink