RESAS APIを使ってみる(2)

前回に引き続きRESAS APIの使い方です。

本記事では実際にサーバサイドのWebアプリケーションからRESAS APIを使ってデータを取得してみます。

※現状、RESAS APIのAPIキーは非公開を前提としているのでJavaScriptなどのクライアントサイドプログラムでの利用は推奨されません。

サーバサイドのプログラム言語にはPHPを使い、環境にはHerokuを使います。

1. 今回作成するWebアプリケーション

都道府県と市区町村を選択し、自然人口の増減をグラフ表示するWebアプリケーションを作ってみましょう。

2. Herokuの環境を準備する

https://www.heroku.com/

SIGN UP FOR FREEからアカウントの登録をします。

次にHeroku CLIをダウンロードしインストールします。

https://devcenter.heroku.com/articles/heroku-cli

※私の32bit Windows7環境下ではGitがインストールできなかったので、Git for Windowsを別途インストールしました。

https://git-for-windows.github.io/

3. Webアプリケーションを作ってみる

まずはHerokuにログインします。

$ heroku login

空のPHPアプリケーションを作成します。<APP_NAME>はheroku上の他のアプリケーションと被らない名前をつけてください。

$ heroku create <APP_NAME>
$ mkdir <APP_NAME>
$ cd <APP_NAME>
$ touch composer.json
$ touch index.php
$ git init
$ git add .
$ heroku git:remote -a <APP_NAME>
$ git commit -m “first commit”
$ git push heroku master
$ heroku open

ブラウザでhttps://<APP_NAME>.herokuapp.com/ が開き、作成したWebアプリケーションが開きます。

index.phpを以下のように書き換えます。 今回のプログラムでは都道府県の選択画面を実装します。 <API-KEY>はRESAS APIのAPI-KEYに書き換えてください。

<?php

// エラーハンドリングやセキュリティ対策はしていません。実コードでは気をつけましょう。

$base_url = 'https://opendata.resas-portal.go.jp/';
$request_url = $base_url . 'api/v1/prefectures';
$headers = ['X-API-KEY: <API-KEY>'];

$curl = curl_init();

curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);

// 都道府県を取得
curl_setopt($curl, CURLOPT_URL, $request_url);
$response = curl_exec($curl);

// 都道府県一覧のJSONを配列に格納
$prefectures = json_decode($response, true)['result'];

?>
<html>
<head>
<title>都道府県一覧</title>
</head>
<body>
<form action="cities.php" method="get">
<select name="prefCode">
<?php foreach($prefectures as $pref): ?>
        <option value="<?=htmlspecialchars($pref['prefCode']) ?>"><?= htmlspecialchars($pref['prefName']);?> </option>
<?php endforeach; ?>
</select>
<button type="submit">選択</button>
</form>
<?php ?>
</body>
</html>

書き換えたらDEPLOYします。

$ git commit -am “modified index.php”
$ git push heroku master
$ heroku open

次に、市区町村の選択画面をcities.phpとして実装します。

<?php

// エラーハンドリングやセキュリティ対策はしていません。実コードでは気をつけましょう。

$base_url = 'https://opendata.resas-portal.go.jp/';
$request_url = $base_url . 'api/v1/cities';
$headers = ['X-API-KEY: <API-KEY>'];

$curl = curl_init();

curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);

// 市区町村を取得
curl_setopt($curl, CURLOPT_URL, $request_url . '?prefCode=' . rawurlencode($_GET['prefCode']));
$response = curl_exec($curl);

// 市区町村一覧のJSONを配列に格納
$cities = json_decode($response, true)['result'];

// print_r($cities);

?>
<html>
<head>
<title>市区町村一覧</title>
</head>
<body>
<p><a href="index.php">都道府県選択に戻る</a></p>
<form action="population.php" method="get">
<input type="hidden" name="prefCode" value="<?=htmlspecialchars($_GET[prefCode]); ?>" />
<select name="cityCode">
<?php foreach($cities as $city): ?>
        <option value="<?=htmlspecialchars($city['cityCode']) ?>"><?= htmlspecialchars($city['cityName']);?> </option>
<?php endforeach; ?>
</select>
<button type="submit">選択</button>
</form>
<?php ?>
</body>
</html>

再びDEPLOYします。

