ラベル JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル JavaScript の投稿を表示しています。 すべての投稿を表示

2009/06/02

mixiアプリでFlash(2)

以前公開したガジェットのサンプルの不良を早速見つけました。

以前のサンプルでは、
プロフィールの取得と、

gadgets.util.registerOnLoadHandler(get_viewer_profile);

Flashの表示が、
gadgets.util.registerOnLoadHandler(show_flash);

非同期に行われていた。

そのため、プロフィールの取得が済む前に、先にFlashが読み込まれてしまうことがありえる。
この場合、Flash内では必要な変数(プロフィール)を取得できず困ったことに…

この事態を避けるため、プロフィールの取得がすんだ段階でFlashの表示を行うように、サンプルを改変しました。

sample.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="use Social Data">
<Require feature="opensocial-0.8"/>
<Require feature="flash"/>
</ModulePrefs>
<Content type="html">
<![CDATA[

<script type="text/javascript">
var viewer = new Object(); // globalで必要な変数を宣言

function get_viewer_profile() {
var request = opensocial.newDataRequest();
request.add(request.newFetchPersonRequest(
opensocial.IdSpec.PersonId.VIEWER), "viewer_data");
request.send(function (response) {
var item = response.get("viewer_data");
if (item.hadError()) {
// エラー処理。item.getError() で詳細情報を取得
return;
}

// 実行ユーザのプロフィールを参照
var person = item.getData();

viewer.name = person.getField(opensocial.Person.Field.ID); // ID
viewer.name = person.getField(opensocial.Person.Field.NAME); // 名前
viewer.nickname = person.getField(opensocial.Person.Field.NICKNAME); // ニックネーム
viewer.url = person.getField(opensocial.Person.Field.PROFILE_URL); // プロフィールURL
viewer.icon = person.getField(opensocial.Person.Field.THUMBNAIL_URL); // アイコンURL
viewer.address = person.getField(opensocial.Person.Field.ADDRESSES); // 住所
viewer.age = person.getField(opensocial.Person.Field.AGE); // 年齢
viewer.birthday = person.getField(opensocial.Person.Field.DATE_OF_BIRTH); // 誕生日
viewer.bloodtype = person.getField(mixi.PersonField.BLOOD_TYPE); // 血液型

// Flashの表示
gadgets.util.registerOnLoadHandler(show_flash);
});
}
gadgets.util.registerOnLoadHandler(get_viewer_profile);

function show_flash() {
gadgets.flash.embedFlash(
"sample.swf", "externalContainer", "9.0.0",
{
width : 400, // 幅
height : 300, // 高さ
quality : 'high',
wmode : 'transparent',
allowScriptAccess : 'always' // swfからのaccessを許可
}
);
}

function getMixiPerson(){
return viewer; // 必要な変数を返す
}
</script>

<div id="externalContainer"></div>

<script type="text/javascript">

</script>

]]>
</Content>
</Module>


続き

2009/06/01

mixiアプリでFlash

mixiアプリが開始して久しいですね。
以下は、mixiアプリでFlashを使うための備忘録です。

以下のガジェットをmixiアプリで登録するものとする。

