えいのうにっき

誤字脱字・記述の誤りなどはこちら https://github.com/a-know/blog.a-know.me へお願いします

Pixela がダークモード表示に対応しました!(v1.16.0) #pixela

対応しましたー!

グラフのSVGをリクエストする際に appearance=dark を指定することで、ダークモードに合うような配色のSVGを得ることができます。ショートモード、折れ線グラフモードでも一緒に指定することができます。

  • https://pixe.la/v1/users/a-know-blog/graphs/page-views?appearance=dark
  • https://pixe.la/v1/users/a-know-blog/graphs/page-views?mode=short&appearance=dark
  • https://pixe.la/v1/users/a-know-blog/graphs/page-views?mode=line&appearance=dark

また、iframe などで埋め込んでもらうことを想定して用意しているシンプルモード mode=simple の場合、上記のような指定をする必要はなく、OSの設定をもとに自動で表示を切り替えてくれるので便利です。

  • https://pixe.la/v1/users/a-know-blog/graphs/page-views.html?mode=simple
  • https://pixe.la/v1/users/a-know-blog/graphs/page-views.html?mode=simple-short

これが利用されているのが、公認 iOS / iPad OS アプリである PixelaUIなんですね。なので、ダークモードに設定してある iPhone でグラフを表示させてみると、何もしなくてもダークモードに合った配色で表示されます。

f:id:a-know:20200315231405p:plain:w500

ダークモード対応、初めてやったんですが、

  • css だと @media (prefers-color-scheme: dark) { ... }
  • JavaScript だと window.matchMedia('(prefers-color-scheme: dark)').matchestruefalse か、で

簡単に対応できるんですねぇ。着手前は「大変そうだな〜」とだいぶ身構えていたんですが、結局一番たいへんだったのは SVG の配色調整でした。w

僕は普段はダークモードは使ってないのですが、利用されている方はぜひ、お試しくださいね〜。

Release v1.16.0 · a-know/Pixela · GitHub

そのほかのアップデート

これはアップデートというか仕様変更なのですが、HTML表示の際のページング( next / previous )がPixelaサポーター限定の機能となりました。

f:id:a-know:20200315231451p:plain:w600

最初に表示されるグラフデータはキャッシュに乗せやすい(=データストアのReadを節約させやすい)のですが、ページング後のデータはそれがしにくい(無理やりキャッシュに乗せても、実際にそれが活用される場面が少ない割に、他のキャッシュを追い出す可能性が高まってしまう)ことによるものです。過去のデータも見てニヤニヤしたい方は、ぜひ Patreon でのサポートをご検討くださいっ。

www.patreon.com