今日からカメラを起動して実際の画像をWebPに変換してみようと思います。
info.plistの修正
使用目的の説明
iOSアプリでは、カメラやフォトライブラリなどのプライバシーに敏感なリソースにアクセスする際には、ユーザーにその使用目的を説明する必要があります。
info.plistを開く
アプリのInfo.plistファイルにNSCameraUsageDescriptionキーを追加し、その値としてユーザーにカメラアクセスの目的を説明する文字列を設定します。
前回追加した箇所の下に追加します。
<key>NSPhotoLibraryUsageDescription</key>
<string>このアプリは、あなたの写真を選択して表示するために写真ライブラリへのアクセスを必要とします。</string>
<!-- 上記の2行は前回追加した箇所です -->
<!-- 下記の2行を追加 -->
<key>NSCameraUsageDescription</key>
<string>このアプリでは、ユーザーが画像を撮影するためにカメラを使用します。</string>
<!-- ここまで -->
</dict>新規メソッドの作成
カメラを起動して、画像を撮影するメソッドを下記のように作成します。
pickImageFromCameraメソッドの作成
Future<void> pickImageFromCamera() async {
final picker = ImagePicker();
final pickedFile = await picker.pickImage(source: ImageSource.camera);
if (pickedFile != null) {
final imageFile = File(pickedFile.path);
final fileSize = await imageFile.length();
state = ImageModel(
imageFile: imageFile,
originalImagePath: pickedFile.path,
originalImageSize: fileSize,
);
}
}メソッドの説明
2行目：ImagePickerのインスタンス化
この行では、ImagePickerクラスのインスタンスを作成しています。
3行目：カメラから画像を選択
ここでpickImageメソッドを非同期で呼び出し、sourceパラメータにImageSource.cameraを指定しています。これにより、ユーザーはデバイスのカメラを使用して画像を撮影できます。
4行目：画像ファイルのチェック
この条件文は、ユーザーが実際に画像を撮影したかどうかを確認します。pickedFileがnullでない場合、つまりユーザーが画像を撮影していれば、以下のステップが実行されます。
5〜6行目：画像ファイルの作成とサイズの取得
この条件文は、ユーザーが実際に画像を撮影したかどうかを確認します。pickedFileがnullでない場合、つまりユーザーが画像を撮影していれば、以下のステップが実行されます。
8〜12行目：画像情報の更新
最後に、画像ファイル、そのパス、およびファイルサイズを含む新しいImageModelオブジェクトを作成し、stateに代入しています。これはアプリケーションの状態管理の一部で、選択された画像の情報を保持するために使用されます。
実機でのテスト環境設定
ここから先は、エミュレーターでは、テストできませんので、実機でテストを行うことにいします。実機で開発者モードを設定していない方は、下記を参考に設定して下さい。
開発者モードの有効化（iOS)
- Apple IDでのサインイン:
- Xcodeを開いて、Xcodeのメニューから「Preferences」（環境設定）を開きます。
- 「Accounts」タブを選択し、Apple IDを追加します。これには、Apple Developer Programに登録しているApple IDを使用します。
- デバイスの接続:
- iOSデバイスをMacにUSBケーブルで接続します。
- デバイスがロックされている場合は、ロックを解除し、Macとの接続を「信頼」するよう求められたら、「信頼」を選択します。
- デバイスの設定:
- Xcodeで新しいプロジェクトを作成するか、既存のプロジェクトを開きます。
- Xcodeのツールバーにあるデバイスセレクタで、接続したiOSデバイスを選択します。
- プロビジョニングプロファイルの設定:
- Xcodeのプロジェクト設定で、適切なチーム（Apple ID）を選択します。これにより、Xcodeがデバイス用のプロビジョニングプロファイルを自動的に生成します。
- ターゲットデバイス上で初めてアプリを実行する際には、デバイス上で「設定」アプリを開き、「一般」→「デバイス管理」（または「プロファイルとデバイス管理」）に移動し、そこでApple IDに対してアプリの実行を「信頼」するよう設定します。
開発者モードの有効化（Android)
Androidデバイスで開発者モードを有効にする手順は以下の通りです。これは、デバイスの隠された「開発者オプション」メニューにアクセスすることにより行います。ただし、Androidのバージョンやデバイスのメーカーによって、メニューの名称や位置が若干異なる場合があります。
- 「設定」アプリを開く:
- デバイスのアプリドロワーから「設定」アプリを開きます。
- 「端末情報」を探す:
- 「設定」メニュー内で「端末情報」、「デバイス情報」、「About Phone」などのセクションを探します。このオプションは通常、設定メニューの一番下にあります。
- 「ビルド番号」を探す:
- 「端末情報」の中に「ビルド番号」、「Build Number」などのオプションがあります。これは通常、端末情報の下の方に位置しています。
- 「ビルド番号」を複数回タップする:
- 「ビルド番号」を7回程度連続してタップします。タップするたびに、「開発者になりました」や「あと[n]回で開発者になります」といったメッセージが表示される場合があります。
- 「開発者オプション」が有効になる:
- 正しく手順を実行すると、「開発者オプション」が設定メニューに追加されます。
- 「開発者オプション」を使用する:
- 「設定」メニューに戻り、「開発者オプション」を探します。この新しいセクションでは、USBデバッグを含む多くの高度な設定を行うことができます。
- Flutter開発のためには、「USBデバッグ」を有効にすることが推奨されます。これにより、PC経由でデバイスにアプリをインストールし、デバッグすることが可能になります。
実機をエミュレーターとして起動する方法
デバイスの接続
USBケーブルを使って、スマートフォンとPCを接続します。
デバイスの確認
コマンドラインやターミナルで以下のコマンドを実行して、接続されたデバイスを確認します。
flutter devices下記のようにiphoneが認識されているのを確認します。
アプリケーションの実行
Flutterプロジェクトのディレクトリに移動し、以下のコマンドを実行してアプリケーションをデバイスにビルドして実行します。
flutter runデベロッパーの許可（iphone）
写真1）スマホに「信頼されていないデベロッパー」の表示が現れますので、いったんキャンセルをクリックします。
iphoneの設定＞一般＞VPNとデバイス管理＞デベロッパアプリをタップします。
写真2）Apple Development〇〇〇〇を信頼をタップします。
写真3）再度信頼をタップします。
写真4）アプリがローカルのネットワーク上のデバイスの検索及び札族を求めています。と表示されたら、許可をタップします。
写真5）これで、アプリが起動するはずです。アプリがカメラのアクセスを求めています。と表示されたら、許可をタップします。
写真6）アプリを起動すると、アプリがカメラへのアクセスを求めています。と表示されますので、OKをタップします。
写真7）メソッドを実行して、WebPに変換されているのを確認して下さい。
iphoneにインストールする方法
実機をエミュレーターとして使う方法では、PCに接続した状態でしかアプリを試すことが出来ません。そこで、実機に直接インストールする方法をご紹介します。
デバイスの接続
先ほどと同様、iPhoneをMacにUSBケーブルで接続します。
build実行
下記コマンドで、iosアプリとしてビルドします。
flutter build iosデバイスの確認
iphoneが認識されているのを確認します。
flutter devicesインストール
下記コマンドでインストールを実行します。
flutter install [デバイスID]これで、PCに接続せずにアプリを実行することが出来ます。※尚、このインストールはあくまでも開発用ですので、1週間程度でアプリは使用できなくなります。
コメント