欧米列強の罠

Adobe XDで作成したUIをFlutterプロジェクトに書き出し、Visual Studio Codeで実行したところ、エラーが起きて動かなかった。

要約すると「てめーのプロジェクトにASCII文字以外が入ってんからビルドできねーんだよ！」ということだ。

ASCII文字。

グローバル化が進みダイバーシティが求められる2020年東京オリンピックが開催されるかどうか怪しい時代に、ASCII文字などというレガシーな遺物を示す字面を拝まされるとは、刹那も思わなかったわ！！！

なんじゃ？
この明治時代と変わらぬ欧米列強の傲慢さは？？
これだからメリケンの作るアプリは嫌いなんだよ！！！！

アルファベット26文字しか受け付けないとは、まさか社名にこんな時代錯誤的な理念を埋め込んでいたのか？（Googleの社名はAlphabet）

というわけで、FlutterプロジェクトをASCII文字だけで記述したフォルダに移動する。

まだある注意点

しかも、だ。Flutter用に生成されるファイルには、アートボード名も使用される。こいつもまたASCII文字しか受け付けないようだ。「メイン」としていた私の場合、すべてなかったことにされた。

実はアートボード名は駱駝大文字でなければならない。Camel upper caseである。CamelUpperCase、こんなやつだ。なのでアートボード名をメインからHomeに変更して、仕切り直しなのである。

だが、これでも動かない。一度エラーが起きたプロジェクトはおかしくなっているので、Flutterプロジェクトごと作り直さなければならない。慣れれば不要なファイルを消せるだろうが、何も分からない状態では、いわゆるリセット、再インストールに相当する行為が最も確実なのである。

これらの注意を払った上で、デザインしたパネルを書き出す。Export All Widgetをクリックするだけだ。

Visual Studio Codeを見てみる。KenchareHome.dartが追加されている。

これをmain.dartから呼び出す。Dart言語は私もまだ触っていないので、なんとなく雰囲気しか分からない。構文がC++に似てるようだからなんくるないさー。

main.dartに追加するのは二か所。まずはimportの宣言だ。

import 'KenchareHome.dart';

続いて、画面を呼び出しを追加する。１行をコメントアウトし、１行を追加するのだ。

 //home: MyHomePage(title: 'Flutter Demo Home Page'),
    home: KenchareHome(),

そしてF5で実行。をを！画面にそれっぽいのが表示された！すげー！

画像が表示されていないし、下部のナビゲーションバーも表示されていない。Visual Studio Codeでもエラーが発生していた。

アセットを読み込めない、か…

エラーの解決

XDをよく見ると警告が表示されていた。

内容を確認する。

8 Warnings:
[Rectangle] Only inner strokes are supported on rectangles & ellipses. (x3)
[image] Image does not have a Flutter image name. (x16)
[On Surface] Only inner strokes are supported on rectangles & ellipses.
[Primary] Only inner strokes are supported on rectangles & ellipses.
[💡States] Only inner strokes are supported on rectangles & ellipses. (x8)
[Mask Group] Group masks aren't supported.
Could not find fonts entry in pubspec.yaml for: Roboto.
Could not find assets entry in pubspec.yaml for: assets/images/.

一つずつ直していこう。

イメージの設定

まずはイメージの警告だ。これはまたもや駱駝大文字のことだろうか。

Image does not have a Flutter image name.

まずはVisual Studio Codeにイメージフォルダを追加せねばならない。ルートフォルダで「新しいフォルダ」を選択する。

フォルダ名をassets/imagesとする。

続いてpubspec.yamlに情報を追記する。

assets:
    - assets/images/

続いてXDでプラグインのUIパネルを表示し、白うさぎのイメージを選択する。IMAGE EXPORT NAMEに名称を設定し、”Export Image”をクリックすると成功した。そしてExport All Widgetもクリックする。こうしないと情報がdartファイルに更新されない。

Visual Studio Codeにも画像ファイルが追加されていた。

同様に他の画像もitem-list02~07と設定して画像を書き出し、ウィジェットも書き出す。警告が1つ減った。

6 Warnings:
 [Rectangle] Only inner strokes are supported on rectangles & ellipses. (x3)
 [On Surface] Only inner strokes are supported on rectangles & ellipses.
 [Primary] Only inner strokes are supported on rectangles & ellipses.
 [💡States] Only inner strokes are supported on rectangles & ellipses. (x7)
 [Mask Group] Group masks aren't supported.
 Could not find fonts entry in pubspec.yaml for: Roboto.

実行してみる。画像がすべて表示され、例外が発生しなくなった。

だが上部と下部のばバーが表示されていないのだ。サブタイトルも切れてしまっている。まだ呪文が足りないのだろう。マテリアルデザインに起因するものだろうか。

フォントの設定

続いてはこいつだ。

 Could not find fonts entry in pubspec.yaml for: Roboto.

“Roboto”なるフォントと”assets/image”の情報がパブスペック　ヤムル氏にわたっていないと言ってるのだな。

まずはRobotoフォントのダウンロードだ。プロジェクト直下にassets/fontsフォルダを作成し、フォントをコピーする。

pubspec.yamlに下記を追加する。

fonts:
     - family: Roboto
       fonts:
           - asset: assets/fonts/Roboto-Thin.ttf
           - asset: assets/fonts/Roboto-Light.ttf
           - asset: assets/fonts/Roboto-Medium.ttf
           - asset: assets/fonts/Roboto-Regular.ttf
           - asset: assets/fonts/Roboto-Bold.ttf
           - asset: assets/fonts/Roboto-Black.ttf  

F5で実行する。なにも変化はない。調べるとRobotoはマテリアルデザインのデフォルトフォントなので、宣言する必要がないらしい。

紛らわしいわ！！！！！！！

フォントの警告は無視して問題ないことに決定してみる。そもそもこいつはプロトタイプだ。それに欧米列強のアプリは総じて「２バイト文字」と呼ばれるひらがな、カタカナ、漢字を軽んじるところが昔からある。

画面サイズの設定

考えてみれば、iPhone11 Proの画面サイズでデザインしている。エミュレーターのPixel3は画面サイズが異なる。

ここでcssピクセルという単語が出てくる。以前は１ドット＝１ピクセルであったが、高解像度化が進んだ現代社会では１ドットを複数ピクセルで表現している。特にスマホがそうだ。

iPhone11のRetinaディスプレイは2,436 x 1,125ピクセルである。これだと字が小さくて、老眼には厳しい。画面もプリンタのようにdpi（dot/inch）で設定する時代なのである。論理的に解像度を設定するのである。これをCSSピクセルと呼ぶのだ。

iPhone11 ProであればCSSピクセルは812×375である。ネットで検索すると一覧表をたくさん見つけられるのだが、なぜか解像度がまちまちだ。どこから情報を得ているのだろうか？？？

こういうのは本家を見るに限る。こちらがAppleの資料である。

Flutter＋XDによる妄想アプリのデザインはこれでいったん終了である。アイデアに行き詰った。

もうちょっと現実的かつパクりやすいアプリを考えて、ワイヤーフレームを作ることにしてみる。