はじめに
NativeScript で フォトライブラリの 画像や動画 を 参照/選択 する方法。
TL;DR
目次
- はじめに
- TL;DR
- 環境・条件
- 詳細
- セットアップ
- インストール
- フォトライブラリ 利用時の許可文を設定(iOS)
- 実装
- ImagePicker 生成
- 権限要求/画像選択画面表示/画像選択
- サンプル
- まとめ
- 参考文献
環境・条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| $ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.3
BuildVersion: 19D76
$ node -v
v12.7.0
$ npm -v
6.10.3
$ tns --version
6.4.0
$ grep -C1 version package.json
"tns-ios": {
"version": "6.4.1"
},
"tns-android": {
"version": "6.4.1"
}
$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────┐
│ Plugin │ Version │
│ @nativescript/theme │ ^2.2.1 │
│ @vue/devtools │ ^5.0.6 │
│ nativescript-barcodescanner │ ^3.4.1 │
│ nativescript-camera │ ^4.5.0 │
│ nativescript-fingerprint-auth │ ^7.0.2 │
│ nativescript-imagepicker │ ^7.1.0 │
│ nativescript-plugin-firebase │ ^10.4.0 │
│ nativescript-socketio │ ^3.2.1 │
│ nativescript-toasty │ ^1.3.0 │
│ nativescript-vue │ ^2.4.0 │
│ nativescript-vue-devtools │ ^1.2.0 │
│ tns-core-modules │ ^6.0.0 │
└───────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin │ Version │
│ @babel/core │ ^7.0.0 │
│ @babel/preset-env │ ^7.0.0 │
│ babel-loader │ ^8.0.2 │
│ nativescript-dev-webpack │ ^1.0.0 │
│ nativescript-vue-template-compiler │ ^2.0.0 │
│ nativescript-worker-loader │ ~0.9.0 │
│ node-sass │ ^4.9.2 │
│ vue-loader │ ^15.4.0 │
└────────────────────────────────────┴─────────┘
|
- iPhone 11 Pro: iOS 13.3
- Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)
詳細
リポジトリ: 17number/nativescript-vue-tutorial
参考コミット:
セットアップ
インストール
参考: Installation
1
| $ tns plugin add nativescript-imagepicker
|
フォトライブラリ 利用時の許可文を設定(iOS)
app/App_Resources/iOS/Info.plist を編集
参考: Request permissions, show the images list and process the selection
1
2
3
4
5
6
7
8
| ...
<plist version="1.0">
<dict>
...
+ <key>NSPhotoLibraryUsageDescription</key>
+ <string>フォトライブラリ利用の詳細情報</string>
</dict>
</plist>
|
実装
ImagePicker 生成
create() で ImagePicker の生成。
1
2
| import * as imagepicker from 'nativescript-imagepicker';
const context = imagepicker.create({ mode: 'single' });
|
指定可能なオプション
参考: Methods
1
2
3
4
5
6
7
8
9
10
11
12
| import * as imagepicker from 'nativescript-imagepicker';
const context = imagepicker.create({
mode: 'single',
minimumNumberOfSelection: 1,
maximumNumberOfSelection: 3,
showsNumberOfSelectedAssets: true,
prompt: 'please select',
numberOfColumnsInPortrait: 4,
numberOfColumnsInLandscape: 7,
mediaType: 'Any',
showAdvanced: false,
});
|
権限要求/画像選択画面表示/画像選択
authorize() で権限要求、present() で選択画面の表示、コールバック内で選択された画像の処理。
1
2
3
4
5
6
7
8
9
| context.authorize()
.then(() => context.present())
.then(selection => {
console.log({selection});
selection.forEach(
selected => console.log({selected})
);
})
.catch(err => console.error({err}));
|
サンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<Page @swipe="onSwipe">
<ActionBar title="Home"/>
<StackLayout>
<Button text="Select a photo" @tap="selectPhoto" />
<Image :src="image" v-if="image" />
</StackLayout>
</Page>
</template>
<script >
import * as imagepicker from 'nativescript-imagepicker';
export default {
name: 'home',
data() {
return {
image: null,
};
},
methods: {
selectPhoto() {
const context = imagepicker.create({ mode: 'single' });
context.authorize()
.then(() => context.present())
.then(selection => this.image = selection[0])
.catch(err => console.error({err}));
},
},
}
</script>
|
iOS
Android
まとめ
参考文献
関連記事
