Javascript カテゴリー記事

iframe等を使った子から親へイベントを渡す方法

2009-08-09 (日)カテゴリJavascript, 制作タグ,

技術メモ。
iframe等の子から親に対してイベントを渡す方法です。
ブラウザ毎に微妙に異なるので注意が必要です。
ちなみにdoctypeは「4.01 Transitional」「XHTML 1.0 Strict」「XHTML 1.0 Transitional」標準モードで確認済み。

Java Script
//以下例では、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 が存在する場合がある

Opensocial Hackathon 7月

2009-07-18 (土)カテゴリJavascript, 制作タグ

毎月開催のOpensocial Hackathonも7月です。今回はgoo×mixi共催 in Googleでした。
人数も多く非常にレベルの高いhackathonとなりました。

□情報共有Aチーム
AppMaker

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

□ゲームチーム
ダイアモンド

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

□写真・地図チーム
ツーマップ

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

□チュートリアルチーム
この指とまって下さい

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

□情報共有Aチーム
マイスイッチ

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

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


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

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

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

アルバムAPIでのコンテナ上での制限など

2009-07-14 (火)カテゴリJavascript, 制作タグ,

先月のOpensocial hackathonで使ったアルバムAPI周りを再度勉強し直しました。
mixiのコンテナでもひっそりとアルバムAPIが動作するようになっていましたので、動作させる上でのいくつか注意した方がよい箇所をまとめておきます。

■アルバム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現在)

AutoPagerizeとsyntaxhighlighterプラグインをWordPressで使う

2009-07-10 (金)カテゴリJavascript, Word Press, プラグインタグ,

Autopagerとsyntax-highlighter

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

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

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

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

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

続きを読む »

GoogleDeveloperDay2009 ~ OpenSocial Hackathon

2009-06-12 (金)カテゴリJavascript, 日常タグ,

昨年も参加したGoogleDeveloerDayに今年も行ってきました。
昨年は最後まで、「知ってるよコレー」だったのですが
今年は色々と収穫がありました。Google携帯とかw
※とは言ってもI/O関連の話が主流だったようなので、半分は復習でした。。

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

笠原さん基調講演

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

アプリケーションの位置づけ

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

——-
ハッカソン発表会様子

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

OpenSocial Hackathonに参加してみた。

2009-04-24 (金)カテゴリJavascript, 日常, 興味関心タグ,

mixiアプリなどでにわかに盛り上がってきているOpenSocialですが、先日行われた「OpenSocial Hackathon」に参加してきました。
今回はgooホーム、リクルート メディアテクノロジーラボさんの主催によるイベントでした。
個人的にはmixiアプリなどを出していますが、肝心の機能部分は知識0に近かったのでそこら辺を補えたらと思い参加。

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

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

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

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

mixiアプリの副産物 – ニコニコ動画API関連動画 抽出

2009-04-16 (木)カテゴリJavascript, 制作, 興味関心タグ

せっかく作ったので公開。

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

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

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

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

mixiアプリ作ってみた。

2009-04-13 (月)カテゴリJavascript, 制作, 興味関心タグ

mixiアプリ
久しぶりにアプリ作ってみました。
Opensocialがどんなもんかと思ってね。

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

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

Ajax 通信でのキャッシュ

2009-03-04 (水)カテゴリJavascript, jQuery, 制作タグ

IEでは、XMLHTTP通信(GET限定)を行ったときにキャッシュが発生するそうです。仕事で必要な場面があったので調べてみました。
Ajax(XMLHTTP)のキャッシュについて
jQueryを使っている場合も同様で、常に最新状態にしたい場合はキャッシュを使わずに取ってくるような仕組みの導入が必要です。

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

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

URIデータスキーム

2009-02-08 (日)カテゴリJavascript, プラグインタグ

先日のImageProtecterの記事以降にちょっと調べてみた事。

  1. 画像をJavascriptで表示させる事が出来るらしい。
  2. URIデータスキームというのを使うらしい。
Java Script
var data = "data:image/gif;base64,"+"BASE64データ";
document.write(data);
  1. base64必須で上記のような記述をするらしい。
  2. IE5~7ではURIデータスキームに対応していないらしいorz
  3. しかし、IE8βではURIデータスキームに対応済み
  4. IE5~7でも対応出来るようJavascriptで実現している人がいた!!
  5. 上記を組み込めば、ImageProtecterも画像データ(透明gif)なしで実現可能!!

 

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