HTTPサーバーとWeb開発

85. クリップボードへの貼り付け

Webアプリケーションに欠かすことができないHTML画面、これを補完する言語がJavaScriptです。
RPGユーザーの方にとっては、JavaScriptは少し敷居が高いと感じる方も多くいるのでは
ないでしょうか!?

そこでJavaScriptを開発して上で、便利なデバッグ機能をご紹介します。
一般的に、JavaScriptのデバッグによく使用されるのは

   alert

という命令を使用しデバッグする内容をダイアログに表示します。

【使用例:a という変数の値を alertを使用し表示】
function test(){
  var a = "Hello";
  alert(a);
}

Hello

しかしデバッグの度にダイアログが表示されるので、毎回ダイアログを閉じる必要があり
開発効率が低下することも多々あります。
そこでWindowsのクリップボードを使用しデバッグしたい内容を貼り付ける方法があります。
これはJavaScriptの開発でも重宝しますが、Ajaxの開発のデバッグでは非常に役に立ちます。

Ajaxは、ご存知の通り非同期通信でサーバーにアクセスしデータを取得しクライアントの
ブラウザー画面でデータを表示します。
下記のAjaxリクエストを例に説明していきます。

Ajaxのリクエストを行うJavaScriptコードです。

function AjaxRequest(){
   new Ajax.Request("サーバーリクエストのURL", {method :"GET", onComplete:callBack});
}

Ajaxのリクエストの結果を受け取るJavaScriptコードです。

function callBack(httpObj){

clipboardData命令を下記のように使用し、Ajaxリクエストの結果値である
httpObj変数の値を クリップボードに貼り付けすることができます。

   clipboardData.setData("Text", httpObj.responseText);
    ・
    ・
    ・
}

その後、ご使用のメモ帳、テキストエディターいずれかに Windowsショートカット(Ctrl + V)
もしくは 右クリックから「貼り付け」を行えばAjaxリクエストで取得した内容が出力できます。

【補足】

この clipboardData を使用するには事前にブラウザーの環境設定を変更する必要があります。
下記方法で設定変更を行って下さい。

ブラウザーのメニューバーの
【ツール】 - 【インターネットオプション】 を選択

Hello

【セキュリティ】タブから Webコンテンツゾーン インターネットを選択 - 【レベルのカスタマイズ】

Hello

【スクリプトによる貼り付け処理の許可】で 「有効にする」を選択する

Hello