「名台詞１００＋Flickr」作成時のメモ（JSON）

とりえあず参考リンクのみ

JSON in JavaScript - 実用
第三章　データを解析し表示しよう：JSONのデータを表示する
s.h.log: JavaScript - JSONでデータを受信する方法2種類
[ajax] JKL.ParseXML／ajax通信処理ライブラリ
・安全にjsonを読み込むためのパーサ。
Japan.internet.com デベロッパー - JSONを使ってAJAXベースのアプリケーションを高速化する
・evalは、実際はJavaScriptインタプリタ

JSONの特徴
・javascriptのオブジェクトをテキストで記述するデータフォーマット
・取得した文字列をeval（文字列からJavaScriptコードを実行する関数）で解析。
・<script type="text/javascript" src="xxxxx"></script>でもオブジェクトを取得できる。
xxxxxはjson形式で記述されたテキストへのリンク
・javascriptのサブセット。

参考
Andre's garden: 「名台詞１００＋Flickr」サイドバーに貼れるようにしてみました

「名台詞１００＋Flickr」作成時のメモ（Flickr API利用）

Flickr APIのドキュメント
http://www.flickr.com/services/api/

Flickr APIの使用例
JavaScriptからFlickr APIで画像検索
今回は、上記の画像検索用のソースflickr-search.jsを改変。

ライセンスの設定

ライセンスの種類
flickr.photos.licenses.getInfoに記述

Example Response

<licenses>
 <license id="4" name="Attribution License"→「表示」
  url="http://creativecommons.org/licenses/by/2.0/" /> 
 <license id="6" name="Attribution-NoDerivs License"→「表示・改変禁止」
  url="http://creativecommons.org/licenses/by-nd/2.0/" /> 
 <license id="3" name="Attribution-NonCommercial-NoDerivs License"→「表示・非営利・改変禁止」
  url="http://creativecommons.org/licenses/by-nc-nd/2.0/" /> 
 <license id="2" name="Attribution-NonCommercial License"→「表示・非営利」
  url="http://creativecommons.org/licenses/by-nc/2.0/" /> 
 <license id="1" name="Attribution-NonCommercial-ShareAlike License"→「表示・非営利・継承」
  url="http://creativecommons.org/licenses/by-nc-sa/2.0/" /> 
 <license id="5" name="Attribution-ShareAlike License"→「表示・継承」
  url="http://creativecommons.org/licenses/by-sa/2.0/" /> 
</licenses>

Flick上でのクリエイティブコモンズ（CC）ライセンスの写真検索ページ
http://www.flickr.com/creativecommons/

CCのホームページ（右上の「使う」からライセンスの説明を確認）
http://www.creativecommons.jp/

flickr.photos.searchの引数licenseにライセンスＩＤ（license idの値）をセット。
複数指定はカンマ区切り。

写真の種類ごとのＵＲＬ

Photo Source URLsを参照

The URL takes the following format:

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg
or
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstb].jpg
or
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

farm-id、server-id、secretはいずれもflickr.photos.searchの結果から取得可能。

ＵＲＬ例
http://farm1.static.flickr.com/2/1418878_1e92283336_m.jpg

flickr.photos.searchに限らずAPIの動作を各APIの説明の「API Explorer」から確認できる。

参考　Andre's garden: 「名台詞１００＋Flickr」サイドバーに貼れるようにしてみました

ウインドウの幅と高さの取得

参考ＵＲＬ
ユーザーのウインドウ表示幅を取得するjavascript - WEBデザイン　BLOG

クロスブラウザ対応

幅だけだったので高さもついでに

var getBrowserWidth = function() {
if ( window.innerWidth ) { return window.innerWidth; }
else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }
else if ( document.body ) { return document.body.clientWidth; }
return 0;
}

var getBrowserHeight = function() {
if ( window.innerHeight ) { return window.innerHeight; }
else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; }
else if ( document.body ) { return document.body.clientHeight; }
return 0;
}

Amazonウィッシュリング（リンク起動）で利用

要素の絶対位置の取得

クロスブラウザ対策

参考ＵＲＬ
anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について

利用時には、元のソースからfunctionを変数に入れ変えて利用しました。

//必要となるGlobal変数の定義
// 間違いのないように全文字列を小文字に変換
var agt = navigator.userAgent.toLowerCase();
var is_ie　 = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);

　//要素のスタイル属性を取得する関数
var getElementStyle = function (targetElm,IEStyleProp,CSSStyleProp) {
　var elem = targetElm;
　if (elem.currentStyle) {
　　return elem.currentStyle[IEStyleProp];
　} else if (window.getComputedStyle) {
　　var compStyle = window.getComputedStyle(elem,"");
　　return compStyle.getPropertyValue(CSSStyleProp);
　}
}//---End Function

var getPosition = function (that) {
　var targetEle = that;　　　//thatは位置を取得したい要素Object
　var pos = new function(){ this.x = 0; this.y = 0; }
　while( targetEle ){
　　pos.x += targetEle.offsetLeft;
　　pos.y += targetEle.offsetTop;
　　targetEle = targetEle.offsetParent;
　　　//IEの補正：上記計算で無視されてしまう各親要素のborder幅を加算
　　if ((targetEle) && (is_ie)) {
　　　pos.x += (parseInt(getElementStyle(targetEle,"borderLeftWidth","border-left-width")) || 0);
　　　pos.y += (parseInt(getElementStyle(targetEle,"borderTopWidth","border-top-width")) || 0);
　　}
　}
　　//geckoの補正：カウントしないbody部border幅をマイナスしてしまうので２倍して加算
　if (is_gecko) {
　　　//以下の部分でbody部を取得し、borderの減算を補正する。
　　var bd = document.getElementsByTagName("BODY")[0];　　//body部を取得
　　pos.x += 2*(parseInt(getElementStyle(bd,"borderLeftWidth","border-left-width")) || 0);
　　pos.y += 2*(parseInt(getElementStyle(bd,"borderTopWidth","border-top-width")) || 0);
　}
　return pos;
}//---End Function

Amazonウィッシュリング（リンク起動）で利用

SWFObject2.0でページのロード後にFlashオブジェクトの再表示を行うには？

Flashオブジェクトを埋め込むときには通常では色々問題があるので以下のサイトを参考にしました。

SWFObject v2.0 ドキュメント日本語訳

SWFObjectというライブラリを使って

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 dynamic embed - step 3</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>

  </body>
</html>

と書けば、Flashは問題なくページ上に表示されます。
上記の例では、htmlがロードされる前にHeadに書いたJavascript宣言（swfobject.embedSWF）からおそらく（？）

１．swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
２．embedSWF内のaddDomLoadEvent→ロード時に走るイベントを定義する関数
３．addDomLoadEvent内でcreateSWFを（Flashオブジェクトを生成する関数）を定義。
４．ページ読み込み後に、onDomLoadイベントが走ってcallDomLoadFunctionsを呼び出す。
５．callDomLoadFunctionsで定義されたcreateSWFが処理される

といった順序で処理が走ります。

ただ、残念なことにロード後にＨＴＭＬを動的に生成して再表示したい場合、embedSWFを呼びだしただけでは上手くいきませんでした。

調べてみるとロード後は、embedSWFを呼んでもcreateSWFが呼ばれないからということがわかってきました。

でもって結構詰まったのですが、色々探してみるとありがたいことに解決策が以下のフォーラムに載っていました。
http://groups.google.com/group/swfobject/browse_thread/thread/c857d29662509809

I've been develeoping with the old swfObject (1.5) and recently
switched over to the new 2.0 beta.
I noticed that you can't embed a flash object after the pages loads as
the embedding with the new version happens only on the onload. Is
there a way to use this JS to replace an existing flash?

SWFObject2.0でロード後にFlashの再表示をする方法はないか？といった内容でまさに知りたいことです。

解決策のソースを書いているエントリ
http://groups.google.com/group/swfobject/msg/0a04ea40128088c2

一部抜粋

The fix is really just the first inserted line. This:
＜元のソース＞
function addDomLoadEvent(fn) {
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

becomes this:
＜変更後のソース＞

function addDomLoadEvent(fn) {
if (isDomLoaded) return fn(); // if the DOM is already loaded,
trigger directly
domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only
available in IE5.5+
}

ロード済みなら引数（fnはcreateSWFを含む）をすぐ実行するというコードが追加されています。

さらに詳しい比較のコードが別ページに解説されており非常に助かりました。
http://pastie.textmate.org/private/4ftrnrhae7h50nko8k6sg
ここまで詳細に書いてくれていると助かります。

修正したSWFObject.jsを置いときます。
もし、利用してもいいかもと思う方はどうぞ持っていって下さい。（動作保障は自己責任でよろしくお願いします。）
（SWFObject.jsは、MIT Licenseです。）

SWFObject.js

※よくわかってないながらもSWFObject2.0でロード後にFlashの再表示をしたかったので書いてみましたが、よくわかっている人からのいいやり方がありましたらぜひコメント・トラックバックでご指摘下さい。