Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

クラウド上のデータをグリッドやグラフで表示してみよう

業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/02/29 14:00

 前回は、表計算ソフトのような表示が可能なモバイルアプリを開発できる「Xuni」の基本的な機能についてご紹介しました。今回は、「Azure Web Apps」を用いて、クラウド上に置いた日本の人口データをXuniで表示してみます。併せて、前回ご紹介しきれなかった機能についても見ていきます。

目次

データに日本の人口の推移と将来人口を用意する

 まずはクラウド上に配置するためのデータを取得します。「人口の推移と将来人口」(総務省統計局)よりExcelをダウンロードして、年次、総数、0~14歳(年少人口)、15~64(生産年齢人口)と65歳以上(老年人口)の5項目を使用します。単位は1000人です。今回の記事では、この人口データをJSON形式で加工した、サンプルコードの「nodejs/routes/population.js」ファイルを使用していきます。年次は西暦で表示するように変換しました。

クラウドにデータを用意する

 クラウドに先の人口データをJSONで返却するREST APIを用意します。クラウドは「Microsoft Azure Web Apps」を使用します。

Azure Web Appsの環境を用意する

 「Azure App Service を使ってみる」というページをブラウザで開きます。特徴は次の通りで手軽に使えます。

  • サインアップ不要
  • クレジットカード不要
  • 料金無料
  • 数秒ですぐに使える
  • 1時間後に自動で削除される(最大24時間まで延長が可能)

 使用手順は3ステップで、数分で完了します。順番に説明していきます。

Step 1. アプリケーションの種類の選択

 Web Appを選択して、次へをクリック。

Step 2. テンプレートの選択

 ExpressJsを選択して作成をクリック。

 認証に使うため、次のいずれかのアカウントでログインします。

  • Microsoft
  • Google
  • Facebook

Step 3. アプリケーションの操作

 次の画面が表示されればWeb Appは作成完了です。ただしこのままでは1時間で消えてしまうので、下図の「もっと時間が必要な場合は、こちらをクリックすると試用期間を24時間に延長できます。」をクリックして、24時間使えるようにします。

 「web app を操作する場所」の右にあるURLをクリックして、Webブラウザに次のように表示されれば成功です。

人口の推移と将来人口のREST APIを作成する

 「Visual Studio Online "Monaco" による編集」をクリックして、Visual Studio Online(以降VSOと表記)を開きます。

 サンプルコードに格納されている「nodejs/routes/population.js」ファイルを、VSOを表示しているブラウザの「WWWROOT/routes」にドラッグ&ドロップします。

 同じ要領で、VSOの「WWWROUTE/server.js」を、サンプルコードの「nodejs/server.js」で更新後、ブラウザにて、前項Step 3.でアクセスした「web app を操作する場所 のURL」+「/api/population」(例 "https://f1fc8841-0ee0-4-231-b9ee.azurewebsites.net/api/population" <f1fc8841-0ee0-4-231-b9ee>の部分はユーザーごとに異なります)にアクセスすると、次のようなJSONが表示されます。

 以上でクラウドの準備は完了です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山本 誠樹(ヤマモト マサキ)

     スマホアプリからクラウドアプリまで作成するフリーのデベロッパー。記事へ質問などあればお気軽にご連絡ください。 Twitter:@nnasaki blog:http://blog.nnasaki.com

バックナンバー

連載:業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5