AngularJSでクリップボードにテキストをコピーする

JavaScript

業務アプリケーションではよく必要になる「クリップボードにコピー」の機能を AngularJSで実装してみる。

Flash(Flex)で業務アプリケーションを開発していたときは何の苦労もなく出来たことなのだが・・・

原則的に、クリップボードへのアクセスを JavaScriptで行うことは出来ない。出来るブラウザもあるが、特定のブラウザに依存するものを作りたくないというのは開発者共通の願望である。そのため、どうしても必要な場合は Flashを経由してクリップボードにアクセスする方法が取られる。

そのためのライブラリとして ZeroClipboardがあり、さらにこれを AngularJSに統合する asafdav/ng-clip を使うことでスコープ変数の内容を簡単にクリップボードへコピーできる。

Flashを使うため、iPhone/iPadや最近の Androidのように Flashが動かない環境では利用できないことに注意

ng-clipを利用するには、ZeroClipBoard.js と ngClip.js をロードし、"ngClipboard" をアプリケーションモジュールにインジェクトする。また、ngClipProviderの configでクリップボード操作に利用される Flash(ZeroClipboard.swf)をセットする。

コピー操作のトリガーにしたいボタン要素で、clip-copy属性にコピーされるテキストを決定する式と、必要なら clip-click属性にコピー処理が行われた際のアクションをセットする。これだけでクリップボードへのコピー機能が実装できた。

動作イメージ

コピーボタンを押すとクリップボードにテキストボックスの内容がコピーされた後に通知も出るようにしてみた

サンプルソース

<html lang="ja" ng-app="MyApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.1/ZeroClipboard.js"></script>
    <script src="http://assets.walbrix.com/js/ngClip.js"></script><!--自分のサーバに置き直すこと-->
    <script language="javascript">
      angular.module("MyApp", ["ngClipboard"])
        .config(["ngClipProvider", function(ngClipProvider) {
          ngClipProvider.setPath("http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.1/ZeroClipboard.swf");
        }])
        .run(["$rootScope", function($scope) {
          $scope.text = "なまらテキストだべさ";
          $scope.$watch("text", function(oldValue,newValue) {
            if (oldValue != newValue) $scope.copied = false;
          });
        }]);
    </script>
    <title>AngularJSでクリップボードにコピーする</title>
  </head>
  <body>
    <div class="container">
      <h1>AngularJSでクリップボードにコピーする</h1>
      <div class="input-group input-group-lg">
        <input type="text" class="form-control" ng-model="text">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button"
             ng-disabled="!text" clip-copy="text" clip-click="copied=true">
            <i class="glyphicon glyphicon-paperclip">コピー</i>
          </button>
        </span>
      </div>
      <div class="alert alert-info" ng-show="copied">クリップボードにコピーされました</div>
    </div>
  </body>
</html>

制限事項

(これを書いている時点のバージョンでは)clip-copy属性を付けたボタンのマウスオーバー時やクリック時の見た目的なふるまいが無効になってしまう模様。

Flashのセキュリティ制限により、上記のHTMLファイルをローカルで開いて(file://...)表示した場合にはクリップボードへのコピーが機能しない。

同じカテゴリの記事

Angular.JSでselect要素にoptionをぶら下げる色々な方法 2014年3月29日
AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する 2014年3月18日
HTML5アプリケーションでの、サーバとクライアントの時差について 2014年3月17日
AngularJSの $resourceを使って application/x-www-form-urlencoded 形式のリクエストを POSTする 2014年3月15日
AngularJSと UI Bootstrapで日付と時刻の入力をする 2014年3月14日

お勧めカテゴリ

英語でアニメ観ようず
なじみ深い日本製アニメの英語版DVDで、字幕と音声から英語を学びましょうという趣旨のシリーズ記事です。
ScalaのようでJavaだけど少しScalaなJSON API
Scalaと Spring Frameworkを使って REST的なJSON APIを実装してみましょう。
ドクジリアン柔術少女 すから☆ぱいそん
代表 嶋田大貴のブログです。写真は神仏に見せ金をはたらく罰当たりの図