SWITCH BLOG

システムのカリヤです。

前回のブログから、かなり時間がたってのブログとなります。

 

今回は、システム開発関係の話題です。

私は、スイッチにコーディングスタッフとして入社しました。コーディングスタッフと言ってもプログラムのコーディングではなく、HTMLコーディングです。スイッチではWebページの制作は分業で行われており、デザイナーがデザインしたページをコーディングスタッフが実際のWebページへとコーディングを行っています。私も、入社当初はいくつかのサイトをコーディングしております。現在は、システムのプログラムをメインに作っていますがこれまでの経緯もあって、制作の際はWebのフロント部分の制作にもかかわることが多くなっています。

• 「イエポス」とは？

そんな業務のうち、今回はタイトルにもあるVue.jsを使用したサイトのご紹介をさせて頂きます。

株式会社ビズ・クリエイション様が運営している、「イエポス」というサービスのサイトとなります。「イエポス」というサービスは所謂ポスティングのサービスで、運営が、住宅専門のフリーペーパーも発行しているビズ・クリエイション様ということで配布先のセグメントに特徴があります。ファミリー賃貸、集合住宅といった区分となっており住宅の購入に興味を持たれている方向けに効果的なポスティングを行うことができるサービスとなっています。

 

• 制作について

この、イエポスの運営サイトの制作を弊社で承ったのですが、全体の構成は親しみやすいものにとのご要望を頂いて、制作を行いました。

システムが関係する部分としてはポスティングの見積もりが出来るシステムの実装となります。これは、配布先や、配布枚数を入力すると見積もりの金額が計算されるものです。

同様の機能を持ったサイト自体はこれまでも多く見られるもので、特に珍しいタイプのものではありません。ただし、入力して計算するため、通常は必要事項をフォームに入力し、計算ボタンを押す動作で計算結果を表示するというタイプのサイトが多かったと思います。このため、計算を実行する度にブラウザの再読み込みがあり画面を行ったり来たりしていました。これでは、回線の状態が良くないときなどは画面の遷移に時間がかかってしまうこともあります。スマートフォンなど見られている場合などは、計算ボタンを押すことを躊躇してしまいそうです。

デザインを親しみやすいものしていることから、システムの動作部分もちょっとした操作がし易い、とっつきやすいものに出来ればと考えました。

 

• Vue.jsについて

ここで、最近話題となっているVue.jsの導入を検討しました。Vue.jsはJavaScript というWebで良く利用されている言語のフレームワークです。Googleマップのように画面が遷移せずに入力した情報がすぐに画面に反映されるようなサイトはJavaScriptを駆使して制作されていますが、このような複雑な動作をするサイトの制作にはフレームワークという仕組みを利用してプログラムを容易に構築する工夫がなされています。JavaScriptのフレームワークにはGoogleなどの開発している　Angular やFacebook　などが開発しているReactなどが有ります。

どちらも開発にかかわっている会社を見ていただいて分かる通りとても高性能なフレームワークとなっています。高性能であるために使いこなせるようになるまでの習得の時間がかなりかかるという難点があります。

そこで、今回使用したVue.jsとなりました。Angular　の計量版といった構造でフレームワークを利用するメリットを活かしつつ習得が容易で作りやすい仕組みとなっています。

「イエポス」のシステムでは、リアルタイムでの見積もり部分を構築しています。イエポスの特徴でもある配布先のセグメントや配布地域、部数といった情報をチェックボックスなどで選択操作をすると画面の遷移をすることなく情報を更新しています。選択する都度変わっていく情報から必要な情報を選択していくと、ポスティングの費用などが自動的に計算されます。ここでもボタンのクリックをしての画面遷移などは有りません。クリックをするたびにその場で画面緒計算が変わっていくため、気軽に条件を変えて見積もりをしていくことが出来る仕組みが出来上がっていると思います。ボタンを押して、次の画面に移動するのは見積もりの内容が決まって、問い合わせのメールを送る時のみとなります。

大掛かりなサイトでは、同様に画面遷移をせずに処理をするサイトも目にしたことがあるかと思いますが、Vue.jsではこのようなサイトが容易に構築できるようになっています。

 

• これから・・・

また、別の特徴として画面遷移せずに動作するサイトを構築し、将来的にスマホ向けの仕組みに対応出来るということがあります。

スマートフォン向けのアプリは、ほとんどがAndroidとiPhoneに分かれますが、通常はそれぞれ専用のプログラム言語で作る必要があります。しかし、Web　の技術を利用してアプリを構築するハイブリッドアプリというアプリの制作の方法を利用すると両方に対応するアプリを1個のプログラムで作ることが出来ます。

このハイブリッドアプリを制作するには画面遷移をせずに動作するWeb　の仕組み（シングルページアプリケーションと言います。）を構築する必要があります。今回の見積りの部分のような動きとなります。

今回のページと同様にVue.jsを使った画面遷移しないサイトを作ることで、将来的にはハイブリッドアプリでスマホアプリ化も対応出来ればと考えております。

 

スイッチでは若いスタッフも多く、新技術を積極的に学んでいっております。

お客様のご希望に良い形でお答えできるよう、これからも取り組んでいきたいと思います。

これからもスイッチをどうぞよろしくお願い致します。