HTML / JS – ページ 2 – 物欲にまみれたにしふなばし

[JS] IEではconsole.log は（半分）使えないんですね……（；ω；｀）

今の今までconsole.log()を残していたのが動かない原因だったと分からなかったよくそっくそっ！

そしてもっと腹が立つのが、デバッグモードではconsole.logは動くということ。つまり通常モードではエラーが出て、何がおかしいのかをデバッグモードで探そうとした途端、正常に動きやがる。さんざん悪事を働いているズル賢いいじめっ子が、先生にチクられても巧みにかわして、しかもその矛先がチクった方に向けられてしまったような、何言ってるかちょっとよく分からないですが、とにかく悲しい心境です（・ω・｀;）

まぁいじめはいじめられる側にも問題があるんじゃないかという、めったくそ一方的な論理もありますが、console.logを残しておく方にも問題があるという論理はあまり一方的ではないわけで……リリースするときはもちろん消すべきですし……でもIEさんの方も、モードによって挙動が変わるっていうのは何とかしてほしいとも思うんですよねぇ……（小声）

検索してみると、いろんな人たちがコード内にconsole.logを残していたために悲しい気持ちになっていますね。ですがそこはみなさんすごいです。しっかり対処法を書きつけてくれています。参考になったので、リスペクトの意味を込めてリンクをぺたぺたします。

304 – narucissus is Not Modified: Firebugのconsole.logをIEでも使いたいとき　 http://narucissus.blogspot.jp/2007/07/firebugconsolelogie.html

この悲しい出来事から得た教訓は、動かす前にはIE console.logは消せ！ということですかね……。

複数行にまたがってパターン検索したい時は、「マルチラインモード」じゃなくて「シングルラインモード」で検索するもんだと今頃気がついた水曜日の夜。

どうもご無沙汰してます。にしふなです。

正規表現で、デリミタ(/)の後にiだかgだとか入れて、いろんなことができて幸せになれる機能があるじゃないですか。
その機能の中に、複数行にまたがってパターンをマッチさせるか否か、と言う機能があるじゃないですか。ありますよね。
俺はそれを、単一行マッチを「シングルラインモード」、複数行マッチを「マルチラインモード」だと思ってたんですね。
でも実際は、複数行マッチさせたい場合はシングルラインモードを使うみたいなんですね。

なぜなら、「マルチ」、「シングル」は、「検索される側の文字列」(php風にいえば$subject)を、一行として扱うか、それとも複数行として扱うか、と言う違いを切り替える言葉なんですね。

例えば、下記のように人が見やすいように改行・インデントが加えられたソースコードがあったとします。

<html>
	<head>
		<title>HyperText Markup Language - Wikipedia</title>
	</head>
	<body>
		<div>
			<h1>ほげほげ</h1>
			<p>ふがふがふほげげげ</p>
		</div>
	</body>
</html>

<html>

<head>

<title>HyperText Markup Language - Wikipedia</title>

</head>

<body>

<div>

<p>ふがふがふほげげげ</p>

</div>

</body>

</html>

このようなソースコードに「シングルラインモード」を適用すると、以下のように扱われるみたいです。

<html><head><title>HyperText Markup Language - Wikipedia</title></head><body><div><h1>ほげほげ</h1><p>ふがふがふほげげげ</p></div></body></html>

1	<html><head><title>HyperText Markup Language - Wikipedia</title></head><body><div><h1>ほげほげ</h1><p>ふがふがふほげげげ</p></div></body></html>

つまり、改行・インデントといった、整形に関わる記号をすべて「通常の文字」として扱い、「検索される側の文字列」を1行としてみなすモードが「シングルラインモード」と言うことみたいなんですね。
と言うことは、正規表現の挙動はどちらのモードでも変わってないということになりますね。シングルでもマルチでも、1行分しかパターンを適用していないです。

とりあえず結論は、複数行にまたがって検索したい時は「シングルラインモード」で検索しろ！ってことですね。
ちなみに俺は、このことに気づくまで1時間ぐらいウンウン唸ってました。なんというかお恥ずかしい……（；ω；｀）

でもですね、言い訳じみた感じになってしまって恐縮ですが、Web上で正規表現のチェックが出来る「PHP正規表現チェッカー」さんでは、複数行にまたがってパターン検索するときには「マルチラインモード(m)」にチェックを入れるんですよ！！　これはかなり混乱してしまいました……まじどっちなんだよとorz
でも、このツール自体はかなり便利なので、気にせず使っていくと思いますけどね。
http://www.rider-n.sakura.ne.jp/regexp/regexp.php

