‘enchant.js’ タグのついている投稿

神社★参詣なブログパーツ

 プログラム, ,
 公開日:2014年2月11日 / 更新日:2015年7月13日

★2015年7月13日追記
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

パワースポットとしても注目されている神社。
神社★参詣なブログパーツを作ってみました。

Wikipedia「神社一覧」から
ランダムに選んだ著名な神社を参詣する感じになっています。

こちらのテンプレートにしたがって、
名称、画像、祭神、神体、例祭などの情報を表示します。
Wikipediaの該当ページへのリンクや、
位置情報があればグーグルマップへのリンクが付きます。

ということで、
作ったブログパーツはこのページの右側に貼り付けてあります。
鳥居をクリックすると実行します。

ちなみに、
おみくじはこちらから引けるようです(^_^)

ブログパーツとして使うには、
以下のスクリプトをコピペなどして埋め込んでください。

enchant.jsでノベルゲーム(9)

 ゲーム, プログラム,
 公開日:2012年11月26日 / 更新日:2013年1月17日

3ヶ月ぶりくらいにenchant.js本体を更新したら、
バージョンが v0.6-pre とかになってて、
内部が大きく変更されていることに気づきました。
しかもtl.enchant.jsは本体に統合されたようです。

こちらのページによると、
DOMのelementベースからcanvasベースに描画エンジンが変更されるとのこと。
アクションやRPGとかの性能向上を図るためのようで、
個人的にもこの方針は正しいと思います。

ただ・・・

ノベルゲーム向けのプラグインであるoes.enchant.jsでは、
DOMのelementを前提としている機能が多々あるので、
canvasベースになるとうまく行かなくなってしまいます。
実際v0.6-preでやってみると、ものの見事に動作しません(^_^;)
Entityクラスから _element プロパティが消えてます!!!
がーん(T_T)
う~ん、これは激しく困りました。

elementベースな従来のやり方に対応するかどうかは検討中だそうですが、
ぜひサポートしてくれることを願いたいです。

ということで、
oes.enchant.jsプラグインを使用する際は、
v0.5以下のenchant.jsを使用してください。

ちなみに、
古いバージョンのenchant.jsをダウンロードするには、
githubのenchant.jsページにて、
「branch:master」となっているドロップダウンリストから
Tagsを押して必要なバージョンを選択してください。

ところで、
v0.5系の最新であるv0.5.2でテストしてたら、
バグを見つけたのでoes.enchant.jsを修正しました。
サウンドのボリューム値は0~1の範囲となっているのですが、
tweenとか使った場合に、微妙にその範囲を超えてしまうことがあるようです。
範囲を超えるとブラウザによっては例外を起こしてしまうので、
設定するボリューム値がその範囲を超えないように対処しました。

機能テストの実行やパッケージのダウンロードとかはこちらからどうぞ。
関連投稿はこちらで参照できます。

enchant.jsでノベルゲームの機能テスト(8)

 ゲーム, プログラム,
 公開日:2012年8月8日 / 更新日:2012年8月9日

なんか久しぶりに enchant.js の本体を更新したら、
animation.enchant.js に替わって tl.enchant.js になってるのに気づきました。
ということで、
animation.enchant.js ではなく tl.enchant.js に対応するように修正しました。
また、
oes.enchant.js の一部の機能を ex.enchant.js として独立させて、
他のアプリでも利用できるようにしてみました。
鉄道なブログパーツ温泉なブログパーツで使ってます)
そのため、
oes.enchant.js を使う場合は ex.enchant.js も読み込むようにしてください。
短縮版の ex.enchant.min.js でも構いません。

関連投稿はこちらで参照できます。
機能テストの実行やパッケージのダウンロードとかはこちらからどうぞ。

温泉地巡行なブログパーツ

 プログラム, ,
 公開日:2012年8月4日 / 更新日:2015年7月13日

★2015年7月13日追記
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

以前、
鉄道駅なブログパーツを作りましたが、
今度は温泉なブログパーツを作ってみました。
enchant.jsを利用しています。

Wikipedia「日本の温泉地一覧」から
ランダムに選んだ温泉地を訪ねる感じになっています。

こちらのテンプレートにしたがって、
名称、画像、泉質などの情報を表示します。
座標情報があればグーグルマップへのリンクが付きます。
ただしテンプレートに対応していないページは対象外としています。

ということで、
作ったブログパーツはこのページの右側に貼り付けてあります。
温泉マークをクリックすると実行します。

ブログパーツとして使うには、
以下のスクリプトをコピペなどして埋め込んでください。
(※8月5日 スクリプトを短くするために少し変更しました)

