WEBの勉強ノート
Loading

Google AJAX Feed API の件数が反映されない

2010 年 1 月 3 日 日曜日

WordPress に最新の記事や、その他RSSで取得できるものをいくつか表示させるためにGoogle AJAX Feed APIを使ってみました。

表示自体は問題なくできたのですが、表示件数ではまりました。表示件数は、feed.setNumEntries(10) のように指定していましたが、変更しても全く反映されず。

そもそもFeed側で件数を少なく設定していないかと思い、Wordpress の設定を変えてみたり、いろいろやってみた挙句、やっと気付きました。FeedはGoogleでキャッシュされている。。

そのキャッシュを更新する方法を探していましたが、調べるとすぐに見つかりました。

そこで、下記のようにソースに手を加えて、いわゆる「キャッシュ騙し」をします。

このブログのRSSフィードを取得するソースの場合・・・

var feed = new google.feeds.Feed("http://www.lepracaun.info/blog/atom.xml?256");

?の後ろの数字は何でもいいわけです。

Google Ajax Feed API:キャッシュ騙しを使う方法

すぐに変更した件数が反映されました。

WordPress カテゴリを jQuery でアコーディオンにしてみる

2009 年 8 月 16 日 日曜日

このブログは階層構造をもつカテゴリのみをナビゲーションにしています。しかしカテゴリは増えるばかりで逆にわかりにくくなってきました。そこで、親カテゴリを残して、子カテゴリを開閉式のアコーディオンにしてみました。

目標とした動作

・子カテゴリ (孫カテゴリ以下を含む) を非表示に
・親カテゴリのリンクを無効化→子カテゴリの開閉に使う

$(document).ready(function(){
$('li.widget_categories>ul>li>ul').css('display','none');
$('li.widget_categories>ul>li>a').click(function(e){e.preventDefault()}).attr('href','#');
$('li.widget_categories>ul>li>a').click(function() {
$(this).next().slideToggle('slow');
});
});

問題は、子カテゴリのページに移動したときにそのカテゴリが展開されたままだとよいのですが。ページ遷移を超えるので、セッションとかクッキーとか使えばできるのでしょうが、めんどいのでとりあえず開閉のみ。

※追記、デザインを変えてからこの機能は付けていません。また、子カテゴリ(孫カテゴリ以下を含む)を非表示にするのをJavascriptで行っていますが、Jacascriptが実行される前までは表示されていて、実行されたタイミングで非表示になるので、cssで最初から非表示にしていたほうが良い気がします。

ただし、SEOの視点から見ると、display: none の指定はスパム判定の一因になる可能性もあるのでむずかしいところです。サイドバーのリンク集を displya: none にしたところで、いきなりスパム判定になるということもないでしょうけど。

Javascript の字句構造

2009 年 8 月 13 日 木曜日

文字コード

Unicode を使用。ECMAScript v3 標準ではプログラム中に Unicoded 文字を使うことができる。v1, v2 ではコメントと文字列リテラルのみ Unicode 文字を使うことができる。

大文字と小文字

区別される。オブジェクトやプロパティは HTML と同じ名前のものが多いが、基本小文字で表記する。

空白スペースと改行

空白、タブ、改行コードは無視される。

文と文の区切り (セミコロン)

通常、文末にセミコロンを入れる (;)

コメント

//コメント
/*コメント*/

識別子 (変数名、関数名)

先頭の文字に数字を使うことができない。予約語も使うことができない。

予約語

break
case
catch
continue
default
delete
do
else
false
finally
for
function
if
in
instanceof
new
null
return
switch
this
throw
true
try
typeof
var
void
while
with

ECMA 拡張用の予約語

abstract
boolean
byte
char
class
const
continue
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
switch
synchronized
throws
transient
voatile

v4 草案に追加された予約語

as
is
namespace
use

その他避けたい識別子

arguments
Array
Boolean
Date
decodeURI
decodeURIComponent
encodeURI
Error
escape
eval
EvalError
Infinity
isFinite
isNaN
Math
NaN
Function
Object
parseFloat
parseInt
RangeError
ReferenceError
Number
String
SyntaxError
TYpeErrror
undefined
unescape
RegExpURIError

WordPress でカテゴリのページだけ本文を折りたたんでみる

2009 年 5 月 5 日 火曜日

カテゴリのページだけ記事のタイトルが並ぶようにしたい。かつ、タイトルの下にボタンをつけて、ページ遷移なしで本文を出したい!という思いがずっとあって、今回実際にやってみました。

大まかな手順

  • category.php にボタンの画像を設置
  • category.php の記事の本文を適当なクラスをつけた div で囲む
  • header.php で jQuery を読み込ませる
  • header.php にボタンをクリックすると記事が出てくるように javascript を書く

書いてみた javascript

カテゴリをクリックしたあとのページで動いてます。

$(document).ready(function(){
    $(‘div.hoge).css(‘cursor’,'pointer’); 
    $(‘div.hoge).click(function() {
        $(this).next().slideToggle(‘slow’);
    });
});

クリックした要素の次の要素

“クリックした要素の次の要素” の指定のしかたがよくわからず、時間がかかった。

$(this + ‘div.hoge’)

みたいにすると、クリックした要素 (this) の次の div.hoge が指定できると思いきや、すべての div.hoge に効果が発動してしまう。検索すると next() を使うと実現できることが判明。

next([expr])

要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。
このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

http://semooh.jp/jquery/api/traversing/next/[expr]/