Mac 関連 Tips: BloggerでFirebaseホスティングを用いてSyntaxHighlighterを使う

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

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

インストールはこちらにアクセスすれば、プラットホーム（MacとかWinとか）に合ったインストーラーを表示してくれるので、それをダウンロードして実行するだけである。（Macでインストラーパッケージを扱う手順は、流石に書かない）
firebase-toolsのインストール
ターミナル.appを開き、次のように入力する。
```
sudo npm install -g firebase-tools
```
Macの場合、sudoをつけて実行する必要がある。
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
```
ブラウザの画面は下図のようになる。
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
```
SyntaxHighlighterの準備
SyntaxHighlighterは、こちらからダウンロードする。ダウンロードしたZIPアーカイブは展開し、中身のscripts、src、stylesフォルダを前項で作成したpublicフォルダに入れる。
FirebaseWebサイトへのアップロード
敢えてアップロードという言葉を使ったが、Firebaseでは、デプロイと言うらしい。いずれにせよローカルのpublicフォルダの内容は、次のように入力することで、インターネット上に公開される。
```
sudo firebase deploy
```
Macの場合、sudoをつけて実行する必要がある。
FirebaseWebサイトのURL確認
まず、Firebaseホームページ右上のコンソールへ移動リンクをクリックする。

移動したコンソール画面で、先程Webホスティングに設定したプロジェクトリンクをクリックする。

横に並んだメニューのHostingをクリックすると、次の画面になり、ドメインと書かれているところにFirebaseWebサイトのURLが書いてある。
SyntaxHighlighter本家のホスティングURLの置き換え
あとは、Bloggerのテンプレートに書いてあるSyntaxHighlighter本家のホスティングURLを、前項で確認したURLに置き換えれば良い。
ちなみに置き換える対象は次の部分である。
```
http://alexgorbatchev.com/pub/sh/current/
```
参考サイト
Google Driveのホスティングサービス終了によるSyntaxHighlighter周りの修正
 FirebaseでWebをホスティングしてみた
 FirebaseでWebサイトを無料でサクッと公開してみる

以上。

Mac 関連 Tips

2016年10月9日日曜日

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

1 件のコメント :