FileMaker で WebViewer を使うなら Alpine.js + Tailwindcss

#FileMaker で WebViewer を使うなら Alpine.js + Tailwindcss

####このような人に

- ver19.3 以降の windows 版を利用
- jQuery はもう卒業したい
- 今一番勢いのある CSS フレームワークである Tailwindcss で開発したい
- WEB ビューワをもっと楽して使いたい

[この記事の続編 : Alpine.jsを使ったWEBビューワ開発](https://qiita.com/calafate40/items/8adbb2b3c61a68acc763)

## まずはここで取り上げる技術の紹介

## [Alpine.js](https://alpinejs.dev/)

2019 年に生まれたので日本国内ではあまり耳にしませんが、[bestofjs](https://bestofjs.org/projects?tags=framework)のフレームワーク部門でもランクインしています。
なんと言っても超軽量なところ。jQuery より軽量です。 React や Vue のように大規模なフレームワークではないので、ビルドせずにすぐに使えます。CDN 経由でもいいし、スクリプトタグの中に入れても全く負担感がない。minify したデータはわずか 33kb です。

## [Tailwindcss](https://tailwindcss.com/)

まあこれは言うまでもないですが、今一番乗っている CSS フレームワークですね。
初見では HTML にズラズラとクラスを追加していくので見難いと思いましたが、コピペしながら使っているうちに覚えました。Bootstrap のようないかにもな所がなく、自然で Tailwind 臭さというのが全くありません。その反面デザインセンスは作成者に委ねられますが。
ボタンやフレームなどのカスタマイズ性が低い（特に色合い）FileMaker で使うと FileMaker 臭がなくなります。
公式 document が非常に充実しているので、ほぼ必ず答えが見つかります。

---


## フロントエンドフレームワークは Alpine.js 推し

最初は[Svelte](https://svelte.dev/)をしばらく使っていてかなり気に入っていたのですが、Alpine.js に触れ、その簡単さ、シンプルさを追求した思想に感銘し、この数ヶ月色んな場面で使ってみました。IEの呪縛から解放されたので、色んな事が実務で試せるようになりましたし。
ちなみに Alpine.js + FileMaker で検索しても今現在何もヒットしないです(笑)。Alpine.js 自体の日本語情報も極めて少なく、簡単な紹介記事程度しか出てきません。

## Alpine.js の何がいいのか？

名前が示す通り、山登りの[アルパインスタイル](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%91%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB)のように最小限の装備で早く登頂する（目的に到達する）という思想(Simple, Lightweight)で作られているので、開発環境の構築とかビルドとか、その辺の煩わしさが少なく、すぐに取り掛かれ、少ない機能を工夫しながら使うようになっているので、学習コストが極めて低いです。
また、Tailwindcss が html に直接 class をずらずらと書き連ねるのと同じような感覚で、html に直接 JavaScript を記述します（複雑なロジックはスクリプトタグの中に記述します）。ここは賛否分かれるところですが、直感的でいいです。
なので Tailwindcss の JavaScript 版とも言われています。

確かに html が見づらくなりますが、webviewer では所詮巨大な html は記述しませんので、FM ではそんなに気にならないと思います。web ビューワーの利用でよくあるフォームだったり、表、ダイアログなどちょっとした部品を構築するのにピッタリです。




## ということでここからコードのサンプルを

[Alpine Toolbox](https://alpinetoolbox.com/examples/cards)
ここにAlpineTooboxというAlpine.jsを利用したサンプルコードがあるのですが、その中のカードリストレイアウトがあります。cssフレームワークはtailwindcssです。

![スクリーンショット 2021-12-19 15.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/4b2ba6c0-64fe-1d08-aa38-90135d04fb00.png)

tailwindcssとalpine.jsはCDNを利用しているのでリンクだけですが、データ部分を除くhtmlはたったのこれだけです。
実際にリンク先に行って見ればわかりますが、非常に美しいレイアウトになっており、それがほんのわずかなコードで作られています。

```html: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タグの中、

```javascript:js
x-data="{myForData: sourceData}"
```
このsouceDataという変数に全てのカードデータが配列で入っており、それをmyForDataに格納しています。
それを

```html:html
<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ビューワを使われない人も参考になるように、できるだけ細かく書きます。

上のカード一枚一枚のデータ構造は、

```javascript:json
   {
      employee_age: '61',
      employee_name: 'Tiger Nixon',
      employee_salary: '320800',
      id: '1',
      profile_image: 'https://randomuser.me/api/portraits/men/1.jpg',
    }
```

ですので、

これがFileMakerのレコードに保存されているとするとして、テーブル構造で再現すると以下のようになりますので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/7b52bdbf-f4b8-d379-578a-f7424f69f3e8.png)




このテーブルデータをスクリプト"FileMakerでdataAPIを実行"で取得したresponse.data以下の値は

```javascript:json
  {
    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としています）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/2540b9e0-aa5d-2b17-2f7d-f33daa6ed861.png)

これで$resultDataにレコードの配列が入っています。

---

これらの処理を受け取るテーブルを作成していなかったので、とりあえず表示用のテーブルを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/6e046f08-932a-11c6-f383-ccc99a230e69.png)

 - htmlをそのまま貼り付けるフィールド html
 - 作成したdataを貼り付けるフィールド data
 - 上記2つを合体する計算フィールド c_html
 
の3つを作成し、レイアウトに3つ並べ、追加でwebビューワを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/2fa08b56-8a12-a596-509f-a6fed22b1d4b.png)

webビューワの設定は以下のように計算フィールドc_htmlを表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/8d0caaa1-7587-9b0d-52ed-3ff6927e91a1.png)

---
準備はできたので、
上の方で紹介したhtmlに

```html:index.html
<script>
      const sourceData ="___DATA___";
</script>
```
を追記し、htmlフィールドに貼り付けます。

```html:index.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ビューワで綺麗に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171037/0f049c8b-3252-61e6-54d0-ea19d316d70c.png)


これをそのまま使ってデータ部分を変えれば綺麗なデータ表示を簡単に作成する事ができます。

で、ここから先が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ビューワでの作業を極力自動化する記事を書きたいと思います。

[続編 : Alpine.jsを使ったWEBビューワ開発](https://qiita.com/calafate40/items/8adbb2b3c61a68acc763)