sample.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="use Social Data">
<Require feature="opensocial-0.8"/>
<Require feature="flash"/>
</ModulePrefs>
<Content type="html">
<![CDATA[

<script type="text/javascript">
var viewer = new Object(); // globalで必要な変数を宣言

function get_viewer_profile() {
var request = opensocial.newDataRequest();
request.add(request.newFetchPersonRequest(
opensocial.IdSpec.PersonId.VIEWER), "viewer_data");
request.send(function (response) {
var item = response.get("viewer_data");
if (item.hadError()) {
// エラー処理。item.getError() で詳細情報を取得
return;
}

// 実行ユーザのプロフィールを参照
var person = item.getData();

viewer.name = person.getField(opensocial.Person.Field.ID); // ID
viewer.name = person.getField(opensocial.Person.Field.NAME); // 名前
viewer.nickname = person.getField(opensocial.Person.Field.NICKNAME); // ニックネーム
viewer.url = person.getField(opensocial.Person.Field.PROFILE_URL); // プロフィールURL
viewer.icon = person.getField(opensocial.Person.Field.THUMBNAIL_URL); // アイコンURL
viewer.address = person.getField(opensocial.Person.Field.ADDRESSES); // 住所
viewer.age = person.getField(opensocial.Person.Field.AGE); // 年齢
viewer.birthday = person.getField(opensocial.Person.Field.DATE_OF_BIRTH); // 誕生日
viewer.bloodtype = person.getField(mixi.PersonField.BLOOD_TYPE); // 血液型
});
}
gadgets.util.registerOnLoadHandler(get_viewer_profile);

function getMixiPerson(){
return viewer; // 必要な変数を返す
}
</script>

<div id="externalContainer"></div>

<script type="text/javascript">
function show_flash() {
gadgets.flash.embedFlash(
"sample.swf", "externalContainer", "9.0.0",
{
width : 400, // 幅
height : 300, // 高さ
quality : 'high',
wmode : 'transparent',
allowScriptAccess : 'always' // swfからのaccessを許可
}
);
}
gadgets.util.registerOnLoadHandler(show_flash);
</script>

]]>
</Content>
</Module>


上記のガジェット中のsample.swfは以下のソースをビルドしたものとする。

sample.fla
import flash.external.ExternalInterface;

var mixiPerson = ExternalInterface.call("getMixiPerson"); // JavaScriptのgetMixiPerson関数を呼び出す


このとき変数mixiPersonにはmixi上でそのアプリを閲覧している人の情報が格納される。
あとはご自由に! 続き

2009/05/27

MIXI QUEST


内容
mixiアプリに挑んでみました!
マイミクと一緒に戦ったり、
マイミクを倒したりするRPGです。
以下の問題に関しては、mixiアプリAPIが将来的に拡張されれば、対応する予定…
・所属するコミュニティが技として登場しますが、効果が適当
・味方パーティの負け判定がない
やり方
・←→↑↓…移動・選択
・スペースキー…決定

http://mixi.jp/run_appli.pl?id=1941
※上のURLにアクセスしてください。
続き

2008/07/29

300 LINES TETRIS


内容
7行テトリスに真っ向から勝負!
そして、完敗。
やり方
・←→…移動
・スペースキー…回転

http://sites.google.com/site/ochiyuki/ogs_300linestetris.html
※上のURLにアクセスしてください。
続き

2008/03/30

HATENA HAIKU WIDGET MAKER


内容
はてなハイクのブログパーツ、完成版。
そもそもこれ自体はブログパーツではなく、ブログパーツを生成するものであること。
また、ブログパーツが和製英語であること。
以上から、名前変更。
やり方
・はてなのアカウント
https://www.hatena.ne.jp/register
・Googleが発行するkey
http://code.google.com/apis/ajaxfeeds/signup.html
を取得。
以下のフォームに入力。

はてなアカウント

Google key


WIDGET

続き

はてなハイクのブログパーツ(4)

とりあえず完成版でいいかな?と思っていた、はてなハイクのブログパーツ。
ただ、本家Twitterに比べ、決定的に劣っているものがありました。
このまま完成版にするわけにはいきません。

Twitterのブログパーツ


はてなハイクのブログパーツ0.1


まず、本家Twitterに比べ、決定的に劣っている点について。
それはこの“** days ago”と、エントリーが更新された時間を明らかにするもの。
通常のblogと違い、yyyy/mm/dd等の表記方法で行わないのがポイントらしい。

JavaScript による日付・時刻・時間の計算・演算のまとめ
http://www.hoge256.net/blog/2007/08/javascript_1.html
そこで、このサイトに掲載されていたscriptを借りて、
はてなハイクのブログパーツを作り直してみた。

はてなハイクのブログパーツ0.3
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts03.html

