JavaScript Archive

先日公開した(x)html2presenで使ってみたie7-js 。
以下にその感想を。

設定したかったのは下の内容。
（プレゼンを常にブラウザ表示領域内最大に固定するというもの）

#presenArea {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

普通、IE6以下では上のcssは全く機能しない。
まず、fixed指定はもちろん無視される。
さらに、left-right、top-bottomの同時指定にも対応していない。

IE7.jsを使えば、そんな悩みを一気に解決してくれる･･･はずだったんだけど。

何故かfixedが効かない。
いろいろ試してみたところ、外部cssで指定するとうまく処理されないっぽい。
（style属性タグ内に書くとちゃんと固定された）

結局おなじみのexpressionでやることにした。
style属性タグをjsから操作するのは面倒いし、動的に生成してもIE7.jsが処理してくれるかわからないので。

* html #presenArea {
	position: absolute;
	top: expression(document.documentElement.scrollTop + 'px');
}

これで、無事解決とおもいきや、またも問題発生。
「'px'は宣言されていません」
いや、文字列リテラルなんですが？
どうやら、IE7.js内の処理でなんか起きてるらしい。

ってことで、

top: expression(document.documentElement.scrollTop);

に修正して解決。
（単位指定しないとまずくない？と思ったけど、IE7.js内でpx指定に変換されてる模様）

あと、たまに「a.clientWidthはnullまたはオブジェクトではありません」ってエラーも出るけど、それは僕が原因（HTMLがおかしいとか）っぽい。

初めてのIE7.jsはこんなんでした。
僕としてはけっこう便利だと思います。

ただ、cssに精通してる人達にとってはそうでもないのかなぁ、とも。
（おそらく今まで通りcss-hackを操る方が効率的でしょう）

※ ExplorerCanvasと同時に使ったのが原因ってことは…ないよなぁ。

[訂正 2008/01/23 23:20]
style属性ではなくスタイルタグ（要素）でした。（書き間違えました；）
混乱させてしまってすいませんm(_ _)m
style属性にはもともと対応してないっぽいです。
（一応試してみたらやっぱりバグりました…）

なんかエンジニアの間では常識だと聞いたので。
別にプレゼンする機会はないけど。（あってもパワポ / Impress限定だし…）

なんだかんだ（後述）でできたのがこれ。
（まぁHTMLをスライドっぽく見せてるだけのプログラムですが）

(x)html2presen
（Firefox推奨。IEでも動きますがとてつもなく重いです。FFでもかなり重いけど；）

サンプルとして2つのプレゼンを置いてます。
（ツールの使い方をそのツール自体で説明するという暴挙）

[開発記（？）]

今回は他人のソースを見ないで作ることを目標にした。
車輪の再生産ってやつなんだろうけど、一旦自分で作ってみた方が勉強になるので。
（とはいっても完全に一からは面倒なのでjQuery使った。そろそろ自分用のbasicライブラリ作らないといけないなぁ…）

で、実際作ってみると、予想より難しくてかなり苦労した。
基本的な部分はすぐにできたんだけど…
なんとなく付けてみた落書き機能に超苦戦。

最終的にcanvas要素（＋ExplorerCanvas）でやることにした。
（大量のspan要素を生成する方法もやってみたけど、重すぎて却下）
canvasを弄るのは初めてで全くわからず、結局ネット上のいろんな情報に頼ることに。
でもソースの流用とかはしなかった、頑張った！（って普通か）

以上。
一通り動くようにはできたし（まだまだバグ・機能不足はあるけど）、
amachangさんのツールでも見て勉強するかな。

[参考記事]

• Canvas - HTML5.JP
  このサイトがなかったら完成しなかった。感謝！
• Taken SPC : いい加減な canvas 要素の紹介
  こちらのサイトにもお世話になりました。
• ブラウザ上でお絵かき: Days on the Moon
  本当はこれぐらい軽快に動作させたかった！
  （ライブラリ使わせてもらおうかなぁ…）

先日公開した作詞スルは、デフォルトでプロジェクト杉田玄白の不思議の国のアリスを読み込んでました。
そのため、他のテキストをもとに作詞したい人は、毎回隠しメニューの「真っ白に」ボタンを押さないといけないという面倒な仕様になってました。

サーバの負荷的にもそれはよろしくないよなぁ…ということで、初期状態では何もしないのも作りました。

それが、作詞シナイです。
いや、作詞はするんですけどね、もう名前とかどうでも…。

あと、サンプルをもう一つ作りました。
前回のサンプルは、僕が作詞スルからコピペして作ったんですが、今回のは動的に何個か詩を作るようにしました。

…ん！？

