[Flutter][クソアプリ工房][002] ゴミマップ ③ スマホの内蔵カメラで写真撮影できるようにする

前回、[Flutter][クソアプリ工房][002] ゴミマップ ② GoogleMapとlocationを使ってアプリ上に地図を表示する の続き。

『ゴミマップ』の開発を進めていきます。

 

はじめに

  • 音声付きの解説動画をYouTube『クソアプリ工房』にアップしています。(ゴミマップで検索)
  • 文字を読むのがダルい、聞き流しで Flutter 開発勉強できないかなーとお考えの方はぜひ覗いてみてください。
  • 本アプリのソースコードは全て無料でGitHubに公開しております。

ちなみに、私はコミュ障ぼっちでフリーランスのエンジニアをやっています、34歳です。私のプロフィールに興味を持ってくださった方は、ページ下部の筆者紹介、Twitter(@suekiaoi)やInstagram(@aoi.sueki)などからご確認いただければと思います。

また、ぼっち社会人向けに1年かけて書いていたコラムが書籍化されました。ぜひ一度、お手にとって読んでみてください。

友達0のコミュ障が「一人」で稼げるようになったぼっち仕事術 (アルファポリス)

 

ゴール:『ゴミマップ』画面イメージ

①で作ったこのイメージに従って実装していきます。

ちなみに『ゴミマップ』機能は超シンプル。

  • Googleマップを表示する
  • 現在地を表示する
  • 写真を撮る
  • マップ上に写真を表示する
  • 写真が撮影された座標を登録/削除する

 

〜ここまでの流れ〜

STEP1 [クソアプリ工房][002] ゴミマップ ①企画・設計

STEP2 [Flutter][クソアプリ工房][002] ゴミマップ ② GoogleMapとlocationを使ってアプリ上に地図を表示する

STEP3 スマホのカメラで撮影できるようにする

iPhoneの内臓カメラをアプリから起動できるように、アクセス許可します。(AndroidとWebは省略)

image_picker | Flutter PackageFlutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.
image_picker | Flutter Package pub.dev
image_picker | Flutter Package

上記に書かれている通り、Info.plistに以下を追加します。

  • NSPhotoLibraryUsageDescription
  • NSCameraUsageDescription
  • NSMicrophoneUsageDescription

追加する方法は、Info.plistを直接編集する方法と、Xcodeを使う方法があります。

今回、YouTubeの解説動画ではXcodeを使う方法で設定しています。

Xcodeから追加すると、以下赤字部分が自動で追記されます。なので、Info .plistに直接追記してもOKです。

ios/Runner/Info.plist


<plist version="1.0">
<dict>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>カメラアクセスを許可</string>
   <key>NSCameraUsageDescription</key>
   <string>カメラアクセスを許可</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>カメラアクセスを許可</string>

次に、ボタンからカメラを起動できるようコードを書いていきます。

lib/main.dart

class _MyHomePageState extends State {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }
...
  @override
  Widget build(BuildContext context) {
...
      return Scaffold(
        appBar: AppBar(
...
        body: GoogleMap(
...
        floatingActionButton: Center(
...
                child: FloatingActionButton.extended(
                  onPressed: getImage,
                  label: Text('ゴミみっけ'),
                  tooltip: '撮影',
                  icon: Icon(Icons.camera_alt),
...

 

ここなんかエラーになった。getImageのとこでビルドエラーになりました。

遭遇したエラー①

The method 'getImage' isn't defined for the type 'ImagePicker'.

 

pubsub.yaml をよく見たらこうなってた。

  image_picker: ^0.6.2+3

なるほど、最新は^0.7.5なので、書き方違いますよってことですね。じゃあImagePickerのバージョンを手動で最新に、ってやったら、今度はこんなエラーが発生。どうでもいいけど、赤字でたくさんエラー出るとちょっと怖いですね。めちゃくちゃ怒られてる感がある。

Because image_picker >=0.6.3 <0.7.0-nullsafety depends on flutter_plugin_android_lifecycle ^1.0.2 and google_maps_flutter >=2.0.2 depends on flutter_plugin_android_lifecycle ^2.0.1, image_picker >=0.6.3 <0.7.0-nullsafety is incompatible with google_maps_flutter >=2.0.2.
So, because gomi_map depends on both google_maps_flutter ^2.0.3 and image_picker 0.6.7+22, version solving failed.
pub get failed (1; So, because gomi_map depends on both google_maps_flutter ^2.0.3 and image_picker 0.6.7+22, version solving failed.)

 

日本語訳↓

image_picker> = 0.6.3 <0.7.0-nullsafetyはflutter_plugin_android_lifecycle ^ 1.0.2に依存し、google_maps_flutter> = 2.0.2はflutter_plugin_android_lifecycle ^ 2.0.1に依存するため、image_picker> = 0.6.3 <0.7.0-nullsafetyは互換性がありません google_maps_flutter> = 2.0.2。
したがって、gomi_mapはgoogle_maps_flutter ^ 2.0.3とimage_picker0.6.7 + 22の両方に依存しているため、バージョンの解決に失敗しました。
pub get failed(1;したがって、gomi_mapはgoogle_maps_flutter ^ 2.0.3とimage_picker0.6.7 + 22の両方に依存しているため、バージョンの解決に失敗しました。)

 

うーん、とにかくImagePickerの最新バージョンは使えませんよってことしかわからないw

そういえば、先日Flutterのバージョンを2.0にアップグレードしたんだった。もしかしたらそれが原因かも? バージョンアップしたばっかで、ImagePickerが未対応なのかもしれん。(こういうの割とよくある)

<解決方法>

ということで、ImagePickerのバージョンを元(^0.6.2+3)に戻し、以下のサイトのExampleをコピペしてみたらエラーは消えました。

image_picker 0.6.2+3 | Flutter PackageFlutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.
image_picker 0.6.2+3 | Flutter Package pub.dev
image_picker 0.6.2+3 | Flutter Package

lib/main.dart

class _MyHomePageState extends State {

  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }

 

 

写真はローカルに持たせておいて、アプリ内で消したらローカルの写真フォルダからも消えることにしたい。

遭遇したエラー②

エラーは消えたのですが、カメラボタンを押しても何も起こりません。連打してもビクともしません。(←?

<解決方法>

調べたら、同じ悩みを抱えている人が海外にもいるようで。

英語の投稿を翻訳して読んだ感じだと、どうやら、M1Macのせいっぽい。あぁ…新しいもの好きが災いしました。

試しに実機(iPhoneXR)にデプロイしてみたら、普通に動きました。

とりあえず実機で動くので、シミュレータでのカメラ起動は諦めて先に進みます。

※実機だとオイラの現在地(住所)が映っちゃってるので地図は塗りつぶしてます。あしからず。

 

次回は、実機で撮影&写真の保存をしていきます。

 

それでは!

 

ここまで読んでいただき、ありがとうございました!

参考になったよ、という方はTwitter(@suekiaoi)やInstagram(@aoi.sueki)などでフォローしていただけると励みになります。

不明点・ご質問などありましたらわたしのTwitter DM(@suekiaoi)にお気軽にどうぞ!

それでは!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。