開発駆動コース 仲山ゼミ レウェティ要

マーケットプレイスのリンク

flecure〜セキュアなアプリを作るサポート〜
Flutterの目指す世界
アプリを作ることができ、多くの人にflecureflecureを使うことでより簡単にセキュアな Flutter

What is Flutter?とは Google が開発した、What is flecure?

Flutter 公式キャラクター Dash

パッケージ提案

GoogleAlibaba

BMWPUBG

NubankTOYOTAでまとめ記事のページを実装し、VScode ではまとめ記事のページへの遷移や、デモコードのダウンロードを実装しました。
Flutter

はシンプルで綺麗な UI の実装が楽ですが、認証周りやローカルに保存するためのデータベースの処理などを実装しようとすると色々と考慮する必要があり、苦労します。そんな悩みに解決するのがパッケージ提案機能です。既に存在するパッケージをユーザに提案することで実装にかかる労力を減らすことができます。
これを実現するために、「見る」デモと、コードを実行しながら確認する「触る」デモを用意しています。
Flutter

自分の考える Flutter のメリットは「マルチプラットフォームに対応」「ホットリロード」「簡単に綺麗な UIを実装可能」という点です。
例えば、Flutter で開発する際に、Dart で実装します。
既に様々なパッケージが存在しており、UI もシンプルでわかりやすい Material Design を使っているので、カスタマイズしながら簡単に綺麗な UI を実装できます。
コードの実行中で、すぐに UI だけを変更したい場合には、裏のロジックを変えずに、UI だけ変更する「ホットリロード」を使えます。これによって毎回リロードせずにすぐに UI の変更を見ることができます。
Flutter ではそれぞれのプラットフォームへビルドするツールを用意しているので、デバッグが終了したら、それぞれのプラットフォームに対応するアプリを簡単にビルド、デプロイをすることができます。
このように、簡単にクロスプラットフォームに対応する綺麗なアプリを作ることができます。

Flutter

提供している機能おすすめ！

Flutter 使用企業の例

バージョン管理パッケージ提案
キー秘匿

flecure他のフレームワークと比べて汎用性が高く、洒落た UI を思い通りに実装できます。
主にフロントエンドを実装するために使われますが、サーバ側の処理を書くためにも使用できます。
言語は JavaScript に似た Dart という言語が使われ、2023年時点でFlutter のフレームワークも1億ダウンロードを超えています。
Flutterを使っていただけるようにする

は過去の Flutter アプリ開発者が感じてきた悩みを解決するためのツールです。
現在は VScode の拡張機能として提供しており、マーケットプレイスから実際に「flecure」で検索してダウンロードできます。
flecure は、先ほどの問題と紐づけて、実装を楽にする「パッケージ提案」、バージョン依存に関する問題に早めに気づける「バージョン管理」、API キーなどを暗号化し特定の人にのみ共有を可能とする「キー秘匿」の三つの機能を提供しています。

「一つのコードで簡単に、マルチプラットフォームに対応する、綺麗なアプリを書ける」
フレームワークです。
Flutter

Flutter

マルチプラットフォームに対応

バージョン管理

UI

データベース

ログイン
スクショ防止Jail Break

提案パッケージの例

デバッグをするごとにバージョンを最新のものにするため、VScode のデバッグのフックを利用しました。特にエラーが起きた際に前のバージョンに戻る処理が、一工夫必要でした。に限らず、開発を行っていると、バージョン依存に関する問題にいつかは出会します。特に Flutter で早い段階で気づけるようにするのが flecure の役目です。
この機能はコードを実行するたびに Flutter の最新のパッケージ情報を取得し、バージョンを自動で上げます。そして、バージョンに関するエラーが発生するとバージョンを下げて再度実行し、その旨をユーザに通知します。
毎回コードを実行するたびに鬱陶しく感じる人は設定から頻度を調節したり、パッケージを指定したりすることができます。
Flutter

該当箇所を反映

ホットリロード（実装箇所の UI をすぐに反映）

キー秘匿

ウェブとアプリの両方を提供する
ために Flutter を使用

綺麗でシンプルな UI を実装できるを触って感じる難点*

自体は非常に綺麗で、便利なフレームワークですが、アプリや開発環境をセキュアにすることが難しく感じる人もいるのが現状です…

前の暗号化は git-push と python で実装しています。
鍵共有用のサーバは Flask で実装しました。復号などの処理はクライアントの VScode で実現しています。
git push「誤って *キー を公開」することを防ぐために、flecure ではキーを git push すると自動でキーを暗号化する機能を備えています。暗号化で使う際のキーは一括して管理しており、作成者がユーザの GitHub ID を指定することで、暗号化キーを特定のユーザのみへの共有が可能となっています。flecure を実装する上で特に工夫した機能です。毎回認証しなくて良いようにクッキーを設定したり、初期化する際にわかりやすく設定できるようにしました。

（暗号化時）
共通鍵を渡す暗号化されたキーを含むコード push2.

3.

サービスを登録（共通鍵生成）

1.

7.
6. サービスA の共通鍵をリクエスト

Flutter

開発者 A「結構 UI とかは簡単にできるんだけど、認証周りの方は APIとか連携しながらやらないといけなかったから面倒だったな。
慣れれば良いんだけど、最初は全く分からなかった」ユーザA

共通鍵を渡す4. git pull
5.

ユーザB

8.

暗号化されたキーを含むコード

暗号化された API
キーを復号化

サービス名と使うユーザを
git push すると、git 上で暗号化登録するだけで使用が可能！
された状態で表示される！
*ここでいうキーとは supabase の anonKey や、API のトークンなど、API やクラウドで利用し、外部に漏洩すると困る情報を指します。

→ UI と UI 以外の実装と組み合わせるのが面倒...

開発者 B「アップデート放っておいて、いざデプロイする時に大量のバージョン依存の問題が出ると一生解決しないといけないんだよね。まじで地獄だった。アップデートさぼらなければ良かった」→ バージョン依存の問題で手こずる...

最後に

Flutter

flecureは上記で述べたようにすごく便利で良いフレームワークなので、ぜひとも触ってみてください！
そして、Flutter で開発する際に flecure も拡張機能として導入してみてください。Flutter を触ったことがなくても、簡単にセキュアなFlutter アプリを作ることができます！
近々 Android Studio のプラグインとしても公開するので、AndroidStudio で開発している方はそちらもどうぞご利用してみてください。
Flutter がさらに流行ることを願っています。
Flutter

開発者 C「あとで自分のリポジトリ確認して、public なのに AWS のキーあげてたときはヒヤッとしたな」→ 気づかず or 誤って API キーなどを GitHub に公開...

は安全なフレームワークです！
（セキュアにするのが煩雑な部分があるということ）* Flutter

Flutter

をもっと Secure に‹#›