#js / 福野泰介の一日一創 / Create every day by Taisuke Fukuno

常設したIoT温度計とねこ観察の結果、家の温度を20度以上に保つことの重要さが分かった。
常設する温度計として、昔買った iPad mini を活用！

「IchigoOndo for ES5」
IchigoSodaなど、sakura.ioを使って、温度データを送り、sakrua.io の DataStore API からデータを取得し、グラフ表示化webアプリ。せっかくなので時計を付けて、時計化したところ更に便利に！

iOS9.3.5のまま止まった古いiPad miniなので、以前作ったものはJavaScriptのES7というバージョンの機能を使っているためそのまま動かず。

ES8(ES2017)から対応の非同期処理をシンプルに記述する async/await を昔ながらのコールバックに戻し、ES6から対応の変数の宣言 let/const を古い表記 var にすべて置換で動きました！

TypeScriptで記述し、ターゲットをES5にして、polyfillでうまいことやってもらうのも手かもしれない。（参考、Typescriptのtargetについて調べてみた - 豆腐とコンソメ）

古いとは言え、ネットにつながり，高精細なフルカラーをグリグリ動かせる旧タブレット、時計や、情報端末として活かしてみるのもいいですよ！
（参考、一日一創2012 時計、時間カテゴリー）

「timeter」
2020年、5%過ぎました！

プログラミングの経験が一切なくても5分で地図を使ったオリジナルアプリが無料で作れて、公開できます！

今年も開催、地理情報を楽しく活用するイベント「Geospatial Hackers Program」
アプリづくりに興味がある方、G空間ハッカー、はじめのいっぽは簡単ですよっ！
「総務省｜令和元年度「Geospatial Hackers Program」の開催≪地理空間情報を活用可能な人材の裾野拡大に向けたハッカソン等の開催≫」

こちらサンプルアプリ「京都いらすとマップ」
準オープンデータとして紹介に使わせてもらっている「いらすとや」さんのイラストから京都で検索したG空間っぽいいらすとをアイコンとして緯度経度と合わせて設置しました。
全国、全世界のランドマークがかわいくマップにでて、詳細が辿れたりするのもおもしろそうですね！

どのように作ったか？
画像を icon フォルダにアップロード(Upload files)して、該当緯度経度や名前と共に addIcon 命令を並べるだけ！

map.setZoom(11) map.panTo([ 34.985234, 135.758595 ]) // 京都駅 map.addIcon(34.987522, 135.759335, "京都タワー", "icon/landmark_tower_kyoto.png", 64) map.addIcon(34.980837, 135.767639, "鴨川", "icon/thumbnail_bg_kamogawa.jpg", 64) map.addIcon(35.023115, 135.803829, "五山の送り火", "icon/landmark_gozan_okuribi.png", 64) map.addIcon(35.010324, 135.768301, "本能寺", "icon/landmark_honnouji.png", 64) map.addIcon(34.967021, 135.774746, "伏見稲荷の鳥居", "icon/landmark_fushimi_inari.png", 64) map.addIcon(34.988047, 135.771754, "三十三間堂", "icon/kankou_sanjusangendou.png", 64) map.addIcon(34.994875, 135.784959, "清水寺", "icon/kankou_kiyomizudera.png", 64) map.addIcon(35.039527, 135.728476, "金閣寺", "icon/kankou_kinkakuji.png", 64) map.addIcon(35.026885, 135.798276, "銀閣寺", "icon/kankou_ginkakuji.png", 64) map.addIcon(34.889282, 135.80766, "平等院鳳凰堂", "icon/kankou_byodoin.png", 64)

いろんな地図アプリづくりに慣れてきたら、5つ星オープンデータを操る、SPARQL（スパークル）にもぜひ挑戦してみてください。まだまだデータが不足していますが、みなさんのアプリひとつひとつがデータ拡充への原動力です！

