諸設定とか調整
こんにちは。
前回でWebViewは表示できたので画面とか色々と変えていきます。今だとホントにシンプルすぎて審査通らないので、最低限整えます。
## アイコン設定
アプリにするときに使うアイコンを作ります。自分で作ることもできますが、色々と注意しないといけない点があるそうです。
Google Play アイコンのデザイン仕様 | Android Developers
https://developer.android.com/google-play/resources/icon-design-specifications?hl=ja
今回の目的はとりあえずリリースすることなので凝ることはしません。アイコンはパッケージを利用したほうが簡単に作れるとのことなので、パッケージ経由で作ってみます。
```
flutter pub add flutter_launcher_icons
```
あとはpubspecに記述を追加
```
flutter_icons:
android: true
ios: true
image_path: "lib/assets/icon.png"
```
アイコンの元画像を用意して以下のコマンドを実行
```
flutter pub run flutter_launcher_icons:main
```
アイコンが反映されました。
ただ、なんだか思ってたのと違いますね。うーむ、最適化しないといけないかも。まぁ今は暫定としてこれでいいかとは思います。余裕ができたら改善してみたいですね
## のべらん以外のサイトを外部ブラウザで起動
前回WebViewを作りましたがその部分を改良していきます。
まず、のべらん以外のURLをタップした時に外部ブラウザで起動するように変更します。今のままだとWebViewで起動してしまうのであまり作業性がいいとは言えないので。
あと何でもどこのサイトでも内部で起動させるとセキュリティ的にもよろしくないので制限しちゃいます。
外部ブラウザを開くためにurl_launcherを導入します。
```
flutter pub add url_launcher
```
あとは navigationDelegateに特定のドメイン以外は別ブラウザを使用するように指定します。
```
navigationDelegate: (navigation) {
final host = Uri.parse(navigation.url).host;
if (host.contains('noveran.net') || host.contains('eveningmoon.net')) { //ここでのべらん以外のアクセスを別タブで開
return NavigationDecision.navigate;
}
launchUrl(Uri.parse(navigation.url),mode: LaunchMode.externalApplication);
return NavigationDecision.prevent;
},
```
これでアプリとブラウザの切り分けができました。
## 画面の改善
次に画面を改善したいと思います。
今このようなアプリ画面になっているのでもう少し見やすくします。
まず、履歴移動のバーについては下に持ってきます。スマホの操作的に上側はあまりやりやすいとは思えないので下側に変更します。
次にヘッダーですがヘッダーが二つになるので片方を消します。
## 下メニューの設定
```
bottomNavigationBar:NavigationControls(controller: controller),
```
AppBarで設定していたNavigationControlsをbottomNavigationBar:に移行します。
そうするとメニューが出てくるようになりました。戻る、進む、リロードできるようになります。
## ヘッダー削除
次にヘッダーを削除します。
色々とやり方はあるようですが、以下のやり方がよさそうだったので真似してみます。
Flutterでステータスバーを表示したままAppBarを非表示にする
https://zenn.dev/isao_e_dev/articles/8c8085c5123252
```
appBar: const EmptyAppBar(
),
```
うん、いい感じになってきましたね。
とりあえずこれで最低限動いて画面も整ったのでリリースのために、これでアプリをビルドしてみます。
ほぼ知識ゼロからでもガワネイティブなら簡単に作れるんですね。うーんすごい。時間があればきちんと勉強したいな。
