急な開発でも対応できるVue.js
Silicon Valley Super Ware
2020年5月28日
急な開発でも対応できるVue.js
今日は、急遽Webサービスの試作依頼がありました。
ということで、約半日かけてまずは機能優先で提供しました。 この開発は、プリント基板開発のツールで基板のテストをする テストポイントのチェックに使う物です。
現状は、バックエンドは動かしておらず、ブラウザーで動作する スタンドアロン型のWebサービスです。
期間限定で公開します。（1週間程度で削除します）
今回はこのWebサービスの作り方を特集するわけではないので、 詳しい使い方や機能は説明しませんが、「Webサービス」の 実例として、紹介するのが目的です。
どんなWebサービスか？
やる事は、設計データと、データの解析条件を入れて、希望通りのテストポイントや テストポイントを作らないはずの接続にテストポイントがあるかをチェックするものです。
作業自体は単純な確認ですが、人手でやると、手間と時間がかかる確認作業です。 少し大きな設計になると、丸1日仕事になる事もあります。しかし、Webサービスで行うと 数分で作業が終わります！
つまり、このサービスがあれば、作業時間はほとんどいらないので、 この種の作業をしなければならない人にはとても便利なWebサービスという事になります。
実際に手間のかかる作業をやったことのある人は、その経験を生かしてWebサービスが作れる例です！
やる事は、４つのファイルを読み込んでそれらの情報を突き合わせて確認をして、 結果を表示するという物です。
最初はフォームから必要なファイルを選択して読み込みます。 ファイルの処理に少し時間がかかるので、作業中の表示にBootstrapのSpinnerを使っています。 ファイルの読み込みが終了すると結果を表示します。
今回はバックエンドはないので、結果を表示するだけで、データベースなどにデータは残しません。 完全にフロントエンドのUIとデータ処理だけのWebサービスです。 後で、結果をマイクロソフトのExcel形式のファイルに出力する機能を追加予定です。
Webでの公開用にFirebaseを利用！
試作のサービスを何人かの設計者に試して頂いてフィードバックを頂くために Webでサービスを公開しています。
この公開にはFirebaseのホスティング機能を利用しています。 VUEで作成したサービスをFirebaseでインターネット上に公開して利用できます。
先月と今月のお問合せフォームのサービスもインターネットで公開してますが、 これもFirebaseのホスティング機能を利用しています。
Firebaseを使うと手軽にインターネットに公開してテストできます。
しかも、テストの利用の場合の殆どは無料で利用できます！
急な依頼でも、フレームワークとFirebaseを駆使すれば慣れれば1日足らずで 簡単なWebサービスが作れます！
ページの構成
今回は試作で機能も限定的なのでシンプルなページ構成です。 「メインのページ（Home）」と「簡単な説明のページ（About）」の 2ページだけです。
Aboutのページは、簡単な使いかたの説明で、プリント基板の技術者なら 分かる程度の説明をつけてみました。通常のWebページに近くプログラムは 動かしていません。
機能はメイン（Home）に集約していますが、HomeはUIの操作のみです！
データ処理はVUEXのstoreに集約しました。
理由は簡単で、UIは後で作り直すので、切り離しやすいように完全に UIとデータ処理を分けて作りました。
メインのページの表示は3種類です！
- ファイルの読み込みと処理の開始のフォーム
- データ処理中のSpinner
- 結果の表示
今回は機能確認の施策の為UIは最低限のサポートです。 結果の表示画面から入力フォームに戻る処理をまだ入れていません。 再使用する場合、ページを再読み込みする必要があります。
Vue.jsを使うとどれくらい楽か？
同じ実装を、HTML/CSS/JavaScriptだけで作ったり、これにjQUeryを 加えて作る場合、もう少し時間がかかります。半日は厳しく感覚的には 丸1日から2日はかかるとお思います。
今回は再利用する部品はなしで、Vue.jsを使って約3～4時間で作れました。 UIにかかる手間が殆どないので、時間をかなり節約できます。 基本的にデータ処理に集中できるので開発の効率が高くなります。 jQueryだと、UIを「プログラムで作る」イメージですが、 Vue.jsなどのフレームワークの場合、UIは「UIを書く」イメージなので 作業が早く出来る感じです。
Reactの方が私の場合慣れているので、さらに短時間で作れそうですが、 今回は別のサービスへの組み込みを考えているので、Vue.jsで作りました。
最後になりましたが、サービスへのリンクです！
サービスはこちら！シリコンバレースーパーウエアでは、シンプルなWebサービスの作り方だけではなく、 より複雑なWebサービスをテーマにした講座も同時に提供しています。 さらに、作ったWebサービスを利用したビジネスの展開まで考えたWebサービスの 作り方がわかるようになります。
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