あっと言う間に最終日を迎えた、jigインターン2021春!
夕方17時から、2チーム、2作品の発表会。10分でプレゼン&デモ、観覧者による質疑応答を経て、投票によって決まった優勝チームは!?

2日間、やりきった!


ゲーム好きのための双方向情報交換サイト「ゲームちゃんねる on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
既存のサイトでは物足りない!主な情報源の動画だけどとまとまらない。そんなとき「ゲームちゃんねる」


今回はXAMPPで構築、サーバーの掲示板システム。フロントエンドはレスポシブ対応! 好きな人が作るのが一番!ぜひリリースに向けて育てましょう!


こどもでも苦手な人でも気軽に自分の音楽ができる「べいびぃすたじお on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
音楽理論とかセンスとか難しいことは置いといて、楽しくステキな音楽づくり、実現します!


ブラウザで鳴るJavaScript音源 Tone.js を使って、シーケンサーと共有するシステムを実装。GitHubのようにどんどんフォークしたり、混ぜたりできると楽しそう! 作詞や、ビジュアライズ、動画との組み合わせなど、いろんな方向への発展を考えるだけでもワクワクしますね!

優勝は「べいびぃすたじお」賞品の Oculus Quest 2 を使ったVR版にも期待です!
どちらもオープンソース。参考にしたり、フォークしたり、開発に参加したり、いろいろ作って発表しましょう!


normalize-japanese-addresses-es
DenoによるJavaScript/HTML/CSSを使えると、サーバー(バックエンド)にクライアント(フロントエンド)にいろいろ応用できて便利です。 こちら、本日発表された、Geolonia社の、日本の住所表記を正規化するオープンソースライブラリ「@geolonia/normalize-japanese-addresses」を、フォークし、ブラウザやDenoで使えるESモジュール表記に変更した「normalize-japanese-addresses-es」です。

B Inc. odp(オープンデータプラットフォーム)を使った、新宿区の行政メニューオープンデータもスタート!
東京都新宿区とB Inc.、オープンデータを使った行政サービス案内用のwebサービスを公開~利用者が迷わない窓口案内を目指して~|株式会社B Inc.のプレスリリース
DX、がんがん進める力は、エンジニアにあり!

Denoはじめのいっぽ、ぜひどうぞ!
Denoでつくる掲示板webアプリ、ハンズオン

はじまりました、jigインターン2021春!勉強会&チーム開発、2日間のオンライン開催。

やる気、6名の学生 with 眼鏡堅パンjigbox開封の儀

サーバーとクライアント、2つのコンピューターを使うwebアプリの基本をJavaScriptのランタイム、Denoを使って作る勉強会。 「Denoでかんたん、フロント&バックエンド超入門 in JavaScript」をベースにハンズオン。 全員、JavaScriptエンジニアの仲間入り!

チーム開発、スクラムのプラクティスのひとつ「KPTふりかえり」を元に作成、もっと優しい、Windows/Mac向けのハンズオン教材「Denoで作るシンプルなBBS

こんな掲示板アプリが2ファイル、90行で作成できます。
(慣れている方はこちら src on GitHub

0. エディタ VSCodeセットアップ(すでに入っている人はスキップ)
Visual Studio Code の「今すぐダウンロード」からセットアップし、起動する

1. Denoセットアップ
Denoを開き、Windows用インストールスクリプトをコピー

iwr https://deno.land/x/install/install.ps1 -useb | iex

Mac/Linuxの人はこちら

curl -fsSL https://deno.land/x/install/install.sh | sh

VSCodeのメニュー、Terminal、New Terminal
開いたTerminalで、貼り付けて、エンター

2. Deno動作確認
Terminalで deno と書いて、エンター
1+1 と書いて、エンター、JavaScriptが動きました!
Ctrlキーを押しながらD、で deno のREPL(リプル)を終了

3. webサーバーを動かす
適当なディレクトリ(例としてbbsserver)に、bbs.js と static/index.html を作成する
VSCodeのTerminalで、下記を書く(Windows用)

mkdir bbsserver New-Item -Type File bbsserver/bbs.js mkdir bbsserver/static New-Item -Type File bbsserver/static/index.html code bbsserver

(Mac/Linux用)

mkdir bbsserver touch bbsserver/bbs.js mkdir bbsserver/static touch bbsserver/static/index.html code bbsserver

新しくVSCodeが開く。
bbs.js を次のコードに編集する

import { Server } from "https://js.sabae.cc/Server.js"; new Server(8008);

static フォルダ内 index.html を次のコードに編集する

hello deno!

VSCodeのメニュー、Terminal、New Terminal
開いた Terminal で下記を書く

deno run -A --watch --unstable bbs.js

ライブラリをダウンロードしながら起動するので少し待つ(初回だけ)
ファイアーウォールのダイアログが出たら「プライベートネットワーク」で「アクセス許可する」
http://localhost:8005/ をブラウザで開く(Ctrl+click)と「hello deno!」と出る

4. バックエンド、APIサーバーを作る
bbs.js を下記に変更する

import { Server } from "https://js.sabae.cc/Server.js"; import { jsonfs } from "https://js.sabae.cc/jsonfs.js"; const datafn = "data.json"; let data = jsonfs.read(datafn) || []; class MyServer extends Server { api(path, req) { if (path == "/api/list") { return data; } else if (path == "/api/add") { data.push(req); jsonfs.write(datafn, data); return "ok"; } } } new MyServer(8008);

Denoのwebサーバーは自動的にファイルの更新を検出して、再起動する(--watch)
http://localhost:8008/api/add?{"date":"t","name":"test","body":"body"} にアクセスすると、"ok" とでる
VSCodeで data.json が更新されることを確認する
http://localhost:8008/api/list にアクセスすると、書き込んだデータが表示される
APIサーバーできた!

5. フロントエンド、掲示板(BBS)をHTML/CSS/JavaScriptでつくる
static/index.html を下記に変更する

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>DenoでシンプルなBBS</title> <script type=module> import { fetchJSON } from "https://js.sabae.cc/fetchJSON.js"; const enc = (s) => { s = s.replace(/&/g, "&amp;"); s = s.replace(/</g, "&lt;"); s = s.replace(/>/g, "&gt;"); s = s.replace(/\n/g, "<br>"); return s; }; window.onload = async () => { const data = await fetchJSON("api/list"); for (const d of data) { const div = document.createElement("div"); div.className = "bbsitem"; div.innerHTML = `<span class=date>${enc(d.date)}</span> by <span class=name>${enc(d.name)}</span> <div class=body>${enc(d.body)}</div>` container.appendChild(div); } btn_write.onclick = async () => { const item = { name: inp_name.value, body: inp_body.value, date: new Date().toString() }; if (await fetchJSON("api/add", item) == "ok") { window.location.reload(); } } }; </script> <style> .bbsitem { border-top: 1px solid gray; margin: 1em; } .writebox { border: 2px solid gray; padding: 1em; margin: 1em; } input, textarea { width: 80%; } </style> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> </head> <body> <h1>DenoでシンプルなBBS</h1> <div id=container></div> <div class=writebox> 名前:<input type=text id=inp_name><br> <textarea id=inp_body></textarea><br> <button id=btn_write>書き込む</button> </div> <footer>App: CC BY <a href=https://fukuno.jig.jp/3169>@taisukef</a></footer> </body> </html>

http://localhost:8008/ にアクセスすると掲示板として使える
あとは自由に変更しよう!

6. 演習
フロントエンド、関数 enc が無いとどうなってしまうか試してみよう。
フロントエンド、スタイルシート sakura.css の行を消すとどうなるか見てみよう。
バックエンド、jsonfs とは何者か?リンクを辿って確認してみよう。
バックエンド、書き込みを全削除するAPIを作ってみよう。(ヒント、Array mdn、キーワードとmdnと一緒に検索するのがオススメ!)

7. 参考
HTMLはじめのいっぽ
CSSはじめのいっぽ
JSはじめのいっぽ

Denoは株式会社になったようです!ますます楽しみ、DenoとJavaScript!
Announcing the Deno Company | Deno Blog

長らく使っていた自作のブログシステム、全記事を rss.xml に追記するスタイルを続けていましたが、テキストファイル容量が12MBを超え、編集中にエディタがクラッシュ。 ファイルが壊れました。そろそろ潮時とブログシステムを刷新を決意。元はJavaですが、最近お気に入りのJavaScriptで作り直し。

ひとまず、だいたい元通り。3,000記事以上あるので、検索した結果も多くなりすぎだったので、一覧表示化します。

新システムで稼働できればよかったのですが、移行にひと手間かかることが分かったので、ひとまずオープンソースとして公開のみ。
taisukef/fukunojigjp
Deno / JavaScript で、自分でブログを作りたい人、参考になるかもしれません。

3/6は、インターナショナルオープンデータの日!そのプレイベントとしても開催、オープンデータ勝手表彰!

最優秀賞は、シビックテックの火付け役、東京都コロナウイルス感染症対策サイト
Code for JapanのSlackへの参加呼びかけに応えるエンジニアがすごい勢いで伸び、3000人を突破!現在4,766人を数えます。 ここでの活動がきっかけで、COVID-19 Japan 新型コロナウイルス対策ダッシュボードは生まれました。


COVID-19 Japan 新型コロナウイルス対策ダッシュボード」も貢献賞!
まもなく運用開始から約1年、データが十分に揃っておらず、状況が日々変わる第一波の頃はかなりエキサイティグな日々を過ごしました。 オープンデータの力、多くの方に知っていただく機会になったことがうれしいです。表彰いただき、ありがとうございました。
オンライン開催 インターナショナル・オープンデータ・デイ 2021 in HOKURIKU」にて、舞台裏、紹介します!


我らが福井県、Code for Japanと共に受賞!
いち早く、推奨フォーマットに準拠したCSVオープンデータ化が評価されました。


石川県、静岡県、青森県、コンプリート賞!
オープンデータ都市状況はこちらのオープンデータとアプリでご覧いただけます
日本の市町村オープンデータ取組率ダッシュボード (カラム地図7x7 x 政府CIOポータルオープンデータ)
おや、青森県97%!?
青森県平川市のオープンデータが政府CIOポータルのデータに未反映のようでした。


ダッシュボード賞として「エレクトリカル・ジャパン - 発電所マップと夜景マップから考える日本の電力問題 | 東日本大震災アーカイブ - 国立情報学研究所」を選定させていただきました。 身近なで重要なインフラなのにまだまだデータ整備が足りていない発電所オープンデータを、民間運用でなんと10年、日本一のデータ量を誇ります! 手回し発電して無電源で無限にプログラミングできる、IchigoJam無電源セットを副賞としてご提供!

受賞いただいた、Nii 北本朝展さんが提供する多数のデータは、電力以外にも興味深いものがたくさんあります。 気になる地震のデータ、気象庁XMLを使った表示はじめのいっぽ、試してみました。

震源・震度に関する情報 - 気象庁XML
気象庁 | 気象庁防災情報XMLフォーマット形式電文(PULL型)」こちらの情報をブラウザでダイレクトに取得することはCORS設定されていないのでできないので、中継サービス「proxy for Deno」を作って、自前サーバーで運用して対応。


Geo3x3」zoom設定可能になったGeo3x3-map
取得した震源地の緯度経度をproj4をESモジュール化し、緯度経度を日本測地系を世界測地系に変換しつつ、Geo3x3でコード化して、地図表示へのリンクを追加しました。 ただ、この気象庁XMLでは、電力会社の停電情報同様、一定時間で消えていってしまうので、別途アーカイブ化する必要があります。データ活用の余地、大きいですね!

勝手表彰、受賞いただいたみなさま、ありがとうございました!

いろいろイベントが続きます!PRに欠かせないSNSシェア。画像が付いているかどうかでインパクトは大きく変わります。 ただ、画像つきにするにはogpやTwitter Cardの仕様に沿ったHTMLである必要があります。システムによっては非対応なものもあるでしょう。


そんな人のための便利ツール「ogpmaker
表示したいURL,タイトル、画像へのURLを記入して「OGPリンク作成」ボタンを押すと、画像付きシェアできるURLを生成してくれます! Twitter Card validatorや、Facebook シェアデバッガーでご確認ください(変更した時の更新もこちらから)。

参考までに、下記のようなHTMLをJavaScriptで自動生成しています。(src on GitHub)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>${title}</title> <meta property="og:title" content="${title}"> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:image" content="${img}"> <meta property="og:image" content="${img}"> </head> <body> <script type=module> document.location.href = "${url}"; </script> </body> </html>

ブラウザやサーバーで動くアプリを作るのに便利なプログラミング言語JavaScriptは、IchigoJam BASICなどで基本的なプログラミングを学んだ方にイチオシ言語! Hana道場に通う、IchigoJamでプログラミングに慣れた中学1年生、バリバリ活用してますよ!


地域ICTクラブ オンラインシンポジウム2021 | Peatix
総務省の「地域ICTクラブ」の活動報告へのコメンテーターとして参加しました。 地域のIT力を高めるためにはじめること。もっともっとシンプルにデータをまとめる必要を感じました。

百聞くより一行動。まずはやってみるのがオススメです!

IchigoJam web」を開くか、手元の「IchigoJam」と合わせてご覧ください!

jigインターン2021冬、Dチームの作品「BazUp!!」は、誰でもバズリ体験できるサービス。 画像、タイトル、文章を入れると勝手にバズったように見せてくれ、通知止まらない状態を体験できます!


forked BizUp!! on GitHub
登録後の自動遷移とローカル通知を加えてプルリク、APIサーバーなしに起動するバージョンを試作しました。 ogpを取得してどんなどんなページでも仮想バズして、そのページ自体をシェアできるとおもしろいかも?


使用技術は、Nuxt.jsServer.js。 開発期間は2日間、アイデアから、実装、発表まで、ここまで仕上げて来ているのはすごい!

楽しいチーム開発、学びも多く、オススメです!

2日間のDeno勉強会付きハッカソン型インターン「jigインターン2021冬」では、過去最多の18名参加、5チームの作品ができました。

テーマは「学生xバズる」、快適な学生生活には推し配信者を持つことがいいみたい。YouTubeのプレイリストに目をつけ、共有できるAチームのプロトタイプ「切り抜きまとめサイト(仮)」、 社員投票によう優勝プラン!

切り抜きまとめサイト(仮) - 鯖江バージョン」(src on GitHub)
YouTube Data APIを使って、プレイリストから動画リストを取得して、使いやすく横スクロール表示を使ったスマホ対応で表示してくれます。

ユーザー毎の保存はできないので、ひとまず保存機能が効かない状態でアップしています。サーバーとフロント、それぞれシンプルなJavaScriptでできているので、ぜひ自分の手で動かしてみてください。

YouTube Data APIが、フロントエンドから呼び出されていたものをバックエンド側へもっていくなど、調整してみました。(プルリク


プレゼンもよかった!


2日間、おつかれさま!
どんどん作っていきましょう!


2月最後の金曜日、プレミアムフライデーを勝手に引き継ぐサイバーフライデー in 鯖江商工会議所地下!
勉強会や、ワークショップ、セグウェイを使った移動にも最適!

春のオンラインjigインターンスタート!集まってくれた18名、アイスブレイク&LTの後は勉強会。 サクッとWebアプリづくりの基本を学んで、いざ開発へ!今回のインターン期間は2日間のハッカソンスタイル、楽しくいきましょう!
事前に送った開封厳禁「jigボックス」中身のひとつ、鯖江の銘菓、眼鏡堅パン


下記、順にたどっていくだけで、作れます。(要、コマンドプロンプト or ターミナルの知識)
introweb src on GitHub



Denoをイントール!」




Server.js」で簡単サーバー起動! powered by Servest

$ deno run -A --watch --unstable server.js

更新を確認して、自動リロードしてくれるオプションを使うと更に便利!
Deno の組み込み機能、ソースコードの変更を検知してオートリロードする "File Watcher" の紹介


















さぁ、これでみなさんもwebエンジニア!

2021.2.26(金)18:30- Cyber Friday @ 鯖江商工会議所(E3792198838339) 地下1Fにて!
コンピューター好きな方、ぜひどうぞ!

links
- introweb src on GitHub

無線LANでつないで楽しい、IchigoJamとパソコン。
MixJuiceとパソコン上で作るウェブサーバーをつないでみましょう!

まずはサーバープログラムの準備。JavaScriptでプログラムする環境、Deno(ディーノ)をインストールします。
Windowsの人は、PowerShellを起動して次のコマンドを実行

iwr https://deno.land/x/install/install.ps1 -useb | iex

Macの人は、ターミナルを起動して次のコマンドを実行

curl -fsSL https://deno.land/x/install/install.sh | sh

コマンドプロンプトや、ターミナルで deno とタイプ、エンターで次のような画面がでたらインストール成功!

Deno 1.7.2 exit using ctrl+d or close() >

Ctrl+d で Deno を終了し、ウェブサイドプログラムづくり hello.js (serveWebの中身はservest)
Windowsの人(書き終わったら Ctrl+Z、エンター)

copy con hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

Macの人(書き終わったら Ctrl+D、1行目以外は一緒です)

cat > hello.js import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "hello!"; });

