FreeStyleVision

Flutterとは？

通常、モバイルアプリを開発するには、swiftでiOSを、javaやkotlinで
Androidを開発しますが、クロスプラットフォームで開発できるものも
存在します。
その一例がFlutterです。同じコードでiOS,Android,Windows,MacOSなど、
様々なプラットフォームで動かすことができます。
他にもReactNativeなど、クロスプラットフォーム開発が可能な技術も
ありますが、Flutterを触ってみて、採用するメリットをまとめました。

コミュニティについて

Flutterは、ご存知の方もいらっしゃるかもしれませんが、「Flutter大学」
という巨大なコミュニティが存在します。Flutter技術者がLTを実施したり
情報共有をする場として重宝されています。
また、その他でもGit Hubでプルリクエストが活発であったり、
全体的に言語のコミュニティが盛り上がっているので、開発の最中に
参考にできる材料が豊富で、開発しやすいです。
ReactNativeやKMMもクロスプラットフォーム開発の検討にあがりますが、
教育コストの面や、コミュニティの大きさ等で、Flutterを採用するのが
いいと感じました。

ライブラリについて

Flutterは、OS依存の処理(カメラ起動など)を実装する際、ネイティブな
コードの関数を利用するための接続用ライブラリが確立されており、
Flutterの中でSwift等で実装された関数を使用することが出来ます。

開発のしやすさについて

クロスプラットフォーム
はじめに上がってくるのはやはりこれですね。iOS,Androidの2ライン
あった開発を、1ラインで作成できるので、開発コストをぐんと下げる
ことが出来ます。

ホットリロード
これはReact Nativeも共通していると思いますが、ホットリロードに
対応しており、保存したコードがすぐにデバッグの画面に反映される
ため、開発スピードが早いです。
毎度ビルドしてデバッグを立ち上げなくても済むので、ストレスなく
開発することが出来ます。

OSS
Flutter(dart)がオープンソースの言語なので、中身までじっくり確認
することができ、言語理解が深まります。
プロジェクト独自でライブラリを作ったりする際も、既存のライブラリ
を参照できるのはとても助かりますし、内部にあるコードを活用して
実装出来るので、とても便利です。

レンダリングエンジン
Flutterのレンダリングエンジンはとても優秀なので、画面表示や
再レンダリングの時のパフォーマンスが非常に高いです。

UI
Flutterは、標準で用意されているマテリアルコンポーネントを採用して、
独自にカスタマイズできるので、簡単な改修で時代の変化に対応しやすい
というメリットがあります。一から用意することがないのも助かりますが、
標準のコンポーネントをカスタマイズ出来るのも非常に柔軟です。
簡単なコードでとても綺麗なアプリを作れるのは、開発者としては、
とても助かります。

パフォーマンステスト
Flutterを使うと、CI/CDプロセスも効率的に出来ます。
この言語はFlutter Dev Toolsを使うことで、カバレッジが取れます。
これによってパフォーマンステストが簡単に出来るので、動作確認ついでに
パフォーマンスも保証することが出来ます。

ハードの柔軟性
そのままでは難しいですが、C＋＋等でFlutterエンジンをカスタマイズする
ことで、別ハードでも適用できる場合はあるそうです。
車載器や、独自のハードでも活躍できるので、とても柔軟性が高いことが
分かります。この使い方は非常にレアケースだと思いますが。。。

SnapShot Testing
フロントエンド側のUTで、画面を撮影して評価していくことがありますが、
Reg Suit等のツールと連携することで、ビジュアルリグレッションテストが
サクサク行えます。テストの正確性と迅速性が大きく改善されるので、
ぜひ取り入れたいところです。

まとめ

今回はFlutterについて様々な文献やセミナーを参考にして、メリットを
列挙してみました。もちろん筆者の体験も交えての意見なので、
他のプラットフォーム開発技術と全ての項目で比較してみたいものです。
モバイルアプリ開発にFlutterを採用してみてはいかがでしょうか？？？

はじめに

今回はFlutterを使って通知を送る方法をまとめました。通知が送れると、
アプリを開かなくても状態が確認出来るので、スマホアプリ開発の技術
として重宝されています。

導入

今回はシンプルに画面に通知ボタンを配置し、ボタンを押すと通知が来る
アプリを作りました。

まずパッケージを導入します。

// pubspec.yaml
  dependencies:
    flutter:
      sdk: flutter
+   webview_flutter: 

// importするファイル
+  import 'package:{プロジェクト名}/flutter_local_notifications.dart';

これでFlutterで呼び出せるようになります。
通知の機能はOSに関わってくる部分なので、許可をする必要があります。
(Androidは特に追記不要です。)

// iOS AppDelegate.swift
  GeneratedPluginRegistrant.register(with: self)
+ if #available(iOS 10.0, *) {
+   UNUserNotificationCenter.current().delegate
+     = self as? UNUserNotificationCenterDelegate
+ }
  return super.application(
    application, 
    didFinishLaunchingWithOptions: launchOptions
  )

// Android
// nop

アプリの初期化処理で、通知処理も初期化します。

+ Future<void> _initNotifications() async {
+   const initAndroid = AndroidInitializationSettings('app_icon');
+   const initIOS = IOSInitializationSettings();
+   const initializationSettings = InitializationSettings(
+     android: initAndroid,
+     iOS: initIOS,
+   );
+   await localNotificationsPlugin
+     .initialize(initializationSettings);
+   tz.initializeTimeZones();
+ }

あとはライブラリ標準のプラグイン機能で呼び出してあげるだけです。

  await localNotificationsPlugin.show(
    0,
    'お届け予定日　$displayDeadline曜日',
    'ご注文された商品の納期は1週間後です。タップしてご確認ください。',
    platformChannelSpecifics,
  );

ここのlocalNotificationsPluginは通知を行うためのインスタンスです。
.show()で通知することができます。
引数はそれぞれ
第一引数：チャンネル(識別子)
第二引数：通知のヘッダー
第三引数：通知のメッセージ
第四引数：プラットフォームの種類を保持するインスタンス
です。

動作確認

割愛していますが、画面にボタンを配置し、onTap関数として
通知呼び出し処理を記載しています。

通知ボタンを押すと、通知が飛んできます。

通知のメッセージにもある通り、タップするとアプリを起動できます。

応用編

ボタン押した時のみ通知が来ても需要がないので、
時間指定で通知が飛ぶ機能も実装してみました。
以下のコードをアプリの初期化処理に組み込むだけです。

try{
  await _initNotifications();
  await localNotificationsPlugin.showDailyAtTime(
    0,
    'バッチテスト',
    'アプリを閉じていても来る通知です',
    // 時間設定
    const Time(11,52,00),
    platformChannelSpecifics,
  );
} catch (e) {
  if(kDebugMode) {
    print('Error initializing app: $e');
  }
}

指定した時間に通知が来ました！
これを使うことで、通知したいタイミングに送れるので
本来のリマインド的な用途で使えます。

まとめ

今回は、端末発信で自身の端末に通知する種類の通知を
実装しました。別システムから端末に通知するには
トークンと端末情報が必要なので、少しハードルが
高いですが、追々やってみようと思います。

はじめに

表題の通り、FlutterのWebView機能を使ってみようと思います。
まず、FlutterとはDart言語で構成されるアプリケーションのUIキットの
ようなものです。豊富なデザインやアイコンなどがあり、簡単に、かつ
綺麗にアプリ開発をすることが出来ます。
そんなFlutterですが、1からボタンやテキストを作るだけでなく、
Webサイトをアプリ内で表示するWebViewも提供されています。

なぜわざわざFlutterでWebViewを使うの？

Flutterはアプリケーションを開発することが出来るので、
Web Viewの登場機会といえば、動画の埋め込みなど、
一部の用途でしか使われません。

しかし、こんな使い方もあります。
モバイルサイトやモバイル版Webアプリをネイティブアプリのように振る舞える。
こちらの使い方です。例えば、すでに運用しているモバイルサイトやモバイル版
Webアプリがあったとします。
しかし、Webアプリではスマホに通知を送ることはできません。
そこでFlutter WebViewの登場です。この機能でモバイルサイトやモバイル版
Webアプリを表示してあげて、通知機能だけ実装することで、わざわざ
ネイティブなアプリに作り替えなくても通知機能を実現することが出来ます。
また、いずれはネイティブアプリにしたいけど、コスト面の問題があり、
一旦最低限の機能を実現するためにFlutter WebViewを使う、という使い方です。
このようにBtoBのビジネスシーンでは、引き合いになりそうな技術のため
今回調査してみました。