学生x防犯・防災をテーマとしたjigインターン2021夏シーズン2、Bチームはコロナで避難訓練ができていない小学生のためのクイズアプリ「防災王」

防災王サーバーレス版 forked from 2021-summer-2-b


台風か火災、ジャンルを選んで出題される3問に答えよう。


選んだ選択肢ごとに点数がついて合計点数が表示される。


チームB、いつき、ゆー、サウスケイ、こーよー

JavaScriptのESモジュールで分割してチーム開発、1つのHTMLでつくるSPAとしてまとまっています。ボタンを押したときの効果音がアガりますね! 写真だけでなく、効果音もオープンデータなどフリー素材をうまく使ってクオリティーアップ!

Code for FUKUIで、オープンな素材まとめ、作りました。
code4fukui/openres: 素材オープンデータまとめ
いい感じのサイトあれば、ぜひIssueやプルリクお送りください!


サウンドパネルsrc on GitHub
今回の「防災王」で活用されていた「効果音ラボ」のステキ効果音4つを使ったサウンドパネル作りました。 HTMLに効果音ファイルを指定するだけで、音が鳴るボタンができますよ!(AudioButton extends HTMLElement and HTMLButtonElement、SafariはHTMLButtonElement継承非対応) <script type="module" src="https://code4fukui.github.io/audio-button/audio-button.js"></script> <audio-button src="sound/dodon.mp3">ドドン</audio-button> <audio-button src="sound/pipo.mp3">ピポ</audio-button> <audio-button src="sound/chiin.mp3">チーン</audio-button> <audio-button src="sound/pappapa.mp3">パッパパー</audio-button>

jigインターン生によるブログ、ご覧ください!
⭐jigintern diary⭐

学生x防犯・防災をテーマとしたjigインターン2021夏シーズン2の最終日、いよいよドキドキの成果発表会。シーズン1同様、4チームの発表と作品を1日ずつレビューしていきます。
シーズン2のみんな、おつかれさま!またねっ


トップバッター、シーズン2のCチーム、まつやま、りん、るーい


いざという時に重要な避難所ですが、普段はほとんど意識されません。そこで、中高生が楽しく避難所について学べるアプリ「鯖江スタンプラリー 散歩で覚える避難地図」


鯖江避難地図 src on GitHub
地図上に表示される赤いピンは鯖江市内の避難所です。現在位置をアイコンドラッグで仮に設定できるテストモードが便利な赤い「仮」アイコンがいい! 青い「駅」アイコンも目印としてわかりやすい。


スタンプギャラリーページでは自分で集めたスタンプが表示されます。 今回のスタンプとして活用されたのは、めがね会館もある鯖江市新横江地区の「新横江ふるさとカルタ


鯖江避難地図 - LeafletGSIバージョンsrc on GitHub
leaflet.mjs を使ってもっとシンプルに地図が使える LeafletGSI.js を用意して、leaflet版を作ってみました。写真のアップロードはできませんが、擬似的にスタンプはもらえるようにも改造してあります。

Googleマップは無料分付きの有料API、使用するにはAPIキーの登録が必要ですが、地理院地図+オープンソースな地図API、Leafletの組み合わせなら手軽に地図表示ができます。

避難所に関する写真をオープンデータとして集める仕組みとつなげて、実際歩いて試せるようにしてみたいですね。 避難所データはリポジトリ内にCSVファイルとしてありますが、各地のオープンデータから直接取得すると全国で使えるものにも改造できます。 オープンソース、やってみたい人は、誰でも好きな時にチャレンジできます。(src on GitHub)


ここ北陸、サイバーバレージャパンの最終金曜日はサイバーフライデー、月に一度の自分で作ったものの発表の場! ワクワクとドキドキの場、ご活用くださいっ(会場、鯖江商工会議所隣のコネクトフリー鯖江開発センター)


展示したり発表したり、いろんな意見をもらって改善したくなる楽しいループ!

Let's create!

コンピューターの世界の2進法がややこしい!?
でも、我々はもっとややこしい、いろんな進法が入り乱れる日時の世界に生きてます。

秒は10進法ですが、60進法で分、60進法で時間、24進法で日、7進法で週、28〜31の可変進法で月、12進法で年、100進法で世紀。 更に、地球は丸いので場所によって時間が異なるタイムゾーンもあります。

