Google-ドライブを使ってアメブロフリープラグインの外部化
以前にも、このブログにグーグルドライブを使っての「アメブロのフリープラグインの外部化」について書いたんですが、ドライブ側の仕様変更がありましたもんで再度、外部化について書いてみたいと思います。
（■ダラダラと長い記事になりますm(_ _ )m）
アメブロのフリープラグインは、アメブロに動きのある動作（アクセス解析、ブログパーツ等）をさせる為に必要なスペースですが、文字数制限が半角３８００文字となっていて、非常に少ない文字数しか入力することができません。
それを.jsファイル（スクリプトファイル）と呼ばれるものを作って、外部の公開サイト（今回はグーグルドライブ）に保存して、それを読み込むだけのタグをフリープラグインに設置して、文字数を節約しようというものです。
って解りにくいですよね・・汗
例えば、こんだけの文字数を貼り付けなきゃいけないところを（↓）
<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>
$(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>
※上の例だと半角７２５文字を、たったの１１２文字に大幅に文字数節約出来ちゃってます。
前置きが長くなりました・・m(_ _ )m
もう少し具体的に御案内してみます。
アメブロフリープラグインの外部化：グーグルドライブ編
1．スクリプトタグをファイル化する
埋め込みコード提供サイト（フェースブック等）から提供されるコードの中の<script type="text/javascript">～～～～</script>で挟まれた赤字部分をコピーしてパソコンのメモ帳等に一旦保存します。（※フリープラグインの文字数に余裕がある場合は、このコードをそのまま貼り付けて動作確認して、その後、赤字部分部分をパソコンのメモ帳に保存して外部化し、それを差し換えてもOKです。ただ、その場合、若干コードが変わりますので注意が必要です）（↓）
<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>
$(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>
a.赤字部分をコピーしてパソコンのメモ帳に貼り付けて下さい。（↓）
b.そして、任意のファイル名をつけ、文字コードを「UTF-8」にして、任意の場所（ここではマイドキュメント内の■メモとしました）に保存して下さい。
※ファイル名は、必ず半角英数字で記述し、最後の拡張子には「.js」をつけて下さい。（ここでは、「01kijisita.js」としました。）
（↓）
・これで、.jsファイル（スクリプトファイル）が出来ました。
2．Google-Driveにアップロードする
1.このファイルを、グーグルドライブをウェブで起動してから、そこへドラッグ＆ドロップでコピーします。（↓）
※ここが、ドロップボックスと違う所で、必ずグーグルドライブをウェブで開いて、その起動されたドライブにドラッグ＆ドロップでコピーして下さい。ローカル（Cドライブとか・・）でドラッグしてファイルをコピーしても反映させることができませんので注意して下さい
2.次に、グーグルドライブの公開設定してあるフォルダーにドラッグして移動して下さい。
※公開設定の仕方は、こちらを参考にして下さい
⇒グーグルドライブのフォルダーの公開設定
（※この時、ドライブから「このファイルを共有しますか？」と聞いてきますので「OK」ボタンを押すと共有（公開）されます。）（↓）
3.公開設定（共有）したファイルのURLをコピー。
（※ここからが前回と違うところです。）
a.上で移動した先（今回はpublic）フォルダーをダブルクリックして開いて、更に、お目当てのファイルをダブルクリックします。（↓）
↓
b.更に切り換わった画面上部右側の「ポップアウト」をクリックして、次に切り換わった画面上部の「共有」をクリックします。（↓）
↓
c.切り替わった画面の中央やや上の出力フォームに表示されたコードをコピーして下さい。（↓）
■今、コピーしたものが、ＪＡＶＡスクリプトファイルとよばれるもののＵＲＬになります。
3．Google-Driveにアップしたファイルを読み込む
フリープラグインに先ほどの<script type="text/javascript">～～</script>までのコードを貼り付けてる場合は、一旦、全部削除して下さい。
（※うまくいかなかった時のために、この作業をする前のフリープラグインを、メモ帳等にコピーして保存しておくと安心です。）
※これを貼り付けてる場合は全部削除（↓）
<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>
$(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="～～" ></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="https://～～～.js"> </script>で囲ったコードをフリープラグインに貼り付け
<script type="text/javascript">～～</script>の～～部分をコピー→パソコンのメモ帳に貼り付けて、文字コードをUTF-8にして、ファイル名の最後を.jsにして保存→グーグルドライブの公開設定にしてあるフォルダーにドラッグしてコピー→そのファイルのＵＲＬをコピー→コピーしたＵＲＬを<script src="https://～～～.js"> </script>で囲ったコードをフリープラグインに貼り付け
【補足】
（１）今迄に、フリープラグインを使ったカスタマイズをしてる方は既にJQueryを有効にするための以下のようなコードをフリープラグインに貼り付けてらっしゃると思いますが、もしまだの方は、こののコードをフリープラグインの最上部に貼り付けて下さい。（↓）（二重に貼り付ける必要はありません。）
<script src="http://www.google.com/jsapi"> </script>
<script>google.load('jquery','1') </script>
<script>(function(j){j(function(){$=jQuery=j})})($) </script>
<script>google.load('jquery','1') </script>
<script>(function(j){j(function(){$=jQuery=j})})($) </script>
（２）グーグルドライブのアカウントをお持ちでない方は、こちらが参考になると思います。（グーグルのヘルプです）⇒Google ドライブのスタートガイド - ドライブ ヘルプ
（３）グーグルドライブのインストール及び活用方法について、もっと詳しく、なお且つ解り易く松本さんが説明して下さってます⇒Googleドライブをアメブロにアップロードできない形式のファイル置き場として利用する - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで
○思うこと
アメブロを使い易く、またちょっとオシャレにしたい時なんかに「フリープラグイン」を使わないとできないことが多いです。
で、うっかりすると、すぐ字数制限に引っかかったりしちゃいます。
最初はちょとややこしいと思われるかもしれませんが、ちょっと憶えちゃうと以外に簡単なのが、このフリープラグインの外部化です。
このやり方を憶えちゃうとブログ運営がより楽しいものになると思います。
アメブロを使い易く、またちょっとオシャレにしたい時なんかに「フリープラグイン」を使わないとできないことが多いです。
で、うっかりすると、すぐ字数制限に引っかかったりしちゃいます。
最初はちょとややこしいと思われるかもしれませんが、ちょっと憶えちゃうと以外に簡単なのが、このフリープラグインの外部化です。
このやり方を憶えちゃうとブログ運営がより楽しいものになると思います。
☆ブィブィ ('-^*)/
飼い主さんが几帳面なんだと思います。
ね！？