グーグルドライブを使ってフリープラグインを外部化する方法

アメブロのフリープラグインをGoogle driveを使って外部化する方法

※追記：GoogleドライブのUI（操作画面）が以前と変わりました。現在のUIでの方法をこちらに改めて書きました⇒アメブロフリープラグインの外部化：グーグルドライブ編

こんにちワ。福士蒼汰です。。ワンタンですww
こんなことばかり（↑）やってると、そのうちファンの方に怒られますね（汗）。

今回は、グーグルドライブの公開フォルダーを使って、アメブロのフリープラグインを徹底的にダイエットする方法を御案内してみたいと思います^^;

自分の場合は、今までドロップボックスを使って、フリープラグインの外部化をしてたんですが、今は新規にドロップボックスのパブリックフォルダーを使うには、有料でないと使えなくなってしまってるそうです。

ドロップボックスを使っての外部化と、その手順は、ほとんど同じなんですが、保存先がグーグルドライブになるので、グーグルドライブでの作業の仕方が少し違います。

※ドロップボックスを使った外部化の方法は、こちらの先生が詳しく書かれてます。
⇒アメブロフリープラグインの外部化…Dropboxを使う編｜パソコンが好きになるブログ～表技・裏技・便利技伝授！

※また、グーグルドライブのアカウント取得方法は、こちらで松本さん（旧名：わざめーばさん）が詳しく説明されてます。
⇒Googleドライブをアメブロにアップロードできない形式のファイル置き場として利用する (2) - アメブロカスタマイズと読者を増やすブログ運営　初心者からプロまで

例えば、これは、フェースブックページのライクボックスを記事下に設置するための、フリープラグイン用コードです。（↓）

<script type="text/javascript">
$(function(){
$("div.articleText").append('<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E3%2581%2582%25E3%2582%2593%25E3%2581%25AA%25E3%2581%2593%25E3%2581%25A8%25E3%2581%259D%25E3%2582%2593%25E3%2581%25AA%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25A9%25E3%2581%2586%25E3%2581%25A7%25E3%2582%2582%25E3%2581%2584%25E3%2581%2584%25E3%2581%2593%25E3%2581%25A8%2F1402967886616315&width=600&height=590&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:590px;" allowTransparency="true"></iframe>');
}
); </script>

上のコードの文字数を、これだけ少ない数にする事が出来ます（↓）。

<script src="https://googledrive.com/host/0B84mQqgu9kPGa1RLd3plRl9EdTA/kijisita2.js"> </script>

こんなちょびっとの文字数で、こんなのがアメブロに設置出来ちゃいます^^;

アメブロのフリープラグインをGoogle driveを使って外部化する方法

メニュー：目次

1．フリープラグインの中のスクリプトタグをファイル化する
2．Google-Driveにアップロードする
3．Google-Driveにアップしたファイルを読み込む

1．フリープラグインの中のスクリプトタグをファイル化する

コードの中の<script type="text/javascript">～～～～</script>で挟まれた赤字部分をコピーして下さい。

つぎに、コピーしたものをパソコンのメモ帳に貼り付けて下さい。

そして、任意のファイル名をつけ、文字コードを「UTF-8」にして、任意の場所（ここではマイドキュメント内のMemo 0109としました）に保存して下さい。

※ファイル名は、必ず半角英数字で記述し、最後の拡張子には「.js」をつけて下さい。（ここでは、「kijisita.js」としました。）

・これで、スクリプトファイルが出来ました。

2．Google-Driveにアップロードする

1.このファイルを、グーグルドライブを起動してドラッグしてコピーします。

※ここが、ドロップボックスと違う所で、必ずグーグルドライブを起動させて、その起動されたドライブにドラッグしてコピーして下さい。

2.次に、グーグルドライブの公開設定してあるフォルダーにドラッグして移動して下さい。

※公開設定の仕方は、松本さんが、こちらで書かれてます。
⇒Googleドライブをアメブロにアップロードできない形式のファイル置き場として利用する (4) - アメブロカスタマイズと読者を増やすブログ運営　初心者からプロまで

3.公開設定してあるフォルダーに移動したファイルの左上方の四角いマークをクリックして右側のサイドバーのような箇所の下方に表示される「ホスティング」と書かれた箇所のhttps～から始まるコードをコピーして下さい。（※この際、右上部の「詳細」にマークが付いている事を確認して下さい。マークが付いていなければ付けて下さい。）

今、コピーしたものが、ＪＡＶＡスクリプトファイルとよばれるもののＵＲＬになります。

3．Google-Driveにアップしたファイルを読み込む

フリープラグインの先ほどの<script type="text/javascript">～～</script>までのコードを全部削除して下さい。
（※うまくいかなかった時のために、この作業をする前のフリープラグインは、メモ帳等にコピーして保存しておいて下さい。）

先ほど、グーグルドライブで取得したＵＲＬを、<script src="～～" ></script>で囲ったコードをフリープラグインに貼り付けて保存すれば、作業は完了です。

<script src="https://googledrive.com/host/0B84mQqgu9kPGa1RLd3plRl9EdTA/kijisita2.js"> </script>

※アメブロの場合は<script>タグ内に書かれている「type="text/javascript"」は消しても問題ありません。
これがなくてもJavaScriptであることになっていますので、消してしまっても大丈夫です。

○作業手順
<script type="text/javascript">～～</script>の～～部分をコピー→パソコンのメモ帳に貼り付けて、文字コードをUTF-8にして、ファイル名の最後を.jsにして保存→グーグルドライブの公開設定にしてあるフォルダーにドラッグして、ファイルのＵＲＬをコピー→そのＵＲＬを<script src="～～"> </script>で囲ったコードをフリープラグインに貼り付け

○思うこと
自分の場合、「グーグルサイト内検索」、「qlookアクセス解析」等々、結構フリープラグインを使ってます。
この外部化をしなければ、とっくに、文字数制限３，８００字は超えちゃってると思います。

この外部化の方法を憶えられて良かったと思ってます。

☆ブィブィ ('-^*)/

俺をすてると、後悔するぜ・・

ね！？

表示 - 継承 2.1

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

グーグルドライブを使ってフリープラグインを外部化する方法