動かしましょう

deno run -A hello.js

ブラウザで http://localhost/ を開くと、hello! と表示されるはずです。
Ctrl+C でサーバープログラムを止めて、hello.js の文字列を好きな文字に変更して、また動かして確認しましょう。

次に IchigoJam web を使ったパソコン上での実験です。

「I/O」ボタンを押し「MixJuice」をチェックして、バーチャルMixJuiceをIchigoJam webに接続します。

IchigoJam web上でMixJuiceのコマンドを使って、アクセスしてみます。

?"MJ GET LOCALHOST MJ GET LOCALHOST OK hello!

などと表示されたら成功です。つながりました!

ひとまず、シンプルなサーバーにどんどん書き込めるチャットサービスを作ってみましょう。

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; let data = ""; serveWeb(80, (from, path, query) => { if (query) { data = data + "'" + query + "\r\n"; return "'OK\r\n"; } return data; });

IchigoJamからquery(クエリー)として送られてくる文字列をどんどん足し算して貯め、クエリーなしで全部表示する、というJavaScriptのプログラムです。 なんとなく読めますね?

このサーバーを動かしておき、IchigoJam web から試してみましょう。

?"MJ GET LOCALHOST/?HI! ?"MJ GET LOCALHOST/?HELLO ?"MJ GET LOCALHOST/

