Topへ

デバイスインターフェイス用レシポンシブ画面開発

弊社の開発実績をご紹介いたします。 さまざまな業種のWebシステム及びホームページ制作を行っております。 私たちはお客様の立場になって考え、最適な問題解決方法をご提案致します。

マルチリンガル対応のデバイスインターフェイス用レシポンシブ画面開発

現在ではスマフォやタブレットを使用して家の外からでも、家の中にある家電製品やAV機器などの装置を操作できるようになってきております。今後、ますますデバイスを制御するためのインターフェイスとしても利用される機会が増していきます。

システムの機能
機能 機能説明
デバイス操作機能 画面上のアイコンをクリックし、表示されたモーダル画面でデータを入力することにより、バックエンドのデバイスに操作指示をajaxを使って送ります。
機器情報リアルタイム更新 今回の方式はポーリング方式で一定時間経過するごとにサーバー側にデータ要求を投げることで取得したjsonデータをパースして画面に表示されたアイコン画像の状態を変化させたり、数値を更新する機能です。
今後はSocket.IOeSignalRなどのリアルタイム更新技術を活用したwebシステム開発にもチャレンジしていきたいと考えております
レシポンシブ機能 モダンブラウザ、タブレット、スマフォ用にそれぞれのデバイスに応じたレイアウトを表示します。
対応ブラウザ
IE9以上、safari、chrome、firefox、opera
タブレット
Ipad、android
スマフォ
iphone、andoroid
マルチリンガル機能 ブラウザの言語設定を自動的に判定し、日英言語の切り替えを行います。

<開発後記>

・今回のwebシステム開発では、javascriptのフレームワークを利用しませんでした。理由としてはフレームワークを使用した場合、各種ブラウザのjavascriptエンジンの仕様が異なることにより、修正を行わなければならなくなった場合。フレームワークの内部処理内容を分析しないといけなくなるからでした。機能が充実したフレームワークであればあるほど、全体像を理解するのに時間がかかります。

・フレームワークを使用しない開発を選択した結果、いくつものJqueryプラグインを利用することになりました。しかし、特定バージョンのJqueryに依存したプラグインが予想以上に多く、バージョン競合を回避するのに骨が折れました。

・実際のコーディング量の3~4割増しくらいの時間が、ブラウザやデバイス間の調整作業に費やされました。この辺りは、ノウハウの蓄積で徐々に削減されていくものと思われますが、まったくはなくならず、ある程度の余裕をもって開発に望まないと大変なことになるということを実感しました。

・時間的に余裕のある開発があった場合は、AngularJSやKnockoutJSなどのフレームワークを使用した開発も行っていきたいと考えております。

・画面デザインを考えるとき、モバイルファーストで考えるほうが、問題解決の収束が早いと思われます。PCのブラウザを基準で考えると後が大変になります。

・あと、機能を実装するたびに各種ブラウザでちゃんと表示されるか心配になるため、いちいち確認し調整しながら開発を行っていたのですが、これは今振り返ると非常に非効率的だった気がします。正しいかどうか、現時点では確信は得られておりませんが、一番問題が出そうなブラウザ(たとえばIEとか)を一種類とタブレット一機種、スマフォ一機種をベースに機能を実装していき、すべての機能の実装が済んだ段階で他のブラウザとの調整作業を行ったほうが効率が良いと思われます。

・Visual Studio 2013 Update4などSIgnalRを利用して複数ブラウザを同時チェックを行えるような「ブラウザリンク」なる機能も付加されております。期待通りに表示されない個所についてはメモ等に記録しておいて、後で一括対応するための便利な開発環境も提供されてきております。