東海(2/1-2)、北陸(2/8-9)、関東(2/15-16)、沖縄(2/22-23)、各地イベントにもぜひ足を運んでみてください！位置情報を使ってどんなアプリがあるとおもしろい！？みんなで考えて作ってみましょう！

ハンズオン資料はこちら「はじめてのマップアプリとSPARQL（スパークル）(PDF)」
プログラミングの予備知識一切なしでOK、メールアドレスひとつあればどなたでも地図アプリ、作れます！
GitHubのアカウント取得から、サンプルアプリのコピー(GitHubではforkと呼ぶ)、ブラウザ上での編集、公開まで手取り足取り（ハンズオン）で解説しています。（詰まったら箇所、サポートしますので @taisukef までDMやメンションでお知らせください）

動画で学ぶ派の方向けに、都内スタジオにて解説動画、収録してきました！

カメラ目線でスライドが見える、プロンプターが便利でした！
近日、公開される予定です。
おたのしみに！

学生生活、何をして過ごせばいいのだろう？
オススメは何でもいいので、何か創って見せてみること。反応がなくても悪くても気にしなくてOK。熱い先生、変なことをやってる友達や先輩たち（含む、私）がオススメです！

木更津高専にお呼ばれして、講演＆起業アイデア講評会。
千葉県、災害によって露呈した、独居高齢者とのコミュニケーション断絶問題。
スマホでは解決できない問題に、電子ペーパーで切り込むアイデア

Code for Kosen として活動スタートしているのはなんと2年生！
市役所や高齢者とのヒアリングを重ね、プロトタイピングを進めていると聞いて感動！
高専OBとして、オープンデータ伝道師として協力しない手はない。

「館山市安全・安心メールバックナンバーをスクレイピングして表示するアプリ例」
舞台となる館山市、お知らせ情報はオープンデータ化されていないので、ひとまずイメージとして実現するためのAPIを作りかけてみました。「館山市安全・安心メールバックナンバー」のHTMLから本文を抜き出し、JSONデータにする node.js用、JavaScriptのプログラムです。

const main = async function() { const data = await getNotices() const json = JSON.stringify(data) console.log(json) fs.writeFileSync('notices.json', json) }

(port of makenotices.js / src on GitHub)
お知らせを全件取得し、JSON化して、表示して、ファイルに保存。HTMLのパースには、cheerio を使用。Node.js を入れた後、次のコマンドでインストールできる。（なければ、web取得のrequestも）

npm install cheerio npm install request

ひとまず、fukuno.js を使って、そのまんま表示しているだけのフロントのプログラム。好みのフレームワークを使ったり、使わなかったりして、使い勝手良いアプリに仕上げてみよう！

<body> <script src=https://fukuno.jig.jp/fukuno.js></script> <script> window.onload = async function() { const notices = await (await fetch('notices.json')).json() console.log(notices) dump(notices) // fukuno.js } </script> </body>

「webアプリはじめのいっぽ」で、いろいろ作り込んでみよう。
サーバーサイドでプログラムを動かし、公開したくなったら「はじめてのウェブサイト with Heroku」をどうぞ！

欲しいアプリ、自分で作って、かわいい自分だけの名前を付けましょう！

熱い、木更津港先生！創造は最大の学習なり！

起業アイデアコンテストにも飛び入り発表した、電子部品タワーバトル！
電子部品好きが増える＝高専生が増える＝全国の高専＝世界中の工学系の学校が喜ぶ！

どんなアプリか、デモしてくれたときの様子をコンパクトに編集してみました。
自分の動きが画面内のかわいい電子パーツに反映され、連動するスマホのボタンを押して落下、2人交代でタワーを作っていき、落としてしまったら負け。楽しく電子パーツと仲良くなれそう！

木更津高専発、一般社団法人prane.jpn（プラネジャパン）！
学内で必要なサービスを開発して、提供するしくみ、おもしろい！

with jigインターンOB！（興味ある高専生、事前登録をどうぞ！）

Be Creative.

