はじめに
MicrosoftのInternet Explorer（以下、IE）は、パソコンのWebブラウザにおいて最大のシェアを誇っています。このソフトは、手軽に利用できるWebブラウザというだけでなく、ユーザーが必要に応じて機能追加ができるという特徴があります。その機能追加の方法の1つに、コンテキストメニュー（ブラウザ上を右クリックして表示するメニュー）へのソフトの登録があります。この方法を使うことで、自分が必要な機能をIEに追加することができます。
コンテキストメニューに追加するソフトは、HTMLとJavaScriptの簡単な知識があれば作成できます。前編の前回は、このコンテキストメニューにソフトを追加する「コンテキストメニュー・インストーラ」を作成しました。後編の今回は「コンテキストメニュー用ソフト」という、コンテキストメニューに登録するソフトを作成します。
以下に利用イメージを示します。
過去の記事
IEで選択した部分のソースコードを、右クリックメニューで編集する（前編）
対象読者
JavaScriptをある程度使いこなせる人、およびHTMLに関して基本的な知識がある人を対象にしています。
「コンテキストメニュー・インストーラ」の作成にVBScriptを使っていますが、これはユーザー変数を書き換えるだけで流用できるプログラムですので、特にVBScriptを理解していなくても、そのまま書き換えて利用することができます。もちろん、VBScriptをある程度使いこなせる人にとっては、ソースコードも参考になるでしょう。
必要な環境
IE 4.0以上が必要です。また、Webブラウザやセキュリティ関連ソフトの設定に関しての記述も、前編の「必要な環境」で行っています。こちらも参照してください。
「コンテキストメニュー用ソフト」の作成
以下、「コンテキストメニュー用ソフト」を作成していきます。作成は、以下の手順で進めていきます。
- 「source_view.html」の作成 - テキストエリアやボタンのレイアウト
- 変数の初期化
- 「選択範囲の表示」関数
- 「選択範囲の削除」関数
- 「選択範囲を書き換え」関数
- まとめ（完成プログラム）
「source_view.html」の作成 - テキストエリアやボタンのレイアウト
「source_view.html」という名前の空のテキストファイルを作成します。ファイルを作成する場所は「installer.vbs」と同じフォルダである必要があります。「C:\CodeZineSample\installer.vbs」というパスに作成している場合は、「C:\CodeZineSample\source_view.html」というパスに作成してください。
「source_view.html」を作成した後は、このファイルをテキストエディタで開いてください。まずは、HTMLを記述して、インターフェイスを作成します。以下に、「source_view.html」内に記述するHTMLの内容を示します。
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <html> <head> <title>ソースコードを表示＆削除＆書き換え</title> </head> <script language="JavaScript"> // ★★★ここにソースコードを追加していく★★★ function ViewSel () {} </script> <body leftmargin=16 topmargin=16 scroll="no" onLoad="ViewSel()"> <small> <form name="f"> ■ 選択中HTMLテキスト<br> <textarea name="SelHtml" rows=5 cols=63></textarea><br> <br> ■ 選択中テキスト<br> <textarea name="SelPlain" rows=5 cols=63></textarea><br> <br> ■ 全体HTMLテキスト<br> <textarea name="AllHtml" rows=5 cols=63></textarea><br> <br> ■ 全体テキスト<br> <textarea name="AllPlain" rows=5 cols=63></textarea><br> <br> <div align="right"> <input type="button" value="選択範囲の削除" onClick="DelSel()"> <input type="button" value="選択範囲の書き換え" onClick="RepSel()"> <input type="button" value="閉じる" onClick="window.close()"> </div> </form> </small> </body> </html>
各ボタンのonClick属性に記述してある関数は、実際にはまだ「source_view.html」内には記述されていません。この関数の中身は、以降の記事で作成していきます。
| ボタン名 | 対応する関数 |
| 選択範囲の削除 | DelSel() |
| 選択範囲の書き換え | RepSel() |
| 閉じる | window.close() // （windowを閉じます） |
また、bodyタグのonLoad属性に書かれたViewSel()関数は、次々章で中身を作成することになります。
