のでポエムを書く。

現場はとても楽しく、常に和気あいあいとした雰囲気で終始笑いの耐えない空間でした。

スーパーなプレイヤー達がめっちゃ集まっているのは、発信者がスーパープレイヤーゆえなんだなぁと実感しました。

懇親会では何名かの方と変なテンションと勢いで話させていただきました。自覚していることだが、他人への自信の無さを隠すために馬鹿みたく明るく振る舞うのが常になっている。

一夜明けふと昨日のことを思い出すと、これだけは負けない・得意なことがすぐに浮かばない、何かしらの背景を持っていない自分が、すごく矮小で薄っぺらく稚拙に感じてしまった。

そんな気だるい気持ちのまま会社に向かうと、白杖を持った方を見かけた。声をかけようと思ったけれど自転車だったためにやめた。

もし声をかけたら「感謝されたのかな……?」と考えてみたが、感謝されることで救われてるのは自分なんじゃないかと思ってしまった。

自分は救われたいのではないか。

みたいなことを考えながら出社したら遅刻した。


本当は書くつもりなかったけど、 主催者に媚を売れると思って 書き始めました。(冗談だとわかった上で読み進めてください)

Image for post
Image for post

2019.06.09 (Sun) に行われた ON-SCREEN TYPOGRAPHY DAY に参加してきました。

#ostd2019 でTwitterのハッシュタグを追えば、他の方々の素敵なログやスケッチが確認できると思います。

Image for post
Image for post

以下セッション内容のあれこれ。
スケッチにおこすことを考えてなかったので記憶や記録を読み直しながら描きました。正味5時間ぐらいかかった。

〝タイポグラフィ〟を怖がらないために

カワセタケヒロ コンセプター/デザイナー

Image for post
Image for post
〝タイポグラフィ〟を怖がらないために

すごい人なのに気配を消してた。

美しいものを作るために“我々は何ができる”か

長谷川 弘佳 Art Director, Interface / Graphic Designer

Image for post
Image for post
美しいものを作るために“我々は何ができる”か

力こそパワー(努力の積み重ねによる実力)をひしひしと感じましたね。

バーティカル・グリッドでもっと深まるWebタイポグラフィ

後藤 健人 アートディレクター/デザイナー

Image for post
Image for post
バーティカル・グリッドでもっと深まるWebタイポグラフィ

丁寧な仕事に、身が引き締まりました。

GMOペパボをよろしくね(勝手につけた)

小久保 浩大郎 GMOペパボデザインマネージャー

Image for post
Image for post
GMOペパボをよろしくね(勝手につけた)

IAをちゃんと勉強したいなと思いました(LT関係なし)

オンスクリーンにおけるベアボーンタイポグラフィ

桝田 草一 ウェブフロントエンドデベロッパー / アクセシビリティエヴァンジェリスト

Image for post
Image for post
オンスクリーンにおけるベアボーンタイポグラフィ

エモ。

コンテキストをピクニックしよう

土屋 綾子 編集者/ディレクター

Image for post
Image for post
コンテキストをピクニックしよう

すごく素敵で心地良い時間でした。

そうして言葉は飛んでいく

有馬 トモユキ アートディレクター / デザイナー

Image for post
Image for post
そうして言葉は飛んでいく

キモかったので啓示感を出すために曼荼羅風にしました。(凄かった)

全セッションのレポート等は公式が何やら用意してくれると思います。

資料の撮影が禁止だったためただ文字にするのもなと思ってスケッチにおこしてみたけど、適当すぎたし何よりも字が汚い。

これじゃ伝えたいことが伝わらないね。

しかしこれは ON-SCREEN TYPOGRAPHY DAY イベントで語られたであろう本質を、「伝わらないこと」で表現してしまったのではないか?!(何を言ってるかわからないと思いますが、自分でも何を言ってるのかわかってないです。)

閑話休題

参加していた方は、デザイン・文字・出版関係が7割、ウェブ系が2, 3割みたいな印象を受けました。詳細はそのうち公式からアナウンスされるでしょう。

自分は完全に賑やかしのガヤ参加です。

タイポグラフィとはイベント名に入っているものの、コンテキストを前に進めていく・広げていくイベントだと思って参加していたので割とすんなり頭に入ってきた印象でした。

何故かというと ON-SCREEN TYPOGRAPHY DAY のメッセージからその言葉を紡いでいくことを感じ取っていたからだと思います。
更に言ってしまうと This is a web page. と何かしらの関係性を感じていたためでした。
そのことに言及した以下のツイート。

このことについてはどうやら主催者公式だったようです。

やっぱりな〜俺ってそういうとこ気づいちゃうんだよな〜

ここからこの記事の本編。

Image for post
Image for post

Afterhoursさんに行ってきました。
この記事の公開日に行きましたというかさっきです。

Afterhoursさんは当日の会場でコーヒーケータリングを提供をしてくださったお店です。

Image for post
Image for post

最高!!!美味しい!!!

Afterhoursさんのご主人の経歴がすごい上に謎すぎる。

イベントやセッションの内容については、他の方々がきっと素敵にまとめてくださるだろうと思っているので適当に書きなぐっています。

読み返したら多分死ぬ。


結論:URL参照の画像があるとライトモードに自動的に切り替わる。

下の画像のようにmacOSのアピアランスをダークに設定し、メールアプリでメールを開くとメールによって色が反転気味になることに遭遇したことはありませんか?

Image for post
Image for post
Image for post
Image for post

冒頭でも結論として挙げていますが、URL参照の画像があるとライトモードに自動的に切り替わります。

何がどうして自動的に判定されるかわからず数日困ったので誰かの助けになれば幸い。

また、macOSのアピアランスをダークに設定した上で以下の検証をメールアプリで確認しました。

  • 画像がインラインの透明svg/base64透明, 黒gif etc では自動判定が入らない。
  • 画像を添付して表示する場合は自動判定が入らない。
  • URL参照(http/https)の画像を配置することでライトモードになる。
  • メール開封の確認用などに埋め込まれているトラッキング画像でもライトモードになる。
  • テキストのコンテンツでライトモードにしたい場合は、1pxの透明画像を仕込むと良い。
  • 画像ありでダークモードにしたい場合の対応ができなさそう。 @media (prefers-color-scheme: dark) を利用しても効かない。

その他

macOSのアップデートでSafariがDark Mode CSS Supportに対応するとどのようになるかSafari Technology Previewを使って調べてみました。

結果としては「URL参照の画像の有無に関わらず自動判定されない」(勝手にされたら阿鼻叫喚である)

今後のSafariでダークモードに対応したい場合は @media (prefers-color-scheme: dark) を使いましょう。

Image for post
Image for post
Image for post
Image for post
左上から右にSafari, STP, Chrome。画像の有無に関わらずダークモードでもコンテンツは変化しない。
Image for post
Image for post
@media (prefers-color-scheme: dark) を利用した場合

Safari Technology Preview

  • macOSのアピアランスをダークモードにしていても画像あり・なしに関係なくコンテンツはダークモードにならない。
  • @media (prefers-color-scheme: dark) を利用できる。

Safari 12

  • macOSのアピアランスをダークモードにしていても画像あり・なしに関係なくコンテンツはダークモードにならない。
  • @media (prefers-color-scheme: dark) は利用できない。

Chrome

  • ver. 73からmacOSのダークモードに対応。
  • macOSのアピアランスをダークモードにしていても画像あり・なしに関係なくコンテンツはダークモードにならない。
  • @media (prefers-color-scheme: dark) は利用できない。
  • アプリケーションの枠のみmacOSのダークモードに対応している。

Firefox

  • ver. 62からmacOSのダークモードに対応。
  • macOSのアピアランスをダークモードにしていても画像あり・なしに関係なくコンテンツはダークモードにならない。
  • @media (prefers-color-scheme: dark) は利用できない。
  • アプリケーションの枠のみmacOSのダークモードに対応している。

About

Noriyuki Shimizu

work in UNIBA INC. http://uniba.jp / Front End Engineer ? / http://nor.ph

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store