saskwaveのブログ: jQuery

Saskwave.FeedEntryCollection クラス
クラスメソッド	説明
setNumEntries(num)	numに取得したい記事数を1～500の間の数字で指定する。記事が100しかない場合、500を指定しても最大記事数の100記事を返します。デフォルト(省略した場合)は、25です。
setOrderType(str)	strに文字列を指定する。記事の並びが日付降順なら'published'を、更新日順なら'updated'を指定します。デフォルト(省略した場合)は'published'です。
collect(callback)	callbackに引数を一つ持つコールバック関数を指定する。コールバック関数の引数は記事の配列となります。

2014年6月18日水曜日

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

2014年6月18日水曜日 blogger, javascript, jQuery, saskwave.js

拙作のsaskwave.js(saskwave.min.js)をBloggerに組み込む方法です。

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

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

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

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

2014年6月4日水曜日

Blogger単独で関連記事を表示する方法 (Related Posts)

2014年6月4日水曜日 blogger, css, html, javascript, jQuery, saskwave.js, フィード, 関連記事

Blogger単独で関連記事を表示する方法の模索をする (Related Posts)
http://saskwave.blogspot.jp/2014/05/blogger-related-posts.html

この記事でBloggerにも外部サービスに依存しない関連記事ウィジェットを実装したいと書きましたが、実装しました。

テンプレートは弄らないで実装できないか検討しましたが、テンプレートを弄らないとそもそも個別記事のラベルを取得する方法がないので、結局テンプレートを弄ることにしました。そのかわり最小限の編集で済むような実装にしてあります。

この関連記事ウィジェットの特徴

jQueryライブラリとsaskwave.jsを使ったシンプルな実装
コードはテンプレートへ追加するだけ
関連記事の表示は即時反映されます
表示件数を任意の数にしたり、関連記事ウィジェットのタイトルを編集できます
基本的な表示の制御はCSS(スタイルシート)のみで行えるようなHTML構造
見た目重視でサムネイル画像を全面採用 (記事に画像を掲載していない場合、代替画像が表示されます)
サムネイル画像は自動的に必要最低限の大きさにリサイズされるので、通信データ量を削減できる (通信が遅いモバイル端末に有利)
デフォルトで用意されている関連記事ウィジェットの表示方式は4種類 (見た目については下記を参照)
記事のラベルから過去記事との関連度を測って記事を抽出するので、関連度が高い記事をリストアップできる (関連記事は【関連度＋日付降順】に並びます)
必要なコードだけあれば、外部サービスに依存しないので、Blogger単独で利用可能 (Blogger以外のサービスに影響されません)

たくさん書きましたが、こんなところです。
一番の利点は、外部サービスに影響しない点と、ちゃんと関連度順に並ぶという点ですね。
あと見た目も選べるのも利点です。

それはさておき、デフォルトで用意されている表示方式は下記の通りです。
4種類(tile|vertical|horizon|none)あり、選択するだけで見た目が変わります。

2014年6月2日月曜日

Blogger単独で関連記事を表示する方法の模索をする (Related Posts)

2014年6月2日月曜日 blogger, css, html, javascript, jQuery, saskwave.js, フィード, 関連記事, 雑記

Bloggerで個別記事の下に関連記事が表示されるようになるといいかもしれないと思い、他社サイトはどうやっているか調査しました。

調査したところ、以下のような有名どころのサービスを利用しているケースが多いようです。

LinkWithin
サムネイル画像付きでレイアウトがきれいだが、関連しない記事も拾ってしまうよう。
外部サービスに依存するのでLinkWithinがサービス終了すると使えなくなるデメリットがある。

Bloggerブログの個別記事下に関連記事を表示するウィジェット「Linkwithin」
http://www.life-gp.net/2013/06/bloggerlinkwithin.html
Outbrain - Related Link Widgets
こちらもサムネイル画像が出せるタイプ。
記事に関連したOutbrainからの推奨記事も表示される(これが収益源の一つようです)。
LinkWithinと同じく、外部サービスに依存する。

コンテンツレコメンデーション最大手Outbrainのビジネスモデル
http://markezine.jp/article/detail/19029
Smarter Related Posts Widget for Google Blogger - v2.0
こちらもサムネイル画像が出せるタイプ。
LinkWithinと同じく、外部サービスに依存する。
これといって目新しいものはない。

[blogger]シンプルな関連記事表示がしたい！「Smarter Related Posts…
http://www.sunabox.net/2012/05/bloggersmarter-related-posts-widget-for.html
Blogger で「関連記事」リストを表示する 2 つの方法
Blogger Tipsで有名なクリボウさんのサイト。
この方法なら、Blogger単独で関連記事の表示ができるので、外部サービスに頼らなくていい。
ただ、ラベル一個ずつしか関連記事を表示できないので目的としたものと違う。

どれも当方が考えていた関連記事ウィジェットとは違いました。
当方が考えていた関連記事ウィジェットは以下の通りです。

Blogger単独で動く
簡単な組み込み作業で関連記事ウィジェットが表示できる
表示される関連記事は、個別記事の(複数の)ラベルを使ってマッチングし、
関連度が高い順に表示される (ラベル一個の関連記事じゃないということ)

一番欲しい機能の、項目3を実装した関連記事ウィジェットは他で見つかりませんでした。
なので、実装することにしました。実装するにあたって、以下の点は厳守です。

Blogger単独で最近の投稿を表示する方法 (Recent Posts)

blogger, css, javascript, jQuery, フィード, 最近の投稿

Bloggerには、最近の投稿(Recent Posts)ガジェットがないため、最近の投稿を追加できなかったりします。実現しようとすると大抵、Feed2JSを使うなど、外部サービスに頼らざる得ません。でも外部サービスを使う場合、外部サービスが終了したりすると急に使えなくなるので不便ですよね。

ちなみに、Bloggerのフィードガジェット使えばできるじゃん！って突っ込まれそうですが、あれは最大件数5件までだったりサムネイルを表示できなかったりでいろいろ不便です。

なので、作ってみました。
デフォルトではこんな感じに表示されます！

2014年5月6日火曜日

画像の読み込みを工夫して、Bloggerの記事をいち早く表示する方法 (LazyLoadプラグイン)

2014年5月6日火曜日 blogger, html, javascript, jQuery

一般的にブラウザでページを表示するとき、ブラウザはサーバーからデータを全てダウンロードしてきます。
それが決して見られることのない画像であってもダウンロードしてきます。
例えば画像が多用されていて、縦に長いページの場合、ブラウザの非表示エリアにも画像はあるわけですが、その画像もダウンロードしてこようとするので表示に時間がかかります。
特に回線が貧弱なモバイル回線などでは表示までにかかる時間の長さが顕著になります。

今回紹介するjQueryプラグインは、ブラウザの非表示エリアにある画像はダウンロードを保留し、ブラウザをスクロールして初めて画像が表示エリア内へ来た時に画像をダウンロードするというもので、LazyLoadプラグインといいます。

画像が多いページの場合、無駄な画像をダウンロードしないので、ページ表示完了までの時間を劇的に改善できます。

登録: 投稿 (Atom)