Asial Blog

Recruit! Asialで一緒に働きませんか?

Monacaアプリでコピー&ペーストを実装するならクリップボードプラグイン!

カテゴリ :
Monaca
タグ :
Monaca
HTML5
JavaScript
プラグイン
こんにちは、渡辺です。

今回は、「VersoSolutions/CordovaClipboard」プラグインの使い方を紹介します。
このプラグインを利用することでアプリ内でのテキストコピー&ペーストができます。

■利用するプラグイン


VersoSolutions/CordovaClipboard
( https://github.com/VersoSolutions/CordovaClipboard )


■サンプルプロジェクトについて



・サンプルプロジェクトの動作確認環境


・iPhone6 (iOS 8.1.2)
・GALAXY Note 2 SC-02E (Android4.3 )
・デバッグビルドしたアプリで確認済
(注意:ストア版デバッガーでは、今回利用するプラグインが組み込めれていないため、動作しませんので注意してください。)


■プラグインのインストール


こちらの過去記事に記述したましたので、参照ください。

■コピーする


まず「deviceready」イベント後に、テキストをコピーする処理を実行します。

  1. var text = "Clipboard Plugin";
  2. document.addEventListener('deviceready', function()
  3. {
  4.     cordova.plugins.clipboard.copy(text);
  5. });

■貼り付ける


上で行ったコピー処理の対象を、貼り付けます。コールバックの引数に
コピーされたテキストが入っています。

  1. cordova.plugins.clipboard.paste(function(text)
  2. {
  3.     alert(text);
  4. });

■サンプルプロジェクトのコード


index.html


  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.     <script src="components/loader.js"></script>
  8.     <link rel="stylesheet" href="components/loader.css">
  9.     <link rel="stylesheet" href="css/style.css">
  10.     <script>
  11.         var text = "Clipboard Plugin";
  12.         document.addEventListener('deviceready', function()
  13.         {
  14.             cordova.plugins.clipboard.copy(text);
  15.             cordova.plugins.clipboard.paste(function(text)
  16.             {
  17.                 alert(text);
  18.             });
  19.         });
  20.     </script>
  21. </head>
  22.  
  23. <body>
  24.     <br />This is a template for Monaca app.</body>
  25.  
  26. </html>


■参考情報


・VersoSolutions/CordovaClipboard
https://github.com/VersoSolutions/CordovaClipboard


■お知らせ


Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください!
https://ja.monaca.io/careers.html