ガイド
Capacitor で Photo Library を使う方法
@capgo/capacitor-photo-library の使用方法
Capacitor プラグインは、写真ギャラリーを Web ページとして、あるいはカスタマイズはできないものの権限許可が不要な標準的なネイティブ画面として表示します。
インストール
bun add @capgo/capacitor-photo-library
bunx cap sync
bunx cap sync プラグインのネイティブcodeをネイティブプロジェクトにコピーします。プラグインをアップグレードするたびに再度実行してください。
インポート
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
API の概要
| メソッド | 説明 |
|---|---|
checkAuthorization |
ユーザーにプロンプトを表示することなく、現在の権限ステータスを返します。 |
requestAuthorization |
必要に応じて、フォトライブラリへのアクセスをリクエストします。 |
getAlbums |
利用可能なアルバムを取得します。 |
getLibrary |
WebViewで表示できるURLとともに、ライブラリのアセットを取得します。 |
getPhotoUrl |
アセットのフル解像度版を表示できるURLを取得します。すでに getLibrary を使用して includeFullResolutionDataを呼び出している場合、通常このメソッドは不要です。 |
getThumbnailUrl |
アセットのリサイズされたサムネイルを表示可能なURLとして取得します。 |
pickMedia |
ネイティブのシステムピッカーを開き、写真ライブラリ全体へのアクセス権を与えずにメディアを選択できます。選択されたファイルはアプリのキャッシュにコピーされ、ポータブルなURLとして返されます。 |
例
checkAuthorization()
ユーザーにプロンプトを表示することなく、現在の権限ステータスを返します。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.checkAuthorization();
console.log(result);
requestAuthorization()
必要に応じて、フォトライブラリへのアクセスをリクエストします。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.requestAuthorization();
console.log(result);
getAlbums()
利用可能なアルバムを取得します。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.getAlbums();
console.log(result);
getLibrary()
WebViewで表示できるURLとともに、ライブラリのアセットを取得します。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.getLibrary();
console.log(result);
getPhotoUrl()
アセットのフル解像度版を表示できるURLを取得します。すでに getLibrary を使用して includeFullResolutionDataを呼び出している場合、通常このメソッドは不要です。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.getPhotoUrl({ id: 'id-123' });
console.log(result);
getThumbnailUrl()
アセットのリサイズされたサムネイルを表示可能なURLとして取得します。
import { PhotoLibrary } from '@capgo/capacitor-photo-library';
const result = await PhotoLibrary.getThumbnailUrl({ id: 'id-123' });
console.log(result);
上記の表には7つのコアメソッドが記載されています。リスナーやバージョンのヘルパー、および各メソッドの完全な仕様については、以下に記載されています。 GitHub リポジトリ.
完全なリファレンス
@capgo/capacitor-photo-library の使用について
使用している場合 @capgo/capacitor-photo-library を使用する ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-photo-library @capgo/capacitor-photo-library の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については