2024-04-19
#js #codefor #fukui 
サイズを指定できるオーダー畳。今の畳の大きさ、枚数から部屋の大きさを計算して、新しい枚数を指定して大きさを計算するWebアプリを作ってみました。


「tatami calc」
1回計算するだけなら、ExcelやNumbersなどの表計算ソフトで計算式を設定するのが手軽ですが、プログラミングしてWebアプリ化すると誰かに共有できて便利です。

アプリづくりの大まかな流れ
1. HTMLでアプリの構造を作る
2. JavaScriptで動きをつくる
3. CSSでデザインする
4. もしもっと調整するなら1へ
5. 完成！

使う人をイメージして、デザインにこだわってみたり、便利な機能を足してみたり、夢が広がるのがアプリづくりのいいところ！

今回の畳計算アプリ、HTMLとJavaScriptとCSSによるプログラムはこのようになっています。 <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:"> <title>tatami calc</title> </head><body> <h1>tatami calc</h1> <table> <tr><th></th><th>幅</th><th></th><th>長さ</th></tr> <tr><th>畳の大きさ</th><td><input id=inw value=800>mm</td><td>x</td><td><input id=inh value=800>mm</td></tr> <tr><th>畳の枚数</th><td><select id=selnw></select></td><td>x</td><td><select id=selnh></select></td></tr> <tr><th>部屋の大きさ</th><td><span id=tdw></span>mm</td><td>x</td><td><span id=tdh></span>mm</td></tr> <tr><th>新しい畳の枚数</th><td><select id=selnw2></select></td><td>x</td><td><select id=selnh2></select></td></tr> <tr><th>新しい畳の大きさ</th><td><span id=tdw2></span>mm</td><td>x</td><td><span id=tdh2></span>mm</td></tr> <tr><th>差分</th><td><span id=tdwd></span>mm</td><td>x</td><td><span id=tdhd></span>mm</td></tr> </table> <footer> <a href=https://github.com/code4fukui/tatami-calc/>src on GitHub</a> </footer> <script type="module"> const calc = () => { tdw.textContent = parseInt(inw.value * selnw.value); tdh.textContent = parseInt(inh.value * selnh.value); tdw2.textContent = parseInt(inw.value * selnw.value / selnw2.value); tdh2.textContent = parseInt(inh.value * selnh.value / selnh2.value); tdwd.textContent = tdw.textContent - tdw2.textContent * selnw2.value; tdhd.textContent = tdh.textContent - tdh2.textContent * selnh2.value; tdw2.style.backgroundColor = tdw2.textContent > 1000 ? "red" : ""; tdh2.style.backgroundColor = tdh2.textContent > 2000 ? "red" : ""; }; ["selnw", "selnh", "selnw2", "selnh2"].forEach(id => { const sel = document.getElementById(id); for (let i = 1; i < 10; i++) { const opt = document.createElement("option"); opt.value = i; opt.textContent = i + "枚"; sel.appendChild(opt); } sel.oninput = calc; }); calc(); </script> <style> body { text-align: center; font-family: sans-serif; } input { width: 3em; font-size: 18px; margin: 0 .2em; text-align: right; } select { font-size: 18px; } table { border-collapse: collapse; display: inline-block; } th, td { border: 1px solid #ddd; min-width: 3em; padding: .3em; } td { text-align: center; } footer { margin: 1em; } footer a { color: gray !important; } </style> </body></html> HTMLによる構造、JavaScript、CSSの順に並べています。JavaScriptとCSSの順は逆でもOKですし、長くなってきたらファイルで切り分けることもできます。


Webプログラミング道場、ES-Jamでいろいろいじって遊んでみましょう！

2024-04-18
#js #opendata #codefor #fukui 
昨年参加した、福井経済同友会。毎年開催される全国経済同友会セミナーが初の福井開催！

フェニックスプラザにてセッション。参加者1,000人規模！


テーマは人口減少。テクノロジーで乗り越えましょう！


懇親会は、コートヤード・バイ・マリオット福井にて。


全国からご来福する、経済同友会のメンバーへのおもてなし「THE FUKUI これが私たちの食・酒・工芸のスタンダード」
ソースカツ丼、おろしそば、焼鳥の名門秋吉！


能登半島地震復興支援。七尾市から友情出店、ミシュラン一つ星、ヴィラ デラ パーチェ。 七尾市は5才まで住んでいた故郷のひとつ！


ヴィラ デラ パーチェの牡蠣の素麺！


北陸新幹線の福井開業によって、福井駅前にはステキなお店が多数誕生。こちら、高い吹き抜けと音響が気持ちいいカフェ＆バー「ULO」


ULOのカレー！


