DEV for CITIZEN
操作マニュアル
目次
DEV for CITIZEN 操作マニュアルの記載内容
ページ数
Ｐ2
データを確認してみよう
アプリケーションを作ってみよう
DEV for CITIZENについて
「DEV for CITIZEN」に係る機能概要およびアクセス方法について記載しています。 「DEV for CITIZEN」にて公開されているデー タの確認方法について記載しています。
「DEV for CITIZEN」にて公開されているデー タを利用したアプリケーションの作成方法につ いて記載しています。
Ｐ5
Ｐ7
・・・・・ ・・・・・ ・・・・・オープンデータを登録してみよう
自分が作成したオープンデータを登録する方法について記載しています。 ・・・・・Ｐ14
DEV for CITIZENについて
「DEV for CITIZEN」とは、街を見える化したい、毎日を便利にしたい、市民みんなで街をよくしたい、そ
んな思いを持つ開発者の方のためのプラットフォームです。
公共データを分析して、 行動解析したい!!! データ取得 のAPI欲しいなぁ 作ったアプリを公開できる 仕組みがあるといいなぁ DE V fo r C IT IZ EN Pl at fo rmAPI
アプリケーション 作って市民のためになりたい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ベース でのアプリケーションを公開できます。 テンプレートをダウンロード （アプリケーション作成画面）2
1
アプリケーション作成方法選択 メニューの「アプリケーション >> アプリ を新規作成する」をクリックします「アプリを作る」にアクセス
Step 1
Step 2
テンプレートをダウンロード
SQLクエリ実行
ブラウザ テキスト エディタ ブラウザ開発者
アプリケーションを作ってみよう
–アプリケーションの開発方法-
開発者は、DEV for CITIZEN上で直接コーディング、またはローカルのアプリ資源アップロードによって、
開発したアプリケーションを公開することができます。
１．Dev For Citizen上で直接編集する
Dev For Citizenを活用したアプリ開発方法
２．ローカル環境で開発する
開発者
エディタ上でアプリ編集アプリ編集画面
（テキストフォーム）
直接 コーディング ブラウザ上で直接編集1
2
アプリケーションを作ってみよう
–ODQLでデータを取得するには-
ODQLを活用する場合は、HTMLコード上に以下を追加する必要があります。
また、アプリケーション開発ルールとして、index.htmlを必ず作成してください。
Index.html（サンプル）
<html> <body> <!-- styles --><link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.css" rel="stylesheet">
<input type="button" name="test" value="ODQLを実行してみる" onclick="test();"/> <!-- ODQLの実行にはjqueryが必要となります--> <script src="http://code.jquery.com/jquery-2.0.2.js"></script> <!-- ODQLにアクセスするためには、以下のファイルをインポートして下さい.--> <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コード上に以下
を追加する必要があります。
<!-- ODQLの実行にはjqueryが必要となります--> <script src="http://code.jquery.com/jquery-2.0.2.js"></script> <!-- ODQLにアクセスするためには、以下のファイルをイ ンポートして下さい.--> <script src="http://www.data4citizen.jp/app/developerCSS・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> <!-- styles --><link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.css" rel="stylesheet">
<input type="button" name="test" value="ODQLを実行してみる" onclick="test();"/> <!-- ODQLの実行にはjqueryが必要となります--> <script src="http://code.jquery.com/jquery-2.0.2.js"></script> <!-- ODQLにアクセスするためには、以下のファイルをインポートして下さい.--> <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>