これらを扱うクラス、DateTime.jsを作成。以前作ったDay.jsに、時間を扱うTime.js、タイムゾーンを扱うTimeZone.jsを加えました。
day-es DateTime.js / Day.js / Time.js / TimeZone.js src on gitHub
import { DateTime } from "https://js.sabae.cc/DateTime.js"; const dt = new DateTime(); console.log("datetime: " + dt); console.log("day: " + dt.day); console.log("time: " + dt.time); console.log("timezone: " + dt.timezone); このようにさらっと使えます。


現在日時表示タグ
こちらDateTime.jsを使ったカスタムタグ datetime-now を実装したサンプルです。自分だけのタグづくり入門としてもどうぞ! import { DateTime } from "https://js.sabae.cc/DateTime.js"; class DateTimeNow extends HTMLElement { constructor() { super(); } connectedCallback() { const show = () => { this.dt = new DateTime(Math.floor(new DateTime().getTime() / 1000) * 1000); this.textContent = this.dt.toString().replace("T", " "); }; show(); this.t = setInterval(show, 1000); } disconnectedCallback() { clearInterval(this.t); } get value() { return this.dt; } } customElements.define("datetime-now", DateTimeNow);


毎朝のラジオ体操が人気!毎日のリズム、良いですよ!

jigインターン2021夏、シーズン2、いよいよ大詰め!
⭐jigintern diary⭐

学生の夏休みといえばインターン。普段はできない経験でレベル上げよう!

オープンデータを主に使う側のjigインターンですが、越前市役所では福井高専専攻科生がオープンデータを整備するインターン中。 使いやすいオープンデータを学び、作っています。実際手を動かす現場だからこそ分かること、貴重ですね!


csvmelt - 横持ちのCSVファイルを縦持ちCSVに変換しますsrc on GitHub
表形式が基本のオープンデータには「横持ち」と「縦持ち」の2種類あります(参考、データ変換(横持ち⇔縦持ち)について | WingArc TECH BLOG)。 横に長く項目が多量にある「横持ち」データを、プログラムで活用するには項目名を少なく集計しやすい「縦持ち」に変換するツール「csvmelt」を作ってみました。


CSVファイルをドロップして、縦持ちとして残したい項目を複数選択して、変換ボタン!
(削除したい項目、縦持ちに変換する要素と値を表す項目名も設定可能)

プログラムに組み込みたい方は、ArrayUtil#meltを使った、csvmeltのinteractiveMeltを参考にどうぞ! 作ったライブラリの品質を上げる要はテストコード。exportする関数を別ファイルに切り出して、deno test でちゃんと動くことを確認するコードと共に作るのが近道です。 (参考、ArrayUtilのテストコード、ArrayUtil.test.js「テスト駆動開発(TDD)で安心、JavaScriptプログラミング!Denoでwebアプリ開発編」


Hana道場では、PCNアフリカでict4eの原さんと西アフリカ、セネガル、ベナンからのインターン生がIchigoJamとサイコロ基板を使った講習の体験中。


コンピューターの楽しさ、アフリカのこどもたちにも伝えよう!PCNこどもプロコンでは、世界中のこども達からの作品、お待ちしてます!

jigインターン2021夏、シーズン2も折り返し!データを活用した作品づくり、オープンデータを作るのもオススメ!
⭐jigintern diary⭐

jigインターン2021夏、シーズン2の2日目、本格開発スタート。シーズン1の5チームの紹介も今日で5つ目、最終日。 Cチームの作品「Marking!」は、何でも調べられちゃう現代だからこそ、不自由を楽しむ旅の提案。

いい、メッセージ!ワクワクしますね!


Marking!のトップページ。キャッチコピー「俺が情報だ」が強い。


目的地を選ぶ。今回のプロトタイプは鯖江の4箇所を使用。汎用的に作るよりもまずは、このように実際に動くもの、使えるものを作るスタンスがオススメ。


余計な情報を廃したシンプルなマップが登場!現在位置と目的地、他のアイコンは自分や他のユーザーが自由に加えられるもの。 山をたくさん配置したり、斜塔を追いたり、何も無い地図にポコポコおいて共有できるのが楽しい。


目的に付近にランダムに散らばった目的に関する情報。


