wsh::AjaxIME

【リファやトラックバックを辿って来られた方へ】このページは 断片部のコンテンツの一部です。好き勝手に書いては消ししています。内容に関するご連絡は掲示板もしくは管理者宛フォームにてお願いします。

このグループの「キーワード」(wiki)は、グループメンバーが個人で編集しているものがほとんどです。詳細はキーワード利用ガイドラインをご覧ください。

■ Ajax IMEとは

Ajax IME: Web-based Japanese Input Method

日本語入力機能の無いPC上でブラウザからの日本語入力を可能にするWebサービスです。

■ Ajax IMEのブックマークレット化

Ajax IMEで日本語入力する場合、

1. Ajax IMEのページを開く
2. 日本語入力したいページを開く
3. Ajax IMEで日本語入力
4. Ajax IMEのテキストエリアをコピー
5. 日本語入力したいページの入力欄にペースト

となると思いますが、これを

1. 日本語入力したいページを開く
2. ブックマークレットを実行する
3. 日本語入力したいページの入力欄でAjax IMEが動く

とできたら良いな。

■ とりあえずやってみた

http://wushi.hp.infoseek.co.jp/js/ime.js

以下のソースをブックマークレットに追加。

javascript:(function(){var s=document.createElement('script');s.src='http://wushi.hp.infoseek.co.jp/js/ime.js';s.charset='UTF-8';document.body.appendChild(s);var t=document.createElement('script');t.src='http://wushi.hp.infoseek.co.jp/js/roma.js';t.charset='UTF-8';document.body.appendChild(t);})()

グーグルのページとかを開いてブックマークレットを実行すると、入力欄でローマ字かな入力が可能になります。

• ローマ字入力用テキストエリアが一番下に出るのでかっこ悪い
• クロスドメイン制約のため、肝心の変換ができない

chasen.orgドメインのページだとブックマークレット版で変換できます。かっこ悪いけど。

例：Ajax IMEの作者さんの日記

■ 要素技術というか問題点

外部JavaScriptファイルの動的ロード

Ajax IMEのJavaScript部分は2つのjsファイルでできています。サイズは大きくはありませんがさすがにブックマークレットにはできません。このため、ブックマークレットを実行すると外部JavaScriptファイルを読み込んで実行する仕組みが必要になります。

自分は以下を参考にしました。

• ページで使われている色をDel.icio.usにポストするブックマークレット(Firefox専用) - oct inaodu
• perl 覚え書き日記 - Hatena::Group::Perl

secondlifeさんの所にも。

• bookmarkletの文字数制限を無くす - coﾘ・ー・ﾝ＜2nd life

onloadの実行タイミング

元のime.jsは onload に関数を定義していますが、ブックマークレットはHTMLのロード後に実行されるので、onloadに定義された関数は実行されません。*1

ちょっとアドホックですが、onloadで定義されている関数を別名で定義して、ime.jsの最後で実行すればOK。

ローマ字入力用テキストエリアの配置

Ajax IMEのサイトだと、日本語入力したい入力欄に重なる形でローマ字入力用テキストエリアが表示されるので、見た目上は直接ローマ字を入力しているように見えます。

ブックマークレット化すると、何故かローマ字入力用テキストエリアがHTMLの末尾に来てしまいました。スタイルの指定が効いていないみたい。

JavaScript XmlHttpRequestのクロスドメイン制約

Ajax IMEは変換開始と完了のタイミングで、XmlHttpRequestでCGIを呼び出しています。

Ajax IME以外のページからjsファイルを読み込んで実行すると、このXmlHttpRequestの部分でCGIが呼び出されていないように見えます。

調べて見るとクロスドメイン制約が原因らしい。

クロスドメイン制約は「JavaScript（XmlHttpRequest）が実行されたリソースのドメイン」（「.jsファイルが置かれているドメインではない」）と「XmlHttpRequestで呼び出されたリソースのドメイン」が一致していないといけないという制約だそうです。

サーバサイドからのCGI呼び出し

XmlHttpRequest以外の方法で呼び出せないかを調べ中。JSONというのがあるようですが……。

試しにtelnetでCGIに直接リクエストを投げてみたら、権限が無いとか言われました。そもそもAjax IME以外のページからは実行できないようです。