クエッションマーク(?)に続く文字列がサーバーでクエリーとして送られます。発言内容、見えましたか?

最後に、実IchigoJam+MixJuiceからつないでみましょう!

インターネットにつながるコンピューターには、IPアドレスが振られます。192.168.や172.で始まる4つの数字、普通の家ではローカルエリアネットワーク(LAN)用のIPアドレスが振られていることが多いです。 まずは自分のパソコンのIPアドレスを確認します。
Windowsの人

ipconfig

Macの人

ifconfig

192や172で始まるIPアドレスらしきものを探してください。

MixJuiceをつないだIchigoJamで、MJ APCを使ってアクセスポイントに接続して、次のようなコマンドで通信!

?"MJ GET 192.168.1.10

つながりましたか?

サーバーで二乗するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.pow(parseFloat(query), 2); });

サーバーでルートを計算するプログラム

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { return "" + Math.sqrt(parseFloat(query)); });

そのフォルダを開いちゃうプログラム(コマンド起動)

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { const open = Deno.build.os == "darwin" ? "open" : "start"; Deno.run({ cmd: [open, "."] }); return open; });

どの端末からアクセスがあったか、どういうクエリーか見たいとき

import { serveWeb } from "https://js.sabae.cc/serveWeb.js"; serveWeb(80, (from, path, query) => { console.log(from, path, query); return "ok"; });

