「Google Chrome 97」のオリジントライアルに追加されたWebTransportを早速触ってみたいと思います。

WebTransportとは・・・。

WebTransport is a protocol framework that enables clients constrained by the Web security model to communicate with a remote server using a secure multiplexed transport.

https://chromestatus.com/feature/4854144902889472

WebTransportは、HTTP/3プロトコルを双方向トランスポートとして使用するWebAPIです。これは、WebクライアントとHTTP/3サーバー間の双方向通信を目的としています。データグラムAPIを介した信頼性の低いデータ送信と、ストリームAPIを介した信頼性の高いデータ送信の両方をサポートします。

https://web.dev/webtransport/

なんだかよく分かりませんが、HTTP/3を使用したすごい転送規格です。
双方向ですし、multiplexed-transport？かっこいいですね。

きっとブラウザOSが更に進化していくとか、ブラウザ上でゲームがネイティブアプリかのように動作するだとか、もうブラウザの意味が変わる時代が来るのかもしれません。

内容自体は難解かつ複雑ですが、今回はサンプルを触るだけですので何も考えずにやってみようと思います。

サーバー準備。

「WebTransportの実験」によると、現時点では、WebTransportはまだ公開されていません。
「試してみましょう」の項目にもありますが、HTTP/3サーバーをローカルで準備して起動する必要があるとのこと。

JavaScriptクライアントは、以下のURLに用意してくれています。
https://googlechrome.github.io/samples/webtransport/client.html

HTTP/3サーバーとは？
となったところで、GoogleChrome/samplesのgithubのスクリプトの中にコメントで、

An example WebTransport over HTTP/3 server based on the aioquic library. 

とありました。

aioquic。

aioquicを検索してみるとすぐ出てきたので、githubからcloneしてきます。
https://github.com/aiortc/aioquic/

導入は README の通りに進めます。

親切なことに、ブラウザの起動方法やオプションの説明、test/ ディレクトリの下に .pem ファイルまで用意されています。(独自証明書の場合のハッシュの生成コマンドもあります。)

Chromeもこれぐらいやって欲しい

また、aioquic/exapmplesにHTTP/3のテスト用サンプルが置いてあります。
試してみたところ、サーバー起動とHTTP/3のサンプルスクリプトは動作したのですが、クライアントからWebTransportの接続が上手くいきませんでした。深追いはしてませんが、バージョンアップで何か変わったのかもしれません。

ということで、元のGoogleChrome/samplesに戻ります。

Chromiumからアクセス。

cloneしてきたGoogleChome/samplesからサーバー用スクリプトを起動します。

mv samples/webtransport/webtransport_server.py aioquic/
python3 webtransport_server.py tests/ssl_cert.pem tests/ssl_key.pem 

aioquicの説明の通り、Chromiumをコマンドから起動します。

chromium --enable-experimental-web-platform-features --ignore-certificate-errors-spki-list=BSQJ0jkQ7wwhR7KvPZ+DSNk2XTZ/ MS6xCbo9qu++VdQ= --origin-to-force-quic-on=localhost:4433 https://localhost:4433/

上の方で紹介したJavaScriptクライアントを開きます。
https://googlechrome.github.io/samples/webtransport/client.html

画面にある「Connect」を押し、以下のように表示されると接続成功です。

Initiating connection...
Connection ready.
Datagram writer ready.
Datagram reader ready.

お疲れさまでした。

sassをコンパイルする方法として、gulpを使っていますが、npm-scriptsが主流になってきています。npm-scriptsを使うメリットとして、記述がシンプルでバージョン依存が少なく共有がしやすいことが挙げられます。

今回はnpm-scriptsを使ってSass/Scssのコンパイルする方法についてまとめてみようと思います。

準備とSCSSをコンパイル

まずは任意のディレクトリにサンプルとして「sass_test」ディレクトリを作成し移動します。

mkdir sass_test
cd sass_test

今回使用するsassファイルを作成します。
ディレクトリは下記を想定しています。

sass_test
└resources
 └sass
  └style.scss
└dist
 └sass
  └style.css

「sass_test」の中でpackage.jsonを生成します。
「sass_test」に移動して、ターミナルで下記のコマンドを入力すると「package.json」が生成されます。
（質問は全てenterで大丈夫です）

npm init

sassのコンパイルとして、「Sass」をインストールします。

npm install sass --save-dev

package.jsonの「scripts」欄を次のように変更します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

↓

  "scripts": {
    "sass": "sass resources/sass/:dist/css/ --no-source-map --watch"
  },

sassをコンパイルするために下記を「sass_test」の階層で実行します。

npm run sass

「dist/css/」ディレクトリに「style.css」が生成されたと思います。
（終了するには[Ctrl + C]を押します。）
sassをコンパイルするのみならこれだけです。

自動でベンダープレフィックスを付与

自動でベンダープレフィックスを付与するために「autoprefixer」をインストールします。
合わせて「postcss」「postcss-cli」をインストールします。

npm install postcss postcss-cli autoprefixer --save-dev

複数のnpm-scriptsを実行するために「npm-run-all」をインストールします。

npm install npm-run-all --save-dev

ファイル変更の監視をするために「watch」をインストールします。

npm install watch --save-dev

package.jsonの「scripts」欄を次のように変更します。

  "scripts": {
    "all": "run-p watch",
    "watch": "watch 'run-s scss postcss' ./resources/sass",
    "scss": "sass resources/sass/:dist/css/ --no-source-map",
    "postcss": "postcss dist/css/style.css -o dist/css/style.css"
  },

pakcage.jsonと同じ階層に「postcss.config.js」を作成します。

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

そしてpakcage.jsonと同じ階層に「.browserslistrc」を作成します。
ブラウザリストはここで調整します。

last 2 versions
ie >= 11
Android >= 7

それではコンパイルしてみましょう。
「resources/sass/style.scss」に下記を記載します。

a{
  transition: 0.3s all;
  color: red;
  
  p{
    color: green;
  }
}

次にターミナルでpackage.jsonと同じ階層で下記を実行します。

npm run all

そうすると、「dist/css/style.css」に下記が出力されています。

a {
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  color: red;
}
a p {
  color: green;
}

無事にsassがベンダープレフィックスがついてコンパイルされていることが確認できました。
（終了するには[Ctrl + C]を押します。）

以上がnpm-scriptsを使ったsassのコンパイル方法をです。
読んでいただいた方の参考になればと思います！