テキストフラグメントURL生成ツール
Webページ上の特定のテキストをハイライト表示するURLを生成します。
ツールの仕様
テキストフラグメントURL生成ツール 仕様まとめ
概要
指定したWebページのURLとハイライトしたいテキスト情報を基に、テキストフラグメントの構文に沿ったURLを自動生成。
生成されたURLにアクセスすると、対象ページの指定箇所がブラウザによってハイライトとし、その付近に自動的にスクロールします。
画面構成
画面は大きく4つのエリアで構成されます。
- 入力エリア: URLやハイライトしたいテキストの情報を入力します。
- オプションエリア: URL生成時の補助的な設定を行います。
- ボタンエリア: URLの生成や入力内容のクリアを実行します。
- 出力エリア: 生成されたURLの表示とコピー、動作確認を行います。
機能仕様
1. 入力エリア
URL生成の元となる情報を入力するフォームです。
| 項目名 | 説明 | 必須/任意 | ヒントのテキスト |
|---|---|---|---|
| 対象WebページのURL | ハイライトさせたいページのURL。 | 必須 | https://example.com/articles/post001 |
複数フラグメント指定prefix | textStartの直前にある文字列を設定。 | 任意 | 前にある文字列（※ハイライト対象外） |
複数フラグメント指定textStart | ハイライト文章、もしくはハイライトを開始する文字列を設定。 | 必須 | ハイライト文章（またはハイライトを開始する文字列） |
複数フラグメント指定textEnd | ハイライトを終了する文字列を設定。 | 任意 | ハイライトを終了する文字列 |
複数フラグメント指定suffix | textEndの直後にある文字列を設定。 | 任意 | 後に続く文字列（※ハイライト対象外） |
必須項目のtextStartのみ指定すると、その指定した文章全体がハイライトされます。
必須項目のtextStartと任意項目のtextEndを組み合わせることで、指定した開始文字列と終了文字列の間がハイライトされるように。
さらにtextStartとtextEndを組み合わせは、prefixやsuffixを指定することで、より細かい条件を設定できます。
複数フラグメント指定のボタン
1つのWebページ内で複数箇所をハイライトしたい場合に設定する機能です。
- 「ハイライト設定を追加」ボタン
- ボタンをクリックすると、
prefixからsuffixまでの入力フォームのセットが下部に追加されます。 - 追加された情報は、URL内で
&text=...のように連結されます。
- ボタンをクリックすると、
- 「このハイライト設定を削除」ボタン
- すぐ上にあるハイライト設定を削除できます。
2. オプションエリア（オプション設定）
- チェックボックス「URLとテキスト内のマルチバイト文字や記号をエンコードする」
- URLのパス部分や、各テキストパラメータに含まれる日本語などのマルチバイト文字やURLで特別な意味を持つ記号（
%,&,,, など）を自動でパーセントエンコーディングします。 - デフォルトでチェックONの状態。
- URLのパス部分や、各テキストパラメータに含まれる日本語などのマルチバイト文字やURLで特別な意味を持つ記号（
3. ボタンエリア（実行ボタン類）
「URL作成」ボタン
以下の流れで処理が実行。
- 設定された入力項目のチェック処理
エラーがある場合は処理を中断してメッセージを表示。 - テキストフラグメントURLを生成
- 出力エリアのURLと動作確認用のリンクを作成
「初期化」ボタン
全ての入力フォームの内容と出力エリアの表示をクリア。
4. 出力エリア
生成されたURLを確認し、利用するためのエリア。
- 生成URL表示欄
生成されたURLが読み取り専用のテキストボックスに表示。 - 「コピー」ボタン
クリックすると、表示されているURLをクリップボードにコピーします。
コピーが完了したら「コピーしました！」というフィードバックを短時間表示。 - 動作確認リンク
生成されたURLへのリンク（<a>タグ）を表示します。
なお、リンクは新しいタブ（target="_blank"）で開くように設定し、すぐにリンクの動作を可能に。
バリデーション（入力チェック）
「URL作成」ボタンのクリック時に以下のチェックを行い、不備がある場合はエラーメッセージを表示して処理を中断。
- 必須項目チェック
「対象WebページのURL」と、少なくとも1つの「textStart」が入力されていることを確認。
未入力の場合は、どの項目が不足しているかを示す具体的なエラーメッセージ（例: 「対象WebページのURLを入力してください」）を表示する。 - URL形式チェック
「対象WebページのURL」がhttp://またはhttps://で始まっているかを確認。
形式が不正な場合は、エラーメッセージ（例: 「有効なURLの形式ではありません」）を表示する。
動作環境
- 推奨するメインの利用環境:
- InternetExplorer以外の最新ブラウザの利用を推奨。
なお、テキストフラグメントが動作するブラウザや詳細なバージョン情報は、こちらの記事で紹介済みです。
以上が「テキストフラグメントURL生成ツール 仕様まとめ」でした。
今後、拡張したい機能
当初、ブックマークレットを使ったURL生成機能や<iframe>を使ったプレビュー機能を検討しましたが、最近はセキュリティが強固でブックマークレットや<iframe>が機能しないサイトがほとんどのため、取りやめました。
これら以外の機能としてあったら便利そうな機能は以下のとおり。
逆引き（デコード）機能
- テキストフラグメントURLを貼り付けると、
prefix,textStartなどの各パラメータに分解して表示する機能。 - 自分以外が作ったURLの構造を分析したり、複数のパラメーターを修正する場合などで役立ちそうです。
共有支援機能
- QRコード生成: 生成したURLのQRコードを自動で表示し、スマートフォンで簡単に読み取れるようにすると便利そう。
- 短縮URL連携: テキストフラグメントURLは長くなりがちのため、短縮URLサービス（TinyURLなど）のAPIと連携して、短いURLを生成できる機能があると便利そう。
コメント