来年4月、10人の新人を迎える予定の、jig.jp鯖江開発センター&本店。
テーマはシビックテック。3-4人ずつ分かれてオンラインチーム開発。内定式で成果発表会!

Aチームは、福井県のオープンデータを使って自動生成する、ご当地クイズ!
観光・グルメのオープンデータが、熱い!


Bチームは、鯖江への引っ越しを支援する、鯖江ハウジング。あるスポットの周囲にある物件とスーパー、飲食店をまとめて調べられます。喫茶店、ゲームセンター、クリーニング、サイクリングロードなど、オススメスポットも追記したいですね!


Cチームは、住んでいる県や気になる県のコロナ感染状況だけをピンポイントに毎日教えてくれる LINE bot、COVID-19 Reminder。厚生労働省の新型コロナウイルス関係オープンデータを使用。 リスクが高くなってきたときだけに通知がくると、慣れてしまって見逃すことが減って更にうれしいかも。


input-week tag demo
近所の飲食店、何曜日が営業しているかも大事なデータ。
簡単に入力できる曜日入力コンポーネント input-week タグを作りました。

シビックテックでも、より豊かな社会の実現へ!
Let's do civic tech!

jigインターン2021夏、紹介する最後の作品、Aチーム「歩いたー」は、歩いた歩数をポイントとして使っておもしろ写真を見たり、評価するサービス。 歩いたついでにおもしろ写真を撮って投稿すると、「いいね」がもらえて、また歩きたくなる設計がいいね!
「お散歩SNS歩いたー」のビジョン、「我々はSNS好きな若者のために、ソーショル的な万歩計を開発することによって、運動不足の改善を実現する!」
ビジョンテンプレ「我々は〇〇のために、〇〇を開発することによって、〇〇を実現する!」を使ってくれました!


Aチーム、うえのごう、あざろ、コウメイ、メンターはきのぴー
GitHubのリポジトリは「jigintern/2021-summer-3-a


Google Fitが記録する歩数データをAPIで取得し、歩数をポイントに変換して表示。


歩数を変換したポイントを使ってタイムラインを10コだけ更新!無限にできる「いいね」だけど、「いいね」もポイントを消費します。

場所に紐づくステキ写真は、あればあるほどおもしろサービスへのアイデアが広がり、実現が近づきます。 もっともっと増やそうオープンデータ!


越前海岸盛り上げ隊マップsrc on GitHub
もうひとつのインターン、福井高専の1年生、海側の福井市、先日訪問した越前海岸盛り上げ隊のマップを整理してCSVオープンデータに!


Hana道場、越前海岸盛り上げ隊のマップ化技術とデータを使ってJKによるJKのためのマップアプリ「JKまっぷ src on GitHub」を開発開始!


