會津価値創造フォーラム×KDDI「データをみせる、もっとつながる」と、Govtech Conference Japan #04「COVID-19 対策の官民協働」 へのオンライン登壇。 オープンデータの活用例を紹介しディスカッション。地域と政府と企業と個人、それぞれが取り組む方向性が見えてきました。 21世紀のデータ連携基盤は、中央集権型の何かサーバーではなく、web上にそれぞれが利用者視点に立って整備するオープンデータ。 それぞれが少し歩み寄り、型が決まれば、ソフトウェアでつながり、つながる程に便利に、強力になっていきます。

誰か任せではなく、ひとりひとり、企業ひとつひとつがちょっと前進させることが、全体で大きな力になるのが、webの世界です。


KDDIさん連携で実現した、會津価値創造フォーラムへのオンライン登壇。IchigoJam制御(DMX512WS2812B)の照明も合わせて準備万端!
(参考、會津価値創造フォーラムとKDDIによる包括的連携の協定締結式がLINK FORESTでおこなわれました。高専生にもオープンなまち鯖江、福井高専 x KDDI x エル・コミュニティ x jig.jp 包括協定!


会津、鯖江、徳島、筑波など、多拠点つないだオープンデータディスカッション。オープンデータの立役者、鯖江市役所 牧田さんも登壇!

ひとまず手軽に始めるオープンデータ、次の一歩にオススメしたい、オープンデータで自慢する地域!

就業ランキング - 2015年国勢調査版
福井県の社長率ナンバーワン、裏を取ろうと国勢調査2015年版を使ったアプリづくり。社長を含む役員率でいうとそう高くない!?人口で割って見るものかも? 分子と分母を男女別8区分から選べます。(国勢調査の用語解説、従業上の地位


日本全国から各都道府県別にいろいろチェックできます。気になるまちのランキング、地域での比較と考察が熱いです!


2015年役員率ベスト10(母数は就業者数)!高い方と低い方からベスト10の表示もあります。

続いて、Govtech Conference Japan #04!

出番前の待機、ブラウザだけでOK、配信はどんどん手軽になりますね!


支援制度の発信、とってもスムーズに開発できた #民間支援情報ナビ と、苦労した 新型コロナウイルス対策ダッシュボード を紹介。
わかりやすく見せるのもまた技術であり、ビジネスのコア。政府がどうがんばっても追いつけるわけもないし、追いつく必要もないので、正確で使いやすいCSVオープンデータでシンプルな情報発信がうれしいです!

長岡造形大学生による、Govteck Conference Japan #04 グラレコ!

支援制度の発信、オープンデータとオープンソースを使って、いろんな情報発信、取り組みましょう!


電子署名が鍵、押印不要化!
国勢調査もマイナンバーで実施できれば、紙を受け取る必要なかったのでは!?

ひとりひとりの行動で変えよう、日本DX!

links
- 一日一創から2アプリ掲載、オープンデータ登場数が倍増した総務省 情報通信白書 令和2年度版と郵便局の閉鎖率

今期での引退を表明した鯖江市長、牧野さん9/11、最後の議会での挨拶。市長が大きくアピールした、市民主役のまち、ものづくりのまち、ITのまち、学生連携のまち、めがねのまち、鯖江。 大きく育てていきましょう!


鯖江市議会 第426回 令和2年9月定例会 9/11(委員長報告、採決) - YouTube(鯖江市長発言)

(前略)
国が電子行政データ戦略を策定したのが2012年の7月であります。その後2013年の6月にIT国家創造宣言を閣議決定をしております。 そういったことで国に国に先駆けてオープンデータ、あるいはITのまちに取り組んだことが、鯖江のITのまちの知名度につながったのかなと思っております。

そういった中で今日現在では行政の情報のオープン(データ)が216ございます。そして民間によるアプリ開発を含め250のアプリが開発されました。 まだ市民に定着したものは少のうございますが、いよいよ5G時代の突入でございます。AIロボットビッグデータの活用ががますます盛んになる今日現在こういった取り組みも先駆けて取り組んだおかげで サテライトオフィス誘致企業6社の進出にもつながって参ったと思っております。

学生連携のまちづくりでは、福井豪雨に発した京都精華大学の河和田のアートキャンプによりまして、今では首都圏の大学がこぞって夏休みの鯖江の方へ訪れて参ります。 そういったことで、現在では河和田に住所を移された方、お住みになっておられる方、あるいは河和田の企業にお勤めになっておられる方も延べ66人になりました。 こういったことでもこれらの事業がこれからますます進む土壌というものが、できつつあるのかなという風に思っております。
(後略)

世界に遅れをとっていることの危機感の表れ「世界最先端IT国家創造宣言」、遅れの原因は政府だけなく、ひとりひとり国民にもあります。 電話、FAX、紙、非効率と分かっていても昔からの慣習のままにしたツケを支払うのは、こどもたち。 現状維持は不可能と、SDGsで結論が出ています。

こどもプログラミング、GIGAスクール構想、デジタルガバメント、あらゆる層で思い切ったDX(デジタルトランスフォーメーション)が必要です。

2006年4月28日、鯖江市長に呼んでもらった「ふれあい談義ITベンチャー編」が鯖江市との関わりのスタートでした。 学生連携をITと組み合わせてもっともっと推進していきたいと思います。

Hana道場で、IchigoJamで基本を学んだこどもたちや、一歩先を学びたい大人向けにスタートした、JavaScriptプログラミング講座。 オープンデータを操るアプリ開発者が多数誕生予定!


さばえレシピガチャ
鯖江市のレシピオープンデータを使ったオープンソース教材を作りました。高校情報レベルですが、プログラミング言語の基本が分かっていれば、小学生でもいけるはず。 無料で使える言語、HTML/CSS/JavaScriptを使えば、世界中のPCやスマホ、タブレット、ゲーム機で動作する、オープンデータを活用したアプリが開発可能です。

下記のように、HTML/CSS/JavaScriptを1つのHTMLファイルに書くだけでアプリができます!

<!-- HTML --> <!DOCTYPE html><html><head> <title>さばえレシピガチャ</title> <meta property="og:title" content="さばえレシピガチャ"> <meta name="twitter:card" content="summary_large_image"/> <meta property="og:image" content="https://code4sabae.github.io/recipe/ogp.png"> <meta name="twitter:image" content="https://code4sabae.github.io/recipe/ogp.png"> </head><body> <h1>さばえレシピガチャ</h1> <button id=btn>ガチャ</button> <div id=src> データ出典:<a href=https://ckan.odp.jig.jp/dataset/202003003/resource/9f0a20d3-37cf-4b4e-b086-8291e0aa97d7>さばえ地場産野菜の料理レシピ</a> / <a href=https://data.city.sabae.lg.jp/>データシティ鯖江</a><br> </div> <!-- CSS(スタイルシート) --> <style> body { text-align: center; background-color: rgb(243, 138, 68); color: white; font-family: sans-serif; } h1 { font-size: 10vw; margin: 0; padding: 0; } button { padding: 2em; font-size: 200%; margin: .5em; } #recipe { border: 4px solid white; margin: 1em; padding: 1em; } a { color: white !important; } </style> <!-- JavaScript --> <script type="module"> import util from "https://taisukef.github.io/util/util.mjs"; window.onload = async () => { const url = "./sabae_recipe.csv"; const json = await util.fetchCSVtoJSON(url); console.log(json); btn.onclick = async () => { const sleep = util.sleep; recipe.innerHTML = ""; btn.textContent = "なにがでるかな...."; await sleep(1000); const r = json[util.rnd(json.length)]; btn.textContent = "ジャン!"; await sleep(500); btn.textContent = r.料理名; recipe.innerHTML = `<a href=${r.詳細URL}><h2>${r.料理名}(${r.人数})</h2></a><br>`; for (let i = 1; i <= 8; i++) { const z = r["材料" + i]; console.log(z, i); if (!z) { break; } await sleep(500); recipe.innerHTML += z + "<br>"; } await sleep(1000); btn.textContent = "つくってみてね!"; await sleep(3000); btn.textContent = "ガチャ"; }; }; </script> </body> </html>

(src on GitHub)
今後、世界中のこどもたちの常識となるプログラミング。やるかやらないかは本人次第、チャンスあふれるまち鯖江を大いに活かしましょう!


料理の写真、各素材の写真、数量と単位を分離したデータ形式、日本語以外の言語対応など、一度作ってみるといろいろと拡張したいアイデアが膨らみます。 自由にデータを追加したり、変更できるのがオープンデータのいいところ。公園の遊具同様、思う存分、誰に断ることなく大いに遊びましょう!

links
- 【事例付き】ビッグデータ時代に持つべき”データ活用に必要な視点”とは オープンデータ伝道師インタビュー | 宙畑
- じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

jigインターン2日目、恒例の鯖江市長室訪問、今年はオンライン! webネイティブ世代の高専生からの鋭い質問と重みある回答。直接民主主義に近づける、市民主役で持続可能なまちづくりへの熱い想い、受け取りました。(これからを担う、鯖江市長候補者比較オープンデータ

鯖江市長と学生オンラインQAセッション - jigインターン2020学生 - YouTube
ITが十分に普及していないガラケー時代の16年前、なぜITに目をつけたのですか?


朝9時ちょうど、ラジオ体操から始まる夏のインターン。オンライン、みんなで体を動かすのは意外と効果あり!何でもやってみるものですね。

AWSを使ったサーバー設置勉強会、オープンデータの可能性と楽しさを知ってもらって、鯖江市役所オンライン訪問。

最後に記念写真!
鯖江市長の牧野さん、CIOの牧田さんありがとうございました!


インプットの後は、アウトプットの時間。チーム別ブレイクアウトルームで、社員エンジニアによるメンターと共に課題とアイデアをディスカッション。 明日の午前中にはかっこいい「ビジョン」を決めますよ!

サーバーで自分で作ったwebアプリが動く感動体験。
1時間単位課金で使えるVPS(バーチャル・プライベート・サーバー、仮想専用サーバー)のおかげで隨分手軽になりました。

ConoHaのVPS(700円クーポン付き?)に登録し、サーバーを一番安いプラン、OSは「CentOS8」で起動。 コンソールを表示して、次のコマンドを貼り付けるだけで、Denoがセットアップされ、自分だけのwebサービスが稼働します。(src on GitHub)

curl https://code4sabae.github.io/js-sample/setup-for-centos8.sh | sh

http (SSLは未設定なので https ではない)に、起動したサーバーのIPアドレス、更に :8881 とポート番号を付けて、アクセスし、「Hi Deno!」と出れば成功です! (参考、Deno x Servest x JavaScript で始めるシンプルweb開発

しばらく稼働する場合は、サイバーセキュリティの基本、サーバーのアップデートをしておきましょう。

$ yum update

* 本当は、スタートアップスクリプトに起動前に入れるだけでOK!としたかったのですが、うまくいかず。・・・もっと勉強が必要です。うまく行った方、教えてもらえるとうれしいです。

jigインターン生によるブログ、2日目は福井高専、すずとも!
Jig.jpオンラインインターン2020 2日目! - jigintern2020’s diary

links
- Deno x Servest x JavaScript で始めるシンプルweb開発
- 昨日、毎夏恒例となっている㈱jig.jpのインターン生との意見交換でした。(市長Facebook)

今年はOPENDATAで博覧会!さばえものづくり博覧会のwebサイト、GitHubのオープンソースで作ってます。

code4sabae/sabae-monohaku.jp on GitHub
デザイナーさん作成の素材と、オープンデータを元にサイトづくり。キレイなサイトは作っていても気持ちがよいですね!

フォントを美しく
オープンなライセンスで使える、webフォント。いい感じのものをいくつかピックアップ。
- Open Sans Condensed
- Barlow Semi Condensed
- BenchNine
- Khand
- M PLUS Rounded 1c(日本語)

使いたいフォントは、「+ Select this style」リンクから、<link> をHTMLに、font-familyをCSSにそれぞれ設定すると使えます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">

body { font-family: 'Open Sans Condensed', sans-serif; }

CSSに@importで書いても読み込んでくれないので注意!

スムーズなページ内リンク
ページ内のリンクは、a name と a href=# で設定します。標準ではパッと移動するページ内リンク、下記CSSを追記するだけで、スムーズにスクロールしてくれるようになります。

html { scroll-behavior: smooth; }

・・・と思いましたが、scroll-behavior(MDN)によると、iPhoneなどSafariが未対応。 JavaScriptかCSSかで補ってやる必要がありそうです。

ふわふわさせる
ロゴ右側でふわふわ動く「ご挨拶」リンク。CSSアニメーションを設定すると簡単です。下記のように fuwafuwaクラスをCSSに記述して・・・

.fuwafuwa { animation-name: fuwafuwa; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1.5s; } @keyframes fuwafuwa { 0% { transform: translate(0, 0vw); } 100% { transform: translate(0, 2vw) } }

タグの class に fuwafuwa を設定すれば、OK!

<img id="btn_greeting" class="fuwafuwa" src="img/topaisatsu.svg">

再利用可能なコンポーネント
どのページも共通に使いたい部分、例えばページフッターは独自タグにしてまとめましょう。 CSSテーブルでも使ったHTMLElement(Webコンポーネント)を使ってゼロフレームワークで再利用性の高いコーディングができます!

footer.js on GitHub
あとは、define で定義したタグを使うだけ、index.htmlとdetail.htmlに smono-footer タグがあります。

<smono-footer></smono-footer>


注意点は、ローカルファイルとしてのJavaScriptモジュール読み込みができないこと。live-serverなど、ローカルにwebサーバーを立ててお試しください。

Let's make own web!
じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

暑い夏でも涼しく開発できるSCCにて、Code for Sabae もくもく会

もくもく作ったもので遊んでもらっている様子。上を常に見ることになる、非日常VRゲーム。


ballfall VR」(src on GitHub)
実寸大のテニスコート(シングルサイズ 奥行き23.77m x 幅8.23m)で、なぜか跳ね回る無数の巨大ボールから避け続けるゲームを作りました。 実際のテニスコートで安全に遊ぶのがオススメです。


カメラ=自分の顔が当たると暗転してゲームオーバー。リトライは、コントローラーのトリガー(またはマウスクリック)。

ライブラリにA-Frameを使ったシンプルなJavaScriptで作った、webアプリ。 遠く離れた場所同士でも楽しくスポーツできるかも?

発表の時間!


かつて開発にも参加したことある「Astah」のプラグイン!


Googleによるスマホアプリ開発環境、Flutterを使ったアプリ開発にチャレンジ。


今年の高専プロコン競技部門予定だった「囲みます」のAIづくり。


CSVから2Dアニメーション生成ツールを使ってみた。


FlutterでMVCモデルよりもいい感じのモデルを探ってみた。


Flutterで、カメラを使ってみた。(複数のカメラを同時に使おうとすると落ちる)


UnityとかHSPによるゲームをつくってみた。


もくもく会とは、もくもくそれぞれ思い思いの何かを作ろうと集まり、最初に宣言、質問や、雑談、おやつを交えつつ、それぞれ何か作って、最後に成果発表する気軽なイベントです。 自宅ではなんとなく気が散ってしまう人でも、きっと大丈夫!

今回はFlutterに偏ってましたが、ノンテーマなので、何を持ち込んでもOKです! もくもくお絵かきする、モデリングする、書道するとかでも問題なし!


NT鯖江2020 - PukiWiki」なにか(N)つくって(T)、発表しよう!
次回開催と、年一の成果発表の場「NT鯖江2020」をお楽しみに!


おやつタイムに西鯖江駅向かいの「めだか」まで散歩。


鯖江名物「やまうに」を使ったやまうにたこやき!


200種類あるという豊富なメニュー!


熊丼!


猪肉うどん、薬味として、やまうに付き!


気になるお店、鯖江に初のボルダリング上、新スポーツスポット「SKI PRO SHOP J1 with Bolder-Works」(map)


中は広々!3日に1コースは増えますよ、とのこと。期間限定、入会金無料!

links
- webをFAX風にするChrome拡張「faxinizer」Code for Sabae もくもく会 at SCC

福井高専未来戦略アドバイザー、「創造」を軸にものづくり人材を育成する高専。日本で唯一「アントレプレナーサポートセンター」を持つ、福井高専の新しい取り組み、創業を目指すビジネスプランコンテスト。 その一環、今日は福井高専にてアイデアソン!1年生から4年生まで、集まってくれた、やる気あふれる高専生!

課題、アイデア、データを使ってアプリづくりを繰り返そう。良いアプリができて、横展開できれば、それがイノベーション。


チーム毎に発表!聞く方は、投資家のつもりになって聞こう。

身近な課題からのアプリデザインまでやった後、発想を切り替えるヒントとして、世界中の課題が詰まったSDGsを紹介。 15分、新たな視点で、課題、アイデアを出してみて、新たな発見を感じてもらう体験。


今日をKPT(ケプト)で、ふりかえり。
最強の振り返りメソッド「KPT法」で、失敗を反省するどころか、長所も希望も見つかった話 - STUDY HACKER|これからの学びを考える、勉強法のハッキングメディア

視野が広がったところで、福井高専がある鯖江市。今年は鯖江の未来を占う重要な市長選挙。


鯖江市長選2020 / Twitter
鯖江市長選2020、候補者Twitter、リストを作ってみました。それぞれ候補者のつぶやき、見てみましょう!


鯖江市長選挙 立候補予定者 公開討論会
主催は、OCサミット実行委員会と有志の会。鯖江市の女性の投票率が低いことを問題視した女性による企画とのこと!

早速データで見てみましょう!

Code for Sabae で相談し、オープンデータ化してもらった「投票所ごとの投票者数、投票率オープンデータ」を、高校の情報I教材の延長として実装、公開。

鯖江市 女性投票率」ほか


鯖江市 女性投票率 - 男性投票率


鯖江市 合計有権者数

 みんなでつくろう、世界一持続可能なまち!

再びほぼ全国に広がった新型コロナ感染者、新時代を切り開くため、創造活動の重要性は増すばかり。

2019年に初共催した、出展者みんなでつくる手作りイベント、NT鯖江。こちらは会場を鯖江商工会議所の広い会場(1F SCCと4F 大ホール)に移し、密を避けてのリアル展示イベントとしての開催決定!

NT鯖江2020 - PukiWiki
出展者募集開始しました。盆栽、掛け軸、手芸、電子工作、ソフトウェア、お絵かき、彫刻などなど、つくったものぜひご展示ください!(無料です)


オープンデータなものづくりアイドル、Hanaちゃん by Azulily_V、PRなどに活用ください!

さばえものづくり博覧会、2020年は中止ですが、替わりにオープンデータ化と発信サイトをオープンソースで製作し、情報発信力を高め、次年度に備えることになりました。

GitHubにて製作中、コントリビューター大募集!


2019年度の出展者を中心に、鯖江商工会議所メンバーへのオープンデータ化促進、福井県での施設ダッシュボードや、鯖江市長候補比較でも使用している「PUSHかんたんオープンデータ」を活用。


それぞれのデータは、それぞれの会社さんがいつでも自由に編集できます。

より使いやすく、より伝わりやすい情報発信の形を、オープンデータとオープンソースで探っていきます!

鯖江市の未来を選ぶ市長選まであと2ヶ月ちょっと。鯖江市の現状を知るシリーズ、まずは基本の人口編。 データシティ鯖江人口オープンデータをJavaScriptのライブラリ Chart.js を使って、グラフ化しました。

選挙権ある18才以上の世代別で見てみると、40代がちょっと多めですが、割と万遍ない分布でした。


ただ、年齢別に細かく見てみると、かなり凹凸があります。鯖江市で一番多いのは年齢は72才! 次に多いのは、僅差で47才。来年には、逆転しそうです。更新年毎に重ねてみると傾向が見えます。 (90才に異常値となっているのは、過去のデータでは90才以上がまとまっていたから)


男女比は70才までほぼ1:1で一定です。70才を超えると女性比率が上昇しているのは、女性の方が長生きだから。


2010年を1として、年齢別の変遷を追ってみました。今年2020年31才の人(2010年に21才の人)が鯖江市で最も増加しています。


不思議な動きをしているので、2020年現在18才〜40才のみにしてみたグラフです。2014年から2015年にかけて当時20代後半の人が急に増加しています。 大規模な宅地造成などがあったのでしょう。地区別人口を追うとより見えてきそうです。

CSVオープンデータを使ったグラフ化、高校の情報Iの応用教材として追加しています。これからの必修、大人も押さえておきたいですね。
鯖江市世代別人口割合(18才以上) 2020年、他」(src on GitHub)

links
- 今年10月、65年ぶり三つ巴の鯖江市長選! オープンデータで作ろう候補者比較サイト
- 2022年高校「情報I」プログラミング教材JavaScript版へコントリビュート

2020/10/4開票となる鯖江市長選挙、牧野市長が今期での退任を表明し、新人3名が名乗りを上げている。 鯖江市での三つ巴の市長選は65年ぶり。オープンデータを作って、比較サイトをオープンソースで公開した。


鯖江市長候補者比較サイト」(src on GitHub)
それぞれの候補者を知る、基本的なオープンデータを公開情報から揃え、福井県でも活用中の「PUSHかんたんオープンデータ」で公開。 各候補者の人に、編集用のアドレスを送って、本人による訂正はすぐに反映されるはずです。

CSVオープンデータやJSONデータとして取得できるので、webアプリから取得し整形して表示するシンプルなプログラムを作成、オープンソースとしてGitHubで公開。 色やデザインはあえての素のまま、ぜひご自由に改造ください!

2022年から必修化される高校情報I教材レベルなので、そう難しくはありません。 HTML/CSS/JavaScriptを調べながら、いろいろいじってみてください。壊しても何度もリセットできて安心です。


鯖江市長選立候補予定者に聞きたいことアンケート(2020鯖江市長選挙 公開討論会)
JK課からのおばちゃん(OC)課「OCサミット実行委員と有志の会」主催による公開討論会も8/22(土)に予定され、事前質問を募集中。

つくろう、未来!

Code for Sabae主催、もくもく会 at SCC。

ステキテーブルで、もくもく、それぞれ何かをつくります。
時に相談、時に雑談。最初に今日やることを宣言し、終了30分前にミニ発表。


その場で実装、AからZまで早押しゲーム on IchigoDyhook、未就学児の子でもアルファベットとキーボードは親しみやすい!


ブラウザ上で動く、ファミコンゲームがC言語で作れる開発環境「8bitworkshop」で作ったブロック崩しゲーム!


Flutterと機械学習を使って物体認識をさせてみたい(途中)、まだちょっと苦労する様子。


Pythonの課題できた!(おめでとう!)


Discordのボットでソシャゲ支援!


英文を読めるようになるためのChrome拡張をつくってみたい。Chrome拡張、おもしろそう!


「faxinizer」
作ってみました、初Chrome拡張。できることがすごすぎて危険ですw。
以下、2ファイルでOK、超簡単Chrome拡張の作り方。
content.js を作成

document.body.style.filter = "blur(0.2px) grayscale(100%) contrast(10000%)";

manifest.json を作成

{ "name": "faxinizer", "version": "1.0.0", "manifest_version": 2, "description": "web like a fax", "content_scripts": [{ "matches": ["*://*/*"], "js": ["content.js"] }] }

Chromeで「Chrome拡張」を開き、「Load unpacked」で上記作成したフォルダを選択。以上。
以後、開いたページ、すべてがFAX風になります。

自分で作って使う分には超強力ですが、知らない人が作ったChrome拡張を使うのは避けましょう。 (参考、ブラウザ拡張の権限でどこまで(悪いことを)できるのか?とその対策【デモあり】 - Qiita


大きな明るいプロジェクター、あります!(有償レンタル可)


カフェコーナーではスムージーや、コーヒー。近くに自販機もあり。
こちらランチで食べたスープオムライス with Oculus Quest、AmabieDakeと、IchigoJamのCPUより2560倍速い京のコンピューター(88,128万分の1)


鯖江、鯖江商工会議所1FのSCC、11時〜20時まで、ふらっとお立ち寄りください。次回のもくもく会は8/8(土)と決定!

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