PowerCMS X ブログ

2021-09-15

やさにちウォッチの舞台裏〜やさしい日本語のオウンドメディア構築事例〜

やさにちウオッチのトップページ

やさしい日本語の情報をやさしい日本語で発信する「やさにちウォッチ」を公開しました。
このオウンドメディアは PowerCMS Xで運営されています。実際にこの PowerCMS Xの製品サイトの CMSと同居していて、一つ専用のスペース(WorkSpace)を作成してそこで運用しています。

この記事では、「やさにちウォッチの舞台裏」と題して、主に CMS構築の観点から、利用している PowerCMS Xの機能をご紹介します。

新バージョンに同梱の標準テーマ「Media」を利用

デザイン自体は非常にシンプルなものですが、Bootstrap 4をベースにした新テーマ(次のバージョンで追加されます)「Media」を使って構築されています。
ある程度のカスタマイズはしていますが、ベースはほぼ標準のテーマに近いものとなっています。

サイトは基本的に静的 HTMLを生成していますが、一部以下の部分で動的機能を利用しています。

  • ランキングの表示(ランキングのためのデータ収集)
  • フォーム
  • ページネーション

尚、ふりがなとわかち書きは静的生成です。

ふりがなとわかち書きの実装

「SimplifiedJapanese」プラグインの機能を利用して、ほとんどのふりがなとわかち書きは自動で設定しています。

やさしい日本語エディタの機能が記事作成画面にありますので、そこで手作業で行っても良いのですが、PowerCMS Xのグローバルモディファイア「furigana」を利用しています。
エディタ上でふりがなを付けるよりも文章の修正などが楽になるメリットがあります。自動でのふりがな付与ですので、当然間違うこともありますが、プレビューで確認しておかしなものは、手動でふりがなを付与するか、あるいは辞書に登録することで修正をしています。

名前 説明 属性値
furigana rubyタグを用いてふりがなを追加します。 '1'を指定するとふりがなを追加 '2'を指定すると分かち書きしたテキストにふりがなを追加 '3'を指定するとふりがなを追加せずに分かち書きのみを適用

今回はわかち書き+ふりがななので、モディファイアの属性値には「2」を指定しています。

<mt:var name="contents" furigana="2">

わかちがきの ON/OFF のために、分かち書きの区切り文字を設定

ふりがなと分かち書きのON/OFFボタン

furiganaモディファイアでわかち書きする文字をプラグイン設定で指定できます。今回は、チェックボックスによってわかち書きとふりがなをそれぞれ ON/OFF できるようにするために、SimplifiedJapaneseプラグインの「分かち書きの区切り文字」に以下のように spanタグに separatorクラスを追加した区切り文字を指定しました。

分かち書きの区切り文字の設定

<span class="separator">&nbsp;&nbsp;</span>

あとは、読者がチェックを ON/OFF するタイミングで cookieに設定を保存、ふりがなとわかち書きの ON/OFF を切り替えています。

キーワード(タグ・アーカイブ)への自動リンク

一覧系ページは、カテゴリアーカイブとタグアーカイブ、年別アーカイブ(いずれも静的)を出力していますが、このうち、タグアーカイブには記事中にあらわれたタグを自動リンクするように設定しています。
Keywordsプラグインのブロックタグ「autokeywords」を使っています。

登録済みのタグと一致する部分を自動リンク

この機能はサイト公開後に思い立って実装したのですが、すでにタグ付けがされているため当初タグを CSVエクスポートしてキーワードにインポートしようと考えました。
ただ、このためだけにすでに「タグ」として登録されているものを別のテーブルにインポートし直すのは無駄だと考えたので、Keywordsプラグインの機能を拡張することにしました。

まず、ブロックタグ「autokeywords」の model属性に、キーワード以外のモデルを指定できるようにしました。今回は「tag」を指定しています。
タグには、キーワードモデルにあるようなリンク先を登録する「url」カラムがありませんが、やさにちウォッチではタグアーカイブを生成しているので、各々のタグのパーマリンクへのリンクとなるようにしました。
また、リンクの前後がわかち書きされてくれないので、生成したリンクの前後に挿入するわかち書きの区切り文字を enclosure 属性に渡すことによって前後をわかち書きできるようにしました。

<mt:setvarblock name="enclosure"><span class="separator">&nbsp;&nbsp;</span></mt:setvarblock>
<mt:autokeywords replace_once="1" model="tag" min_length="2" enclosure="$enclosure">
  <mt:entrybody convert_breaks="auto">
</mt:autokeywords>

これらの機能追加は、次のバージョンアップで皆様にもご利用いただけるようになります。

とりあえずやってみると、「本」というタグがあり、「日本」の「本」にリンクが付けられてしまいました。そこで、環境変数「keywords_use_mecab」を指定し、タグの判別に MeCabを利用することにしました。
MeCabを利用することで、「東京都」に含まれる「京都」を京都と判定してしまうようなことがなくなります。
ただし、逆に「福岡県」のようなタグを付けている場合「福岡」「県」というように形態素解析の結果がわかれてしまうため、
都道府県についてはキーワードにも別途登録しました(※keywords_use_mecabが有効の時、キーワードに登録された単語は形態素解析の辞書にも登録されるようになっています)。

記事の作成と編集

Webに不慣れなスタッフが記事を作成・編集することも多いため、記事は基本的にリッチテキストエディタを利用しています。
やさしい日本語変換ボタンもありますが、基本的には参考にする程度として、文章作成は基本的に人の手で行っています。

記事作成・編集画面

SNSや検索結果などに使われる「概要」(最近は検索結果というより主に SNSですが)欄へは、入力を忘れるケースが多く見られるので、これも Keywordsプラグインによる概要の自動生成を ONにしています。
ただ、基本的には人がそれを見て、適切なものに修正する、という使い方をしています。自動タグ付けも ONにしていますが、これも適切なものに人の手で編集するようにしています。

前述の通り、ふりがなについては、プレビューで意図しないものになってしまうもののみ手動で追加するか辞書に追加します。

ワークフローについては利用せず、ExternalPreviewプラグインが提供する「外部プレビュー」機能を利用し、Slackチャンネルにプレビュー URLを貼り付ける形でレビューを行っています。

ランキング部分の実装

AccessAnalyticsプラグインによってランキングの算出の元となるアクセス解析結果を取得して蓄積し、ブロックタグ「rankedobjects」を利用して出力しています。

アクセスランキングのような、定期的に自動更新されるようなコンテンツは、cronなどを利用して定期的に再構築を行うような方法もありますが、やさにちウォッチでは、動的生成とし、ブロックタグ「cacheblock」を利用することで、24時間キャッシュされるようにして無駄な負荷がかからないようにしています。そして、ページへの埋め込みは Ajaxによって非同期に読み込んでいます。

ランキングウイジェット

<mt:cacheblock cache_key="__widget_ranking__" workspace_id="$website_id">
  <mt:rankedobjects models="entry" limit="10" include_workspaces="this">
    〜
  </mt:rankedobjects>
</mt:cacheblock>

RSSによる最新記事の配信

(9月15日追記) リクエストをいただいたので、RSSを追加しました。PowerCMS のRSSテンプレートとほぼ同じ形でインデックス・テンプレートを作成するだけです。ついでにRSSをSlackに自動連携するようにして、記事が公開されたことを社内でシェアするようにしました。

<mt:block regex_replace="'/^%s+$/um',''" remove_blank="1"><?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title><mt:websitename remove_html="1" encode_xml="1"></title>
    <link><mt:websiteurl encode_xml="1"></link>
    <description><mt:websitedescription remove_html="1" encode_xml="1"></description>
    <mt:entries lastn="20">
    <item>
      <title><mt:entrytitle remove_html="1" encode_xml="1"></title>
      <link><mt:entrypermalink encode_xml="1"></link>
      <description><mt:entrybody encode_xml="1"></description>
      <pubDate><mt:entrydate format_name="rfc822"></pubDate>
      <mt:entrycategories>
        <category><mt:categorylabel encode_xml="1"></category>
      </mt:entrycategories>
  </item>
  </mt:entries>
  </channel>
</rss>
</mt:block>

Twitterとの自動連携

PostOnTwitterプラグインを利用して、Twitterアカウント( @yasanichiwatch ) 別ウィンドウで開きますと連携し、記事の公開と同時にハッシュタグ付きでTwitterへポストするようにしています。

Twitterとの連携の設定

カテゴリー:サイト制作全般 | テンプレート作成Tips | プラグイン | 技術情報

投稿者:Junnama Noda

ブログ内検索

アーカイブ