【惜敗】SkyWay を FileMaker で動かそうとしてみたけれどうまくいかなかった話

はじめに

前置き

• 本記事は Qiita Engineer Festa 2023 の 新しくなったSkyWayを使ってみよう！ テーマ参加記事です。

ただし「うまくいかなかったよ」というお話なので、受賞目的などは一切念頭にありません。

重ねて記しますが、うまくいかなかったので途中で断念しています。

対象読者

• Claris FileMaker ユーザ
• SkyWay を FileMaker で動かすってどういうこと？？　と気になる方

FileMaker とは？

モダンで幅広い業務に対応できる拡張性の高いカスタム App を作成

とのことです。

SkyWay とは？

ビデオ・音声通話をあなたのアプリに実装できるSDK

とのことです。

つまり？

• この両者を組み合わせると モダンで幅広い業務に対応できる拡張性の高い アプリに ビデオ・音声通話 を実装できるということですね
• ふむ、本当かな？　試してみましょう

自己紹介

• 株式会社きみよりで代表をしています 野口啓之 / Hiroyuki Noguchi / Hi-Noguchi です
  • IT を中心とした DX コンサル／顧問などやっております
• FileMaker 開発経験は十ウン年ありますが SkyWay は今回触るのが初めてです

準備

FileMaker 無料評価版について

• FileMaker を触れる環境になければ、こちらからお試し可能です

fmp12 ファイルを作成する

• 何が必要になるか分からないので、まずは skyway.fmp12 というファイル名で、以下のテーブルを用意してみました
• フィールドは最小限で id のみになっています

• テーブルを作成すると簡素なレイアウトもできあがりました。

• で、ここからどうすればよいのか？　SkyWay 側のドキュメントを確認してみましょう

SkyWay のドキュメント確認

• JS 向けのドキュメントがあります

• FileMaker Pro 内で動かすには CDN 実行となりますので、以下の項を見ていくことにしましょう

環境構築　[CDN を利用する場合]

• すると、以下の二つのファイルが必要と書かれています
  • index.html
  • main.js
• なのでこの二つを記述するフィールドを作成するべきということですね
• さらに読み進めていくと、登録して アプリケーション ID と シークレットキーの取得 が必要とのことです
• それ以後は、具体的な実装の段階に入ってくるようなので、今はここまでにしておいて、まずは SkyWay への登録と ID, キー 取得をおこないましょう

SkyWay の利用準備

• まずアカウントを作成します
  • 持っている場合はログインしてください

• ログインしたら、まずはプロジェクトを作成します

• 続けてアプリケーションを作成します

• すると アプリケーションID と シークレットキー が用意されます。こちらを後で使うことになるわけですね
  • UUID の前半部が表示されていますが、まあ、今回の用途なら半分晒しても大丈夫でしょう……

• ということで SkyWay の利用準備はこれだけです。ね、簡単でしょう？

実装

FileMaker でフィールド用意

index.html

• SkyWay のドキュメントにしたがって index.html を記述したいので、それを格納するためのフィールドを用意します

• 雑に html というテキストフィールドを用意しました

• レイアウトで少し幅を調整して……

• ドキュメントに記載されている html の記述を貼り付けます

• 縦幅が足りていないので切れていますが、最後まで格納されています。いったんこれだけでヨシです

main.js

• 続けて JS も同じように進めましょう

• js というテキストフィールドを作成

• レイアウトで幅を調整して……

• ドキュメントに記載されている js の記述を貼り付けます
• 取り急ぎさっくりと動作確認したいので、貼り付けるべきコードは以下の二つです
  • 各種モジュールの取得 とある一行のコード
  • 末尾にある ライブラリの取得部分を除いたコード全体はこちら の全体

• そして ここにアプリケーションIDをペーストしてください, ここにシークレットキーをペーストしてください となっている箇所を、先ほど準備した SkyWay の管理画面から取得してきた上で、書き換えてください

FileMaker で WEB ビューア表示

WEB ビューアの設置

• さて FileMaker には WEB ビューア という html を解釈して表示させるための機能があります
  • Windows だと Edge, Mac だと Safari ベースのエンジンで動きます

• この WEB ビューアに、先ほど用意した html フィールドを指定してあげればよいわけです。以下のような感じですね

• 設置した後に表示させると、はい、以下のように

• ただしこのままでは動きません。なぜか？　それは html 内にある <script src="main.js"></script> という記述が、このままだと正しく解釈されないせいです
• 言うまでもなく main.js というファイルの実体はどこにも存在していません。ただ js というフィールドに main.js に書かれるべき内容があるだけです
• とどのつまり html ファイル内に js フィールドの中身をインクルードしてあげるようにすればよいわけですね

html への js のインクルード

• 正しく動かない <script src="main.js"></script> については、以下のように書き換えてください
  • [[[]]] は絶対に html で出てこない記法なので使っています

    <script>[[[js]]]</script>

• そうしたら WEB ビューアの指定を再編集して、以下のようにします

Substitute ( 
  skyway::html; "[[[js]]]" ; skyway::js
)

• 要するに html フィールド内にある [[[js]]] という文字列を js フィールドの値に置換する、ということです

挫折

• さて、これでうまく表示されるかな……！　というところで、挫折となります。
• 大きな理由としては、以下です。

カメラ マイク へのアクセス許可ができません

• WEB ビューアで使われているブラウザは Windows であれば Edge なので Edge 側で許可してあげればよいのでは……？　というところですが、2023/07 現在では 常時許可 といったことができなくなっているため、都度、ポップアップ表示されるものに対して許可をしなくてはならないのです。
• が、WEB ビューアでポップアップ表示ができません！

オフになっている場合はブロックする

• ひどい。選べない。

おわりに

雑感

• 最初に WEB ビューアや カメラ マイク 許可の仕様確認をしっかりおこなってから進めれば良かったですね！
• このまま進めたとして SkyWay は http サーバが必要とのことなので FileMaker Pro 単体では動かずに FileMaker Server を組み合わせたりする必要があるだろうなーと予測はしていました。ただその手前の段階でコケたので、検証進めてはいません。
• WEB ビューアに対する カメラ マイク 許可が容易にできるようになったら、色々とまたアプリケーションの可能性が広がると思いますが、どうでしょうかね、Claris さん……？👀
• SkyWay については、こんなに簡単に CDN ベースで組み込めてしまうのか！　というのが驚きでした。すごいですね。