ハクソク

世界を動かす技術を、日本語で。

単一のポータブルで自己更新可能なバニラHTMLファイルによるウェブアプリ

281日前原文(hyperclay.com)

概要

  • Hyperclay は、1つのHTMLファイルでWebアプリの作成・編集・共有を実現する新しいプラットフォーム
  • インフラや複雑な設定を意識せず、 直感的な操作 でアプリ開発が可能
  • 自己保存・自己更新 機能により、編集内容が即座に反映・永続化
  • 完全なポータビリティ とバージョン管理、権限設定もサポート
  • 開発者も非開発者も、 物理オブジェクトのような直感的操作性 を体験可能

Hyperclay: HTML APPSの革新

  • Hyperclay は、 1つのポータブルHTMLファイル でWebアプリを作成・ホスティング・共有できる新しい仕組み
  • ビジュアルUI から直接編集し、そのまま状態を自己保存する設計
  • Google Docsのような感覚 で、インタラクティブなコードを即時編集・共有・ローカル保存できる
  • アプリの UI・ロジック・データ が1つのHTMLファイルに集約
  • URL共有 で即座に最新版を他者へ公開可能

直感的な操作性とリアルタイム編集

  • 実行中のアプリ を直接編集、 コンパイルやリロード不要
  • UI自体がアプリ本体 であり、DevToolsやインターフェースの編集が即時反映
  • 抽象化レイヤーが存在しない、シンプルな構造
  • HTMLファイル1つ で、どこでも動作・オフライン対応・永続保存
  • バージョン管理と権限設定 で安全な運用

技術概要

  • NodeJSサーバー と フロントエンドJSライブラリ で構成
  • HTMLページが 自身のDOMを更新し、HTMLソース自体を置換・保存
  • 例：チェックボックスをクリック→checked属性がDOMに追加→Hyperclayがdocument.body.outerHTMLを永続化
  • 自動バージョン管理 ・ 読み書き権限 をサポート

従来のWeb開発との違い

  • 従来は 設定ファイル・ビルド・デプロイ・API・DB など多層構造
  • 静的サイト は編集が一時的で永続性に欠ける
  • 物理オブジェクトのような直感的な永続性 をデジタルで再現
  • 通常は サーバー・DB・API・ユーザー管理 等の構築が必要で手間
  • Hyperclay なら、 体験作りに集中 できる

理想的なワークフローの実現

  • 例： パーソナル開発ログ や 簡易ブログ を手軽に更新・公開
  • ローカルアプリのような即時編集性 ＋ オンライン永続化
  • UIが自らを永続的に更新できる力 を持つ
  • 柔軟・共有・複製・永続可能なデジタルオブジェクト の実現

多様な用途と応用例

  • Webサイトビルダー、ドキュメント、スプレッドシート、プレゼンテーション
  • ダッシュボード、ブログ、ワーク管理、アンケート、ナレッジベース
  • マインドマップ、請求書発行、データ可視化、財務モデリング
  • クリエイティブ資産生成、インタラクティブ教材、履歴書作成、ワイヤーフレーム
  • プロダクトロードマップ、各種ジェネレーター等、多彩な活用

Hyperclayのシンプルな使い方

  • 例1：オンライン編集可能なブログ
    • <div contenteditable>My new blog!</div>
  • 例2：作業時間管理アプリ
    • <h1>Extra Hours</h1>
      • <input type="checkbox" persist>
      • <input type="checkbox" persist>
      • <input type="checkbox" persist>
    • ※persist属性でチェック状態をDOMに永続保存
  • さらに複雑な例： 個人開発ログ （Hyperclayのアクセス権申請で利用可能）

Hyperclayの本質とメリット

  • UI・状態・振る舞い が1つのHTMLファイルに統合
  • 物理オブジェクトのように“形を変えられる” デジタル体験
  • 現代的Web開発の煩雑さを排除 し、本質的な体験作りに集中
  • David （開発者）による、 軽量かつ直感的なWebアプリ開発手法 の提案

