下記のスクリプトで写真を持ってくることができるようです。

<ul>
<script type="text/javascript" src="http://タンブラーの名.tumblr.com/api/read/json?num=5&type=photo"></script>
<script type="text/javascript">
show_number = 5;
for (i = 0; i < show_number; i++) {
  label = tumblr_api_read["posts"][i]["photo-url-75"];
  url = tumblr_api_read["posts"][i]["url"];
  caption = tumblr_api_read["posts"][i]["photo-caption"];
  date = tumblr_api_read["posts"][i]["date"];
  document.write('<li><a href="', url , '"><img src="' , label , '"></a>' , caption , date , '</li>');
}
</script>
</ul>

。。。検索しまくったので参照元がわからなくなってしまいました、ゴメンナサイ。

• タンブラーの名
  .tumblr.com の前にご自身が付けた URL の一部になっている文字列です。
• num=5、show_number = 5
  5 は表示させる投稿数です。
• photo-url-75
  表示される写真 (サムネイル) のサイズです。使えるサイズは、75、100、250、400、500、1280。サイドバーに表示するので 75 か 100 でしょうか。

上記のコードを貼り付けるとリスト表示されるのでスタイルシートで形を整えればなんとなく見られるようになります。

ただ単にコードを貼り付けただけの表示は Demo でご覧いただけます。

なお、Demo には iPhone アプリ「Instagram」 を利用して Twitter に同時ポストした際、 Instagram の写真をつぶやきと共に表示させるというものも載せてあります。

通常、つぶやきの中に含まれる Instagram のリンクをパソコンでクリックするとおもしろくもなんともない PC 用の WEB ページに飛ばされるので、ページ遷移なしに Highslide JS で写真を拡大するようにしています。
こちらも検索しまくり見よう見まねというかなんというか、いろいろゴニョゴニョやったものなのであくまでも参考ということで。

» 私の tumblr :: Instagraman’s Instagram

iPhone & iPad で見るアマンキラの360度パノラマ写真

• メインプール
• 月夜の回廊

ちなみに iPhone しか持っていないので iPad で見られるかどうかは検証していません
。。。 iPad でもちゃんと表示されていますかね？
(> hakata077さん、iPad での動作確認ありがとうございました )

注) なお、上記リンク先に PC のブラウザでアクセスすると Galleries 内にある Flash のパノラマページが表示されます。それを見て「なんにも変わってねーじゃん」って怒らないでくださいね。 iPhone や iPad を使ってアクセス (リンクをクリック) しないとダメですよ

ダウンロード後、解凍して生成された vr5 という名前のフォルダ内にある index.html のソースを見ると UserAgent で表示を振り分けているようです、たぶん。
そして、パノラマ写真の表示設定 (セッティング等) は vr_files フォルダ内にある config.js でコントロールする仕様になっているみたい。

VR5 の使用に関して、個人利用は無料 (ただし、VR5 のロゴやオフィシャルサイトへのリンクなどがスクリーン上に表示されます) 、商用はUS$20 とのこと。
iPhone & iPad で Flash が表示されるようになるまで (永遠にされるようにはならないかもしれないけど) PC のブラウザと iPhone、iPad をクロスオーバーするようなスクリプトがいろいろ公開されるかもしれませんね。

設置作業は思っていたよりも簡単でした。
ご興味がある方は下記のサイトからダウンロードしてみてはいかがでしょうか。

⇒ Flash のパノラマ写真を iPhone & iPad でも表示されるようにしたい人向けのスクリプト

» VR Habitat | Home

2010.8.4 追記
VR5 Pano Viewer の設置や使い方についてまとめてみました。

» VR5 Pano Viewerの設置、使い方

この投稿が役に立つという方はかなり少数だと思いますが
検索しまくってやっと解決方法が見つかったので情報として載せておきます。
長時間検索して、「 コレだっ   」 っていうのが見つかるとうれしいですよね。
そんな喜びをご提供したいと思いまして

   
Lightbox 2 から jQuery lightBox plugin 0.5 へ

序章

リニューアル前に写真集のページで使っていた Lightbox (ページ全体が暗くなって中央に写真が表示されるエフェクト・右の画像参照) は WordPressプラグイン :: Lightbox2 prototype 版だったのですが、他のプラグインとの相性なのか、ちょっとヘンな動きをする時があったのでリニューアルついでに jQuery 版 Lightbox に入れ替えようと作業に取りかかりました。

作りは一緒なので入れ替え作業自体は簡単なのですがひとつだけ違う点がありまして、
それは、、、

「 jQuery 版の Lightbox は同一ページ上にあるグループ分けした 2 つの Gallery をひとつのグループとして扱ってしまう 」

百聞は一見にしかず、まず元祖 prototype 版の Lightbox をご覧ください。

Demo : Lightbox2

prototype 版の Lightbox では前者を rel=”lightbox[images1]” 、後者を rel=”lightbox[images2]” と指定しておけば、別々のグループ (Set) として扱われます。
(3 枚の画像を見たのち、一旦 Lightbox を閉じて別グループの 3 枚の画像を見てもらえるということ)

ところが、 jQuery 版 Lightbox は rel=”lightbox[images1]” と rel=”lightbox[images2]” と別のグループ (set) として指定してあるにも関わらず連続した 6 枚のGallery となってしまいます (別々に見せたいのだけれど rel=”lightbox[●●●]” の指定ではグループ分けできないということ)

Demo : jQuery lightbox plugin 0.5

注) prototype 版からの移行なので rel=”lightbox[●●●]” の記述は削除せず、また一切編集せずということが前提になっています。 合わせて、画像管理に NextGEN Gallery を使用しているという背景もあります。NextGEN Gallery 側で rel=”lightbox[●●●]” の部分を簡単に rel=”lightbox-●●●” と書き換えられるのですが、グループ分けできなければ意味がないのです。

それじゃまずい

ご覧いただいた Demo のようにサムネイルがすぐ近くに並んでいれば、「あっ、この写真はさっき見たな」 とわざわざクリックすることもなくスルーしてもらえると思いますが、やたら縦に長いページの一番上と、スクロールしないと見られない一番下にサムネイル (Gallery) を載せ、別々の Gallery として見せようとしていた場合、テーマがまったく違う写真が連続して表示されてしまい意味が伝わらない Gallery となってしまう可能性があります。

また、今回のリニューアルでは写真集内の右サイドバーにランダムに入れ替わる 6 枚の写真を配したページを作ったのですが、その写真の拡大に Lightbox を使っているため、本文のほうにも Lightbox を利用した Gallery を載せているページでは、主となる本文中の Gallery と、味付けとして載せているサイドバーの Gallery が同列で扱われてしまい、非常にトンチンカンな印象を受ける Gallery になってしまうことがわかりました。

たとえば The Bale の Tacogle Earth のページは合計 4 つの Lightbox Gallery が載っていまして、最初にサイドバーの写真をクリックしてしまうとページ下のほうに載っている関連しない写真まで連続で見せてしまうという状態になります。

そこからです 「どこかに絶対同じようなことを思っている人がいるはずだ   」 と
私の検索の旅がはじまったのは。。。

ちなみに WordPress プラグインの 「jquery-lightbox-balupton-edition」 を使えば jquery 版 Lightbox で同一ページ上でのグループ分けができるのですが、画像上にマウスカーソルを載せないと (画像上のマウスカーソルを動かさないと) キャプションが表示されないという仕様で、一時的に利用してみたもののなじめず再びネット流浪の旅に出たという経緯があります。

ストライクゾーンど真ん中の記事がみつかる

日本のサイトでは 「jQuery 版 Lightbox は同一ページ内でグループ分けできない」 と言ったような投稿も見つけちょっと意気消沈 、しかしあきらめきれず、数日間キーワードをいろいろと変えて海外のサイトを検索していたらありました

• How-to modify jQuery Lightbox Plugin to use Image Sets :: Roll Over
  

どうもありがとう。
上記のサイトに載っているようにモディファイしたところ jQuery lightBox plugin 0.5 でも同一ページ上でグループ分けできました。

私の探し求めていたのはコレだっ  

Demo

jQuery lightBox plugin 0.5 :: 同一ページ上で Gallery (Set) をグループ分けするには

まずは jQuery lightBox plugin 0.5 をダウンロードする必要があります。
jQuery lightBox plugin 0.5 オフィシャルサイト からどうぞ。

モディファイのポイントだけ載せておきますと、jquery.lightbox-0.5.js を編集ソフトで開き (↓拡大可)

79 行目 ～ 83 行目の

// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
	settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
	}
}

を

// Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that storage the images references
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
	if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
		settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
		}
	}
}

に差し替え、<head> 内に直接記述する script は

<script type="text/javascript">
	$(function() {
	$('a[rel^=lightbox]').lightBox();
});
</script>

と書きなさいというものでした。

ちなみにデフォルトの

<script type="text/javascript">
	$(function() {
	$('a[@rel*=lightbox]').lightBox();
});
</script>

でも動作はしました。。。詳しいことはわからないのですが
私はいちおう書かれていたとおりにしています。

このモディファイ、Javascript に詳しい方なら簡単なのでしょうか？難しいのでしょうか？
そのあたりも私にはまったくわかりません

やっぱり、どうでもいい投稿でしたでしょ
ここまで読む人がいるかどうかも疑問な投稿でした(笑)
それでは、すてきな週末を。。。

12月17日：6個中2個 第476回抽選結果（みずほ銀行）
今年もダメそうだな

Chrome Experiments

早速アクセスしてみましたが、JavaScript ってずいぶんいろいろなことができるんですね。
ちょっとソースを見てみましたらどれもこれもホントに JavaScript のみ。
。。。当たり前か

個人的には Ball Pool というのが気に入りました。
画面上で左クリックしたままマウスを左右に揺らすと、次から次へとシャボン玉みたいに円が生まれてきます。

　2008年9月に「Google Chrome」を公開して以来、Googleは同ブラウザにおけるJavaScriptで書かれたウェブベースのプログラムの動作速度がいかに速いかを、盛んに宣伝してきた。そして米国時間3月18日、GoogleはJavaScriptの高速性の活用法を披露し、Chromeの導入を促進することを目的としたChrome Experimentsというサイトを立ち上げた。[...]via:グーグル、JavaScript作品を集めたサイトを開設–Chromeの高速性をアピール:毎日jp-CNETニュース

WBC、日本、キューバに勝利
韓国を相手に今日みたいな試合をナゼできないのか。
キューバより韓国が強いから？日本より韓国が強いから？

明日は2次ラウンドの順位決定戦なので勝っても負けても準決勝に進めますが、同じ国に3回連続負けてはイカンでしょ。勝ってはずみをつけて準決勝にのぞんでほしいですね。

それではすてきな連休を  

詳細がわからないようなサムネイル（横幅100px以下の小さいサムネイル）の拡大表示として使う場合は別として、単にサムネイルのポップアップとして使うよりは文字のリンクをクリックして画像がポップアップされたほうが使い勝手がいいかもしれません。その方向でジンバランの Impression を更新してみました。別ウィンドウが開くような構成よりずっとスマートで効率よくブラウズできると思います。

別ウインドウが開くJavaの場合は、そのウィンドウを開いたまま元ページを読むことができます。ところが本店で写真閲覧用に使った「Litebox」は常にクリックしたウィンドウの中心部にオーバーレイがかぶった状態で展開されるので同時に元ページの文章を読むことができません。その点、「Highslide JS」はドラッグができる上に、複数の画像を拡大したままスクロールができるのでいろいろ便利な使いかたがあると思います。

「Highslide JS」に対応したリンクをクリックした時に使っている（閲覧している）ブラウザのウィンドウ幅（高さ）がポップアップされる画像の幅（もしくは高さ）よりも小さいと（正確にはマージンがあるので画像よりも大きいから大丈夫というわけではない）画像が縮小されてポップアップされてしまうこと。こればっかりは閲覧していただく方のPC環境に依存することなのでなんとも言えないというのが正直なところ。

結論としては「使い分けるのがベスト！」(苦笑)。。。そんなこんなの使用感でしたっ。

「ナットーぉぉぉぉぉ、食べてますか～ぁ！」A猪木氏風に叫ぶ

そろそろ飽きてきた人、イヤになってきた人もいることでしょう(^_^;)
基本的に自分で決めたことを継続できる人は納豆に頼らなくても「デキる」のです(笑)自戒も含む(爆)どよ～ん

以前、「スライドショーあれこれ」というエントリーの中でも紹介した「Highslide JS」、テストしてみます。画像をクリックすると拡大されるはずだがうまくいくか。ドラッグも可能とのことだが。

←アマンダリの傘

（しばらくして。。。）やった、一発でうまくいきました。
というわけで、これからBeach Resort Photoclip に新規掲載していく「Impression」ページの画像にはこの「Highslide」というのを部分的に使ってみたいと思います（すでにサヤンの Impression は対応してみました）

要点としては

• サムネイルをクリックすると拡大されます。
• ドラッグが可能です。
• 閉じるときには拡大画像上をクリックします（[Esc]キーでもOKみたいです）

試験的にフォーシーズンズ・ランカウイ内の拡大写真をLiteboxで閲覧するように変更しました。（Impression除く）イッキにやると、のちのち墓穴を掘りそうな気がしたので（不具合があると大変なので。。。正直に言うと気が変わるかもしれないので）ちょっと様子を見てみようと思います。不具合などありましたら、ぜひコメントしてください。よろしくお願いします。特に問題がなければ、次回掲載分より同じ手法を使う予定です。
/////
ブラウズ時はマウスを使うよりもキーボード操作のほうが楽だと思います。

【追記】 IE6、IE7での閲覧時、ファンクションキーの「F11」を押して全画面表示にしてご覧いただくと天地に余裕ができます（ちなみに元通りのウィンドウに戻すにはもう一度「F11」を押します）（2006/11/14）

修正するファイルはLightbox JS ｖ2.0はlightbox.js、Liteboxはlitebox-1.0.jsというファイルです。中段にある