ところで、
実際にやってみると画像や座標がなかったりするページが多いようです。
う~ん、ちょっと残念。

★2014年1月3日追記
@pagesがCloudFlareを導入したためか、なんか動かなくなっていたのを改善。
たぶん原因はここで書いてあるような感じっぽい・・・。

鉄道なブログパーツ「どこかの駅」

 プログラム, ,
 公開日:2012年6月20日 / 更新日:2017年6月19日

★2017年6月19日追記。
またwikipediaのページの内容が変わったようで、
うまく動かなくなっていたようです。うむぅ・・・。
動くように改修しました。

★2017年4月14日追記。
wikipediaのページの内容が変わったようで、
うまく動かなくなっていたようです(^_^;)
動くように改修しました。

★2015年7月13日追記。
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

★2014年1月3日追記。
@pagesがCloudFlareを導入したためか、なんか動かなくなっていたのを改善。
たぶん原因はここで書いてあるような感じっぽい・・・。

enchant.jsを利用して、
今度はアプリっぽいものを作ってみることにしました。

enchant.jsにはBox2Dのプラグインがあるので、
AS3版のBox2Dを利用して作ったFlashな「ロト6選択機」
移植しようかとも思ったのですが、
同じものを別な形式で作っても面白くないので、
その昔に思いついたアイデアを実現してみることにしました。

それは、
wikipediaの「日本の鉄道駅一覧」のページから
ランダムにどこかの駅の情報を取得して、
駅舎の写真とかを表示するというような感じです。
んで、
ブログパーツとして使えるようにサイズは小さめにして、
wikiやGoogleMapへのリンクを設けることにしました。
アプリの名前はずばり「どこかの駅」にしました(^_^;)

作業的には以下のような感じ。
XMLHttpRequestで該当ページを取得してresponseを解析。
必要な情報を収集して表示する。
ただしXMLHttpRequestはクロスドメインではうまくいかないので、
自前のプロクシを経由して回避しています。
プロクシについてはこちらを参考にさせていただきました。

実際にやってみると、
検索するDOMタグのパターンの見極めに苦労したりして、
ページの解析には結構手間取りました。
また概ねテンプレ通りに記述されているようなのですが、
微妙に異なる表記パターンがあるので調整も必要でした。
当初は隣接駅の情報も取得しようとしたのですが、
パターンが多岐に渡るので断念しました。
結局、安定して採取できそうな以下の情報に絞りました。
駅名、駅名の読み、駅舎の画像、位置情報の4つです。
位置情報以外は必須とし、
それらを採取できなかった駅は対象外にすることにしました。

さて、そんなこんなで大体プロトタイプができたので、
Chrome以外のブラウザでの動作をチェックしたら、
問題が・・・嗚呼(T_T)

一つは、Operaでの表示がおかしい。
position:absoluteなDOMエレメントのleftやtopが更新されたら、
描画も更新されるはずなのに、なぜか更新されないパターンがある。
エレメントの追加順序を変えるとうまく行ったりすることもあって謎。
Operaのバグ? あるいはなんか最適化のミスか?
はたまた自分のPCの環境がおかしいのか?
でも他のブラウザではうまく描画されてるしなぁ・・・。
とりあえず、Operaだけ一部のアニメ演出は無しにしました。

もう一つはIE9、こっちの方が問題。
responseXMLにquerySelectorやquerySelectorAllが無い!?
documentのDOMにはあるのに、なぜかresponseXMLのDOMには無い・・・。
なんで?
これだからIEは、小一時間問い詰め・・・(以下略)(^_^;)
調べてみると、innerHTMLやstyleなどよく使いそうなプロパティも
responseXMLのDOMには無いようです。
どうやらresponseXMLのDOMには、
最小限のプロパティやメソッドしか実装されてないっぽい?
それにしてもquerySelectorが使えないのは痛い。
getElementsByTagNameとgetAttributeでちまちまやるしかないのか・・・。
めんどい・・・。
ああそうだ! jQueryがあるじゃないか!!
というか始めから使っとけ(^_^;)
あっさり解決しました。
セレクタの表記方法がCSSのと異なる場合があるけど、
それさえ注意しとけば問題なし。

ということで、
長々と書いてしまいましたが、
とりあえず完成したのを右サイドに貼り付けてあります。
ブログパーツとして使うには、以下のスクリプトを埋め込んでください。
(※8月5日 スクリプトを短くするために少し変更しました)

ちなみに、「日本の鉄道駅一覧」から
なぜかこの桟橋にたどりつけてしまいます(^_^;)
テストしてたら偶然みつけました。