Webサイトの作成

Ktor を使用して Kotlin で Web サイトを作成する

コード例: tutorial-server-web-application

使用されるプラグイン:

Static Content

スタイルシート、スクリプト、画像などの静的コンテンツを提供する方法を学びます。

、

Thymeleaf

必要な依存関係: io.ktor:%artifact_name%

このチュートリアルでは、Kotlin と Ktor、そして Thymeleaf テンプレートを使用して、インタラクティブな Web サイトを構築する方法を学びます。

前回のチュートリアル

Kotlin と Ktor を使用してバックエンドサービスを構築する方法を、JSON ファイルを生成する RESTful API の例を交えて学びます。

では、JavaScript で記述されたシングルページアプリケーション（SPA）によって利用される RESTful サービスを作成する方法を学びました。これは非常に人気のあるアーキテクチャですが、すべてのプロジェクトに適しているわけではありません。

次のような理由から、すべての実装をサーバー側に保持し、クライアントにはマークアップのみを送信したい場合があります。

• シンプルさ – 単一のコードベースを維持するため。
• セキュリティ – 攻撃者にヒントを与える可能性のあるデータやコードをブラウザに配置しないようにするため。
• サポート性 – レガシーブラウザや JavaScript が無効なブラウザなど、可能な限り幅広いクライアントをサポートするため。

Ktor は、

いくつかのサーバーページテクノロジー

HTML/CSS または JVM テンプレートエンジンで構築されたビューを操作する方法を学びます。

と統合することで、このアプローチをサポートしています。

前提条件

このチュートリアルは単独で行うことができますが、RESTful API の作成方法を学ぶために、

前のチュートリアル

Kotlin と Ktor を使用してバックエンドサービスを構築する方法を、JSON ファイルを生成する RESTful API の例を交えて学びます。

を完了することを強くお勧めします。

IntelliJ IDEA をインストールすることをお勧めしますが、お好みの他の IDE を使用することもできます。

Hello Task Manager Web アプリケーション

このチュートリアルでは、

前回のチュートリアル

Kotlin と Ktor を使用してバックエンドサービスを構築する方法を、JSON ファイルを生成する RESTful API の例を交えて学びます。

で作成したタスク管理アプリケーションを Web アプリケーションに変換します。これを行うために、いくつかの Ktor

プラグイン

プラグインは、シリアル化、コンテンツエンコーディング、圧縮などの一般的な機能を提供します。

を使用します。

既存のプロジェクトにこれらのプラグインを手動で追加することもできますが、新しいプロジェクトを生成して、前のチュートリアルのコードを徐々に組み込んでいく方が簡単です。必要なコードはすべて途中で提供されるため、前のプロジェクトが手元になくても大丈夫です。

1. Ktor Project Generator に移動します。

2. Project artifact フィールドに、プロジェクトのアーティファクト名として com.example.ktor-task-web-app と入力します。

3. 次の画面で、 Add ボタンをクリックして、以下のプラグインを検索して追加します。

   • Static Content
   • Thymeleaf

   プラグインを追加すると、プロジェクト設定の下に 3 つのプラグインがすべて表示されます。

4. Download ボタンをクリックして、Ktor プロジェクトを生成してダウンロードします。

1. IntelliJ IDEA またはお好みの他の IDE でプロジェクトを開きます。
2. src/main/kotlin に移動し、 model という名前のサブパッケージを作成します。
3. model パッケージ内に、新しい Task.kt ファイルを作成します。

4. Task.kt ファイルに、優先度を表す enum と、タスクを表す data class を追加します。

   ここでも、Task オブジェクトを作成し、表示可能な形式でクライアントに送信したいと考えています。

   次のことを覚えているかもしれません。

   • リクエストの処理とレスポンスの生成

     タスクマネージャーアプリケーションを構築することで、Kotlin と Ktor でのルーティング、リクエストの処理、パラメータの基本を学びます。
     のチュートリアルでは、タスクを HTML に変換するために手書きの拡張関数を追加しました。
   • RESTful API の作成

     Kotlin と Ktor を使用してバックエンドサービスを構築する方法を、JSON ファイルを生成する RESTful API の例を交えて学びます。
     チュートリアルでは、kotlinx.serialization ライブラリの Serializable 型で Task クラスにアノテーションを付けました。

   今回の目標は、タスクの内容をブラウザに書き込むサーバーページを作成することです。

5. src/main/kotlin にある Routing.kt ファイルを開きます。

6. .configureRouting() 関数に、以下に示すように /tasks のルートを追加します。

   サーバーが /tasks へのリクエストを受け取ると、タスクのリストを作成し、それを Thymeleaf テンプレートに渡します。ThymeleafContent 型は、トリガーされるテンプレートの名前と、ページ上でアクセス可能な値のテーブルを受け取ります。

7. src/main/kotlin にある Thymeleaf.kt ファイルを開きます。

