Dropboxを使って自分用のCDNを作成する

公開日 : 最終更新日 :

カテゴリー :

Bloggerには外部のJavascriptやCSSを保存する仕組みがありません。なのでJavascriptやCSSを使うには、HTMLの中にベタ書きするかCDNを使うしかありません。ベタ書きだとHTMLのコードが長くなり読むのが辛くなります。CDNだと使いたいJavascriptやCSSが、その制作者によって配信してくれている場合もありますが、基本はレンタルサーバーなどを契約しないといけないのでコストがかかります。自分が使いたいものを無料で配信できたりすると楽になります。今回は、Dropboxの共有機能を使って自分用のCDNをBloggerで使うやり方を紹介します。

Dropboxの設定

まずはDropbox側の設定からです。Dropboxのアカウントを持ってない方はアカウントを取得してください。Dropboxの使い方等はほかの紹介しているサイトでお願いします。

  1. 使いたいJavascriptやCSSをDropboxの「Public」フォルダに入れる
    dropbox-1
  2. 使いたいJavascriptやCSSのファイルをクリックして「パブリックリンクのコピー」をクリック
    dropbox-2
  3. 出てくるリンクをコピー
  4. 完了

Dropboxでリンクを取得するための注意として、使いたいコンテンツを必ず「Public」フォルダに入れてください。それ以外のフォルダでも「リンクを取得」というところでリンクは取得できますが、外部Javascriptとして読み込ませることができないので注意してください。

Bloggerの設定

次にBlogger側の設定です。基本的には、Dropboxで取得したリンクを貼り付けるだけです。

  1. 「テンプレート」→「HTMLの編集」ボタンをクリック
  2. 続行をクリック
  3. ブラウザのページ内検索で(Ctrl+F(Macの場合はCommand+F))

    <script src='http://www.example.com/example/example.js' type='text/javascript'/>

    を探す(赤字はサンプルです。)
  4. src=’〜の部分(上のコードの赤字部分)をDropboxでコピーしたリンクを貼り付ける
  5. 「テンプレートを保存」ボタンをクリック
  6. 完了

以上がCDNの作成になります。CDN元にDropboxを使っているので速度はそこまで期待できないと思いますが、コードを読みやすくできますし、制作者が配信しているCDNではコードをいじれないのでちょこっと弄りたいときにも使えます。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>