WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

TEXTAREA に文字列置換機能を追加する

TEXTAREA Replace の画面 今週の話題で何度か触れましたが、 TEXTAREA 内のテキストに対して文字列置換を行うブックマークレットおよび User JavaScript を作成しました。本日はそれを紹介させていただきます。

TEXTAREA 内にカーソルがある状態で Alt + Shift + R を押すと、右のような UI が表示されて文字列置換が行えます。ひとつひとつ確認しながら置換する / しないを選んでいくこともできますし、すべての文字列を一気に置換することもできます。詳しくは後ほど。

動作確認は Opera, Firefox で行っています。申し訳ありませんが IE では動かないと思います。この際なので、乗り換えをお勧めします。

使ってみる

こちらのページにライブデモがあります。ページ自体にスクリプトが組み込んでありますので、ブックマークレットを実行しなくても機能が使えます。使い方は以下のようになります。

  1. テキストエリア内をクリックしてフォーカスを移し、 Alt + Shift + R を押してください。先ほどの画像のような UI が表示されます。
  2. 下のボックスに「Search for ?」と表示され、テキストが入力できる状態になります。置換する元の文字列を入力して、 Enter キーを押してください。
  3. 次に「Replce with ?」と表示されますので、今度は置換後の文字列を入力し、 Enter キーを押してください。
  4. 検索対象の文字列が水色で表示され、下のボックスに Yes(置換する), No(置換しない), All(すべて置換する), Cancel(置換せずに終了する)の選択肢が表示されます。カーソルキーの左右で選んで Enter キーで選択してください。それぞれの頭文字のキーでも選択が可能です。
  5. すべての文字列が置換し終わると、 TEXTAREA 内のテキストを実際に置き換えて UI が消えます。

ぜひ試してみてください(^^)

ブックマークレットのインストール

ブックマークレットのインストールは、単に以下のリンクをブックマークするだけです。

TEXTAREA置換

あとは、使いたいページでブックマークを選択した後、前述の操作を行えば OK です。ただし、このブックマークレットはスクリプト本体をインターネットから読み込みますので、インターネット接続がないと使えません。もし接続がないときでも使いたい場合は、次の User JavaScript をインストールしてください。

User JavaScript のインストール

前述のブックマークレットは、必要になるたびにブックマークを選択する必要があるので、頻繁に使うには不便ですよね。そこで Opera / Firefox の両方で使える User JavaScript(Greasemonkey スクリプト)も用意しました。こちらはインターネット接続がないときでも使えます。インストール方法は OperaFirefox で違いますので、個別にご紹介しますね。

Opera の場合

まず、以下の JavaScript ファイルをダウンロードし、新しく作成した適当なディレクトリにコピーします。

TEXTAREA_Replace.user.js

次に、以下の手順で Opera を設定してください。

  1. メインメニューの [ツール]-[設定] を選択し、「設定」ダイアログを表示させてください。
  2. 「詳細設定」タブをクリックしてください。
  3. 左のリストから「コンテンツ」を選択してください。
  4. 「JavaScript オプション」ボタンをクリックし、「JavaScript オプション」ダイアログを表示させてください。
  5. ダイアログの一番下にある「ユーザー JavaScript ファイル」のテキストボックスに、先ほど JavaScript ファイルをコピーしたディレクトリのフルパスを入力してください。
  6. 「JavaScript オプション」ダイアログの「OK」ボタンをクリックしてダイアログを閉じてください。
  7. 「設定」ダイアログの「OK」ボタンをクリックしてダイアログを閉じてください。

以上で、スクリプトが有効になったはずです。適当なページを開いて TEXTAREA で Alt + Shift + R を押してみてください。

Cookie 設定などをサイト別に設定している場合、個別設定したサイトでは User JavaScript が有効にならない場合があるようです。そのときは、以下の方法で設定を変更してください。

  1. Opera を終了させてください。
  2. Opera のプロファイルディレクトリにある "override.ini" を適当なテキストエディタで開く。
  3. "User Prefs|User JavaScript=0" という行をすべて削除してください。
  4. 編集した "override.ini" を保存してください。

これで次回起動時からすべてのサイトで User JavaScript が有効になるはずです。プロファイルディレクトリは、Windows なら通常 "C:\Documents and Settings\<ユーザー名>\Application Data\Opera\Opera\profile" あたりです。その他の場合はこちらのページを参照してください。

Firefox の場合

まずはこちらのページで Greasemonkey 拡張をインストールしておいてください。その上で以下のリンクをクリックすると、インストールダイアログが開くはずですので、その「Install」ボタンをクリックしてください。

TEXTAREA_Replace.user.js

これだけです。適当なページを開いて TEXTAREA で Alt + Shift + R を押してみてください。

既知の問題

まだ作りこみが甘いので、いろいろと問題があります。既知のものを以下に挙げておきます。

  • 置換用のウインドウが出ている間でも、元のページが操作できてしまいます。
  • 元ページを暗くしたりはしていないので、微妙にみづらいときがあります。
  • IE では動きません。
  • マウス操作には対応していません。
  • FirefoxCSS の "white-space:pre-wrap" をサポートしていないようなので、 "white-space:pre" で代用しています。そのため、非常に長い行があると横スクロールが必要になってしまいます。どなたか良い方法をご存じないでしょうか。white-space:-moz-pre-wrap でいけるようです。 IE だと word-wrap: break-word だそうな。次回のアップデートで反映させようと思います。
  • ページによっては正常に動作しないことがあります。ご注意ください。

現在はスクリプトを元ページで直接実行しているのですが、こちらの方法を応用して IFRAME 内で実行したほうが良かったなと反省しきりです。そうすれば元ページとの干渉が最小限に抑えられるはずです。今回は時間切れなので現状で公開してしまいますが、そのうち対応したいと思います。

その他、不具合やご要望などありましたら、このページにコメントを付けていただけると嬉しいです。

謝辞

キーイベントを元のテキストボックスに伝えないようにする方法について、 Enjoy×Study さまの以下のページがたいへん参考になりました。

http://d.hatena.ne.jp/onozaty/20060202/p1

貴重な情報をありがとうございます m(_ _)m

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles