BloggerでFirebaseホスティングを用いてSyntaxHighlighterを使う

SyntaxHighlighterというのは、プログラミングコードの予約語に色付けして、コードを見やすくしてくれるもので、本ブログでも多用している。
だが、しばらく放置している間に、SyntaxHighlighter本家が用意しているホスティングサービスが使えなくなってしまった。
本稿では、FirebaseのWebホスティングを用いてSyntaxHighlighterを使う方法を解説する。アイディア自体はこの記事の通りなのだが、初心者向けとは言えない内容なので、自分の備忘録の意味を含め、改めて筆を起こす。

1. Googleアカウントの準備
   Bloggerを使っている時点でアカウントはあると思うが、Firebaseには、Googleアカウントが必要だ。用意されたい。
2. Webサイト用プロジェクトの作成
   Firebaseにアクセスし、無料で開始ボタンを押してWebサイト用のプロジェクトを新規作成する。
   
   
3. Node.jsとnpmのインストール
   npmというのは、Node Packaged Modulesの頭文字を取ったもので、Node.jsのライブラリやパッケージを管理することができるツールだそうだ。
   FirebaseでWebサイトをホスティングするためのツールを動かすためには、これが必要らしいのでインストールする。
   ちなみにNode.jsというのは、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境だそうだ。本稿はNode.jsやnpmの解説記事ではないので、これ以上書かない。（要はjavascriptの実行環境なんだろう、多分…。）
   
   インストールはこちらにアクセスすれば、プラットホーム（MacとかWinとか）に合ったインストーラーを表示してくれるので、それをダウンロードして実行するだけである。（Macでインストラーパッケージを扱う手順は、流石に書かない）
4. firebase-toolsのインストール
   ターミナル.appを開き、次のように入力する。

   sudo npm install -g firebase-tools
   

   Macの場合、sudoをつけて実行する必要がある。
5. firebaseへのログイン
   上記に続き、ターミナル.appの画面で、次のように入力する。

   sudo firebase login
   

   Macの場合、sudoをつけて実行する必要がある。
   
   ターミナル.appの画面で次のように表示され、yを入力すると、Webブラウザの認証画面（Googleアカウントとの紐付け）が開くので、許可する。

   ? Allow Firebase to collect anonymous CLI usage information? (Y/n) 　yes
   
   Visit this URL on any device to log in:
   https://accounts.google.com/....(省略）
   
   Waiting for authentication...
   
   

   
   許可すると、ターミナル.appの画面で次のように表示される。これでログインは完了である。

   Success! Logged in as youreGMailAccount@gmail.com
   

   ブラウザの画面は下図のようになる。
   
6. Webサイト用プロジェクトの設定
   FirebaseのWebホスティングでは、ターミナル.appのカレントディレクトリにpublicというフォルダを作成して、そこにローカルのファイルを保存する。
   よってまず、ターミナル.appの画面でpublicというフォルダを作成すべき任意のディレクトリに移動する（筆者はSitesにHP関連のファイルを置いているので、Sitesにした）

   cd Sites
   

   次に、そのディレクトリで、次のようにタイプする。

   sudo firebase init
   

   Macの場合、sudoをつけて実行する必要がある。
   
   すると、ターミナル.appの画面に次のように表示されるので、Databaseをスペースキーで非選択にした上で、Hostingの方に矢印キーで移動してEnterを押す。
   
   続けてターミナル.appの画面に次のように表示されるので、さきほど新規作成したプロジェクトに矢印キーで移動しEnterを押す。

   === Project Setup
   
   First, let's associate this project directory with a Firebase project.
   You can create multiple project aliases by running firebase use --add, 
   but for now we'll just set up a default project.
   
   ? What Firebase project do you want to associate as default? (Use arrow keys)
    　[don't setup a default project] 
   > 　YourFirebaseProjectName (YourFirebaseProjectName-XXXXX) 
     [create a new project]
   

   続けてターミナル.appの画面に次のように表示されるので、そのままEnterを押す。

   ? What do you want to use as your public directory? (public) 
   

   続けてターミナル.appの画面に次のように表示されるので、yと入力しEnterを押す。

   ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
   

   完了すると、ターミナル.appの画面に次のように表示される。

   === Hosting Setup
   
   Your public directory is the folder (relative to your project directory) that
   will contain Hosting assets to uploaded with firebase deploy. If you
   have a build process for your assets, use your build's output directory.
   
   ? What do you want to use as your public directory? public
   ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
   ? File public/index.html already exists. Overwrite? Yes
   ✓ Wrote public/index.html
   
   i  Writing configuration info to firebase.json...
   i  Writing project information to .firebaserc...
   
   ✓ Firebase initialization complete!
   

   なお、Macではsudoをつけて実行するため、出来上がるpublicディレクトリの所有者がrootになる。これでは、ファイルの出し入れに一々認証が必要になるので以下を実行する。

   sudo chown yourMacAccount:staff public
   

7. SyntaxHighlighterの準備
   SyntaxHighlighterは、こちらからダウンロードする。ダウンロードしたZIPアーカイブは展開し、中身のscripts、src、stylesフォルダを前項で作成したpublicフォルダに入れる。
8. FirebaseWebサイトへのアップロード
   敢えてアップロードという言葉を使ったが、Firebaseでは、デプロイと言うらしい。いずれにせよローカルのpublicフォルダの内容は、次のように入力することで、インターネット上に公開される。

   sudo firebase deploy
   

   Macの場合、sudoをつけて実行する必要がある。
   
9. FirebaseWebサイトのURL確認
   まず、Firebaseホームページ右上のコンソールへ移動リンクをクリックする。
   
   移動したコンソール画面で、先程Webホスティングに設定したプロジェクトリンクをクリックする。
   
   横に並んだメニューのHostingをクリックすると、次の画面になり、ドメインと書かれているところにFirebaseWebサイトのURLが書いてある。
   
10. SyntaxHighlighter本家のホスティングURLの置き換え
    あとは、Bloggerのテンプレートに書いてあるSyntaxHighlighter本家のホスティングURLを、前項で確認したURLに置き換えれば良い。
    ちなみに置き換える対象は次の部分である。

    http://alexgorbatchev.com/pub/sh/current/
    

11. 参考サイト
    Google Driveのホスティングサービス終了によるSyntaxHighlighter周りの修正
    FirebaseでWebをホスティングしてみた
    FirebaseでWebサイトを無料でサクッと公開してみる

以上。