memoこの広告は、90日以上更新していないブログに表示しています。系の細かいネタを投下します。そのまま使っています。リンク切れになってしまいます。なると、ひどいと以下のようなってしまいます。デフォルトアイコンを設定するようにしたいところです。アクセスしてみないと取得できるのかどうかわかりません。イベントをトリガーしてデフォルト画像にフォールバックしています。やっていてもう少し複雑ですが、こんな感じのイメージです。実際のコードは以下です。https://github.com/adventar/adventar/blob/c175ac9bd7fd9c12a74bd86202129394ba13e41f/frontend/components/UserIcon.vueこれでさっきの画面は以下のようになります。呼び出し待ちなどにローディングを表示するのはユーザーに状況を伝えるのに重要なアクションですが、ローディングを表示するのはできるだけ小さい範囲に留めるようにしています。結果を待たないといけないので、返ってくるまでしばらくラグが発生します。そのとき全画面ローディングにしてもいいのですが、以下のように、必要な部分だけをローディングにすることで、可能な限りユーザーに速く画面を見せます。8日目の記事に書いたのですが、最初のログイン処理にやや時間がかかってしまうため、その間ローディングを出したいのですが、これもログイン情報が必要なところは多くないので、必要なところだけローディングにして体験を損ねないようにしています。これでだいぶ初期表示が速くなり、体験がよくなります。吹き出しの位置のこだわりこれは本当に細かいのですが、カレンダーで登録情報を編集するポップアップがあるのですが、この吹き出しの位置に微妙なこだわりがあって、端の登録を押したとき、スマホなどの画面幅が狭い場合は以下のようになります。可能な限り選択した吹き出しに近い位置に出して、吹き出しの三角は選択したセルを指します。画面幅が広いデバイスで見た場合は左右に余白ができるので、端のセルでも中央にポップアップを表示したいところです。書いてみると当たり前の動きな動きすぎてなんでこれを紹介しているのか自分でもよくわからなくなってきましたが、この動作をあらゆる画面幅で動作するように実装するのが思いの他大変だったので紹介したくなっただけです。実装を見返してみると色々ハードコーディングしてあったりして泥臭くてだいぶひどい感じですが、がんばった後が見られますね...。本当に細かすぎてすいません。オープンソースで公開した話を書こうと思います。