$ git add .
$ git commit -m “add cities.php”
$ git push heroku master
$ heroku open

最後に、人口の自然増減をグラフ上にプロットするためのpopulation.phpを実装します。グラフの表示にはGoogle Chartsを使いました。

https://developers.google.com/chart/

<?php

// エラーハンドリングやセキュリティ対策はしていません。実コードでは気をつけましょう。

$base_url = 'https://opendata.resas-portal.go.jp/';
$request_url = $base_url . 'api/v1/population/nature';
$headers = ['X-API-KEY: <API-KEY>'];

$curl = curl_init();

curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);

// 市区町村を取得
curl_setopt($curl, CURLOPT_URL, $request_url . '?prefCode=' . rawurlencode($_GET['prefCode']) . '&amp;cityCode=' . rawurlencode($_GET['cityCode']));
$response = curl_exec($curl);

// 人口増減のJSONを配列に格納
$population = json_decode($response, true);

?>
<html>
<head>
<title>自然人口増減(男性のみ)</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var arrData = [['Year', 'population'],
        <?php foreach($population['result']['bar']['mandata'] as $mandata): ?>
                ['<?=$mandata['year']?>', <?=$mandata['value'];?>],
        <?php endforeach; ?>];
        var data = google.visualization.arrayToDataTable(arrData);

        var options = {
          bars: 'vertical',
          hAxis: {
                title: 'Man Population',
                minValue: 0,
                }
        };

        var chart = new google.charts.Bar(document.getElementById('barchart'));

        chart.draw(data, options);
      }
    </script>
</head>
<body>
<p><a href="cities.php?prefCode=<?=rawurlencode($_GET['prefCode']); ?>">市区町村選択に戻る</a></p>
<div id="barchart" style="width: 900px; height: 500px;"></div>
</body>
</html>

DEPLOY方法はさきほどと同様です。

$ git add .
$ git commit -m “add population.php”
$ git push heroku master
$ heroku open

4. 最後に

以上でWebアプリケーションは一旦完成です。

表示されないなどの不具合があった再には以下のコマンドでログを確認することができます。

Heroku logs

最終更新時刻: 2017年01月22日

RESAS APIを使ってみる(1)

※ 本記事はGoogle Chromeの利用を前提とします。

1. RESAS APIの登録

RESAS APIの登録を行いましょう。

https://opendata.resas-portal.go.jp/

※マイページから「利用規約の確認」を実施しないとAPIにアクセスした際に403 Forbiddenでエラーになるので注意。

登録が完了し、利用規約の確認をすることでAPI-KEYが発行されAPIが使えるようになります。

2. RESAS APIの仕様書

APIの仕様書を確認しましょう。

https://opendata.resas-portal.go.jp/docs/api/v1/index.html

※ネットの記事で/v1-rc.1/でアクセスしている記事が散見されますが、2017年1月22日時点では/v1/が正しいので注意。

3. WEB APIテストクライアントを使ったRESAS APIのテスト

Google ChromeアプリのWEB APIテストクライアントである「Postman」を使って動作確認をしてみましょう。

まずはChromeにPostmanアプリをインストールします。

Google Chromeを使ったweb-apiテストクライアント https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=ja

都道府県一覧の取得

試しに都道府県一覧を取得してみましょう。

https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html

GETするURLにhttps://opendata.resas-portal.go.jp/api/v1/prefectures を指定し、HeadersのKeyにX-API-KEYを、Valueに先程取得したAPI-KEYを指定します。

SendでREST APIを叩いて都道府県データが返ってくれば成功です。

市区町村一覧の取得

次に市区町村一覧を取得してみましょう。このAPIはパラメータとしてprefCode(都道府県コード)を渡してあげる必要があります。

https://opendata.resas-portal.go.jp/docs/api/v1/cities.html

GETするURLにhttps://opendata.resas-portal.go.jp/api/v1/cities?prefCode=23 を指定し、HeadersのKeyにX-API-KEYを、Valueに先程取得したAPI-KEYを指定します。

※prefCode=23は愛知県の都道府県コードです。

SendでREST APIを叩くと今度は愛知県の市区町村一覧が取得できます。

RESAS APIは上記2つのAPIで取得できるprefCodeとcityCodeをパラメータとして取るAPIが多いので、上記2つのAPIは覚えておいたほうが良いです。

