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

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

ブログツールの選定

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

前回の会社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を使用するにはクライアントアクセストークンを使用すれば良いようです。


  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のシェアカウントを取得しています。


  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)
  

その他のプラグイン

会社HPと同じように定番のプラグインも導入しています。

まとめ

BaserCMSでTechBLOGを構築するという、少しだけチャレンジングな内容を説明しました。
意外とWordPressを使わなくてもブログとして成立させる事ができました。
次回は公式ストアのリニューアルについて記事を書こうと思います。

おすすめの記事

SNS SHARE