ウェブアプリを使う

ウェブアプリはwashy-washy.ryankes.euで公開されています。CLIと同じチャートと洗濯機のファイルを読み込みますが、PDFではなくページとして表示します。

同梱configと有効なconfig

トップページ（/）には作り物のサンプルチャートと洗濯機が同梱されています — CLI自身のREADMEに載っているのと同じダミーデータです。初めて訪れた人が目にするのはこれで、他に何も有効になっていないときはどのページもこれにフォールバックします。

configをアップロードすると、これが置き換わります。ヘッダーにある「Upload config」ボタン（すべてのページに表示されます）と、/configにあるもっと詳しいアップロード/ダウンロードセクションは、どちらも同じ{ machine, chart }形式のJSONファイル（チャートと洗濯機のファイルを参照）を受け取り、検証したうえでブラウザのlocalStorageに保存します。以降、消去するまではすべてのページが同梱のconfigではなくそちらを読み込みます。

/configや/config/machineでの編集も同じ仕組みです。保存すると、編集後のconfigが同じストレージに書き込まれます。ここでのやりとりはサーバーには一切送信されません — configはブラウザの外に出ることはなく、別のブラウザを使ったりサイトデータを消去したりすれば、また同梱のサンプルから始まります。

/configにはダウンロードリンクもあり、現在有効なconfig（同梱のものでもカスタムのものでも）を、アップロードするのと同じJSON形式で書き出します。これは、他の場所で編集用のコピーを作ったり、自分のconfigを誰かに渡したりするための往復手段です。

テーマ切り替え

ヘッダーには、すべてのページで「Upload config」の隣にライト/ダークの切り替えボタンもあります。何もしなければ、サイトはOSやブラウザのprefers-color-scheme設定に従います。これはこの機能ができる前と同じ挙動です。クリックすると明示的な選択に切り替わり、localStorageに保存されて、それ以降はすべてのページ・すべての訪問でOS側の設定より優先されます — 再度クリックするまで。これは2状態の切り替えボタンであり、選択肢を選ぶピッカーではありません。「システムに戻す」という別の選択肢はありません。

キーボード操作

このサイトはvimスタイルのショートカットにも一通り対応していて、ヘッダーに一度だけマウントされているのですべてのページで動作します — このドキュメントも含めて。

• jとkでページを下と上にスクロールします。
• g g（gを2回押す）で一番上にジャンプします。
• G（shift-g）で一番下にジャンプします。
• /でそのページ自体の検索欄にフォーカスします（例えばトップページの山の検索欄）。スラッシュ自体は入力されません。
• ?（shift-?）でこれらすべてを一覧するヘルプオーバーレイを開きます。Escか外側をクリックすると閉じます。

同じオーバーレイは、ヘッダーの?ボタンからも開けます。マウスを使う人やスクリーンリーダーを使う人のためのものです。これらのショートカットは、テキストフィールドやテキストエリア、セレクト、その他編集可能な要素に入力しているあいだは一切発動しません — 通常の入力が常に優先されます。

フィルター

トップページでは、どのカット（全体のチャート、洗濯のみ、アイロンのみ）を見たいかでフィルターでき、加えてフリーテキストの山の検索、そして初期状態では閉じている「Advanced」の折りたたみセクションでは、プログラム・温度・脱水速度をぴったり指定して絞り込んだり、洗剤で検索したりできます。これらはすべて同じリストを絞り込みます。山が表示されるには、有効なフィルターすべてに一致している必要があります。

プログラム・温度・脱水速度のセレクトは、山の検索やAdvancedで既に選んでいる他の条件を踏まえたうえで、それでも少なくとも1つの山が表示され続けるような値しか提示しません — つまり、選んだ結果チャートが空になるような組み合わせは選べません。この一覧は他のフィルターを変更するたびにリアルタイムで更新され、ある項目に一致するものがもう残っていない場合は、空の選択肢を出す代わりにその項目自体が無効化されます。

フィルターは、configと同じようにlocalStorageに保存され、訪問間で保持されます。フィルターした状態のビューは共有もできます。アドレスバーにはcut、pile、program、temperature、spin、detergentがクエリパラメータとして載り、これらのいずれかを含むURLは、前回の訪問時に保存された内容よりも常に優先されます — このURLを渡すためのボタンについては下のShareを参照してください。

共有

PDFダウンロードボタンの隣にShare this viewがあり、現在のページURLをそのまま送信します — フィルターも含めて。アドレスバーが既にそれらをクエリパラメータとして持っているためです（上のFiltersを参照）。改めてパッケージ化するものは何もありません。

カスタムの洗濯機やチャートが有効になっている場合（同梱configと有効なconfigを参照）、このリンクにはその設定一式も、圧縮された#config=フラグメントとして付加されます。開いた相手はフィルターだけでなく、あなたの洗濯機とチャートそのものを正確に受け取ります — 一度も自分のlocalStorageに触れていないブラウザでも同様です。ここでもサーバーには一切触れません。フラグメントはネットワーク上に送信されることがないため、このリンク自体がそのまま全データの受け渡し手段です。アップロードするconfigファイルと同じことです。ページがそれを読み込んで保存したあとは、アドレスバーからフラグメントを消去します — そこからリロードしたり再度共有したりすると、その一度きりのリンクではなく、サイトの通常の短いURLになります。壊れていたり手で編集されたりしたリンクは、無効なconfigをアップロードしたときと同じ、行・列を特定したエラーを表示し、ページは壊れる代わりに、それまで有効だった設定にフォールバックします。カスタムのものが何も有効になっていないときは、このリンクは以前と変わらず — フィルターのみです。

まずブラウザ標準の共有シート（navigator.share — メッセージ、WhatsApp、AirDrop、OSが提供するもの）を試み、そのAPIが使えない場合、あるいは使えても実際に失敗した場合にかぎり、URLをクリップボードにコピーするフォールバックに切り替わります — その際はカード自身のCopy linkボタンと同じように「Copied!」と表示します。共有シートをキャンセルした場合はどちらにも該当しません。単にその方法を選ばなかっただけなので、他には何も起きず、裏でコピーされることもありません。

PDF書き出し

トップページには2つのダウンロードボタンがあり、どちらもその時点でページに絞り込まれている内容に対応し、CLIのbun run generateが使うのと同じ@washy-washy/pdfを使ってクライアント側で生成されます。クリックするまでは何も生成されません — ページを絞り込んだだけでバックグラウンドでレンダリングが走ることはありません。

• Download for phoneは、CLIが作るのと同じ、幅の狭い1ページのスクロール可能なPDFを書き出します — 洗濯機の前でスマホから読むためのものです。
• Download to printは代わりにA4のシートを書き出します。参照用の表に加えて、山ごとの詳細カードが1枚ずつ載ります。印刷して貼っておくためのものです。

1枚のカードにもそれぞれ独自のDownloadボタンがあり、その山1つ分だけをダウンロードできます。これはスマホ形式のみです。印刷レイアウトは常に参照用の表全体とすべての山のカードを描くため、Download for phoneのように1つの山だけに絞り込む方法はありません。

カードのダウンロードボタンの隣にあるCopy linkは、その絞り込まれたビューのURLをクリップボードに置きます — 上で説明したページ全体のShareボタンと同じクリップボードのフォールバックを、カード1枚分に絞って使うものです。