humming bird

Geegle Feed API のサンプルをいくつか作ってみた

Google Feed APIによってクロスドメインの制限がなくなり、様々なフィードを取得し表示できるようになりましたが、そのメリットを今一つ活用し切れていないように感じられる。
他サイトのフィードを商用目的に利用する、または一つのコンテンツとすることについてはいろいろと制限があるかもしれないが、「JavaScriptだけでここまで出来るようになった」ということを明確(視覚的な意味で)に示したいということで、いろいろとサンプルを作ってみた。

『iTunes Store』のフィードを表示してみる

iTunes Store - Feed Sample #1

『Sample #1』ではページのソースを見てもらえば分かりますが、ほんの数行のJavaScriptだけで作られています。

取得しているフィード:

Today’s トップ10ソングス
Today’s トップ 10 アルバム
Today's 10 最新リリース

iTunes Store - Feed Sample #2

『Sample #2』は見た目は『Sample #1』に似ていますが、要素を一つ一つ取得して表示しています。カバー画像は小さめの画像にしたり、ジャンルや合計曲数は取得しなかったりと、名前空間URIが分かれば表示したいものだけをチョイスし、表示したい場所に出力することも可能です。

iTunes Store - Feed Sample #3

『Sample #3』ではTop100のアルバムのカバーだけを取得して表示しています。
アンカーの「title」に各エントリーのタイトルを取得して、カバー画像の上にマウスを置いたときに表示されるようにしています。
※Sample #3はIEだとページが崩れます。

『YouTube』のフィードを表示してみる

これも単純に取得表示したものです。

YouTube - Feed - Sample1

次は二つのフィードを比べてみた。

どちらも再生回数の多い動画 (本日分)のフィード(のはず)だが、内容が少々異なるのは良く分からないが、コンテンツ自体の違いがあるのが分かる。これを取得、表示し見比べると分かりやすい。

YouTube - Feed - Sample2

フィードの種類も同じRSS2.0ことから見ても、なぜに異なるフィードが存在するのか不思議。

おまけ

Google Feed APIには『google.feeds.FeedControl クラス』というものもあり、この『Feed Control』を使用しても複数のフィードを表示することが可能。

FeedControl Sample

Google Search APIやjQueryと組み合わせたりすることでもっと面白いコンテンツになりそうな素材ではないかと。

Excelで簡単に分数を入力する

Excelで分数を入力する場合は、[書式設定] - [表示形式]にて『分数』を選択する、と覚えている方もいらっしゃるかも知れませんが、イチイチ表示形式を変更しなくても分数を表示させる方法を紹介。

例えばセルに『2/3』と表示させたいのであれば、『0 2/3』と入力するだけです。これで『2/3』と表示されます。

『0[半角空白]』は整数値を表しています。算数で学んだ整数と分数を分けて表示しているのです。

Excelの分数のフォーマットが『# ?/?』のような形式で、これに沿った形で入力することにより分数と判断してくれるということです。

入力したセルの表示形式を確認してもらえば分かりますが、表示形式が自動的に『分数』となっているはずです。

Excelの他の表示形式フォーマットの例を挙げると、『\1000』と入力すると『\1,000』と表示され、表示形式が自動的に『通貨』となっているはずです。

『2 5/3』と入力するとどうなるか。自動的に分数を整数に直して『3 2/3』と表示します。

VBの『Exit Sub』とはC#で言うところの何？

VB出身の私はそれ以降の処理を行わない時に『Exit Sub』をよく使っていたのだが、C#では何だろうとヘルプを探しまくったが見つからないのでググったら何のことはない。『return』で良いのだ。

『return』は"値を返す"という固定観念が発想を邪魔していた。

例)

namespace returnの用途{
  class Program{
    static void Main(string[] args) {
      return;
      Console.WriteLine("returnがなければ表示される文字列");
    }
  }
}

このコードを実行すると当然何も起こらない。

『return』のところで『Main』の処理が終了するので、赤く記したコードが実行されないのだ。
『return』の部分をコメントアウトすると下図のように表示される。

Result

『lightBox 0.5』から『Highlside JS』に変えた訳

以前、このブログでは画像閲覧用に『lightBox 0.5』を使用していたが、現在は『Highslide』を使用している。
その理由について、『lightBox 0.5』のバグ報告も兼ねて。

本当にそうなるのか実際に試したい場合は以下にサンプルがあるのでこれで試してみると良い。

