#FileMaker で WebViewer を使うなら Alpine.js + Tailwindcss
####このような人に
- ver19.3 以降の windows 版を利用
- jQuery はもう卒業したい
- 今一番勢いのある CSS フレームワークである Tailwindcss で開発したい
- WEB ビューワをもっと楽して使いたい
この記事の続編 : Alpine.jsを使ったWEBビューワ開発
まずはここで取り上げる技術の紹介
Alpine.js
2019 年に生まれたので日本国内ではあまり耳にしませんが、bestofjsのフレームワーク部門でもランクインしています。
なんと言っても超軽量なところ。jQuery より軽量です。 React や Vue のように大規模なフレームワークではないので、ビルドせずにすぐに使えます。CDN 経由でもいいし、スクリプトタグの中に入れても全く負担感がない。minify したデータはわずか 33kb です。
Tailwindcss
まあこれは言うまでもないですが、今一番乗っている CSS フレームワークですね。
初見では HTML にズラズラとクラスを追加していくので見難いと思いましたが、コピペしながら使っているうちに覚えました。Bootstrap のようないかにもな所がなく、自然で Tailwind 臭さというのが全くありません。その反面デザインセンスは作成者に委ねられますが。
ボタンやフレームなどのカスタマイズ性が低い（特に色合い）FileMaker で使うと FileMaker 臭がなくなります。
公式 document が非常に充実しているので、ほぼ必ず答えが見つかります。
フロントエンドフレームワークは Alpine.js 推し
最初はSvelteをしばらく使っていてかなり気に入っていたのですが、Alpine.js に触れ、その簡単さ、シンプルさを追求した思想に感銘し、この数ヶ月色んな場面で使ってみました。IEの呪縛から解放されたので、色んな事が実務で試せるようになりましたし。
ちなみに Alpine.js + FileMaker で検索しても今現在何もヒットしないです(笑)。Alpine.js 自体の日本語情報も極めて少なく、簡単な紹介記事程度しか出てきません。
Alpine.js の何がいいのか？
名前が示す通り、山登りのアルパインスタイルのように最小限の装備で早く登頂する（目的に到達する）という思想(Simple, Lightweight)で作られているので、開発環境の構築とかビルドとか、その辺の煩わしさが少なく、すぐに取り掛かれ、少ない機能を工夫しながら使うようになっているので、学習コストが極めて低いです。
また、Tailwindcss が html に直接 class をずらずらと書き連ねるのと同じような感覚で、html に直接 JavaScript を記述します（複雑なロジックはスクリプトタグの中に記述します）。ここは賛否分かれるところですが、直感的でいいです。
なので Tailwindcss の JavaScript 版とも言われています。
確かに html が見づらくなりますが、webviewer では所詮巨大な html は記述しませんので、FM ではそんなに気にならないと思います。web ビューワーの利用でよくあるフォームだったり、表、ダイアログなどちょっとした部品を構築するのにピッタリです。
ということでここからコードのサンプルを
Alpine Toolbox
ここにAlpineTooboxというAlpine.jsを利用したサンプルコードがあるのですが、その中のカードリストレイアウトがあります。cssフレームワークはtailwindcssです。
tailwindcssとalpine.jsはCDNを利用しているのでリンクだけですが、データ部分を除くhtmlはたったのこれだけです。
実際にリンク先に行って見ればわかりますが、非常に美しいレイアウトになっており、それがほんのわずかなコードで作られています。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Alpine.js Example - Cards (x-for with Local JSON Data)</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>
</head>
<body class="bg-grey-100 px-3 font-sans leading-normal tracking-normal">
<div class="container pt-8 mx-auto" x-data="{myForData: sourceData}">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<template x-for="item in myForData" :key="item">
<div
class="flex items-center shadow hover:bg-indigo-100 hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3"
>
<img
class="w-10 h-10 rounded-full mr-4"
:src="`${item.profile_image}`"
/>
<div class="text-sm">
<p
class="text-gray-900 leading-none"
x-text="item.employee_name + ' (' + item.employee_age + ')'"
></p>
<p
class="text-gray-600"
x-text="'$'+item.employee_salary/100"
></p>
</div>
</div>
</template>
</div>
</div>
</body>
</html>
ポイントはbody開始タグ直下のdivタグの中、
x-data="{myForData: sourceData}"
このsouceDataという変数に全てのカードデータが配列で入っており、それをmyForDataに格納しています。
それを
<template x-for="item in myForData" :key="item">
x-dataに渡したmyForDataをloopしてカードを1枚づつ描画しています。
vue.jsを使ったことのある人ならすぐにわかりますね？ そうですv-forと全く同じです。Alpine.jsはVueにインスパイアされていて、x-forの他に
- x-if
- x-bind
- x-on
など使い方もvue.jsとほとんど同じです。
FileMaker単体でこのレイアウト表現はまず無理ですが、Alpine.jsを使うと非常に簡単にできてしまいます。もちろんtailwind.cssでレスポンシブ対応も簡単です。
FileMakerのwebビューワで再現してAlpine.jsを体験してみる。
あまりwebビューワを使われない人も参考になるように、できるだけ細かく書きます。
上のカード一枚一枚のデータ構造は、
{
employee_age: '61',
employee_name: 'Tiger Nixon',
employee_salary: '320800',
id: '1',
profile_image: 'https://randomuser.me/api/portraits/men/1.jpg',
}
ですので、
これがFileMakerのレコードに保存されているとするとして、テーブル構造で再現すると以下のようになりますので、
このテーブルデータをスクリプト"FileMakerでdataAPIを実行"で取得したresponse.data以下の値は
{
fieldData: {
employee_age: '61',
employee_name: 'Tiger Nixon',
employee_salary: '320800',
id: '1',
profile_image: 'https://randomuser.me/api/portraits/men/1.jpg',
},
modId: '0',
portalData: {},
recordId: '2',
}
となります。これのfieldData内をwebビューワに渡してあげれば良いわけです。
本来ならdataAPIの戻り値のresponse.data以下の値をそのままwebビューワに投げ、JSONの処理はJavaScriptでやった方が高速ですし、しかも簡単ですが、一応ここではFileMakerで下ごしらえするとして、以下のようにfieldData以下の値を配列にまとめます（レイアウト名はmemberとしています）。
これで$resultDataにレコードの配列が入っています。
これらの処理を受け取るテーブルを作成していなかったので、とりあえず表示用のテーブルを
- htmlをそのまま貼り付けるフィールド html
- 作成したdataを貼り付けるフィールド data
- 上記2つを合体する計算フィールド c_html
の3つを作成し、レイアウトに3つ並べ、追加でwebビューワを配置します。
webビューワの設定は以下のように計算フィールドc_htmlを表示させます。
準備はできたので、
上の方で紹介したhtmlに
<script>
const sourceData ="___DATA___";
</script>
を追記し、htmlフィールドに貼り付けます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Alpine.js Example - Cards (x-for with Local JSON Data)</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>
</head>
<body class="bg-grey-100 px-3 font-sans leading-normal tracking-normal">
<div class="container pt-8 mx-auto" x-data="{myForData: sourceData}">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<template x-for="item in myForData" :key="item">
<div
class="flex items-center shadow hover:bg-indigo-100 hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3"
>
<img
class="w-10 h-10 rounded-full mr-4"
:src="`${item.profile_image}`"
/>
<div class="text-sm">
<p
class="text-gray-900 leading-none"
x-text="item.employee_name + ' (' + item.employee_age + ')'"
></p>
<p
class="text-gray-600"
x-text="'$'+item.employee_salary/100"
></p>
</div>
</div>
</template>
</div>
</div>
<script>
const sourceData ="___DATA___";
</script>
</body>
</html>
(この段階ではデータが何もないので何も表示されません)
そして先ほどのスクリプトで作成したデータをdataフィールドに貼り付けるとwebビューワで綺麗に表示されます。
これをそのまま使ってデータ部分を変えれば綺麗なデータ表示を簡単に作成する事ができます。
で、ここから先がAlpine.JSの本領なのですが、、、長くなってしまったので続きは次回に回したいと思います。
まとめ
Tailwind.cssの話があまりできませんでしたが、今回は特にwebビューワを使ってこなかった人にも是非Alpine.jsを使ってみて、その良さ、手軽さを体感してもらいたいと思い、ちょっとくどいですがネタにしました。
私的にはwebビューワで使うためにあるライブラリとさえ思っています。
webビューワ絡みの話題としてはグラフ、表などのライブラリを使用した、FileMakerでは到底表現不可能なものが多いのですが、Alpine.jsのいいところはそれらと共存でき、かつモーダルやドロワーの表示などwebでは当たり前に使われている機能を簡単に導入できるところです。
dataAPIから吐き出されるデータをそのまま利用して、リストやテーブル表示など少ない記述で作れますので、専用ライブラリを導入するまでもない時などAlpine.jsだけで済ませる事ができます。そしてTailwind.cssとの併用で、統一感のある見た目を作れます。
もちろん生のJSで書いてもいいのですが、、、。流石に大変です。
webビューワでの表現はやりたいと思っても未だに面倒な部分があります。データを置き換えたり、開発中はFileMaker.PerformScriptの部分をコメントアウトしたり、、、。実はこの辺が障壁になっている面もあるかなと感じています。
今回は触りの部分、紹介記事だけしか書けなかったので次回はAlpine.jsのもっと突っ込んだ話や、webビューワでの作業を極力自動化する記事を書きたいと思います。