熱い高専に熱い先生あり、木更津高専、谷井さん＆米村さん！
統計とオープンデータとVR、おもしろいですよ！（世界人口VR、首都圏電車VR）

文部科学省から発表、小学校プログラミング教育の準備状況。
93%が準備OK？たった7県しかできていない黄色信号？
データの見方は人それぞれ、原典にあたるのが一番です。機械判読に適しているとは言えませんが、PDF内に表形式でデータがあったので、オープンデータとみなして、CSVに加工、アプリ化したものがこちら。

「小学校プログラミング教育準備状況ダッシュボード」
行政区の数え方、回答のあるなしなど、興味深い点はいろいろありますが、ひとまず、オープンデータ都市率と同様、カラム地図化。 CSV化したオープンデータで誰でも自由に解析いただけます！

さすが、福井県、100%！

ただ、全然安心してはいけません。何が100%かというと「各校１人以上の教員が、実践的な研修、または、授業・模擬授業を実施済と把握している」と回答した教育委員会の数に過ぎません。実際こどもたちにどう伝わるのかは未知数です。アンケートに、すでに実施している（一部、全校）、学年、時間数、授業課目など、より踏み込んだところを聞いてほしいところでした。

ちなみに、鯖江市は、12校、全校実施済み、4年生、総合的な学習の時間2コマ！
（参考、総合2コマから始める鯖江の小学校プログラミング！総合的な学習の時間、IT遊具、クラブ活動、地域ICTクラブ、高度IT人材へのベストプラクティス）

今日は、将来の幼稚園保育園小学校の先生を育てる、仁愛大学子ども教育学科のみなさんに小学校プログラミング教育の模擬授業。

LED制御、テレビゲームづくり、ロボットプログラミング、ドローン制御まで、1時間半、楽しく学んでくれました！

1行ずつ打ち込む、ゲームづくりは、大人も子どもも学生も楽しい！

読み書き、プログラミング！ YouTubeなど動画で学習、発信する時代の読み書きも変革が必要そう。

世界各国で進むこどもプログラミング、うかうかしていると日本のこどもたちだけ置いていかれてしまいます。
それより恐ろしいのは、日本だけで進むこどもパソコン離れ。
「世界で唯一、日本の子どものパソコン使用率が低下している | ワールド | 最新記事 | ニューズウィーク日本版オフィシャルサイト」
デジタル化が遅れている日本、今使わない人が多い中、いかにこどもたちにパソコンの楽しさを伝え、持ってもらうか。
PCNの答は、ネット不要のこどもパソコンIchigoJamと、ノートパソコンが当たる、PCNこどもプロコン！

IchigoJamならLED制御、センサーで計測、ロボットプログラミングも簡単！
コンピューターの速さ、知ってますか？頼りになる相棒を使いこなせるようになると楽しいですよ！

一番の盛り上がり、ドローンプログラミングデモ！

こどもプログラミング教育 - IchigoJamを使った模擬授業＠仁愛大学 from Taisuke Fukuno

こちら本日のスライド（福野分）、編集改変も自由なオープンデータなので、復習に、ワークショップに、どうぞ活用ください！

最後はTHETAで記念撮影、仁愛大学のみなさん、ありがとうございました！
プログラミングしたくなったら鯖江にあるHana道場までふらっと遊びに来てください！

今月は、金沢、岡山でも模擬授業あります！
総務省主催「地域ICTクラブプログラミング教育フォーラム」が令和2年、金沢と岡山にて開催されます！
令和2年1月23日（木）14時～17時　TKP岡山会議室（〒700-0826 岡山県岡山市北区磨屋町1-6）
基調講演金沢市のD、松田孝さん、広島、福井、横浜の事例と模擬授業 (PDF)

令和2年1月27日（月）14時～17時　金沢市文化ホール3階大会議室（〒920-0864 金沢市高岡町15番1号）
基調講演 Hana道場運営もしている竹部美樹さん、福井、埼玉、広島の事例と模擬授業 (PDF)

