2016-07-14

FileMaker によるレスポンシブな出庫画面プロトタイプ

 FileMaker をバックエンドに使用したレスポンシブな出庫画面を作ってみました。invoice.php という一つのファイルで PC、タブレット、スマホ(Androidを含む)に対応しています。FileMaker のようにデバイス毎にレイアウトを用意する必要が無いところが良いところです。 いまのところ照会専用(更新不可)です。しばらくの間、下記で公開しますので、興味のある方はお試しください。

レスポンシブな FMEasy在庫 プロトタイプの試用会場へ
(しょっちゅう弄っているのでエラーを起こすことがあります。スミマセン。)
Windows Edge


 以下では本プロトタイプの諸機能を説明します。が、まだ照会部分がおおよそできただけで、動作しないモノが多いです。また、エクストリーム・プログラミング(別名:行き当たりバッタリ開発)っぽく開発しているので、ここに書いてる仕様は無かったことになる可能性もあります><。ご了承ください。


オブジェクトのスライドと伸縮


 以下は iPad Air 2 を横置した場合と縦置した場合です。スクリーンの幅が狭くなると右側にある[伝票番号]などのオブジェクト群が下にスライドします。また、オブジェクトによっては、左右に伸縮します。

iPad Air 2, Safari


表示項目数が変わるアコーディオンメニュー


 同じデバイスでもスクリーン幅に応じて、縦置き、横置きでメニューに表示される項目数が変化します。下図左は Nexus 7 Android 縦置の画面になりますが、同じNexus 7 でも横置にするとメニューの項目数が増えます(図右上)。 上下にスクロールしてもこのメニューは常時表示されますが、メニューの左の青いバーをクリックするとメニューが折り畳まれ(下図右下)、商品情報表示を邪魔しないようにします。青いバーを再度タップすると、メニューは再度表示されます。

Nexus 7, Android

接続手段( API )について


 本プロトタイプには接続手段( API )を選択し、それぞれの実行速度を計測する機能が用意されています。選択できるAPIは以下の通りです。

  1. FileMaker API for PHP
  2. fx.php
  3. FileMaker Server Custom Web Publishing with XML (以降 fm.xml)
  4. PDO(ODBC)

 いずれも、バックエンドは 同一のFileMaker Server  で、アクセスするデータベースは同一の「FMEasy在庫 R1.5」となっています。


API の応答時間


 応答時間は、画面右上端に表示されます。


 
 この時間は、出庫データの問い合わせからページ表示までに要した時間を表しています。


APIの切り替え


 使用中の API 情報は、画面右上で確認できます。
 以下の例では、PDO を使用中で、このページの表示が完了するまでに 0.552 秒かかったことがわかります。




 API を切り替える場合は、メニューボタンエリアの右下端のボタンをクリック(タップ)します。
 すると、API 選択用のドロップダウンメニューが表示されます。メニューを展開させてから、希望の API を選択します。


 たとえば、FM API for PHP (専用)を選択すると、使用中の API が下図のように変更されます。



 API を切り替えてもデータの自動読み込みは行われませんので、 ボタンを実行することによって、新しい API でのデータ読み込みを行ってください。
 尚、表示幅が狭くボタンが表示されない場合は、レコード移動用のボタンや ボタンを実行してください。

注:
上記のドロップダウンメニューで(既存)は「FMEasy在庫 R1.5」の既存のレイアウトを使用し、(専用)はWebアプリに不要な要素を排除し、レイアウトテーマに「クラッシック」を使用したカスタムWebに最適化されたレイアウトを使用しています。



出庫明細部


 出庫明細部(商品情報が繰り返し表示されるエリア)の表示項目は、[項目選択…]から選択することができます。お使いのデバイスのスクリーンに合わせて、表示項目を選択してください。

その他

 ボタンにはチップツールがついているので、PCでマウスポインタを合わせるとそのボタン機能がなんとなくわかりますが、現状、多くのボタンが開発中です><

 左のボタンですが、ヘッダ部にある場合と、取引先や商品に隣接している場合があります。 ヘッダ部にある場合はクリックすると検索画面に移動するので、ユーザが検索条件を入力して実行すると検索結果が一覧表示され、目的のレコードを選択すると元の画面に戻り、選択したレコードが表示される仕様となります。一方、取引先や商品に隣接している場合は一覧表示されて選択するところまでは同様ですが、こちらの場合は選択した取引先(部署)または商品が入力されます(入力支援機能)。このあたりは、FileMaker Pro、インスタントWeb、WebDirect の機能に準じるものになる予定です。 


2016-07-06

FileMaker でレスポンシブなWebアプリを作る

 FileMaker(以下、FM)のデータベースを FileMaker Pro 以外のクライアント ― ブラウザ、iPhone/iPad、Android ― でも運用する場合、開発環境をFMにすべきか、カスタムWeb にすべきかを考えると思いますが、その際に考慮べき事項を比較表にまとめてみました。

×: terrible,  △: limited,  〇: OK,  ◎: Excellent
 
Go
WebDirect
Custom Web
開発費用
(Devlopment cost)
×
ライセンス費用
(License cost)
×
×
サーバ機費用
(Server machine cost)
×
×
ライセンス体系
(License policy)
×
×
開発の容易さ
(Ease of development)
×
コードの再利用性
(Code reusability)
×
×
開発の柔軟性
(Development flexibility)
×
×
レスポンシブ性
(Responsive Web Design)
×
×
Android等非iOS機との互換性
(Android compatibility)
×
スケーラビリティ
(Scalabilty)
×
他DBへの移植
(Migration to other DBs)


この表からは、
圧倒的ではないか、カスタムWebは

という感じですが、FMの世界では「開発費用」と「開発の容易さ」が他の要素を圧倒し、Go やWebDirect が採用されやすいのではないでしょうか。逆に言えば、他の要素が重要なプロジェクトでは、FMは使用されないのです。
 
 とは言いいつつ、 FM のカスタムWeb という需要は少なからずあり、またスマホ普及に伴う Mobile First な要望もあり、小社としてもまたーりとそれらにお応えしたい、と愚考している次第です。
 そんなわけで、『FMEasy在庫 IWP/WD R1.5』(以下、FMEasy在庫)をバックエンドに使用し、 iPhone/iPad だけではなく Android 等の非iOS デバイスにも対応したレスポンシブな Webアプリのプロトタイプ開発にトライしていきたいと思います。

開発環境

使用データベース: FileMaker(fmp12)
使用ライブラリ: jQuery、jQuery Mobile
対応デバイス: PC、タブレット、スマホ(非iOSデバイスを含む)


開発方針・目標

第1フェイズ


以下の方向で、FMEasy在庫の出庫関連機能をWebアプリ化→プロトタイプを作成する。
  1. マルチデバイス対応、RWD(Responsive Web Design)採用
    たとえばこんな感じで……。

    【PC利用時】

    Windows Chrome


    【タブレットPC利用時:縦置き】

    Nexus 7, Android, Chrome --- Portrait


    【タブレットPC利用時:横置き】

    Nexus 7, Android, Chrome --- Landscape


    【スマートフォン利用時】

    FreeTel Priori 3, Android, Chrome

  2. XML/fx.php/FM API for PHP/PDO(ODBC)の比較テストを適時実施
     →最適なAPIを決める(努力をする)
  3. 出庫伝票照会機能作成
  4. 出庫伝票追加・更新機能作成
  5. 出庫伝票検索機能及び一覧表示機能作成
  6. 出庫伝票PDF出力機能作成

第2フェイズ

  1. 第1フェイズで作成した機能をライブラリ化
  2. ライブラリを他のDBへ対応させる(PDOなら簡単なんじゃないかな)

第3フェイズ

  1. 上記ライブラリを使用することにより、お客様にレスポンシブなシステムをリーズナブルな価格で提供する
    \(^_^)/

 いろいろ書いてますが、予定は未定ですw


本ブログの関連記事について

 本ブログで今後公開予定の RWD によるカスタムWeb関連の記事は、カスタムWeb による開発を検討されているお客様に小社で開発したプロトタイプの仕様やテスト結果をご覧いただき、プロジェクト検討の一助になることを目指しています。


ということで、次回はこのプロトタイプの照会機能についてご紹介したいと思います。

(亀)