「UI」の記事 - Crieit

Flutterベースのモバイル向けタイムラインの作成

2022-01-07T16:19:06+09:00

Quireタイムライン（モバイル向け）の構造を初公開

2018年に初めてFlutterベースのアプリを作ったときは、とても楽しく興奮しました。それから3年経ち、Quireアプリもかなり充実して、従来のモバイル向けプロジェクト管理アプリの域を超えるまでになりました。Quireモバイルアプリの現行バージョンは、階層表示、ボード表示だけでなく、タイムライン表示にも対応しています。

モバイルアプリ向けのタイムライン表示の作成を決めたときは、簡単にできるとは思いませんでした。当時は類似の既成コンポーネントもなかったためですが、驚いたのは、インターネットでタイムライン表示の構造についての情報も見当たらなかったことです。そこで、いちかばちか、自分たちで作ってみることにしました。

Quireモバイルアプリ用のタイムラインでは、以下を計画していました。

横方向への無限日付スクロール
レンダリングオンデマンド（ROD）。ビューポートにあるときのみ実行されるWidgetのState
任意の位置に素早く配置
操作がかんたんで使いやすいインターフェースと、スムーズなユーザーエクスペリエンス

数週間で初期開発が完了し、以下のような構造になりました。

タイムラインペインのコアベース（週、週末のセクションなど）
タスクリスト（階層構造のタスクリスト）
タイムラインペインのビューポートベース双方向リスト
1ペインのみのとき、2ペインにまたがるときの両方に対応した期間の横棒
期間の横棒上の固定ラベル

上図のように、タスクごとにタイムラインペインが割り当てられ、すべてのタイムラインのスクロール位置は互いに同期されます。

インデックスベースのスクロールビュー

Google Flutter Widgetに似たインデックスベースのスクロールビューを作るために、Centerに引数のあるカスタムスクロールビューを使用します。実装すると、任意の位置まで素早くスクロールできるようになります。スクロール中のどの時点でも、各位置とインデックスを表示できます。

イメージ的には、少しスクロールした時点で、新しいCenterの引数でタイムラインをリロードしてビューポートの外に移し、またスクロールするとビューポート内に配置される、という感じです。

タイムラインペイン

タイムラインをスムーズに使えるように、インデックスベースのスクロール表示と似た発想で、横方向にスクロールできるカスタム「無限双方向スクロールビュー」を実現しました。実装すると、タイムラインをなめらかにスクロールできます。

無限双方向スクロールビューには、Flutterの強力なViewportの考え方を活用しました。そして、Backwardリストのインデックスを-1から始まる負の数に変更しました。Index 0に当たる日付が分かるようにフラグも設定して、任意の日付まで素早くスクロールできるようにしました。

Widget forwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: true, index: index));
  })
);

Widget backwardList = SliverList(
  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    return cellBuilder(context, _getIndex(forward: false, index: index));
  }),
);

Scrollable(
  viewportBuilder: (BuildContext context, ViewportOffset offset) {
    return Viewport(
      offset: offset,
      center: forwardListKey,
      slivers: [
        backwardList,
        forwardList,
      ]
    );
  },
)

2ペインにまたがるときの問題と解決方法

ビューポートには無限のリスト2つがスクロールされるため、期間の横棒が2つのリストにまたがることもあります。そこで、どちらのリストにも完全に同じ期間の横棒を作成し、ぴったり重ねて、リストがビューポートの外に移動してもリスト内のアンカーが壊れないようにしました。

固定ラベルで解決

モバイル機器の小さい画面ではプロジェクトのどこを見ているかが分かりにくく、使っていると混乱してきます。この問題は、できるだけ多くの情報を提供することで軽減できます。そこで便利なのが固定ラベルです。

最初はとにかくシンプルにするため、スクロールビューのスクロール通知に従って、位置を取得してから配置されたラベルに設定していました。固定ラベルを各タイムラインペインの開始位置に表示するには、期間の横棒の現在位置の計算がベースとなります。

しかし、新しく配置されたラベルは次のフレームまでしか更新されず、スクロールビューと同じ時間枠で同期されないため、ずれて見えてしまいました。

幸いFlutterコミュニティーが、レンダリングレイヤー固定ヘッダーというすばらしい解決方法を教えてくれました。つまりレイアウトのタイミングによる方法です。レンダリングレイヤーにすべてのWidgetをサイズとともに入れるだけでなく、そのピクセルすべてを計算する必要があります。最後にlocalToGlobal関数を、スクロール位置、および2ペインにまたがるときのペイン切り替えに基づいた演算操作と置き換えて、パフォーマンスを向上させました。

始まりはこれから

今は大変な時代ですが、だからこそテクノロジーの分野で貢献したいと考えています。タイムライン表示の作成でまず考えたのは、どうやってFlutterの強力なフレームワークを活用して、ビューコンポーネントを一から作り直すことなく、軽く安定したゴージャスなUIを実現するか、ということでした。

各日付単位はインデックスとして、FlutterのSliverに組み込まれています。ほとんどのものはWidgetレイヤーの高レベルの開発概念に留まり、固定ビューのときのみレンダリングレベルに移動します。

