今年は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(土)と決定!

福井県で始まった混雑状況オープンデータ。合わせて行いたい定量的なデータ計測を、鯖江市役所入り口にて設置!さすが鯖江市、依頼からスタートまで何もかも速い!

IchigoCounter - 鯖江市役所 人流オープンデータ
13時すぎに1分間に13人通ったピークが見られ、18時半からは人の流れが停止する様子が記録できています。


来庁者IoTカウンター実証実験中。ケースに入っていい感じ!IoT対応のIchigoJam、IchigoSodaのアンテナ2本はソフトバンクの4G回線につながっているので、既存の無線LANと無関係に安定的に動作します。 人流は200円の超音波センサー「HC-SR04」を使用。


超音波が返ってくるまでの時間を計測し、しきい値(T)を超えていたら人が通ったと仮定。1分間ごとにカウントした数をIoT.OUTコマンドで送信するだけのシンプルなプログラム。 反応してから一定時間待ち(W=1.5秒)を入れて、ひとりを重複してカウントしないようにするなどの調整はその場で観察しながら調整しました。 IchigoSodaにミニモニターとキーボードをつなぐだけで自由自在!

機材を持っていって、設置、プログラム、テスト、調整、設置完了まで1時間! 簡単にできるので、通りがかった中学校の校長先生にぜひ中学校でもIoTづくりをと、PRもできました。


鯖江市長、牧野さんも動作確認!
オープンデータ化、IT化、やれるところからどんどん進めていきましょう!

今回の鯖江市役所での実証実験ができたのは、スピーディーにOK出してくれた、市役所の方、市長のおかげです! 学生のみなさん、このステキすぎるまち、鯖江市に「jigインターン2020」で来てみませんか?(社会人の方の視察もぜひ)

全国の高専、夏休みが短縮されたことを受けて、今回は2週間に改定します。募集期間、延長しましたので、これなら参加できそう!という方、熱い町、鯖江でのインターン、ぜひご検討を!


古民家での共同生活、ウェルカム会!(昨年の様子)


jig.jp本店所在地、めがね会館にて、2週間のチーム開発(昨年の様子)


砂時計 - Matter.mjs」(box2d版Matter.jsmjsで移植)
今回は1週間短いので、事前サポートを充実させてカバーしようと思います。アプリづくりは、Swift / Kotlin / Java / JavaScript / Dartなどといろいろ選択肢はありますが、webアプリとしても使えて汎用性高いJavaScriptを基本言語として推奨。 その入門を作っていきます。

まずはこのスマホを傾けて楽しい砂時計プログラムを改造して遊ぶところからどうぞ!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>sandglass - matter-es</title> <meta property="og:image" content="sandglass.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head><body> <script type="module"> import { Matter, createWorld } from "https://js.sabae.cc/matter.mjs"; const { Bodies, Body } = Matter; const world = createWorld(); const [w, h] = [500, 1000]; world.width = w; const nballs = 400; const cx = w / 2; const cy = h / 2; const ww = h / 40; const createWall = (x, y, w, h, th) => { const base = Bodies.rectangle(x, y, w * 2, h * 2, { isStatic: true }); Body.rotate(base, th); return base; } world.add(createWall(cx - w / 2, cy, ww, h / 2 + ww, 0)); world.add(createWall(cx + w / 2, cy, ww, h / 2 + ww, 0)); world.add(createWall(cx, 0, ww, w / 2, Math.PI / 2)); world.add(createWall(cx, h, ww, w / 2, Math.PI / 2)); const hole = w / 6; const hw = ww / 2; const hgap = h / 15; const th = Math.PI / 6; world.add(createWall(cx - (w + hole) / 4, cy - hgap, w / 4, hw, th)); world.add(createWall(cx + (w + hole) / 4, cy - hgap, w / 4, hw, -th)); world.add(createWall(cx - (w + hole) / 4, cy + hgap, w / 4, hw, -th)); world.add(createWall(cx + (w + hole) / 4, cy + hgap, w / 4, hw, th)); const bw = w / 60; for (let i = 0; i < nballs; i++) { world.add(Bodies.circle(cx + (w - ww * 2) * (Math.random() - .5), ww + (h / 4) * Math.random(), bw)); } document.body.onclick = () => { world.useRealGravity(); // 傾きセンサーを重力に反映(対応していたら) world.gravity.y = -world.gravity.y; // 重力反転 }; </script> </body></html>

sandglass.html とか名前を付けて保存し、ブラウザで開くだけで動きます!(要、ネット)
まずは砂の大きさを変えたり、数を変えたり、いじって見ましょう!

HTML/CSSもはじめての方は、こちらからどうぞ!(追記、JSはじめのいっぽも!)
創ろう、楽しい夏!

links
- 全国高専生向けjig.jpインターンプログラム2020 ~募集のお知らせ~
- jigintern2019のブログ(昨年参加者によるブログ)

