Konyでデバイスのメディアを参照および共有する方法【iOS】【Android】

#目次
1. はじめに
2. 実装方法
3. まとめ
4. 参考

#はじめに
アプリを利用している時にメディアを参照および共有したことはありませんか？
そこで、今回はKonyでデバイスのメディアを参照および共有する方法についてご紹介します。

#実装方法
####**①画面の作成**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/18b92a37-02c8-6f0b-8068-8374ed84cf73.png)
下の「問い合わせる」ボタンを押すと、アルバムが開かれ、添付したいファイルを選択し、メールを送信することができます。

####**②コーディング**
frmDemoControllerのコーディングを行います。

```frmDemoController.js
define({ 
  onClickSendEmail: function() {
    // デバイス内のファイルへのアクセス許可を要求。
    kony.application.requestPermission(kony.os.WRITE_EXTERNAL_STORAGE, this.requestPermissionCallback);
  },

  // アクセス許可成功後に実行するコールバック関数
  requestPermissionCallback: function() {
    // アルバムを開く
    kony.phone.openMediaGallery(this.openMediaGallaeryCallback);
  },

  openMediaGallaeryCallback: function(rawbytes, permStatus, mimeType) {
    if(rawbytes !== null) {

      var attachment = {};
      
      // iPhoneかiPadの場合
      if (kony.os.deviceInfo().name === "iPhone" || kony.os.deviceInfo().name === "iPad" || kony.os.deviceInfo().name === "iPod touch") {
        attachment = {mimetype: permStatus, attachment: rawbytes, filename: "" };
      
      // Androidの場合
      } else if (kony.os.deviceInfo().name === "android") {
        var resourcePath = rawbytes.getResourcePath();
        attachment = {mimetype: mimeType, attachment: resourcePath };
      }
      
      // メール送信
      kony.phone.openEmail(["dummy@support.com"], [""], [""], "", "", false, [attachment]);

    } else if (permStatus == kony.application.PERMISSION_DENIED) {  
      alert("Permission Denied to Access the Photo Gallery");
    }
  },
});
```
上を説明します。

**kony.application.requestPermission**：デバイス内のファイルへのアクセス許可を要求。

| パラメータ | 説明 | 必須orオプション | 
| ------ | ------ |  ------ |
| resourceId | 使用可能なresourceId定数は次のとおり<br>kony.os.RESOURCE_CAMERA：デバイスのカメラへのアクセス<br>kony.os.RESOURCE_LOCATION：デバイスの場所へのアクセス<br>kony.os.RESOURCE_PHOTO_GALLERY：フォトアルバムまたはギャラリーへのアクセス<br>kony.os.RESOURCE_CONTACTS：ユーザーの連絡先へのアクセス<br>kony.os.RESOURCE_CALENDAR：デバイスのカレンダーへのアクセス<br>kony.os.RESOURCE_SIRI（iOSのみ）：AIアシスタントのアクセス<br>kony.os.RESOURCE_AUDIO_RECORD：オーディオのアクセス<br>kony.os.RESOURCE_NOTIFICATION（iOS固有）：通知システムのアクセス | 必須 |
| statusCallback | コールバック関数<br>`function statusCallback(response);`<br><br>◆ステータス<br>kony.application.PERMISSION_GRANTED：アプリがリソースへのアクセスを許可されていることを示す<br>kony.application.PERMISSION_DENIED：リソースにアクセスするための十分な権限がないことを示す<br>kony.application.PERMISSION_NEVER_ASK_AGAIN：Androidにのみ適用されます。リソースにアクセスするための十分な権限がなく、ユーザーにリクエストが表示されないことを示す | 必須 |
| options[JSObject] | 許可が必要なリソースを識別するための追加オプションを指定。このキーはAndroidにのみ適用。 <br>kony.application.PERMISSION_NEVER_ASK_AGAINステータスを取得するには、getNeverAskAgainStatusキーをtrueに設定し、オプションオブジェクトにキーを渡す必要が有る。キーが設定されておらず、ユーザーが[拒否]または[再度確認しない]オプションを選択した場合、アクセス許可のステータスはKony.application.PERMISSION_DENIEDとなる。| オプション |
| options[Object]-通知用 | 通知の必須パラメーター<br>`{notificationtypes : constants}`<br><br>使用可能な通知のタイプは次のとおり<br>kony.notificationsettings.BADGE：通知タイプをバッジとして指定<br>kony.notificationsettings.SOUND：通知タイプをサウンドとして指定<br>kony.notificationsettings.ALERT：通知タイプをアラートとして指定| オプション |