Quireアプリをインストールして、Flutterベースのモバイルアプリを使ってみませんか。Quireタイムラインについて気になることは、コメントを投稿するか、@quire_ioでツイートしてお知らせください！

※転載許可済み: https://zenn.dev/quireteam/articles/2b2c44c3e49fac

UIを整えるためにHTMLをデバッグするする方法

2019-01-18T09:29:07+09:00

HTMLを書いてブラウザで確認している時にどうしても上手く思った通りにならない場合があったりします。配置がうまくいかなかったり、marginやpaddingが思い通りにならなかったりなど。その時の確認方法などをまとめてみました。

昔はtableやfloat等が主なレイアウト方法だったのでシンプルでわかりやすかったのですが、CSS3も一般的になり色々と便利になる一方、惑わされる要素も増えてきたような気がします。

※ 記事投稿リクエストボードに投稿していただいた件に対する記事となります。

基本的な確認方法

具体的な話の前にひとまず念の為基本的な確認方法を書いておきます。ご存知の方も多いと思うので適宜読み飛ばしてください。Chromeでの話です。

調べたい要素の上で右クリックをするとこのようなメニューが出てきますので、「検証」を選択します。これでその要素が選択された状態でChrome DevToolsが開きます。もしくはF12キーを押して直接Developer Toolsを開いても構いません。

するとこのような画面が開きます。

右上はElementsタブを開いている状態です。右クリックしたあたりが表示されています。マウスカーソルを合わせると、左の画面のようにその箇所がハイライトされます。

また、Elementsの要素をクリックすると、その下にCSSの一覧（左）、最終的なサイズやCSSの情報（右）が表示されています。これはDevToolsをウィンドウの右側にドッキングしている状態ですので、実際にどのような使い方をしているかによってこのあたりは変わってきます。適宜使いやすい方法にしてください。

謎の挙動がなければ、だいたいはこれでほとんど問題があれば原因は分かると思います。

また、CSSの一覧の一番上にelement.styleという空のスタイルがあると思います。これはその場で自由にスタイルを指定できますので、「このスタイルのせいで動きがおかしくなっているんじゃないか」みたいなものに気づいたらとりあえずここでそれを上書きして試すことで、それが原因か、そうでなく他に原因があるか、というのをすぐ確認することができます。

謎の挙動

とはいえ謎の挙動も増えている感じがするので、思いつく限り書いてみます。

要素のサイズが思ったとおりにならない

横幅を指定したのに思ったとおりのサイズにならなかったりすると思います。これはわりとCSSのdisplayの設定であることが多いので、displayに指定した値によってどう変わるのかは一通りある程度把握しておいたほうが良いと思います。

inline

これはspanタグやaタグのように、文章中にそのまま含めるようなタグのデフォルトのdisplayとして使われています。下記のような特徴があります。

要素のサイズを指定しても無視される
marginやpaddingも指定しても無視される

しかしこれらを変えたい、という場合もあると思います。その場合は下記を使います。

inline-block

これを指定すると、inline要素として文章中に並べながら要素のサイズやmargin, paddingのようなスペースを設定することができます。

block

これは文章中などには含まず、ページ上のレイアウトを構成するための基本的な枠になります。何も指定しなければ基本的には横幅100%の要素となります。これも要素のサイズやpadding, marginは自由に設定することができます。

その他

とりあえず基本的には上記のdisplayがベースになっています。ただ、最近は色々増えていたりするので後述します。その他、このあたりはどんどん増えていっているのでだんだんと新しいものを覚えていく必要があります。しっかり覚える必要はないと思いますが、何かあった時の問題解決のために「そういえばこういうのもあったな」くらいのフォローはしていったほうが良さそうです。

heightが0になる

要素内にfloatスタイルの要素のみがある場合、親要素のサイズは連動しないためheightが0になります。

問題がある場合はclearfixを入れたり、あとはoverflowスタイルを入れることでも対処できるようです。もしくはflexbox等に変更するなどで対応しましょう。

位置調整をしても無視される

左に１つ目の要素を起き、そのすぐ右隣に２つ目の要素を起きたいのになぜか２つ目の要素が想定した位置に行かない、という場合。

全て自分で作っているCSSなどの場合には気づかないといったことは少ないかもしれませんが、よく使われているCSSフレームワーク等ですと最近はFlexboxがよく使われているため、それによって位置が決まってしまったりします。下記のまとめ等を見るとわかりやすいと思います。

CSS Flexbox の各プロパティの使い方を詳しく解説 | コリス

横幅を指定しても無視される

前述のFlexboxのページにも解説がありますが、flex-growを指定すると要素のサイズも固定されてしまいます。

この場合むりやり横幅を指定したりしても正常には動作しません。

beforeやafter

現在はbeforeやafterを使うこともできるため、実際の要素でなくそのあたりの設定でズレが生じてしまうこともあります。これもDeveloper Toolsで見ることができるため、確認するようにしてみてください。

iframeが使われている