Code for Sabae も協力「さばえマスクポスト」プロジェクト。ポスト設置箇所を地図へプロット! 経産省のオープンソース「IMI住所変換コンポーネント」を使った、おおざっぱな位置としてひとまず公開。 Googleスプレッドシートでまとめ、CSVとしてウェブ公開、読み込んで住所から緯度経度へ変換するDenoのプログラムはこんな感じ(make.mjs on GitHub

GitHubを使ったチーム開発、フロントエンド担当、福井大学生!家でもどこでも社会に貢献できるのが、コードフォー活動のいいところ。近日、もくもく会、やりましょう!


さばえマスクポストマップ」(src on GitHub)
国土地理院の地図オープンデータを使った登録不要で簡単地図表示。参考にどうぞ!


Hana道場で修行する柔道部の高校生(写真 from Hana道場
プログラミング言語や、サーバーに関する質問。1円から使えるサーバーや、便利なライブラリを使って、作ってみたいものはバンバン作ることをオススメ! とはいえ、情報が多量にあり、移り変わりも激しく、どこから入ったらいいかは分かりづらい。

動物を積んでいく系なゲームを作ってみたいということで、2D物理エンジンを使った過去作品「砂時計」のソースを見てもらいながら解説。 意外と簡単でしょ?


sandglass - box2d-es
ただ、2012年のソースコードは書き方が古いので、現代風に書き換えて、ついでに傾きにも対応。 URLをimportするだけ簡単、ESモジュール対応の2D物理エンジン「box2d-es」公開 on GitHub


本日、地域情報化アドバイザー北陸会議。今年の活動報告はオンライン開催となりました。6/1電波の日、「情報通信月間功労」いただきました! 2015年「PCN、北陸情報通信協議会長表彰」に続く、2度目!

ハードもソフトも創りたい人を応援します!
こんなのつくりたいリクエスト、気軽にメンション、送ってください! → @taisukef

気にはなりつつも、使う機会がなかったプログラミング言語 Rust(ラスト)。 お気に入りのJavaScriptの実行環境、Denoで使われています。

Denoで直したいところがあり、最新版1.0.5でも、Issuesプルリクでの話題にもなっていなかったのでプログラムを取得し、改造し。プルリクしたら、主要開発者からコメントが付き、反映された! (プルリクとは、GitHubなどで使われる共同制作ソフトGitの重要機能で、反映要求。承認されて初めて反映される仕組み。)


added mjs files for default test by taisukef · Pull Request #6122 · denoland/deno
有名OSSへの初貢献の内容はこちら。Deno test の mjs 対応。

歴史が長いJavaScript、変数宣言が不要だったり、スコープが分かりづらいvarとの決別した、モジュールベースの新しいJavaScriptの拡張子 .mjs でいこうと決めて、開発しているが、Denoのテストでは、.jsや.tsしか認識してくれない。(参考、jsからmjsへ

.mjs も普通にコンパイルなどは普通にやってくれるので、きっと追加し忘れているに違いない。分かりやすくまとまったRustのコード、該当箇所を発見。

C/C++と同等またはそれ以上の記述力を持つRust。C言語からの系統、ほとんどのプログラムはRustを知らなくても普通に読める。 「||」という演算子は、C、Java、JavaScript、IchigoJam BASICでも同じ「または」を意味する論理演算子。 deno test の対象となる拡張子が並んでいるので、"mjs"を追加。


失敗したのがこちらドキュメントの訂正。mjsの追記だけと思って油断し、チェック後に手書きしたのが悪かった。 PR後の自動テストではねられてしまい、整形してねとコメントがついた。ドキュメントも書式が荒れないよう、規定桁数が設定されていた。 Denoの開発者さん、優しくて助かりましたが、大いに反省。自動テスト、偉い。

$ cargo test $ tools/format.py $ tools/lint.py

Contributing(貢献方法)のプルリク前の確認事項。

1. イシューやプルリクで同様内容をチェック
2. テストが変更点をカバーしていることをチェック
3. 全体テストプログラムを実行して問題ないことを確認 (cargo test)
4. 書式整形プログラムを実行(tools/format.py)
5. プログラムに問題がないことを確認(tools/lint.py)

オープンソースへの参加は、チーム開発に関する最新技術に触れられるので、何かお気に入りにツールへの貢献。チャレンジしてみると良いですね!

自動書式整形の優秀さに触れたので、使うことにした deno fmt。こちらもデフォルトに mjs が含まれていないので、もうひとつプルリク。(→ 後日、無事マージされました)
added mjs files for default fmt by taisukef · Pull Request #6134 · denoland/deno
ちょっとしたコードですが、世界中で使われると思うとうれしいですよ!


鯖江市役所にて、鯖江市長の牧野さん、牧田さんとIT話。
まちづくりもオープンソースにでいきましょう!
条例や、ウェブサイトなど、個人情報に絡まない公開情報は、全部GitHub管理でいいかも?

links
- KEN_ALL!? 郵便番号ESモジュールで開発効率化! 経産省もGitHub公開スタート
- Deno にコントリビュートする (1) - Qiita
- Deno にコントリビュートする (2) - Qiita

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