AWS Elasticsearchのバージョンを上げたらエラーが頻発するようになった話

こんにちは。 エキサイト株式会社の三浦です。

今回は、最近実際に私の身に起きた非常に困った話、AWS Elasticsearchエラー問題について説明していきます。

なおこの件は、とりあえず現状はエラーは収まっているものの、100%原因が判明したとは言い切れないものとなっています。 あらかじめご了承ください。

始まり

私が携わっているサービスでは、コスト削減のためにElasticsearchに対してReserved Instanceを購入しています。 Reserved Instanceは、簡単に言ってしまえば一定期間の料金を前払いする代わりに割引してもらう、というものです。

先日、以前購入したReserved Instanceの前払い期間が終了したのですが、その頃ちょうど 6g系インスタンス が発表されました。

6g系インスタンスは、AWSからの情報によれば、

お客様は、現世代 (M5、C5、R5) の対応する x86 ベースのインスタンスと比較して、最大 38% 向上したインデックス作成スループット、50% 削減されたインデックス作成レイテンシー、30% 向上したクエリパフォーマンスの恩恵を受けることができます。

Amazon Elasticsearch Service Graviton2 インスタンスでは、前世代のインスタンスに比べて費用対効果が最大 44% 向上しています。

とのことなので、これを使わない手はありません。

6g系インスタンスは使用できるバージョンが一定以上のものでないといけないので、テスト環境で検証した後に本番環境のバージョンをアップし、その後無事6g系のインスタンスタイプに変更が完了しました。

これでコストも下がるしパフォーマンスも上がるしいい事づくし!と思っていました。

それがそう簡単なことではないとわかったのは、それからしばらく経ったあとのことです。

問題発生

ある日突然、サービスに対するリクエストがエラーになっているという通知が届きました。 急いで調査してみると、なんとElasticsearchからのレスポンスが不安定になっているようです。

Elasticsearchのインスタンスタイプの増強やm5系への変更、不要なリクエストの削除による負荷低減等色々なことを試してみましたが、それでも断続的にエラーが起きる状態が続きました。

問題の解決?

色々と試していく中で、Elasticsearchへのアクセスを最初に受け付けるElasticsearch用APIに問題があるのでは、という考えから、そのAPI(dockerコンテナとして運用しています)の1コンテナあたりのリクエスト数を減らしてスケールアウトするようにしてみたところ、エラーが起きなくなりました。

とはいえそれまではエラーは出ていなかったので、エラー原因の可能性としてはAPI自体の問題というよりも、

  1. バージョンを上げたことによるElasticsearch側の何かしらの処理の変化
  2. 実は色々あってElasticseach自体を一度立て直したが、その際に過去に立ち上げたElasticsearchのインスタンスと何かしらの設定が変わってしまっており、処理が変化

したことによってAPIの1コンテナあたりのリクエスト数の上限が変化した、などが考えられますが、正直に言うと原因が完全に解明できたとは言えず、お手上げ状態です。

最後に

迂闊なバージョンやインスタンスタイプの変更などは、一見問題なさそうでも後々問題を引き起こす可能性がある、ということを身にしみて感じました。 どうすれば防げるかというとなかなか難しい話ですが、心構えだけは持っておくとなにかあった時に冷静に対処できるかもしれません。

みなさんも、バージョンアップ等をするときは不測の事態にくれぐれも注意しましょう。

Jetpack Composeでネットワーク上の画像をUIに表示する

こんにちは。エキサイト株式会社 Androidエンジニアの克です。

今回はJetpack ComposeのUIで、URLから画像を表示する方法についてお話します。

現在、画像の読み込みに関しての機能はComposeには実装されていませんが、こういった「必要とされているがまだ利用することはできない機能」をサポートするライブラリ群としてAccompanistというものがあります。

こちらに画像表示のためのライブラリも存在しているので、今回はこれを利用していこうと思います。

※ 今回紹介する機能はいずれJetpack Compose本体に実装されることが想定されます。サポート状況については公式のドキュメントを参照してください。

使用するライブラリ

Composeで画像を表示するためのAccompanistライブラリとして、下記の2種類が存在します。

  • Coil
  • Glide

Glide

GlideのCompose用のライブラリです。 ただし、特に理由がない場合には後述するCoilを利用することが推奨されています。

