注)質実剛健: 考えるほどに質でも実でも剛でも健でもないなとつくづく思う。
かつ、WindowsだMacだLinuxだSolarisだと、やたらいろんなOSを使うようになったので、プラットフォームに依存しないアプリケーションが欲しいと思った。
プラットフォームに依存しないHTMLエディタというとまず当時のNetscape Composer及びMozillaの同じ機能のツールを使ってみた。さらに、OpenOffice.org様のWriterがある。しかし、これらは重いし、ソースコードがかなりアレだ。自動作成だからしゃないといえばないのだが、だったらもっと簡単なコードを自動作成したほうが君のためにも俺のためにも幸せなんだということにならないのかなあと思った。
表1 HTMLエディタの例
| 製品名 | ベンダ | 使用経験 |
|---|---|---|
| Dreamweaver | Adobe様 | Win98用のバージョンをXPまで引っ張った。最後はさすがにボロボロになった |
| ホームページビルダー | IBM様 | ホムペビルダそのものは使ったことがないが、WebSphere Studio Application Developerに同じ機能が組み込まれていた |
| SeaMonkey | Mozillaプロジェクト様 | SolarisのデフォルトブラウザがMozillaのときに使った |
| OpenOffice.Org | OpenOffice.org様 | 今でも、急ぎのときなどはソースコードを見ないことにして使っている |
http://www.hexidec.com/ekit.php
作者のHoward Kistlerさんの自己紹介によると、フリーランスのWebデザイナアーンドプログラマで、アメリカ食品医薬品局など偉いどころのアプリケーションなども開発しているそうだ。この「hexidec」というサイトで、自作のいろいろなオープンソースのソフトウェアを公開しておられる。
図1 READMEも何もありゃしねえekitフォルダ
だが、きっと簡単だからなのだろう。ekit.jarをダブルクリックしたら、エディタ画面が立ち上がった。
図2 Ekit最初の起動
図3 いろいろあるんじゃんヨー
注)オッチャーン: おニイさんかも知れない。わかんないけど。
USのFlのHUの、漢字系はCNまであるが、JPはない。そうだ、だったら作ってみようか。と、まあそれは置いといて、デフォルトのLanguageResources.propertiesを見てみよう。JPがないのだから、これが反映されているはずだ。geditで開けてみた。
なにィィ
なんと、そのファイルにチョクでゴミが書かれていたのである。なんだヨーアタシのせぇじゃないじゃんヨ。だがこれは一体どうしたことなのだ!?
図4 もともとたかってたんじゃねぇか
図5 既存のソースを利用するプロジェクト
図6 プロジェクトの場所はどっか他に
図7 ソースフォルダとして「ekit」フォルダを選ぶ
図8 パッケージ構造も正しく「ekitproject」ができたス
図9 「Ekit.java」を実行すりゃいいとわかる。あとでもう一回よく見てね
図10要するにこういうヤツだン
だからプロパティファイルを書き間違っちゃったりした日のために元のテキストは必ずとっておいて、そっちを修正してまた変換するということになる。
また、ファイル名にも注意が必要だ。日本語のプロパティファイルのデフォルトがLanguageResources.properties という名前の場合、日本語のプロパティファイルにはLanguageResources_ja_JP.propertiesという名前を寸分違わずつける必要がある。
でもNetBeansだっとぉーん。「ekitproject」の下、「com.ekit」パッケージを見てください。そう、あとでもう一回よく見てねとお約束した、図9に見られる、「Ekit.java」のあるノードだ。
LanguageResources.propertiesというファイルがひとつしかないように見える。でもそれはファイルではない、機能なのだ。ノードを開くと、各国語プロパティファイルに相当する言語ノードがズラリと現れる。
図11個々のファイルではなく、機能全体を表すノードなのだ
この「LanguageResources.properties」というノードを右クリックして「開く」を選んでいただきたい。
「編集」とか、ただダブルクリックではだーめである。モノホンの「LanguageResources.properties」の内容、つまりゴミのやたらついた英語のテキストが表示されるだけで、ワソ面白くもない。あくまで右クリックで「開ぁーく」
図12 右クリックで「開ぁーく」ッ
するとだ。編集画面が妙なものになる。この相撲の星取り表みたいなのは何だッ?
図13狭すぎるんだヨ
うろたえるなーッ。これは、編集画面に一気に各国語の言語対応表が表示されたので、狭くて一文字たりとも満足に表記できないでいるのだ。見出しに「キ..」とあるのが「キー」で「デ..」とあるのが「デフォルト言語」のことだと御説明すれば早いであろう。
だから見たい列をマウスでえいやっとヒラゲてやれば中身が見えるようになるわけだが、その前に、これに日本語を追加してやろう。
「LanguageResources_ja_JP.properties」というファイルを追加するためには、この「LanguageResources.properties」というノード(あぁーめんどくセェーッ)を右クリックして「ロケールを追加」を選ぶ。
図14このめんどくさい名前のノードを右クリック
どのロケールを追加するかは、下の欄のセットメニューからお選びいただけます。「ja_JP」(*注)を選ぶと、設定が上の欄にも反映される。バリアントってのは追加の識別子みたいなヤツらしいので特に指定しない。
図15 下の欄からja_JPを選ぶ
注)ja_JP: 日本語をしゃべる国は日本しかないのに甘えてワタシはどうしても「日本語」を「JP」と表してしまう。でもたとえば「フランス語」を示すのにフランスの国旗アイコンとか揚げると、フランス語が母国語でフランスでない国の人が憂慮を示すことがあったりする。占領などで強制的に外国語を使わされる問題はまた別のこととして、歴史的に自分の母国語であるものに他の国の名前がついてるのってどういう心境になるんだろうなと、想像してみることがあるが難しい。
そうするとこのワソ狭い領域にさらにひとつ追加されて混雑が加速する。そう、実は使わないロケールファイルを全部どっかにやっちゃえばいいわけだが、ここではit(イタリア語)の次くらいだろうと見当をつけてエイッ。とヒラゲると新規作成されたロケールの言語にはデフォルト言語の内容が全てコピーされている。つまりゴミつき英語だッ。
図16 日本語の欄です。初めはゴミつきの英語です
コイツをバンバカ直していく。はい、もうそのまんま、あなたのATOKあるいはWnn8から日本語をバンバカ入れます。途中でチャラになるといやなのでときどき保存します。
図17 日本語の欄をバンバカ編集します
これで保存すりゃいいんです!あとで適当なエディタで「LanguageResources_ja_JP.properties」を開いておくんなまし。そう、実際に開いたのが図10のトゲトゲな内容なんです。ええもうもう一回開けばガンスカ再編集できますえ。
どーです。この機能だけでも、明日からNetBeansを使いたくなったんじゃありませんか?エッ今から?
するとだ!プラットフォーム番外地のはずのJavaで、コンパイルエラーが出てしまった。だがこれは怪我の功名、とまではいかなくとも、少なくともなぜ英語にゴミがついているのか、きわめて漠然とだがわかったような気がした。コンパイルエラーの原因はこれだったッ。
図19ギョエー(オー・ウムラウトで発音しましょう)
「この文字がUTF-8にマップできない」というエラーだった。
ドイツ語じゃん。「座布団ハテナberschreibt」は「ウーウムラウトberschreibt」すなわちユーバーシュライプト、 overwriteの意味に違いないッ。て浅学をひけらかしてもしょうがないのだが、Kistlerさんなるほどドイツっぽい名前だヨ。これらのソースはUTF-8と違うというか、少なくとも今ワタシが使っているNetBeansと違う文字コード環境で書かれたというわけだ。とすると、かの英語のプロパティファイルもきっと、同じISOナントカというコードでも今ワタシが使っているSolarisの文字コード環境と微妙に合わない場所で作られたに違いないッ!わかんないけどッ!こうしてゴミの謎がなんとなくわかったように思った時点でワタシは満足した。どっちみちプロパティーファイル直しちゃったし。
図20座布団ハテナを含むコメント箇所を全部消す
しかしだ。コメントだけだと思ったら、プログラムのど真ん中にもエラーがあった...だが、プログラムそのものではない(そらそうだよ)。引用されている文字列、否、文字キャラクタのようだ。
図21ただのコメントではない
これは一体?調べると、どうやらやはりウムラウトなどの特殊文字のようだ。キーからそれらを入力したときに、Unicodeかなんかに変換して文字化けを防ぐ仕掛けのようである。てこたあ、キーからそんなものを入力しなければいいわけだ。ということで、この「case」ごと抹消する。「負けたらどうするなどということは考えていない、ワタシは負けないからだ」という感じである。
これでコンパイルし直すと、「推奨されないコードを含んでいます警告」が出るにや出たがそりゃアタイの責任じゃなくて構築は成功した! このとき注意点だ。NetBeansでは、構築物はプロパティファイルのような関連ファイルも含めて全部別の場所(ここではekitprojectフォルダ)に置かれ、そこから実行される。だから今のように途中でエラーが出てそれを修正してもう一度構築などした場合、エラー修正したコードだけが構築物フォルダに送られ、関連ファイルは置いてきぼりにされる傾向がある。不明な原因で修正が反映されない場合は、あるいはより積極的に人生やり直したい場合は、図18で「プロジェクトの構築」など生ぬるいわーッ「プロジェクトの生成物を削除して構築」ーッ、とやる。
図22自分で直したとは思えないほどナイスな日本語インターフェイス
ここで、そもそも日本語を入力できるかどうか確かめてなかったことに気がついて、連日の暑さを一瞬忘れかけたが、しかしッ。皮がここまできれいに日本語表示ができるのに、中身で日本語が表示できないってこたぁよもやあるめぇ。入れてみよう。
よしよし、入った!ではこれに書式を設定してみよう。選択して、メニューから「書式」<「見出し」を選ぶ...ってこの日本語は自分で考えて書いたヤツなんだから意味ないっちゅーの。とにかくそういう機能があるんだン!
図23 文字列を選択して書式を指定。BlockquoteとかPreformattedはわからなかったんじゃなくて、ヘタに訳すとタグとの関連がわからなくなるからあえて訳さなかったのヨホントよ
字がおっきくなったゾ。いったんekit.htmlという名前で「保存」する。さてソースコードはどうなっているか見てみよう。
おや、ファイルブラウザで間違ってダブクリしてしまった。Firefoxが立ち上がる。ホホーちゃんと見出しは見出しとして表示されているじゃないか。でもワタシが見たいのはソースなのヨ。テキストエディタで開き直す。
ギャー。
図24「ワタシは負けないから」ではなく「すでに敗北しているから」であった。
図10で偉そうに説明したバックスラッシュ数字バックスラッシュじゃねぇか!Firefoxでは日本語が見れているが、この場合エンコードは何であると検出されているのか?調べると、「Shift JIS」になっている。本当かッ!?
まあ、ブラウザでは表示されるわけだし...再編集もEkitで開き直せばできたので...使えないとは言い切れない。しかし、普段からさらに偉そうに「テキストデータは本質的にプレーンテキスト(*注)として保存されているのがよいエディタである、ある日急に腐って書式などが失われたとしても、最低限テキストだけは取り出せるという安心感がある」などとあちこちで吹聴しているワタシが、これを「Javaで動く高機能HTMLエディタ、日本語入力も自由自在!」などと今更どのツラ下げて...
ま、いいや。なんとか読める日本語テキストとして再ゲロする方法をあとで考えよう。それより、他にどんな機能が使えるのか、せっかくだから試してみることにする。
注)プレーンテキスト: このバックスラッシュ数字バックスラッシュもプレーンテキストではあるんだよネ?人間が読めて編集だってできるんだもんね?日本語を知らない人がひらがなを見るようなもんなんだもんネ?
図25以後もたびたび用いる「挿入」メニュー
リンク先を選ぶ画面になる。ちなみに「Anchor」はプロパティファイルになかったが、要するに<a>のことだろう。ここにhttp://....とURLをモロ書きしてもいいし、自分のサイト内へのリンクなら相対パスでもオッケーだった。
図26相対パスもオッケーだ
かくして、プレビューではタイヘンいい感じの画面になった。プレビューではなッ。
図27プレビューはたいへんヨイ
図28文字列を選択してフォントを指定。こうして見るとStrike-throughてのは取消線だったのか。チッ
もっとも、ブラウザのほうで表示フォントを「sans-serif」にしとけば、特に指定しなくても最初っから全部ヒゲなしで表示されるから、世の中には明朝が好きな人もいるかも知れないし無理に指定することもないかも知れない。 「フォント」のメニューからは、サイズやスタイルも選べる。たとえば本文中の図の説明には図28から「小さく」を、「なにィィ」などは「大きく」を選べばヨイ。
図29 ulとolのようだ
図30あらかじめ改行した文を複数選んで、ボタンをクリック
図31きれいに箇条書きとインデントが加えられた
注)逆く: 「く」が< なのに対して>が「逆く」
まず、メニューから「表の作成」だ。この表メニューには他にも魅力的なアイテム満載である。
図32 表のメニューは魅力アイテム満載だ
作成時には、何行何列で境界はどうするなどときいてくれる。
図33 行や列や境界、マージンなどをきいてくれる
決めると空のセルが現れるからそこにチョクで入力していけばいいのだ。各列幅はそこに入力する文字の長さから適当に決めてくれるし、改行も自動でしてくれる。このへんのさじ加減は実に柔軟だ。図34はワタシとしては何も考えずにただ文字列だけガンスカ入れていったものである。
図34 この列幅と自動改行の絶妙なフィール
そしてェェェーッ。テキストエディタでプチプチのワタシであれば絶対めんどくせぇからやらないこと(実際このページではやってない)、セルの色なども簡単に設定できる。セルを選択しておいて、図32の満載アイテムから「セルを編集」を選ぶのだ。
セルの設定画面では揃えだの色だのを選ぶことができる。図36ではfuchsia(フ*ックシア?)とかtealとかピンと来ない色も選んでみた。
図35 セルの編集画面
図36 フなんとかはピンクでティなんとかは青緑だった
見出し部分を中央揃えしてみた。図35で「align」を「left」から「center」にすればよいのだが、Ekit画面ではふつうに中央揃えされたのにブラウザ(Firefox)で見たら、設定した部分だけが黒くなってしまった。
ムハッ、バグか!ここに来て圧巻度大激減か!と思ったらそれはブラウザの解釈の問題であった。セルに手をつけてしまったことにより、ソースには色がわざわざ「none」と書き込まれてしまう(一度もセルを編集しなければ、無定義である)。ポン太野郎じゃなくて誰だっけあの動物はこの「none」を「黒」と解釈したので、セルの色が黒くなっただけのことだった。だから、何か編集を加えたセルには色を「white」と明示してやればよい。まあ決してバグなどではなく明朗な機能であると言えるかどうかは別として、修復困難なエラーではないということで圧巻度の減少は少しにとどまった。
図37 ブラウザでも正常表示。見出しの中央揃えなんかも滅多にワタシがやることではない
図38画像URLを相対パスで入れたらエラーになってしまった
それもJavaのエラーであることが、これを実行しているNetBeansの出力欄にガミャガミャでることからもわかる。結局はあの凶悪な(*注)ヌルポインタエクセプションだった。つまり画像が参照できないってことのようだった。
図39NetBeansのエラー出力でヌルポインタ例外とわかった
注)凶悪な:でもそのわりには案外簡単な間違いが原因だったりする。
このJava実行エラーはEkitの足枷だ。ポン太野郎などのブラウザなら、参照する画像がなければリンク切れマークを出すだけだが、Javaで動くEkitはページ全体が表示できなくなる。 でもローカルで作業してんのにフルでURLパス入れられないじゃない。だから作成時は一応「ローカルファイルから読み込む」ことにしといて、あとでテキストエディタで<img src="...">の部分を相対URLに書き換えてしまえばいい。ダサいがなッ。
図40 たまに人生からやり直さなければならなくなるので注意しよう
だがこれを使うときは気をつけよう。今挿入したタグを取り消したい場合、そのタグに挟まれた部分も全て取り消されてしまうことがときどきあるのだ。あっでも今気がついたんだけどUndo(*注)は「やり直し」じゃなくて「取り消し」だったねハッハッハ。ワタシが言っているのはUndoのことだ。あとでプロパティファイルをまさにやり直しておこう。
注)アンドゥ: 本アプリケーションに限らず、フランス語風に「エァヌドゥ」と言いながらクリックすると気分が出る。
を挿入するのが確実)... READMEにもそれらの問題が報告されている。またそこには「俺のバグじゃなくてSunのJavaのバグなんだぜ」というような内容のことも書かれており、テメSun様のJava様に文句つけるたフテとまで思いかけたが、相手はFDAのアプリケーションまで書いているプロのデベロッパ、ワタシのようなITお笑い芸人がそれこそ文句をつけるなどおこまがましいにも程があるので、思うのをやめた。
このEkitで作成し、画像の相対URLだけテキストエディタで再編集したページを、ekitekit.htmlとして同時に掲載することにした。みなさんのブラウザでは御覧になれるだろうか?
いずれにしろタイヘンすばらしい機能を持ったツールなので、読める日本語が出力されないのだけがタイヘン残念だ。あと、勝手にソースコードの一部を削除してしまったので絶対に新たなトラブルの元を作ってないとは言い切れない。プロパティファイルも作ったことだし、これを(「やり直し」を「取り消し」に直してから)Kistlerさんに送ってかつこれらの問題を報告したほうがいいかどうか今思案中だ。なにせSolarisでしかテストしてないからなぁ。