熱いソフトウェアツール、ディープラーニングをテーマにした高先生向けコンテスト「DCON2022」のメンターになりました。 審査時に1チーム選択肢、来年4月の本線に向けてメンタリングします!本日、高専生向けの説明会にてオンライン登壇。


フラーの渋谷さん交えた応援トーク。一日一創という創ることの習慣化、おすすめです。


日本の法人数推移src on GitHub
今日の一日一創。今回のグラフは、Chart.mjsではなく、D3.jsを使ってみました。
世の中の転換期、コロナによる廃業という話も聞きますが、今年7月14日からの法人数の推移は一貫して増加。2ヶ月で14,000社も増えてます。 日本に約500万社とそこそこビッグな法人オープンデータ、ディープラーニングを使った新しい知見発見も有りえます。


人類が過去発明してきた画期的なツール、ネットは、言葉、文字に継ぐ、5,000年来の大発明!

jig.jpが手掛ける動画配信アプリ「ふわっち」は、放送というビジネスモデルをすべての人に開放するサービス。 新CMが完成!
みんなのライブ配信「ふわっち」 2021年9⽉17⽇よりTBSテレビにて新CMを放送 |A Inc.のプレスリリース


みんなのライブ配信ふわっち、働くママ編


みんなのライブ配信ふわっち、働く男編


こちらも熱い学生向けのコンテスト、いよいよ来週に迫った「鯖江市地域活性化プランコンテスト」の参加者からヒアリング依頼。 電脳めがね、xRの未来についてディスカッション。おもしろいユースケースと、ステキなソフトとちょうどいいハードの組み合わせにチャンスあり!

各地でインターンしている高専生。リアルな現場での学び、楽しいですね!

「コネクトフリー社で活躍する福井高専インターン生」

ものづくりへの想いがぐっと高まった、その勢いで、普段の学生生活自体も現場と見て、自分たち、教員たちの課題を解決してみるいい機会!


福井高専ニュースsrc on GitHub
古巣、福井高専のニュースを掲載している全件「スクレイピング / scraping」によって取得して、CSVオープンデータとして加工するプログラム。 シンプルなコードはこの通り。ぜひみなさん、自分の学校でチャレンジしてみましょう! import { HTMLParser } from "https://js.sabae.cc/HTMLParser.js"; import { CSV } from "https://js.sabae.cc/CSV.js"; const url = "https://www.fukui-nct.ac.jp/news/"; const html = await (await fetch(url)).text(); const dom = HTMLParser.parse(html); const lis = dom.querySelectorAll(".news-list li"); const data = lis.map(li => { return { url: li.querySelector("a")?.attributes.href, date: li.querySelector(".post-date").text, category: li.querySelector(".post-cate").text, title: li.querySelector(".post-title").text, } }); await Deno.writeTextFile("fnct-news.csv", CSV.stringify(data));

HTMLParserで、HTMLをパース(字句解析)して、欲しい項目を名前付きデータの配列に変換、CSVとして出力しています。(Denoを入れて動かしてみましょう!)


デジタル庁ニュース
動き激しい、デジタル庁。「第1回デジタル社会推進会議幹事会 |デジタル庁」にて、多数の興味深い資料が公開されています。 日本全体のデジタル化、身近な学校が取り残されて損するのは学生自身。動こう、創ろう!

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⭐

2021/8/31、IT室こと内閣官房情報通信技術(IT)総合戦略室の最終日。最後の更新があり、政府DXに関連する様々な文書が公開されました。

政府CIOポータル - 更新終了
デジタル政策はデジタル庁へと引き継がれるとのことです。(→デジタル庁スタート


ディスカッションペーパー | 政府CIOポータル
発表されたディスカッションペーパーは下記の7つ!
- ゼロトラストネットワークを実現するための政府職員のアカウントやアセットの管理
- 政府情報システムの移行のためのデータポータビリティ
- クラウドサービス(SaaS)活用のためのネットワーク設計
- 拠点間ネットワークに適用可能なオーバーレイネットワークの設計と運用
- メタデータルールと利用イメージの検討
- データ人材フレームワークの設計
- デジタル社会実現のためのアーキテクチャ設計

この7つリンクを作るプログラムはこちら

$ deno import { CSV } from "https://js.sabae.cc/CSV.js"; const data = CSV.toJSON(await CSV.fetch("https://code4fukui.github.io/cio-jp/discussionpaper.csv")); data.filter(d => d.datetime.startsWith("2021-08-31")).map(d => `- <a href=${d.url}>${d.name}</a><br>`).forEach(s => console.log(s))

たった3行、CSVデータとしてまとめておくと活用しやすくて便利です。

政府CIOポータルのライセンスがCC BYのオープンデータなので気兼ねなくスクレイピングしデータの二次利用が可能です。 デジタル庁でも使いやすいデータがどんどん出ることに期待しましょう!


ディスカッションペーパーのページのHTMLソースを見てみると、大事な部分がarticleタグで囲まれているのでスクレイピングしやすいナイスな構造!

HTMLから、スクレイピングして、CSVにするシンプルなコード(実際のコードはGitHub参照) import HTMLParser from "https://dev.jspm.io/node-html-parser"; import { CSV } from "https://js.sabae.cc/CSV.js"; const dom = HTMLParser.parse(txt); const articles = dom.querySelectorAll("article"); console.log(articles.length); const data = []; for (const a of articles) { data.push({ name: a.querySelector("h1").text }); } await Deno.writeTextFile("scraped.csv", CSV.stringify(data)); (src on GitHub)


政府CIOポータル ディスカッションペーパー Markdown
Markdown化しておくと一括して読めて便利ですね。


標準ガイドライン群用語集src on GitHub
更新された標準ガイドライン群用語集。検索、各項目でソートもできます。「廃止」で検索すると並ぶ、11項目。政府CIO、IT室は廃止され、デジタル庁へとその機能を移します。 IT人材という言葉も今後は「デジタル人材」や「高度デジタル人材」などと呼ぶようになるとのこと。

最終更新日から一気に、スマホでも読みやすいMarkdownバージョンもどうぞ
標準ガイドライン群用語集

こちらCSVをMarkdown化するcsv2md.jsと、MarkdownをHTML化するmarked.jsを作って、make.jsで使っています。

いろんなデータで遊んで、データ人材になりましょう! 高度デジタル人材データ人材の育成プログラムでもある、jigインターン生による成長の記録。 3周目の2日目が終了しました。
⭐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⭐

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