行政と両輪で地域の産業を担う商工会議所。鯖江商工会議所の常議員やってます。
今年はコロナでリアル開催は中止となった「さばえものづくり博覧会」。
せっかくなので、オープンデータ化してデジタルに力をいれることに。

さばえものづくり博覧会
2019年度の参加事業者を中心に、オープンデータを集めてもらって、もの博、オープンデータエディションできました。


各企業や団体の方に「PUSHかんたんオープンデータ(事業所)」を使ってデータをいれてもらうだけ。 即時にオープンデータ化され、サイトにも反映されます。登録希望の方、登録した id を鯖江商工会議所までご連絡ください!(パスコードは編集用の鍵になるので、送らず更新用に保管してください)


さばえものづくり博覧会 マップ
緯度経度データがあれば、地図にも反映!ひとまず料飲業界は赤くしてみました。オープンソースなので、自由にお好きな鯖江地図アプリとして活用可能です。 (GitHub/HTML/CSS/JavaScriptはじめのいっぽ


NT鯖江2020
さばえものづくり博2019で好評だった、NT鯖江は、今年もSCCにてリアル開催!ものづくり新時代へのヒントがあるかも?


NT鯖江2020、初日の2020/10/3(土)、17:00-19:00、懇親会も開催。
ものづくり談義、しましょう!つくったなにかを持って参加するとより楽しめます!

鯖江市長選が始まり、鯖江市長選候補者比較サイトのアクセスが増えてきました。
OCサミット実行委員会の方より連絡あり、公開討論会時に作成したプロフィール帳を使ってほしいとのことで、記述されたデータをCSVオープンデータとして加工し、画像と共にサイトに組み込みました。


鯖江市長候補者プロフ帳」(src on GitHub)
オープンソースなので、どなたでも自由に派生版の作成や、改善要望できます。

データ提供者とエンジニア、双方歩み寄ったちょうどいいフォーマットが「CSV(シーエスブイ)」

Excelでこのように、何も装飾せず、シンプルな表にして、名前を付けて保存、ファイル形式を「CSV UTF-8」にして、保存すればOKです。(詳細は、webサイトはじめのいっぽ

あとは下記のようにHTMLに埋め込めば、webサイトのできあがり!

<div id="prof"></div> <div class="src">データ出典:<a href=https://ameblo.jp/ocsummit/entry-12619480286.html>OCサミット実行委員会</a></div> <style> #prof img { width: 29vw; } </style> <script type="module"> import { CSV } from "https://code4sabae.github.io/js/CSV.js"; (async () => { const path = "data/prof.csv"; const csv = await (await fetch(path)).text(); const data = CSV.toJSON(CSV.decode(csv)); console.log(data); const cr = tag => document.createElement(tag); const exclude = ["id", "提供"]; const tbl = cr("table"); prof.appendChild(tbl); for (const q in data[0]) { if (exclude.indexOf(q) >= 0) { continue; } if (q === "img") { const tr2 = cr("tr"); tbl.appendChild(tr2); for (const cand of data) { const td = cr("td"); td.style.border = "none"; const img = new Image(); const url = cand[q]; const a = cr("a"); a.href = url; img.src = url; a.appendChild(img); td.appendChild(a); tr2.appendChild(td); } } else { const tr = cr("tr"); tbl.appendChild(tr); const th = cr("th"); th.colSpan = 3; th.textContent = q; tr.appendChild(th); const tr2 = cr("tr"); tbl.appendChild(tr2); for (const cand of data) { const td = cr("td"); td.textContent = cand[q]; tr2.appendChild(td); } } } })(); </script>

2022年には高校の情報Iとして必修化されるプログラミング、誰でもはじめは見様見真似。
人類叡智を使ったスマートな生活を!

links
- 鯖江市の世代別、年齢別人口分布のグラフ化
- 鯖江市長選候補者比較サイトのオープンソース化
- 2022年高校「情報I」プログラミング教材JavaScript版

連呼のみ認められた、車上からの選挙運動。学校や病院だけでなく、子育て中の家庭、オンライン会議中の職場などへの配慮が必要ですね。

そもそも法的にはどうなのでしょう?
拡声器をつけた街宣車 警察の許可があれば問題ないが音量に規制も - ライブドアニュース」によると、実際は条例によるようなので、鯖江市条例を見てみます。 「Reiki-Base インターネット版」には検索機能がありません。

良い機会なので全文ダウンロードして検索できるアプリ「鯖江市条例検索」を作りました。

鯖江市条例検索
今日現在全部で599条例もありました。全部ダウンロードしてブラウザ上で検索しているので、ちょっと重いですが、ネットを使っていないので、電波を発してはいけない議場傍聴席でも使えます。

騒音」で検索すると、7件ヒットし、「鯖江市環境基本条例」によって騒音は公害と定義され、「公害防止条例」にて規制基準が書かれていました。


鯖江市公害防止条例施行規則 別表第2(第4条関係) 3 騒音に係る規制基準
備考に計測方法などもあってわかりやすいです!スマホで簡易的に計測できたら便利そうですね。 調べる便利なアプリもほしいところですが、分からないところでは第1種区域(閑静な住宅街)準拠が安全です。

第1種区域=第1種低層住居専用地域+第2種低層住居専用地域
第2種区域=第1種中高層住居専用地域+第2種中高層住居専用地域+第1種住居地域+第2種住居地域+準住居地域
第3種区域=近隣商業地域+商業地域+準工業地域
第4種区域=工業地域
その他の区域=前各号に掲げる区域以外で工業専用地域を除く区域
用途地域 – めがねのまちさばえ 鯖江市
どの場所がどの地域に指定されているかは、鯖江市用途地図全体図のPDFから確認可能です。(使いやすいオープンデータで欲しいですね)


キャンペーン · 鯖江市長選挙告示まであと数日。乳幼児の午睡=子育て中の貴重な時間に配慮した選挙カー街宣をお願いします! · Change.org
市民の声が早速、三候補者に届いたようです!(鯖江市長候補者比較サイト - 鯖江市長選2020 オープンデータ


オープンデータ選挙カー連呼スポット探しアプリ」 2015-06-28 「オープンデータ選挙カー連呼スポット探しアプリ 鯖江市議選スタート!


投票ポスターを廻れ!」2015-04-06 「投票ポスターを廻れ!

何か市役所に伝えたいことがあれば、写真と位置情報が付いて登録不要ですぐに連絡できるアプリ「さばれぽ」が便利です!

スマートな選挙でいきましょう!

ものづくり好きの小中学生から高専大学生、大人まで、なにかつくってみたい人の刺激になるイベントにNT鯖江2020。 いよいよ来週末開催! 名乗りを上げていただいた、20の出展者さんを紹介するPRサイトを作りました。

NT鯖江2020 なにかつくろう、技術の祭典nt.sabae.cc
ドメイン、お気に入り!(src on GitHub)

展示物のURLを記載いただいている出展者さんのご紹介!

鍵盤ハーモニカが「トルコ行進曲」を演奏してみた(自動演奏)【ソレコン応募動画】」 by @nezumi_tech
NT鯖江2019でも活躍していた、自動演奏ハーモニカが再び来鯖!


「Vtuberほっぺぷにぷにデバイス」by @satone_030
VRが楽しくなりそう!?


光るJack-o'-Lantern等」by @mashigure
お手軽な部品での光る工作、ステキです!


「陶芸作品」
IchigoJamを製造しているナチュラルスタイルさんの部活とのこと!


FPVRCカーの展示など」 by @runanse
デフォルメされたタミヤのラジコンにカメラを載せて、運転気分!?


囲みます
現役福井高専生による出展、まぼろしの第31回高専プロコンの競技部門を勝手に開催する会より!今日も活動日でした。10/3土の14時-15時に現地で大会しますよ!


「モンスター娘のカスタムドール」by @MintiaP
いろいろカスタマイズするの楽しいですね!


IchigoJam実用プログラミング、DMX512でムービングライト制御入門
IchigoJamと照明、展示します!

出展者のみなさん、展示物のURLを編集いただければ、掲載します!
NT鯖江2020 - PukiWiki

イベント告知、webサイトの作り方
使いたい画像を用意して、index.html を1ファイル用意、GitHubに1つリポジトリを作成して、GitHub pagesの設定するだけで公開完了! 独自ドメインにする場合は、更にちょっと設定追加すればOK!(詳細、GitHub Pages で、じぶんのウェブサイトをつくろう!

似たようなサイトであれば、今回作ったこちらのサイトを流用いただければOKです!まずはシンプルなものを真似るのが近道です。

サイトを作っただけでは誰も見てくれません。作ったことを見て欲しい人に伝えましょう。 どのくらいの人が見てくれたのかを手軽かつ強力にチェックするツール、Google Analytics、登録し、コードを埋め込むとリアルタイムに見ている人の数がわかり、自動で集計してくれます。 数百円から始められる各種広告も試してみるのもおもしろい!


NT鯖江2020」2020/10/3-4土日開催 @SCC

GLSLを使った音のビジュアライズに続き、音源として使うGLSLに挑戦!
数式だけで生成するキック、スネア、ハイハット。

float kick(float t) { return sin(6.283 * 53.0 * t - 10.0 * exp(-50.0 * t)) * exp(-t * 1.3); } float snare(float t) { return noise(t) * max(0.0, 1.0 - min(0.85, t * 4.25) - (t - 0.25) * 0.3); } float hihat(float t) { return noise(t) * exp(-t * 200.0); }

(参考、GLSLで音楽(はじめに) by @gaziya5
PSG音源、FM音源、PCM音源に続く第4の音源!? GPU音源もガッツリ楽しめそうな予感。


GPU音源 - リズムパターン基本」(src on GitHub)
ランダムにパターンを切り替えている内に、どこにもなかった音楽に出会えるかも。 MacのChromeで動作確認。スペックが足りず処理が間に合わない場合は、bufsize level を大きくしてみてください。 リアルタイムに演奏する楽器としては11.61msecは目指したい!


jigインターンOB部長が創業した、株式会社ハックツ主催のものづくり好き学生のためのハックツハッカソンにオンライン参加!


キャンプ上で便利で楽しいツールがテーマ!女子エンジニアによるデータに基づく説得力あるプレゼンと、実装力がよかった!!

優勝、おめでとう!

いろいろ創ったらお披露目する場もほしいですね!

2020/10/3-4土日開催、NT鯖江2020、開催場所を1Fに変更しました!


会場の鯖江商工会議所1Fロビー、目の検査のCマーク型の机、NT鯖江の展示ブースとして使います。(SCC)


ゆったりできるカフェ付き、ソファーコーナーでゆっくりできます。


鯖江の逸品、並んでます、あのパソコンにあの帽子のミニチュアも!?

駆け込み、展示もおまちしてます!
2020/10/3-4 「NT鯖江2020

第13回目、審査員するのも13回目となった鯖江市地域活性化プランコンテスト。 今年は初のオンライン開催。全国の精鋭18名の大学生、高校生が市長になったつもりでプランを立案し、プレゼンテーション! 運営の学生団体withをはじめ、多くの鯖江市民、そして鯖江市長も参加し、ツールを駆使して作り上げた6プラン、いよいよ最終発表会。

市長をやりませんか?プレゼンテーション!(全編3時間)
下記、プラン毎の先頭から見られるリンクと共にふりかえります!
(リンク作成 by 今日の一日一創、自作ツール、YouTubeのシークリンクメイカー


チーム ワシントン イクメンのまち鯖江「sa-bapapa育成プロジェクト」(動画)
女性活躍のまち、「ジェンダー平等」を中心にSDGsを推進するまちとして関心高い、男女共同参画。課題は父親の理解と参画。 統計上、育児や家事に関わる時間が圧倒的に短い男性向けに、学生ならではの企画で誘う、イクメンへの道。 ポイント制にし、提携企業との接続もいいアイデア。子育て技能を競うコンテスト、母親が楽しめるイベントとセットにするのもいいかも?


チーム ニュートン 鯖江立国案(動画)
鯖江国が発行するパスポートアプリを使って、楽しくお得に巡れる新観光。地元民の紹介があると観光はぐっと楽しくなる! スタティックな観光地ではなく、その人の個性に合わせたダイナミックなイベントや人とのつながりと出会う旅、おもしろくなりそうです。 国が発行するパスポートをイメージするとちょっと違うかなと思いましたが、年間パスポート的なイメージですね。 鯖江入国に必要なビザを、どういう思いで行くのかと合わせて申請すると、その人にぴったりなプランや補助が付いてくる感じもいいかも。


チーム ミケランジェロ 日本一論文が書きやすいまち(動画)
大学生活の集大成、卒論。社会学、地方創生を学ぶ学生の聖地、鯖江を目指し、その研究がっつり滞在しながらやってもらおうプラン。 研究に必要なオープンデータがうれしいと、うれしいコメント! アート好き学生の河和田アートキャンプ、ものづくり好きな学生向けjigインターンにも通じるものがありますね! それぞれの成果がつながるともっと楽しい! (jigインターンも2020年はオンライン開催でした)


チーム シェークスピア #勝手に鯖ギネス(動画)
Hana道場、Hana工房、提案型市民主役事業など、チャレンジする人が活躍する場はあるけど、そこへの一歩が踏み出せない学生が多いという課題に着目した、チャレンジはじめのいっぽ的プラン。 気軽に楽しく挑戦できる種目から、クラス一位、学校一位、鯖江一位を目指そう!勝てる種目は創ればOK!誰でもきっと何かではナンバーワン! 小学生でも記録を簡単にアップロードするIoTと、記録を一覧できるダッシュボードを導入すれば、チャレンジ魂に火がつくはず!


チーム コロンブス 鯖江市役所東京課(動画)
地方に関心ある東京の高校生と、東京に関心ある鯖江の高校生を短期交換留学しよう的プラン。テレビやメディアで見ているイメージ、実際のところどうなのだろう? 観光地ではない日常を見ると見えてくる、東京や地方のメリット・デメリット。これからの日本の未来をあり方を考えるきっかけになりそうです。 コロナ禍で活用したいオンライン。オンラインであれば、東京だけでなく、世界どの国でも条件は一緒! シンプルな英語と、翻訳ツール、お絵かき、動画、いろいろ駆使すれば、なんとかなります!


チーム ロック 日本一「音の変態」が多いまちサバエ(動画)
レキシの池ちゃん、「ROAD CORD」PVづくりでご一緒した竹内朋康さん、エレクトーン奏者826aska、ファンキーな先生植田薫さん! 吹奏楽が強く、JR駅発着音も特注で、夕方にも音楽が鳴る、実は鯖江は音楽のまちでもある。 そこに着目し、手軽に始められるDTM(コンピューターを使ったデスクトップミュージック)を小中学生のプログラミング教育にも採り入れ、大いに推奨していこうというプラン。 夕方の音楽、鯖江駅前の歩行者信号の音楽、コンテストで選んじゃうというプラン、おもしろい! IchigoJamでもできるお手軽DTM、PLAY文を使った作曲、すでに人気です。初音ミクを産んだクリプトン・フューチャー・メディアの伊藤さん、鯖江に来ていただく理由がひとつ増えました! コミュニケーションにおける「音」の重要性が、広く再認識されたコロナ禍、サウンドエンジニアによる新しい音の可能性を追求する「変態」増やしましょう!


withの部屋(動画)
審査時間を利用して開催された、学生団体withによる運営舞台裏話。審査で聞けなかったので、先程YouTube視聴。 告知用のステキ動画、企画、出演、撮影、編集、BGM、才能豊富!


ステキなきっかけを提供してくれた18名の学生市長のみなさん、ありがとう!!


鯖江市長の牧野さん、市長として参加する最後のプラコン、花束が贈呈されました。
市長とプランを全部実現しようとする市役所の力あってのプラコン13年、ありがとうございました!


学生団体with作、コンテスト参加者募集動画!BGMが良い感じ!MR映像、凝っていて良い!


こちらは観覧車募集動画、西山公園からのHana道場へスムーズにつながる編集が気持ちいい!


学生団体wthのみなさん、ステキな運営、ありがとう!次は地元民のターンだ!

links
- 第12回 鯖式会社のJK社長、鯖江市長YouTuber、物々交換で鯖江を目指せ! わがまま学校、落書きOKオープンデータ、次世代スケボー新交通!? 自由な6プランの発表
- 第11回 鯖江市地域活性化プランコンテストの参加賞、鯖江生まれのパソコン IchigoJam の鯖江スペシャル MeganeJam 組み立て動画
- 第10回 自分達をターゲットにする企画の強さ / 第10回鯖江市地域活性化プランコンテスト決勝!
- 第9回 プランづくり3つのポイント
- 第8回 鯖江×都会の学生=未来の日本!
- 第7回 まちの活力三要素を取り入れる仕組み
- 第6回 地域活性化の要
- 第5回 第5回 Facbookアルバム
- 第4回 ~まとめ~|きらきら星のつぶやき☆
- 第3回 まとめ|きらきら星のつぶやき☆
- 第2回 学生が活躍できるまち鯖江鯖江週末写真家)
- 第1回 参加学生によるもみじまつり出店

會津価値創造フォーラム×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はじめのいっぽ

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