Elementalを公開します

Digital FusionのDaniel Woodさんが興味深いプロジェクトを立ち上げました。FileMakerで利用できる数多くの素材を、それを提供するFileMakerファイルとその設計情報とともに公開しています。

FileMakerの開発でデザインを重視する方、REST API統合、JavaScriptによる機能拡張、SVGに興味のある方、その他FileMakerで開発をするすべての方に、一度チェックしてみることをお勧めします。


digital fusion

Elemental has Landed

(元記事はこちら)

Daniel Wood
2019/6/17

エレメンタルティーザー

はじめに

Elementalを紹介します。私がいつも記事に添付するデモファイルよりも、ずっと大きくて詳細な製品/リソースを今回初めて構築しました。ここ3ヶ月の間、ブログ記事の投稿がなかったのは、このプロジェクトに空き時間をすべて費やしていたからです。

この記事を読む前に実際に触ってみたいという方は、 https://www.elemental-fm.comからファイルをダウンロードしてください。

それは一体何ですか?

Elementalは製品というよりもむしろリソースです。ここ2年ほどの間に、次のようなデザインやユーザインタフェースに関する記事が増えていた傾向に気付いた方がいたかもしれません。

これは、使いやすく視覚的に魅力的なデザインと設計手法が、私をとてもわくわくさせるからです。ここではユーザ体験が第一であり、ユーザがソリューションを使用することの楽しさを向上させるためにできることは、すべて非常に重要です。あなたが構築したかもしれないソリューションを、ユーザが1日に何時間使うのか考えてみてください。あなたはそれが可能な限り楽しくなることを望むはずです。

これがElementalを作った理由です。私の目標は、あなたが自分のソリューションに組み込むことができるUIリソースを提供し、ユーザ体験を改善することです。それは、より良いユーザインタフェースを通してか、あるいは単により良いビジュアルデザインを通してかも知れません。

Elementalの価格は?

ElememtalはFileMakerコミュニティに対して無償で提供され、今後もそうあり続けます。私が行ったことの多くは、さまざまなAPIサービスとの統合を支援する、あるいは自由に利用可能なリソースを自分のソリューションで簡単に使用できるようにするコードを書くことです。

私はElementalを購入するための費用を要求しませんが、その代わりに私のサイトにdonate(寄付)オプションを作りました。Elementalを構築することには多くの時間と労力を要します。私はElementalに機能セットを増やしていきたいと強く思っていて、そのためにこのオプションを追加しました。これによってあなたはElementalの継続的な発展に貢献することができます。あなたが本当にこの製品を気に入って私の開発を手助けしたければ、寄付をすることができますが、これは強制ではありません。

Elementalには何が含まれますか?

この最初のバージョンには、5つのセクションがあります。

アバター

アバターは、ウェブ上でよく見かけるものです。ユーザ登録ができるサイトの多くでは、プロフィール写真をアップロードできます。自分の写真を使わない場合、ランダムに生成されたアバターが表示されるものもあります。

私は、さまざまなアバタージェネレータを提供するREST APIサービス(全部で23)を基本的にすべてまとめました。それらは微妙に異なり、それぞれカスタマイズできるオプションの異なる機能セットを提供します。

ほとんどはあなたが指定するseedに基づいてユニークなアバターを生成します。seedは、一般的にユーザに固有のものです。ほとんどの場合、それは個人の名前になりますが、より簡単に主キーのUUID、あるいは何でも好きな文字列を使用できます。

アバタージェネレータはそのseedを取得してハッシュし、ユニークなアバターを生成して出力します。

Elementalには、Avatar Generatorsというスクリプトグループがあります。これらは、スタンドアロンで動作するスクリプトとして構築されていて、アバタージェネレータを実装するためにあなたが自分のソリューションにコピー&ペーストすることができます。自分のソリューションで使用するために、スクリプトを2ヶ所修正する必要があります。

  • スクリプトの最後に、返されたアバターをオブジェクトフィールド(あるいはSVGの場合はテキストフィールド)に設定するセクションがあります。これを自分のオブジェクトフィールド/テキストフィールドに指定し直します。
  • 一部のスクリプトは、渡された項目がAPIに対して有効であることを確認するために、カスタム関数@validate_inputを使用しています。スクリプトがこのカスタム関数を使用する場合は、これをソリューションにインポートします。

これだけです。APIが受け付けるすべての引数オプションを、JSON関数を使用してスクリプトに渡します。スクリプトの最初で、すべての引数が分解・抽出されているのがわかります。