var dd = new Date(entry.publishedDate);
date=compareDate(now.getYear(), now.getMonth()+1, now.getDate(), dd.getYear(), dd.getMonth()+1, dd.getDate())+" 日前";
document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div style=text-align:right;font-size:small;>"+date+"</div>";

フィードからエントリーの日付を取得し、変数ddへ格納。
そこから引数を揃え、借りてきた関数compareDateに渡す。
結果を変数dateに格納し、いままでのものと一緒に出力する。

関数compareDateを作ってくださった方のおかげで簡単にいけました。
ありがとうございます。

また、各々のブログパーツを生成するためには以下のものを利用する。
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts04.html
使い方ははてなハイクのブログパーツ0.2と同じ。

最近気づいたのだが、“表示テスト”は多くのブラウザで利用できない様子。
オマケ機能だから、構わないか…?
完成版では、削除することにする。 続き

2008/03/20

はてなハイクのブログパーツ(3)

必要なのは、はてなのアカウント、Googleが発行するkey。
これが前回の結論です。
その2つをははてなハイクのブログパーツ0.1に渡すにはどうすればいいのか、考えてみました。

これらは、私が用意することが出来るものではない。
入力してもらうしかない。
ということで、以下のテスト版、はてなハイクのブログパーツ0.2を制作した。
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts02.html

利用するためには、はてなのアカウント、Googleが発行するkeyを用意する。
はてなのアカウント
https://www.hatena.ne.jp/register
Googleが発行するkey
http://code.google.com/apis/ajaxfeeds/signup.html

それらをフォームに入力し、“ブログパーツ制作”を押す。
すると、“ブログパーツ”のフォームに、ソースが出力される。
これをブログに貼れば、その人のブログにはてなハイクを貼ることができる。

ちなみに、“表示テスト”ははてなのアカウントのみの入力でも可能。
続き

2008/03/09

はてなハイクのブログパーツ(2)

前回作ったはてなハイクのブログパーツ0.1は、私のはてなハイクのみをこのブログでのみ取得します。
しかし、誰もが自分のブログにはてなハイクを取得させられるようにしたい!
そこで、前作の反省をし、改善すべき点を考えていきます。

はてなハイクのブログパーツ0.1は、JavaScriptで書いている。
JavaScriptは、扱いも制作も楽だし、サーバーにも優しい。

ただ、厄介なのが外部ファイルの扱い。
ActionScriptでもそうなのだが、JavaScriptではドメインの違うサーバー上のファイルの読み込みが原則出来ない。
そのため以前は、アウトプットはJavaScript、ファイルのやりとりはPHP、とサーバーサイドスクリプトの力を借りて、この手の問題を解決していた。

ただ、現在はとても便利なものがある。
Google AJAX Feed APIだ。
これは、Googleに生成されたキャッシュへ、Googleが許可したサーバーがアクセスするという形をとる。
アクセスされるサーバーがアクセスするサーバーに許可を与えている場合、上記の制約の例外になるため、JavaScriptのみでファイルの読み込みが出来るのだ。

また、Googleはフィードリーダーのサンプルソースも公開している。
実ははてなハイクのブログパーツ0.1は、これをちょっといじったものに過ぎない。
変更したのは、変数に格納するデータと、その出力方法だ。

Googleのサンプルソース(の一部)

var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}


var div = document.createElement("div");

"feed"というidのdiv要素中に、div要素を作り

div.appendChild(document.createTextNode(entry.title));

entry.titleをテキストとして格納している。

ただ、はてなハイクのようなミニブログの場合、タイトルに重要な意味はない。
ここで欲しいのは、記事だ。
ちなみにTwitterの場合、そもそもエントリーごとのタイトルは存在しない。

また、テキストとして格納しているため、記事中でHTMLなどが利用されている場合、タグがむき出しになってしまう。
つまり、ちゃんとタグが機能しなくなってしまう。
これでは、はてなハイクの長所であるお絵かき機能の意味がない!

これらを踏まえて、以下のように改善した。

はてなハイクのブログパーツ0.1(の一部)
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div>---</div>";
}


document.getElementById("feed").innerHTML+="<div>"+entry.content+"</div><div>---</div>";

"feed"というidのdiv要素のinnerHTMLに、直接entry.contentを格納している。
記事をHTMLタグそのまま格納することで、上記の問題を解決できた。

var feed = new google.feeds.Feed("http://h.hatena.ne.jp/ochiyuki/.rss");

出力はこれでかまわない。
ただ、入力できるものが私のはてなハイクのフィードだけだというのは、問題だ。
扱うフィードを、ソースの中に直接記述していることは、1つ目の改善すべき点だ。

<script type="text/javascript" src="http://www.google.com/jsapi?key=*****"></script>

また、これはブログごとにGoogleが発行するkeyを必要とする。
私のブログのkeyを、ソースの中に直接記述していることは、2つ目の改善すべき点だ。

次回は、このあたりを改善して作ってみようと思います。 続き

2008/02/23

はてなハイクのブログパーツ

昨今流行しているTwitter。
このようなサービスは、ミニブログと呼ばれるそうです。
今、ミニブログ業界は雨後の竹の子。
日本産のものも続々と現れています。
その中でも特に目を引くのが、はてなハイク。

はてなハイクの魅力は、なんと言っても優秀なエディター。
画像や動画の貼り付けが容易、はてなキーワードとの連携…それだけじゃない!
お絵かき機能が提供されている。
気軽に書き込むものなのだから、これは嬉しい機能だ。



ただ、残念なことにはてなハイクはブログに貼り付ける機能を提供していない。
ライバルのTwitterは提供しているにも関わらず。
ブログ周りの機能は、アメリカのほうが充実しているようだね。
mixiが幅を利かせている日本じゃ需要が無いのかも。

ということで、“はてなハイクのブログパーツ”を作ってみることにしました。
以下はそのテスト版。
私のはてなハイクのみを、このブログでのみ取得します。
http://sites.google.com/site/ochiyuki/tst_hatenahaikublogparts01.html
続き

2008/02/15

AA ADVENTURE


内容
JavaScriptに少し慣れてきました。
そこで、いよいよ作ってみました…私のお気に入りのゲームジャンル“アクション”。
やり方
【概要】
一般ステージでは、“★”を取ればクリア。
ボスステージでは、ボスを撃破すればクリア。
雑魚敵にぶつかると、ゲームオーバー。
【キャラクター】
・“┏(^o^)┛”…プレイヤー
・“(∵)”…雑魚敵
・“┫06┣”…ボス
【操作方法】
(IE6)
・W…ジャンプ
・A,S…移動
・Z…攻撃
(FF2)
・↑…ジャンプ
・←→…移動
・↓…攻撃

http://sites.google.com/site/ochiyuki/ogs_AAadventure.html
※上のURLにアクセスしてください。
続き

2008/01/20

SIMPLE AA MAKER


内容
中間色のない白黒のAA(アスキーアート)を作るゲーム(?)です。
横幅は全角10文字分なので、概ねどのサイトでも利用できるのではないでしょうか?
やり方
・色の反転のさせる…反転させたい箇所をクリック
・掲示板等に貼る…そのままコピー&ペースト

続き

2008/01/05

OCHI OTHELLO


内容
“落ちオセロ”。
“落ちゲー”+“オセロ”です。
7行プログラミングテトリス等のJavaScriptゲームに触発されて作ってみました。
やり方
【概要】
自分のコマ(黒)と相手のコマ(白)が交互に落ちてきます。
自分のコマで相手のコマを挟むと、そのコマは自分のコマになります。
コマが1番上まで積み上がったら試合終了です。
その時点で多くのコマを持っている者が、勝ちです。
【操作方法】
“START”をクリックして、開始。
“□”にマウスを乗せ、自分のコマを移動。

続き