2014年6月18日水曜日

Bloggerにsaskwave.jsを組み込んでみよう

2014年6月18日水曜日 , , ,
拙作のsaskwave.js(saskwave.min.js)をBloggerに組み込む方法です。

このライブラリは必要に応じて拡張しているので、今のところできること自体は余り多くありません。シンプルなライブラリ…、というのもおこがましいくらいのコード量です。なんせ、テンプレートの方でいろいろできちゃうのでネタがないんですよね…。
ということでネタ募集中です(;^^

今のところ、Bloggerのフィードエントリー関連の処理を楽にすることがメインでしょうか。そういった処理を行う場合、saskwave.jsを使えば便利になります。シンプルなコードですので、詳しくは直接コードをお読みください。

http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/saskwave.js

ということで、 saskwave.js(saskwave.min.js)をBloggerに組み込む方法を紹介します。
なお、組み込んだだけでは何もおきないので、他の記事で実装なんかを紹介したいと思います。
というか本当にネタ募集中(;^^

組み込み方法

saskwave.js(saskwave.min.js)はjQueryライブラリを使用しています。
なので、saskwave.jsと一緒にjquery.min.jsを読み込む必要があります。
jquery.min.js自体はGoogleのCDNから直接使えば楽なので、そちらから使います。

それでは必要なファイルです。
saskwave.min.jsは上のリンクから直接使えますが、できれば自分のサーバないし,
自分のGoogleドライブにアップロードして使ってください。これはリンク切れ対策になります。

それでは本題です。

Bloggerのテンプレートを開き、HTMLの編集をクリックします。
下の画像で赤く囲ってある部分です。



そうすると直接テンプレートがいじれるので、Ctrl+Fで<head>を探します。
その中にmeta要素があるので、一番下のmeta要素を探し、すぐ下の部分を改行してあけてやります。下の画像でいうと、黄色で囲ってある部分です。


下記のHTMLコードをベースに、saskwave.min.jsを自前のサーバに置いたリンクに書き換えて、黄色の部分に貼り付けてください。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script src='http://googledrive.com/host/0ByEGaClBNxLRa3NFcm5UY2VQVkE/saskwave.min.js' type='text/javascript'/>
 
<!-- 下はsaskwave.jsで利用しているGoogle Feed APIです -->
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
  google.load('feeds', '1');
</script>

ダウンロードが面倒くさいという人は上記のHTMLコードをそのまま直接、黄色の部分に貼り付ければOKです(リンク切れは無保証ですが…)。

これで終わりです。

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)