プロフィール:
北海道札幌市のイメージナビ株式会社のエンジニアによるブログです。
実績紹介、技術情報などを不定期ですがポストしていきます。
よろしくお願いいたします!

月別アーカイブ: 2014年9月

前回の「Windows8タッチパネル環境を用いた物件検索ビューアの開発(概要)」では、物件検索システムの概要を紹介しました。

今回は技術的な部分を紹介します。このシステムで必要な環境は次のようになっております。

・サーバー環境
Linux(Redhat/CentOSなど)系OS
Apache、MySQL、PHP、Yii(PHPフレームワーク)
インターネット環境(クライアントとの通信)

・クライアント環境(物件ビューアインストール条件)
Windows8
.NET Framework 4.5
解像度1920×1080ピクセル(フルHD)のタッチパネルディスプレイ
インターネット環境(サーバーとの通信)

・管理用クライアント環境
Webブラウザが動作するPC
インターネット環境(サーバーとの通信)

 

■アプリケーションの動作
物件検索ビューアは.NetFreamworkを用いたWindows8アプリケーションです。このアプリケーションでサーバーと通信し、管理用クライアントであらかじめ登録しておいた物件のデータや写真データを検索します。

物件検索ビューアを使うには.NET Framework 4.5がインストールされたWindows8コンピュータと解像度1920×1080ピクセル(フルHD)のタッチパネルディスプレイが必要となります。

物件検索ビューアを起動するとまず最初に認証処理が行われます。認証に成功するとサーバーから全ての写真データを取得してローカルコンピュータに保存します。ここで取得するデータは、前回取得したデータに対しての差分情報となります。(初回のみ全て取得)
処理完了後、全ての写真データが保存され最新の状態となります。

このようにデータサイズが大きくなりがちな写真データをローカルコンピュータに保存することで、検索の度にサーバーからの写真データ読み込みに待たされることが無く、検索結果のスクロール中でも非常にスムーズな動作を実現しています。

 

■システム全体の動き
物件検索ビューアから検索処理や写真データ取得処理を行う際にサーバーとの通信を行っています。サーバーでは主にWebサーバー(Apache)、データベースサーバー(MySQL)が稼動しています。Webサーバー内では、Web APIやPHPベースの管理用Webアプリケーションが稼動しています。

14091211

今回はサーバーにAWS(Amazon Web Service)のEC2インスタンスを使用していますが、他のクラウド環境や仮想サーバー、もちろん物理サーバーでも使用可能です。

また、当システムで実装されている検索処理は全てWeb APIを用いており、内部ではJSONベースでデータの取得を行っております。検索処理の機能をアプリケーションから分離させることにより、他のプラットフォームへ移植する際、データベースアクセス処理を作り直すこともなく、そのまま利用する事ができます。そして、当システムは物件検索だけではなく、他の用途にも流用できると考えております。

 

■快適な操作のために
現在では導入先のお客様からもご好評をいただいている当システムですが、開発中は検索結果で写真データの点数が多くなると処理が重くなってしまい、スクロールが滑らかに動かない問題がありました。このままでも一応動作はしますが、せっかくのフリック操作の魅力が半減してしまうので何とかしようと考えました。

最初は全ての写真を一度に読み込んでしまう処理にしていたため、例えば検索結果が数千点もある場合などに滑らかなスクロールが出来なくなっていました。そこで、写真を一度に読み込む件数を定義し、スクロールでそれらが全て表示された際に必要な分だけ次の写真を読み込むような実装に変更しました。

また、スクロールにより画面から消えた写真はメモリ内から消去するようにもしています。これにより検索結果の最終までスクロールを行った場合でも、処理がもたつくことも無くスムーズなスクロールを実現できるようになりました。

基本は左右スクロール側にそれぞれ3ページ分読み込んだ状態としています。

14091212

※1ページ内に表示される写真は、大サイズで6枚、中サイズで15枚、小サイズで32枚。
※数字はページ番号。

画面をスクロールさせ、末端までスクロールさせます。

14091213

末端までスクロールさせると、新しく3ページ分読み込み、古い3ページ分はメモリ内から消去されます。

14091214

こうすることでスムーズかつ滑らかなスクロールを実現しています。

 

■使用技術など
Microsoft C#、WPF(Windows Presentation Foundation)、Microsoft .NET Framework 4.5、JSON、MySQL、AWS(Amazon Web Services)、PHP、Yii(PHPフレームワーク)

 

当システムや物件検索ビューアに関するお問い合わせ、その他ご用命などございましたら、こちらからお願いいたします。

弊社ではビルやマンションなどの物件を紹介するための検索システムを開発しました。まずは、このシステムがどのようなシステムなのか機能の概要を紹介いたします。

14091201

■このシステムで出来ること
このシステムではクライアントPCにインストールしたアプリ(物件検索ビューア)からサーバーに登録してある物件データを検索することができます。物件検索ビューアはWindows8のタッチパネル機能を使用しており、全ての機能をタッチ操作で行うことができます。
また、大型タッチパネルディスプレイを用いてお客様に物件の紹介を行うような使い方も想定しております。

 

■物件検索ビューアでの検索について
物件検索ビューアでの検索方法は地図から探す方法と、建物の写真から探す方法の2通りがあります。

・地図から探す
地図から探すモードは、登録されている物件が地図上にマーカーとして表示されますので、どのエリアに存在するのかがわかります。マーカーをタッチすると物件の写真と簡易的な情報を表示するウィンドウが表示され、ここから更により詳しい情報を表示するための詳細画面へ遷移することもできます。

また、検索条件の指定もでき、住所の直接入力や都道府県を選択して地域を絞ることもできます。

14091202

・写真から探す
写真から探すモードでは、タッチパネルのフリック操作により、慣性スクロールを用いたスムーズな水平方向スクロールで全ての写真を閲覧することができます。また、一度に表示する写真枚数の変更も可能です。

14091204

写真から探すモードの場合は、検索条件も指定可能でキーワード検索やタグ検索なども可能です。

14091206

 

■詳細画面
検索結果に表示された物件の写真をタッチすると詳細画面を表示することができます。詳細画面ではこのように物件の詳細情報と関連写真を表示します。

14091205

 

■検索履歴
一度詳細画面を表示した物件については、アプリケーションを終了するまで履歴に残っており、再度物件を確認することができるようになっています。履歴一覧で件数が多い場合はタッチ操作で縦にスクロールを行います。

14091207

また、QRコードを表示することも可能で、QRコード表示ボタンを押すと画面にQRコードが表示され、スマートフォンなどで物件の場所を確認することができます。(ブラウザ+MapFan、ゼンリン、Google Mapsなどの地図情報サービスが必要)

 

簡単ではありますが、以上がこのシステムの機能となります。

次回の「Windows8タッチパネル環境を用いた物件検索ビューアの開発(詳細)」では、必要な環境や仕組みについて技術的な部分を紹介いたします。

 

当システムや物件検索ビューアに関するお問い合わせ、その他ご用命などございましたら、こちらよりお願いいたします。