Tag Archives: JavaScript

enchant.jsのステージサイズについての基礎知識

0
Filed under JavaScript
Tagged as , , ,

enchant.jsを使い始めているのですが、その基礎部分についてちょっと調べてみたメモです。

enchant.jsとは

本家サイトより引用。

enchant.js は HTML5 + JavaScript ベースのゲームエンジンです。わずか30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作する クロスプラットフォームなアプリケーションを開発可能なスタンドアロンライブラリです。

ゲームに限らずあれこれ使えるので、既に色々調査を進めているところですが、ちょっと今日はその基礎部分が気になったので調べました。
enchant.jsのページ内の表示サイズについて、任意のサイズに収めたいと思って調べたのですが、あまりその辺りのドキュメントが見当たらなかったので、大したことではないのですが書いておきます。

HTMLとenchant.js

enchant.jsを使うとき、描画領域を指定するところは、実は2ヶ所あります。
enchant.jsのサンプルのように、HTML上に最大表示するものは、特に何も指定することはなく、それでもenchant.jsが内部的に適切なDOM要素を追加してくれますが、自分でここに使いたい!というときは、divタグを使う必要があります。

  <div id="enchant-stage"></div>

まずは、上記のように書くと、div#enchant-stage に、enchant.js内のGameインスタンス生成時に渡したサイズで描画されます。

  // @game.js
  game = new Game(320,320);

では、160×160の領域に、Game(320,320)で作ったenchant.jsの領域を埋め込みたい(1/2に縮小表示したい)ときは、どうしたらいいでしょうか?
enchant.jsのソースを調べた結果、次のコードで大丈夫と分かりました。

  <div id="enchant-stage" style="width:160px;height:160px;"></div>

まとめ

■概念図


(↑この図は先日のブログで紹介したiDrawで作りました!)

■等倍表示

<div id="enchant-stage" style="width:320px;height:320px;"></div>
// @XXX.js
game = new Game(320,320);

■1/2(縮小)表示

<div id="enchant-stage" style="width:160px;height:160px;"></div>
// @XXX.js
game = new Game(320,320);

Gameの方のサイズを変更すると、素材や各種座標も変更する必要があり、調整が大変なケースが多々あります。そういうときにも使えるテクニックですね。
まぁ、仕事で使おうとしたらそれぞれの案件でいろいろやりたい事があるわけで、そういうときに自由に解析して簡単に修正して商用にも使えるenchant.jsって超便利!と再認識した次第。
(enchant.js のライセンスは、MITライセンス / GPL2 のデュアルライセンスです)

オフィシャル本

最近、オフィシャル本が発売されたようですが、大人気のようですが、私はまだ必要に迫られていないのもあって入手していません。
こういうところも書かれていたりするのかな?

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

著者/訳者:布留川英一 伏見遼平 田中諒

出版社:KADOKAWA/アスキー・メディアワークス( 2012-02-18 )

定価:

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585



まぁ、今回の内容も、enchant.jsの中を追っかけていけば分かることだったりしましたし、書店で見かけたら中を確認して買おうかと思っています。


[AD]

↓beautifulなもの作りたいですね!

ビューティフルビジュアライゼーション (THEORY/IN/PRACTICE)

著者/訳者:Julie Steele Noah Iliinsky

出版社:オライリージャパン( 2011-10-26 )

定価:

Amazon価格:¥ 4,104

大型本 ( 400 ページ )

ISBN-10 : 4873115043

ISBN-13 : 9784873115047


HTML5, CSS, jQueryの基本コードパッケージ

0
Filed under プログラミング言語, 仕事ツール
Tagged as , , , ,

ちょっとしたテストとか、JavaScriptの動作チェックとかやる度にゼロからHTMLを書いていました。
まだ、これまではその間隔が2,3ヶ月に1度くらいだったのであまり苦痛ではなかったのですが、最近1ヶ月に1度はやっている気がする。
大抵のテストではjqueryを使いたくなるので、それをダウンロードして、読み込ませたりするし、当然CSSも必要。
でも、CSSのプロパティとかどういうパラメータ名だったっけ?とか、jqueryってどういう使い方だったっけ?と基本的なところので悩み、なんとなく、こんな感じのような。。ちがうなぁ、と試行錯誤の繰り返し。

