フォルダ＆ファイル管理(キャンバス管理)を強化 – 開発日記(74) - アイディア・レーン開発ブログ (Flutter Web)

2024/02/18

いわゆるファイル一覧である「キャンバス一覧メニュー」をスマホでもなんとか使えるように修正。

これまで：完全に画面からはみ出していた。

新しいバージョン：画面内に収まっている。

今回の修正でキャンバス一覧表示は以前より良くなったが、まだフォルダ管理周りは手を入れないといけない。

スマホにおける挙動調整。といってもスマホアプリではなく、Webブラウザから開いた場合だが。

もちろんスマホのブラウザでも動くことは動くが、小さい画面用に表示や操作の最適化が必要だ。例えばレーンのサイズがPCと同じだとどうしても使いづらいので、良いやり方を模索中。

それと意外に盲点だったのが、マウスオーバーの操作がスマホでは出来ない。マウスオーバーで仮表示→クリックで実体化、のような動きについては、そもそもマウスオーバーが発生しないので何もできなくなる。そうするとスマホ専用の操作・動線が必要だ。

Flutter Webで動くと言ってもこれまでPC前提で作っていたので、上記のようなことを含めて、スマホ向けの修正作業は結構必要だ。

Flutterなら１ソースでスマホアプリに出来るはずなので、将来的にはアプリもリリースしたい。
但し狭い画面だとこのソフトの良さは発揮しづらいので、基本的にはPCメインでスマホはサブな的使い方になりそうだ。

レーン内のアイディア数が自動で表示されるようにした。

他にリレーション描画の不具合修正やリファクタも実施した。

Flutterでポップアップメニューを表示するときはPopupMenuButtonが便利なのだが、カーソルキーの上下で操作するようなPCのキーボードに対応していないのがずっと気になっていた。

Focusやらなんやらで自分で実装するしか無いのかなと思っていたら、MenuAnchor classという便利なものがあった。見た目は地味だが機能としてはこれが求めていたものだ。ショートカットキーにも対応している模様。

フォルダエリア周りの実装の続き。

今のままでは使いづらく順序も入れ替え出来ないので、改善に向けて実装。

他にいくつかの不具合対応と操作感の調整をしたり、リファクタを行ったりした。

ビルド＆実行しようとしたら謎のエラーが大量発生。

flutter channel stable を実行し、コメントを参考に結局

flutter pub upgrade

で先に進むことができたが、無駄な時間を使ってしまった。

と思ったのもつかの間、今度は起動時に下記のエラーが出る。

Class constructor IndexedDBLocalPersistence cannot be invoked without ‘new’

検索すると下記が参考になり、firebase関連のライブラリのバージョンを指定することで解決できた。

こういった情報は本当に助かる。

しかし、ソース変更と関係ないところで突然動かなくなるのはとても困る。またもや無駄な時間を使ってしまった。

さていよいよコーディングと思ったら、flutterからのアンケートがAndroid Studioに表示された。それに答えていたらまた時間がかかってしまった。アンケートについては英語という点もハードルもあるなぁ。

ということで余計なことでたくさん時間を使ってしまい、コーディングは全く出来ず。

フォルダ・ファイル周りの制御を修正。

これまでは独自にアニメーションを使ってスライドしながら開閉していたが、Drawer を使う形に変更。いわゆる「ドロワーっぽい」見た目がいやだったのだが、普通のContainerでも使えることを知った。

それとフォルダのサブメニューを実装し、「一つ上に移動」などが出来るようにした。（ドラッグ＆ドロップでの移動までは実装しなかったので、またいつか……）

ひとまずフォルダ・キャンバス管理周りの修正はこれで一段落。

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています

この記事はアイディア整理ソフト「idea Lane」の開発記録です

↓どなたでも、ユーザ登録だけで無料ですぐに使えます↓
テキストベースの思考整理ツール「idea Lane」