BloggerやAndroid、PCゲームなど興味があるジャンルの情報や備忘録などをメインに活動中です。
Bloggerのページャにリンク先のタイトルを自動で挿入する記事を前回(Bloggerのページャにリンク先のページタイトルを挿入する)書きました。
このブログでもそのコードを利用していたのですが、前回のように直接ブログ記事を取得してタイトルをHTMLから抜き出す方式にすると、以下のような問題が発生しました。
今回作成したプラグインは、Bloggerのフィードから記事情報を取得してタイトルを抜き出しているので、3つの問題を解決することができました。実際に書いたプラグインは以下からダウンロード可能です。
最初に、jQueryのコアファイルをロードするコードをテンプレートに追加します。既に追加済みの方は次へ進んでください。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>次に、ダウンロードしたbLinkerをロードするコードを追加します。JSファイルへのパスは各自であわせてください。
<script src="/blinker.js"></script>最後に、リンク先のタイトルを表示したいリンクの"a"要素に"blinker"クラスを指定し、bLinkerをロードするコードを追加して完了です。
<a class='blinker blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
<a class='blinker blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
<script>$(function(){$.blinker().load();});</script>Bloggerのフィードに対して"path"パラメータと"alt"パラメータを指定して呼び出し、取得したJSONデータからタイトルを取得するような内容になっています。タイトルのほかにもタグや更新日などの記事に対する情報も取得することができます。機能拡張などの要望がありましたらコメントにて提案していただければ導入を検討いたします。
link[2011/10/01] 新しい記事を書きました。
Bloggerに複数の記事をポストしていくと、日本の場合「次の投稿」と「前の投稿」、英語の場合「Older Posts」と「Newer Posts」というページャリンクが表示されるようになります。他のブログエンジンでは、この部分に記事のタイトルを表示できるのですが、"<data:newerPostTitle/>"のようなデータタグは用意されていないようです。
そこで、この部分を再現するjQueryコードを書きました。以下にそのコードを示します。
$(function(){
var element = $(".blog-pager-newer-link").attr("data-element");
var newerLink = $(".blog-pager-newer-link").attr("href");
$.ajax({
type : "GET",
url : newerLink,
success : function(html){
var title = $(html).find(element).text();
$(".blog-pager-newer-link").text(title);
}
});
});このコードは、"blog-pager-newer-link"クラスを持つ"a要素"から"data-element"属性と"href"属性の値を取得して利用しています。"deta-element"属性には、記事のタイトルを含む要素を指定してください。このブログで利用している設定を以下に示します。
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' data-element='.post-title-wrapper a'><data:newerPageTitle/></a>このブログでは"post-title-wrapper"クラスを持つラッパーの中に"a"要素がありその中にタイトル文字列が格納されているため、"data-element"属性には".post-title-wrapper a"を指定しています。この部分はテンプレートによって異なるので利用する際は適宜修正してください。
この"a"要素を使って非同期通信を行い、取得したHTMLからタイトルを取得し、"a"要素の内容に結果を出力しています。
この方法は、このスクリプトが実行されたブログから自身のブログに対してのみ有効です。たとえば、このスクリプトが実行されるブログ"aaa.blogspot.com"からその他のブログ"bbb.blogspot.com"に対してタイトルを取得しようとしても失敗します。特にローカルテストを行う際にはこの点に注意が必要です。
そのうちjQueryプラグインにして再度記事にするかもしれません。
link前回の記事「BloggerにTwitterでの反応を表示する」で、ブログの各記事に対するTwitter上でのつぶやきを表示する方法を書きました。しかし、前回の方法だとソースコードに直接記述しなければならないことと、カスタマイズし辛いという2点の問題がありました。
なので前回の記事で紹介したコードを、jQueryプラグイン方式にして、ソースを一部改良しました。
まずjQueryのCoreファイルをロードするためのコードをテンプレートに追加します。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>次に、筆者が作成したjQueryプラグイン"Backtweet"をロードするためのコードを追加します。以下のファイルをダウンロードして保存し、WEBから参照可能な場所にアップロードしてください。
<script src="backtweet.js"></script>さらに、以下のプラグインの動作設定と、ツイートを表示するDL要素をテンプレートに追加します。
<script type='text/javascript'>$(function(){$.backtweet('#backtweet').load(document.URL);});</script>
<dl id='backtweet'/>最後に、CSSを追加します。以下のコードは最低限必要なコードですので、詳細な装飾は各自で施して下さい。
#backtweet dt{float:left;}注意点として、CSSのFloatを制御するコードである"clearfix"を利用しているので、必ずCSSに追加しておいてください。これを忘れるとレイアウトが著しく崩れる可能性があります。
<dl id="backtweet">
...
<dt>
<a href="TwitterAccountURL" target="_blank">
<img src="TwitterAccountIcon" alt="TwitterAccountScreenName" width="48" height="48"/>
</a>
</dt>
<dd class="clearfix">
<p class="backtweet-header">
<span class="backtweet-author">
<a href="TwitterAccountURL" target="_blank">TwitterAccountScreenName</a>
</span>
<span class="backtweet-info">TwitterAccountName, YY/mm/dd</span>
</p>
<p class="backtweet-content">Tweet</p>
</dd>
...
...
...
</dl>Tumblrにはタグクラウドを表示する機能がありません。なので今回はjQueryを使ってタグクラウドを表示するプラグインを作ってみました。既に他の方もやっているようですが、自分なりに改造しやすいような形で再開発してみました。初めてjQueryでプラグインを作ったので多少バグはあるとは思いますが公開します。
GoogleAppEngineにスタティックファイルとしてアップロードしました。Tumblrにはファイルをアップロードできないので置き場が無い方は以下のリンクを利用してください。
http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.js(非圧縮版)
http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.min.js(圧縮版)
多分ありえないとは思いますが、トラフィック的に限界が来た場合は、こちらでアナウンスします。
ライセンスにはあまり詳しくないので、大雑把に以下を守っていただければ幸いです。
このプラグインは、jQuery最新版(執筆時点で1.6.4 1.6.3)を利用してデバッグしています。その他のバージョンでは動作しない可能性があります。注意してください。筆者はGoogleがホスティングしているjQueryの最新版を利用しています。今回はそのjQueryを利用していきたいと思います。
まず、設置するページの<head></head>の部分にGoogleがホスティングしているjQueryをロードするコードを追加します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>次に、筆者がホスティングしているTanglrをロードするコードを<head></head>の部分に追加します。
<script src="http://zerippe.appspot.com/libs/tanglr/1.0/tanglr.js"></script>これでプラグインのロードが完了したので、タグクラウドを追加する部分とプラグインの実行を行います。
<script type="text/javascript">
$(function(){
var tanglr = $.tanglr("#tags");
tanglr.load("http://{BlogName}.tumblr.com");
});
</script>
<div id="tags"></div>上記コードはプラグインの実行部分です。赤文字のBlogNameの部分を自分のTumblrページの名前にあわせて下さい。以上で導入は終了です。
jQueryに詳しい方は、$.tanglr("element").pluginit({})に連想配列を渡すことによって、デフォルトの設定をオーバーライドすることができます。デフォルトの設定と値の詳細は以下の通りです。
{
api_url : "/api/read/json?callback=?&num=50&start=",
tag_url : "/tagged/",
max_load : 100,
max_size : 30,
min_size : 12,
unit : "px",
renderer : default_renderer
}| api_url | JSON取得用のAPI URL |
| tag_url | Taggedページへのパス |
| max_load | タグ取得する際に読み込み記事数。値が大きいほど動作が遅くなります。最小値50, ステップ値50(50, 100, 150, 200 …) |
| max_size | クラウド表示時の最大フォントサイズ |
| min_size | クラウド表示時の最小フォントサイズ |
| unit | クラウド表示時に使用する単位(px, em …) |
| renderer | タグを整形して表示するコールバック関数 |
上記値をオーバーライドする方法は以下の通りです。
<script type="text/javascript">
$(function(){
var tanglr = $.tanglr("#tags");
tanglr.pluginit({
max_load : 200,
unit : "em",
renderer : function(that, url, tag, size, value){
that.append(tag);
})
});
tanglr.load("http://{BlogName}.tumblr.com");
});
</script>
<div id="tags"></div>この例では、最大読み込み記事数を200、フォントサイズの単位を”em”、レンダラを変更し単純にタグを追加する関数を適応しています。この関数の引数の詳細は以下の通りです。
| that | タグを追加するDOM要素(この場合は”#tags”) |
| url | tanglr.load()に渡されたURL |
| tag | タグ文字列 |
| size | 内部で計算されたフォントサイズ |
| value | タグの出現回数 |
レンダラをオーバーライドした場合、内部的に利用できるデフォルト値を使用することができません。具体的には、以下の例の”default_params.tag_url”のような変数にアクセスできなくなります。
デフォルトのレンダラは以下のような形式になっています。
that.append("<span style=\"font-size:" + size + "\"><a href=\"" + url + default_params.tag_url + tag + "\">" + tag + "(" + value + ")</a></span>\n");これ以外の書式的な設定はCSSで設定することをお勧めします。
link