人口の自然増減の取得

最後に、人口増減を取得してみましょう。このAPIでは先程の2つのAPIで取得したprefCode(都道府県コード)とcityCode(市区町村コード)をパラメータとして使用します。

※ageFromとageToもRequired=true(必須)となっていますが実際には必須ではありません。

https://opendata.resas-portal.go.jp/docs/api/v1/population/nature.html

GETするURLにhttps://opendata.resas-portal.go.jpapi/v1/population/nature?prefCode=23&cityCode=23100 を指定し、同じようにHeadersのKeyにX-API-KEYを、Valueに先程取得したAPI-KEYを指定します。

※prefCode=23は愛知県の都道府県コード、cityCode=23100は名古屋市の市区町村コードです。

4. 最後に

以上がRESAS APIの使い方の基本となります。

RESAS APIには上記以外にも様々なAPIがあります。仕様書を見ながら自分が取得したいデータのAPIを使ってみたください。

次回はサーバサイドのプログラムでRESAS APIを使ってみたいと思います。

最終更新時刻: 2017年01月22日

tDiaryをunicornで動かす

このブログで使っているtDiaryを最新版に上げた上でunicornで動くように設定した。

表示時間が平均2000~3000msくらいだったのが200~300msになった。

ちょっぱやである。

最終更新時刻: 2016年05月19日

tDiaryにDISQUSのコメント欄をつけた

このブログ(tDiary)にDISQUSのコメント欄をつけました。

そのためのプラグイン、disqus.rb作りました。

テストコメントでもいいのでコメント頂けると助かります。

# 既存ツッコミフォームを非表示にする
@conf.hide_comment_form = true