**kony.phone.openMediaGallery**：デバイスの画像ギャラリーを開いて既存の画像を選択することが可能。

本記事とは関係ないですが、参照したメディアをメール送信するために、openEmailを使用します。
**kony.phone.openEmail**：メールアドレス、件名、本文、および添付ファイルを定義してメールアプリを起動。
→kony.phone.openEmail （torecipients、ccrecipients、bccrecipients、subject、messagebody、ismessagebodyhtml、attachments）


| パラメータ | 説明 | 必須orオプション | 
| ------ | ------ |  ------ |
| torecipients | 宛先 | 必須 |
| ccrecipients | cc | オプション |
| bccrecipients | bcc | オプション |
| subject | 件名 | オプション |
| messagebody | 本文 | オプション |
| ismessagebodyhtml | true:htmlコンテンツ, false:htmlコンテンツではない | オプション |
| attachments | 添付ファイル | オプション |

attachments（添付できるファイル）については以下になります。

| ファイル | 説明 | 
| ----- | ----- |
| mimetype [String] | image / png、image / jpg、image / *などの標準的なメディアタイプ(mimeタイプ) |
| 添付ファイル[Object] | カメラ、画像ウィジェット、またはopenmediagalleryapiから受信したRawbytes(動画も送信可） |
| filename（オプション）[String] | 添付ファイルとして表示するファイルの名前 <br>※Androidはサポート外 |

####**③アクセス許可の構成[Android]**
右の`Project Setting`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b50ef412-484c-08d4-84e7-9213d3fc7e69.png)
上の`Native`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a6c5990d-26e4-b8ae-cca3-ed20334c9436.png)
その下の`Android`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6ec4a64c-157e-17c6-565a-6a6c33f5ac70.png)
`WRITE_EXTERNAL_STORAGE`をクリック > `Add`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4821bae1-0b5a-ceea-1d6d-5f344843de00.png)
右の`The following permissions are set to true`に`WRITE_EXTERNAL_STORAGE`が追加されたのを確認 > `Finish`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/582340b6-f868-4f46-d16b-1faf8f36e5ff.png)

####**④アクセス許可の構成[iOS]**
右のタブから`Assets`をクリック > infoplist_configuration.jsonを右クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9c8a1317-38de-1e42-5b65-cff461618f3a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e4895d41-0f94-5e51-8083-ed02c76ad9d0.png)
エディタソフト(今回はVisual Studio Codeを使用)を開き、最終行に`"NSPhotoLibraryUsageDescription": "Photo Library Access Warning"`を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/b91ea635-cd1a-47ef-7a96-0a1d65618815.png)

####**⑤Actionの紐付け**
関数の準備ができたらActionと紐づけていきます。
`btnSendEmail`(「問い合わせる」ボタン)を選択 > `Action`タブをクリック > `onClickのEdit`をクリック > Action(`onClickSendEmail`)紐づけ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/be9c47ac-ce5a-dfa6-0870-3224687ca5c0.png)

実際にどうなるかみていきましょう！

####**⑥実装の確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/Kq04QeaMgI">pic.twitter.com/Kq04QeaMgI</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1357151352493809664?ref_src=twsrc%5Etfw">February 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ボタンをタップするとアルバムが開かれ、写真を選択するとメールアプリが起動されることが分かりますね！

#まとめ
Konyでデバイスのメディアを参照および共有する方法について説明しました。
みなさんもぜひ活用してみてくださいね:wave:

#参考
kony.phone.openMediaGallery、kony.phone.openEmail:
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.phone_functions.htm

kony.application.requestPermission：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions_runtimepermissionsapi.htm

Runtime Permission API：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/runtime_permissions.htm