You are here : トップ -> IT -> インターネット -> コピーさせたい文字列をコピーしやすくする...

フォームを使ってコピーしやすくする

ページの閲覧者に何らかの長い文字列をコピーさせたい場合、単純に文字列をそのまま掲載するよりも、以下のように見せた方が便利かもしれません。
上記の入力フォーム内をクリックしてみて下さい。おそらく、クリックしただけで文字列全体が範囲選択状態になるでしょう。閲覧者はそのまま右クリックして「コピー」を選ぶなり、[Ctrl]＋[C]キーを押すなりして簡単に文字列をコピーできます。
※自動で範囲選択されるにはJavaScriptが有効な閲覧環境が必要です。

フォームを使うメリット

閲覧者にコピーさせたい文字列をこのように表示させると、次のようなメリットがあります。

わざわざマウスを使って細かな範囲選択操作をさせずに済む。
前後の余計な文字まで選択してしまうミスを防げ、確実に目的の文字列だけを選択させられる。

入力フォームを使わずに、普通に文章中に含めると以下のようになります。
この場合、閲覧者が番号をコピーするには、「コピーを開始したい文字の直前にマウスポインタを合わせ、コピーしたい範囲の終わりまでドラッグする」というマウス操作などが必要です。そんな操作を要求するよりは、クリックするだけで適切な範囲が勝手に選択されるようになっている方が閲覧者にとって便利でしょう。
何かの番号や長いURLなど、特定の文字列を閲覧者にコピーさせる必要がある場合は、この掲載方法を使ってみてはいかがでしょうか。
実現方法はとても簡単です。 1行の入力欄を作って、そこにコピーさせたい文字列を入れ、短いJavaScriptを記述するだけです。

簡単コピー用フォームの活用例

ブログのトラックバックURLの表示にこの方法が使われているのをよく見かけます。
トラックバックURLは、リンクしても意味がなく、URLを閲覧者にコピーさせる必要があります。長いURLを閲覧者にマウスで範囲選択させるよりは、上記のようにフォームを使う方が簡単で良いでしょう。
IDやパスワードなどのように、過不足なくコピーしてもらわなければ困るような文字列の掲載にも便利でしょう。（パスワードの場合、余計な空白文字までコピーしてしまっていても気付きにくいですから）
※IDやパスワードを書いている時点で「秘密」でも何でもありませんが。検索には引っかかって欲しくないけど閲覧者には見せたいからを使って隠してみたページへの案内……などには使えそうな気がします。

JavaScriptが使えなくても

JavaScriptが使えない環境からの閲覧であっても、「文章中の一部を選択」するよりは、「フォームの中の全部を選択」する方が楽でしょう。余分な前後の文字を誤って選択してしまう可能性がないからです。
入力欄内にカーソルを入れた上で、

[Ctrl]＋[A]を押して全選択
[Ctrl]＋[C]を押してコピー

……のような簡単な操作でも過不足無くコピーできます。マウスで細かく範囲選択を要求するよりは便利でしょう。
前置きが長くなりましたが、それでは早速、このようなフォームの作り方をご紹介いたします。
 

文字列を簡単にコピーできるフォームを作る

文字列を簡単にコピーさせられるフォームを作るのはとても簡単です。以下のように記述するだけです。（JavaScriptも含んでいます）
たったのこれだけです。（「15」や「文字列」の部分を書き換えて使うだけです。）
これを表示させると、以下のように見えます。
上記の場合、閲覧者がフォームの内容を自由に書き換えられるため、誤ってキーを押してしまうと表示が書き換わってしまいます。それを防ぎたければ、フォームを読み取り専用にすることもできます。
これを表示させると、以下のように見えます。（フォーム内に表示されている文字列は編集できません。）
以下に、上記ソースの意味を順番に解説します。

文字列を簡単にコピーできるフォームの解説

[STEP.1] 1行入力欄を作り、コピーさせたい文字列を指定
これを表示させると、以下のように見えます。
size属性の値には、フォームの横幅を指定します。 value属性の値には、閲覧者にコピーさせる文字列を記述します。
※後述のスタイルシートで指定する方が細かく幅を調整できます。
[STEP.2] 自動的に文字列を範囲選択するスクリプトを記述
これを表示させると、以下のように見えます。フォームの中をクリックしてみて下さい。全体が範囲選択されるはずです。
「onfocus」属性の中に書いたスクリプトは、その要素にフォーカスが移ったとき（＝クリックされたり[TAB]キーなどで移動してきたとき）に実行されます。
「this.select();」は、その入力欄の中身を選択状態にするスクリプトです。これらはすべて修正せずこのまま書けばOKです。
[STEP.3] （必要であれば）書き込み禁止にする
これを表示させると、以下のように見えます。フォームの中の文字列を閲覧者が修正できなくなっています。
readonly属性を付加すると、選択やコピーはできても、修正や削除はできなくなります。なお、上記のように「readonly」とだけ記述するのはHTMLでの記述方法です。XHTMLの場合は、readonly='readonly' のように記述する必要があります。
以上で完成です。
スタイルシートを活用することで、横幅を細かく指定したり、文字サイズや文字色を指定することもできます。次のページで各種装飾の方法をご紹介いたします。
 

フォームを装飾する

スタイルシートを活用することで、横幅を細かく調整したり、文字色や文字サイズなどを自由に指定できます。
■横幅：
上記は、widthプロパティの値に「200px」を指定しているので、以下のように横幅が200ピクセルになります。
■文字サイズ：
上記は、font-sizeプロパティの値に「150%」を指定しているので、1.5倍の大きさで表示されます。
■文字色：
上記は、colorプロパティの値に「red」を指定しているので、赤色で表示されます。

補足

今回ご紹介した方法は、コピーさせたい文字列がものすごく長くなる場合でも、短いスペースに収められるメリットもあります。ただし、表示スペースよりも文字列の方が長い場合は、印刷すると文字列の一部分（実際に見えている範囲）しか印刷されないデメリットもあります。
PC上でコピーすることだけが目的の文字列にのみ利用するか、もしくは文字列全体が確実に見えるほど横幅を広くするなどして使う方が良いでしょう。

前のスレッド ：eBayの商品をセカイモン（sekai...  || 次のスレッド ：ドラッグ＆ドロップで遊べる福笑い...