//以下例では、onscrollイベントを当ててます。

//IE6の場合
parent.document.body.parentNode.onscroll = function(){}

//IE7,IE8の場合
parent.document.body.onscroll = function(){}

//firefox,safari,Chromeの場合
parent.document.onscroll = function(){}

ちなみにOperaはインストールしていないので試していません。たぶん動作するはず・・
IE6のparentNodeが必要なのが以外とハマる所かと思われます。

下記サイトでもparentNode調べてますね。むむむ。
IE でどこの子ノードでもないはずなのに parentNode が存在する場合がある

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• addEventListenerの第二引数について
• popenによるメール送信とPHPセーフモード
• ヨメと猫
• Ajax 通信でのキャッシュ
• jQuery.jsとmootool.jsの共存

□情報共有Aチーム

OpensocialアプリからOpensocialアプリを生成するツール的なものでした。
先日「ポコポコアプリ」なるものが発表されていましたが、発想・着想は同じ所ですね。
非常に興味深いです。

□ゲームチーム

ドイツのボードゲーム「ダイアモンド」をOpensocialアプリに！
結構駆け引きが重要なゲームでしたw
チャット機能が付けばかなり人気が出る事間違いなし！なアプリでした。期待していますw

□写真・地図チーム

GoogleMapを使ってツーリング情報を載せていくアプリでした。
携帯とか端末で使えると便利！対応に期待です。

□チュートリアルチーム

ユーザ間でのゆるい関係から話すきっかけを作るアプリ。確かにSNSって微妙な距離感があってそれを埋めるツールという位置付けのアプリは重要ですねー。ゆるく声掛けしていくシステムが素敵でした。

□情報共有Aチーム

今の自分の状態をスイッチで表すというアプリ。スイッチによってはそこからユーザ同士の会話が生まれるアプリでした。何よりスイッチで簡単に自己表現が出来るライトさも非常にOpensocialアプリっぽくて素敵です。

□テストチーム
写真ないのですが（ごめんなさい！）、オールJavascript「Screw.Unit」でデバッグ環境を作るというものでした。確かにOpensocialはJavascriptがキモ。どうデバッグしていくかが鍵だと思います。firebugでも良いのですが、こういう専用のデバッガがあると非常に便利だと思います。

—
優勝は「ダイアモンド」を作ったゲームチームでした。おめでとうございます！実際にボードゲームもやりましたが、駆け引きがすごい楽しい！どこかのコンテナで公開期待しています！

ちなみに我がチームは前回チームの再結成で「MoSoマップ」なるものを再度開発したのですが、どうにもソースコードが複雑化し過ぎちゃっててうまく開発が進まず惨敗orz

コードのまとめ方は今後の課題ですね。subversionでのマージミスが結構ありましたね。。反省。未だに使いこなせていないなぁ。
結局各々でテストしている所を考えると、gitとかの分散型リポジトリの方がやはり良いと思いました。googleもMercurialを採用したみたいだし、分散型チャレンジだな。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• OpenSocial Ideathon – 事前MTG
• GoogleDeveloperDay2009 ～ OpenSocial Hackathon
• mixiアプリ作ってみた。
• ipod touch !
• OpenSocial Hackathonに参加してみた。

■アルバムAPI基本概念

1. アプリ登録ユーザのアルバム公開設定を「全体に公開」にしていないとデータの取得が出来ない
2. 最低2回の非同期通信が必須（アルバムIDを呼び出して、そのIDを使って写真を呼び出す）
3. 写真の名前を付けていない場合はdescriptionの値がnullもしくは画像ファイル名になる
   （例. 1111111_2222.jpg）

上記が1とかは分かっていないとアプリ作る際にはまります。
そしてmixiでの制限は以下

■mixiコンテナ上での仕様

1. FRIENDSなどのGROUP_ID（範囲の指定）が効かない。ALL、FRIENDS共に駄目
2. NETWORK_DISTANCEも同様に効果なし（値としては飛ばしてるけど、効果なし）
3. mediaitem.getField(opensocial.MediaItem.Field.ID)が取得できない。mediaitem.fields_.idで取得可能
4. 画像を呼び出すと一定時間毎にURLが暗号化？されている部分がある。
   （例. http://ic.mixi.jp/p/db596a515e44a61bda01f8e1988316c738fbc062ce/4a5c3440/album/(アルバムID)_(写真ID).jpg）
   BASE64か何か？永続データなどで保持しても画像パスは使えない。暗号化部分の法則が分かれば永続データでもいけるか。。
5. アルバムのコメントデータなどは取得出来ない

特に4の問題が結構重要で、URLが一定時間で変わると永続データに入れられないので、毎回アルバムデータを取得して、写真IDなどと比較する必要が出てきます。それは手間なので、うまい方法がないか、もうちょっと調べてみたいと思います。

もしかしたらまだmixi側の実装が完了していない状態の可能性もあるので、仕様が変わる恐れがあります（2009/7/11現在）

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• JSONデータの使い方
• GoogleDeveloperDay2009 ～ OpenSocial Hackathon
• はてなブログのデータを移行しました。
• OpenSocial Hackathonに参加してみた。
• URIデータスキーム

最近このブログの機能アップに費やす時間を増やしています。
色々と便利にしたいなとWP-AutoPagerizeプラグインを入れてみました。

これは元々FirefoxのGreaseMonkeyというアドオンの追加するユーザスクリプトで、検索結果やニュースページを見る際にページ遷移をせずにある一定のスクロールをした段階で、次のページの記事が追加されるという優れもの。

ただ、その上で問題になったのがsyntaxhighlighterプラグイン。
これはソースコードを見せる際に綺麗に整形してくれるプラグインです。

何が問題かというと、次ページ記事を読み込んで表示する際にソースコードがあった場合に、syntaxhighlighterの表示処理の動作をしてくれないというものでした。
そのため両方のプラグインの調整が必要になりました。

その調整のやり方を記載しておきます。

まずは、Autopagerが新しいページを読み込んだ際にsyntaxhighlighterの関数を呼び出すよう設定します。wp-autopagerize.jsはソースコードが圧縮されているので、15行目をコピペして貼り付けてOnline Beautifier for JavaScriptなどで綺麗に整形しなおしてもらいましょう。
50行目にソースコードを追加します。

wp-autopagerize.js

var o = function () {
  l.show();
  $.ajax({
    url: k,
    success: function (h) {
      if ($(pageRizeClassName, h).length > 0) {
        j++;
        c.before("<p id='page-" + j + "' class=\"pageNum txt75\"><a href='" + k + "'>" + j + "</a> ページ目</p>");
        k = $("p.pageNav a.next", h).length > 0 ? $("p.pageNav a.next", h).attr("href") : null;
        c.before($(pageRizeClassName, h).filter(function () {
          return ! $(this).hasClass("pageNav");
        }));
        m = b.scrollHeight;
        g();
        SyntaxHighlighter.highlight();//この行を追加
      }
      l.hide();
    },
    error: function () {
      l.hide();
    }
  });
};

これでJavascript側の修正は終了。続いてsyntaxhighlighterを修正します。

syntax_highlighter.php

