サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

KtorでWebサイト制作【FreeMarker導入編】

KtorでWebサイト制作【FreeMarker導入編】

この記事にはプロモーションが含まれています。

静的なWebサイトではHTMLとCSSのみで十分ですが、動的なWebサイトではバックエンドの処理をページに反映させる必要があります。これには、通常、サーバーサイドのプログラミングが必要です。

例えばPHPの場合、HTMLを拡張したPHPファイルを使用します。PHPは動的なWebページの生成に特化しており、PHPファイル内に直接HTMLタグを埋め込むことが可能です。これにより、サーバーサイドのデータを動的にHTMLページに組み込むことができます。

一方、Ktorを使用する場合、サーバーサイドロジックはKotlinで記述し、HTMLページはテンプレートとして別に管理されます。PHPのようにHTMLタグを直接コードに埋め込むことは基本的に行われません。

では、どのようにしてKtorで効率的にWebページを構築するか?その解決策の一つがテンプレートエンジンの利用です。

この記事では、シンプルなトップページを作成しながら、テンプレートエンジンであるFreeMarkerの基本を解説していきます。

この記事を読むことで分かること
  • ・FreeMarkerとは
  • ・FreeMarkerをKtroプロジェクトに導入する方法
  • ・テンプレートファイルのルーティング設定

– 目次 –

FreeMarkerとは?

FreeMarkerとは、Javaプラットフォームで動作する強力なテンプレートエンジンです。

簡単に言えば、JavaやKotlinでサーバーサイドを開発する際、HTMLタグを使ってテンプレート(静的なテキストファイル)を作成し、そこに動的なデータを挿入することを可能にするツールです。

動的なデータを挿入するためのFreeMarkerならではの記述ルールもありますが、静的な部分は通常のHTMLファイルとほぼ同様に記述することができるため、HTMLの基本を理解していればすぐに使い始めることができます。

たとえば、下のようなHTMLファイルがあったとすると、このコードはほぼそのままFreeMarkerのテンプレートファイルとして利用できます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Ktor</title>
</head>
<body>
    <h1>Hello, Ktor!</h1>
</body>
</html>

ちなみに、FreeMarkerはKtorほど新しいモノではなく、1999年に最初のリリースを迎えています。(Ktorは2016年)

リリースからかなり時間が経っているため、既に枯れている技術なのではないかと心配に思う人もいるかもしれませんが、FreeMarkerはKtorの公式サイトでも紹介されており、使用が非推奨とされるような時代遅れのものではありません。

古いと言うよりもむしろ、『長い期間をかけて改良が重ねられ、安定・確立している技術である』と捉えた方が良いでしょう。

FreeMarkerは非常に多彩な機能・特徴を有しているので、ここでその全てを紹介することはできませんが、興味があればぜひ公式サイトを覗いてみてください。

・FreeMarker公式サイト
https://freemarker.apache.org/

この記事においては、『FreeMarker = HTMLタグをそのまま使ってテンプレートを作成できる便利なツール』というぐらいの認識でOKです。

    POINT!
  1. ・FreeMarkerは、Javaプラットフォームで動作するテンプレートエンジン!
  2. ・HTMLのタグや構造を、そのままテンプレートファイル内で使用できるのが特徴!
  3. ・FreeMarkerの歴史は長いが、古い故に使用が非推奨とされているものでは決してない!

FreeMarkerを利用する準備

FreeMarkerをKtorで利用するにあたり、まずは依存関係の追加が必要となります。(※Ktorプロジェクトを作成する際に、プラグイン選択でFreeMarkerを追加している場合は必要ありません)

build.gradle.kts ファイルを開き、依存関係に次のコードを追加しましょう。

Kotlin

implementation("io.ktor:ktor-server-freemarker:$ktor_version")

そして、pluginディレクトリ内に Templating.kt(ファイル名は任意)を作成し、インストールの設定を行うコードを記述します。

Kotlin

import freemarker.cache.*
import io.ktor.server.application.*
import io.ktor.server.freemarker.*

fun Application.configureTemplating() {
    install(FreeMarker) {
        templateLoader = ClassTemplateLoader(this::class.java.classLoader, "templates")
    }
}

install関数は、Ktorの機能(この場合はFreeMarker)をアプリケーションに追加するための関数です。この関数を使ってFreeMarkerテンプレートエンジンをインストールし、利用可能にします。