APIのいくつかはアバターをSVGとして返しますが、オブジェクトフィールドにはSVGが表示されないため、これは役に立ちません(しかしWebビューアでレンダリングできるので、Elementalではアバターのプレビューにこの方法を使いました)。心配することはありません。いくつか魔法を使って、レイアウトの横に配置した一つのWebビューアで動作する、SVGからPNGへのコンバータを、Elementalに組み込みました。これがどのように機能するのか探ってみてください。これについては今後の記事で詳しく説明します。

プレースホルダー

これはアバターとよく似ています。プレースホルダー画像を提供するAPIサービスと統合しました。プレースホルダーとして使用するために、サイズ、色、タイプを指定したイメージを必要とする場合に役に立ちます。製品データベースなどでプレースホルダー画像が必要な場合か、特定のサイズの画像をユーザが挿入することを期待する場合に、プレースホルダーAPIと統合して、寸法を示す画像を提供できます。

その他の楽しいプレースホルダーもあります。

SVGアイコン

これは最も多くの開発者にとって最も有用な機能かも知れません。これらのSVGアイコンは、無料で入手可能なSyncfusion MetroStudioのアイコン集からのものです。それらすべてをダウンロードし、いくつかの処理を行って、FileMakerですぐに利用できる形式にしました。これらをそのままボタンバーに挿入すると、サイズと位置が調整され正しく設定されます。このセットには7,000以上のアイコンが含まれています。

SVG/GIFアニメーション

ちょっとした動きを加えることは悪いことはありません! あなたのソリューションにもちょっとしたアニメーションを追加してみてください。これらはおよそ20種類の「読み込み中」を表すアニメーションです。「サーバー上のスクリプト実行」を実行中でユーザに終了まで待たせる場合、あるいは実行に時間がかかるその他の操作を行う場合に、これらは最適です。視覚的なフィードバックが少しあるだけで、待ち時間をユーザが受け入れやすくなります。

GIFも、MacとWindowsの両方で互換性があるので、含まれています。

SVGアニメーションで使用するSMIL言語はMac上では動作しますが、Windowsでは快適に動いてくれません。すべてのバージョンのブラウザでサポートされているわけではありません。

これらはloading.ioから無償のライセンスに基づいて取得しました(有償でさらに多くを購入できます)。これらは完全にカスタマイズ可能で、その方法についてElementalに手順を載せています。

グラデーション

あなたが好きかどうかわかりませんが、グラデーションも含まれています:)。GradientJoyから330種類以上のグラデーションの例を集め、あなたがブラウズして気に入ったものを選べるようにしました。16進数のカラーコードが含まれているので、FileMakerで独自のものを簡単に作成することもできます。

その他のクールな機能

Elementalは、いくつかの素晴らしいリソースを提供するだけではなく、ソリューションの全体がそれ自体でリソースだと考えてほしいと思っています。そこには他にも面白い小さな機能がいくつかあります。以下にそれらが何であるか、どこで見つけられるべきかのヒントがあります。

  • Elementalのテーマは完全にスタイル設定されています。
  • HTML5カラーピッカーが、アバター/プレースホルダーの例で使用されています(OSのバージョンがそれらをサポートしている場合)。
  • Jdenticonアバターには2つの範囲を指定するスライダーコントロールがあります(これも、OSのバージョンがそれらをサポートしている場合)。
  • About/Acknowledgementページに含まれるSVGアイコンのアニメーションは、静的なSVG上にCSSアニメーションのみで行われています。その仕組みを知るためには、カスタム関数@svg_animateをチェックしてみてください。これは私がこのバージョンでもう少し肉付けしたいと思った機能でしたが、それは次のバージョンまで待たなくてはいけないかも知れません。
  • SVGからPNG/JPGへの変換は、WebビューアでJavaScriptだけを使って行われています。それが使用されているアバター/プレースホルダーの例をチェックしてみてください。
  • その他にもたくさんあります!

まとめ

Elementalを構築する作業の原動力は、それを愛する気持ちでした。ここ2ヶ月のほとんどの夜は、通常の生活を送る代わりにこれに取り組んできました! あなたがElementalを楽しんで、使える何かを見つけることを願っています。それが小さなものであっても、あるいは単にデザインやユーザインタフェースについて考えるきっかけになるだけであっても、私の仕事は報われます。 🙂

Leave a Reply