dev for citizen manual

Copyright © 2014 Aizu-wakamatsu City

DEV for CITIZEN 操作マニュアル

Copyright © 2014 Aizu-wakamatsu City 1


目次

DEV for CITIZEN 操作マニュアルの記載内容ページ数

Ｐ2

データを確認してみよう

アプリケーションを作ってみよう

DEV for CITIZENについて「DEV for CITIZEN」に係る機能概要およびアクセス方法について記載しています。

「DEV for CITIZEN」にて公開されているデータの確認方法について記載しています。

「DEV for CITIZEN」にて公開されているデータを利用したアプリケーションの作成方法について記載しています。

Ｐ5

Ｐ7

・・・・・

・・・・・

・・・・・



DEV for CITIZENについて

「DEV for CITIZEN」とは、街を見える化したい、毎日を便利にしたい、市民みんなで街をよくしたい、そ

んな思いを持つ開発者の方のためのプラットフォームです。

公共データを分析して、行動解析したい!!!

データ取得のAPI欲しいなぁ

作ったアプリを公開できる仕組みがあるといいなぁ

DEV

for

CITIZ

EN

Pla

tform

API

アプリケーション作って市民のためになりたい



DEV for CITIZENについて－DEV for CITIZENが提供する機能－

会津若松市オープンデータ・プラットフォーム

（一般ユーザ向け）

（開発者向け）

オープンデータ登録機能

オープンデータのダウンロード機能

API経由の、 ODQL(SQLクエリ）

実行機能

アプリケーション公開機能

ローカル開発資源をアップロード

ブラウザ上で直接コーディング

「DEV for CITIZEN」には、オープンデータ登録機能、オープンデータのダウンロード機能、API経由のODQL（SQLクエリ）実行機能、及びアプリケーション公開機能があります。

機能① 機能② 機能③

機能④



DEV for CITIZENについて－DEV for CITIZENへのアクセス－

「DEV for CITIZEN」のアクセス、ログイン（ログアウト）方法についてご説明します。

操作説明画面説明

以下URLにアクセスします http://www.data4citizen.jp/app/developer/

※右の画面は、Devepoler向けトップ画面になります。

DEV for CITIZENにアクセス

トップ画面にて、「サインイン」ボタンをクリックすると、地域SNSサイト「あいべあ」の連携アプリケーション承認画面が表示されるため、開発者にて必要項目を入力の上、登録・承認願います。

（トップ画面） Step 1

Step 2 ユーザ登録



データを確認してみよう

「DEV for CITIZEN」では、行政、地元民間企業等が公開したオープンデータをSQLライクにデータ取得・確認することが可能なAPI「Open Data Query Language（以下、ODQLと記載）」を提供しています。


メニューの「オープンデータ >> データの利用」をクリックします

「データを利用する」にアクセス

テキストボックスにODQLクエリを入力し、「データ取得」をクリックすると条件に該当するデータが表示されます。

（データ確認画面） Step 1

Step 2 データを確認

試験中につき将来的に仕様が変更される可能性があります。 • ＊禁止、union、union all禁止、cast関数禁止 • ５秒以上時間がかかるクエリはキャンセルされます • 10,000件以上の問い合わせ結果のクエリはキャンセルさ

れます。件数を絞り検索してください。

制約事項



データを確認してみよう－ODQLテンプレートクエリの挿入－

でーた確認画面から、検索したいオープンデータテーブル名をクリックすると、ODQLクエリ（select）のテンプレートを、テキストフィールドに挿入できます。

画面説明

（データ確認画面）

データ確認画面のオープンデータ一覧から、検索したいテーブルをクリックすると、ポップアップメニューが表示されます。

表示メニューから「SELECT文サンプル」をクリックします。

検索するテーブル名をクリック

ODQL入力テキストボックスにODQLクエリ（SELECT文）が表示されます。

Step 1

Step 2 テキストフィールドにサンプル文挿入

操作説明

選択したテーブルのSELECT文サンプルが挿入される

検索したいテーブルをクリックし、「SELECT文サンプル」をクリック



アプリケーションを作ってみよう

「DEV for CITIZEN」では、行政、地元民間企業等が公開したオープンデータを基に、Webアプリケーション作成プラットフォームを提供しています。

アプリケーションの作成方法としては、①ブラウザのテキストフォームでの作成、②ローカル開発した資源のzipアップロード、の2通りがあります。


アプリの作成方法

新規アプリケーションの作成

• ブラウザ上でテキストフォーム上で直接アプリケーションを開発します。

• ローカル開発した資源を、zipでアップロードすることでアプリケーションを登録します。 ※ローカル環境でもODQLは利用できます。

zipファイルのアップロード

1

2

HTMLファイル(html)、javascriptファイル(js)、スタイルシートファイル(css)、画像イメージファイル(jpeg,png,gif)の登録をサポートおり、HTMLベースでのアプリケーションを公開できます。

• 「テンプレートをダウンロード」ボタンをクリックすると、テンプレートファイル(html)がダウンロードされます。

テンプレートをダウンロード

（アプリケーション作成画面）

2 1

アプリケーション作成方法選択

メニューの「アプリケーション >> アプリを作る」をクリックします

「アプリを作る」にアクセス Step 1

Step 2



テンプレートをダウンロード

SQLクエリ実行（ODQL）

ブラウザ

テキストエディタ

ブラウザ

開発者

アプリケーションを作ってみよう –アプリケーションの開発方法-

開発者は、DEV for CITIZEN上で直接コーディング、またはローカルのアプリ資源アップロードによって、開発したアプリケーションを公開することができます。

１．Dev For Citizen上で直接編集する

Dev For Citizenを活用したアプリ開発方法

２．ローカル環境で開発する

開発者エディタ上でアプリ編集

Dev For Citizen上のアプリ編集画面

アプリ編集画面（テキストフォーム）直接

コーディング

ブラウザ上で直接編集

開発資源をローカルで実行

データ取得・更新

1

2

アプリケーションを作ってみよう –ODQLでデータを取得するには-

ODQLを活用する場合は、HTMLコード上に以下を追加する必要があります。また、アプリケーション開発ルールとして、index.htmlを必ず作成してください。

Index.html（サンプル）

<html>

<body>



<link href="../css/bootstrap.css" rel="stylesheet">

<link href="../css/bootstrap-responsive.css" rel="stylesheet">

<input type="button" name="test" value="ODQLを実行してみる" onclick="test();"/>



<script src="http://code.jquery.com/jquery-2.0.2.js"></script>



<script src="http://www.data4citizen.jp/app/developer/code/js/odql.js"></script>

<script>

/**

* ODQL実行用テストメソッドです.

*/

function test() {

//ODQLを以下のように記述し、ODQLLoader.loadOpenDataを利用して下さい.

var data = { odql : "SELECT town_name,year,month FROM O_OOAZA_JINKO

where town_name = '大戸町上三寄大豆田'"};

var jsonData = ODQLLoader.loadOpenData(data);

alert(JSON.stringify(jsonData));

}

</script>

</body>

</html>

ODQLの利用について

ODQLを活用する場合は、HTMLコード上に以下を追加する必要があります。  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>  <script src="http://www.data4citizen.jp/app/developer/code/js/odql.js"></script>

CSS・JSファイル等の読み込みについて

CSS、JS、imgには、必ず、../css/ファイル名、../js/ファイル名・・・・でアクセスしてください。 <<例>> <link href="../css/xxxx.css" rel="stylesheet"> <link href="../css/yyyy.css" rel="stylesheet">

アプリケーションを作ってみよう –ODQLでデータを取得するには-

ODQLを活用したデータ検索を行う場合は、HTMLコード上に以下を追加する必要があります。また、アプリケーション開発ルールとして、index.htmlを必ず作成してください。

データ検索時のサンプルコード

<html>

<body>



<link href="../css/bootstrap.css" rel="stylesheet">

<link href="../css/bootstrap-responsive.css" rel="stylesheet">

<input type="button" name="test" value="ODQLを実行してみる" onclick="test();"/>






<script>

/**

* ODQL実行用テストメソッドです.

*/

function test() {

//ODQLを以下のように記述し、ODQLLoader.loadOpenDataを利用して下さい.

var data = { odql : "SELECT town_name,year,month FROM O_OOAZA_JINKO

where town_name = '大戸町上三寄大豆田'"};

var jsonData = ODQLLoader.loadOpenData(data );


}

</script>

</body>

</html>

検索するテーブルに対するODQLクエリをパラメータにした、連想配列を作成します。

①で作成した配列を、ODQL.LoaderのselectOpenData関数パラメータに設定しメソッド実行する。

APIコール手順

selectOpenData関数の実行

ODQLクエリを作成

Dev For CitizenのODQL画面からオープンデータのテーブル名を右クリックすると、ODSQのクエリテンプレートがテキストフィールドに挿入されます。テンプレートを活用し、ODQLクエリを作成し、

更新するデータの連想配列を作成します。update,deleteする際はレコードをユニークに特定するoid※を指定する必要があります。 ※ODQLはレコードのバルク更新をサポートしていません。

①で作成した配列を、データ更新するモード選択する値含め、再度連想配列を作成します。レコード挿入： “insert” レコード更新： “update” レコード削除： “delete”

②で作成した配列を、ODQL.LoaderのupdateOpenData関数パラメータに設定しメソッド実行する。

データ更新時のサンプルコード 




<script>

/**

* データ更新用APIです.

*/

function updateData() {

//ODQLを以下のように記述し、ODQLLoader.updateOpenDataを利用して下さい.

var data = {

"oid": <<oidを入力して下さい。>>,

"column1":<<更新する値を入力して下さい.>> ,

};

//データアップデート時には、必ずmode='insert'を指定して下さい.

var updateData = {

"mode" : "update",

"data" : data

};

//スタンドアローンで開発する際には、該当データのAccess_tokenを入力して下さい.

var jsonData =

ODQLLoader.updateOpenData(updateData,‘table_name',<<ACCESS_TOKEN>>);


}

</script>

ODQLを活用してデータを更新する場合は、HTMLコード上にODQL.LoaderのupdateOpenData関数を使用して行います。 updateOpenData関数の利用方法は以下を参考にしてください。

APIコール手順

アプリケーションを作ってみよう –ODQLでテーブルを更新するには-

※old ： OpendataID オープンデータのレコードに対するユニークキーとなり、データinsert時に自動で付与されます。 oidを確認するには、ODQLでselectする際に、取得カラムの’oid’を含めて取得してください。（前頁参照）

更新データを連想配列化

更新モードの選択

updateOpenData関数の実行



アプリケーションを作ってみよう－留意事項－

ローカルで開発したアプリケーションを、「Dev for CITIZEN」にアップロードする際に以下の事項に留意してください。

css

js

img

html Index.html

規定のフォルダ構成でアップロードして下さい

• ローカルで開発する際は、必ず

以下の規定のフォルダ構成で作成する。

• アップロードするzipファイル名は、必ず半角英数字にする。 ※なお、 zipファイル名は、アップロードする際のアプリケーション名となりますが、後で変更が可能です

規定のフォルダ構成

sample.zip (アプリケーション名)



アプリケーションを作ってみよう－テンプレートダウンロード－

開発したアプリケーションについては、zipファイル形式でエクスポートすることが可能です。


「アプリを作る」にアクセス

該当アプリの「エクスポート」ボタンをクリックするとzipファイルでダウンロードすることができます。

（ログイン画面） Step 1

Step 2 該当アプリをエクスポート

メニューの「アプリケーション>> アプリを作る」をクリックします



最後に

Dev For Citizenを使って、あなたもアプリ、作ってみませんか？



アンケート協力のお願い

今後の機能改善のインプットとして、アンケートにご協力ください。

アプリケーションとして登録されている Data For Citizen利用アンケート（市民向け）

Data For Citizen利用アンケート（開発者向け）を実行して登録ください。

dev for citizen manual

Technology