templateLoaderは、FreeMarkerテンプレートファイルをどこから読み込むかを設定するプロパティです。

この場合、this::class.java.classLoader によって現在のクラスローダーを指定し、第二引数の "templates" によって、テンプレートファイルが置かれているディレクトリを指定しています。

つまり、この設定ではクラスパスの templates ディレクトリ内のファイルをテンプレートとして読み込むようになっています。

ただ、現時点では templates なんていうディレクトリはまだ作成していません。

なので、順番が前後するように思われるかもしれませんが、ここで templates ディレクトリを resources ディレクトリ内に作成しておきます。

resourcesディレクトリ内にtemplatesディレクトリを作成しているスクリーンショット画像

このtemplateディレクトリに、テンプレートファイル(.ftl)を作成し、管理することとなります。次のステップでは、そのテンプレートファイルを作成してみましょう。

    POINT!
  1. ・Ktorプロジェクト生成時にFreeMarkerプラグインを選択していない場合は、依存関係にコードを追加する必要がある!
  2. ・install関数により、FreeMarkerテンプレートエンジンがインストールされ、利用可能になる!
  3. ・templateLoaderは、テンプレートファイルをどこから読み込むかを指定する!

テンプレートファイルの作成

FreeMarkerではHTMLタグをそのまま扱うことができることに加え、このステップでは静的なページを作成するだけなので、ここでは『テンプレートファイルの作成 = HTMLファイルの作成』と考えても差し支えありません。

templatesディレクトリ内に、index.ftl と名前をつけたファイルを作成し、次のコードをコピーして貼りつけます。

index.ftl

<!DOCTYPE html>
html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Ktor</title>
    <style>
        body { height: 100vh; display: grid; place-items: center; font-family: sans-serif; }
    </style>
</head>
<body>
    <h1 style="color: red;">Hello, Ktor!</h1>
</body>
</html>

本来、CSSはHTMLとは別にファイルを作成して管理した方が良いのですが、ここではとりあえずトップページを良い感じに表示したいだけなので、head要素内にstlye要素を埋め込んでいます。

こういったWebページ制作の基本テクニックをそのまま流用できるのも、FreeMarkerを採用するメリットの一つですね。

さて、トップページを表示するために必要な準備はこれで全て整いました。次のステップでは、ルーティングを設定して、作成したテンプレートファイル(index.ftl)を実際にWebブラウザで表示させてみましょう!

    POINT!
  1. ・テンプレートファイルは、拡張子を.ftlとする!
  2. ・HTMLタグを埋め込めるので、HTMLファイルを作成するのと同じような感覚でテンプレートファイルを作成できる!
  3. ・作成したテンプレートファイルをページとして表示させるには、ルーティング設定が必要!

ルーティングの設定とページの表示

FreeMarkerを利用したテンプレートファイルを表示するには、call.respond 関数に FreeMarkerContent() を渡す必要があります。

FreeMarkerContentの第一引数はテンプレートファイルの名称(文字列)、第二引数はテンプレートファイルに渡す動的なデータです。ここではテンプレートファイルに渡す必要のあるデータはないので、null を指定しておきます。

コードは次のようになります。

Kotlin

get("/index") {
    call.respond(FreeMarkerContent("index.ftl", null))
}

プロジェクトを実行して、http://0.0.0.0:8080/index にアクセスし、『Hello, Ktor!』がブラウザに表示されていることを確認します。

これで無事にトップページ(仮)ができました!!

作成したテンプレートファイルをブラウザで表示した様子のスクリーンショット画像

しかし…さすがに文字だけだと寂しすぎますよね😅せめて画像の一つでも配置したいところです。

ですが、画像などの静的なコンテンツはどのディレクトリで管理し、画像ファイルのパスはどのように記述すれば良いのでしょうか?

ということで、次回は『画像などの静的コンテンツを読み込む方法』をテーマにする予定です。引き続き、Ktorの基本をじっくり楽しく学んでいきましょう〜!

    POINT!
  1. ・テンプレートファイルを読み込むには、call.respond関数に、FreeMarkerContent()を指定する!
  2. ・FreeMarkerContentの第二引数は省略できないので、何も渡す必要がない場合はnullを指定しておこう!
  3. ・プロジェクトを実行して、ページが正しく表示されることを確認してみよう!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン