FreeStyleVision

はじめに

今回はFlutterのwidget管理において、個人的にこれが答えだ！
と思うものを見つけたので、この技術について学習した内容を、
ハンズオン形式でお伝えします。

WidgetBook

もったいぶってすみません、その技術とは、「Widgetbook」のことです。
Widgetbook　→　Widgetbook (docs.page)
こちらのWidgetbookを使うことで、アプリ内で使用されているそれぞれの
widgetをカタログ形式で参照することができるライブラリです。

Widgetbookでできること

・実装したwidgetを視覚的に確認できる。
　基本的にコードベースで作成したものは、実行してみるまでその実態を
　確認できません。しかし、Widgetbookは、ツールを立ち上げるだけで
　全てのwidgetを表示することが出来ます。
　このメリットを活かして、お客様にデザインの確認を依頼することが
　出来たり、メンバ間でwidgetの共有が容易になったりします。

・widgetを階層化して整理することができる。
　Widgetbookのカタログでは、閲覧するためのメニューがありますが、
　このメニュー内のwidgetをフォルダにまとめたり、整理することが
　出来るので、カラーごとに分けたり、種類ごとに分けたりと、集計や
　管理が容易になります。

・デバイス設定を反映させた見た目を確認できる。
　基本的にはブラウザでそのカタログを開くこととなるWidgetbookで
　あるが、カタログのBuilderでAddonのオプションを設定することで
　簡単にライトモード/ダークモードの見た目を確認できます。

Flutterとは？

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

コミュニティについて

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

はじめに

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

導入

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

はじめに

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

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

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

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

(さらに…)