📝

【個人開発】メモアプリのiOS版をリリースした話【Flutter】

2022/02/17に公開

Flutter

iOS

個人開発

tech

はじめに

Flutterで開発したメモアプリのiOS版をリリースしました。android版から遅れて約2か月くらいです。android版リリース時の記事はこちら。

今回は、android版リリース後に必要だと感じた機能を実装するために利用したパッケージなどを中心に書きたいと思います。

receive_sharing_intent　→

この Notespod は、メモにいろんなデータを添付できるアプリです。ストレージ内のデータについてはfile_picker のようなパッケージで持って来ればいいんですが、Web上のデータについてはURLのコピペを前提にしていました。しかしこれはよくないなと思ったので、『共有』ボタンをタップするだけでスムーズにメモに取り込めるようにしました。その際に活用したのが receive_sharing_intent です。

android版に関しては特に問題なく実装できたんですが、iOS版に関してはかなり難航しました……Swiftがわからないのでエラーへの対処の仕方がわからない！　しかし何とか実装できたので、自分の環境で動いた方法をまとめます。

1.GitHubの最新のexampleを参照する

鬼門は　info.plist と ShareViewController.swift だったんですが、Pub.devのReadmeにあるこのふたつと、GitHubのexampleにあるそれが微妙に違います。おそらくGitHubの方が最新だと思うんですが、そちらを参考にして実装したら上手くいきました（最初は普通にPub.devでやっててハマった）

2.パッケージをGitHubから取得する

type 'SwiftReceiveSharingIntentPlugin' has no member 'instance' というエラーが出たんですが、これは最新版をGitHubから取得することで解決しました。

3.シミュレーターは無視する

今でもシミュレーター上では落ちたり固まったりするんですが、実機では問題ありません。シミュレーターは無視しましょう（これも何とかしようとして無駄に奮闘してしまった😑）

これが初iOS開発だったこともあって、Xcodeの扱いも含めて難儀しましたが、結果的には何とか実装できました。ブラウザだけでなく他のアプリからも、テキスト、画像、PDF、URL（Webサイト）といったデータを取り込めます。

下の動画はブラウザからUnsplashの画像の取り込んで既存のメモに追加するものと、ニュースアプリからURLを取り込んで新規メモを作る動画です。

Share_plus　→

メモの添付データをSNS等にシェアできるようにする必要性を感じたので、このパッケージを導入しました。下記ツイートのように、アプリ内で簡単に作れるグラフ（後述）なんかも共有できます。

単語が共有できないバグ

こちらですが、iOS版で単語が共有できない症状に見舞われました。このアプリはフレンドシステムを搭載しているので、フレンドコードを共有できないと不便になってしまいます。後ろにスペースつければ動くので、共有するときにはスペースをつけて入力時に前後のスペースを削除する仕様にしました。

Fl_chart →

ちょっとしたグラフを簡単に作れたらイイねと思って導入しました。円グラフと棒グラフがサクッと作れます。共有する際の画像化の処理は、だいたい以下の実装で動くはずです。

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:fl_chart/fl_chart.dart';

class BarChartView extends StatefulWidget {
  const BarChartView({Key? key}) : super(key: key);

  @override
  _BarChartViewState createState() => _BarChartViewState();
}

class _BarChartViewState extends State<BarChartView> {
  GlobalKey globalKey = GlobalKey();
  
  Future<Uint8List> _capture(GlobalKey key) async {
    final RenderRepaintBoundary boundary =
        key.currentContext!.findRenderObject()! as RenderRepaintBoundary;
    final ui.Image image = await boundary.toImage();
    final ByteData? byteData =
        await image.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List pngBytes = byteData!.buffer.asUint8List();
    return pngBytes;
    }
    
  @override
  Widget build(BuildContext context) {
  return Scaffold(
          appBar: AppBar(
          actions: [
            IconButton(
                icon: const Icon(Icons.share),
                onPressed: () async {
                  final imageData = await _capture(globalKey);
		  // ここに共有処理
		  })
            ],
          ),
	  body:RepaintBoundary(
	    key: globalKey,
	    child: BarChart()
	)
     )
  }
}

ほかバグ対応

Flutterをアップグレードすると無視できない不具合(これ)が出たので、ずっとバージョンを2.5.3に固定してたんですが、2.10.1で解消したのでやっとアップグレードできました。スレはまだ続いているようですが、似たような症状の方いれば、一度2.10.1を試してみることをお勧めします。

今後の予定

タブレットのUIを何とかしたい☹️　UIの分離の重要性ってこういうことかと実感（遅い）

ヘルプ

共有する際に、共有先のアプリ一覧に自分のアプリを出したくないんですが、やり方あるんでしょうか？　ご存知の方いれば教えていただけると……🙏