福井市の中学生からの質問

HTMLのテンプレートにMarkdownを埋め込もうと考えたのですが、いい方法はないのでしょうか。

GitHubでドキュメント書く時に使うMarkdown記法、HTMLの替わりにシンプルにマークアップできるので慣れるといろいろ使いたくなりますよね！作りました！

先頭のscriptタグはページ内にひとつあればOKです。
思う存分 Markdown を使って、サクサクウェブサイト作っちゃいましょう！

スタイルシートはお好みでどうぞ！

参考までに、この実現に至るまでの調べ方、作り方を紹介。
1. "markdownをhtmlに埋め込む"で検索
2. 「Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita」が見つかる
3. MITライセンスの marked が使えることが分かる。でも、JavaScript埋め込みで /* などに制約あり
4. ` を使った記法を使えば制約が緩めて、シンプルに使えるような関数を実験しながら作成

5. forkしたmarkedにmdを加える（ちょっと強引だけど、MITライセンスなのでOK）
6. GitHubのSettingsで、GitHub Pages として master branch を公開、誰でも使えるようになる

日本全国市区町村すべてに、オープンデータをリーダーを！
オープンデータリーダ研修事業、千葉県にて講演＆サポートに行ってきました。

研修のインプットタイム、アイデアソンでも登場した、ごみに関するオープンデータ。 odpでは、横展開可能な5つ星オープンデータにて、鯖江市、三島市、品川区のデータが標準API、SPARQLで使えます。

ふと気になった、分別の違い。早速作ってみたのがこちら。

「ごみ分別オープンデータ（鯖江市＆三島市）」
絞り込みフィルタを使って、かんたん検索！鯖江市では「CD」は資源ごみ！？
まだ使えるものは「オタマート」への出品もどうぞ！

ごみ名が一致するものを上位に表示しています。完全一致するものが13件。「食用油」、三島市では「燃えるごみ」、鯖江市では「資源物」と違います。みなさんの自治体ではいかがでしょう？「燃えるごみ」と「燃やすごみ」、「粗大ごみ」と「大型ごみ」、「危険不燃物」と「有害物」などの用語や定義の違いもありますね。

インプットタイム、地域事例紹介「オープンデータの活かし方、創ろう、世界最先端国家」

オープンデータとは何か？難しく考えなくて大丈夫です。自由に無料で使えちゃうweb上のデータ、それがオープンデータ。「機械判読に適したもの」と説明されることがありますが、気にしなくてOK！

根拠はこちら、政府CIOポータル / オープンデータからリンクされている「二次利用の促進のための府省のデータ公開に関する基本的考え方（ガイドライン）平成25年6月25日」内に記載があります。

なお、上記情報のデータ形式が機械判読に適したデータ形式でなく、データ形式の変換に多くのコストを要する場合には、当面、従来のデータ形式で公開すればよいこととする。

つまり、機械判読に適していなくてもOK！画像でもPDFでもWordでもExcelでも安心して、RAW DATA NOW! しちゃいましょう。
「Tim Berners-Lee: The next web | TED Talk」

ただし、イノベーションにつなげるには、LINK DATA NOW! 5つ星オープンデータ化が必須です。ひとまず、完全無料の避難所データ(odp)でお試しください。下記はごみ分別アプリの肝となる、SPARQL APIへの問い合わせです。

select * { graph ?g { ?s <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://purl.org/jrrk#Rubbish>. ?s <http://www.w3.org/2000/01/rdf-schema#label> ?name. ?s <http://odp.jig.jp/odp/1.0#classified> ?cls. optional { ?s <http://www.w3.org/2000/01/rdf-schema#comment> ?comment. } filter(lang(?name) = "ja") } } limit 1000

5つ星オープデータのまとまりから、typeがRubbish(ごみ)から、日本語表記の名前、分別、もしあればコメントを、最大1000件取得しています。どの自治体がどういうデータを提供しているかは、5つ星オープンデータ対応一覧表で一目瞭然。

2012年、早期オープンデータ開始、3都市のひとつ、流山市のオープンデータ担当の方！（他、会津若松市、鯖江市）

アイデアソンのテーマ「ここまでできる！？究極のオープンデータ活用法」

3-4人のチーム、ブレインライティングにより質より量！いろいろなアイデアがでていました。
アイデアに名前をつけるとテンション上がるのでおすすめです。

千葉県庁から千葉駅まではモノレール！宙を走る感じがおもしろい。

県庁前が終着でした。

お店を開くのは大変ですが、ネット上の仮想店舗なら簡単、無料！
自分だけのウェブサイトづくり、Herokuを使って無料ではじめる方法を紹介します。

salesforce.comの子会社、Herokuには、サーバーサイドでプログラミングでき、広告なども一切ない代わりにアクセス制限がある、無料版があります。

JavaScript, Ruby, Java, PHP など、さまざまな言語に対応しているHeroku、今回はJavaScript/Node.jsを使って、ひとまずウェブサイト立ち上げまでをご案内！

1. 準備
Node.js をインストール
git をインストール

2. サンプルをローカル（自分のPC上）で開く
ターミナルやコマンドプロンプトを開いて、任意のフォルダに移動(cd)して、下記を順番に実行

git clone https://github.com/heroku/node-js-getting-started.git cd node-js-getting-started npm install node index.js

http://localhost:5000/を開くと、下記のような画面がでれば成功です！

（でなかった方 @taisukef までご連絡ください）

3. オリジナルサイトづくり
HTML/CSSを書いて、オリジナルサイトに変更しましょう。

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>わたしのウェブサイト</title> <meta property="og:image" content=""> <meta name="viewport" content="width=device-width"/> <meta name="format-detection" content="telephone=no"> <style> body { font-family: sans-serif; color: hsl(40, 80%, 10%); background-color: hsl(40, 90%, 80%); text-align: center; } .main { margin: 2em; } .footer a { color: gray !important; } </style> </head> <body> <h1>わたしのウェブサイト on Heroku</h1> <div class=main>ようこそ！わたしのウェブサイトへ</div> <div class=footer><a href=https://fukuno.jig.jp/>無料ではじめるウェブサイトづくりHeroku編</a></div> </body> </html>

上記HTMLとCSSでできたウェブサイトを自由にアレンジし、publicフォルダに index.html というファイル名で保存。
先程開いた、http://localhost:5000/をリロードしてみましょう！

できました！

4. ウェブサイトを公開する
Herokuにユーザー登録して、Heroku CLIをインストールします。
再度、ターミナルやコマンドプロンプトを開いて、同じディレクトリへ移動(cd)し、URLのホスト名にあたるユニークな名前をアルファベットと数字、ハイフンの組み合わせで決めます。

heroku create taisukef-firstweb1

私はここで taisukef-firstweb1 と名付けましたが、同じ名前は世界中の誰であっても付けられません。
続いて、Herokuのサーバーへファイルをアップロードします。

git add . git commit -m "add index.html" git push heroku master

commitの後に続くパラーメーターで、コミット時のメモを書いておくのがプロジェクト管理ツール git のポイント。
開いてみましょう！

heroku open

無事、表示されましたか？
付けた名前 + .herokuapp.com があなたのウェブサイトのURLになります！

5. 更新が面倒？
マイクロソフトの子会社、GitHubが提供する、GitHub Desktopから「Add Repogitry」で追加すれば、GUIで使えます！

6. next steps...
あとは、自由にデザイン変えたり、内容を追加したり、ページを増やしたり、サーバーサイドのなにかプログラミングを加えたり自由自在です。
こちらが、今回ベースに使った Node.js の入門です。データベースへの接続方法の記載もあるので、試してみましょう。（add-onsは、カード登録が必要な様子）
データーベース入門に、北九州高専生で、インターンOB、ふっけの記事！
「[Heroku Postgres] Herokuを使って無料でデータベースを利用する - Qiita」
この記事きっかけで Heroku 初使用、ありがとう！

かんたんにスタートできるHeroku、制限が来そうなら、月額$7からの有料プランを検討しましょう。

自分でサーバーを管理にチャレンジするなら ConoHa（プリペイドOK!）やさくらインターネットのVPS、サーバーサイドのプログラミングが不要なら、GitHub Pagesがオススメです。

小中学生向けプログラミングコンテスト「PCNこどもプロコン2019-2020」締め切り間近！
プログラミングに慣れてきたら、サーバーサイドプログラミングにもチャレンジしよう！

美しいDNAの二重螺旋、赤いワイヤーフレームバージョンを作成。
夢の赤い3D世界、HTMLとJavaScriptをちょっと使うだけで、思う存分、創り放題！

「DNA - 二重螺旋VR 赤いワイヤーフレーム版」
作り方は簡単、A-FRAMEの wireframe 属性を true にするだけ！(src on GitHub)

そう、この世界！

ルイージマンション3で唐突に登場、バーチャルブー！まさかのバーチャルボーイ！

博士からの入電、モバイルに進化したVBをかければ

赤い世界！

バーチャルボーイ、Windows95前夜の1995年7月に発売（自宅のVB）

変なゲーム好きだった現役高専生の頃、大興奮して遊んだあの頃を思い出します。バーチャルボーイ、多くのソフトを、店頭の「ご自由にお取りください」で保護！ NINTENDO LABO VR KITでもバーチャルボーイ登場。同世代の活躍、うれしいです。

映った！（名作、レッドアラーム by T&E SOFT）
でも、振動板が壊れてしまっているらしく、右目のみ

あの頃の夢、Oculus Quest を使って、作ってみましょう！
ハンドトラッキングが安定し、対応ソフトが増えれば出るか、廉価版!?
29,800円など、攻めた価格で登場すれば、今年早期の1000万台普及も夢じゃない。

福岡県北九州市、北九州高専プログラミング研究部！

jigインターンOB、トミーのおかげで、念願叶いました。
「北九州高専コンピュータ研究部の紹介 - あかいろ情報系高専生の日記」
「jig.jp インターン2018始まります！ - jigintern2018’s diary」← インターン時

さくらインターネット製のIchigoJam、IchigoSoda

このIchigoSodaを使った世界一カンタン（当社調べ）なIoTプログラミング体験！

ゲームづくりを通じてアルゴリズムを学ぶ、かわくだりゲーム大会で最長記録！さすが高専生、見切ってました！
高専生向けには、35 WAIT2 をデフォルトにしないといけないかも？
たった1コマンド加えるだけで、TがIoTに変わりました！
応用範囲は無限大。
（IchigoJam/IchigoSodaのスライドは、オープンデータ、自由に活用ください！ slide on GitHub）

地域の課題をみんなでみつけ、小中学生の柔軟な発想に刺激を受けて、高専生の実装力を合わせて、どこにもなかったサービスやプロダクトを創り出しましょう！
隣の人、隣のまち、隣の国へと広がった結果、それがイノベーション！

IchigoJam BASICで、楽しく遊んで、改造して、教えられるようになったらオススメしたい、次の一歩はスマホでもPCでも動く、JavaScriptでつくるwebアプリ。
「はじめてのJS - JavaScriptはじめのいっぽ」「まずは作って公開オリジナルサイコロアプリ！ HTML/JavaScript/GitHubはじめのいっぽ」

HTMLとCSSをいじるだけでもオリジナルアプリ、できますよ！
北九州市オープンデータ、ふっけーが発見したAPIを使ってサンプルアプリ作ってみました。

「イベントサーチ北九州」
HTML/CSS/JavaScriptが入った、シンプルな1ファイル、ぜひソース（プログラム）を手元に保存して改造してみましょう！

div.innerHTML = ` <h2>${e.event_name}</h2> <div class=cat>${e.ctg1}</div> <div class=area>${e.Area}</div> <div class=description>${e.description}</div> <div class=place>${e.place}</div> <div class=date>${date}</div> <a href='${e.url}''>${e.url}</a> `

こんな感じでHTMLに読み取ったデータを埋め込んでいくイメージです。

オープンソースな鯖江メガネアプリで撮影、秒間1兆回の計算力をカジュアルに遊べるのが、プログラミングの魅力！
慣れたら、横展開は速い、言語習得！iOSかAndroid、自分の持ってる機種のネイティブアプリづくりにもチャレンジ！
OculusQuestなどのVRも良し。

PCN北九州製のクリスマスツリー！シンプル8pinのCPU付きの基板、USBポートに差し込むだけでキラキラ光る！
ずっと安く、簡単になっったハードウェアづくりも良し。

PCN北九州メンバー、増えました！
jigインターン2019OB、ふっけーも！
「[ふっけー] jigインターン2019 - 終わりわよ!! - jigintern2019のブログ」

jigインターンをインターン参加者のトミーとふっけーが紹介してくれました！
全国から高専生が集まり、3週間でサービスを作るモーストエキサイティング（当社調べ）なインターンです。

3週間のインターン中に、ハッカソン、VRスイカ割り、滝行するインターンはjigインターンだけ！

プログラミング好きで、ちょっと外に飛び出てみたい人、事前登録どうぞ！

お料理版、AtCoder、オタクック、プログラミング好き高専生にはウケますね！

北九州高専出身で、北九州高専の先生で、プログラミング研究部の顧問、2年上の先輩、松久保さん、ベーマガとの再開に歓喜！

初訪問だった、南国感ある北九州高専！37キャンパス目、訪問率58%

北九州市役所、三浦さんとも会えました！

小倉城！3Dモデルオープンデータとかあると楽しそう！

福岡名物、ごぼ天うどん！ごぼうの迫力！
地域のチェーン店オープンデータ、あると楽しそう。

岩手県、一関のお隣、平泉にはなんと世界遺産！

世界に1121、日本に23ある世界遺産。

こちらが中尊寺金色堂、外観！金箔で覆われた金色堂は、この覆堂の中。
世界遺産オープンデータを使って、スタンプラリー的なアプリづくりもいいかも？

一関駅でも、食べられる名物もち料理！

すっかり一関のもちファンです。さすがもちの聖地！
「いざ、餅の聖地・一関へ。おいしい餅をたらふく頂く！│観光・旅行ガイド - ぐるたび」

もちオープンデータもほしいですねっ
「一関もち料理データベースが出来ました | お知らせ | 【いち旅】いちのせき観光NAVI」

一関市のオープンデータのURLを入力ボックスにいれて「showCSVs」ボタンを押せば、ページ内のCSVオープンデータを順次読み取りテーブル表示。

ひとつの大きなテーブルを作るために、読み込むほどに項目名が増えていく様子にも注目です。

「showCSVs」
CSVファイルが並ぶサイトは、だいたい有効。
こちらプログラムのコア、async/awaitを使うと流れがすっきり、読みやすい！

const showCSVs = async function(url) { const html = await fetchViaProxy(url) title.textContent = parseTitle(html) const links = parseLinks(html) const csvurls = links.filter(url => url.endsWith(".csv")) const csvs = [] for (const csvurl of csvurls) { const data = await fetchViaProxy(csvurl) const csv = convertCSVtoArray2(data) csvs.push(csv) const tbl = makeTableFromCSVs(csvs) clear(main) main.appendChild(tbl) } }

リアルをプログラミングして遊べるのがオープンデータの醍醐味！
いろんなオープンデータ、リクエストしたり、作ったりしてみよう！

今回初となった一関高専！
高専いったことあるよマップを更新！ 36キャンパス目！