アメブロ フリープラグインの外部化…Dropboxを使う編 | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上です。



<追記>(2014年5月21日)
ここでお伝えしている機能(DropboxのPublicフォルダの使用)は、無料ではできなくなっています。
有料になってしまいましたので、取り急ぎお知らせいたします。
【注意】DropboxでPublicフォルダを使うには有料登録になってしまった!




「アメブロのフリープラグインの文字数制限で文字数がオーバーしてしまったときにも、外部ファイル化としてDropboxを利用することもできますね。」

といった声があちこちであったそうで・・・^^;

そう、アメブロのフリープラグインって、最大で3,800文字までしか保存できないものですので・・・
(その説明は過去記事をご覧ください→『「フリープラグイン簡単ダイエット」文字数3800文字制限に達してしまったとき(アメブロ)』

文字数がオーバーしてしまったら、別のところに避難させるとよいのです、ハイ^^


そこで、今回は、その別のところ

Dropbox(ドロップボックス)

にしてみます。
(Dropboxって?という方は、こちらをまずご覧いただいて、インストールをしましょう。)

さぁ、実際にやってみましょう!

まず、全体の流れはこちら↓になります。

◆フリープラグインの外部化(Dropbox)1.フリープラグインの中のスクリプトをファイル化する
2.Dropboxにアップロード
3.外部に置いたファイルを読み込む


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

まず、フリープラグインの中のスクリプトを1セット決めます。
(スクリプトって?という方は過去記事 『記事やコメントを読んだ後に『読者になる』を見せるには』をご覧ください^^)

川上雄大のワンポイントレッスン


ここでは、記事フッターの「アメブロで紹介」リンクのスクリプトを外部化してみます。

川上雄大のワンポイントレッスン

<!-- 「アメブロで紹介」リンク-->
<script>
$(function(){
$('.skinArticle').each(function(i,e){
var t=$('.skinArticleTitle',e);
$('.articleLinkArea',e).prepend('<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text='+encodeURI('『<a href="'+$(t).attr('href')+'" target="_blank">'+t.text().replace(/\s*$/,'')+'</a>』')+'" target="_blank">アメブロで紹介</a> | ');});
});
</script>


この<script>・・・・・・・・・</script>で挟まれた部分だけを抜き出します。


そう、例えば今回のケースでいえば、この黄色い部分だけ↓↓↓

<!-- 「アメブロで紹介」リンク-->
<script>
$(function(){
$('.skinArticle').each(function(i,e){
var t=$('.skinArticleTitle',e);
$('.articleLinkArea',e).prepend('<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?entry_text='+encodeURI('『<a href="'+$(t).attr('href')+'" target="_blank">'+t.text().replace(/\s*$/,'')+'</a>』')+'" target="_blank">アメブロで紹介</a> | ');});
});

</script>


(画像では赤色の部分↓↓↓)


川上雄大のワンポイントレッスン


コピーして、メモ帳に貼り付け(ペースト)します。

川上雄大のワンポイントレッスン

そして、ファイル名をつけて、文字コードを「UTF-8」にして、任意の場所(ここではマイドキュメント内の「jsフォルダ内)に保存します。

ファイル名は、半角英数字でつけて、最後の拡張子には「.js」をつけます。(ここでは、「shoukai.js」としました。)

そう・・・、javascriptファイルをまず作るのです。


川上雄大のワンポイントレッスン

2.Dropboxにアップロード

次に、このjavascriptファイル「shoukai.js」を、DropboxのPublic(パブリック)フォルダにドラッグして移動します。
これをDropboxにアップロード、といいます。

川上雄大のワンポイントレッスン

この時、パブリックフォルダが見当たらない方は、Dropboxの『パブリックフォルダ(Publicフォルダ)』を有効にします
(こちらの記事『Dropbox(ドロップボックス)でPublicフォルダが見当たりません』もご参考に。)

ブラウザでこちらのURL (https://www.dropbox.com/enable_public_folder) にアクセスして、「Publicフォルダを有効にする」ボタンをクリックします。
(詳しくは、わざめーばさんの記事をご参照ください。)

川上雄大のワンポイントレッスン


3.外部に置いたファイルを読み込む

いったん、フリープラグインに戻って、

赤い部分の<script>・・・</script>を削除して、
(もちろん、元のフリープラグインのスクリプトはメモ帳にコピーしてバックアップしておいてくださいね。)

川上雄大のワンポイントレッスン

外部に置いたjavascriptファイル(・・・.js)を呼び出すのに、このような↓コードを作ります。(コピー&ペーストします。)

<script type="text/javascript" src="javascriptファイルのURL"></script>

または、
<script src="javascriptファイルのURL"></script>
こちらの記事で説明しています。)


そして、このjavascriptファイルのURLは、アップロード先のURLに置き換えます。


そのアップロード先のURLは、

Dropboxのパブリック(public)フォルダ内のJSファイルを右クリックして、「公開リンクをコピー」をクリックして取得します。
ココが一番重要なポイント!

川上雄大のワンポイントレッスン

そのまま「クリップボードに貼付ける」をクリックします。

川上雄大のワンポイントレッスン

そして、アメブロのフリープラグインで、

<script type="text/javascript" src="javascriptファイルのURL"></script>

または、
<script src="javascriptファイルのURL"></script>


このjavascriptファイルのURLの部分に、アップロード先のURLを貼り付け(ペースト)します。

川上雄大のワンポイントレッスン

最後に、「保存」ボタンを押して、完成です!

あとは、うまくいったかどうか、ブログに戻って、F5キーを押して(何度か)更新してみてください。(Macの方は、command+Rキーを何度か押して更新してください。)



うまくいったら、他のブログパーツも同様に試してみるとよいですね。

ただし、jQuery(ジェイクエリー)のスクリプトだけは残しておいてください。

川上雄大のワンポイントレッスン


※注意!
フリープラグインを編集するときは、必ず作業前にメモ帳などに別途保存しておくことをお勧めいたします!

※補足
複数のスクリプトを個別にテキストファイルに保存する必要はありません。
すべてのスクリプトを1つのテキストファイル内にまとめて保存しておいてもOKです。
ただし、ファイルの拡張子は『.txt』ではなく、『.js』にしておくことをお忘れなく。



・・・と、
西川先生、リクエストいただきましてありがとうございました!こんな感じでよかったでしょうか~(笑)


<追記>
ネットサーフィンからの成功法則!
フリースタイル桐生 翔さん
から、この記事をご紹介していただいております。

フリープラグインをドロップボックスで容量アップ。




以上、フリープラグインの外部化でした。



LIDS澄川・ライフデザインスクール
川上 雄大