これ作詞スルいらなくなってない？
今回のサンプルの方が何曲も同時に見れるし。
いやいや、アリス＋別のテキストで作る時には便利…作詞シナイでも出来る；

まぁいいか！
（なんかサンプル2が「アルバム作る」みたいになっちゃった気はするけど…）

ちょうどVOCALOID2：鏡音リン・レンも出たことですし、
どうぞ使ってやって下さいm(_ _)m


※ FlMML& JSMMLなんて面白そうなものを見つけたので、
　　自動作曲（？）にも挑戦しようとしたんだけど…
　　文字数にあわせてランダムに音並べるだけってのはちょっと無理があった。
　　ただの雑音に；
　　ってことで、その過程で作った作詞シナイだけでも公開しておこうというわけです。
　　（ホントは作詞する自体をイジっていい感じにすべきなんだろうけど、それは面倒いので！）


ふぅ、これ系はちょっと飽きてきたので当分放置すると思います。
さて、次は何をしようかな～？

適当歌詞作成サイト：作詞スルの変更履歴です。

[2007/12/28]

タイトルに空白が入りまくることがあった問題を修正。
単純ミス。たぶん、これで直ってると思う。

[2007/12/30]

整形処理が適当すぎたので手直しした…けどあまりうまくいかず。
いつか直す、このままでもいい味出てる？

[2008/01/07]

作詞シナイ追加。

[長文注意]

前々から人口無能とかに興味はあったんだけど、
＋最近流行りの圧縮新聞に触発されて
僕もJavaScriptでAIっていうかボットなサイトを作ってみた↓

作詞スル

はいはい、ネーミングセンス0ですよ、わかってますよ。
その名の通り、歌詞っぽい文字列を生成します。

作った歌詞を並べたらこんなんできました。
人口無能のシュールさ全快です！？

VOCALOID2：初音ミクとかのお供にどうですか？
（実は昨日初めて聞いた、そのためにニコニコにも今さら（！）入ったり。思ったよりぽくてびっくり。すげーな、YAMAHA…だよなエンジン作ってるの。）

[使い方]

は、ロゴをクリックするだけの、ワンクリックアプリケーション（？）です。
あと、下の方に隠し（てないけど）メニューがあって、「タグにする」ボタンで歌詞のHTMLを表示できます。
他のメニューは、correct.jsサンプルの時と同じくドーピング用で、他のテキストを読ませたりできます。
（重いのとかヤパイのは読み込ませないでくださいね。）

[仕組み]

ソースを見てください…じゃああんまりなので、ちょっと説明します。
他のサイトでも良く使われてる形態素解析＋マルコフ連鎖です、たぶん。
あんま理解できてないです、マルコフ連鎖 - Wikipedia（2007年12月27日 21:45:14）見て泣きそうになりました。
要は、文をバラバラに区切って、隣接する確率によって繋げていくっていう単純明快アルゴリズムです。（言い切った！）
サイトにもある通り、解析の正規表現は形態素解析もどきを改良してみた - エブログで紹介されてる方法をほぼそのままパクりました。

※ N-gramもちょっと試してみたら面白そうだったけど…いかんせん重いんです！

そして、Alice's Adventures in Wonderland: Japaneseから拝借した、不思議の国のアリスのテキストを読ませて（重いので1～6、7～12章で分けてランダムでどちらか）、そこから歌詞っぽいデータを作ってるわけです。
元がクリエイティブ・コモンズ（表示-継承）だから、機械的に作ったのもCCになる･･･のかなぁ？
もちろん、他のテキストだけを読み込んだ場合は関係ないけど。

以上、説明でした。

※ 今回は、ちゃんとOOPで作ろうと頑張った
　…んだけどだんだん飽きてきて、HTMLを作るころにはもう適当2。
　その場しのぎの応急処置を多発してしまう悪い癖が。
　（結果ソースは僕以外が見ると意味不明な記述だらけに；）
　それでもわりとおもしろいものができたんじゃないかと、自画自賛しなくちゃやってらんない！

ちなみに、これは自分の中で正式サービスと勝手に位置付けてるので、いつものゴミ箱じゃなく、サブドメイン（lyrics）を与えてみました。（のわりにはHTML&css適当すぎとか言わないで…）

[参考]

はじめてのAIプログラミング―C言語で作る人工知能と人工無能
この本がきっかけで、人口無能を面白いと思うようになった。
だいぶ前に読んだんだけど、今回改めて読み直した。やっぱ人口無能の会話は笑っちゃう。
ただ、最近LLっていうかJSばっかやってるからCを読むのがつらかった。本質じゃない文字列処理とかにてこずっちゃってもう…。