2016年10月9日日曜日

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アーカイブは展開し、中身のscriptssrcstylesフォルダを前項で作成した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サイトを無料でサクッと公開してみる

以上。

0 件のコメント :

コメントを投稿