Dev for Citizen Manual

DEV for CITIZEN
操作マニュアル

Copyright © 2014 Aizu-wakamatsu City

DEV for CITIZEN 操作マニュアル

目次
DEV for CITIZEN 操作マニュアルの記載内容

ページ数

DEV for CITIZENについて

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

・・・・・

Ｐ2

データを確認してみよう

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

・・・・・

Ｐ5

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

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

・・・・・

Ｐ7

1





「DEV for CITIZEN」とは、街を見える化したい、毎日を便利にしたい、市民みんなで街をよくしたい、そ
んな思いを持つ開発者の方のためのプラットフォームです。

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

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

DEV for CITIZEN Platform

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

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

API

2





－DEV for CITIZENが提供する機能－

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

機能①

機能②

機能③

オープンデータ
登録機能

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

API経由の、
ODQL(SQLクエリ）
実行機能

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

（一般ユーザ向け）

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

（開発者向け）

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

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




－DEV for CITIZENへのアクセス－

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

操作説明
Step 1

画面説明
（トップ画面）

DEV for CITIZENにアクセス

 以下URLにアクセスします
http://www.data4citizen.jp/app/developer/
※右の画面は、Devepoler向けトップ画面になりま
す。

Step 2

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

4





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

操作説明
Step 1

画面説明
（データ確認画面）

「データを利用する」にアクセス
 メニューの「オープンデータ >> データの
利用」をクリックします

Step 2

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

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

5





－ODQLテンプレートクエリの挿入－

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

操作説明

画面説明

Step 2

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

（データ確認画面）

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

Step 1

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

テキストフィールドにサンプル文挿入
 ODQL入力テキストボックスにODQLクエリ
（SELECT文）が表示されます。

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

6






「DEV for CITIZEN」では、行政、地元民間企業等が公開したオープンデータを基に、Webアプリケー
ション作成プラットフォームを提供しています。
アプリケーションの作成方法としては、①ブラウザのテキストフォームでの作成、②ローカル開発した資源
のzipアップロード、の2通りがあります。

操作説明
Step 1

画面説明

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

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

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

Step 2

アプリの作成方法



1

1

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

2

アプリケーション作成方法選択
新規アプリケーションの作成
• ブラウザ上でテキストフォーム上で直接アプリケー
ションを開発します。

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

2

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

7





–アプリケーションの開発方法-

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

Dev For Citizenを活用したアプリ開発方法
１．Dev For Citizen上で直接編集する

テキスト
エディタ

ブラウザ

開発者

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

直接
コーディング

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

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

ブラウザ上で直接編集

エディタ上でアプリ編集

開発者
2
ブラウザ
データ
取得・更新

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

8

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

SQLクエリ実行
（ODQL）





–ODQLでデータを取得するには-

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

Index.html（サンプル）

CSS・JSファイル等の読み込みについて
CSS、JS、imgには、必ず、../css/ファイル名、../js/
ファイル名・・・・でアクセスしてください。

<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>

9

<<例>>
<link href="../css/xxxx.css" rel="stylesheet">
<link href="../css/yyyy.css" rel="stylesheet">

ODQLの利用について
ODQLを活用する場合は、HTMLコード上に以下
を追加する必要があります。
<script src="http://code.jquery.com/jquery2.0.2.js"></script>

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




–ODQLでデータを取得するには-

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

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

APIコール手順
ODQLクエリを作成

<html>
<body>

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

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

<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 = '大戸町上三寄大豆田'"};

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

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

var jsonData = ODQLLoader.loadOpenData(data );
}
</script>
</body>
</html>

10




–ODQLでテーブルを更新するには-

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

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

APIコール手順
更新データを連想配列化


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

<script>
/**
* データ更新用APIです.
*/
function updateData() {
//ODQLを以下のように記述し、ODQLLoader.updateOpenDataを利用して下さい.
var data = {
"oid": <<oidを入力して下さい。>>,
"column1":<<更新する値を入力して下さい.>> ,
};

※ODQLはレコードのバルク更新をサポートしていません。

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

//データアップデート時には、必ずmode='insert'を指定して下さい.
var updateData = {
"mode" : "update",
"data" : data
};

updateOpenData関数の実行

//スタンドアローンで開発する際には、該当データのAccess_tokenを入力して下さい.
var jsonData =
ODQLLoader.updateOpenData(updateData,‘table_name',<<ACCESS_TOKEN>>);

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

}
</script>

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

11





－留意事項－

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

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

css

•

ローカルで開発する際は、必ず
以下の規定のフォルダ構成で作
成する。

js

•

アップロードするzipファイル名
は、必ず半角英数字にする。

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

※なお、 zipファイル名は、アップロードす
る際のアプリケーション名となりますが、
後で変更が可能です

img

html

Index.html
12





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

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

操作説明
Step 1

画面説明
（ログイン画面）

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

Step 2

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

13



最後に

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

14



アンケート協力のお願い

今後の機能改善のインプットとして、
アンケートにご協力ください。
アプリケーションとして登録されている
Data For Citizen利用アンケート（市民向け）
Data For Citizen利用アンケート（開発者向け）
を実行して登録ください。
15


Dev for Citizen Manual

More Related Content

Similar to Dev for Citizen Manual (20)

Dev for Citizen Manual