00:05
はい、6月16日木曜日ですね。時刻は朝9時を回りました。今日の東京はですね、日が続き曇っています。今日も雨が降るんだろうなぁと思っています。
はい、おはようございます。株式会社ゆめみのキースことくわはるです。 本日も朝活を始めていきたいなぁと思っております。
はい、えーとですね、今回は、また意図にありますけど、Tailwind CSSのバージョン3.1が出たので、それの追加された機能のまとめがあったので、それを読んでいこうかと。
で、もう一個ですね、えっと、さっきのWWDC 22ですね。
ところで、WebGit Features in Safari 16 Betaっていうのが出たので、なんかその辺の記事を読んでみたいかなと思いました。
はい、WWDC見てなかったので、改めてこの記事を見たいなと。やっぱりウェブエンジニアなので、そのSafariのことは一応注目しておこうかなと思っておりますという感じですね。
はい、では早速一つ目ですけども、Tailwind CSSの方からやっていこうかなと思いますが、
はい、今回の記事を書いていただいた方っていうのは、データアナリティクス事業本部サービスソリューション部の北川さんという方ですね。
はい、どこの企業なのか書いてないので、ちょっとすいません。僕が存じるだけでなくて申し訳ないんですけども。
あ、ごめんなさいね。この記事がデベロッパーさん用だってくらめそうですね。はい、というところでした。
おーい、あ、やめたろさんとたべちんさんですね。ご参加ありがとうございます。
タイトルにある通り、Tailwind CSSのバージョン3.1新機能のまとめ記事と、Safari 16β版の公式サイトのまとめがあるので、その辺ちょっと読んでいこうかなと思います。
はい、お相様です。Tailwind CSSから入りますけども、これは何かっていうと、Utility Firstが特徴のCSSのフレームワークというものになりますね。
Utility Firstっていうと、いわゆる機能群が固まっただけのやつですね。
例えばMUIとかBootstrapみたいながっつりちゃんとしたCSSフレームってわけではないですね。
特定のクラスをつけると、そのクラスに適応したUtilityの機能がインストールできる、使えますよっていうだけのやつで、それの塊みたいなもんですね。
はい、なので全体デザインとかはしっかり自分たちでやらなきゃいけないっていうようなやつですけど、その他に柔軟性とか幅広い表現力があるので、そういうところで結構注目をされてるっていうところだと思います。
はい、というところですね。
じゃあ早速読んでいきましょう。
ちょっと前ですけど、Tailwindowのバージョン3.1っていうのが、機能がいろいろ入ったらしいですね。
3.1で結構機能が追加されたらしいんで、そこは注目されてますね。
追加された機能が以下になります。
1,2,3,4,5,6,7,8,9,10個ぐらいありますね。
はい、あるんですけど、1個1個見てみますと、まずですね、First Party TypeScript Typeっていうので、
First PartyのTypeScriptのタイプが入ったらしいですね。
続いて、Built-in Support for CSS Imports in the CLIということで、
CLIでのCSSインポートのBuilt-in Supportっていうのが入ったらしいです。
続いて、Change Color Opacity when using the Theme Functionということで、
03:00
関数使用時の色の不透明度っていうのが変更になるそうですね。
続いて、Easier CSS Variable Configurationですね。
簡単なCSSの可変色を設定できますよということですね。
続いて、Border Spacing Utilitiesなので、
ボーダーの前後の間隔かな、余白とかの制御ができるらしいですね。
続いて、Enabled and Optional Variantsということで、
有効とオプションのバリアントって言いますね。
僕があまりテールウィンドウを触ってないんですけど、そういうのがあるんですね。
次、Preferred Contrast Variantsということで、
コントラストを優先するバリアントを設定できると。
あと、Style Native Dialog Backdropですね。
ダイアログ時とか背景のスタイルっていうのが設定できると。
最後ですね、Arbitrary Values but for Variantsということで、
任意のバリアント値っていうのを指定できますよっていうことですね。
これを一個一個読んでいこうかなと思います。
一つ目の、First Party Type Script Typeっていうことですけど、
Tailwind.config.jsに型を定義することができるようになったってことですね。
なるほどね。定義の設定も1行追加するだけで良いので楽ですよって言ってますね。
Tailwind.cssの頭のところにコメントアウトですけど、
at typeでimport tailwind.css.configみたいなのを書いてあげると、
TypeScriptの型定義でconfig.jsっていうのを書けますよっていうことでした。
ちょっと地味なとこですけど、
やっぱり僕らTypeScript Firstでも今開発をしているので、
その辺はちょっとありがたいなってことですね。
続いて、CLIでのCSSインポートのBuilt-in Supportが入りましたと。
これは多分タイトルの通りですね。
CLIツールを使っていた場合に、
そのPostCSS-Importっていうのが組み込まれるようになったので、
CSSのファイル整理っていうのをより簡潔に行うことができるようになりましたよってことでした。
これだけだといいですね。
続いて、関数使用時の色の不透明度の変更というところです。
Tailwindっていうのはテーマ関数機能っていうのをもちろん提供していて、
そのスタイル値を変数として定義することができますと。
ただ制限として取得した色の値の透明度っていうのを調整することが今までできなかったんですけど、
それが今回スラッシュ構文を使用することによって対応可能になりましたよと。
この設定はもちろんTailwind Config.jsでも指定可能になります。
書き方的には、いつも通りドットクラスのセレクターを書いて、
括弧でプロパティを設定するんですけど、
例えばそのバックグラウンドカラーの項でテーマっていう関数を実行したとすると、
その中でカラーグレイ100とかですね、設定したんですけど、
その後ろにスラッシュ50%とかってやると50%の透明度ができますよっていうような書き方になっています。
これありがたいですね。
Tailwindのデフォルトのカラーズドット何たらドット数字みたいなものですね。
それの後ろにスペーススラッシュ、スペースの%を指定することで、
06:02
不透明度っていうのを設定できるようになったっていう感じです。
これはその代わり関数使用時なんで、例えばテーマ関数とかあったら、
そのテーマっていう関数の中でしか実行できないってところがミソかもしれないですけど。
でもこれができることによってTailwindの不透明度っていうのが、
割と今までめんどくさかったのがスパッといけるようになったので、
これちょっとありがたいですね。
続いて簡単なCSSの可変色を設定できるようになりましたよっていうところですね。
CSS変数の設定をする際に、Tailwind Config.jsに関数を使用する代わりに、
フォーマットを使用して色を定義できるようになりましたよと。
これは正直使用頻度低いのかなっていうふうにこの人書かれてまして、
僕も多分そうかなと思いますね。
可変色は都度都度僕らの方で設定すると思いますので、
Config.jsにわざわざ格グレベルのことはあんましてないんじゃないかなと思います。
一応できるようになったよってことですね。
続いての新機能はボーダー間隔の制御ってやつですね。
ボーダープロパティに新しいユーティリティが追加されて、
そのテーブル間の境界線の調整っていうのができるようになりましたよと。
ボーダースペーシングとかボーダーセパレートとかプロパティを使えばいいですよってことですね。
サンプルソースコード的にはテーブルタグの中でやってるんですけど、
ボーダーセパレートとかボーダースペーシングにとかを設定した後に、
その子供の中の例えばTHとかTDの中でのクラス設定で、
ボーダーとボーダーステイト600とかボーダーステイト700とかっていうような値を設定して、
余白調整とかができるようになっているってことですね。
見てる感じだとテーブル間だけなのかなっていうところですね。
他のところのボーダーじゃあんま使えないのかなっていう気がしていて、
ちょっと使ってないからわからないんですけど、
もしテーブルオンリーだとしたらそんなに使用頻度高くないのかなっていう気はしました。
現在あんまりHTMLでテーブルタグ書くことってそんなに多くなくなったなっていう印象が強いので、
もちろん完全にないってわけではないのであれですけどね。
というところでした。
続いて有効とオプションのバリアントっていうことですね。
これ日本語になってるからわかりづらいですけど、
コロンイネーブルとコロンオプショナルの新しいバリアントが擬似クラスに追加されましたよっていう話ですね。
最初コロンイネーブルの方ですけど、
TailwindではDisabledのボタンを実装するときに、
Hoverしたときのスタイル制御するのに結構手間がかかりましたよね。
公式の例でありますけど、
Disabled時にHoverしたときの処理を追加する手間がやっぱ入ってたということですね。
クラスの中にDisabledコロン、Hoverコロン、BgIndigo500みたいな設定をしてたと思いますね。
あとはHoverコロン、BgIndigo400とかっていうので、
一個一個DisabledとかHoverのところのクラスをわーっといちいちいち書いてたって感じですね。
なんですけど、これをEnabledっていうのを使用することによって、
ちょっと書き方が変わるようになりましたよとかですね。
09:02
Disabled時にHoverしてもスタイルを適用しないようにすることもできますよってことでした。
例えば、バックグラウンドにクラスですね、BgIndigo500ってのを設定しておいて、
その後ろですね、HoverコロンのEnabledのコロンのBgIndigo400とかを設定しておくとかで、
こういう書き方をするそうですね。
重ねて書いていくっていうところになると思います。
でやると、Hover時にDisabledの時にHoverしてもスタイルを適用しないようにできますよっていう感じですね。
はい、っていうのがありがたいなってことでした。
ちょっとまあこれもちょっと口頭になってしまうし、
あのTailwindって皆さんご存知ですけど、クラス名書き出すとすごい長くなるんで、
その名前をばーっと言われてもちょっと難しいかもしれないので、
後ほどちょっとコード見てみてください。
あの公式サイトも既に更新されてるっぽいので、見ていただければなと思います。
はい、続いてオプショナルですね。
オプショナルですけど、こちらは兄弟要素ですね。
いわゆるピアクラスっていうのを組み合わせて、
フォームが必須であるかないかっていうのを認識させることができますよってことでした。
はい、公式の例ではフォームタグを書いてますね。
フォームの中にインプット要素が2つあって、
その下にそのインプット要素に対してのリクワイヤードかどうかっていうところのテキストがDivタグで書いてますね。
っていうようなものが1つ、1個ずつなんで2つ書いてある感じです。
で、上の方のインプットタイプのところにはリクワイヤードっていうアトリビューズが設定されてて、
下の方は設定されてない状態です。
この時にその下にある必須ですよっていうのを明示する文言があって、
そのDivタグのクラスの中にpeer-optional-hiddenみたいなふうに書いてあるんですね。
で、下の方も同様です。
下の要素のところも同じですね。
で、こうなった場合には上のフォームの方はインプット要素の中にリクワイヤードが入ってしまっているので、
下の方のそのpeer-optional-hiddenってやってたとしても必須なので基本的には表示されてしまいますけど、
下の方はリクワイヤードが入っていないのでpeer-optional-hiddenとかつけるとリクワイヤードって文言が消えてくれるよってことですね。
はい、っていうのでオプショナル要素っていうのが追加になりましたよってことでした。
基本的にはその兄弟要素、peerクラスっていうのを組み合わせて使うものだと思うので、
peer-optionalがベース的な使い方になるんじゃないかなと思います。
これあるおかげで、いちいち条件分岐を書かなくてよくなったっていうのは結構便利かなと思いますね。
続いてですけど、コントラストを優先するバリアントってやつですね。
こちらは閲覧するユーザーっていうのが、例えばOSSの設定とかによってコントラストの強弱を変更した場合とかがあると思いますけど、
その時にcontrast-moreとかcontrast-lessとかを使用することでデザインを変更することができるようになりましたよってことですね。
ユーザー環境のことを加味した機能が追加になっているってことだそうです。
12:02
続きまして、ダイアログ時と背景のスタイルってやつですね。
こちらはバックドロップっていうものを使用することで、ダイアログが開いているときに背景にスタイルを指定することができるようになりましたよってことですね。
例のソースコード的にはダイアログタグを使ってますね。
その中のクラスにバックドロップコロンのbgstate900みたいな感じの設定をしたりします。
というので設定ができるようになりましたよと。
これ結構ありがたいですね。なるほど。
背景スタイル、ダイアログ地味に面倒くさかったりするので、これバックドロップコロンで色を指定するというだけでいけると。
しかも先ほど出てきたスラッシュ高分も使えるっぽいですね。
スラッシュ50とかで設定すると多分これ不透明でできるのかなと思うので。
これもこれで結構ありがたいですね。
続きまして、あと何個だ。あともう2つかな。
あと1つか。
はい、これでラストですね。任意のバリアント値を指定できますよってことです。
その任意のバリアント値っていうものが3個ぐらいあるので厳密には3つですね。
1つ目がadvariant APIっていうものですね。
で、テイルウィンドっていうのはフォーカスとかアクティブとかやなの機能クエリなどとかですね。
をadvariant関数を使用して登録することができますよってことですね。
これはさすがにちょっとソースコードに述べても難しいと思うのでこれごめんなさい。
ソースコード見てください。サンプルコードですね。
見たら分かると思います。
とにかくadvariant関数というのを使うと、フォーカスとかアクティブとかの機能クエリとかも使えるようになりますよと感じですね。
例えばadvariantの括弧で台式数にサードとかで設定してあげた後ろにCSSの設定としてmnschild3とかっていう風に使ったりするというのでバリアントを使いますよって感じです。
こういうのがあともう2つぐらいソースコードばーっと書いてあったりするので、
この辺見てもらうとなるほどねってなると思います。
はい。続いてarbitrary valuesっていうところですね。
これはテイルウィンドでは角括弧を使用することでより詳細な単位でスタイルの数値を指定することができますと。
こちらも結構使用頻度高いものになるんじゃないかなっていうところですね。
はい。
特にこれ以上でも以下でもないので角括弧ですね。
使ってスタイルの値を細かく設定してくださいってことでした。
サンプル的には多分ピクセルで指定すると思うんですけど、これってパーセントとかいろんな単位が使えるのかっていうのがちょっと気になりますね。
ちょっと僕はまだ触ってないのであれですけど。
はい。そういうものがあるそうですね。
で、ラストですね。arbitrary variantsってものです。
はい。
今回のバージョン3.1のアップデートによって定規のように値の部分ではなくてバリアントの部分を直接指定できるようにもなりましたよってですね。
これによってコンポーネントの親要素からスタイリングすることも結構容易になりましたっていうところですね。
はい。
なるほどです。分かりました。
で、一応今ので以上で、まとめとしてTWCSSのバージョン3.1の変更点をまとめたと。
15:02
で、今回この筆者の方の個人的な考えでいくと、公式の使用例が複雑すぎてどんな値が、スタイルが立っているのかを理解するのが結構大変だったらしいですね。
はい。
またHTMLのダイアログ要素とか正直知らなかった方も多分、まあそうですよね。
予期せぬ知識の吸収がブログを通じたということを以前のダウンロードで改めて感じましたっていうので締めてますね。
はい。っていうところでした。
以上TWCSSのバージョン3.1ですね。
はい。結構地味な回収から割とこれありがたいなっていうものをいくつかあったので、
TWCSS使われている方はこれ普通にバージョン3.1に上げることも一択だと思いますね。
ぜひ上げて使ってみたらいいんじゃないかなと思ったりしました。
はい。
じゃあ前半パートは今のでTWCSSの話は以上で、後半パートですね。
えーと、何だっけ。
そうですね。アップルが出しているニュースフロムWWDC22ですね。
WebKit Features in Safari 16 Betaっていう記事ですね。
はい。ちょっと僕がWWDC22を見てなかったので、えーと、それをなんか今ざっと情報を集めてたんですけど、
その中のやっぱりSafariの話ですね。
はい。Safari 16 BetaのWebKit Featuresっていうのが書いてあったので、そこをちょっと気になるなっていう感じですね。
なんかちらっと見た感じそのPush APIの話が見えたので引っかかったんですけど、
まあその辺をちょっと読んでいこうかなと思ってます。
はい。
で、えーと、もちろん全文英語なので、えーと、翻訳しつつ読むのでちょっとラグがありますけど少々お待ちください。
はい。
ではちょっと読んでいきたいと思います。
はい。WebKitっていうのは今年Safari 15.2、Safari 15.4、Safari 15.5を含むWebKitブラウザーで160人以上の新機能と改良を提供して大きな成果を上げましたと。
はい。すいません。僕Safariをメインで使わないユーザーなのでそんなに変更あったんやっていう感じですね。
ちょっとあの不勉強で申し訳ないです。
で、今年前半の機能にはダイアログ要素とか遅延ロードとかインナートとかコロンのハズ関数とか疑似クラスですね。
とか新しいViewport単位、またCascade Layers、フォーカス歌詞とかアクセントカラー、外観カラーフォントのフォントパレットとか。
はい。Broadcast Channel、WebLogs API、ファイルシステムアクセスAPI、あ、そうなんや。ここまでいけたんや。
で、Webアセンブリーの強化、キャンバスにおけるDisplayP3のサポート、COOPおよびCEPへの追加、CSSの自動補完機能の改善、
Webインスペクターにおける新しいCSS変数のツーリングなどなど、もっと多くの機能が含まれていますっていうけど、結構変わったんですね。前半時点で。
はあ、知らんかったわ。ちょっとSafariに興味持ち始めちゃいましたね。今ので。
こんな改善したんですね。なんか結構SafariってWebに対して消極的というか、あまり強力的じゃない印象がすごい強かったんですけど、こんなSafariが
機能変わってたり進化しているのはちょっと意外でしたね。えー。はい、ちょっと僕のステレオタイプが強いかもしれないです。
18:02
で、本日Safari 16 Betaに搭載される主なWebテクノロジーを発表できることを嬉しく思います。
で、Appleデベロッパープログラムのメンバーの方はMac OS VenturerとiOSまたはiPad OS 16のデベロッパーベータをインストールすることで、本日からSafari 16をテストすることができますというふうに書いてます。
なるほどな。いや、プレゼンがうまいな。すでにちょっと僕Safariのこの新機能についてワクワクしているので、なんかすでにやられている感がすごいですけど。
はい。じゃあ続いて読んでいきたいと思います。最初はWebインスペクターエクステンションですね。
はい。Safari 16ではWebインスペクターエクステンションがサポートされて、Safariに組み込まれているブラウザ開発ツールというのを拡張できるようになりました。
これはパワフルなサードパーティーのフレームワークやサービスを使用する場合に特に便利です。
で、あなたのチームはマリアクトとかアングラ、Vue、Emberとかを使っているかもしれません。残念ながらEmberを使っているユーザーは世界でももう数パーセントしかいないのでほぼいないと思うんですけどね。
まあいいや、それは余談でした。
人気のあるテストスイートとか、もとはその他のデベロッパーサービスも使っているかもしれません。
で、Safari Webインスペクターエクステンションというのを使用すると、これらのフレームワークやサービスのデベロッパーツールの拡張機能をインストールして、それらを使った開発をより早く、より簡単に行うことができるようになります。
このようなエクステンションはこの秋にApp Storeで公開される予定です。
個人的には今この話だけでいくと、クロームに追いついてきたのかなという印象しか、ごめんなさい、ちょっとなかったですね。
人気のあるサードパーティーのフレームワークやサービスの拡張機能だけがWebインスペクターエクステンションとのエキサイティングな使い方ではありません。
開発者ツールの小さな強化というのはワークフローに大きな違いをもたらすことがよくあります。
そのような拡張機能を創造し作成するのはあなたが特に最適な人物かもしれませんね。
Web拡張機能はHTML、CSS、JavaScriptから作られており、Web開発者にとって最適なプロジェクトです。
じゃあ僕らでも全然手に触れそうですね。
サファリウェブエクステンションの作成方法やクリックスタートテンプレートからの作成方法や既存のエクステンションをサファリ用に変換する方法など、
およびApp Store用にパッケージ化する方法についてはTikTok Build & Deploy Safari Extensionという記事があるのでそちらを見てくださいということでした。
サファリのエクステンションは確かに作ったことないので一応知るだけ知っておきたいなと思いました。
どれだけ便利になるのかちょっと気になったりしますので。
もしそれでChromeと同等の拡張性だったり機能があったりするとなると、
あとはブラウザーが重くないかどうかみたいなところが次の課題になってくる。
そうするとChrome負けちゃう可能性があるので意外とこれ無視できないかもしれないなという僕の感覚ですね。
続いて、
サファリウェブインスペクターエクステンションズというのは他のブラウザーのデベロッパーツールエクステンションの同じJavaScript APIを使って作成されています。
21:01
このためお気に入りのデベロッパーツールエクステンションの作成者はそれらを簡単にサファリに移植することもできますと既に書いていっちゃう。
なるほど。
移植できると言ってますね。
ウェブインスペクターエクステンションズというのはiOS、iPadOS、MacOS間で有効になっている拡張機能を同期する機能などサファリウェブエクステンションズのその他の改善点にも加わります。
なるほどね。同期もちゃんとそこは生きているってことですね。
結構本気出してサファリの進化に乗り込んできた感がすごいですね。
なるほどです。
続きましてコンテナクエリーというやつですね。
このコンテナクエリーというのはCSSのクエリーの話かなと思いますね。
ちょっと読んでいきますが、様々なブラウザのエンジニアが何年もかけて実現可能かどうかを検討した結果コンテナクエリーというのはついに登場しましたよと。
メディアクエリーと同様にコンテナクエリーというのはビューポートのサイズではなくコンテナのサイズに基づいてウェブ上の特定のアイテムのレイアウトやスタイルを調整することを可能にしますと。
デザインシステムで利用可能なコンポーネントを作成するための貴重なツールになるでしょうと言ってますね。
はいはいはいはいなるほどですね。
メディアクエリーと同様なものにコンテナクエリーというのがあるんですけどそこのサポートが入ったってことですね。
なるほどです。
僕実はコンテナクエリーを全然使ったことはないっていうか、これサーリン独自の機能かな。
わかんないですけど。
っていうのが入ってるのでもうこれちょっと気になりますね。
確かにメディアクエリーというのはビューポート限定なんですけどコンテナ単位でクエリーを設定できるっていうのは結構面白い話ですね。
やっぱどんどんブラウザーとかウェブの話ってどんどんコンポーネントっていうところに割と重きを置き始めたなって印象があって。
この前読んだE2Eフレームワークですね。
サイプレスとかもそうですしプレイライトもそうですけどコンポーネントのテストっていうのもどんどん導入されてきているので、
今画面ではなくてコンポーネントっていう単位で物事をウェブは見ていくっていうような流れがなんとなくあるのかなというふうに今読んでて感じましたね。
はい。
続きますね。
Safari 16ではサイズクエリーとコンテナクエリーユニットっていうのをサポートしていますと。
サイズクエリーっていうのはウェブディベロッパーがコンテナクエリーについて話すときに想像するもので、
コンテナが特定のサイズである場合にのみ適用されるCSSを記述するチャンスになりますよというのがサイズクエリーですね。
スタイルクエリーの他のアイディアっていうのも将来的なものとしてコンテナクエリーの一部として議論されていますと。
なんたらクエリーがいっぱい出てきてそろそろ脳が崩壊しそうです。
コンテナクエリーの単位っていうのはビューポート単位にちょっと似てるんですけど、
ビューポートではなくてクエリーコンテナの寸法に相対する長さっていうのを指定しますと。
相対的な値なんですね。
はい。
いくつか、今表が書いてあってですね。
見せられれば一番いいんですけど、ユニットではCQWとかCQH、CQじゃない、コンテナクエリーの逆ですね。
24:05
のWとHなのでウィズスとハイトですねとか。
あとコンテナクエリーIとかコンテナクエリーBですね。
これはインラインとブロックの単位のことですね。
最後CQminとCQmaxですね。
これも単純にminmaxと同じだと思います。
それぞれ1%はクエリーコンテナホゲホゲって感じなので、
クエリーコンテナの例えば横幅とか縦幅の1%から指定できるよっていうような感じですね。
インラインサイエンスも同様ですみたいな感じですね。
というのでコンテナクエリーの値を指定するっていうのがコンテナクエリーっていう機能になるそうですね。
これどうなんだろうな。
コンポーネント単位でのコンテナ単位でクエリーを指定して、
画面幅サイズ指定できるっていうのは個人的にはかなりありがたいなと思っていて、
レスポンシブの対応するときにやっぱりいくら何でもメディアクエリーばーっといっぱい書くじゃないですか。
画面単位で書くんですけど、
結局画面サイズによってこのコンポーネントとかこのパーツもやっぱり制御したいなってなって、
その都度その都度メディアクエリーをガーって書いていったんですけど、
メディアクエリーは基本的には画面単位だけになって、
今後そのパーツとかコンポーネント単位ではコンテナクエリーを使うっていうのがいけるんであればすごくありがたいなって思いますね。
やっぱり用途がはっきりしますし、
CSSのコードミルとしても僕らとしては可動性も上がると思うので、
より制御しやすいというか設計がしっかりするなっていう印象があるので、
コンテナクエリーはすごくありがたいですね。
続きまして、
Mac OSのためのWeb Pushっていうところですね。
この辺からちょっと気になるワードが出てきますね。
残り時間あと4分ぐらいなので、
いけるところまで読んで、
続きは明日にしようかなと思いますね。
Mac OSのためのWeb Pushです。
Mac OS Venture、新しいバージョンですね。
のSafari 16にWeb Pushがついに登場します。
やっと入りましたね。
もう待望のWeb Pushですね。
この機能を使えば、あなたのウェブサイトやウェブアプリケーションのユーザーに通知をリモートで送ることができ、
またSafariが起動していないときでも通知を配信できます。
しかもその通知はSafariが起動していないときでも配信されます。
待ってたんですよ。
これが待ってたんですよ。
やっとこれでPWAの対応ができるようになったという感じがありますね。
IEもちょうどよく信じてくれるので、とてもありがたい話です。
この機能は他のブラウザーでおなじみのWeb標準の組み合わせも使われています。
なのでPush APIとNotifications API、そしてService Workerですね。
というものがちゃんと組み込まれています。
やるとなったらやっぱりしっかり実装してくれたって感じですね。
ユーザーはまずボタンをクリックするなどジェスチャーで関心を示すことで通知の受信を許可します。
次にサイトやアプリが通知を送信する許可を求めるプロンプトが表示されます。
27:03
ユーザーはNotifications Centerで通知の表示と管理を行い、
Notifications Settingsでスタイリングのカスタマイズやウェブサイトごとの通知の停止も行うことができるようになります。
業界のベストプラクティスに従って
ウェブアプリまたはウェブサイトにWeb Pushを実装している場合は
サファリで自動的に機能しますよと。
ただしブラウザ検出によってサファリを除外している場合は
機能検出に切り替えて動作させる必要がありますと。
やっぱりわかってますね。
Push通知の機能を実装するときはどうやったって
ユーザーエージェントとかを見て
これサファリのユーザーだなという時に
サファリを除外していたというのを実装したことがあるので
その辺はやっぱりアップルも自覚はしてたってことですね。
サファリのWeb Pushっていうのは
全てのMacとiOSデバイスのネイティブプッシュを強化する
同じApple Push Notification Serviceっていうのを使ってますと。
サーバーでプッシュエンドポイントっていうのを厳密に管理する場合は
push.apple.comの任意のサブドメインからのURLを許可するようにしてくださいということですね。
アップルデベロッパープログラムのメンバーであれば
メンバーである必要はないですよって言ってますね。
なるほどでした。
特定のサブドメインっていうところを許可することを注意してくださいということですね。
2023年のiOSとiPadOSのWeb Pushに期待してくださいってことですね。
そこは期待します。
本当にWeb Pushの話はずっと
個人的には注目したし
なんだかんだお仕事をするときにお客さんからやるプッシュ通知の話って
やっぱり頻度高いんですよね。しょっちゅう言われるので。
これは本当にありがたいですね。
大体日本人のiPhoneユーザーの過半数がiPhoneユーザーなので
Safariは僕らWebエンジニアとしてはもう切っても切れない関係なので
そこにプッシュ通知ってそれはそうだよねって話になるので
本当にありがたいですね。
続いてSubgridですね。
多分これ読んで時間切れになる気がします。
CSSグリッドっていうのが5年以上前の2017年3月に
リリースというか公開されまして
Web上のレイアウトデザインで可能なことに革命を起こしましたと。
そうなんですよね。
グリッドっていうのは結構革命に近いところはありますね。
個人的には別に
Flexboxでも良くない感はなくはないんですけど
でもやっぱりグリッドはグリッドで便利ですよね。
Subgridっていうのはそのグリッドをさらにレベルアップさせて
グリッドコンテナの孫をそのグリッド上に
簡単に配置する方法を提供しますと。
これによってHTML構造に制約されることなく
複雑なレイアウトでもアイテムを並べることができるようになりましたよと。
さらにSafariのグリッドインスペクターでは
好きなだけグリッドのオーバーレイをオンにすることができるので
サブグリッドをコーディングするサイトにも特に役に立ちますよ
という風に言ってますね。
CSS周りもちゃんと導入入ったんですね。
なるほどです。
30:00
じゃあちょっと30分きたので
ちなみにセクションのタイトルが
Flexbox Inspectorってところです。
すごく読みたいんですけど
我慢して明日に回したいと思います。
じゃあ今日の朝活動はこちらで以上にしたいと思います。
割とSafariの進化に僕はだいぶワクワクしたんですけど
今後どうなるかっていう感じはありますね。
というところで
本日の朝活動はこちらで以上にしたいなと思います。
ご参加いただいた皆さん大変にありがとうございました。
また明日もちょっとゆるーく読んでいきますので
ゆるりとお付き合いいただければ幸いです。
じゃあ本日も頑張っていきましょう。
お疲れ様でした。