Unless you have a specific requirement to use Glide, consider using Coil instead.

https://google.github.io/accompanist/glide/

Coil

CoilのCompose用のライブラリです。 Glideと比較すると、Coroutineのサポートが強くComposeと相性が良いという理由でこちらの利用が推奨されています。

https://google.github.io/accompanist/coil/

実装

URLから画像を読み込んでImageに表示するだけであれば、実装はとても簡単です。

// Coin
Image(
    painter = rememberCoilPainter("画像のURL"),
    contentDescription = null
)

// Glide
Image(
    painter = rememberGlidePainter("画像のURL"),
    contentDescription = null
)

他にも画像の加工やアニメーションなど、様々な機能がサポートされています。

公式のドキュメントを参考にしていろいろと試してみるとよいでしょう。

最後に

既存のView実装でできていたことはComposeでもできるようになっていくでしょう。

Composeはまだベータ版であり足りていない機能も多いですが、7月に安定版がリリースされる予定ですし徐々に機能も拡充されていくと思います。

扱いやすい面も多いため、Composeのこれからの発展が楽しみです。

WebPush機能を使ってみる

はじめましてtaanatsuです よろしくお願いいたします。

初記事ということで、今回はWebPush機能を作っていこうと思います。
それでは、やっていきましょうか。

流れ

  1. Push通知を許可するかの確認用リンク作成
  2. manifest.jsonの作成
  3. サービスワーカー用のJavaScriptを作成
  4. 公開鍵と秘密鍵を使ってサーバーキーを作成
  5. WebサーバからPush通知を送信できるようにする
  6. Push通知を無効化する

以上です

Push通知を許可するかの確認用リンク作成

まずはPush通知を受信する、ブラウザ用のコードを書いていきます。
以下のようなHTMLを作成します。

index.htmlとして保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <title>WebPushテスト</title>

   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>

   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="WebPusher">
   <link rel="apple-touch-icon" href="icon-152x152.png">

   <!-- ウェブアプリマニフェストの読み込み -->
   <link rel="manifest" href="manifest.json">

   <link rel='icon' type='image/png' href='favicon.png'>

    <script defer src='service-worker.js'></script>
    <script src='webpush.js'></script>
</head>

<body>

    <a href="javascript:allowWebPush()">WebPushを許可する</a>

</body>
</html>

manifest.jsonの作成

こちらも簡易的ではありますが、作成します。

{
    "name": "example webpush",
    "short_name": "webpush",
    "theme_color": "#44518d",
    "background_color": "#2e3659",
    "display": "standalone",
    "scope": "/",
    "start_url": "/"
}

サービスワーカー用のJavaScriptを作成

ここからが本番です。
サービスワーカーを利用して、プッシュ通知の機能をつけていきます。

以下のファイルをservice-worker.jsとして保存します。

/**
 * プッシュ通知を受け取ったときのイベント
 */
self.addEventListener('push', function (event) {
    const title = 'Push通知テスト';
    const options = {
        body: event.data.text(),  // サーバーからのメッセージ
        tag: title,               // タイトル
        icon: 'icon-512x512.png', // アイコン
        badge: 'icon-512x512.png' // アイコン
    };

    event.waitUntil(self.registration.showNotification(title, options));
});


/**
 * プッシュ通知をクリックしたときのイベント
 */
self.addEventListener('notificationclick', function (event) {
    event.notification.close();

    event.waitUntil(
        // push通知がクリックされたら開くページ
        clients.openWindow('https://localhost:8080')
    );
});

公開鍵と秘密鍵を使ってサーバーキーを作成

以下のサイト様で発行できます。
Public KeyPrivate Keyをコピペで持ってきます。

https://web-push-codelab.glitch.me/

これらの情報を用いてサーバーキーを作成します。
以下のコードをwebpush.jsとして保存します。
また、3行目のPUBLIC_KEYに上記サイトで取得したPublic Keyを当て込めてください。

/**
 * 共通変数
 */
const PUBLIC_KEY = 'ここに取得した「Public Key」を書く';


/**
 * サービスワーカーの登録
 */
 self.addEventListener('load', async () => {
    if ('serviceWorker' in navigator) {
        window.sw = await navigator.serviceWorker.register('/service-worker.js', {scope: '/'});
    }
});