8. 次の .configureThymeleaf 関数が表示されるはずです。

   Thymeleaf プラグインの初期化内で、Ktor は templates/thymeleaf フォルダ内のサーバーページを検索します。静的コンテンツと同様に、このフォルダが resources ディレクトリ内にあることを期待しています。また、 .html サフィックスも期待されています。

   この場合、all-tasks という名前はパス src/main/resources/templates/thymeleaf/all-tasks.html にマッピングされます。

9. src/main/resources に移動し、新しい templates/thymeleaf ディレクトリを作成します。
10. src/main/resources/templates/thymeleaf 内に、新しい all-tasks.html ファイルを作成します。

11. all-tasks.html ファイルを開き、以下の内容を追加します。

12. IntelliJ IDEA で、実行ボタン () をクリックしてアプリケーションを開始します。

13. ブラウザで http://0.0.0.0:8080/tasks に移動します。以下に示すように、現在のすべてのタスクがテーブルに表示されるはずです。

    

    すべてのサーバーページフレームワークと同様に、Thymeleaf テンプレートは静的コンテンツ（ブラウザに送信されるもの）と動的コンテンツ（サーバーで実行されるもの）を混合します。もし Freemarker などの別のフレームワークを選択していた場合、少し異なる構文で同じ機能を提供できたでしょう。

GET ルートを追加する

サーバーページをリクエストするプロセスに慣れたので、前のチュートリアルの機能をこのチュートリアルに移行し続けましょう。

Static Content プラグインを含めたため、 Routing.kt ファイルには次のコードが存在します。

これは、例えば /static/index.html へのリクエストが、次のパスからのコンテンツを提供することを意味します。

src/main/resources/static/index.html

このファイルはすでに生成されたプロジェクトの一部であるため、追加したい機能のホームページとして使用できます。

1. src/main/resources/static 内の index.html ファイルを開き、その内容を以下の実装に置き換えます。

2. IntelliJ IDEA で、再実行ボタン () をクリックしてアプリケーションを再起動します。

3. ブラウザで http://localhost:8080/static/index.html に移動します。タスクの表示、フィルタリング、作成を行うためのリンクボタンと 3 つの HTML フォームが表示されるはずです。

   

   タスクを name または priority でフィルタリングする場合、GET リクエストを通じて HTML フォームを送信していることに注意してください。これは、パラメータが URL の後のクエリ文字列に追加されることを意味します。

   例えば、Medium 優先度のタスクを検索する場合、サーバーに送信されるリクエストは次のようになります。

   http://localhost:8080/tasks/byPriority?priority=Medium

タスクのリポジトリは、前のチュートリアルのものと同一のままで構いません。

model パッケージ内に新しい TaskRepository.kt ファイルを作成し、以下のコードを追加します。

リポジトリを作成したので、GET リクエストのルートを実装できます。

1. src/main/kotlin にある Routing.kt ファイルに移動します。

2. 現在のバージョンの .configureRouting() を以下の実装に置き換えます。

   上記のコードは次のように要約できます。

   • /tasks への GET リクエストでは、サーバーはリポジトリからすべてのタスクを取得し、 all-tasks テンプレートを使用してブラウザに送信される次のビューを生成します。
   • /tasks/byName への GET リクエストでは、サーバーは queryString からパラメータ name を取得し、一致するタスクを見つけ、 single-task テンプレートを使用してブラウザに送信される次のビューを生成します。
   • /tasks/byPriority への GET リクエストでは、サーバーは queryString からパラメータ priority を取得し、一致するタスクを見つけ、 tasks-by-priority テンプレートを使用してブラウザに送信される次のビューを生成します。

   これらすべてを機能させるには、追加のテンプレートを追加する必要があります。

3. src/main/resources/templates/thymeleaf に移動し、新しい single-task.html ファイルを作成します。

4. single-task.html ファイルを開き、以下の内容を追加します。

5. 同じフォルダに、tasks-by-priority.html という名前の新しいファイルを作成します。

6. tasks-by-priority.html ファイルを開き、以下の内容を追加します。

POST リクエストのサポートを追加する

次に、/tasks への POST リクエストハンドラーを追加して、以下を実行します。

• フォームパラメータから情報を抽出します。
• リポジトリを使用して新しいタスクを追加します。
• all-tasks テンプレートを再利用してタスクを表示します。

1. src/main/kotlin にある Routing.kt ファイルに移動します。

2. .configureRouting() メソッド内に次の post リクエストルートを追加します。

3. IntelliJ IDEA で、再実行ボタン () をクリックしてアプリケーションを再起動します。

4. ブラウザで http://0.0.0.0:8080/static/index.html に移動します。

5. Create or edit a task フォームに新しいタスクの詳細を入力します。

   

6. Submit ボタンをクリックしてフォームを送信します。 すべてのタスクのリストに新しいタスクが表示されます。

   

次のステップ

おめでとうございます！タスクマネージャーを Web アプリケーションとして再構築し、Thymeleaf テンプレートの使用方法を学びました。

次のチュートリアル

WebSockets のパワーを活用してコンテンツを送信および受信する方法を学びます。

に進み、Web Sockets の操作方法を学びましょう。