2015年6月24日

MonacaアプリでInstagramに写真を投稿する！

asial

こんにちは、渡辺です。

今回は、「vstirbu/InstagramPlugin」プラグインを利用してInstagramと連携するサンプルアプリを作ってみたいと思います。今回のプラグインは、利用方法が非常に簡単なので、はじめてプラグインを利用する人に是非チャレンジしてもらいたいです。

■利用するプラグイン

vstirbu/InstagramPlugin
( https://github.com/vstirbu/InstagramPlugin )

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

　サンプルプロジェクトでは、下の2つを対象にInstagramへ連携するアプリを作成します。連携できるものは、写真だけでなく、Canvas要素も連携することができます。
(１)写真の連携では、カメラで撮影したものをそのままInstagramへスグに投稿できるものを実装します。
(２)Canvas要素の連携では、Canvasで書いた星を投稿します。

また、このプロジェクトはMonacaテンプレートの「最小限のテンプレート」をもとに作成しています。

・Instagramに連携できるもの

　　(１) カメラで撮った写真
　　(２) Cavas要素

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

　　・iPhone6 (iOS 8.1.2)
　　・GALAXY Note 2 SC-02E (Android4.3 )
　　・デバッグビルドしたアプリで確認済

■準備

　準備としては、サンプルプロジェクトを作成する前に、まず、Instagramアプリを先にインストールして、Instagramへの登録を完了させておいて下さい。また、作成するプロジェクトでは下記のプラグインが有効となっていることが必要となります。

　・Fileプラグイン(org.apache.cordova.file)
　・Cameraプラグイン(org.apache.cordova.camera)
　・MonacaPlugin(mobi.monaca.plugins.Monaca)

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

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

■端末にInstagramがインストールされていることを確認する

isInstalled( )で、端末にInstagramが既にインストールされているかどうかを確認することができます。変数installedに確認結果が返ってきます。


Instagram.isInstalled(function (err, installed) {
    if (installed) {
        console.log("Instagram is", installed); 
    } else {
        console.log("Instagram is not installed");
    }
});

■Instagramへ連携する

ー写真を撮って投稿する

まずカメラを起動させる処理を用意します。「show_pic( )」でカメラを起動させる処理( navigator.camera.getPicture( ) )を行っています。「navigator.camera.getPicture( )」の第一引数では、カメラでの撮影が成功した場合に実行する処理を定義しています。今回は、カメラで撮った写真をそのままInstagramへシェアしたいので、「share_pic( )」を呼び出して、その中で「share( )」を実行しています。


　 show_pic: function()
    {
        navigator.camera.getPicture(this.share_pic, this.fail,
        {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL,
            targetWidth: 400,
            targetHeight: 400
        });
    },
　 fail: function(msg)
    {
        alert(msg);
    },
    share_pic: function(data)
    {
        Instagram.share("data:image/jpeg;base64," + data, 'example caption', function(err) {});
    }

ー Canvas要素を投稿する

次は、Canvas要素をシェアする方法です。この処理は、サンプルプロジェクト起動時に描画される星をタップした時に実行されるようにしました。「Instagram.share( )」では、Instagramへ連携する対象の要素idを第一引数に指定しています。第二引数は、オプションとなっていてタイトルを設定します。


    share_canvas: function()
    {
        Instagram.share('instagram', 'canvas element share', function(err) {});
    }

■サンプルプロジェクトのデバッグ方法

外部のプラグインを利用したプロジェクトをデバッグする場合は、ストア版Monacaデバッガーではなく、「カスタムデバッガー」を作成する必要があります。「カスタムデバッガー」の作り方は、通常のビルドと同様の画面で「デバッガーのビルド」を選択して作成します。

※ストア版Monacaデバッガーでは、コアプラグインと呼ばれる組み込み済のプラグインが利用できます。一方、コアプラグイン以外のプラグインを利用する場合は、外部プラグインを組み込むことができるカスタムデバッガーを作成する必要があります。

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

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">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="components/loader.js"></script>
    <title>Instagram plugin project</title>
</head>
<body>
    <canvas id="instagram" onclick="app.share_canvas();"></canvas>
    <button class="button--cta" onclick="app.show_pic();">Get a Picture</button>
</body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</html>

app.js


var app = {
    // Application Constructor
    initialize: function()
    {
        this.bindEvents();
    },
    bindEvents: function()
    {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function()
    {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id)
    {
        this.draw_star();
        Instagram.isInstalled(function(err, installed)
        {
            if (installed)
            {
                alert("Instagram is installed!!");   
            }
            else
            {
                alert("Instagram is not installed");
            }
        });
    },
    draw_star: function()
    {
        var canvas = document.getElementById('instagram');
        var ctx = canvas.getContext('2d');
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight - 200;
        ctx.fillStyle = "rgba(250, 220, 0, 0.6)";
        star(ctx, 100, 100, 90, 5, 0.5);
        function star(ctx, x, y, r, p, m)
        {
            ctx.save();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.moveTo(0, 0 - r);
            for (var i = 0; i < p; i++)
            {
                ctx.rotate(Math.PI / p);
                ctx.lineTo(0, 0 - (r * m));
                ctx.rotate(Math.PI / p);
                ctx.lineTo(0, 0 - r);
            }
            ctx.fill();
            ctx.restore();
        }
    },
    show_pic: function()
    {
        navigator.camera.getPicture(this.share_pic, this.fail,
        {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL,
            targetWidth: 400,
            targetHeight: 400
        });
    },
    fail: function(msg)
    {
        alert(msg);
    },
    share_pic: function(data)
    {
        Instagram.share("data:image/jpeg;base64," + data, 'example caption', function(err) {});
    },
    share_canvas: function()
    {
        Instagram.share('instagram', 'canvas element share', function(err) {});
    }
};

style.css


html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    background: #222;
}
#canvas-container {
    width: 100%;
    text-align: center;
}
canvas {
    display: inline;
}