/**
 * WebPushを許可する仕組み
 */
async function allowWebPush() {
    if ('Notification' in window) {
        let permission = Notification.permission;

        if (permission === 'denied') {
            alert('Push通知が拒否されているようです。ブラウザの設定からPush通知を有効化してください');
            return false;
        }

        if (permission === 'granted') {
            alert('すでにWebPushを許可済みです');
            return false;
        }
    }
    // 取得したPublicKeyを「UInt8Array」形式に変換する
    const applicationServerKey = urlB64ToUint8Array(PUBLIC_KEY);

    // push managerにサーバーキーを渡し、トークンを取得
    let subscription = undefined;
    try {
        subscription = await window.sw.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey
        });
    } catch (e) {
        alert('Push通知機能が拒否されたか、エラーが発生したか、iPhoneでの実行かが原因でPush通知は送信されません。');
        return false;
    }


    // 必要なトークンを変換して取得(これが重要!!!)
    const key = subscription.getKey('p256dh');
    const token = subscription.getKey('auth');
    const request = {
        endpoint: subscription.endpoint,
        publicKey: btoa(String.fromCharCode.apply(null, new Uint8Array(key))),
        authToken: btoa(String.fromCharCode.apply(null, new Uint8Array(token)))
    };

    console.log(request);
}



/**
 * トークンを変換するときに使うロジック
 * @param {*} base64String 
 */
function urlB64ToUint8Array (base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

ここまでで、フロントエンドの準備は完了です。
サーバ環境で実行してみます。

PHPがインストールされていれば、簡易サーバを簡単に立ち上げることができるのでそれを利用してみてもいいでしょう、

$ cd index.htmlがおいてあるディレクトリ
$ php -S localhost:8080

上記コマンドの場合、 http://localhost:8080 にアクセスするとページが表示されるかと思います。

「WebPushを許可する」を押してPush通知を許可してみます。
これでPush通知を受信する手はずは整いました。

ここでブラウザコンソールを見てみると、

  • endpoint
  • publicKey
  • authToken

の情報が表示されると思います。
これらはPush通知を送信する際に必要になりますので、適当な場所にコピペして残しておいてください。
webpush.jsの52〜54行目にこれらを表示するコードが仕込んであります)
なお、本来の使い方としては、これらはDBなどに保存しておき、PHPなどから利用します。

WebサーバからPush通知を送信できるようにする

ここからはPush通知を送信するお話。
PHPでサーバからブラウザに向けてPush通知を送信していきます。

まずは以下のライブラリをcomposerを利用して取得します。
https://github.com/web-push-libs/web-push-php

$ composer require minishlink/web-push

次に、Push通知を送信するコードを作成していきます。 SendPush.phpとして保存します。 コード中のキーなどをの情報は適宜変更してください。

<?php
require_once 'vendor/autoload.php';

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

const VAPID_SUBJECT = 'ここにあなたのWebサイトのURL(http://localhost:8080/ など)';
const PUBLIC_KEY = '公開鍵( https://web-push-codelab.glitch.me/ で取得したもの )';
const PRIVATE_KEY = '秘密鍵( https://web-push-codelab.glitch.me/ で取得したもの )';

// push通知認証用のデータ
$subscription = Subscription::create([
    'endpoint' => 'ブラウザのコンソールで表示されていた「endpoint」',
    'publicKey' => 'ブラウザのコンソールで表示されていた「publicKey」',
    'authToken' => 'ブラウザのコンソールで表示されていた「authToken」',
]);

// ブラウザに認証させる
$auth = [
    'VAPID' => [
        'subject' => VAPID_SUBJECT,
        'publicKey' => PUBLIC_KEY,
        'privateKey' => PRIVATE_KEY,
    ]
];

$webPush = new WebPush($auth);

$report = $webPush->sendOneNotification(
    $subscription,
    'push通知の本文です'
);

$endpoint = $report->getRequest()->getUri()->__toString();

if ($report->isSuccess()) {
    echo '送信成功ヽ(=´▽`=)ノ';
} else {
    echo '送信失敗(´;ω;`)';
}

これで準備は完了です。
実行してみましょう。

$ php SendPush.php

これでブラウザにPush通知が表示されたと思います。