def permalink( date, index = nil, escape = true )
        ymd = date.strftime( "%Y%m%d" )
        uri = @conf.index.dup
        uri.sub!( %r|\A(?!https?://)|i, @conf.base_url )
        uri.gsub!( %r|/\.(?=/)|, "" ) # /././ -> /
        link = uri + anchor( "#{ymd}p%02d" % index )
        link.sub!( "#", "%23" ) if escape
        link
end

def disqus_form(date)
        return '' if feed?

        r = <<-HTML
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '#{permalink(date, index, false)}'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '#{permalink(date, index, false)}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//pc-memo.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
        HTML

end

add_body_leave_proc do |date|
        if @mode=='day' then disqus_form(date) end
end

add_header_proc do
        # 既存ツッコミフォームを非表示にする
        r = <<-HTML
<style>
.comment{
  display: none;
}
</style>
        HTML
end
最終更新時刻: 2016年05月07日

DockerでWordPressをあっという間に立てる

まずはdocker本体をインストール。環境はCentOS 6.7。

$ sudo yum install docker-io
$ sudo docker -v

ここで間違えて「docker-io」パッケージではなく「docker」パッケージをインストールしてしまうとdockerコマンドを実行した時に下記エラーが出る。 同じパッケージ名だが別物らしいので非常に紛らわしい。

Segmentation Fault or Critical Error encountered. Dumping core and aborting.

次にdockerサービスを登録して起動する。

$ sudo chkconfig docker on
$ sudo service docker start

dockerイメージをイメージをダウンロード。

$ sudo docker pull tutum/wordpress

次にコンテナを起動する。-p でポートを「外部からアクセスされるポート:コンテナ側のポート番号」の順に指定する。

$ sudo docker run -d -p 3000:80 --name wordpress tutum/wordpress

下記スライドを参考にしました。

http://www.slideshare.net/mookjp/dockerword-press

最終更新時刻: 2016年05月07日

ブログを始めた理由とtDiaryを使って得たもの

本日(2016.4.23)はこのブログで2003年から現在まで使っている日記システム「tDiary」の15周年記念パーティに参加しました。

http://eventdots.jp/event/580813

自己紹介も兼ねてLTしました。発表資料は下記です。このブログで先日書いたbootstrapに関する内容を話しました。

http://bit.ly/tdiary15th

この機会に、私がブログを書くことになった理由と、tDiaryを使うことで得たものを書き留めておきたいと思います。

当時、就職を考えていた私は以下の理由からブログを書くことを決めました。

  • 文章力の向上
  • 自己アピール
  • 技術情報のメモ

まず「文章力の向上」。これは会社に入ったら必要になるであろう文章力を磨くためには普段から人に見られる文章を書くことが最善であると考えました。文章力については現在も課題です。。。

次に「自己アピール」。就職先の企業の方が読んでくれるかもしれない。当時大手への就職をあまり考えておらず、実際ベンチャーに入った際には社長が私のブログを読んで頂いたようです。決め手になったかどうかはわかりませんが、アピールの一つとなったのだと思います。

最後に「技術情報のメモ」。当時からインフラ構築やコードを書いたりしていたのですが、その情報を書き留めて後から参照したいと思っていました。実際、「あーこれどうやるんだっけ」とググった際に昔自分が書いた記事が出てきて「当時の自分グッジョブ!」となったりします。

そして、当時は想定していなかったけれど、tDiaryを使ったことで貴重な経験ができました。

それは「オープンソースコミュニティへの参加」という経験です。

例えば不具合と思われる内容があったら、コミュニティのメーリングリストで相談するとそれに対してレスポンスがもらえて、そのまま不具合が修正される。欲しいプラグインがあったら自分でコードを書いてGitHubでプルリクエストを出して本体に取り込んでもらう。というやり取りは私にとってtDiaryが初めてでした。

以上が、ブログを始めた理由と、tDiaryを使うことによって得たもの(経験)です。

最終更新時刻: 2016年04月24日

CartoDBのインストールではまったポイント

基本的には下記インストールマニュアルに書いてある通りに進んでいけばいいんだけど、いくつかはまるポイントがある。

http://cartodb.readthedocs.org/en/latest/install.html

まず初めにapt-get updateしておく。これをしないと最初のapt-getで失敗する。

sudo apt-get update

次に、要所要所でsudoで実行するにあたって、rubyやgemのパスが通ってなくてエラーとなる場合がある。これはsudoの基本設定がPATHを引き継がない設定になっているため。visudoを実行し、/etc/sudoersファイルを下記のように書き換えておく。

#Defaults       env_reset
#Defaults       secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:$
Defaults        env_keep += "PATH CPLUS_INCLUDE_PATH C_INCLUDE_PATH"

次に、nodeをインストール(sudo apt-get install nodejs)した直後に、npmをアップデートしておかないと、以降のnpmコマンドで失敗する。

sudo npm install npm -g

途中、rake db:migrateする箇所では、先にdb:createしないと失敗する。また、db:setup_userも失敗するが、こちらは失敗しても問題ないので飛ばす。

RAILS_ENV=development bundle exec rake db:create

また同じくPostgreSQLのインストールチェック(下記コマンド)も失敗するが気にしないことにした。

sudo PGUSER=postgres make installcheck # to run tests

一通りインストールが終わったあと、CartoDB-SQL-APIの設定ファイル(CartoDB-SQL-API/config/environments/development.js)を下記のように書き換える。

module.exports.node_host    = '';

同じくWindshaft-cartodbの設定ファイル(Windshaft-cartodb/config/environments/development.js)の最初の方を書き換える。

,host: ''

この2つの設定ファイル書き換えをしておかないと、CartoDB Editorは起動するけどエラーでデータ表示ができないので注意。

それから、CartoDB Editorの設定ファイル(cartodb/config/app_config.yml)のうち、「localhost.lan」となっている箇所をひとまずサーバのIPアドレスに変更する。

これもやっておかないと同じくエラーでデータ表示できない。

更にサブドメインレス運用するために下記も書き換える。

subdomainless_urls: true

最後に、起動コマンドは下記のように標準出力と標準エラー出力を/dev/nullに出力したうえで、バックグラウンド実行させるようにすると良い。

cd ~/cartodb
bundle exec script/resque > /dev/null 2>&1 &
bundle exec thin start --threaded -p 3000 --threadpool-size 5 > /dev/null 2>&1 &
cd ../CartoDB-SQL-API/
node app.js development >/dev/null 2>&1 &
cd ../Windshaft-cartodb/
node app.js development >/dev/null 2>&1 &

以上、ざっとはまりそうな箇所でした。

最終更新時刻: 2016年05月30日

MacでSJISネイティブ対応のエディタを探してみた

Macでお手軽にSJISとUTF-8を変換するために、ネイティブ(プラグイン等を入れる必要がない)でSJIS対応してるエディタを探してみた。

結果、SJISネイティブ対応であることを確認できたのは下記4つ。

今回の目的は国内オープンデータのCSVデータ(大半がSJIS)をUTF-8に変換するためのツールを非エンジニアに紹介することなので、CotEditorがシンプルで良さそう。

SJISネイティブ非対応であることを確認したのは下記3つ。

この調査をするまで「時代はAtomだよね」って思ってたけど、数1000行程度のCSV読み込んでエンコーディング変換しようとしただけで固まることが判明したので一旦、Sublime Textをデフォルトエディタにした。

Windows環境でxyzzy使って数十MBのログファイルをさくっと開けることに慣れてる身としてはAtomの挙動に耐えられない。用途が異なることは知っているが、xyzzyが万能すぎる。

MacVIMも良さそうなので要調査。Macでもxyzzy動けばいいのに。

掲載したエディタは本日(2016.3.2)時点の最新安定版を入れて調査しました。

最終更新時刻: 2016年03月03日

E2D3の開発環境を整えた(Windows編)

ExcelでJavaScriptを使ったインタラクティブなグラフを表示することができる「E2D3」というツールがあります。

E2D3公式サイト

このメモの目的は、E2D3上の新しいグラフの開発やグラフのカスタマイズをするための環境づくりの備忘録です。

本記事の内容は下記公式ドキュメントを参考にしています。非常にわかりやすいドキュメントです。

Excel上に挿入したE2D3およびグラフは、E2D3が用意したWebサーバにアクセスすることで表示されています。

開発する際は、E2D3が参照するWebサーバをローカルの開発用簡易Webサーバに切替え、ローカルのグラフのソースコード(E2D3ではテンプレートと呼んでいます)を書き換えることで開発していくことになります。

開発用簡易Webサーバはnode.jsで稼働します。よって、まずはnode.jsをダウンロードしインストールします。

今回は下記ファイルをインストールしました。

https://nodejs.org/dist/v5.6.0/node-v5.6.0-x86.msi

次にコマンドプロンプトを開きnpmコマンドを使って開発用簡易Webサーバをインストールします。

> npm install -g e2d3

次に、グラフのソースコードをGitHubからcloneしてきます。

git clone https://github.com/e2d3/e2d3-contrib.git

上記では本家のリポジトリから直接cloneしていますが、私の場合はPull Requestを送りたいので自分のGitHubアカウントにforkしてからcloneしました。

ソースコードがダウンロードできたら、cloneしたフォルダに移動しe2d3コマンドを実行(Webサーバを起動)します。

> cd e2d3-contrib
> e2d3

するとブラウザが起動し、e2d3のグラフ画面が起動され、開発用簡易Webサーバ上で稼働するE2D3が表示されます。

この際、開発用簡易WebサーバはデフォルトでHTTP通信を8000ポート、HTTPS通信を8443ポートで待ち受けます。

Excel上のE2D3からはHTTPSで通信する必要があるため、ブラウザでhttps://localhost:8443にアクセスし、証明書の使用を許可しておく必要があります。毎回この作業を行うのは面倒なので証明書をインポートしておくと良いと思います。

証明書の認証が済んだら、Excel上でE2D3を立ち上げ、CTRLキーを5回連打することで表示される「Go into delegate mode」のボタンを押下します。

すると、E2D3のWebサーバにアクセスするのではなく、さきほど立ち上げたローカルの開発用簡易Webサーバの内容が表示されるようになります。

以上で、ローカルのテンプレートをガシガシ書き換えて、E2D3で確認、デバッグ事が可能になります。

テンプレートを書き換えて、本家に取り込んでもらう流れは公式ドキュメントの下記に記載されています。

https://github.com/e2d3/e2d3/wiki/Adding-your-template-to-E2D3_ja

最終更新時刻: 2016年02月17日

スマート鳩時計の作り方(スマート鳩時計の紹介&サーボモータ制御編)

このブログはmyThings Advent Calendar 2015の8日目の記事です。

本記事はmyThingsを使った「スマート鳩時計」の紹介と、最も重要な機能である「鳩を動かす」ためのサーボモータの制御について記載します。

Raspberry PIの基本的な操作は割愛します。ご容赦ください。

Read more...

最終更新時刻: 2015年12月08日