BaserCMSでTechBLOGをリニューアルしました

2020/11/24

技術開発ソフトウェア開発

アプリケーションエンジニア難波

ブログツールの選定

こんにちは、アプリケーションエンジニアの難波です。

前回の会社HPのリニューアルに続いて10/30にTechBLOGをリニューアルしました。
以前はlivedoorBlogを使用していましたが、以下の理由から自分たちでブログシステムを管理することにしました。

Braveridgeでオウンドメディアを持とう
デザインも会社HPと統一感を持たせたい
URLも blog.braveridge.com にする

OSSのブログシステムと言えばWordPressが一般的ですが、以下の理由から会社HPと同じBaserCMSにしました。

使用するツールはできるだけ少なくしたい
BaserCMSのブログ機能は簡易的だが、様々な機能追加をプラグインで対応できる
とにかく軽快な動作

上に挙げたように、BaserCMSのブログ機能はそこまで充実していません。
そのためいくつかプラグインを導入したりカスタマイズを行っています。

プラグインとカスタマイズ

Techブログをリニューアルするにあたって、以下のことを実現する必要がありました。

1. WYSIWYGエディタは使いやすいようで使いにくい

HTMLを理解している人にはWYSIWYGエディタは大変使いやすいのですが、そうでない人にとっては意図した動作や表現にならない事が多々あります。（特に改行とか）
そこでBurgerEditorプラグインを導入しました。オリジナルデザインを適用するために製品版をカスタマイズして利用しています。
今のところ、社内の記事作成者から私のところにはヘルプ要請は来ていません。

2. 記事作成者のアイコン表示

ブログ記事の作成者の「名前」と「アイコン画像」を表示する必要がありましたが、BaserCMSのログインユーザーは画像を登録する事ができません。
そのため、ユーザープロフィール表示プラグインを利用しています。

3. FacebookとTwitterのシェアカウント

Facebook Graph API

FacebookのシェアカウントはGraphAPIで取得しています。
当初はFacebookDevloperでアプリを登録すればすぐに使用できると思っていたのですが、JSで使用するのでAppSecretを公開することはできません。
JSでGraphAPIを使用するにはクライアントアクセストークンを使用すれば良いようです。

JavaScript


  var facebookAppId = '334108721010010'
  var facebookClientToken = 'client_token'

  var facebookCount = function(targetUrls, appToken) {
    var url = 'https://graph.facebook.com/v8.0/?ids=' + targetUrls.map(function(url) { return encodeURIComponent(url) }).join(',') + '&fields=engagement&access_token=' + appToken
    $.getJSON(url, function(res) {
      var countMap = {}
      Object.keys(res).forEach(function(url) {
        var engagement = res[url].engagement
        var totalCount = engagement.reaction_count
          + engagement.comment_count
          + engagement.share_count
          + engagement.comment_plugin_count
        var dataUrl = url.substr(location.origin.length)
        countMap[dataUrl] = totalCount
      })

      $('.sns').each(function(i, e) {
        $(e).text(countMap[$(e).data('url')])
      })
    })
  }

  var targetUrls = ['https://blog.braveridge.com/blog/archives/103']
  facebookCount(targetUrls, facebookAppId + '|' + facebookClientToken)

Twitter count.jsoon

一方、Twitterのシェアカウントですが、現在、Twitterではシェア数を取得できません。
そのため、count.jsoonを利用してTwitterのシェアカウントを取得しています。

JavaScript


  var twitterCount = function(targetUrl) {
    var url = 'https://jsoon.digitiminimi.com/twitter/count.json?url=' + encodeURIComponent('"' + targetUrl + '"')
    $.getJSON(url, function(res) {
      var dataUrl = res.url.substr(location.origin.length + 1, res.url.length - (location.origin.length + 1) - 1)
      var totalCount = res.count + res.likes
      console.log(totalCount, dataUrl)
      $('.sns[data-url="' + dataUrl + '"]')
        .text(totalCount)
    })
  }

  var targetUrl = location.origin + $(.sns).data('url')
  twitterCount(targetUrl)