jigインターン2021夏、最後はオンライン一本締め!(撮影 by スクショタイマー

jigインターン」次回開催をお楽しみに!

jigインターン2021夏シーズン3、Bチーム「みんスポ」は、続けるのが難しい運動を、Discordのように友達が今やっている運動を見て刺激を受けようという作品。

みんスポのターゲットは高校生、ビジョンは、運動のハードルを下げること!


Bチームメンバー、てる、みやけん、もっく、メンターはよしろー


登録して、ログイン、すべてのユーザーを見ると、ずらっと今やってるスポーツが並ぶ。
友達を見つけてフォローしよう!


デモ時にも好評だった、操作内容や、エラーメッセージを伝えるUI。右下でさりげなく、かわいく知らせてくれる。
どうやって作っているんだろう?
GitHubにあるオープンソースから発見、bulma-toast!(2021-summer-3-b/ActiveUsers.vue at main · jigintern/2021-summer-3-b)
みんスポでは、Vueで作られたフロントエンドで使っていますが、Pure JavaScriptなので、Vanilla JS(空のフレームワーク、素のJS)でも使えそう。


bulma-toast test
ESモジュール版もあったので、GitHub Pagesにして、そのまま使うこともできました!
ステキCSSフレームワークであるBulmaと、アニメーションヘルパーAnimate.cssのCSSをCDNから取得するようにセットしてできあがりです。


デジタル庁ニュース
デジタル庁のブログも取り込んで表示するようにしたデジタル庁ニュースをBulmaでちょっとかわいくしてみました。

noteは、RSSにも普通のスクレイピングにも対応していないので手間取りました。
1. 一覧CSVを作る scrapeNote.js (Deno)
2. ヘッドレスChromeで表示してHTML取得 fetchOGPNote.mjs (Node.js)
3. OGPを取り出してnote.csv作成 fetchOGPNote2.js (Deno)

アクセスしやすいウェブサイトにするという課題は、デジタル庁でもちゃんと把握済み!どんどん改善提案していきましょう!
デジタル庁ウェブサイトにいただいたフィードバックの反映状況について|デジタル庁

jigインターン2021夏シーズン3、Cチーム作品は近くの対戦相手を探すサービス「match app」

こちら「match app」のビジョン!新しい場所で生活を初めた大学生や、新社会人にもうれしいサービスになりそうですね。


対戦したいスポーツ選択画面。都道府県、市区町村で絞り込めます。


abcさんに対戦、申込み!


abcさんにはundefinedさんからの対戦依頼が届きます。承諾して、対戦結果入力、レートに反映という流れが実装済み!


Cチーム、トトロ、マナト、てん、メンターはにゅ
matchapp on GitHub
用意されたAPIをソースから辿れます。セッション管理がuseridになってますが、このままでは偽装できてしまうのでログイン付き掲示板のように推測不能で十分長い文字列を使いましょう。 追記した起動方法をプルリクを参考に手元で動かしてみると勉強になりますよ。


select-pref tagsrc on GitHub
気になったのは、都道府県、市区町村の選択コンポーネント。都道府県はめったに変わりませんが、市区町村はたまに変更があるので、ハードコーディングは避け、切り出しておきたいところ。 先日作ったTownIDを使って、都道府県選択コンポーネント select-prefタグ を作りました。 最強の都道府県選択コンポーネントづくり、チャレンジ待ってます!


「ウェブサイトのデザイン原則案を策定」とありますが、標準コンポーネントを実装して、オープンソースで配布する方が近道ですね!


デジタル庁ニュース
デジタル庁のニュースURLと日付を拾って作成したCSVファイルから、DenoでOGPを取得してリッチなCSVファイルを作成、それを使ってデジタル庁ニュースサイトができあがり! noteの記事はまた別のようなので、マッシュアップしたいと思います。

jigインターン生によるブログもぜひどうぞ!
⭐jigintern diary⭐

今年は1週ずつ3週に渡って開催したjigインターンもグランドフィナーレ。 シーズン3のテーマは「学生x健康・スポーツ」、4チームの成果発表を発表順に紹介します。

Dチームはeスポーツの憧れの選手の生活パターンから学び、強くなるヒントを得るサイト「break」
チーム開発で一番大切なもの、それは「ビジョン」、みんなブレずにできたかな!?


有名eスポーツプレイヤーが並ぶトップページ。あの憧れの人はどんな生活を送っていて、どういうことに気をつけっているんだろう?が解決するサイトのイメージ。


有名人を紹介する記事でよくある生活パターンを円グラフで表示するやつをアプリで再現。 超快適に入力できる時間UIや、かっこよく見やすい円グラフなど、いろいろと突き詰めたくなりますね!


Dチーム、まーしー、いつき、やまゆ、メンターはゆうり

使用技術は、バックエンド(APIとwebサーバー)はJavaScriptランタイム「Deno」、Node.jsを使ってビルドするフロントエンドフレームワーク「Vue.js」、データベース「SQLite」

ソースコードはGitHub(jigintern/2021-summer-3-d)にあります。 起動方法がうまくいかず、APIの呼び出し先がデプロイ先になっていたので、conts.jsで設定可能に変更して、ひとまずローカルにしたものを作ってプルリクしました。

個人的にはESモジュールが使えない Vue.js は好みじゃないですが、自分の手で確認するのが一番です。見た目の美しさはHTMLElementや、CSSとしてとりこんでいく作戦。


昨年から成果発表会オンラインスタイル、だいぶ慣れました。


1週間、やりきった!けど、みんな創りたい感マシマシな様子。

こちら、デジタル庁オープンデータを元に作った人事検索アプリ、オープンソース on GitHub

デジタル庁人事検索アプリ
ぜひチャレンジしたいフレームワークで実装してみましょう!

オープンソースへの貢献入門、プログラミングによるeスポーツ、中止になった高専プロコンの競技部門を勝手に開催する「囲みマス」もどうぞ!
codeforkosen/Kakomimasu: #procon31 競技部門 コアモジュール for Deno
Issuesを見てできそうなものにチャレンジ→プルリク→レビューを経て→貢献の流れ、ぜひ体験しみましょう!
もちろん、AIを作って遊ぶだけでも、観戦してみたいなど、どんな形でも大歓迎!

jigインターン参加者からの感想が続々と投稿されるjigインターン生によるブログもぜひどうぞ!
⭐jigintern diary⭐

オンライン開催中のjigインターン、みんなでポーズしながら記念撮影の課題、撮る人は片手が取られる問題。 カメラのタイマー撮影のような機能を持ったスクショ(スクリーンショット)があれば欲しくなったので作成。

スクショタイマー - screenshot-timersrc on GitHub
WebAPIで作ったのでブラウザで開くだけで動かせます。「準備する」ボタンを押して、キャプチャーする範囲を画面全体を選んで「共有」し、画面キャプチャーボタンを押すだけ。カウントダウンの音がして、シャッター音。 撮影したJPGの写真データは即ダウンロードが始まります。何枚か連続して撮る機能があるので、ベストな写真を後からじっくり選べます。

写真データをサーバーには一切を送らないので、プライベートな会議でも使えます。(心配な方、ソースをご確認ください src on GitHub


スクショタイマー - screenshot-timersrc on GitHub
プログラムはシンプル、1つのHTMLと効果音ラボさんのサウンドファイルのみ。
過去の一日一創で作ったいろんなESモジュールとして組み合わせて、プログラミング! import { css } from "https://js.sabae.cc/stdom.js"; import { Base64 } from "https://code4fukui.github.io/Base64/Base64.js"; import { sleep } from "https://js.sabae.cc/sleep.js"; import { fix0 } from "https://js.sabae.cc/fix0.js"; import { downloadZip } from "https://code4sabae.github.io/js/downloadZip.js"; import { DateTime } from "https://code4fukui.github.io/day-es/DateTime.js"; import { Sound } from "https://js.sabae.cc/Sound.js"; ボタンが押されたら、カウントダウンして、撮影の流れ(setTimerではなくawait sleep) btncapture.onclick = async () => { btncapture.disabled = true; if (countdown.value) { message.textContent = "撮影カウントダウン!"; for (let i = countdown.value; i >= 1; i--) { message.innerHTML = "撮影カウントダウン!<br>" + i; sndCountdown.play(); await sleep(1000); } } const delay = delaycapture.value; let cnt = ncapture.value; if (cnt == 1) { message.innerHTML = "撮影!"; sndShutter.play(); const canvas = video2canvas(videoin); downloadJPEG("ss.jpg", canvas); プログラミングが苦手という人は、そもそも英語に苦手な人が多そうです。 関数や変数を日本語にしたり、日本語プログラミング言語を使う手もありますが、圧倒的大多数の英語ベースで書かれたプログラミング資産を使わず、また、世界に共有できないのももったいない。

小学校で必修化された英語と合わせて、シンプルな英語でカタカタかっこよく作るIchigoJam BASICで慣れておけば、違和感なくすっと本格プログラミングの世界に入っていけます。

いよいよ、大詰めjigインターン生の記録
⭐jigintern diary⭐
スクショタイマーのことも書いてくれてます
jigintern 第3週4日目 team-B - ⭐jigintern diary⭐

jigインターン2021夏シーズン2の作品紹介、最終Aチームは、スマホを持ち始める中学1年生向けの情報リテラシークイズアプリ。

e-Literacy on GitHub
スマホやパソコンに慣れていなくても直感的に使えるようにと誕生したデザイン、ニューモーフィズムを使用。(参考、【2020年】新しいデザインのトレンド「ニューモーフィズム」に注目 | FASTCODING BLOGニューモーフィズムとは?デザイン方法やルールのまとめ | Web Design Trends


大阪府のネットリテラシー問題を使ったクイズアプリ! 選択肢を選んで「決定」で解説も表示。サクサク自分で学べそう。完璧にこなせたら何かの認定デジタルシールとか提供するのもいいかもね。


チームAのメンバー、うっしー、てる、やまゆ、そう

情報リテラシーに関するクイズと言えば、情報処理技術者試験、過去問は出典表記で使用が可能とのこと(IPA 独立行政法人 情報処理推進機構:情報処理技術者試験:よくある質問、7 その他、試験の過去問題の使用方法(申請方法、使用料等)について教えてください)。

例えばこんな問題。クイズアプリを作る元ネタとしてもってこい!ひとまず、令和3年の問題からひとまず5問だけCSVデータにしました。出典表記の上、ご活用ください。追記大歓迎!
code4fukui/digital-quiz-data

CSVクイズデータを使った、簡単なクイズアプリ、作成例「digital-quiz」 in JavaScript
import { CSV } from "https://js.sabae.cc/CSV.js"; import { waitClick } from "https://js.sabae.cc/waitClick.js"; onload = async () => { const quizdata = CSV.toJSON(await CSV.fetch("https://code4fukui.github.io/digital-quiz-data/ap-2021spring.csv")); console.log(quizdata); let cnt = 0; for (const qd of quizdata) { q.textContent = qd.q; s1.textContent = qd.s1; s2.textContent = qd.s2; s3.textContent = qd.s3; s4.textContent = qd.s4; choice.value = null; await waitClick(ans); if (choice.value == qd.a) { alert("正解!"); cnt++; } else { alert("不正解!正解は" + qd.a); } } alert("正答率は" + (cnt / quizdata.length * 100) + "%!"); }; 4択限定のクイズアプリ、async/awaitを使うと、IchigoJamのように流れをシンプルに表現できます。waitClick.jsを参考に、慣れておこうPromise。


デジタルクイズ ニューモーフィズム版
e-Literacyのニューモーフィズムを sakura.css のように、CSSを適応するだけ版「neomo.css」を作って使ってみました。
<link rel="stylesheet" href="https://code4fukui.github.io/neomo.css/neomo.css"> inputやbuttonがニューモーフィズムになるCSSです。(input-checkboxも追加して、対応!)


sakura.cssを適応するとこんな感じ。デザインと機能、分離しておくといろいろ応用できて便利!


問題の答えを選ぶ、どれか選択を実現するUIは、inputのtype=radioですが、labelと合わせていまいちシンプルじゃないので作った、input-radio。 今回ニューモーフィズム対応のため内部構造をlabelのforを使うように少し改造しました。・・・が、sakura.css適応で改行されてしまう点、要改善です。


今日からスタートjigインターン2021夏シーズン3!
アイスブレイクとしてチーム毎にジェスチャークイズ、Zoomのチャットで一斉に答えを書く。誰を見るかが熱い!上は全チームのジェスチャー中の様子を合成したもの。


フロントエンドとバックエンドを一気に学ぶ、勉強会。Denoくん、かわいいね!

jigインターン生による成長の記録
⭐jigintern diary⭐

jigインターン2021夏シーズン2、3チーム目Dチームによる安全に水辺で遊ぶための補助アプリ「福井の水辺で遊ぼっさ!!」

福井の水辺で遊ぼっさ!! on GitHub
きれいな水辺の動画背景がワクワクします。海か川か選んでスタート。福井県内のオススメスポットを紹介。


各ページで海や川で遊ぶ場合の安全情報をダイアログ表示。dialogってHTMLタグがあることを知りました(Safariは非対応)。 まだまだ知らない便利機能があるwebアプリ開発、奥が深い!


福井県内の水位オープンデータをスクレイピングして表示するオープンソースを活用してくれた、水辺で遊ぶところ付近の水位データ。 確かに近いところを取得できると便利です。

そこで開発、waterlevel_fukui/getNearest.js(async) 緯度経度を渡すと一番近い水位データを取得します。 使い方は簡単! import { getNearset } from "https://code4fukui.github.io/waterlevel_fukui/getNearest.js"; const sensor = await getNearest(35.9433, 136.1886); console.log(sensor); バックエンド側の次のような悩み。 毎回サーバーまでアクセスする必要がなかったり、複数のAPIを組み合わせて使ったり、まとめて取得してローカルで検索したり、効率を上げたい。 クラスライブラリとして提供して、使い勝手を向上させたい。

効率良いAPIをJavaScriptのESモジュールとしてフロントエンド側へ提供する解決できます! 仕様変更があってもクラスで吸収すれば、フロントエンドにかかる負担は0。他のプロダクトと接続する際も簡単です。 いろんなバックエンドの便利API、作ってみましょう!


チームD、こうじ、もっく、みーや

こちら、jigインターン生による成長の記録
⭐jigintern diary⭐

学生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!

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