Edited at

【Monaca】アプリのスクリーンショットをSNSにシェアする

Monacaを使ったアプリ開発で画面のスクリーンショットをSNSにシェアする方法でハマったので備忘録として書いておきます。

↓のような実装をすることができます。

使用するCordovaプラグインは下記の2つです。

サードパーティ製のプラグインなのでカスタムプラグインが利用できるProプラン以上のアカウントが必要です。(無料プランだとできません)

また、カスタムプラグインを使用しているので、動作を確認するためには実機デバッグが必要です。クラウドIDE上のシミュレータでは動きません。

Monacaプロジェクトはフレームワークを使用しない最小限テンプレートを使っています。

share()という関数が今回実装したものです。

cordova-screenshotでbase64エンコードされたスクリーンショット画像を取得して、SocialSharingに渡すという処理をしています。

プロジェクト全体のコードはGithubに置いてあります。

https://github.com/sakatadev/ScreenshotShare

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">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script>
function share(){
navigator.screenshot.URI(function(error,res){
if(error){
console.error(error);
return;
}
window.plugins.socialsharing.share(
'シェアするテキスト', // ツイートなどのシェアするテキスト
'ファイル名', // Androidの場合はファイル名を指定する
res.URI, // base64エンコードされたスクショ画像
null); // シェアするURL
});
}
</script>
<style>
body {
text-align: center;
margin-top: 200px;
background-color: #CFD8DC;
}
</style>
</head>
<body>
<p>Screenshot share to SNS</p>
<ons-button onclick="share()">Share</ons-button>
</body>
</html>