create every day - 福野泰介の一日一創

GitHubではじめるWebアプリづくり「GitHub & マップアプリハンズオン」と4アイデア - 福井県オープンデータ勉強会

2016/08/26 23:55:00
#opendata #fukui #odp #sparql #js 

パソコンとネット環境がある方、すべてにおすすめするWebアプリづくり。
GitHubというプログラム版YouTubeとも言える、アプリのソース共有サイトを使った手軽なWebアプリ入門。
アカウントをつくって、index.htmlをつくればマイWebサイトがすぐできあがり!
既存のアプリを取り込んで(fork/フォーク)改造すれば、自分だけのアプリがすぐできます。


無線LANを探す5つ星オープンデータ、LODアプリ「findwifi by Code for Fukui」を10人がfork!
プログラミングしたことない人を対象に開催した、福井県システム工業会のオープンデータ委員会主催の勉強会で使用したハンズオンスライドがこちらです。


GitHub & マップアプリ ハンズオン 福井県オープンデータ勉強会 // Speaker Deck
GitHubのアカウントづくり、はじめてのWebサイト、オープンアプリを取り込む、Google MapsのAPIKEY取得と設定、改造例までの手順を解説。何もインストールせずに、ブラウザだけでアプリづくりができます!

アプリづくり、3Dデータ、ウェアラブルデバイスが身近に感じられるようになったら、ハッカソン!
下記5点をデザインシンキングの触りに使って、4チームで考案。

1. どんな人が?
2. どんな時に使う?
3. どんなアプリ?
4. それに必要なデータは?
5. それに使うデバイスは?


見たいところを拡大して見られる「何でもメガネ」


テーマパークの駐車場の空きが見える「アーキング」


交通状況をチェックして遅刻しない二度寝をサポート「ちこくシラズ」


無線LANと電源完備の快適に仕事できる場所をガイドする「ドコでもワーク」

デザインシンキングは、分散しがちなターゲットをギュッと凝縮する手法です。
まずはたった一人を完璧に満足させるシンプルなプロダクトをつくるのがコツです。
オープンデータアプリコンテストや、電脳メガネコンテストへ挑戦ください!

同日開催イベント
- アフリカ留学生版「市長をやりませんか?」
- 高専インターン Hana道場 はんだづけ会

無線LANを探す「findwifi」新宿区対応!島田市、鯖江市でも使えるオープンデータアプリ

2016/08/25 23:55:00
#opendata #tokyo #odp #sparql 

odp 5つ星オープンデータと現在位置情報を使った多言語対応の無線LANスポット探しアプリが、3都市で使えるようになりました。

鯖江市静岡県島田市に続き、東京都新宿区でもWiFiスポットが登録されています。新宿区は日英、2カ国語が登録されているので、日本語以外で使われる際、自動的に英語表記となるよう、SPARQLで日英取得し、アプリで表示を切り替えています。


findwifi」 (free wifi navi)

WiFiデータ取得SPARQLはこちら(データ詳細はSPARQLKnockerでたどれます)

prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> prefix jrrk: <http://purl.org/jrrk#> select ?s ?name ?nameen ?lat ?lng ?plugs ?hours ?coverage ?graph { graph ?graph { ?s rdf:type <http://purl.org/jrrk#PublicWIFI>; rdfs:label ?name; geo:lat ?lat; geo:long ?lng. optional { ?s jrrk:openingHours ?hours. } optional { ?s jrrk:hasPlugs ?plugs. } optional { ?s jrrk:coverage ?coverage. } optional { ?s rdfs:label ?nameen. filter(lang(?nameen) = 'en') } filter(lang(?name) = 'ja') } }

オープンアプリ(ソースコードのライセンスもオープンなオープンソース)なので、自由に改造してお使いください!
Google MapsのAPIKEYは別途取得し、設定してください

参考リンク
- Code for Fukui on GitHub
- 東京都新宿区 - CKAN at odp

広がるオープンデータをつなげる鍵、みんなでつくる共通語彙基盤(IMI)

2016/06/03 23:55:00
#opendata #sparql 

200都市以上に広がった日本のオープンデータ都市
広がったものをつなげる鍵は、言葉をきちんと定義して使う、共通語彙基盤(IMI)。
東京都港区で開催された、活用が広がる「共通語彙基盤(IMI)」イベント、150人の定員いっぱい!
togetterまとめ


