DEV for CITIZEN 操作マニュアル
目次 DEV for CITIZEN 操作マニュアルの記載内容 ページ数 DEV for CITIZEN について DEV for CITIZEN に係る機能概要およびアクセス方法について記載しています P2 データを確認してみよう DEV for CITIZEN にて公開されているデータの確認方法について記載しています P5 アプリケーションを作ってみよう DEV for CITIZEN にて公開されているデータを利用したアプリケーションの作成方法について記載しています P7 オープンデータを登録してみよう 自分が作成したオープンデータを登録する方法について記載しています P14 1
DEV for CITIZEN について DEV for CITIZEN とは 街を見える化したい 毎日を便利にしたい 市民みんなで街をよくしたい そんな思いを持つ開発者の方のためのプラットフォームです アプリケーション作って市民のためになりたい 公共データを分析して 行動解析したい!!! 作ったアプリを公開できる仕組みがあるといいなぁデータ取得のAPI 欲しいなぁ DEV for CITIZEN Platform API 2
DEV for CITIZEN について -DEV for CITIZEN が提供する機能 - DEV for CITIZEN には オープンデータ登録機能 オープンデータのダウンロード機能 API 経由の ODQL(SQL クエリ ) 実行機能 及びアプリケーション公開機能があります 機能 1 機能 2 機能 3 オープンデータ登録機能 オープンデータのダウンロード機能 API 経由の ODQL(SQL クエリ ) 実行機能 会津若松市オープンデータ プラットフォーム ( 一般ユーザ向け ) ( 開発者向け ) ブラウザ上で直接コーディング アプリケーション公開機能 機能 4 3 ローカル開発資源をアップロード
DEV for CITIZEN について -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 関数禁止 5 秒以上時間がかかるクエリはキャンセルされます 10,000 件以上の問い合わせ結果のクエリはキャンセルされます 件数を絞り検索してください 5
データを確認してみよう -ODQL テンプレートクエリの挿入 - でーた確認画面から 検索したいオープンデータテーブル名をクリックすると ODQL クエリ (select) のテンプレートを テキストフィールドに挿入できます 操作説明 画面説明 Step 1 検索するテーブル名をクリック データ確認画面のオープンデータ一覧から 検索したいテーブルをクリックすると ポップアップメニューが表示されます 表示メニューから SELECT 文サンプル をクリックします ( データ確認画面 ) 検索したいテーブルをクリックし SELECT 文サンプル をクリック Step 2 テキストフィールドにサンプル文挿入 ODQL 入力テキストボックスに ODQL クエリ (SELECT 文 ) が表示されます 選択したテーブルの SELECT 文サンプルが挿入される 6
アプリケーションを作ってみよう DEV for CITIZEN では 行政 地元民間企業等が公開したオープンデータを基に Web アプリケーション作成プラットフォームを提供しています アプリケーションの作成方法としては 1 ブラウザのテキストフォームでの作成 2 ローカル開発した資源の zip アップロード の 2 通りがあります Step 1 操作説明 アプリを作る にアクセス メニューの アプリケーション >> アプリを新規作成する をクリックします 画面説明 ( アプリケーション作成画面 ) Step 2 アプリの作成方法 HTML ファイル (html) javascript ファイル (js) スタイルシートファイル (css) 画像イメージファイル (jpeg,png,gif) の登録をサポートおり HTML ベースでのアプリケーションを公開できます 1 2 1 アプリケーション作成方法選択新規アプリケーションの作成 ブラウザ上でテキストフォーム上で直接アプリケーションを開発します zipファイルのアップロード ローカル開発した資源を zipでアップロードすることでアプリケーションを登録します ローカル環境でもODQLは利用できます 2 テンプレートをダウンロード テンプレートをダウンロード ボタンをクリックすると テンプレートファイル (html) がダウンロードされます 7
アプリケーションを作ってみよう アプリケーションの開発方法 - 開発者は DEV for CITIZEN 上で直接コーディング またはローカルのアプリ資源アップロードによって 開発したアプリケーションを公開することができます 1.Dev For Citizen 上で直接編集する Dev For Citizen を活用したアプリ開発方法 2. ローカル環境で開発する 開発者 ブラウザ 直接コーディング アプリ編集画面 ( テキストフォーム ) ブラウザ上で直接編集 1 テキストエディタ エディタ上でアプリ編集 テンプレートをダウンロード 開発者 2 Dev For Citizen 上のアプリ編集画面 8 ブラウザ 開発資源をローカルで実行 データ取得 更新 SQL クエリ実行 (ODQL)
アプリケーションを作ってみよう 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> 9 CSS JS ファイル等の読み込みについて CSS JS img には 必ず../css/ ファイル名../js/ ファイル名 でアクセスしてください << 例 >> <link href="../css/xxxx.css" rel="stylesheet"> <link href="../css/yyyy.css" rel="stylesheet"> 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/developer /code/js/odql.js"></script>
アプリケーションを作ってみよう 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> </body> </html> API コール手順 ODQL クエリを作成 検索するテーブルに対する ODQL クエリをパラメータにした 連想配列を作成します selectopendata 関数の実行 1 で作成した配列を ODQL.Loader の selectopendata 関数パラメータに設定しメソッド実行する Dev For Citizen の ODQL 画面からオープンデータのテーブル名を右クリックすると ODSQ のクエリテンプレートがテキストフィールドに挿入されます テンプレートを活用し ODQL クエリを作成し 10
アプリケーションを作ってみよう ODQL でテーブルを更新するには - ODQL を活用してデータを更新する場合は HTML コード上に ODQL.Loader の updateopendata 関数を使用して行います updateopendata 関数の利用方法は以下を参考にしてください データ更新時のサンプルコード <!-- 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> /** * データ更新用 API です. */ function updatedata() { //ODQL を以下のように記述し ODQLLoader.updateOpenData を利用して下さい. var data = { "oid": <<oid を入力して下さい >>, "column1":<< 更新する値を入力して下さい.>>, }; // データアップデート時には 必ず mode='insert' を指定して下さい. var updatedata = { "mode" : "update", "data" : data }; APIコール手順更新データを連想配列化 更新するデータの連想配列を作成します update,delete する際はレコードをユニークに特定する oid を指定する必要があります ODQL はレコードのバルク更新をサポートしていません 更新モードの選択 1 で作成した配列を データ更新するモード選択する値含め 再度連想配列を作成します レコード挿入 : insert レコード更新 : update レコード削除 : delete // スタンドアローンで開発する際には 該当データの Access_token を入力して下さい. var jsondata = ODQLLoader.updateOpenData(updateData, table_name',<<access_token>>); alert(json.stringify(jsondata)); } </script> old : OpendataID オープンデータのレコードに対するユニークキーとなり データinsert 時に自動で付与されます oidを確認するには ODQLでselectする際に 取得カラムの oid を含めて取得してください ( 前頁参照 ) 11 updateopendata 関数の実行 2 で作成した配列を ODQL.Loader の updateopendata 関数パラメータに設定しメソッド実行する
アプリケーションを作ってみよう - 留意事項 - ローカルで開発したアプリケーションを Dev for CITIZEN にアップロードする際に以下の事項に留意してください 規定のフォルダ構成 規定のフォルダ構成でアップロードして下さい sample.zip ( アプリケーション名 ) css js img ローカルで開発する際は 必ず以下の規定のフォルダ構成で作成する アップロードする zip ファイル名は 必ず半角英数字にする なお zip ファイル名は アップロードする際のアプリケーション名となりますが 後で変更が可能です html Index.html 12
アプリケーションを作ってみよう - テンプレートダウンロード - 開発したアプリケーションについては zip ファイル形式でエクスポートすることが可能です Step 1 Step 2 操作説明 アプリを新規作成する にアクセス メニューの アプリケーション >> アプリを新規作成する をクリックします 該当アプリをエクスポート 該当アプリの エクスポート ボタンをクリックすると zip ファイルでダウンロードすることができます 画面説明 ( ログイン画面 ) 13
オープンデータを登録してみよう - 新規登録するには - 新たにオープンデータを登録し 一般に公開することが可能です Step 1 Step 2 操作説明 データを作成する にアクセス メニューの オープンデータ >> データを作成する をクリックします データを登録 登録用 csv ファイルの選択画面にて オープンデータとして登録する csv ファイルを選択し 次へ ボタンをクリックします その後 csv ファイルに記載されたデータがテーブル形式で表示されます 必須項目を入力し 登録 ボタンをクリックすると オープンデータとして登録されます 画面説明 ( メタ情報登録画面 ) 入力項目の説明は次ページを参照してください 14
オープンデータを登録してみよう - 新規登録するには - 1 2 3 4 5 画面説明 1 選択したCSVファイルの内容が画面表示されます 1 行目が項目名 2 行目以降がデータ内容ですのでご確認ください 2 以下項目は全て入力してください タイトル: 公開時のタイトルとして表示されます テーブル名:DBに作成されるテーブル名となります ファイル名: 更新時にアップロードする際 使用する名称となります 組織名: 公開時の提供元として表示されます アップロード時のファイル名: 連続でファイルアップロードする際はリネーム必要としてください - リネーム必要 ( デフォルト ) - リネーム不要 3メタ情報を入力します サンプルとして値が設定されていますが 必要に応じて変更してください データタイプ:DBのカラムタイプになります 桁数:DBの桁数となります カラム名( 論理 ): 論理カラム名として一般ユーザに公開されます サンプルデータ: サンプルとして一般ユーザに公開されます データタイプと桁数は一度登録すると変更できません 4サンプルアプリケーションとして公開するか否か設定します 非公開( デフォルト ): アプリケーションとしては公開しません 地図型: マップ上にピンを表示します 設定するためには緯度 経度が必要です 表型: 表形式のアプリケーションを表示します 5Createive Commons Licenseを設定します 表示 表示- 継承 表示- 改変禁止 表示- 非営利 表示- 非営利 - 継承 表示- 非営利 - 改変禁止 15 入力項目は全て入力必須となっています 詳細は以下 HP 参照 : http://creativecommons.jp/licenses/
オープンデータを登録してみよう - 登録データを更新するには - 自分が登録したオープンデータについては データの洗い替えまたは追加することが可能です Step 1 Step 2 操作説明 データ更新 にアクセス トップ画面の XXX さんが登録したオープンデータ に自分が登録したオープンデータが表示されているので その右側にある データ更新 ボタンをクリックします オープンデータを更新 画面説明 ( オープンデータ一覧画面 ) ( オープンデータ更新画面 ) データの更新方法を選択し オープンデータの CSV ファイルをアップロードします 全件洗替 : 対象のオープンデータを全て削除して 新たにアップロードした CSV ファイルの内容を登録します 追加 : 対象のオープンデータに対して 新たにアップロードした CSV ファイルの内容を追加します アップロード後 しばらくするとバッチプログラムにてオープンデータの取込が実施されます 16
オープンデータを登録してみよう - 留意事項 - オープンデータ登録 更新時に使用する CSV ファイルは下記点に注意して作成してください 制約事項 1 行目は登録時のカラム名となる為 必ず英数字にして下さい なお 1 行目のカラム名が DB の物理名として定義されます また 予約語はカラム名として使用できません ( 詳細は オープンデータ >> データを作成する の予約語一覧を参照 ) 新規登録時の上限ファイルサイズは 10MB となります 値にエンクォート ( ) 改行を含めないでください オープンデータの登録 更新を実施すると 使用した CSV ファイルは以下のようにデータベースへ登録されます CSV ファイル aaa,bbb,ccc,ddd a1,b1,c1,d1 a2,b2,c2,d2 データベース aaa bbb ccc ddd a1 b1 c1 d1 a2 b2 c2 d2 17