Highlighting Code Blockは記事内のソースコードを読みやすくするために非常に便利なプラグインです。しかしながら、Highlighting Code Block v1.5.5では、Simply Static + AWS S3で静的ホスティングする際、上手く動きませんでした。
この記事では、この不具合の原因と対処について解説しています。
目次
言わずと知れたオープンソースのCMSです。PHPベースで構築されており、レンタルサーバーでも簡単にインストールできる機能が提供されているものも多く、スタンダードなCMSです。
WordPressには「プラグイン」という機能が提供されていて、ユーザーが必要に応じてWebUIを利用してカスタマイズすることができるようになっています。
WordPressは通常ではサイトにアクセスがあった際、PHPがデータベースから記事のデータを読み出してHTMLをレンダリングして書き出す仕組みになっています。Simply StaticではWordPressの記事を静的なHTMLファイルにレンダリングしてくれるものです。
WordPressは利用者も多く管理画面を狙われやすいため、乗っ取られるケースが数多く存在していますが、Static Pressを利用すると、
とできるため、攻撃者がWordPressの管理画面に外部からアクセスしにくく、セキュリティ上も安全です。
また、PHPがデータベースを読みにいくという処理もなくなるため、非常に高速にアクセスが可能になることも大きなメリットの一つです。
Web上で通常どおり、コードを記述すると、予約語や変数などに色がつかず、見づらい状態で表示されます。HCBを利用するとprism.jsというコードを解析するライブラリベースで解析が行われ、色付けして表示してくれます。
Amazon社が提供しているクラウドサービスAmazon Web Servicesのひとつで、大量のファイルをバケットと呼ばれるストレージに格納することができるストレージサービスです。
S3には静的Webサイトホスティングの機能が提供されているため、ここにHTMLを配置することで、安価で簡単に静的Webサイトが公開できます。
まず、どのようにおかしな表示になってしまったのかを以下の図に示します。
Google Chromeの開発者ツールを利用して確認すると、上手くJSやCSSが読み込まれていないようでした。
ブラウザ上でソースコードを確認してみると、CSSのパスが以下のようになっていました。
<link rel="stylesheet" id="hcb-style-css" href="/wp-content/plugins/highlighting-code-block//build/css/hcb_style.css?ver=1.5.5" type="text/css" media="all">一見正しいように見えますが、よく見ると、buildという文字列の前が//になってしまっています。
この解決策はプラグインのコードを直接触ることになるため、自己責任で内容を理解した上で進めてください。
上記のように、CSS, JSのパスがおかしいということが原因なので、パスが正しくなるように修正します。
まず、WordPressの管理画面にログインし、「プラグイン」→「プラグインエディター」を開きます。
右上にプラグインを選択するプルダウンがあるので、そこから「Highlighting Code Block」を選択し、「選択」ボタンをクリックすると、 HCBのコードが表示されます。
右側にファイルツリーがあるので、class/loos_hcb_scripts.phpを開き、Ctrl + F(Macの場合はCmd + F)で「LOOS_HCB_URL」という文字列を検索しましょう。
「LOOS_HCB_URL」の後ろに/build/xxxxのような文字列があるので、これらを全てbuild/xxxxのように最初の/を削除します。
すべて置き換え終わったら、画面下部の「ファイルを更新」ボタンをクリックしましょう。
プラグインファイルを直接触るのはかなりリスキーで、アップデートをするたびに動作を確認しなくてはならないため、かなり面倒ですが、GithubでHCBが見つからなかったため、PullRequestを送ることができませんでした。
一旦は対症療法として、対応し、プラグインのアップデート情報を注視したほうが良いと思います。