カスタマイズ性に優れていると言われているSeesaaブログですが、htmlとcssだけでは実現できないものもあります。
そこでプログラミングなんて経験がなくまったく出来ませんが、プラグインなど比較的導入が簡単そうなjQueryを使えるようにSeesaaブログ内に設置してみました。
CDN（Content Delivery Network）を使った設置方法
エンドユーザー向けにWEBコンテンツを配信しているネットワーク・サーバのことで、誰でも無料で利用できます。
jQueryの場合は、Google、Microsoft、jQueryが、それぞれCDN配信しています。
- Google Ajax API CDN
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js - Microsoft CDN
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js - jQuery CDN
https://code.jquery.com/jquery-2.1.4.min.js
URLの中にjQueryのバージョンが入っているので、リンク先は定期的にチェックしておくと、常に最新の状態で使えます。
当然ですが、やはり本家のjQuery CDNが最新バージョンですね。
このリンクをブログを開いた時に読み込まれるように、<head>タグの中に記述します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><head>タグ内であればどこでも良いようですが、<meta>タグの後あたりが無難なようです。
デメリットとしては、誰でも使えるCDNですので、多数のアクセスが集中した場合、動作が遅くなる可能性があります。そうならないためのネットワーク分散サーバなのでしょうが、使っているインターネットの経路上で影響が出ないとは限りません。
また、ｊQuery CDNのバージョンが上がったりするので、設置後長期間放置していると旧バージョンのリンク先が使えなくなっていたりするかもしれません。
Seesaaブログのサーバ内に設置する方法
Seesaaブログのファイルアップロードサービスは、画像ファイルだけでなく実行ファイルもアップロードできます。
１．jQuery本体を入手
ｊQueryのホームページから「ｊQuery」本体をダウンロードします。
jQuery 1.x 系とjQuery 2.x 系の２種類あります。
jQuery 1.x 系は旧バージョンながらブラウザの新旧を問わず、動作させることが出来ます。
jQuery 2.x 系は最新バージョンの機能が盛り込まれていますが、IE8以前の旧ブラウザでは動作できないようです。
ブログのターゲット層に合わせて、選択しましょう。
1.x 系も2.x 系にも、それぞれいくつかファイルが有り、どれをダウンロードするか迷いますが、設置して使うだけなら「production jQuery」で良いようです。
「development jQuery」は、上級開発者向けのようです。
２．jQueryをSeesaaブログへアップロード
ダウンロードした「jquery-x.x.x.min.js」ファイルを、Seesaaブログのファイルマネージャを使ってアップロードします。
Seesaaブログの管理画面から「ファイルマネージャ」を選択します。
[アップロードオプションの表示]を押して、オプション画面を表示させます。
- タイトル
「jQuery」と入力しました。実際のファイル名にかかわらず、ここに入力した名称で表示されます。 - オプション
画像に関する項目ですが、一応チェックを外しました。 - ディレクトリ
「jquery」を新しく追加してアップロードしました。
３．jQueryへのリンクをHTMLに設置
CDN（Content Delivery Network）を使った場合と同じく、<script>タグを使ってHTMLに記述します。
ファイルマネージャのファイル一覧から、「jQuery」をクリックすると「ファイル編集」が開きます。
アップロードした「jquery.js」ファイルへのURLが確認できます。
こちらを元に<script>タグを作成します。
<script type="text/javascript" src="https://weblog10.up.seesaa.net/jquery/jquery.js"></script>ファイルをアップロードするときに、元々のファイル名を「jquery-x.x.x.min.js」から「jquery.js」へ変更しています。
バージョンナンバーが入ったままのファイル名でアップロードしていると、バージョンアップの度にHTMLファイルも修正しないといけなくなるので、「jquery.js」に統一してアップロードするようにします。
注意点として、先にアップロードされている「jquery.js」を削除してから、新しい「jquery.js」をアップロードしないと末尾に勝手に文字列が追加されて別ファイルとして登録されます。
管理画面の「デザイン」から「HTML」を選択します。
<head>タグ内の<meta>タグのすぐ下に設置してみました。
「保存」して設置完了です。
動作を確認
設置したjQueryの動作確認をします。
こちらのコードを普通に新規記事として投稿してみます。
<script type="text/javascript">
$(function() {
$("p").click(function(){
alert("Hello!");
});
});
</script>
<p>クリックするとダイアログが出るよ！</p>ブログ画面で文字をクリックすると「Hello!」と書かれたダイアログが表示されれば成功です。
結果は、成功です！
無事ダイアログが表示されました。
まとめ
ダイアログが表示され一応は成功しましたが、若干わけの分からない挙動をしてしまいます。
ダイアログを消そうと「OK」ボタンを押すと、次々と5回ほど連続してダイアログが現れます。
ｊQueryもjavascriptもほぼ分かっていないので理解に苦しみますが、どこにも5回繰り返すような記述はないはずなんですが・・・
とりあえず設置自体はできて、動作もしています。
jQueryプラグインなど多数存在していて、面白いことが出来るようなので、いろいろと試していこうと思います。
