Extってのがなんか面白そうだから遊んでみる。
この記事は俺の行動記録。
[wikipediaでJavaScriptの項目を読む]11/18
項目の中で紹介されていた「Ext」をググる。
マイコミの記事がHitする。
[マイコミの記事を見てExtを知る]11/18 -3:37
サンプル画面を見てその美しさに感動。
代表的な機能の一覧を見て思わず感涙。
[Extのサイトへ行く]11/18 -3:38
作者の名前から予想ついたけど外国語のサイトだった。
利用規約とかは言語能力の問題で調査不能。
翻訳してくれてるサイトを見かけたら参考にしようとは思う。
とりあえずExtのダウンロードぐらいは出来た。
[Extの利用方法解説サイト検索]11/18 -4:00
ライブラリに付属してるドキュメントはもちろん英語なので解読不可能。
てな訳で日本人ブロガーに期待。
ググって↓のサイトに到着
[javascript] - zorioの日記
初めてExtに触れる俺のような人間には良い記事かも、と思った。
Extの前身はYUI-Extで、Yahoo!UI用の物だったらしい。
Yui用の頃から使っていたユーザには改めて説明は必要ないのかもしらんけど。
Extから入る俺のような人間は一度Yui向けの方から調べるべきだろうか？
どうでもいいけど記事中の「docuemnt.getElementById(id)の代わりに、Ext.get(id)でDOMをwrapしたExt.Elementオブジェクトを取得出来る。」って言う文章は、言いたい事はなんとなくわかるけど「wrap」って何。
同記事から日本語訳のページURLもゲット。
Ext Tutorial: Introduction to Extの適当翻訳
[Extのソースを覗く]11/18 -4:20
使い方はなんとなく察したのでソースを覗いて実際に使ってみよう、と思った。
DLしたファイルをメモ帳で開いた。
470kb程度なのにオープンに30秒もかかって自分のPCの性能の低さに絶望した。
半年前に店頭で売られてたのを新品で購入した奴なのに……。
そ し て …Extのソースを見て絶望した。
サイズが470kbの奴は最適化済みのファイルだった。
AllCodeは850kb。
コメントやスペースを削除する事でおよそ半分に出来るプログラムとは一体どんな書き方なのか、気にはなるけどメモ帳では開けないので見るのは止めておいた。
指定行数ごとに読み込んで表示できるプログラム書いて、それでチマチマ覗ける環境を用意してから覗こうと思った。
[Extを実際に使ってみる]11/18 -4:40
日本語訳のページや幾つかの記事を参考にして、mdeで開発開始。
いざHelloWorld、と思ったらいきなりError。
「ライン10,文字1,エラー'Ext'は宣言されていません。」だって。
どう考えてもライブラリ内でオブジェクトの作成を忘れているとしか思えない。
基本的にExt単体で使う物では無いらしいし、他のライブラリでオブジェクト作成が行われてるとかが発生しているかもしれない。
開発している側では気がつきにくいerrorだからデバッグされてないのか、はたまた俺の使い方が悪いのか。。
多分後者なので、もうちょい真面目に調べてみる。
[マイコミの記事に含まれていたHelloWorldソースを使ってみる]11/18 -4:45
動作検証してくれている事を祈りながらTest。
mdeのプレビュー機能でtestしたらerror発生。
よく見りゃマイコミ提供のソースはJavaScriptのルールに従ってない。
再現性のあるソース提供してくれよ。。
こんなん検証してないのバレバレだろ。
検証した後で文字を追加したって言う可能性もあるけど、それにしたってerror要因になっちゃうような部分はコメントアウトするべきだ。
ソース修正して再度テスト。
結果は同じ。Extって名前のオブジェクトの生成を忘れている気がする。
[Extと言う名前の空オブジェクトを作って試してみる]11/18 -4:52
なんとなく納得のいかない気分で試してみる。
結果はNG。どないなっとんねん。
[Ext付属のドキュメントから解析]11/18 -5:00
TOEIC試験で190点だった俺に英語の能力を期待してはいけない。
英語は全く分からないからプログラムを読む。
人間同士の言葉のやりとりを追うのは難しいけど機械相手のプログラムならルールは単純だから読めるだろう。多分。
Ext付属のドキュメントはExtを利用して作られたHTMLファイルだ。
それを開いて表示されたのは階層メニューつきの美しいページ。
デザインは完璧で俺は感激したけど、そのページ上に並ぶアルファベットの意味は残念ながら解読不能だった。
画面左側に配置されている階層メニューの中から「Dialogs」→「Hello World」と選択していき、入門用のHTMLソースを開いた。
入門用ページ内にあるボタンをクリックすると、仮想ダイアログが表示された。
ブラウザの内部に描画されるオリジナルパーツを見てやっぱり感動した。
ページを見る限り、ライブラリに致命的なErrorがあるわけでは無いと予測した。
入門用ページのソースを開くと、Ext本体である「ext-all.js」の他に「ext-base.js」や「hello.js」、「examples.js」などが読み込まれているのが分かった。
HTMLとプログラムは分けて書く主義の人らしく、HTMLソース内にScriptは含まれてなかった。
とりあえず「hello.js」から開いてみた。
hello.jsの中では、以下の定義が行われていた。
○ページの読み込み完了直後に実行するfunctionの作成
○作成したfunctionの登録
マイコミ提供のソースと順番が違うのが気になる。
なんかアテにならんなぁ。。
マイコミ提供のソースで出たErrorでは別の箇所に問題があるように思われたからとりあえず無視したけど。
別のソース探した方が良いか？
順番入れ替えるだけで使えるかも分からんから、とりあえずこの疑問は放置する。
とりあえず、hello.jsの中からはExtを定義する文句は見つからなかった。
ついでに言うと、入門用ページを開いてボタンを押すと仮想ダイアログが表示されるんだが、その仮想ダイアログの上にはオリジナルパーツと思われるタブメニューが表示され、二つのタブに「Hello」と「World」と言う文字が書き込まれている。
その「Hello」と「World」を表示するためのプログラムはこのファイルの中に記述されているのだろうと予測していたのだが、無かった。
なんつーか、ちょっと管理方法に疑問を感じざるを得ない。
[Ext付属のソース解析]11/18 -5:30
入門用ページに読み込まれているファイルの解析を続ける。
「examples.js」って言うのが読み込まれていたので開いてみたが、中身グチャグチャで読む気が失せたので他のファイルを見る事にした。
どうして……どうしてこう、インデントを省略してしまうのだろうか。
何かのエディタで開けばこういうソースは自動的にインデントが加えられた状態で表示されるからサイズ縮小のためにこういう形式で保存してるんだろうか。
何はともあれ、よほどの事がなきゃexamples.jsの中は読みたく無いと感じたので別ファイル。
「ext-base.js」って言うのを開いた。
「Ext={};」の文字列を発見。マイコミ死ねｗ
マイコミの記事には
「ダウンロードしたzipファイルを解凍すると、ソース、ドキュメント、サンプルも含めた多数のファイルが現れる。ただし、実際に利用する際には以下のファイル/ディレクトリさえあればよい。したがって、開発環境への導入時には、これら以外のファイルは削除して構わない。」と書いてあり、あたかも「ext-base.js」と言うファイルは要らないかのように図で説明しているが、これなきゃ動かねーよｗバーロｗ
[ext-base.jsを読み込むように変えてマイコミ提供ソースをtest]11/18 -5:40
これをアテにするのも阿呆らしくなってきたけど一応test。
上手くいけば儲けもの、ぐらいの気持ちで。
そしてやっぱり発生したerror。
[環境の検証]11/18 -5:55
入門用ページを開いているのはIE7。言わば一般的な環境。
プログラムの提供者が想定しやすい状態。
対して、俺がマイコミ提供ソースの検証に使用しているのは自作ソフトmde。
mdeも基本的にはie7から色々機能を提供してもらって動作してるので、同じと言えば同じだけど違うとも言える。
環境が違うせいで閲覧が出来ないのか、検証してみる事にした。
ie7で閲覧可能であることを確認済みの入門用ページのソースをmdeにコピーしてみた。
キッチリ表示できたｗ
環境に問題は無いと判断。
[ExtStart.html、ExtStart.js、ExtStart.cssてファイルを調べる]11/18 -6:11
日本語訳を真面目に読んでみた。
三つのファイルの編集から説明が始まっているのに気がついた。
で、上記三つのファイルを含む圧縮ファイルをDLしてきて解凍して開いてソースを見た。
やっぱりぐちゃぐちゃしていた。
と、ここで俺は重大な事に気がついた。
このテキストを書くのに使ったPCは外国の物(いや、やっぱ外国でもLF onlyが普通と思うのは変だわ。眠かったんかな^^;)
改行コードがCR+LFの語圏じゃなくてLFのみで改行する所かも、と思い至り、ワードパッドで開いた。
ちゃんと改行したりインデントしたりしてた（汗
それから、これらのファイルは「ext-all.js」を必要としているが、「ext-base.js」は必要としていなかった。
一体何やねん。
[ExtStart.htmlから一番短いExt用テキストを抜き出して、編集開始]11/18 -6:55
正しく動作するソースの中で一番短い物がこれだったので、これを使い回して編集する事にした。
本来なら、原文をちゃんと読んで理解した上で編集するべきとは思うが、850kbもあるprgファイルなど読めない。
それも、MSOfficeのWordで作成したリッチファイルの850kbじゃなくて、メモ帳での850kbだからな。
長くて気力がもたん。
[mdeの不具合発見]11/18 -7:20
外部ファイルで定義されたオブジェクトを参照するScriptを内包するHTMLをプレビューした後、再度同じソースをプレビューすると、Errorが発生する。
mdeは画面を閉じる前に画面内のhtmlをキャッシュとして保存する機能がついており、再描画の際にキャッシュの情報を一度ロードしてから新しいソースで上書きするので、それが原因で不具合が発生しているようだ。
なんにしても、Errorが出ていた原因のひとつには俺のmdeが絡んでたって言うのが解った。
ちょいショック。
しかしもうデバッグしないと決めているので修正は……しない。と思う。
このExtでMDI形式のソフトウェアが作れるようなら、それでまたMDEを作るつもりだ。だから現行verはこれ以上手を加えない。
面倒臭いから（汗
[とりあえずダイアログを作成]11/18 -7:50
mdeでErrorでちゃうけど回避策見つけたから引き続きmdeで編集を行う。
MDI型prgの作成第一歩として、ダイアログを作成してみた。
俺がやった手順は以下。
１．ダイアログを表示するサンプルプログラムが用意されているので、そのファイルを別のフォルダへコピー。
２．そのファイルが利用している外部scriptファイルも別ファイルへコピー。
３．htmlファイル内部で不要と思われるテキストを全て削って出来るだけシンプルにする。
４．scriptファイル内部のコメントも、英語で書かれてるため理解不能な所は全部削ってやはりシンプルにする。
５．htmlファイル内から外部scriptファイルへの参照を行っているので、アドレスの指定を正しておく。
６．ダイアログを表示するためのキモと思われる部分をprg内から見つけ出して、そこを単純に複製して同じプロセスが2回実行されるようにする
７．編集したファイルを上書き保存して、ブラウザで開く。
８．ダイアログの表示処理が期待通り、元の２倍の回数だけ行われていたら「自分の認識に誤り無し」と断定する。
本当は、coreプログラムを全部読んでちゃんと理解するべきだけど、そんな事してたら日が暮れてしまう。
概ね問題が無いのなら近似値を見つけてそれで納得してしまう方が色々といいはずだ。使える時間が限られている人間は。
[Dialogの表示はひとまず完了]11/18 -10:33
読み込まれた外部scriptは、自身が読み込まれた事を明示的にしておくべきかも。と思った。
Extは圧縮した状態で配布されている。解凍すると中から出てくるのは階層構造のフォルダとファイルだ。
その中にあるファイルをどう呼び出すかは利用者の自由だと思う。
必要な物だけフォルダの中からコピーしてきて、自作prgと同じフォルダに突っ込んで使うか、あるいはExtのフォルダ階層をそのまま利用する形式で使うか。俺は後者を選択した。
で、HTMLタグの一つに「BASE」って言うのがあるのを思い出し、それを使ってアドレスを短縮してみようとか、要らない事を考えたのがマズかった。
D:/prg/mde2/mde.htaから、D:/prg/lib/ext/1.1.1/内のファイルを参照する際、相対Pathを使うなら通常は「lib/ext/1.1.1/ext-all.js」と言う風なアドレスを書く必要がある。
しかしBaseタグを使って基準となるアドレスを「d:/prg/lib/ext/1.1.1/」に出来れば、相対Pathでの指定は「ext-all.js」でよくなる（と思った）。
実際にBASEタグを使ってみたら、これがどうも上手くいかなかった。
指定している外部scriptが読み込んでもらえない。
scriptでの外部ファイルに対しては、BASEタグの指定は意味無いって事に気がつくのに２時間もかかった。
ちくせう。
[機能はデザインに勝るか？]11/18 -12:50
ダイアログ表示機能をいじっているうちに、なんとなく「これではmdeは作れん」と言う気がしてきた。
デザインはいい。本当に素晴らしい。
ただし、重い。
prgがのそのそと動くのは正直堪えられないと思った。
ExtのTreeはアイテムをドラッグ&ドロップできるって言うのに驚いて飛びついたけど、俺のmdeはそういう方法での項目移動はできないけれど仮想メモリを使っての移動は可能だから別にそれで代用できんじゃんと気づいた。
あと、Excelっぽい表が作れるって言うのもJavaScriptを使ってのことなら割と凄い事なんだけど、本物のExcelに比べたら自由度のレベルは天と地ほどの差があって、MS(資金力的な意味で超えられない壁)はやっぱり偉大だと思った。
まぁ、ぶっちゃけると飽きたから止める。受けは良かったけど持続しない魅力だったな。
