スポンサーリンク

2013年8月11日日曜日

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

新しい記事 以前の記事

以前、

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

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


という思いから、
以下投稿をしました。


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


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



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

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


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


同じように、

GoogleDriveJavascriptファイル共有設定にて、


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


今度は、
当ブログにて使用している一部の、
.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をロードするコードを追加


してあるので、
そちらはいじる必要はないです。
スポンサーリンク



スポンサーリンク

この記事が気に入ったらいいね!
お願いします(#^.^#)

↓↓↓

最新情報をお届けします

言えないことはTwitterで!!


こんな記事も書いてます



関連性の高い記事


0 コメント:

コメントを投稿

次の投稿 前の投稿 ホーム
Related Posts Plugin for WordPress, Blogger...