現在位置からの距離に応じて徐々に開示されるというコンセプト。


おまけ機能のシークレットページ!こういう遊び心が良いね!ぜひ見つけてみてください!


シーズン1のCチームメンバー、あっくん、もっく、Sora、たいしん


徐々に開示する情報、距離計算をAPIを使わずする方法、シークレットの修正、起動方法のREADME記述、データファイルをgit管理から外す設定の5つをプルリク(変更提案)。 それぞれ差分と共に見て、マージするか、放置するか、別途ブランチとして使うかご検討ください!(pulls on GitHub)


福井県独自の緊急事態宣言を受けて、基本在宅勤務中のため、無人の鯖江本店&開発センターの会社見学&社員交流コーナーで、jigと鯖江の魅力をご紹介。 確かに、川沿いのサイクリングコース、ずっと信号なく、気持ちの良い自然の中、ランニングたりサイクニングしたりできますね。自転車の高速道路的で便利とのこと。

jigインターン2021夏、シーズン2のブログもスタートしてます!
⭐jigintern diary⭐

学生の楽しみ、はじめての一人旅。旅の初心者に贈る、jigインターン2021夏シーズン1チームAの作品「pulchra(ぷるくら)」は、ステキな写真を直感で選べるステキな旅をサポートしてくれるアプリ。

写真を正方形に切り取り、3段階の大きさにした強弱つけたレイアウトが印象的かつ美しい! 場所とInstagramのハッシュタグからいい感じの場所を写真で表示しようという意欲作。


詳細画面にも文字は最小限。近くのホテルと、関連記事。それぞれ楽天APIや、スクレイピングを使ったAPIで取得してモーダル表示。

ESモジュールでAPIなど機能毎に分割して、チームでうまく分担して作られたバックエンドプログラム、コンパクトにAPIと接続しつつモーダル表示を含めてSPAでまとまったフロントエンド。 どちらもとってもいい出来なので、ぜひ参考にしよう!
jigintern/2021-summer-1-a on GitHub


Aチーム、あろー、サウスケイ、るーくん、かずりゅう。


鯖江で検査すると特別なコンテンツを用意してくれたニクイ演出もあり!ありがとう!!

FIND/47オープンデータで足りない分を、フリー素材サイトPixabayで補う作戦。 初めて知ったPixabayには確かにAPIがある!便利そうなので、活用可能なESモジュール&ダウンローダーとしてみました。(PixabayAPI src on GitHub)


Pixabayで見るJapanもいい感じ。


瀧/waterfallsで検索した結果も美しい。ほしいステキ素材をコマンドラインから即座にまとめてダウンロードできるおまけコマンド get/geth/getv.js 付き!


本日、jigインターン2021夏シーズン2も、メガネ堅パンと共にスタート!今週のテーマは学生x防犯・防災!

jigインターン2021夏シーズン1チームEの作品「TRIP LIST」

ユーザー登録、ログインして、旅先スポットを音楽のプレイリストのようにまとめて共有できるサービス。GitHubのようにforkしたり、他のリストとミックスできても楽しそう!

TRIP LIST src on GitHub
美しい日本の風景「FIND/47」のオープンデータから、ランダムに3点取得して表示。旅したくなる気持ちを盛り上げます。


Eチームのメンバー、まっつん、ばやし、ショウヤ、きじょー、そしてメンターのみさき!

作品の幅が広がるログイン機能。シンプルに名前とパスワードで登録、ログイン、ログアウトできる掲示板サンプルを作ってみました。

server.js bbs-with-login on GitHub
サーバーでユーザー情報を保存する user.json と、掲示板データ bbs.json を管理するAPIを下記のように作ります。(server.js on GitHub) import { Server } from "https://js.sabae.cc/Server.js"; import { JSONDB } from "https://js.sabae.cc/JSONDB.js"; const bbs = new JSONDB("bbs.json"); const user = new JSONDB("user.json"); class MyServer extends Server { api(path, req) { if (path == "/api/list") { return bbs.data; } else if (path == "/api/add") { const u = user.data.find(d => d.name == req.name && d.session == req.session) if (!u) { return "err"; } delete req.session; bbs.data.push(req); bbs.write(); return "ok"; } else if (path == "/api/regist") { const u = user.data.find(d => d.name == req.name); if (!u) { req.session = Math.random(); user.data.push(req); user.write(); return req.session; } if (u.password != req.password) { return null; // wrong password } return u.session; } } } new MyServer(8001); 登録とログインをまとめているのでシンプル!ログイン状態は Math.random() で生成したセッションキーでユーザーを判別。
JSONDBは、write呼び出しでJSONファイルとして保存する、Deno用インメモリなオブジェクトデータベース、実装18行!

あとは、これを使ったフロントエンドを作ります。登録&ログイン部分はこんな感じ btn_regist.onclick = async () => { const item = { name: inp_name.value.trim(), password: hash(inp_password.value), date: new DateTime(), }; const res = await fetchJSON("api/regist", item); if (!res) { alert("ユーザー登録またはログインに失敗しました"); return; } session = res; inp_password.value = ""; regist.style.display = "none"; logout.style.display = "block"; write.style.display = "block"; }; パスワードは生のままサーバーに送るのは気持ち悪いのでSHA256でハッシュするhash.jsを使ってます。お塩を混ぜてもいいかもね。 受け取ったsessionを変数で持って、書き込み時に送っています。

別ページに行く場合、sessionをどう持っていくかが問題になるので、シンプルに index.html のみのSPAとして作ってしまうのが高速でセキュリティ的にも強くてオススメ! 分割したくなったら、JavaScriptのモジュールで分けたり、HTMLをfetchしたりしよう!

ややこしいなと思った人、まずはログイン機能を持たない、シンプルな掲示板からチャレンジしよう!
server.js bbs on GitHub
こちらのサーバーコードはわずか18行
import { Server } from "https://js.sabae.cc/Server.js"; import { JSONDB } from "https://js.sabae.cc/JSONDB.js"; const bbs = new JSONDB("bbs.json"); class MyServer extends Server { api(path, req) { if (path == "/api/list") { return bbs.data; } else if (path == "/api/add") { bbs.data.push(req); bbs.write(); return "ok"; } } } new MyServer(8001); どんなデータをシェアすると楽しいでしょう!?

福井県独自の緊急事態宣言下、気をつけつつ楽しむ鯖江の週末。jigインターン生が作ってくれたアプリ「Nicheller」片手に、さばぷらへ。

いちごとレモンのかき氷 by 久保田酒店
さすが酒屋さん、酒瓶固定のダンボールを再利用したテイクアウト専用お盆が車での持ち帰りにとっても便利でした!+200円でSAP吉越さん考案、大人向け梵オプションも付けられます!

思わぬ出会いや発見は、おでかけの楽しみ。エモーショナルなコメントのみが見られて詳細をあえて隠すjigインターン2021夏シーズン1のDチーム作品「MOMENTPACK

チームメンバー、もち、ムラコー、昨日、reimei


MOMENTPACK」forked from 2021夏インターン 第1回 Dチーム
GoogleMapsを使った元バージョンをAPIキー不要な地理院地図+Leafletに変更し、Places APIの替わりにFIND/47から検索するようにしてみました。 フロントエンドを client.js として切り出し、deno fmt で整形しました。インデントなどが整っているとかっこよく見えますよ。 上記リンクは、GitHub Pagesなので掲示板機能は動きません。cloneしてローカル環境でお試しください!(src on GitHub)


近くのステキ風景検索 - FIND/47
FIND/47のオープンデータを使って、近くの画像検索を実装。バックエンドに処理はなく、全件をCSVでダウンロードして近くのデータのみを切り出しています。(searchNearBy.js on GitHub)


福井県でのスポットが見られます・・・が、やはりもっと細かい単位でのスポットがいいですね。オープンデータによる整備するか、手頃なAPIと接続してみましょう。


実装はこんな感じです。searchNearBy.js 利用例 in client.js。 ボタンが押されたら現在位置を取得して、近くを探して、マーカー表示。


福井高専のジュニアドクター育成塾、本日のテーマは、IoT。インターネットにつながるモノづくりに小中学生が初挑戦!
自分で作ったプログラムで、スマホに届く様子を確認。発想、膨らみますね!

10 IF BTN()=0 GOTO10 20 ?"MAMA DASH!" 30 IOT.OUT 1234

ボタンひとつでママを呼ぼう、IchigoSodaを使ったデバイス「ママダッシュボタン」のIchigoJam BASICのプログラム!


今日もメモ取りながら、熱心に学ぶ、小中学生。


初めての電子工作。光センターモジュールを作って、IchigoJamに接続!
秋月電子通商 トップページ - 電子部品・半導体 【通販・販売】
使った光センサーは、45円、10kΩの抵抗は1本あたり100本で100円、LEDは1個10円500個で1900円! レッツ宝探し ni 秋月
福井なら、マルツ福井営業所(二の宮店)がオススメです。



福井県は、越前がにロボコンPCNこどもプロコンHana道場福井高専など環境バツグン!
いろいろ、創ろう!

jigインターン第1シーズン最終日、全5チームによる最終成果発表会では1週間で作ったとは思えない良い作品揃い!成長できたと喜びの声、こちらもうれしい!

みんな勝利!

ニッチを探る旅に着目したチームBの作品「Nicheller」は、鯖江に住んでいるメンバーも知らないスポットが表示され、シンプルなのに完成度が高いUI/UXが人気でした。 ちょうど週末、鯖江のイベント「さばぷら」もあるので、さばぷらオープンデータも混ぜたスタンドアローンバージョンを作ってみました。

Nichellersrc on GitHub, forked from jigintern
これはニッチだ!これ知らないけど行きたい!と思ったらハートボタン。あるよねーと思ったらバツボタンでサクサク次に辿れます。 詳細画面からは近場の3箇所を更に表示。行ったついでにもうちょっと楽しめる!

データは、鯖江市役所のオープンデータ「さばかん情報(XML)」と、さばぷらのオープンデータ(さばぷらマップ)。 sqlite用のdbファイルをexportDB.jsを使って、JSONにしてフロントエンドのみで動くようにちょっと改造。 これはニッチだ!とハートマークを押した回数をトータルでカウントして、よりニッチなものを表示する部分の実装ができるとサーバーで稼働させたいですね。

フロントエンドは、フレームワーク「SVELTE」を使用したSPA(Single Page Application)として実装されてます。 「鯖江 ニッチ」とかで検索してヒットするようにするには、サーバーで検索エンジン用のページ生成することの検討もいいかも。


チームBの、いつき、Yune、みその、ステキな作品ありがとう&おつかれさま!

jigインターン生達のブログでもどうぞ!
⭐jigintern diary⭐

オンラインで実施中のjigインターン、今回の期間は1週間、いよいよ大詰め4日目。それぞれバリバリ開発進む中、今日の気分転換はライブコーディング。 jigインターンOBでもあるjig.jpエンジニア、ゆうりから、Nuxt.jsでその場でサクッとつくるタスク管理アプリのご紹介。
世界中で開発される便利なライブラリ、あれこれ遊んで自分にぴったりなもの見つけるのもいいですね!なかったら、創りましょう。

創るといっても0から作る必要ありません。先人の作った良いものをうまく活用すれば、ちょっとの時間で良いものができますよ!(マシン語を使うことなく、いろんな言語で開発できるのも先人たちのおかげですね)

Vuetifyの美しいアイコンデザインを辿ってみると「Material design icons by Google」Apache Licenseのオープンデータでした。 かなり大きなリポジトリだったので、forkして、svgの1サイズのみにし、一覧をJSON化、検索アプリと合わせて公開!


アイコン検索 - search the material iconsrc on GitHub code4fukui/material-design-icons
その数9052アイコン!カテゴリーから辿ってみたり,英語でいろいろと単語で検索してみたりしてみましょう!気に入ったアイコンがあれば、右クリック画像保存で使えます。ベクトルタイプの画像なので、SVGなのでどんなサイズでもキレイですよ。色変更するアプリを作るのもいいかも。


voiceで検索
実は、新型コロナウイルス対策ダッシュボードの読み上げ対応でアイコンを探していたんです。


COVID-19 Japan - 新型コロナウイルス対策ダッシュボード #StopCOVID19JP
わかりづらく、間違って読み上げてしまうこともあったタイトルクリックから、左上アイコンで読み上げに変更完了! アプリ開発は、積み上げるほど楽で楽しくなっていきます。

jigインターン生達の4日目の有志、ブログでもどうぞ!
⭐jigintern diary⭐

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