まとめ：Hyperclayがもたらす新しいWebアプリ開発体験

  • 自己保存・自己更新型HTMLファイル によるWebアプリの新しい形
  • 即時編集・即時共有・完全ポータビリティ の実現
  • シンプルで直感的なワークフロー、開発者も非開発者も扱いやすい
  • Hyperclay で、 Webアプリ開発の“粘土細工”体験 を実感

Hackerたちの意見

これはWWWの元々のビジョンに近づいてるね。最初のウェブブラウザもエディタだったから。ティム・バーナーズ＝リーのNeXT用アプリは、基本的にOSに組み込まれたリッチテキスト編集クラス「TextView」のラッパーだったんだ。 （その後、AppleのMac OS XではNSTextViewになって、今でもMacのTextEditアプリを支えてる。）編集機能が失われた理由は二つあって、1) HTTP PUTメソッドがまだ存在しなかったから、編集したHTMLファイルはローカルにしか保存できなかった。2) Mosaicが99%のユーザーにとってWWWを定義するクロスプラットフォームのウェブブラウザを作ったけど、編集機能は多プラットフォームのコードベースでゼロから作るには複雑すぎたから含まれてなかったんだ。

└

web browser was also an editor うーん、知ってるブラウザはみんなエディタでもあるけど… そうじゃないのってあるの？ 編集 - もう誰もデベロッパーツール使ってないの？ HTMLは？ バニラJSやCSSは？ みんなTSやReact使って、物をくっつけるだけ？ だって、ブラウザの中にIDEが丸ごと入ってるじゃん（Chrome、Firefox、Safari由来のものを使ってる前提だけど）で、ウェブページをリアルタイムでコーディングできるのに…

└

読む・注釈をつける・書くウェブを作るのは、私にとってとても大切なこと。Hyperclayみたいなページには、すごく感心する部分がたくさんある！でも、各ページがユーザーのために独自のツールキットを作るのと（Hyperclay）、TBLの読み書きウェブとは明らかに違う答えだと思う。ユーザーエージェントは、訪れるサイトに関わらず、標準的なツールを提供すべきだと思う。

└

それに加えて、W3Cはアマヤという「ブラウザ」、または彼らが呼んでいたウェブエディタを15年近く維持してたんだ。それが彼らのウェブのビジョンだったと思う。魅力的なアイデアだっただけじゃなくて、アマヤ自体も「テストベッド」としてしっかりした実装だった（また彼らの言葉）。なぜそれが消えたのかは分かるけど、無くなったのはちょっと残念だと思う。

ストーリーテリングやグラフィックはいいと思うけど、この話を10スクリーン分読んでも、彼らがこれを実現するために使っている技術がまだ分からない。ローカルストレージについての言葉が多いのかな？ 変更はどうやってHTMLファイルに持続されるの？ FileSystemAPIを使って前のHTMLファイルを上書きしてるの？ ユーザーが「名前を付けて保存」ダイアログで適切なファイルを選ばなくても、どうやってシームレスに実装してるの？

└

私が理解したところによると、HTMLファイル自体が更新されていて、フォームや属性、他のタグが新しい変更を含むように更新されてるんだ。

└

サーバーにはDBがあるんだ。JSONを保存する代わりに、すべてのビューを持つHTMLを保存してるだけなんだよ。

└

スクロールしてるとちょっと迷子になっちゃった。これを一歩進めて、サーバーで実行されるHTMLにちょっとした構文を追加したら、PHPやWordPressを発明したことになるんじゃない？ 私の理解では、これはまた、あるシステムがマルチテナントにしようとしたために複雑になり、90%の「改善/進展」が実際には文脈や自由の中での無駄になってしまうサイクルだと思う。

└

Hyperclayには2つのアプローチがあるんだ。1. ホスティング：自分の/saveエンドポイントを呼び出すことで自己保存する「HTMLアプリ」がたくさん手に入る。HTMLを取得して、そのアプリ名.htmlを上書きし、バックアップやバージョンを作成するよ。（各ユーザーは自分のアプリだけを編集できるけど、他の人がそのアプリをフォークできるようにサインアップを有効にすることもできる。フォークしたアプリにオプションのアップデートを送信できるようにする計画もあるよ。）2. ローカル：オープンソースのHyperclay Local [0]をダウンロードすれば、自分の個人的なローカルHTMLアプリを持つことができて、/saveエンドポイントを呼び出してバックアップも作れる。これを使って、自分のサーバーで個人的に変更可能なアプリをホストするためにコアコードを抽出することもできるよ（何らかの認証を実装すればOK）[0] https://hyperclay.com/hyperclay-local

