こんにちは、渡辺です。
今回は、「vstirbu/InstagramPlugin」プラグインを利用してInstagramと連携するサンプルアプリを作ってみたいと思います。今回のプラグインは、利用方法が非常に簡単なので、はじめてプラグインを利用する人に是非チャレンジしてもらいたいです。
vstirbu/InstagramPlugin
( https://github.com/vstirbu/InstagramPlugin )
サンプルプロジェクトでは、下の2つを対象にInstagramへ連携するアプリを作成します。連携できるものは、写真だけでなく、Canvas要素も連携することができます。
(１)写真の連携では、カメラで撮影したものをそのままInstagramへスグに投稿できるものを実装します。
(２)Canvas要素の連携では、Canvasで書いた星を投稿します。
また、このプロジェクトはMonacaテンプレートの「最小限のテンプレート」をもとに作成しています。
(１) カメラで撮った写真
(２) 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)
こちらの過去記事に記述したましたので、参照ください。
isInstalled( )で、端末にInstagramが既にインストールされているかどうかを確認することができます。変数installedに確認結果が返ってきます。
まずカメラを起動させる処理を用意します。「show_pic( )」でカメラを起動させる処理( navigator.camera.getPicture( ) )を行っています。「navigator.camera.getPicture( )」の第一引数では、カメラでの撮影が成功した場合に実行する処理を定義しています。今回は、カメラで撮った写真をそのままInstagramへシェアしたいので、「share_pic( )」を呼び出して、その中で「share( )」を実行しています。
次は、Canvas要素をシェアする方法です。この処理は、サンプルプロジェクト起動時に描画される星をタップした時に実行されるようにしました。「Instagram.share( )」では、Instagramへ連携する対象の要素idを第一引数に指定しています。第二引数は、オプションとなっていてタイトルを設定します。
外部のプラグインを利用したプロジェクトをデバッグする場合は、ストア版Monacaデバッガーではなく、「カスタムデバッガー」を作成する必要があります。「カスタムデバッガー」の作り方は、通常のビルドと同様の画面で「デバッガーのビルド」を選択して作成します。
![]()
※ストア版Monacaデバッガーでは、コアプラグインと呼ばれる組み込み済のプラグインが利用できます。一方、コアプラグイン以外のプラグインを利用する場合は、外部プラグインを組み込むことができるカスタムデバッガーを作成する必要があります。
・vstirbu/InstagramPlugin
https://github.com/vstirbu/InstagramPlugin
・vstirbu/instagramplugin-example
https://github.com/vstirbu/instagramplugin-example
Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください！
https://ja.monaca.io/careers.html
今回は、「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; - }
■参考情報
・vstirbu/InstagramPlugin
https://github.com/vstirbu/InstagramPlugin
・vstirbu/instagramplugin-example
https://github.com/vstirbu/instagramplugin-example
■お知らせ
Monacaチームでは現在、新規開発メンバーを大募集中です。詳しくはこちらを参照ください！
https://ja.monaca.io/careers.html