ハイライト
2週間前にプレイグラウンドをリリースしました。今週はフォローアップ作業として、完成と呼ぶ前に調整が必要だった3つの粗削りな部分に対応しました。cookieがRFC 6265に正しく準拠するようになり、展開ボタンはグリッドのセルを広げるのではなく、responseを実際のフルスクリーンオーバーレイで表示するようになり、全体がスマートフォンでもようやく動作するようになりました。
アップデート内容
cookieがRFC 6265に準拠
cookieジャーには、2週間にわたり目立たないバグが存在していました。アップストリームのサイトは、cookieをサブドメインに一致させるために Set-Cookie: ...; Domain=.example.com を送信します（先頭のドットは「このcookieはApexドメインとすべてのサブドメインに適用される」ことを意味します）。当社のパーサーはそのドットを取り除いてしまい、Domain属性が設定されていたという事実自体を見失っていました。その結果、ジャーはホスト限定のcookie（Domain属性なし）とドメインcookieの違いを区別できなくなっていました。目に見える影響は以下の2つです。
- 生ビューが
Domain=example.com（ドットなし）を出力していたため、cookieをcURLコマンドにコピーした際、受信側のサイトがそれをホスト限定として扱い、サブドメインに送信しなくなっていました。 - Browser製品のcookie引き渡しは、ブラウザにどの種類のcookieをインストールするかを決定するために脆弱な推測に依存しており、同じジャー内にApexドメインとサブドメインが混在している場合に誤動作していました。
解析されたすべてのcookieに hostOnly booleanを追加しました。ドットの有無にかかわらずDomain属性が存在する場合は hostOnly: false を意味し、cookieはホストとそのサブドメインに一致します。Domain属性がない場合は hostOnly: true を意味し、cookieは正確なホストのみに固定されます。生ビューはドメインcookieに対して Domain=.example.com を出力し、ホスト限定のcookieに対してはDomainを完全に省略するため、ジャーからコピーしたcookieはラウンドトリップ後も正しく機能します。解析済みビューでは、ホスト限定の行に小さな HO バッジが表示されますが、実際に観察してみると、これは稀なケースであることが分かります。修正前に保存された既存のジャーは、古い広範な一致動作を維持するため、データが暗黙的に失われることはありません。
展開モードが真のフルスクリーンオーバーレイに
従来の展開ボタンは、ドキュメントフロー内でresponseカードを引き伸ばしていました。そのため、縦に長いresponseがあるとページの高さが増し、bodyにスクロールバーが表示され、切り替え時にresponseの上にあるrequestパネルがわずかにずれていました。さらに、responseペイン自体が480〜560ピクセルに制限されていたため、1440pのモニターでは、深いJSONツリーの下にカードの余白が残ってしまっていました。
現在は、サイドバーの右端からビューポートの端まで、上から下まで固定された position: fixed のオーバーレイになっています。bodyには overflow: hidden が適用され、オーバーレイの背面でページがスクロールしなくなります。オーバーレイ内部のアクティブなペインは calc(100vh - 280px) を使用し、cookieジャーも同様のスクロールモデルを採用しました。ESCキーを押すと、分割ビューに戻ります。ボタンのタイトルは「フルスクリーンに展開」または「分割ビューに縮小」となり、推測する必要がなくなりました。アイコンはずっと4方向矢印のグリフでしたが、最初から明確に説明しておくべきでした。
プレイグラウンドがスマートフォンに対応
レスポンシブレイヤーを構築する前に、2つのモバイルバグを修正する必要がありました。Sendボタンのラベルが中央揃えにならずボタンの左端に寄っていた問題と、responseがレンダリングされると、幅の広い子要素（長いURL、JSONツリー、生のHTML preブロック）によってグリッドカラムがビューポートを超えて広がり、ページに横スクロールバーが表示される問題です。両方とも修正されました。Sendボタンは正しく中央に配置され、グリッドカラムは minmax(0, 1fr) を使用するため、幅の広い子要素はページを横に押し出すことなく、自身のカード内でスクロールします。
さらに、未完成だったレスポンシブレイヤーも調整しました。
- 1023px未満では、展開ボタンが非表示になります（グリッドはすでに1カラムになっているため）。
- 767px未満では、余白（padding）が狭くなり、メソッドのドロップダウンが96pxに縮小し、APIキーピッカーが可変（flex）になります。
- 640px未満では、URL行が2行に再配置され（上部にメソッドとSend、下部にURL）、responseツールボタンのタッチターゲットが32pxに拡大し、タブが横スクロール可能になり、cookieテーブルは名前、値、パス、有効期限がスタックされたグリッドカードになります。
- 374px未満（iPhone SEの領域）では、追加の縮小処理により、すべての要素にアクセス可能な状態を維持します。
また、ヒントのツールチップは、ポインターが粗い（pointer-coarse）デバイスではタップで開き、同じトリガーをもう一度タップすると閉じるようになりました。今週、電車の中で借りたiPhone SEを使ってテストを行いましたが、横揺れすることなくすべてが収まっていました。
これが、ツールを「デモ」から「実際に使いたいもの」へと引き上げるということです。ローンチ週よりも静かですが、プレイグラウンドに対する不満が解消された1週間となりました。