iframeがあっても一応要素のサイズを見ることはできるのですが、どうも状態によっては正しくDeveloper Toolsでもちゃんとサイズが見れなかったりする場合があるような気がします。この場合はiframe内の謎挙動を無視できるようにCSSを整えていくしかないかもしれません。

動きのあるコンテンツを調べたい場合

一瞬だけ出てくるアニメーション等を調べたい場合、F8で一時停止することができます。これで時を止めて要素を調べることで解決できます。

まとめ

今のところこれくらいしか思いつかなかったので、もし何か思いついたら追記します。他にも追記すべき情報があればコメントいただければ追記させていただきます。（もしくは詳しい方が記事を書いていただけると助かります）

昔は本当にDeveloper Toolsでひたすら調べればなんとかなったのですが、FlexboxやGrid等、新しい機能が追加される度に、デバッグするためにはだんだんと頑張るだけではなく、知識も必要になってきています。可能な範囲でHTML、CSSの新しい情報は追っていくといざデバッグする時に役に立つと思われます。

polcaで支援した代わりにデザインのアドバイスをしてもらった話

2018-12-17T09:02:19+09:00

先日いつもどおりTwitterのTLを見ていると、polcaでmacを買いたいので支援をしてほしい、という企画が立っているのを見つけました。普段はあまり興味は無いので見ないのですが、その時はたまたまリンクをクリックして詳細を見てみました。それが下記です。

https://polca.jp/projects/6i8Waf68fh9

なぜ支援したか

僕はあまりこういう個人が何か買いたいから、というクラウドファインディング系は興味が無いのですが、この企画は見てすぐ「あ、支援しようかな」と思いました。理由は下記のような感じです。

未経験からプログラマになるまでずっと一緒にお勉強してきたPCがついに壊れました。

なんか僕は仕事柄PCが壊れるのに非常に恐怖感を持っているので、この時点で共感してしまいました。辛いなー、と…（一応常時家に開発できるPCが２つあるようにしていますが）。しかも利用用途が僕と同じくプログラミングだったということですし。

プログラミングの他に、デザインの勉強にも力を入れたいので馬力のあるPCが必要です。スキル高めて激安給料のブラック会社からも脱出したい。

なにかこうよく分からないけどPCがほしいという感じではなく、しっかり未来のことをちゃんと考えて先に進みたいんだな、という気持ちが伝わってきました。

デザイン一点その他ご希望あれば伺います

なんかよく「お礼に手紙書きます」とかなんの意味があるかよく分からないお礼が書かれていたりします。そういうのは全く興味が持てないのですが、今回はちゃんと普通に納品物があり完全にお互いWin-Winの関係になれるお礼でした。

このあたりを見て、ほとんど迷うこともなくすぐ支援をしました。

支援の内容

具体的には、デザインも勉強されている方ということだったのですが、僕がデザインがまったく良くわからないので、そのあたりちょっと見てもらえたらありがたいな、と感じました。

そのため、支援額は千円で、その金額の範囲内でよいのでこのCrieitをざっと見てもらって、気になる所があれば教えてほしい、という形にしました。金額もたいしたことがないので、余裕がある時にいつでも大丈夫です、という形にしました。

しばらくして返答があり、６件ほど気になるところと改善したところが良さそうな箇所のアドバイスをいただきました。しかもAdobe XDで簡単なイメージも作ってシェアまでしていただけました。例えば下記のようなアドバイスをいただきました。

トップページのヘッダーが長すぎるのでは　→　たしかに長すぎます…。その他そのあたりのパーツの調整案も頂きました。
Primaryカラー１色しか使っていないのでブルーに合うSecondaryカラーをワンポイントなどで使うようにしてみては？　→　全く考えてなかったので助かりました。今のデフォルトのSecondaryがグレーなのであまり使ってなかったんですよね…。ちゃんと黄色のclassを作ってやってみます。
新規登録/ログインが乱立している　→　たしかに見直したら乱立していました。誘導したい場面ではきっちりわかりやすく表示する、というのは何かで見かけて参考にしていたのですが、なにか勘違いして無駄に大量に配置してしまっていたようです。気づかせてもらえたので良かったです。
余白やフォントを調整したほうが良いのでは

なんにしろ、どれも早く修正したいなーと思うくらいには個人的にはありがたい情報でした。

まとめ

とりあえず僕はケチ＆心が狭い人間なので、あまり支援には興味がありません。でも、今回はすぐ支援しましたし、そういえば以前もコーヒーの購入はほとんど迷わず支援（というか購入）しました。

CODE COFFEEをいくつか飲んでみた

本気で支援が必要な方は、なぜ支援した方がいいのか分かりづらい企画をたてるより、こんな感じで普通にお互いにWin-Winとなるような、あたかも単なる商品の購入のような企画を立てた方が成立しやすいと思いますしみんなが幸せになれる気がします。そしてその人に対して好感が持てて応援したくなると思います。

今回の企画をたてていたのは @qsb3uy さんでした。プログラムとデザインが両方できるというのは素晴らしいことなので、きっとその知識が廻り廻ってより多くの人の役に立つことになるのだろうと思います。