KotlinとKtorでウェブサイトを作成する

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

使用されているプラグイン:

Routing

ルーティングは、サーバーアプリケーションにおける受信リクエストを処理するための中核プラグインです。

、

Static Content

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

、

Thymeleaf

必要な依存関係: io.ktor:%artifact_name% コード例: tutorial-server-web-application ネイティブサーバーサポート: ✖️

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

前のチュートリアル

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ボタンをクリックして追加します。

   • Routing
   • Static Content
   • Thymeleaf

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

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

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

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

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

   思い出されるかもしれません。

   • リクエストを処理しレスポンスを生成する

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

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

   この場合、私たちの目標は、タスクの内容をブラウザに書き込めるサーバーページを作成することです。

5. plugins パッケージ内の Templating.kt ファイルを開きます。

6. configureTemplating()メソッドに、以下に示すように/tasksのルートを追加します。

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

   メソッドの先頭にあるThymeleafプラグインの初期化を見ると、Ktorがサーバーページのために templates/thymeleaf 内を検索することがわかります。静的コンテンツと同様に、このフォルダが resources ディレクトリ内にあることを想定しています。また、 .html のサフィックスを想定しています。

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

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

8. all-tasks.html ファイルを開き、以下のコンテンツを追加します。

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

10. ブラウザで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/com/example/plugins にある Templating.kt ファイルに移動します。

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

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

   • /tasksへのGETリクエストでは、サーバーはリポジトリからすべてのタスクを取得し、 all-tasks テンプレートを使用してブラウザに送信される次のビューを生成します。
   • /tasks/byNameへのGETリクエストでは、サーバーはqueryStringからパラメータtaskNameを取得し、一致するタスクを見つけ、 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/com/example/plugins にある Templating.kt ファイルに移動します。

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

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

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

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

   

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

   

次のステップ

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

Webソケットの操作方法を学ぶために、

次のチュートリアル

WebSocketsの力を活用してコンテンツを送受信する方法を学びます。

に進んでください。