混乱している人のために説明すると、HyperclayはNodeJSサーバーとフロントエンドのJSライブラリで、HTMLページがDOMを更新して、その更新されたバージョンで自分の.htmlソースを置き換えることができるんだ。チェックボックスをクリックすると、その要素にchecked属性が追加されるのを想像してみて。次にHyperclayを使って、このバージョンのdocument.body.outerHTMLをグローバルに保存することで、次に誰かがページを訪れたときにもその状態が残るってわけ。自動バージョン管理や読み書きの権限設定もあるし、かなりクールなプロジェクトだよ！自分のツールにもぜひ試してみたいな。ただ、私の理解では、1人の開発者が唯一のコンテンツエディターであるときに最も役立つみたい。他の人が編集した内容を上書きしちゃうことになるし、複数のコピーがあると、開発者がすべてのコピーに変更を反映させるのが簡単じゃないからね。

└

これ、2001年の何かみたいだね。私も2001年頃にほぼ同じことをやってたよ。contenteditableを使って、IIS/JScriptのバックエンドでね。

└

この内容をそのままホームページに追加しました。ありがとう！ちなみに、開発者が「DOMベースのスキーママイグレーション」をすべてのフォークしたアプリにプッシュできる方法を検討中です。

誰かがWindows 98のHTAアーカイブを再発見したみたい。 https://en.wikipedia.org/wiki/HTML_Application

└

オリジナルのElectronだね！でも、対応していたIEのバージョンはデバッグが地獄だったのが残念。

└

同じことをコメントしに来た。

└

HTAは、その時代には素晴らしかったけど、同時にひどい部分もあったよね（IEが死ぬまで残ってたし）。普通のウェブページだけど、IE専用でローカルユーザーのプロセス実行権限があった。あと、ローカルの永続性は…問題があったな。似ていると言えるのはほんのわずかだね。

これ、めっちゃすごい！でも、クローズドソースのプロジェクトみたいで、価格ページはHTTP 404を返してるね。こういうオープンソースの代替品ってあるのかな？このアイデアを聞くのは初めてだよ。ただ、基本的な部分を実装するのはそんなに難しくないと思う。Chromiumにはdocument.designMode='on'をコンソールで入力することでアクティブにできるデザインモードもあるし。あとは、認証を扱うちょっとしたJavaScriptと、変更されたHTMLを保存するためのバックエンドを書くだけで済むよ。

└

同じ作者（私）によるオープンソースのローカルアプリ版がここにあるよ： https://hyperclay.com/hyperclay-local

自分のゲームのセーブファイルで似たようなことをやってるよ。1行目は"const rawData ="で、2行目がすべての状態になってる。セーブボタンを押すと、2行目が現在の状態に置き換えられたdocument.documentElement.outerHTMLがダウンロードされるんだ。サーバーは必要ないよ。 https://github.com/mcteamster/white/blob/main/src/lib/data.t...

バージョニングってどうなってるの？HTMLアプリをフォークした後、手動で介入せずに更新して新しい機能を使える方法はあるの？デモ動画で見たカンバンボードの例を考えてるんだけど、カラムの並べ替えがまだサポートされてなかったみたい。アプリをフォークしてカンバンを作成した後、カラムの並べ替えをサポートする新しいバージョンに更新したい場合はどうなるの？

https://bobtoalice.com/ は、公共の環境でプライベートデータを転送するための一ファイルアプリです。 https://github.com/alxgsv/bobtoalice

これはクローズドソースのプロジェクトなの？試すチャンスすら得るためにメールアドレスを渡したくないんだけど。

ちゃんとした説明をすると、記事はざっとしか読んでないけど、タイトルから判断すると、SvelteKitは「inline」という一つのオプションでそれを実現してるみたい。 https://svelte.dev/docs/kit/configuration#output