Push通知を無効化する

次はPush通知を無効化していきましょう。 webpush.jsに以下のコードを追加します。

/**
 * WebPushの許可を取り消す
 */
async function denyWebPush() {
    const subscription = await window.sw.pushManager.getSubscription();
    if (subscription) {
        // Push通知を許可している場合は許可を取り消す
        subscription.unsubscribe();
        const request = {
            endpoint: subscription.endpoint
        };

        // このendpointをキーに、DBから情報を消したりする
        console.log(request);
    }
}

HTMLの方には以下のコードを追記

<a href="javascript:denyWebPush()">WebPushを拒否する</a>

リンクをクリックするとブラウザコンソールにendpointが表示されると思います。
これでPush通知は無効化されました。

試しにPush通知を送信してみてください。

$ php SendPiush.php

すると送信失敗のメッセージが表示されると思います。

ブラウザコンソールに表示させたendpointは、Push通知の許可を行った際に発行されるendpointと同値になるはずです。
DBにPush通知の送信先情報を登録していた場合、このendpointの情報をもとにDBからデータを削除するのに使います。

以上となります。

終わりに

ブラウザでPush通知を行える時代が来ております。
お手軽にPush通知を試せ、サービスにもお手軽に組み込めそうで良い感じですね。(iPhoneは対応してくれませんが…)
極力コピペで作れるようにしておりますので、ぜひともお試しください。

今回はここまで。
それではまた次回お会いしましょう。

参考にさせていただいたサイト様

記事を書く上でお世話になりました。

AWS ECSにおけるログ保存コスト削減のススメ・S3圧縮編

こんにちは。 エキサイト株式会社の三浦です。

以前、こんな記事を書きました。

tech.excite.co.jp

端的に言えば、「AWS ECSのログを保存する時、Fluent Bitをログルータとして使用すればCloudWatch以外にもログを流すことができ、適切にログの流し先を選択すればコストを削減できる」という話でした。

今回は、その中の1つである「S3にログを流す方法」について、ログ保存時に圧縮を行うことで更にコストを削減できる、というお話です。

S3におけるログ保存の流れ

Fluent Bitを使ってS3にログを保存する場合、通常は

  1. コンテナのログをFluent Bitが収集する
  2. 一定時間経過、もしくは一定サイズまでログが溜まったら、S3へ送信

となります。

この時、何も指定をしなければそのままS3へログが送られるのですが、圧縮して送ることができれば、送信するファイルサイズ・及びS3に保存されるファイルサイズが減るため、コスト削減になるという寸法です。

圧縮方法

Fluent Bitの設定ファイルの [OUTPUT] セクションにおいて、以下の3つの点を修正することでファイルを圧縮してS3に送信することができるようになります。

[OUTPUT]
    Name s3
    ...
    s3_key_format /test-$UUID.gz
    compression gzip
    content_type application/gzip

s3_key_format$UUID 変数と gz 拡張子をつける

S3へ出力するときのパス・オブジェクト名となる s3_key_format に、 $UUID 変数と gz 拡張子をつけます。

gz 拡張子をつけないと、S3上のファイルをAthena等で参照しようとする時にgzip圧縮されていると判定してくれないため、指定は必須です。 この時、明示的に $UUID 変数も入れておかないと、自動的にファイル名末尾にUUIDがついてしまい gz 拡張子を指定できないため、こちらの指定も必要になります。

compressiongzip を指定する

compressiongzip を指定することで、gzip圧縮してS3に送信してくれるようになります。

content_typeapplication/gzip を指定する

こちらは必須ではなく、指定せずとも問題はありませんが、正しい content_type を指定したほうが良いと思います。

圧縮結果

圧縮した結果、S3のファイルサイズは約1MBから約100KB程度まで下がりました。

f:id:excite-takayuki-miura:20210628142153p:plain
圧縮前

f:id:excite-takayuki-miura:20210628141804p:plain
圧縮後

さいごに

S3自体がもともと安価なため、よほどログ量が多くない限りは莫大なコスト削減になるわけではないですが、それでもストレージ料金や各種通信料金の削減にはなるかと思います。 なお注意点として、Fluent Bitのバージョンが古いと s3_key_format における $UUID 指定や compression の設定ができない可能性もあるため、新しいバージョンを使用してください。

MiroでオンラインKPTしてみた話

f:id:ixit-kata:20210624162559p:plain

こんにちは。エキサイトHD、iXIT株式会社の片岡です。

4月に育休から復帰したのですが、2年休業してる間に世の中はコロナ禍突入、テレワークメインになり、浦島太郎はついていくのに必死です(汗

 

先日、担当した短期プロジェクトのリリースが終わったので、振り返りでKPTをやろうとしたのですが、そういえば、オンラインでKPTってどうやってやるの?という疑問が。

太郎なりに調べたところ、どうやらMiroというオンラインホワイトボードが使いやすいらしい。WEBでも評判良いし、社内でもボチボチ使ってるところがあるみたい。ということで、ツールはMiro+Zoomを使ってみることに。

KPT準備

今までのオフラインKPTだと、事前に準備しておいてもらうことはあまりなかったのですが、今回は事前にMiroでボードを準備しておいて、KPTそれぞれの意見を前もって付箋で張っておいてもらうようメンバーにお願い。ボードは、「Start/Stop/Continue Retrospective」というテンプレートを使ってみました。

f:id:ixit-kata:20210623224327j:plain

振り返り用のテンプレらしい

 

 KPTメンバーは私入れて4名だったので、4名それぞれ、付箋で色をわけてみることに。Aさん黄色、Bさんはピンク、みたいな。いちいち付箋に名前書かなくても良いので楽だしわかりやすいです。

いざ、オンラインKPT

オンラインKPTの進め方はオフラインとほぼ同じです。違うのは、付箋を書いたり貼ったりする時間がないことくらい。

ただ、今回は、KPTのTが壮大になりそうな予感がしたので、直近の具体的なアクションに落とし込むActionというエリアも追加してみました。

zoom+Miroの共同編集で進行。zoom画面共有は使いません。

 

で、KPT後のアウトプットがこちら。ばばーん。

f:id:ixit-kata:20210624090104j:plain

画像が粗くてごめんなさい

左から、Keep/Problem/Try/Action。手書き箇所は、iPadのApplePencilで書いてます。

以下、MiroをKPTで使ってみた所感です。

メリット

①事前に意見出しができるので、議論に時間をたくさん使える 

KPT、まじめにやるとけっこう時間かかります。付箋書く時間が長くかかるのは仕方ないのですが、その付箋を順番に前に出て貼って発表という一連の動作のロスタイムも地味に多くて、ファシリテーターは時間気にしがち。それが事前に付箋書いて貼ってもらうだけで、こんなにゆっくり議論ができるとは。なんて素晴らしい!

 

 ②付箋の色で誰の意見や担当かすぐわかる

KPTの中で、付箋をカテゴリ分けしていくと、どれがだれの意見かわからなくなりがちですが、人で色分けしてると一目瞭然。オフラインでも付箋の色を変えることは可能ですが、人数多いとなかなか厳しく。営業、デザイン、運用、開発、いろいろな立場のメンバーが集まって開催されるKPTですが、俯瞰してボードを見ると、例えば、ナレッジ蓄積についての意見は運用や開発からが多い、KPIや横展は営業からの意見が多いなど、視点の違いがより明確になって面白いです。人数多いときは、職種によって付箋の色を変えても良いかもしれないですね。

Actionは、意見出しの際は白い付箋で書き出して、そのあと担当が決まったらその方の付箋の色に変更しました。こんな使い方できるのもオンラインならでは!

 

③手書きも使える

今回、PCとiPadで同じアカウントでログインしていたのですが、複数端末からまったく違和感なく同時操作できるので、PCメインで操作しながら、ちょっと手書きでメモしたいところはApplePencil。便利だし、使いどころ多そうです。

 

KPTを内容を残せる&共有できる

 リアルだと消してしまうホワイトボードも、Miroはそのまま残せるので、写真を何枚も撮ったり、議事録を書く手間がなく、ボードURLでチーム外への共有も簡単です。

デメリット

 ①事前に意見出しすることで、議論の中で生まれるアイデアが引き出しづらい

 KPTの良さのひとつは、色々な立場の人の意見を聞いて、新しいアイデアが出てくることです。それが事前に意見出しすることで、付箋を書く時間=考える時間が少なくなり、この種のアイデアが出づらくなってしまうなぁと。ファシリテーターは、この点踏まえたメンバーへの意見出しの働きかけが必要です。

 

うーん。デメリットは1個しか思いつきませんでした。

 まとめ

 やだ、なにこれ使いやすい。

リアルホワイトボード+付箋のKPTの欠点(終わったら消さなくてはいけない、付箋やペンの準備が必要、事前に準備しづらい)をいい感じに補ってくれて、振返りをもっと身近にしてくれる素敵ツール。

こんな世界があったのね!と太郎はちょっと感動。新しい価値観を与えてくれる玉手箱、ワクワクします。弊社もこんなプロダクトを世の中に出していきたいなぁ。がんばろう。

 

Miro、まだまだ使い込んでみて、良さげな使い方を見つけたらまたブログで報告しまーす。とりあえず社内にMiro布教するぞー。おーっ。

 

 

第1回定期勉強会「メディアのコーディング規約適用事例と効果」

会の様子
会の様子

エキサイトのあはれんです。

弊社で始まった社内定期勉強会について紹介いたします。 第1回定期勉強会は「メディアのコーディング規約適用事例と効果」でした。 メディアチームのコーディング規約について説明を聞き、エキサイトHDのメンバーで議論しました。 最大参加人数は51名にも達し、多くのメンバーが参加してくれました。😊🎉

コーディング規約を決めている定例会の議論の活性化方法から始まり、 命名規則等のコーディング規約について数多くのメンバーが意見を出し合っていました。

勉強になったポイント

今回の定期勉強会で、私個人が勉強になったことをピックアップして紹介します。

コーディング規約「早期returnを使用する」

私も早期returnを使用することには賛成でして、 「処理に関係ない条件の状態はさっさとreturnして、気にしないといけない条件の状態を減らしたい」 という気持ちでいつもreturnを使っています。

定期勉強会では、早期returnを使用する理由として以下が挙げられていました。

returnしないでいるとその後もダラダラ書けてしまい結合度が高くなる。 早期returnをすることでダラダラ書けない状態にする。

エンジニアに結合度を高くなるコードを書かせないようにする工夫として、 「早期return」を使うという観点はなかったので、 新たな視点で「早期return」を使う理由が知れてよかったです。

コーディング規約「単純分岐でSwitch文は使用しない」

これは、議論が盛り上がったコーディング規約でした。 その議論の中でも以下の意見には、ハッとさせられました。

switchだと、変数の状態によって処理が変わることがわかる。 ifの条件はなんでも書けるので、変数の状態によって処理が変わるかどうかはすぐに判断できない。

言われてみればそうなのですが、意識していなかった部分でした。 読みやすいコードを書く上で、上記の考え方は重要なことだと思いますので、 これからコードを書くときは意識してみようと思いました。

まとめ

コーディング規約に関して議論することで、コーディング規約の理由を理解することができてよかったです。 これからも社内の定期勉強会で得られた知見やノウハウを紹介していきますので、見ていていただけると幸いです。

ftlに書いたSQLに補完とシンタックスハイライトを効かせたい

はじめに

普段、MyBatis FreeMarkerを使って、ftlファイルにSQLを書いていますが、IntelliJ のデフォルトの状態だと、補完やシンタックスハイライトが効かず、下図のようになります。 f:id:b_murabito:20210621001342p:plain

SQLはSequel ProやSequel Ace、AdminerなどのDBクライアントツールを使って書いたものを貼り付けることが多いのですが、Intellij上での視認性が悪いので、シンタックスハイライトが効くようにしてみます。

設定方法

設定->言語&フレームワーク->テンプレートデータ言語で下図のような設定を追加します。

パスには、ftlファイルまたはftlファイルがあるディレクトリを指定します。

言語には使用しているDBを指定します。

IntelliJ IDEAのCommunity版だと指定できないDBがあるので注意

ここではMySQLを選択しました。

f:id:b_murabito:20210621002149p:plain

設定後はこんな感じになります。 f:id:b_murabito:20210621000916p:plain

補完も効くようになりました。 f:id:b_murabito:20210621001114p:plain

おわりに

無理矢理感はありますが、これでftlファイルに書いたSQLSQLとして認識させられるようになりました!