内閣官房/経産省の平本さんは、IMIのキャラクター「ゴイラ」Tシャツで登場!
IMIを使ったRDFの取得も可能な「経済産業省版法人ポータル(β版)」など、政府での活用も広がってます。
共通語彙基盤の語彙は、みんなでつくるもの。語彙がつながる情報連携パッケージDMDの紹介。
Join us!

jig.jpのオープンデータ支援サービス、odpもIMI対応、現在35都市のデータが入っています。
IMI使用状況を確認するアプリをつくってみました。(シンプルなSPARQLクエリー使用)

odp 共通語彙基盤(IMI) 使用状況

都市ごとの共通語彙基盤対応オープンデータ提供状況。

odp 5つ星オープンデータ対応一覧表

こちら再掲、福井県の多言語観光データを使ったJapan Random Trip
日本をランダムに再発見!

福井県はオープンデータアプリコンテストも開催中です!

ひなんメモ、避難所をローカルに保存するiOS9アプリ(Swift)

2016/04/15 23:55:00
#opendata #swift #sparql 

ひなんメモ(Webアプリ版)は、Webのオフラインアプリケーションの仕様頼みだったのに、 その機能はすでに廃止予定になっていて、iPhoneのSafariではもう動かなくなっていたので、Swift版つくってみました。(ソース on GitHub / Code for Fukui


現在位置をCLLocationManagerとiOS9で追加されたrequestLocationを使って位置情報を取得、その付近の避難所をodpからSAPRQLを使ってJSONで取得し、UITableViewを使ってリスト表示。 項目タップで地図が開きます。 取得したデータはCoreDataを使って端末内に保存しておき、クリアされない限り保持します。


ひさびさのSwift、以前書いた自分のブログ見てもアシスタントエディターを忘れていたので、図を追加。 実機で動作させようとしたら、バージョンが合わず、MacOSのアップデート、Xcodeのアップデート、設定、ライブラリ、Swiftの文法変更への対応など、なかなか手間取りました。 最近の開発環境は、がんがん更新されるので、初心者のプログラミング学習用途には向きません。
(伝統の++がSwift3では無くなる様子「【Swift3対応】Swift2.2以降のfor文法の書き方まとめ | ゆとりっち」)

実用化するにはまだ遠い「ひなんメモ」ですが、ぜひお好きなように改造しちゃってください!
ひなんメモ、ソース on GitHub / Code for Fukui

PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> select ?s ?name ?lat ?lng { ?s rdf:type ; rdfs:label ?name; geo:lat ?lat; geo:long ?lng. filter(?lat<35.95 && ?lat>35.93 && ?lng<136.19 && ?lng>136.17) filter(lang(?name)="ja") }

(緯度経度の範囲を指定して避難所を日本語で取得するSARQLのクエリー)

福井県6カ国語観光オープンデータで Japan Random Trip! 西山公園は、桜とレッサーパンダが見頃!

2016/03/31 21:30:00
#opendata #fukui #sabae #sparql 

レッサーパンダのいえ」が新しくオープンした、鯖江市西山公園内の西山動物園(無料です!)


ごはん食べる様子が近くでよく見える、新しいレッサーパンダ舎は、子供たちにも大人気!
動画配信履歴「レッサーパンダのいえ 西山動物園 - ふわっち


Japan Random Trip
福井県「福井県オープンデータライブラリ」の観光オープンデータが新たに5カ国語に翻訳され登場!
多言語対応オープンデータ日本観光アプリをつくってみました!西山公園も翻訳されてます!
開くとランダムにでてくる、5つ星オープンデータ化された観光地、言語を選ぶか、[refresh]ボタンで切り替わります。


鯖江で産まれたレッサーパンダは全国で活躍!
鯖江生まれのアプリも全国での活躍、目指します!


桜を背景に元気に動きまわる、ボリビアリスザル
なんと、世界で初めて宇宙旅行した霊長類


全国初!鉄道と路面電車で違う事業者が互いの区間に乗り入れがスタートした福井鉄道
福井・武生・三国からもぜひどうぞ!(西山公園駅または西鯖江駅、JR鯖江駅からも徒歩10分)


西山動物園、2016年4月は月曜日も開園、週末は18時までの延長営業!!

ドローンが巡回して空き状況を把握してはどうか? 最寄りの駐車場を探すアプリ odp版

2016/01/18 23:55:00
#idea #opendata #sparql #odp #drone 

駐車場が空いていなくてちょっとがっかりすること、どこが空いているか探しまわる無駄な時間、駐車場が無さそうだと外出を諦めることを減らすためには、リアルタイムな駐車場の空き状況オープンデータは必須。 ただ、センサーを多量に設置するのは大変なので、ドローンを巡回させて空から空き状況を把握する形はどうか?

衛星でもいいが、今すぐできそうなドローン駐車場把握システム。いざとなれば、AEDをもって駆けつけるシステムと兼ねてもいい。 飛ばしてそのデータをそのままオープンデータとして公開するだけのお試し運用なら、予算100万円もかからないかも。

こちら、現在の5つ星化された駐車場オープンデータ(現在データは鯖江市のみ)を使った最寄りの駐車場アプリ。


駐車場を探す odp版
丹南ケーブルテレビが取材した動画が見られる「みせばん」オープンデータとマッシュアップしてます。

関連リンク
- 「1/23(土) 防災オープンアプリハッカソン
- 「ドローンで災害地を救え!世界初の救援隊「DRONE BIRD」始動(古橋大地(DRONE BIRD隊長)) - READYFOR (レディーフォー)

グラフで見る県別人口分布から読み取る地域の特性

2015/12/23 23:55:00
#js #odp #sparql 

5つ星オープンデータ化された総務省統計局の人口データを、グラフ化しました。
グラフでみる県別人口分布(odp)

グラフにすると数字の羅列では分からないインパクトがあります。


こちらは東京都のグラフ、子供の数が一定です。少子化は体感しづらいでしょう。
福井県とは逆に大学進学のタイミング以降の人口が多くなっています。


一方、福井県のグラフ、子供がすごい勢いで減っていることが分かります。
大学進学のタイミングでの流出が見えますが、その後一定数ずつ帰ってきているようですね。
みなさんの田舎ではどうですか?

次の課題は地方間の違いや、新たに追加された5年前、2005年のデータとの比較、今後追加される2015年の最新データを含めた、ビジュアライズです。 ここからが腕の見せ所!

SPARQL/HTML/JavaScriptを使った本アプリもオープンアプリ(オープンライセンスなオープンソース)です。人口データをアプリで考える地方創生はいかがでしょう?

参考リンク
- 統計データを活用したオープンデータモデル事業を実施しました | 福井県ホームページ
- 総務省|統計におけるオープンデータモデル事業の中間成果の公表
- プレスリリース | スマホ(Android/iPhone)アプリ・携帯アプリならjig.jp(ジグジェイピー)

オープンデータ避難所ナビアプリをつくってみるハンズオン勉強会 はじめてのJavaScript+SPARQL

2015/12/14 23:55:00
#js #sparql #opendata 

福井県システム工業会(FAS)オープンデータ委員会主催、VLED支援のハンズオン勉強会を開催。 JavaScriptもSPARQLも経験ほぼ0の19名が参加し、現在位置付近の避難所を表示し、その場所までナビするWebアプリを開発、カスタマイズまで行う2時間。 勉強になった、アプリをつくりたくなったなど、うれしい声多数いただきました!

2016.1.23(土)のハッカソン(賞金付き!?)と、2016.3.5のオープンデータデイに向けて、ぜひあれこれ創ってみてください!

こちら、今回の資料です。(プログラム一式のダウンロードはこちら

HTMLの超初歩(map0.html)からスタートし、オープンデータを表示してみる(map8.html)、そしてナビアプリ(map12.html)へと、ひとつずつHTMLやCSS、JavaScript、SPARQLをなぞりながら進めていきました。


参考アプリ「観光オープンデータへのナビ(仮
いろいろ自由に書き換えるオープンソースなベースアプリです

例えば、アイコン画像、icon.png と書いてあるJavaScriptのプログラム、icon_d.png へと変更すると、この通り。

アイコンを変えるだけでがらっと印象が変わります。いろいろカスタマイズしてみましょう!

リアルタイムオープンデータ、河川の水位を使ったアプリづくりハンズオン資料もJavaScrit&SPARQLの復習にどうぞ!

SPARQLのオススメ本!

補足
※ 動かない時の対処方法:Chromeではデベロッパーツール、Safariでは開発メニュー(環境設定、詳細、開発メニュー表示をチェック)、IEではF12
※ Windowsで展開した時にできた余計なフォルダをなくしました
※ 資料にSPARQLKnocker追加など、若干加筆しています
※ SPARQLの解説はもっと分かりやすくしたい(参考、イベントアプリ統計アプリiPhoneアプリへの組み込み

みんなのイベントアプリ(地区別) - 子育てを支援アプリをつくるコーポレートフェローシップ in 鯖江

2015/12/09 23:55:00
#opendata #codefor #sabae #sparql 

今月からスタートしたコーポレートフォローシップ in 鯖江、子育てとオープンデータがテーマとのことで、早速子育てに役立つアプリづくりが動き始めました。
創ろう鯖江ネクスト! Code for Japan コーポレートフェローシップ第二弾

5つ星、イベントデータとしてクリスマスに向けた子育てイベントが登録されているので、石崎さんのモックアップを元に簡単なアプリにする方法の紹介です。


みんなのイベントアプリ(地区別)

作り方の手順(SPARQLクエリーのつくりかた)

select distinct ?o { ?s <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> ?o. }

http://purl.org/jrrk#CivicEvent がイベントデータっぽいです
odp SPARQLコンソール(http://sparql.odp.jig.jp/)に上記SPARQLクエリーを入れてみます。
(Chromeでは出力方式TSV、ブラウザで表示するをチェックがオススメです)

select ?s { ?s <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://purl.org/jrrk#CivicEvent>. } limit 1

CivicEventを一件、取り出してみましょう。
http://odp.jig.jp/jp/fukui/sabae/548#%E6%96%B0%E6%A8%AA%E6%B1%9F%E5%9C%B0%E5%8C%BA%E3%80%80%E5%AD%90%E8%82%B2%E3%81%A6%E5%BA%83%E5%A0%B4/2015-12-25/2015-12-25/

select ?p ?o { <http://odp.jig.jp/jp/fukui/sabae/548#%E6%96%B0%E6%A8%AA%E6%B1%9F%E5%9C%B0%E5%8C%BA%E3%80%80%E5%AD%90%E8%82%B2%E3%81%A6%E5%BA%83%E5%A0%B4/2015-12-25/2015-12-25/> ?p ?o. } order by ?p

?p ?o
<http://imi.ipa.go.jp/ns/core/rdf#参照> <http://www.city.sabae.fukui.jp/pageview.html?id=90>
<http://imi.ipa.go.jp/ns/core/rdf#名称> _:BX2D73f164d5X3A1514783b9d3X3A2282
<http://imi.ipa.go.jp/ns/core/rdf#期間> _:BX2D73f164d5X3A1514783b9d3X3A227f
<http://imi.ipa.go.jp/ns/core/rdf#種別> "地区子育て支援情報"
<http://imi.ipa.go.jp/ns/core/rdf#説明> "子育て広場を開催します"@ja
<http://imi.ipa.go.jp/ns/core/rdf#連絡先> _:BX2D73f164d5X3A1514783b9d3X3A2280
<http://imi.ipa.go.jp/ns/core/rdf#開催場所> _:BX2D73f164d5X3A1514783b9d3X3A227c
<http://purl.org/dc/terms/created> "2015-12-09T00:00:00+09:00"
<http://purl.org/dc/terms/modified> "2015-12-09T00:00:00+09:00"
・・・
ずらずらと結果が返って来ます。めぼしい物を選んで・・・

select ?s ?name ?desc ?url ?location ?lat ?lng ?start ?end ?note { ?s <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://purl.org/jrrk#CivicEvent>; <http://www.w3.org/2000/01/rdf-schema#label> ?name; <http://schema.org/description> ?desc; <http://schema.org/url> ?url; <http://purl.org/jrrk#location> ?location; <http://www.w3.org/2003/01/geo/wgs84_pos#lat> ?lat; <http://www.w3.org/2003/01/geo/wgs84_pos#long> ?lng; <http://www.w3.org/2002/12/cal/icaltzd#dtstart> ?start; <http://www.w3.org/2002/12/cal/icaltzd#dtend> ?end; <http://purl.org/jrrk#scheduleNote> ?note. }

一通りイベントを取り出すクエリーができました!

これをJavaScriptでつくるWebアプリに組み込んでできあがりです!

SPARQLについて詳しく学びたい方へオススメ!
Amazon.co.jp: オープンデータ時代の標準Web API SPARQL (NextPublishing): 加藤 文彦, 川島 秀一, 岡別府 陽子, 山本 泰智, 片山 俊明: 本

5分でできるオリジナル鯖江論手川排水機場水位表示iPhoneアプリ / Swift2入門

2015/11/18 23:55:00
#KidsIT #opendata #swift #sparql 

5分でつくった前回のアプリ、複数の画面を持つタブアプリにして、河川水位を追加します。 今回は、SPARQLを使いますが、コピペするだけなので、とりあえずつくるだけなら簡単です。


前回は、Single View Application を選びましたが、今回は Tabbed Applictaion を選択します。

FirstViewController には、PM2.5を表示する形にして、SecondViewController に鯖江市からリアルタイムオープンデータとして公開されている「論手川排水機場」の水位を表示させましょう。

まずは、超簡単な SPARQL にアクセスするテストを動かしてみます。viewDidLoad 内に、下記を書いて実行してみます。

let sparql = "select * { ?s ?p ?o } limit 10" let base = "http://sparql.odp.jig.jp/data/sparql?output=json&app=dev2&query=" let surl = base + sparql.stringByAddingPercentEncodingWithAllowedCharacters(NSCharacterSet.URLQueryAllowedCharacterSet())! if let url = NSURL(string: surl) { let session = NSURLSession.sharedSession() let task = session.dataTaskWithURL(url, completionHandler: { (data, response, error) in if let ns = NSString(data: data!, encoding: NSUTF8StringEncoding) { let s = String(ns) print(s) } }) task.resume() }

ポイント
- sparql.odp.jig を前回手順を参考に、アクセスできるようにしておきましょう
- sparql.stringByAdd.. で、URLのパラメータ用に変換しています (例 ? -> %3F)
あとは、前回の通信方法と一緒です。実行すると、JSONという構造化されたデータで結果が返ってきます。

最新の水位データを取得するSPARQLに差し替えて、実行してみましょう。
※SPARQLについて気になったら、SPARQL入門をどうぞ!

let sparql = "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>\n" + "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>\n" + "PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>\n" + "PREFIX dct: <http://purl.org/dc/terms/>\n" + "PREFIX odp: <http://odp.jig.jp/odp/1.0#>\n" + "\n" + "select ?created ?value {\n" + " ?s rdf:next rdf:nil;\n" + " rdf:type odp:WaterLevel;\n" + " <http://schema.org/spatial> <http://odp.jig.jp/jp/fukui/sabae/waterlevelsensor/1>;\n" + " dct:created ?created;\n" + " rdf:value ?value.\n" + "}\n"

返って来たJSONから特定の値を取得するためのコードを、通信後呼び出される completionHandler 内に追加します。

let s = String(ns) print(s) do { let json = try NSJSONSerialization.JSONObjectWithData(data!, options: []) as! [String: AnyObject] if let results = json["results"] as? NSDictionary { if let bindings = results["bindings"] as? NSArray { if let value = bindings[0]["value"] as? NSDictionary { if let value2 = value["value"] as? String { print(value2) dispatch_async(dispatch_get_main_queue()) { self.rmeter.text = value2 + "cm" } } } } } } catch let error as NSError { print("Failed to load: \(error.localizedDescription)") }

ポイント
- NSJSONSerialization というものを使ってJSONデータをプログラムに取り込みます
- if let を使ってツリー構造を順番にほどいていって、目的の値を取得し、表示しています

PM2.5と水位、タブで切り替えて最新データが見られるアプリ「sabaenow」の第一弾のできあがりです。

Swiftを使って、SPARQLでいろいろとデータを取得しアプリがつくれそうな気がしてきましたね!
odp SPARQLコンソールを使って、あれこれクエリーをお試しください!
データをざっと見てみるには、SPARQLKnockerがオススメです。

Swift2入門
- 5分でできるオリジナル鯖江PM2.5濃度表示iPhoneアプリ
- 5分でできるオリジナル鯖江論手川排水機場水位表示iPhoneアプリ

参考図書
- Amazon.co.jp: Swiftではじめる iPhoneアプリ開発の教科書 【Swift 2&Xcode 7対応】【特典PDF付き】 (教科書シリーズ): 森 巧尚: 本
- Amazon.co.jp: オープンデータ時代の標準Web API SPARQL (NextPublishing) 電子書籍: 加藤 文彦, 川島 秀一, 岡別府 陽子, 山本 泰智, 片山 俊明: Kindleストア

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / high-res profile image