PR PR
宝島社
¥990 (2024/09/22 13:28時点 | Amazon調べ)

CSS外部化に続き、GoogleDriveへのJavascriptの外部化

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年8月11日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

以前、

ユーザビリティを考慮すると
個別記事の下部両サイドに、

スポンサーリンク

スポンサーリンク

前後記事のタイトル表示をした方がいいのではないか

という思いから、
以下投稿をしました。
個別ページの前後記事表示をタイトル名に変更する方法

こんな感じに表示されるようになります。

そして、
その後GoogleDriveを使っての、

CSSファイルの外部化という記事も投稿しました。

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化
https://googledrive.com/host/**************/ ...

同じように、

GoogleDriveでJavascriptファイルも共有設定にて、

外部からの読み込みが可能なので、

今度は、
当ブログにて使用している一部の、
.jsファイルも同じ
Googleのサービスで統一する為に、

  • GoogleDriveにて設定した方が良いだろうという事、
  • GoogleDriveの方が読み込みが速いということもあり、

CSSファイルの外部化と同様に、

JavascriptファイルGoogleDriveにて設定しました。

その結果、
ページ表示速度が、

さらに約5~10%程度速くなりました。

『やり方』

基本的には、
以下(上記)URLの時と同様なのですが、

まずは、
以下URL内にリンクされている
blinker.jsファイル
ローカルにダウンロードします。

個別ページの前後記事表示をタイトル名に変更する方法

そしたら、

CSSファイルの外部化の時と同様に、

ローカルに保存したblinker.jsファイルを、
GoogleDriveにアップロードし共有設定を変更します。

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化
https://googledrive.com/host/**************/ ...

そして、
blinker.jsファイルをアップロードした際、
共有設定にした時に表示されたURLをコピーしておきます。

こんな感じのURLになります。

https://docs.google.com/file/d/***********************/edit?usp=sharing

この中で重要な部分は、
紫色の部分です。

そして、

GoogleDriveでのURL

https://googledrive.com/host/***********************/

の同じく紫色部分に、

上記共有設定した際の

https://docs.google.com/file/d/***********************/edit?usp=sharing

紫色部分を、

https://googledrive.com/host/***********************/

紫色の部分に記載します。

具体的には、

以下の様になります。

https://googledrive.com/host/0ByGfTGP3BREvZERaSzhLZkVqNXc/

そして、

テンプレートのHTML編集にて、

header内に、
以下の様に記述します。

<script src="https://googledrive.com/host/0ByGfTGP3BREvZERaSzhLZkVqNXc/"></script>

以上で、

Javascriptファイルの外部化ができます。

ページャ部分の、
HTMLの"a"要素には、

すでに、
以前のHTML編集にて、

"blinker"クラスを追加し、bLinkerをロードするコードを追加

してあるので、
そちらはいじる必要はないです。

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.

コメント

スポンサーリンク
タイトルとURLをコピーしました