SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 まずはクラウド上に配置するためのデータを取得します。「人口の推移と将来人口」(総務省統計局)より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が表示されます。

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

次のページ
FlexGridからREST APIを呼び出す

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9271 2016/02/29 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング