課題
ver.5に向けて開発の課題は、通変星の表示にチャート表示が必須となる。そのためには次の課題を克服する必要がある。
- スマホ画面上に円や線を描く
- また、描いた線と丸と画像や文字そしてスイッチを配置できるか
- ボタンを押すと、天が平等に与えれくれる運勢を表示できるようにする
- 年月日ボタンを押すとそれに従って天の運勢を随時表示できるようにする
そのためには次の技術の習得が必要となる
- 1. 今まで、画面遷移で変えていたが、画面切り替え時画面が乱れる。stateful な画面の作り方、2種類を習得する。
- 2. 円や線を描いてさらに重ねる
- 3. 紹介動画で、AIで作成した画像に喋らす
- 4. 入力で、年号も表示できるようにする
備忘録
ver4.5 までに、上記課題4まで実現したので、紹介動画を表示する課題に取り組んだ。
1. 動画をスマホの画面に出してみる
「Flutterでmp4の動画を再生する方法 video_player」 の記事に従って、実行してみました。GitHab からクローンを作成する方法もわかりました。実施クローンをして動かそうとすると、今度は開発環境のアップグレードが必要になり、アップグレード作業をしました。pub get のエラーが解消しました。参考にした記事は下記の通りです。
・Android StudioでGithub上のプロジェクトをCloneする
・【Flutter】Xcode 15でiOS 17のシュミレーターが起動しないUnable to get list of installed Simulator runtimes
2. 以前作成した動画を上記のアプリに出してみる
1項で、自分のスマホに動画が出力されるようになったので、以前、D-iD で作成した組合の大会案内動画を入れて、どんな感じに表示されるのかを確認してみた。いい感じに再生できた。どのくらい動画再生にストレージ容量が必要になるのか？多い場合は、ネットに繋げるか？動画と動画を組み合わせて表示できるか？などいろいろ課題はのこるが、flutterのコード作成は、ストップし、次の工程に進むことにした
3. しゃべらせるモデルの生成
大会案内動画のモデルでは、事務員なので、
Ai占い師「天運」先生の作成に取り掛かる。Aiイラストレーターの Leonardo.Ai を使用して、作成に取り掛かる。試行錯誤して作成する中で、だんだんクオリティが上がってきた。次のような雰囲気をもとに作成した。
・占い師としての威厳がある。
・そこそこ美人で、神秘的な雰囲気をあわせもつ。
・高貴といわれる紫色のオーラを発している。
・紫色に金糸の刺繍をまとっている。
・中性的、顔はキリッとした女性のようだが、体格はがっちりしている男性に見える。
・一対一で、先生に向かい、相談にのってもらうような雰囲気。
・四角い和卓には、やはり光沢のある紫色で、縁には金糸の刺繍がこどこされた、テーブルクロスがかけられてる。
・そして、やはり紫色のオーラを発する大きめの水晶球が置かれている。
microsoft 365 の word を使い、Leonardo.Ai で、顔、和服を着た体、水晶球、台、和卓、を作り、wordで、オーラ、影などを作り重ね合わせて作成した。そうして作成したモデルがが下記である。
参考にした記事は、下記のとおり
・【Leonardo.Ai】無料で使える秀逸画像生成AI！商用利用可！ダウンロード不要！Inpainting Outpaintling PosetoImageフル装備！Midjourney越え！？https://www.youtube.com/watch?v=ra7of7H1cD0
・落書きから写真化できるか試したら一発で仕上がった！Leonardo.AiのImage to Image機能はやっぱり便利！
4. 動画作成
動画作成にあたり、iMovieのできることの限界を感じていたので、Final Cut Pro を購入した。非常に使いやすい。動画編集の効率が格段に向上した。まだ勉強不足で、以下の課題がある。
(1) 重ねている映像の位置や大きさをなめらかに変化させには？
2024.1.25 動画が完成し、アプリに取込む。実機Galaxy note10+上では、うまく作動した。しかし、実機iPhone SE上では、動画の下の部分が隠れている。上にスワイプすれば、説明は見られるが、占い師の顔が見れない。羽田空港で帰国のタクシー利用者と話をすると、ほとんどiPhoneを利用、多分95％以上というのが実感。そこで、ネットで2023年の日本におけるシェアを調べると、
なんと、10代20代のは、8割がIPhone。iPhoneでの見え方は、無視できないため、この課題に取り組む必要性が出てきた。気づいた課題を以下に挙げる。
① 縦幅を短くする動画は、できるか？
＞＞＞ Final Cut Pro で ファイル＞新規＞プロジェクト＞ビデオ：＞カスタム で 解像度 横ｘ縦 を変更できるようになる。
② テロップを首の下に、簡単に移動して、下をカットする。
＞＞＞ Final Cut Pro で タイムライン の テロップを複数選択し、位置を変更する。複数選択できるので比較的簡単にできた。
③ 音声に合わせてアニメーションのコードを書けるか。
④ 一度アップデートして、アプリの容量がどれくだい増すか確認する。
＞＞＞ 34MB が 220MB （動画サイズ400x640）になって、アップロードできなかった。動画サイズを（350ｘ560）に変更して168MBになり、134MB増加した。PAD(Play Asset Delivery)という方法があることを知った。他の項目の説明動画を実装したいので、この技術を習得すれば、可能なことがわかった。
⑤ 動画を、Youtubeにアップして、アプリで動画再生できるか。
⑥ Firebaseにアップして、アプリで動画再生できるか。
⑦ Youtubeに縦長の動画をアップするには？
⑧ 説明画像表示中は、占い師の顔を削除して、縦幅を低くしてはどうか。
(2) 動画をアプリ内に入れて、とんでもない容量になっていないか？
(3) 動画をweb上に置くなら、そのアクセス方法と、Flutterのコードは？
(4) 動画をおいたサーバーのレンタル料金は？
課題1 縦幅を短くする動画は、できるか？
Final Cut Pro X で、ライブラリは同じで、新規プロジェクトの作成時の、ボケ具合と容量を比較して、最適化を行なった。
アスペクト比 1: 1.86 688 x 1280 405MB
アスペクト比 1: 1.60 ( = 5：8 ) 450 x 720 200MB
・新規プロジェクト作成時に、ビデオをカスタムを選択して 450 ｘ 720 と設定する。
プロジェクト1a のタイムラインを全て選択し、プロジェクト1e のタイムラインへコピペし、編集しないで、書き出して、その動画を アプリに取り込み実機で確認して、画像の顕著な劣化がないことを確認した。
次にAppBarをなくして、動画表示領域を広げる。
child: Scaffold(
backgroundColor: Colors.black,
appBar: PreferredSize( //赤字の部分がAppBarの高さを
preferredSize: Size.fromHeight(0.0), // 0にするため追加
child: AppBar(
title: const Text(
'アプリの使い方（工事中）',
style: TextStyle(
color: Colors.pinkAccent,
fontWeight: FontWeight.bold,
), // TextStyle
), // Text
), // AppBar
), // PreferredSize
body: Container(
color: Colors.black,
child: SizedBox(
12mini 12 12ProMax の見え方比較
※ 動画サイズを（350ｘ560）5：8 にして、5.0版としてアップデートした。また、機種によって 命式チャートページの図形と文字の位置がズレる現象が発生していたが、文字の表示に Transform.translate()を使って作り変えることによって解決した。(2024.2.5)
以上