「厳選 ふくいの夜マップ by 福井経済同友会」
福井経済同友会の有志による厳選された夜マップ、厳選ふくいの夜。分布が分かる地図が欲しかったので、作ってみました。


今開いているところがワンタップで分かります。


17:00 に開いているところは？
時間帯別にチェックする機能もあります。


「checkTime.test.js」
時間帯のチェック用に作ったライブラリ、checkTime.js をテストコード checkTest.test.js でチェック。10:00〜25:00の場合、00:59表記でもtrueが返ります。 2つまでの表記、ラストオーダー表記にも対応。終了時間の指定がないものは、00:00までとしています。

いろいろなマップづくりに活用できそうです。

2024-04-17
#js #opendata #codefor #fukui 

鯖江のステキカフェ「レンズパーク」で見つけたアナログ。DXがテーマとなっている表彰が、紙とハンコによる賞状という謎。電子署名によるデジタル受賞証明を前面に出してほしいところです。（参考、インターネットに信頼を！データの有効活用とDFFT 総務省地域情報化アドバイザー全体会議）


「はばたく300社ダッシュボード 2023年度」
全企業数の99.7%を占めるという中小企業を担当する、経済産業省 中小企業庁が発表した「2023年度 はばたく中小企業・小規模事業者300社 | 中小企業庁」をカラム地図を使ってダッシュボードアプリ化。


「2023年度 はばたく中小企業・小規模事業者300社 | 中小企業庁」
オープンデータがあればうれしいのですが、「e-Govデータポータル」を見てもなさそうなので、PDFかウェブサイトを元に自作することにします。PDFには公式ウェブサイトの記載がないので、ウェブサイトのHTMLから抽出（スクレイピング）する30行程度のプログラム「scrape.js」をつくって、CSVオープンデータ「company300.csv」を作成しました。

ウェブサイトには、わざわざ都道府県別、カテゴリー別、五十音順とPDFを3種類も作成しておいてありますが、オープンデータを元にすればスマホでもPCでも見やすアプリ化するのは簡単。必修化された高校の情報Iのプログラミングの範囲で作れます。PDFは紙。印刷するアナログ文化から、データ中心への転換(DX)を進めましょう！

レンズパークをオープンした乾レンズの名前が福井にないと思ったら、大阪本店。国の政策を民間活動につなげるためにも、具体的な取り組み概要データ、同名の企業と間違わないように法人番号データも合わせたオープンデータ化を望みます。

進めよう、日本DX！

2024-04-16
#js #KidsIT #opendata 
把握しておきたいIT用語。情報処理学会から「情報科全教科書用語リスト」が、オープンデータよりちょっと制約が厳しいクリエイティブ・コモンズ CC 4.0 BY-SA ライセンスで公開されたので、アプリにしました。


「IT辞典」 src on GitHub
レコード数、なんと5,894！ですが、説明データが記入されていたのは内810、重複を除くと696でした。とはいえ、貴重なデータ。活用しやすいCSVデータに変換してGitHubにアップしています。

用語データをキャッシュし、検索に通信を必要としないPWAにしているこの辞書アプリは、台湾のオープンデータを使った「MJ典」や英語のみにした「JE典」のオープンソースを元に、説明内用語の瞬間リンク機能を追加しています。用語のヒットを最優先に、説明のヒットをその後に続くようにし、用語の長さと最初の文字でソートしています。


ただ、問題は記載の誤り。いくつか見ただけで、複数の誤りを見つけました。教科書も絶対ではありません。出典がない情報、自分で確かめていない情報を鵜呑みにしてはいけないことが学べます。

もし誤った用語や、意味が変わってしまった用語があっても、オープンデータで一次情報を管理していれば、それを更新するだけで、こども達が使っている電子教科書が自動的に瞬時に更新されるのが情報社会のあるべき姿ですね。


「アナログ」
情報とは何か？データとは何か？アナログとデジタルの違いは？このIT辞典では、調べるほどにわからなくなれます。自分なりに調べて結論づける学びにつなげましょう。

links
- 情報処理学会 情報入試委員会 - 情報科全教科書用語リスト
- 「情報科全教科書用語リスト」を公開しました-情報処理学会
- 【情報処理学会】「情報科全教科書用語リスト」を公開 | 一般社団法人情報処理学会のプレスリリース
- 情報処理学会「情報科全教科書用語リスト」を無料公開、5895用語をスプレッドシートで共有 高校情報科の教育支援に役立つ - こどもとIT
- 情報処理へ巻頭コラム寄稿「第二大航海時代に向けて」人類の叡智を一段積もう - 情報処理 特集別刷「プログラミング教育の最前線」（2020 年 8 月号）：情報処理学会
- その24「 Ruby City MATSUEからお届け！　第1回 Matz葉がにロボコンに行ってみた」（Vol.65 No.4）-情報処理学会

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS