- Hyperclay は、すべてのUI、ロジック、データが1つの HTMLファイル に統合される方式のウェブアプリ制作を支援する
- ファイル自体を変更すると即座に その場で修正・リアルタイム共有 が可能で、アプリの見た目や挙動、編集方法まで直接制御できる
- 別個のビルド・デプロイ工程、データベース、または複雑なバックエンドなしで 即時実行・保存 の構造を提供する
- HTMLファイル1つだけで ブラウザ、サーバー、オフラインなどどこでも アプリを実行でき、すべての変更はバージョン管理および復元が可能
- 現代のウェブ開発の複雑さ を減らし、リアルタイムに生きているインタラクティブなアプリを誰でも簡単に作れるよう設計されている
紹介: HTMLファイル1つで作る、生きたウェブアプリ Hyperclay
- Hyperclayは、プログラマーが 複雑なインフラ管理なしに、1つの ポータブルなHTMLファイル で製品を形作るようにウェブアプリを作る体験を提供する
- 従来のウェブ開発で必須だった 設定ファイル、ビルド、フレームワーク、デプロイパイプライン をなくし、ファイル1つで完結する構造を目指している
コアコンセプトと利点
- アプリが 1つのHTMLファイルで構成 される
- 視覚的UIを通じてファイル自体をリアルタイムに編集でき、その編集内容がそのまま アプリの状態として永続保存 される
- UI、ロジック、データがすべて1つのファイル内に動的に含まれている
- ユーザーは文書のようにアプリを 即座に修正し、変更をそのまま共有・ダウンロードしてオフライン利用 することもできる
- 「interactive codeのためのGoogle Docs」という比喩のように、共有、修正、所有権の制御を自由に行える
主な機能の要約
- 直接操作: アプリの実行中にそのまま編集できる。コンパイルやリロードなしで変更が即時反映される
- What you see is what you build: UIを修正したりソースコードを直接編集したりすると、すぐにアプリが変わり、中間レイヤーがない
- 真のポータビリティ: アプリをHTMLファイルとして書き出し、どこでも（サーバー・オフライン）同じように実行できる。保存のたびにバージョン管理が適用され、復元できる
- これらすべてが 特別な技術なしに、標準のHTMLファイル1つだけで実現される
技術的な構造
- Hyperclayは NodeJSサーバー とクライアント側の JSライブラリ で構成される
- HTMLページが自らDOMを変更すると、変更後の
document.body.outerHTML をサーバーへ送り、そのHTMLファイル自体が更新される
- チェックボックスのchecked属性など、アプリ内での変更が永続的にHTMLコードへ保存され、次回アクセス時にも同じ状態を再現できる
- バージョン管理 と 読み取り/書き込み権限管理 をサポート
実際の例
- 直接編集可能なブログ、勤務時間チェックリストなど、あらゆるアプリを1つのHTMLファイルで作成・保存できる
contenteditable 属性や、<input type="checkbox" persist> の形で、そのままアプリの状態を文書に記録する
背景と問題意識
- 毎年数十のウェブサイトを制作する中で、ウェブアプリのコーディングが文章を書くことのように自然であってほしい というニーズがあった
- 従来の静的ウェブサイトでは、変更が揮発的である（ユーザーの行為が保存されない）
- データ永続性 をウェブ上で実現するには、データベース、API、テンプレート、アカウントシステムの構築など過剰な作業が必要になる
- プロトタイプ、簡単なツール、個人開発ログ、ブログなど、素早く作ってリアルタイムに修正・共有したい需要 に対して非効率的だった
Hyperclayの解決方法
- HTMLファイル1つにUI・状態・動作が統合される
- まるでデスクトップアプリを開くように 簡単に開いてすぐ修正 し、結果をオンラインにそのまま反映できる
- 永続的な（shared, cloneable, persistent）デジタルオブジェクトという概念を提示する
- ウェブサイトビルダー、ドキュメント・図表・プレゼンテーションツール、ダッシュボード、ブログ、アンケート・クイズ作成、データ可視化など多様なツールに適用できる
全体コンセプトの要約
- ほとんどのウェブアプリはすでにHTMLを使っている
- 中間段階を省けば、HTMLファイルが 完全なデータベース / API / UI の役割を担い、スタックはわずか数行にまで単純化される
- 開発者は複雑さを減らし、最小限のコード でも使いやすく保守しやすいアプリを作れる
Hyperclayの使用例
- ブログ、チェックリストなど、どんなアプリでもたった1つのHTMLで作成・配布・共有・編集できる
<div contenteditable>私のブログ！</div> の形ですぐ使え、<input type="checkbox" persist> によって各状態が文書に永続記録される
結論
- Hyperclayは、ウェブ開発の煩雑さなしに、誰でも軽量でポータビリティに優れたインタラクティブなウェブアプリを制作し、リアルタイムで共有・保存・復元できる新しい方法を提示する
- 開発者やデザイナーだけでなく誰でも簡単に使える 次世代のウェブアプリプラットフォーム である
まだコメントはありません。