Zen-CodingをEclipse IDE(またはAptanaなど)にインストールする

どうもこんばんわ。

今回はZen-Codingのインストールについてのメモです。Zen-Codingについては各所で色々書いている方がおられますので、そちらの記事をお読み頂くとして、とりあえず本題へ。

自分がいつも使っているのはAptana Studioなんですが、↓の記事を読んで、Aptanaにも簡単にインストールできることを知りました。

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた – EC studio デザインブログ
http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html

でも、公式ページを見ても、DownloadページにはAptana用のファイルがどこにもなかったんですね。

しかし、ページ内をよくよく見てみると、こんなことが書いてありました。

Officially supported editors

These plugins are developed by Zen Coding team and guarantee to have full support of all Zen Coding latest features.

Aptana/Zend Studio/Eclipse (crossplatform) https://github.com/sergeche/eclipse-zencoding

EclipseベースのIDEに関しては、どうも公式サポートエディターになったらしいですね。ここにあるリンクをクリックして飛ぶと、インストール方法が書いてありました。

Eclipse（Aptanaなど）へのZen-Codingインストール方法

Eclipse本体画面上部にあるメニューバー内の「ヘルプ(Help)」を押し、
出てきたメニュー内の「新規ソフトウェアのインストール(Install New Software)」を押す。
出てきた画面の右上「追加(Add)」ボタンを押して、出てきたダイアログ内の「ロケーション」ボックスに、 http://zen-coding.ru/eclipse/updates/ 　もしくは http://media.chikuyonok.ru/eclipse/updates/ 　を入力。
画面の指示通りに進んでインストール完了。

なんだかとても簡単なインストールになっています。おぢちゃんびっくりだよぉ（・Д・｀;）

しかも、公式対応になったことで、Eclipse上で編集しているファイルならどんな状態でもZen-Codingが使えるようになっています。（これ以前は、Zen-Codingのファイルが入っているプロジェクトを同時に開いていないと有効になりませんでした。）

まぁ波にかなり乗り遅れ、今や引潮に流されている感のあるタイミングですが、とりあえずインストールしてみたんですよ。使ってみると本当に便利ですねこれ。リストとかテーブルとかドロップダウンボックスとか、やたら大量にタグを使う構造を組む時にはかなり重宝します。

とりあえずこんな感じで……今日はこの辺で～（´・ω・）ﾉ

enchant.jsが楽しくてたまらない/ちょっと気になったところ

どうもこんにちは。
怠けているうちにかれこれ二か月以上も放置してしまいました。久しぶりの更新です。

最近、enchant.js（公式サイトへ飛びます）というライブラリをよく触っています。これはJavascriptを用いたゲーム制作をスムーズにできるライブラリです。

JSでゲームとか、ちょっと昔では考えられないことでしたなあ。WebでプレイするライトなゲームといえばFlashで作るのが当たり前でしたからね。

Spriteクラスだとか、addChild()メソッドなどと、AS3にとても影響を受けたであろう言葉がいろんなところに散らばっていて、AS3しか使えないようなモノリンガルな自分にとってはうれしい限りです。

でも使っていると、気になる点がちょこっとだけ・・・
画像を表示することができるクラスSpriteなんですが、これ自身にはaddChildメソッドがありません。ではどこにあるかと言うと、別のクラスGroupにあります。ですので、画像の上に画像を重ねたい（キャラクターの上に感情を表すグラフィックを重ねるとか）場合は、Groupクラスをコンテナとしてその中にSpriteをaddChildしなければいけないのですね。

対してAS3は、DisplayObjectContainerクラスのサブクラスならaddChildできます。こちらのSpriteはDisplayObjectContainerのサブクラスとして派生していますが、普通にaddChildが使えることに慣れていたので、enchant.jsでは使えなかったことに違和感を覚えていました。

でもよく考えたら、BitmapとかTextFieldだってaddChildは使えないんですよね。それにFlexフレームワーク内だとmxmlで作ったビューにSpriteをaddChildしたい場合はUIComponentを間にかませないとエラーを吐きますから、そう大差ないかもしれません。（Flex4からは表示オブジェクトはまた違った体系になってますが……）

とりあえず、enchant.jsのSpriteはAS3のBitmapに当たると考えておくことにします。グループ化したいときはGroupをかませる！うん、むしろ名前がすっきりしてて多分分かりやすい！（・ω・´）

そんなこんなで楽しくenchant.jsを触らせて頂いております。ゲームはまだ作りかけですが、出来上がったら9leap.netにUPしたいな。したいな……！