サンプルファイルアーカイブ

今更ですが、この作業があまりに無駄に感じたので、その最初のところまでをシンプルにしてまとめたものをアップしておきます。ご自由にお持ちください!

大抵のウェブコンテンツ制作者の方には不要だと思いますが、誰よりも自分のために公開!

Read More »

半減期の計算

0
Filed under JavaScript, その他
Tagged as ,

3月23日に東京都葛飾区の金町浄水場の水から210ベクレル/リットルの放射性ヨウ素131が検出される事態が発生しました。
「国が決めている乳児の飲み水に関する国の指標値の2倍」という話でしたが、これがどの程度危険なのかはさておき、放射性物質が新たに加わらない限り検出される放射線は減衰していくはずなのでその減衰する時間について考えてみました。
Radioactive Materialsphoto © 2005 Konstantin Ryabitsev | more info (via: Wylio)

半減期計算

N0:元になる放射性物質の放射能量

(ベクレル:Bq)

T:半減期

ヨウ素131 (I131):半減期 8.1日(194.4時間)
セシウム134 (Cs134):半減期 2.06年(約18,057.47時間)
セシウム137 (Cs137):半減期 30.17年(約264,462.98時間)
ストロンチウム89 (Sr89):半減期 50.53日(約1,212.72時間)
ストロンチウム90 (Sr90):半減期 28.74年(約251,927.94時間)

t:経過時間

(hour)

計算結果:

計算コード

上記フォームでの計算コードは以下のようなものになります。

1
2
3
4
var n0; // 基準値.
var t; // 経過時間.
var T; // 半減期(時間)
var n = n0 * Math.pow(0.5,(t/T)); // 経過時間を得たときの値.

ニュースの伝えるデータを考えてみる

その後の金町浄水場の検査結果を読売新聞は次のように伝えています。

「22日に採取した水から乳児の飲用の暫定規制値(1キロ・グラムあたり100ベクレル)を超える210ベクレルの放射性ヨウ素が検出されたが、その後減り続け、26日は34ベクレル、27日午前6時の採水では不検出だった。」


半減期計算を考えると、4日で210ベクレルだったものが34ベクレルに下がるわけはなく、210ベクレルの水は都内に流れていったということになります。
浄水場から家庭の蛇口まで到達するのに、どの程度の時間がかかるのかは分かりませんが、その間に水を使った人のところへ近づいていくのは間違いありません。
今回の震災は各種既存メディアの報道のあり方、数字の捉え方のおかしさを浮き彫りにしていきますね。


[AD]

↓科学知識をわかり易く知りたい時にはブルーバックス!

放射線利用の基礎知識―半導体、強化タイヤから品種改良、食品照射まで (ブルーバックス)

著者/訳者:東嶋 和子

出版社:講談社( 2006-12-20 )

定価:

新書 ( 224 ページ )

ISBN-10 : 4062575183

ISBN-13 : 9784062575188


↓「もしも」のときが身近になってきました。

親子のための地震安全マニュアル―家庭で備える地震対策最新情報!

出版社:日本出版社( 2005-11 )

定価:

単行本 ( 150 ページ )

ISBN-10 : 4890489142

ISBN-13 : 9784890489145


↓JavaScriptの教科書的な本。

JavaScript 第5版

著者/訳者:David Flanagan

出版社:オライリー・ジャパン( 2007-08-14 )

定価:

Amazon価格:¥ 4,499

大型本 ( 704 ページ )

ISBN-10 : 4873113296

ISBN-13 : 9784873113296


TomblooのYouTube対応を改良してみた

4
Filed under Firefox, JavaScript, Mac, ウェブサービス
Tagged as , , , , , ,

Tombloo

Tomblooというとても便利なFirefoxアドオンがあります。
コンテキストメニューから選ぶだけで、見ているページをいい感じにウェブサービスに投稿出来るアドオンです。

