アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

こんにちは、渡辺です。

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

■利用するプラグイン


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


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



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


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


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


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

■コピーする


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




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



■貼り付ける


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




cordova.plugins.clipboard.paste(function(text)
{
    alert(text);
});
    


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


index.html




<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var text = "Clipboard Plugin";
        document.addEventListener('deviceready', function()
        {
            cordova.plugins.clipboard.copy(text);
            cordova.plugins.clipboard.paste(function(text)
            {
                alert(text);
            });
        });
    </script>
</head>

<body>
    This is a template for Monaca app.</body>

</html>



■参考情報


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


■お知らせ


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