はじめに

こんにちは、SHIFT アプリケーションサービスグループの深尾です。

前回投稿から日が大きく経過してしまいましたが、前回記事「IEからEdgeへのマイグレーション」の続編となります。
前回の投稿予定としていたテーマの中から、今回はクリップボードの処理についてまとめました。 少しでも参考になればと思います。

投稿予定のテーマ

• クリップボード処理（今回投稿）

• モーダル

• フォーカス処理　

• ブラウザ判定処理

IEからEdgeへのマイグレーションの道～その２～

IE専用のクリップボードメソッドについて

昔はクリップボードの処理にIE専用のクリップボードを操作するメソッド window.clipboardData が利用されていました。ですが、このメソッドはEdgeでは廃止されたので、他のメソッドを利用する必要があります。
主な代替となるメソッドとして、WebAPI Clipboard APIがあります。このメソッドは window.clipboardData と同等の機能を持っているので、代替が簡易です。しかし、WebAPI Clipboard APIは、HTTPS接続を利用していないと使えません。外部公開のWebシステムであれば、HTTPS接続を利用することが、一般的になっているので問題ないと思いますが、社内向けのWebシステムでは、社内ネットワーク上のシステムなので、HTTPS接続のシステムが多いです。そのため、WebAPI Clipboard APIが利用出来ないケースがあると思います。 他の代替メソッドとして、document.execCommand('')といった物がありますが、WebAPI Clipboard APIほどクリップボード処理に関する複数の機能をカバーすることが出来ません。
今回は、WebシステムがHTTP接続である場合の代替手段を紹介します。但し、結合から言いますと、IE専用メソッド window.clipboardData を100％再現することはできず、一部出来ないことがありますので、ご了承ください。

クリップボードの主な処理まとめ

-　クリップボードからデータを取得
クリップボードからデータを取得し、Webシステムに取得した値を反映するケースです。
-　クリップボードにデータを設定
Webシステムの値をクリップボードに自動設定するケースです。

上記の代替方法について、個別に説明します。

クリップボードからデータを取得

IE専用のクリップボードの値を読み込み処理window.clipboardData.getData()の代替に以下の二つの方法がありますが、document.execCommand('paste')は古いAPIで多くのブラウザでは非推奨とされているため、今回はdocument.addEventListener('paste',function(event){...})を代替メソッドとして活用します。
但しこの方法では、ユーザーが積極的にペースト操作（例えば、Ctrl+Vを押す）を押す必要があります。代替前のメソッドは、ユーザーが意識せずに、JavaScriptでブラウザからクリップボードの値を取得することが出来るため、ポップアップ画面などを用いてペースト操作を促すなどの対応が必要になると思います。

1. document.execCommand('paste'):
   これは古いAPIで、一部のブラウザではまだサポートされていますが、最新のブラウザの多くでは非推奨とされており、ユーザーが積極的にペースト操作（例えば、Ctrl+Vを押す）を行った場合にのみ動作します。

2. ペーストイベントのリスナー:
   JavaScriptでペーストイベントのリスナー（例えば、document.addEventListener('paste',function(event){...})）を設定することで、ユーザーがペースト操作を行ったときにクリップボードからデータを取得することができます。ただし、この方法でもユーザーの積極的な操作（例えば、Ctrl+Vを押す）が必要です。

クリップボードにデータを設定

IE専用のクリップボードへのデータ設定処理window.clipboardData.setData()の代替にexecCommand('copy')を利用する方法ですが、これにも一部制約事項があります。それはexecCommand('copy')はユーザーが何らかのアクションを実行したとき（例えば「OK」ボタンを押下したタイミングなど）にのみ動作する点です。JavaScriptによるページのリロードや非同期通信が行われた際にはこのメソッドは動作せず、既存システムで自動的にクリップボードに値をセットする処理を完全に再現することが出来ません。
さらに、クリップボードに値をセットする処理を応用して、クリップボードの値をリセットする（意図的に空の値をクリップボードにセットする）処理も再現できません。これは、execCommand('copy')は空の値をクリップボードに設定することができないためです。

終わりに

今回はクリップボードの処理についてまとめましたがいかがでしたでしょうか？
ユーザー様の都合でHTTP接続からHTTPS接続への移行は難しいため、HTTP接続のクリップボードのマイグレーションを紹介しました。このクリップボード処理のマイグレーションは機能的にはデグレードが発生する場合があるので、ユーザー様へのご説明が難しいと思いました。 これは最新版のブラウザのセキュリティ(安全性とユーザープライバシー)観点から、スクリプトによるクリップボードへの不適切なアクセスを防ぐための制約のようです。既存のWebシステムを維持するのであれば、社内システムであっても、セキュリティやJavaScriptの観点からもHTTPS接続を利用した方が良いと思いました。是非、HTTPS接続化のご検討をお願いします。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら

PHOTO：UnsplashのFabian Irsara