T.Takahashi bloggerでSyntaxHighlighterをFirebase経由のホスティングする 2017-06-23T05:04:21Z
０；ゼロからはじめる！

【最終更新日：2017/06/23】 ブログカスタマイズ

bloggerでSyntaxHighlighterをFirebase経由のホスティングする

はじめに

bloggerで

bloggerでコードを表示したいためSyntaxHighlighterを導入したが、HTTPSにしたため表示されなくなった。（SyntaxHighlighterは、HTTPSに対応していない）そこでGoogleドライブに切り替えようと思ったが、なんと2016年8月31日で終了とのこと。調べてみるとGoogleよりFirebaseが提供されているとのこととなので使ってみる。

Firebaseとは

原型は、2011年アメリカのMBase、2014年にGoogleに買収された。オンライン上からすぐに始められリアルタイム同期型データベース、静的webサイトホスティングなどが使用できるBaaS（Backend as a Service）と言われるサービスの一種。

　　　　

Firebaseを利用するために

  1. Firebaseへの登録（グーグルアカウントの取得）
  2. Node.jsインストール
    3. Download _ Node.js
  3. Node.js command promptコンソールよりfirebase-toolsをインストールする
    4. コマンドラインより
    npm install -g firebase-tools
  4. インストールが完了したらFirebaseにログインする
    5. コマンドラインより
    firebase login
  5. プロジェクトを設定する
    6. コマンドラインより
    firebase init
    初期化が開始され、選択肢が表示されたら キーで選択し、スペースキーで決定、Entarキーで実行する。
  6. カレントディレクトリにpublicディレクトリが作られる
  7. publicディレクトリ直下にファイルをコピーする
    8. SyntaxHighlighterの必要なファイルをpublicディレクトリにコピーする
  8. アップロードをする
    9. コマンドラインより
    firebase deploy
    publicディレクトリ直下のフォルダ、ファイルが転送される。（少し時間がかかる）
  9. Firebaseへログインをする
    10. ログイン - Google アカウント
  10. プロジェクトを選択し、右のメニューよりHostingへ移動
  11. ドメインを確認し、htmlへ記述する

    12. ※css部分のディレクトリが、変更前：styles 変更後：cssになっているのでコピペする場合は気を付けること

    ?
    変更前
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ＜変更前＞
    <!-- SyntaxHighlighter導入 -->
    <!-- SyntaxHighlighter本体の記述 -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <!-- 選択する言語部分の記述 -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <!-- bloggerで使用するための記述 -->
    <script type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all()
    </script>
    ?
    変更後
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ＜変更後＞
    <!-- SyntaxHighlighter導入 -->
    <!-- SyntaxHighlighter本体の記述 -->
    <link href='https://〇〇〇.firebaseapp.com/css/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='https://〇〇〇.firebaseapp.com/css/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='https://〇〇〇.firebaseapp.com/scripts/shCore.js' type='text/javascript'/>
    <!-- 選択する言語部分の記述 -->
    <script src='http://https://〇〇〇.firebaseapp.com/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://https://〇〇〇.firebaseapp.com/scripts/shBrushXml.js' type='text/javascript'/>
    <!-- bloggerで使用するための記述 -->
    <script type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all()
    </script>
　　　　

最後に

無料のホスティングサービス。今回は、Google（bloggerで使いたい）つながりでFirebaseを使用したがGithubでも同じようなことができるみたいなので次回はそこも踏まえて調べてみたい。

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