はてなブログでDropboxを使った外部JSファイル読込、AdSense設置が捗るよ
こんにちは、くみです。
今日、『Dropboxに外部JSファイルを置いて、はてなブログに外部JSファイルを読み込みHTMLに書き込む』事に成功したので、忘れないうちにメモしておきます。
やったぜ。
これで記事中のAdsenseのソースの一括メンテナンスができるようになります！
目次
何ができるの？
私は外部JSファイルにAdSenseのコードを入れて一括管理に使おうかと。
以前、AdSenseを記事下ではなく記事中に配置したら？という助言を頂いたのですが、はてなブログなので記事一つ一つにコードを埋め込んでいかなければいけません。（WordPressでは一括でできるのかは知らない。みんな配置しているので多分そういう素敵なプラグインがあるのだろう…(´･ω･`)）
何か変更したり、取り除いたりする時に記事一つ一つを編集しなければいけないのは非常にしんどい。外部JSファイルの読み込みなら、外部JSファイルを変更すれば一括で変わるし、JSファイルの中身を空にすればAdSenseを一括で取り除く事ができるのでメンテナンスが非常に楽！やったぜ！
記事中でJavascriptを実行させてくれるはてなブログ先生、さすが懐が深いやで…
はてなブログでAdSenseコードの外部JSファイル読み込み 手順
- AdSenseコードの取得
- 外部JSファイルを作りそこにAdSenseを記載
- 外部JSファイルをDropboxにアップ
- はてなブログのHTML編集画面でJSを埋め込む
1. AdSenseコードの取得
記事中用のコードをAdSenseで普通に取得します。
2. 外部JSファイルを作り、そこにAdSenseを記載
私はテキストエディタで。こんな感じで書きました。
document.write('');
document.write('スポンサードリンク');
〜以下AdSenseのコードをdocument.writeで書き出し〜
拡張子は.js。
document.writeなんてすごい久しぶりに使った、っていうかJavascript自体久しぶりすぎる…
3. 外部JSファイルをDropboxにアップ
Publicフォルダに（念のためJSフォルダを作って、そこに）アップ。
URL取得方法が一瞬わからなかったけど（シェアリンクだと違いそう）、ローカルファイル右クリックで取得することが出来ました。
4. はてなブログのHTML編集画面でJSを埋め込む
<script src="（さっき取得したURL）" type="text/javascript"></script>
これで完成〜
私はDashというMac Appのスニペット機能ですぐに出るようにしました。楽ちんだ。（スニペット機能というのはIMEの辞書登録が高度になったようなやつです）
思いついた経緯
10年前くらいにWebデザイナーという名の制作何でも屋をやっていた時の経験から、外部JSファイルを読み込んでHTMLとして記述できるのは知っていたのです。（コピーライトのフッタ部分を外部JSファイルに切り出すことで年号を一括で変更できるようにとかしてました）
なのでAdSenseコードを外部JSに切り出せばメンテナンスが一括でできるなあ…という発想まではそんなに難しくなかったのですが、しかしなんせはてなブログなので、外部ファイル置けないや…(´･ω･`)ションボリというところで止まっていました。
今日ふと思いついて『dropbox javascript』で検索してみたら、なんかDropboxをWebサーバみたいに使えそう…！！
というわけでぐぐってぐぐってやってみました。
なんかまずいことがあったら教えてください
もう現役ではなくあまり技術に明るくないので、もしかしたら落とし穴があるかもしれぬ。優しくご指摘ください。（豆腐メンタルなので…）もしかしたらAdSenseの規約違反だったりするんやろか(´･ω･`)まあそしたらそのうち気がつくだろう。
もしかしたらもう誰かがとっくにやってブログとか書いているかもしれないんですが、私は見つけられなかったので私が書くことにも意味がある！はず！
この記事で早速Read moreの次のところに埋め込んでみたので、知りたい方はソースを見てみてください( ´∀｀)
というわけで満足。おやすみなさい。
追記
私は記事中へのAdSenseの配置を人から勧められたのですが、『記事中のAdSenseへの配置はSEOに悪影響』という説もあるので、自己責任で試してみてください〜。
（そうなった時に一括で取り除けるようにしたいがための今回のJS埋め込みでもあります）
関連記事
はてなブログカスタマイズ関連記事
テック関連記事
