先日、使いやすいオープンデータを使ったサンプルとして作った「山梨県のオープンデータを使ったアプリ」は、デザインがいまいちでした。

デザインの良し悪しの正体は?
それは、自分に向けて作り手の伝えたい気持ちが伝わってくるかどうか。
なんだかいい加減に作っただけだなぁ感が、イケてない感となります。

そこで、デザイン性をアップする便利なツール「Bootstrap」を使ってみました。

before

特選やまなしの食 オープンデータ

after

特選!山梨グルメ
いい感じになりました!

プログラムはほとんど変わってません。いい感じのリンクボタンが付けられるので、説明と合わせて全部表示しています。(53行 src on GitHub)

<script type="module"> import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import { shuffle } from "https://code4sabae.github.io/js/shuffle.js"; window.onload = async () => { const csv = await CSV.fetch("https://code4sabae.github.io/yamanashinoshoku/yamanashinoshoku3.csv"); const data = CSV.toJSON(csv); console.log(data); const ss = []; shuffle(data); for (const d of data) { const [ no, url, imgurl, name, area, desc ] = [ d["No."], d["「食べられる・買えるお店」URL"], d["写真URL"], d["名称"], d["地域"], d["説明文"] ]; const html = ` <div class="card"> <img class="bd-placeholder-img card-img-top" width="100%" src="${imgurl}"> <div class="card-body"> <h5 class="card-title">${name}</h5> <p class="card-text">${desc}</p> ${url.length ? `<a href="${url}" class="btn btn-primary">食べられる・買えるお店</a>` : ""} </div> </div> `; ss.push(html); } main.innerHTML = ss.join(""); }; </script>

Bootstrapは、CSSを自分で書かなくていいのが便利。
HTMLのclass指定だけで間をとったり、色を変えたり、調整するのが簡単です!

山梨県オープンデータ研修にて紹介した、オープンデータは自由に使えるデータ、活用編です。 公開されているオープンデータが使いにくいなら使いやすくしちゃえばいいんです!
特選やまなしの食 オープンデータ


山梨県オープンデータ検索」にて、アプリで使いやすいCSV形式で検索してみます。


18件ヒットしました。


一番トップに表示された「特選やまなしの食オープンデータ」画像ファイルもあっていい感じ!


早速、CSVデータをwebアプリから取得しようとしてみると、違うドメインからのアクセスが許可されていないのでエラーがでてしまいます(CORSエラー)。 webアプリからのアクセスを歓迎するのであれば、HTTPヘッダーに下記のような設定を加えます。

Access-Control-Allow-Origin: *

加えてほしいとお願いしてみるのも手ですが、再配布もOKなオープンデータなので、GitHubにコピーして使うことにします(GitHub Pagesは、上記ヘッダーがつけてくれます)。 また、文字コードがSJISなので使いやすいUTF-8変換し、せっかくのステキ写真のURLの記載がCSVデータにない点も、こちらも加工して追記します。

まずはダウンロード (donload.js JavaScript/Deno)

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; const csv = await CSV.fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/documents/yamanashinoshoku.csv"); console.log(csv); await Deno.writeTextFile("yamanashinoshoku.csv", CSV.encode(csv)); const html = await (await fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/yamanashinoshoku_tokusen47_od.html")).text(); console.log(html); await Deno.writeTextFile("yamanashinoshoku.html", html);


続いて、node-html-parserのDeno版を使って、画像ファイル名一覧取得。

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import HTMLParser from "https://dev.jspm.io/node-html-parser"; const fn = "yamanashinoshoku.html"; const html = await Deno.readTextFile(fn); const root = HTMLParser.parse(html); const links = root.querySelectorAll("a"); for (const link of links) { const href = link.attributes.href; const txt = link.text.trim(); console.log(href, txt); }

写真をダウンロードして、URLをセットしなおして、できあがり!
yamanashinoshoku3.csv


