目次

• 序文
• 訳者まえがき

第1部　ハイパーメディアのコンセプト

序章　イントロダクション

1　ハイパーメディアシステムとは何か？

2　ハイパーメディア駆動型アプリケーション

3　目標

4　本書の構成

5　ハイパーメディア：新世代

第1章　ハイパーメディア：再入門

1.1　ハイパーメディアとは何か？

1.2　ハイパーメディアの簡単な歴史

• 現代における実装

1.3　世界で最も成功したハイパーテキスト：HTML

• ハイパーメディアとしてのHTMLの本質
  • アンカー要素
  • フォーム要素
  • Web 1.0アプリケーション
• ハイパーメディアでないものとは？
  • シングルページアプリケーション

1.4　なぜハイパーメディアを使うのか？

• JavaScript疲れ

1.5　ハイパーメディアの復活？

• ハイパーメディア指向のJavaScriptライブラリ
• ハイパーメディア駆動型アプリケーション

1.6　いつハイパーメディアを使うべきか？

1.7　ハイパーメディアを使うべきではないときは？

1.8　ハイパーメディア：洗練されたモダンシステムアーキテクチャ

第2章　ハイパーメディア システムの構成要素

2.1　ハイパーメディアシステムの構成要素

• ハイパーメディア
• ハイパーメディアプロトコル
  • HTTPメソッド
  • HTTPレスポンスコード
  • HTTPレスポンスのキャッシュ
• ハイパーメディアサーバ
• ハイパーメディアクライアント

2.2　REST

• RESTの「制約」
• クライアント／サーバ制約
• ステートレス制約
• キャッシュ制約
• 統一インタフェース制約
  • リソースの識別
  • 表現によるリソース操作
  • 自己記述的メッセージ
  • アプリケーション状態のエンジンとしてのハイパーメディア（HATEOAS）
  • HATEOASおよびAPIの変化
• 階層化システム制約
• オプションの制約：コードオンデマンド

2.3　まとめ

第3章　Web 1.0アプリケーション

3.1　「ウェブスタック」の選定

3.2　Python

3.3　Flaskの紹介：最初のルート

3.4　Contact.appの機能

• 検索可能な連絡先リストの表示
  • リストと検索のテンプレート
• 新しい連絡先の追加
  • /contacts/newへのPOSTの処理
• 連絡先詳細の表示
• 連絡先詳細テンプレート
• 連絡先の編集と削除
  • /contacts/<contact_id>/editへのPOSTリクエストの処理
• 連絡先の削除
• Contact.app……実装完了！

第2部　htmxによるハイパーメディア駆動アプリケーション

第4章　HTMLのハイパーメディアとしての拡張

4.1　ハイパーリンクに注目する

• なぜアンカーとフォームだけなのか？
• なぜクリックイベントと送信イベントだけなのか?
• なぜGETとPOSTだけなのか？
• なぜ画面全体を置き換えるしかないのか？

4.2　htmxでHTMLをハイパーメディアとして拡張する

• htmxのインストールと使用
• JavaScriptは不要……

4.3　HTTPリクエストのトリガ

• すべてはただのHTML
• htmx vs.「ただの」HTMLレスポンス

4.4　他の要素をターゲットにする

4.5　差し替え方式

4.6　イベントの使用

4.7　htmx：HTML eXtended

4.8　リクエストパラメータの受け渡し

• フォームで囲む
• 入力を含める
  • 相対CSSセレクタ
• インラインの値

4.9　履歴のサポート

4.10　まとめ

第5章　htmxのパターン

5.1　htmxのインストール

5.2　アプリケーションのAjax化

• ブーストされたリンク
• ブーストされたフォーム
• 属性の継承
• プログレッシブエンハンスメント
• Contact.appに「hx-boost」を追加する

5.3　次のステップ：HTTP DELETEで連絡先を削除する

• サーバサイドコードの更新
  • レスポンスコードの落とし穴
• 適切な要素をターゲットにする
• アドレスバーのURLを適切に更新する
• One More Thing...​
• プログレッシブエンハンスメント？

5.4　次のステップ：連絡先メールアドレスの検証

• 入力タイプの更新
• インライン検証
• サーバサイドでのメールアドレスの検証
• ユーザー体験をさらに高める
• 検証リクエストのデバウンス
• 非変更キーを無視する

5.5　アプリケーションの改善点：ページング

• クリックして「もっと見る」
• 無限スクロール

第6章　さらなるhtmxのパターン

6.1　アクティブ検索

• 現在の検索UI
• アクティブ検索の追加
• 正しい要素をターゲットにする
• コンテンツを削ぎ落とす
• htmxのHTTPリクエストヘッダ
• テンプレートの分割
• 新しいテンプレートの使用
• 「hx-push-url」を使ったアドレスバーの更新
• リクエストインジケータを表示する

6.2　遅延読み込み

• 高コストなコードの切り離し
• インジケータの追加
• でも「遅延読み込み」じゃない！

6.3　インライン削除

• ターゲットの絞り込み
• サーバサイドの更新
• htmxの差し替えモデル
• 「htmx-swapping」を活用する

6.4　一括削除

• 「選択した連絡先を削除」ボタン
• 「選択された連絡先を削除」のサーバサイド

第7章　動的アーカイブUI

7.1　UIの要件

7.2　実装の開始

7.3　アーカイブエンドポイントの追加

7.4　条件付きで進捗状況のUIを表示する

7.5　ポーリング

• アーカイブUIを更新するためのポーリング
  • プログレスバーUIの追加
• 結果をダウンロードする
• 完成したアーカイブのダウンロード

7.6　htmxのアニメーション

• htmxにおける「確定」処理
• スムーズ化の方法

7.7　ダウンロードUIの消去

7.8　代替のUX：自動ダウンロード

7.9　動的アーカイブUI：完成

第8章　htmxの達人技

8.1　htmxの属性

• hx-swap
• hx-trigger
  • トリガフィルタ
  • 非標準イベント
• その他の属性

8.2　イベント

• htmxが生成するイベント
• htmx:configRequestイベントを使う
• htmx:abortを使用してリクエストをキャンセルする
• サーバ生成イベント

8.3　HTTPリクエストとレスポンス

• HTTPレスポンスコード

8.4　他のコンテンツの更新

• 選択範囲を広げる
• Out Of Band差し替え
• イベント
• 実用主義

8.5　デバッグ

• htmxイベントのロギング
• Chromeでのイベント監視

8.6　セキュリティの考慮事項

• コンテンツセキュリティポリシーとhtmx

8.7　設定

第9章　クライアントサイドスクリプト

9.1　スクリプトは許可されているか？

9.2　ハイパーメディアのスクリプト

9.3　ウェブのためのスクリプトツール

9.4　バニラJavaScript

• シンプルなカウンタ
  • インラインによる実装
  • スクリプトを分離する
  • 振る舞いの局所性
  • カウンタをどうするか？
• RSJS
• 実践バニラJS：オーバーフローメニュー

9.5　Alpine.js

• 「x-on:click」対「onclick」
• リアクティブ性とテンプレート
• 実践Alpine.js：一括操作ツールバー
  • 操作を実装する

9.6　_hyperscript

• 実践_hyperscript：キーボードショートカット
• なぜ新しいプログラミング言語なのか？

9.7　既製コンポーネントを使う

• 統合のための選択肢
  • コールバックによる統合
  • イベントによる統合

9.8　実用性重視でスクリプトを書く

第10章　JSONデータAPI

10.1　ハイパーメディアAPIとJSONデータAPI

• ハイパーメディアAPIとデータAPIの違い

10.2　Contact.appにJSONデータAPIを追加する

• APIのroot URLの決定
• 最初のJSONエンドポイント：全連絡先の一覧
• 連絡先の追加
• 連絡先詳細の表示
• 連絡先の更新および削除
• さらなるデータAPIの考慮事項
  • ウェブアプリケーションにおける認証
• 2つのAPIの「かたち」
• モデル・ビュー・コントローラ（MVC）パラダイム

第3部　ハイパーメディアのモバイルへの適用

第11章　Hyperview：モバイルハイパーメディア

11.1　モバイルアプリ開発の現在地

11.2　モバイルアプリのためのハイパーメディア

• WebView
• Hyperview
  • 形式
  • クライアント
  • 拡張性
• どちらのハイパーメディアアーキテクチャを選ぶべきか？

11.3　HXML入門

• Hello World!
• UI要素
  • リスト
  • 画像
• 入力
• スタイリング
• カスタム要素
• ビヘイビア
  • アクション
  • トリガ
  • 複数のビヘイビアを使う
• 本章のまとめ

11.4　モバイル向けのハイパーメディア

第12章　Hyperviewを使用した連絡先アプリの構築

12.1　モバイルアプリの作成

12.2　検索可能な連絡先の一覧

• 連絡先の検索
• 無限スクロール
• プル・トゥ・リフレッシュ
• 連絡先詳細の表示

12.3　連絡先の編集

• 連絡先リストの更新

12.4　連絡先の削除

12.5　新しい連絡先の追加

12.6　アプリのデプロイ

12.7　1つのバックエンド、複数のハイパーメディア形式

• コンテントネゴシエーションとは？
• アプローチ1：テンプレート切り替え
• アプローチ2：リダイレクト分岐

12.8　HyperviewによるContact.app

第13章　Hyperviewクライアントの拡張

13.1　電話とメール機能を追加する

13.2　メッセージを追加する

13.3　連絡先上のスワイプジェスチャ

• コンポーネントの設計
• コンポーネントの実装
  • コンポーネントの使用

13.4　モバイルハイパーメディア駆動型アプリケーション

• おわりに
• 索引