[Enter] キーを押すと重ねて表示される

『lightBox 0.5』の動作はWebページに表示されているサムネイルをクリックするとリンクされた画像をレイヤーを上から重ねたように表示するが、その状態で[Enter]キーを押すとまたその上にレイヤーを重ねるように表示してしまう。通常画像以外の背景は50%程度透過している(透過値は設定で変更可能)が、[Enter]キーを押し続ければこんなことになる。

画像表示中は[Enter]キーを無効にするか、もしくは画像表示中に[Enter]キーを押された場合は画像を閉じるといった制御にすべきと考える。

IE7でのバグ

IE7では画像表示中に[Enter]キーを押すとこのようになる。

こうなるとページを再描画するしかない。これは致命的。

[Esc]キーを押しても無反応

『lightBox 0.5』自体キー操作は一切対応していない、というわけでもなく『←,→』キーで画像が切り替わる。ならば[Esc]キーを押した時は画像を閉じるという動作がなぜ実装されないのか不思議。ちなみに『Highslide JS』では[Esc]キーを押すと画像が閉じる。

jsファイルが読み込まれる前に画像を表示しようとすると画像をローカルに保存してしまう

完全にlightBox.jsファイルが読み込まれていない状態、Webページが描画されてすぐに画像のサムネイルをクリックし、画像を表示させようとすると該当の画像ファイルをローカルに保存してしまうのだ。通常考えられるのはスクリプトを無効にした状態と同じ動作、例えば別ページで該当の画像のみを表示するような動作なら理解できるがダウンロードしてしまうのは頂けない。

比較対象として『Lightbox 2』の動作を確認

『Lightbox 2』ではこのような動作はないようだ。[Esc]キーを押せば画像は閉じられるし、[Enter]キーを押せば画像を再描画するという動作で「これはこういう仕様」という範囲。ちょっと触った程度だがIE7でもちゃんと動作した。

結論:
完全にチョイスミス…
ライトボックスを使用するなら『Lightbox 2』を使用するべし。
しかし、『Highslide JS』の方が表示した画像をドラッグして移動できるなど、閲覧者側にとっての自由度が高い分、こちらの方が良いかも、ということで『Highslide』をチョイスした。

『preg_match』の何たらかんたら

PHPで文字列チェックしたくてちょっと調べた。

こんな感じでOK?みたいなものが以下のコード。

<?php
function chk_alnum($text) { 
  if (preg_match("/^[a-zA-Z0-9]+$/",$text)) { 
    return TRUE; 
  } else { 
    return FALSE; 
  } 
}
?>

いろいろ出てきた情報を整理。

『preg_match』 — 正規表現によるマッチングを行う

ヒント:
ある文字列が他の文字列内に含まれているかどうかを調べるためだけに
preg_match() を使うのは避けた方が良いでしょう。
strpos() か strstr() 関数を使う方が速くなります。

だってさ。

preg_match("/パターン/", 調べる文字列);

"/パターン/" //文字列の1行目のみを調べる
"/パターン/s" 　　//改行文字を無視し、1行とみなして調べる
"/パターン/i" //文字列の大文字・小文字を区別しない
"/パターン/is" //大文字・小文字を区別せず、1行とみなして調べる

『"/パターン/g"』は「複数行を調べる」という記述を発見したが、これは実際にはエラーになるらしい。
g修飾子を使うためには『preg_match_all』を使わなければならないそうだ。

『preg_match』 は、pattern がマッチした回数を返す。
つまり、0回（マッチせず）または 1回となる。
これは、最初にマッチした時点で『preg_match』は検索を止めるため。
逆に『preg_match_all()』は、subject の終わりまで検索を続けます。
『preg_match』 は、エラーが発生した場合にFALSEを返します。

補足：
PHPのマニュアルでこんなことが書かれていた。

注意: Perl 互換の正規表現構文を使用する preg_match() のほうが、
多くの場合 ereg() よりも速く動作します。

へ～　 …で、『PHPのpregは本当にeregより速いのか』で実際に調べていた。
そこでは『ereg_replace』と『preg_replace』で比較していたのだが、結果は『preg』の方が4倍近く高速だったそうな。
逆に『ereg』のメリットは何ぞや？単なる古いものとの互換性のためだけに残してあるものだったりするのだろうか？

また宿題できちゃったよ。