key = String.fromCharCode(keycode).toLowerCase(); if((key == ‘x’) || (key == ‘o’) || (key == ‘c’)){ // close lightbox
myLightbox.end();
} else if(key == ‘p’){ // display previous image
if(activeImage != 0){
myLightbox.disableKeyboardNav();
myLightbox.changeImage(activeImage – 1);
}
} else if(key == ‘n’){ // display next image
if(activeImage != (imageArray.length – 1)){
myLightbox.disableKeyboardNav();
myLightbox.changeImage(activeImage + 1);

の赤字の箇所を

if(keycode == 27){ // close lightbox
myLightbox.end();
} else if(keycode == 37){ // display previous image
if(activeImage != 0){
myLightbox.enableKeyboardNav();
myLightbox.changeImage(activeImage – 1);
}
} else if(keycode == 39){ // display next image
if(activeImage != (imageArray.length – 1)){
myLightbox.enableKeyboardNav();
myLightbox.changeImage(activeImage + 1);

青字のように修正したところ矢印キー「←」「→」とエスケープキー「Esc」によるキーボード操作が可能になりました。おそらく専門家の人にとっては非常に簡単なことなのでしょうが、私の場合「Keycodeって何よ？」というところから出発ですから容易ではありません(苦笑)
これが正しい措置なのか正しくない措置なのかよくわからないのですが、とりあえず上記のような修正を行ったところLightbox JS ｖ2.0とLiteboxのキーボードによるナビゲーションが可能になりましたのでエントリーしておきます。

• jQuery Gallery
  サムネイルを拡大画像の上に表示できる。下の映り込みは「へぇ～」と言う感じ。ただ、一枚目に出てくる写真をどうにかしてほしい(笑)それよりも同じページに載っていたコレのほうをチャレンジしてみたい。
• ThickBox 2.1
  これは実際に設置して採用しようと思っていたのですが、「進む」「戻る」を下の小さいリンクで行わないといけないのでどうもしっくりきませんでした。
• Smooth SlideShow v2
  これも実際設置してみて採用しようとしたのですが、なぜか私の環境でうまく動かなかったので断念（おそらく設置ミスがあるのだと思いますが）
• Highslide
  いろいろなことが出来るものですなぁ。ドロップシャドウやドラッグして移動、拡大されるときのアニメーションもイイ感じ。
• Revamped Slideshow
  ナビゲーションツールバー付き。小さいモニターでもナビゲートできるのは便利かも。ちなみにサンプル画像がタイランド。
• Lightbox JS ｖ2.0
  シンプルでコメントも入れられいい感じ。
• Litebox
  設置方法、スタイルシートなど上のLightbox JS ｖ2.0と同じでしたが、一部のjavascriptが異なっていました（データサイズがまったく違う）軽いからLightをLiteにしたのかなぁ。
• Slidebox 0.5
  Lightboxと同じ感じ。

などなど。

個人的に今回のスライドショーに求めていたことは

1. 必ずコメント（キャプション）を入れられること
2. 小さいアイコンをクリックしなくても「進む」「戻る」が可能なこと（掲載している写真の約半数が縦位置の写真なのでクリックする場所が動くとブラウズしづらいと思っているから）私のサイトの場合、自動再生は不要なのでなくてもOK。
3. サムネイルは小さいながらも写っているものがそこそこわかる今までのスタイルを踏襲したかったので、現状のようにどのサムネイルをクリックしても、そのクリックした写真から「進む」「戻る」が出来ること。
4. 35mmフルフレームで撮影することが信条なので、表示された写真の上に文字やツールバーが重ならないこと（四隅まではっきり見えること）
5. シロウトの私でも設置しやすいこと（のちの作業が楽なこと(笑)）
6. どうせならカッコイイもの（Cool）なもの＆ちょっとはカスタマイズできそうなもの。

結果、上のような条件を満たしたものはLightbox JS ｖ2.0で、昨日アップしたものはこれになっています。
。。。がしかし、どうも同じ仕様（ただしjavascriptのファイルサイズまったくちがう）のLiteboxが気になっていたのでさきほどそれもアップしてみました。試しに拙宅の物故PC（Win98 Pen2＆IE6）でブラウズしてみたところ、なんとなくLiteboxのほが軽く表示されるような気がします。おそらくその「軽さ」が影響しているのかXPで見た場合（ほぼ最良と思われるネット環境下の場合）の動きも微妙に違いますね。

Lightbox JS ｖ2.0を使ったページは ココ
Liteboxを使ったページは ココ
すでに東南アジアのリゾートホテル写真集で Liteboxを採用してしまったので上記リンクは消失しています。
現在の 東南アジアのリゾートホテル写真集 は jQuery の Lightbox を使っています。

///// point /////

• 「進む」「戻る」は画像上で左クリックです
• 「閉じる」は赤い×アイコン
• おすすめはキーボードの「←」「→」を使って閲覧
• キー操作で閉じるには「Esc」エスケープキー

//////////////////

縦位置になった場合、小さいモニタだと写真が切れてしまう気もしますが、現時点では本店で使用するにはBESTなスライドショーだと思います。
いままではひとつのホテルをアップするたびに拡大写真の枚数と同じだけページ（htmlファイル）を作っていましたが（いわゆる力技で処理していたので）このスライドショーを導入することでサーバー内のファイル数も激減することでしょう。
過去の掲載分もすべてスライドショーで処理したほうがいいのでしょうが、いやはやなんとも、すでにヘトヘトであります。
追記：Lightbox JS ｖ2.0 と Liteboxでキーボードによる操作を可能にするにはjavascriptの一部を修正しないとダメなようです。次のエントリーをご覧ください。

Lightbox JS ｖ2.0とLitebox、キーボードでナビゲートできるようにするには