function add_footer(){
	$enabled = false;
	foreach ($this->options as $key => $val) {if ($val[0]) {$enabled = true; break;}}
	if (!$enabled) return;

	$scripts  = "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shCore.js?ver={$this->plugin_ver}\"></script>\n";
	$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushAll.js?ver={$this->plugin_ver}\"></script>\n";

/*
	// Bash / shell
	if (isset($this->options["bash"]) && $this->options["bash"][0])
		$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushBash.js?ver={$this->plugin_ver}	

	(中略)

	elseif (isset($this->options["xslt"]) && $this->options["xslt"][0])
		$scripts .= "<script type=\"text/javascript\" src=\"{$this->plugin_url}js/shBrushXml.js?ver={$this->plugin_ver}\"></script>\n";
*/
	echo $scripts;

上記の修正は、syntaxhighlighterでは各プログラムソース毎にJavascriptファイルを持っていて、読み込んだ記事内で使っているプログラム表示用のJavascriptのうちどれを読み込むかを判定しています。
今回は判定を飛ばして、各プログラム用JSを一つのファイル「shBrushAll.js」にまとめてそれを読み込ませることで対応しています。

使用プラグイン
WP-AutoPagerizeプラグイン
syntaxhighlighterプラグイン

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• 【注意】YSlowプラグインの挙動
• 携帯とiphone対応しました
• jQuery版画像プロテクションプラグイン をリリース！！
• jQuery – 制作現場で使えるプラグインあれこれ
• はてなブログのデータを移行しました。

気になっていたのは基調講演のmixi社長 笠原さんの
Opensocialでのmixiの展望を聞きたかったのです。

他公演でもアプリケーションを考える際の位置づけを具体的にチャートにした図は、
なるほどといった感じでした。

さらに当日のGDDに参加した方々には最新のアンドロイド携帯（開発者用）がもらえてサプライズなイベントでした。（写真は後日w）

——-

後日のハッカソンではOpensocialに参加しました。
我が情報共有チームは、他の素敵なメンバーのおかげで一位を取ることができ、
非常に嬉しい一日となりました。
このアプリは写真データ共有アプリなのですが、Opensocialのバージョン0.9から実装されるアルバム機能を使用したものです。
まだmixiは0.8相当なため、使用出来ませんが近日0.9へバージョンアップするとの事なので、近日中に公開出来るはずです。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• OpenSocial Hackathonに参加してみた。
• mixiアプリ作ってみた。
• OpenSocial Ideathon – 事前MTG
• star ratingのいたずら防止
• 北国の三日間

「チュートリアル」組に参加して基本機能「ユーザデータ取得」「アプリケーションの設定データの保存」「機能概要」などを学べました勉強になりました。

いくつか分かったことを以下。
■ jopensocialはよい！（登録部分ややりとりを簡素化がかなり出来る）
■ ガジェット間通信も可能
■ 別サーバ用意してphpやrailsなどから処理結果を受け取れる！（クロスドメイン）
■ ガジェットだけを切り出ししてサイトに表示出来る。
■ 他の人の作品を見ているとやはり他サイトとの連動ものが目立った。やはりOpensocialだけの機能で実現ではなく、外部データと連動する事で威力を発揮する感じ。。

今日学んだ事をmixiアプリに反映しなければ・・・
今後がさらに楽しみなOpensocialですね。

あ、ちなみにお昼ご飯はリクルートさんのご厚意で頂きました！ありがたい！

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• mixiアプリ作ってみた。
• GoogleDeveloperDay2009 ～ OpenSocial Hackathon
• OpenSocial Ideathon – 事前MTG
• アルバムAPIでのコンテナ上での制限など
• はてなブログのデータを移行しました。

ニコニコ動画APIで単純な動画検索がなくて、試行錯誤の末に無理矢理な方法で何とか実装したものです。
ニコニコ動画は2009年4月現在、動画IDの関連動画しか抽出出来ないため、無理矢理PHPから動画IDをランダム値で生成してAPIからデータが入ったものが返ってくるまで片っ端に舐める仕組み。。orz

もちろん検索したものは１時間程度キャッシュするようにはしているので、
アクセス数が多い方が後から来た人はキャッシュなんで処理は早い…結果的には全体のサーバの負担は同じか(>_<)ヾ

そんなわけでニコニコ動画APIを使ったサンプル
サンプル｜ファイル一式

これだけだと使い物にはならん・・・有効な使い方とか探ってみてください。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• Ajax 通信でのキャッシュ
• mixiアプリ作ってみた。
• OpenSocial Ideathon – 事前MTG
• ひとまず先日インストールしたcakePHPを始める事にしました。
• や、やばい。。

「ニコニコ動画ランキングアプリ」
といってもOpensocial独自の機能は何も使ってませんorz

ただfacebook的なやり方がmixiに出来るかどうか・・・規約見る限り趣味で終わってしまいそう(-_-)..

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• OpenSocial Ideathon – 事前MTG
• OpenSocial Hackathonに参加してみた。
• GoogleDeveloperDay2009 ～ OpenSocial Hackathon
• アルバムAPIでのコンテナ上での制限など
• mixiアプリの副産物 – ニコニコ動画API関連動画 抽出

$.ajaxSetup({ ifModified: true });
$.get(url,sendObj,function(data){
//data処理の内容
});

こうすることでキャッシュを使わず常に最新状態で表示出来ます。
さらにキャッシュを使ったかどうかを判定する方法もあるようで
amachangがソースコード出してました。
jQuery本体を修正すれば、この判定も出来そう。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• mixiアプリの副産物 – ニコニコ動画API関連動画 抽出
• ひとまず先日インストールしたcakePHPを始める事にしました。
• sh512 – 暗号化とパスワード
• 擬本化ったー
• ipod touch !

1. 画像をJavascriptで表示させる事が出来るらしい。
2. URIデータスキームというのを使うらしい。

var data = "data:image/gif;base64,"+"BASE64データ";
document.write(data);

3. base64必須で上記のような記述をするらしい。
4. IE5～7ではURIデータスキームに対応していないらしいorz
5. しかし、IE8βではURIデータスキームに対応済み
6. IE5～7でも対応出来るようJavascriptで実現している人がいた!!
7. 上記を組み込めば、ImageProtecterも画像データ(透明gif)なしで実現可能!!

という結果に至りました。
そんなわけで時間見つけてバージョンアップ図ります。
とりあえずIE抜きでやってみようかな。

Popular Posts:

• jQuery ifによる要素の判定
• 一新。
• iframe等を使った子から親へイベントを渡す方法
• いつも忘れちゃうので…UNIXタイムスタンプの変換
• JSONデータの使い方

• JSONデータの使い方
• はてなブログのデータを移行しました。
• ゲーム
• アルバムAPIでのコンテナ上での制限など
• popenによるメール送信とPHPセーフモード