特選やまなしの食 オープンデータ
ひとまずシンプルなサンプルとして、食べ方リンクがある画像だけを表示する、山梨の特選を目で楽しむアプリのできあがり!

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; window.onload = async () => { const csv = await CSV.fetch("https://code4sabae.github.io/yamanashinoshoku/yamanashinoshoku3.csv"); const data = CSV.toJSON(csv); for (const d of data) { const img = new Image(); img.src = d["写真URL"]; const url = d["「食べられる・買えるお店」URL"]; if (url.length > 0) { img.style.cursor = "pointer"; img.url = url; img.onclick = function() { window.open(this.url, "_blank"); }; main.appendChild(img); // リンク付きだけ表示 } // main.appendChild(img); // 全部表示 } };

いろいろ改造して、ステキなアプリづくりにチャレンジしてみましょう!
→ 2020.01.24 デザイン改善版、公開

links
- ウェブサイトに一文追記すればOK! オープンデータのはじめかた

山梨県の県内市町村自治体の方向けオープンデータ研修。日本のオープンデータ都市率100%を目指して、簡単にはじめる方法をご紹介!

オープンデータとは、自由に使えるデータのこと。


「機械判読」は必須じゃないので、ひとまず気にしなくてOK!
価値あるデータは、少々使いづらくても使われます。


日本の市町村オープンデータ取組率ダッシュボード (カラム地図7x7 x 政府CIOポータルオープンデータ)
現在取組率18%の山梨県、全自治体の方が集まった研修、よい機会なので100%にしちゃいましょう!


山梨県大月市の「ごみ収集日程表」を例に解説。

「ごみ収集日程表」はオープンデータ(自由に使えるデータ)です。
(ライセンス:CC BY 4.0
この一文をページ内に記載すればOK!
簡単ですね!(CC BY アイコンダウンロード)

まずはオープンデータはじめのいっぽ、踏み出しましょう!


20210120-山梨県オープンデータ研修.pdf
本日の研修資料もオープンデータです。


めざせ、政府目標、2020年度中のオープンデータ都市100%

links
- 利用者にやさしいCSVオープンデータの作り方、特選やまなしの食オープンデータ事例
- 手軽にいい感じデザイン開発できるBootstrap版、特選!山梨グルメ、オープンデータ活用アプリ

3年ぶり2度目の山梨訪問。
高校生・高専生による小中学生への指導による持続可能モデルがすごい「U-16プロコン」による旭川モデルを目指す、山梨県。


NPO法人 山梨ICT&コンタクト支援センターによって、今年初開催となる「U-16山梨プログラミングコンテスト」の事前講習会、熱心に学ぶ子供たちに会うことができました。


熱心にメモを取る姿!


プログラミングの学び方を伝授!良い顔!


こちら本日の発表スライド、復習に、IchigoJamプログラミングはじめにどうぞ!
IchigoJamではじめてのプログラミング」(二次利用、改変自由なオープンデータ)


会場は、地域社会・ICT人材育成に力を入れる、株式会社シー・シー・ダブルのステキ社屋


甲府駅前ではおまつり!


ベーコン、美味でした。


葡萄のジュースも!


前回講演した場所、発見
はじめてのモバイルWebアプリ+SPARQLハンズオン水位推移予測ゲームのつくりかた+山梨県甲府講演資料
IchigoJamでプログラミングを学ぶコツをつかんだら、webアプリづくりにもチャレンジしてみてねっ


信州で実験進む、IoTセンサーネットワーク。


二酸化炭素計測器 x M5Stack x スマートスピーカー


丸いディスプレイが特徴「Echo Spot
懐かしい「チャンビー感」(2014年、新モデルがあった様子)
かわいいぬいぐるみをかぶせたくなりますねっ(14,980円 on Amazon


サッカーなど応援に便利な開発中のバーサライター


裏面にもWS2812B、キラキラ


光るキーボードにハマる青年、光るとだいたいいい感じ理論!


見ていると、だんたん作りたく不思議。

links
- U-16山梨プログラミングコンテスト| 山梨ICT&コンタクト支援センター
- GDG信州

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS