Blogger管理画面の「HTMLの編集」で、
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
この追加した2行、実は人様のURLというかサーバを無断(?)で使っているわけです。
できれば自前のサーバか何かにおきたい。けど、そんなものはないわけです！。
そこで、Google Driveを使いますっ！
■Google Driveでの作業
どうもGoogle Driveは2013年頃から、html、js、css ファイルを外部から参照できるようになったらしい。表計算等ではたまに使っていたが、これはつい最近まで知らなかった。さすがにPHPは無理かもしれないが、簡易的な外部サーバにもってこいかもしれない。
まずはGoogleにログイン。
上部ツールバーの「もっと見る」をプルダウンすると「ドライブ」とあるので、そこをクリックする。
※これはブラウザで異なる可能性があるので、適当にGoogle Driveに行き着いてくださいっ！。
【Google Driveでフォルダを作る】
次の手順でドライブにフォルダを作り、共有を一般公開に設定します。- 「ドライブ」の画面にて、左上の「作成」から「フォルダ」を選びフォルダを作成する。
- 出来たフォルダの左の四角にチェックを入れる。
- すぐ右上付近の「その他」から「共有」＞「共有」。
- ダイアログがでるので、中程の「変更」をクリック。
- 「ウェブ上で一般公開」にして保存する。
重要な点として、このフォルダは必ず共有を一般公開にして下さい。それ以外だと外部からフォルダ以下にアクセスできないのでうまくいきません。
【Google Driveへアップロード】
前回ダウンロードした syntaxhighlighter_3.0.83.zip を展開し、syntaxhighlighter_3.0.83/scripts/
配下にあるファイル、
shCore.js shBrushCSharp.js
この２つをドライブの画面にアップロードする。（画面にドラッグ＆ドロップでいける）
※フォルダ共有が一般公開になっていると自動的にその中にアップロードしたファイルも一般公開になるのでそのままで良い。一応念の為、アップロードした共通の設定は確認しておけば間違いない。
【Google DriveへのアクセスURL】
アップロードしたファイルへアクセスする為のURLを作ります。ドライブ画面内の shCore.jsをクリック。
右下の「開く」のすぐ右にあるボタンをクリック（マウスオーバーで共有と表示されます）
表示されたダイアログ内の「共有するリンク」部分をコピー。
適当なテキストファイルをつくりペースト。
だいたいこんな感じだと思います。※赤字部分はファイルごとに異なる
https://drive.google.com/file/d/ABCDEFGHIJKLMNOPQRSTUVWXYZ/edit?usp=sharing
実はこのURLではドライブにアクセスできないのでURLを作ります。
下行の *************** の部分を、上の赤字文字列に置き換える。
https://googledrive.com/host/***************/
するとこんな風になる。
https://googledrive.com/host/ABCDEFGHIJKLMNOPQRSTUVWXYZ/
これがアップロードした shCore.js へのURLになる。
同様に shBrushCSharp.js もURLを作り、テキストファイル等にメモしておく。
■Bloggerに設定する
【HTMLの編集】
操作は前回同様。一応以下に手順を。Bloggerの管理ページへいく。
左列の「テンプレート」をクリック。
画面内「HTMLの編集」をクリック。
開いたHTMLソースの中に以下の2行を追加して保存。
追加する場所は <head> ～ </head> の間に。だいたい </head> の前くらいへ。
<script src='https://googledrive.com/host/ABCDEFGHIJKLMNOPQRSTUVWXYZ/' type='text/javascript'/> <script src='https://googledrive.com/host/#1234567890#1234567890WXYZ/' type='text/javascript'/>
■補足
Googleドライブに配置しておけば複数のブログ、HPでも２行追加するだけで利用できるので便利です。また、この手法でcssファイルも配置できるので、複数サイトで共用することも。
その他いろいろ用途はありそうです。
ただし現状試したところでは、一般公開にしないと外部から参照できない。
見られると好ましくないファイル類はこの方法で自サイトにロードするのは注意です。
あと以前まではブログのプレビューではソースコード部分がプレーンテキストのままで反映されなかった。
今回GoogleDriveに配置したら、プレビューでも表示されるようにヽ(´ー｀)ノ
これはちょっと嬉しい～。
0 件のコメント:
コメントを投稿