IchigoJamからパソコンコントロールし放題。
DenoやJavaScriptを調べて、いろいろ遊んでみましょう!

コンソール(コマンドプロンプトやターミナル)に慣れていない人は、まずはこちらなどを参考に!
コンピューターと深く話そう! Macのターミナル入門とNode.jsでつくるwebサービスはじめのいっぽ

山梨県オープンデータ研修にて紹介した、オープンデータは自由に使えるデータ、活用編です。 公開されているオープンデータが使いにくいなら使いやすくしちゃえばいいんです!
特選やまなしの食 オープンデータ


山梨県オープンデータ検索」にて、アプリで使いやすいCSV形式で検索してみます。


18件ヒットしました。


一番トップに表示された「特選やまなしの食オープンデータ」画像ファイルもあっていい感じ!


早速、CSVデータをwebアプリから取得しようとしてみると、違うドメインからのアクセスが許可されていないのでエラーがでてしまいます(CORSエラー)。 webアプリからのアクセスを歓迎するのであれば、HTTPヘッダーに下記のような設定を加えます。

Access-Control-Allow-Origin: *

加えてほしいとお願いしてみるのも手ですが、再配布もOKなオープンデータなので、GitHubにコピーして使うことにします(GitHub Pagesは、上記ヘッダーがつけてくれます)。 また、文字コードがSJISなので使いやすいUTF-8変換し、せっかくのステキ写真のURLの記載がCSVデータにない点も、こちらも加工して追記します。

まずはダウンロード (donload.js JavaScript/Deno)

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; const csv = await CSV.fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/documents/yamanashinoshoku.csv"); console.log(csv); await Deno.writeTextFile("yamanashinoshoku.csv", CSV.encode(csv)); const html = await (await fetch("https://www.pref.yamanashi.jp/shokuhin-st/shokuiku/yamanashinoshoku_tokusen47_od.html")).text(); console.log(html); await Deno.writeTextFile("yamanashinoshoku.html", html);


続いて、node-html-parserのDeno版を使って、画像ファイル名一覧取得。

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; import HTMLParser from "https://dev.jspm.io/node-html-parser"; const fn = "yamanashinoshoku.html"; const html = await Deno.readTextFile(fn); const root = HTMLParser.parse(html); const links = root.querySelectorAll("a"); for (const link of links) { const href = link.attributes.href; const txt = link.text.trim(); console.log(href, txt); }

写真をダウンロードして、URLをセットしなおして、できあがり!
yamanashinoshoku3.csv


特選やまなしの食 オープンデータ
ひとまずシンプルなサンプルとして、食べ方リンクがある画像だけを表示する、山梨の特選を目で楽しむアプリのできあがり!

import { CSV } from "https://code4sabae.github.io/js/CSV.js"; window.onload = async () => { const csv = await CSV.fetch("https://code4sabae.github.io/yamanashinoshoku/yamanashinoshoku3.csv"); const data = CSV.toJSON(csv); for (const d of data) { const img = new Image(); img.src = d["写真URL"]; const url = d["「食べられる・買えるお店」URL"]; if (url.length > 0) { img.style.cursor = "pointer"; img.url = url; img.onclick = function() { window.open(this.url, "_blank"); }; main.appendChild(img); // リンク付きだけ表示 } // main.appendChild(img); // 全部表示 } };

いろいろ改造して、ステキなアプリづくりにチャレンジしてみましょう!
→ 2020.01.24 デザイン改善版、公開

links
- ウェブサイトに一文追記すればOK! オープンデータのはじめかた

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