私はこれでTumblrへの投稿を行っています。
文字列を選べばそれを引用として投稿でき、動画サイトならそれに適した形でプレビューなどを埋め込んでくれます。
インストール方法は、以下のリンク “tombloo.xpi” を右クリックし、 名前をつけてリンク先を保存でダウンロードしてください。ダウンロードされたファイルをFirefoxのウィンドウへドロップするとインストールがはじまります。

tombloo.xpi

追記:2010/08/18

tomblooの作者toさんがコメントされたように下記に書いたYouTubeでの問題への対応は、公開されているスクリプトに取り込まれました (github)

コミットされたコードも洗練されているので勉強になりますね。


情熱プログラマー ソフトウェア開発者の幸せな生き方

著者/訳者:Chad Fowler

出版社:オーム社( 2010-02-26 )

定価:

Amazon価格:¥ 2,592

単行本(ソフトカバー) ( 200 ページ )

ISBN-10 : 4274067939

ISBN-13 : 9784274067938



YouTubeでの問題

注意:前述したように、2010/08/18現在、最新tombloo.xpiでは下記の問題は修正されていますが、技術メモとして残しておきます。
最近YouTubeのHTML形式が変わったりしてちょっと問題があったりしましたが、それについてはこちらのブログエントリ「TomblooからYouTube動画をpostできなくなった件 – FLYING」で紹介されているようにアドオンのJavaScriptソースをいじることで対応出来ました。
ただ、それでもいくつかのYouTube動画で、これでも対応しきれないところがあり、ちょっと気になっていましたので、原因を調べてみました。

調査、解決コード

問題が発生する動画ページは、例えば、この動画です。
他のページと何が違うのか、考えてみると、左上の動画投稿者の名前が入るべきところにバナーが入っています。そこのHTMLタグ取得に失敗してるのが原因と分かりました。

前述したブログでの修正内容を見て、修正すべきは次のファイルであると分かりました。
Windowsの場合は、
C:\Documents and Settings\(ユーザー名)\Application Data\Mozilla\Firefox\Profiles\(プロファイル名)\extensions\tombloo@brasil.to\chrome\content\library
Mac OS Xの場合は、
/Users/(ユーザー名)/Library/Application Support/Firefox/Profiles/(プロファイル名)/extensions/tombloo@brasil.to/chrome/content/library
にある、
31_Tombloo.Service.extractors.js
です。
このファイルの1230行目辺りを以下のように書き換えます。これで動作するようになりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  name : 'Video - YouTube',
  ICON : 'http://youtube.com/favicon.ico',
  check : function(ctx){
    return ctx.host.match('youtube.com');
  },
  extract : function(ctx){
    var author = $x('id("watch-username")');
    ctx.title = ctx.title.replace(/[\n\r\t]+/gm, ' ').trim();
    if( !author ){
      author = $x('id("watch-userbanner")');
      var t0 = author.href;
      var t1 = t0.match( /[^/]+$/ );
      var t2 = author.textContent.replace( /<img.*\/>/, t1 );
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : t2,
        authorUrl : author.href,
      };
    }
    else{
      return {
        type      : 'video',
        item      : ctx.title.extract(/ - (.*)/),
        itemUrl   : ctx.href,
        author    : author.textContent,
        authorUrl : author.href,
      };
    }
  },
},

ちょっと強引に直していますが、まぁ、いいかな。


[AD]

↓YouTubeからUstreamへと、今、何かが変わりつつある。

USTREAM 世界を変えるネット生中継 (ソフトバンク新書)

著者/訳者:川井 拓也

出版社:SBクリエイティブ( 2010-05-19 )

定価:

新書 ( 200 ページ )

ISBN-10 : 479736016X

ISBN-13 : 9784797360165


↓ Make:ブランドのArduino本、面白そう!

Arduinoをはじめよう (Make:PROJECTS)

著者/訳者:Massimo Banzi

出版社:オライリージャパン( 2009-03-27 )

定価:

Amazon価格:¥ 1,500

単行本(ソフトカバー) ( 216 ページ )

ISBN-10 : 4873113989

ISBN-13 : 9784873113982