毎日創って毎日公開「一日一創」を掲げた2012年元日。うるう年、計366のwebアプリが誕生。作りきった達成感は良い自信になりました。 宣言時に終了条件を入れ忘れたので、そのまま今まで続いています。

2013年からはブログという形に変更。気がかりだった2012年製アプリ達を、この度ブログへ統合完了!現時点で3,533記事となりました。

一日一創100アプリ達成記念
一日一創のはじまり「一日一創カレンダー


福野泰介の一日一創一覧
ced2012タグで、検索も可能!

次は、古くてうまく動いていないものや、APIが停止しているものなのなど、ちょっとずつメンテナンスしていきます。

一覧XMLを使った一覧取得、HTML取得、パース、XML化などのJavaScript/Denoの変換プログラムは下記にコミット済み。参考にどうぞ。
taisukef/fukunojigjp

仕事としてのwebアプリ開発に興味ある方。
webアプリ開発入門勉強会&会社説明会、開催します!
プログラミングは好きだけど、サーバーを使ったwebアプリはちょっと敷居が高くてやってみるきっかけがない人などにオススメです。

配列とは、初歩的なプログラミング用語、BASICやJavaScriptなど、ほぼすべてのプログラミング言語にある基本的なデータ構造。数などのデータが順番に並んだものです。

色をデータにする代表的な方法が、RGB、光の三原色、赤(RED)、緑(GREEN)、青(BLUE)の強さという数3つで表せます。長さ3の配列として処理することができます。

画像は色の配列で表せます。横と縦、共に1,000画素あれば100万コ長さを持ったの色データの配列。人間にとって100万コは膨大ですが、現代のコンピューターには取るに足らない量ですね。(IchigoJamの100円CPUですら1秒間に5,000万回、計算)

横80縦45、たった3,600画素しかない PanCake は、画像というデータ構造と遊びながら理解を深めるのにちょうどいいプラットフォーム。 IchigoJamにちょっと慣れた人にオススメです。

先日、開発再開した PanCake webCC BY-NC で公開されている背景画像や8x8のかわいいスプライトの表示に対応しました!


PanCake web」(src on GitHub)

JavaScriptからも下記のように使えますし、IchigoJamでのPRINT表記でブラウザ上から遊べます。
ゲームづくり便利な再描画などを自動化してくれるスプライト機能にも対応したいところです。

作れば作るほど作りたくなるものづくり、楽しい底なし沼です。

バーチャル鯖江プロジェクトの一環、ドローン撮影テスト。許可いただきめがね会館を撮影


VR-megane-kaikan VRめがね会館」(src on GitHub)
PC、スマホ、VRでぐるぐる見渡せます。めがね会館前の上空。VR写真をボタンひとつで撮影できるのは便利! 鯖江市上空を辿るバーチャルトリップアプリ化するのも楽しそう。


こういう写真を合成してくれます。元解像度のデータはGitHubで取得してみてください。

めがね会館を撮影(協力、福井県眼鏡協会(ふくいけんがんきょうきょうかい)鯖江SDGs推進センター


めがね会館近くのjig.jp新社屋予定場所にて、上限上空150mまでの旅。ジャンプ力100倍を体験するVRアプリづくりも楽しそう。


150m上空から真下を撮影。


150m上空からの広角撮影。


めがね会館、この視点での撮影は初!?


めがね会館とリニューアルした文化センター。

上記動画、静止画、アプリもすべて、CC BY Code for Fukui のオープンデータ。いろいろご活用ください!楽しく使えるアイデアもぜひお寄せください!

JavaScriptとHTMLだけでつくるVRアプリ、上記アプリもただ画像を指定するだけ簡単。興味ある方、VRはじめのいっぽをどうぞ!

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <html> <head> <meta charset="utf-8"> <title>VR-megane-kaikan VRめがね会館</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://code4fukui.github.io/vr-megane-kaikan/Photo_6553700_DJI_100_pano_42713392_0_20214782526_photo_pano.JPG" rotation="0 -90 0"></a-sky> </a-scene> </body> </html>

上記ファイルを手元で live-server などwebサーバーを使えば動きます。rotationをいじってみるとおもしろいですよ!

links
- HTMLで創るVR、A-Frameはじめのいっぽ

IchigoJamでカラーが楽しめる拡張ボード「PanCake」をブラウザ上でエミュレートする PanCake web プロジェクトスタート!


PanCake web
まずは単一カラーでのクリアと、点を置く、線を引く機能の実装と、ESモジュール化、ns-pancake HTML拡張タグ化を完了。

<html> <body> <script type="module" src="https://ichigojam.github.io/ns-pancake/pancake.mjs"></script> <ns-pancake id="pancake"></ns-pancake> <script type="module"> const pw = 80; const ph = 45; const rnd = (n) => Math.random() * n >> 0; // pancake test setInterval(() => { pancake.clear(); for (let i = 0; i < 100; i++) { pancake.line(pw / 2, ph / 2, rnd(pw), rnd(ph), rnd(16)); pancake.pset(rnd(pw), rnd(ph), rnd(16)); } }, 500); </script> </body> </html>

こんな感じで、ブラウザでかんたんなJavaScriptのプログラムと共にかわいいグラフィクスが埋め込めます。

ライセンスは、CC BY-NC、非営利であれば自由に拡張できます。コントリビュートも歓迎です!
IchigoJam/ns-pancake on GitHub

links
- ネットワークで楽しさ広がるIchigoJam!! こどもグラフィックボード「PanCake」をエミュレート!

毎年この時期深夜に放送、視聴者参加型生放送「県民おしゃべり じゃみじゃみ(仮) by 福井テレビ」にて一日一創生まれのプロダクト「コメント.net」が活躍!


今年のゲストは、福井県坂井市出身、元モーニング娘の高橋愛さん!


パーソナリティー、若新!


ガラケー時代、どうしても都合で現地参加できなった高専での講演で、QRコードを出してメールでの質問を募集したところ、かつてないくらいのキャリアメールの嵐が来て驚いた経験と、若新ニーズから生まれたリアルタイムコメントシステム「コメント.net」。

ちょっと遠い世界なテレビ業界が、匿名で気軽に使えるシンプルなコメントでぐっと身近に感じられ、生放送を多元的に楽しめます。


台本なしの生放送、番組の流れはコメント次第。放送局側のドキドキ感とワクワク感が伝わってくる現場。


あっという間の1時間。高橋愛さん、素朴だけど芯が強い!福井弁と相まって、2000年代に福井を全国に広めた立役者!


高橋愛lab。 - YouTube
オフィシャルブログが「I am AI.」だったり、labだったり、いちごだったり、エンジニアっぽさありますね!


「じゃみじゃみメンバー」
メディアも業界も超えてオール福井で盛り上がる生放送、年一回と言わず、じゃんじゃんチャレンジしましょう! (ネット生配信する弊社サービス、ふわっちとのコラボもぜひ)

あっと言う間に最終日を迎えた、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 で、自分でブログを作りたい人、参考になるかもしれません。

鯖江商工会議所のDX委員会が新たに誕生します。 DX、デジタルトランスフォーメーションとは、デジタルを活用したデジタル技術を活用して、事業モデルを創出できたこと、また、柔軟に対応する体制ができた状態を指すとのこと。 幼虫・サナギから、成虫へのトランスフォーメーションが始まります。

鯖江市役所も新体制、オープンデータへの取り組みと共に名前が変わった情報統計課から、デジタル推進課へ。新しいフェーズへと入ります。

佐々木市長、中村副市長へ、京都大学、出口先生、坂出先生、コネクトフリー社帝都久利寿氏と共に未来談義。


サイバー空間において見直される自分の証、ハンコ。 シヤチハタ製「QRコードハンコ」からデジタルを活用する新しい世界が見えてきました。


誰一人取り残さないSDGs、その達成にはデジタル技術の活用は欠かせません。SDGsが達成し、維持され続ける世界こそDXが達成した社会の姿。 デジタル時代を担うこどもたちや、大人をサポートする、Hana道場にて。


BrailleBeat tester」(src on GitHub)
こちら、学生に披露してもらった点字をモチーフにした音ゲー「BrailleBeat」からインスパイアされ、音ゲー好きな学生のための参考作品にと作ったJavaScriptバージョン! 濁音、半濁音、拗音(ようおん)を表す3点を加えた3x3のマスにしたアイデアがナイス!

曲と共に譜面が表示されます(当たり判定はまだありません)。曲は防衛省海上自衛隊東京音楽隊のオープンデータ「国歌「君が代」について」を使用。 オープンデータな曲と、歌詞データ、初音ミクとTextAliveもうまく使えるかも?(音楽とプログラミングとコンピューターグラフィクス! TextAliveのテンプレートを使ってみよう


市長室隣の応接室に飾られた前市長、牧野さんの肖像画と。牧野さんが15年前、ここに誘ってくれたのが始まりでした。
みんなで創ろう、世界の鯖江!

すべてのこどもたちにプログラミングを!
PCN主催、11回目の小中学生向けプログラミングコンテスト「PCNこどもプロコン2021」の表彰式。応募総数282点、海外からも12点の作品が集まり実質世界大会!

チャレンジしてくれたこどもたち、ありがとう!受賞した人、おめでとう!受賞しなかった人も、受賞した人の技を盗んで次にチャレンジ!

PCNこどもプロコン2021表彰式ライブ映像」(録画、2021.3.27 追記)


IchigoJam賞は、おしえて!アイチャン!
障害物との距離を音で教えてくれるアイチャンを頼りに、障害物を避けて進むゲーム!
両目が見えなくなった家族の声をきっかけにまずはゲームづくり。勉強して実用的なものにもチャレンジしたいとのこと!
副賞として、勉強用の図書券5,000円と、新たなデバイスづくりに活かせるIchigoJamハーフキット
IchigoJam readnspeak もぜひ参考に)


神山まるごと高専賞


高専機構賞、谷口理事長、ご参加ありがとうございました!
小中学絵師にいいところ見せたい高専生向け、インターンで腕磨こう!


ラズベリーパイ財団賞には創始者、エベン・アプトンからメッセージ!
BASICで育ったEbenとは同い年!こどもプログラミングを伝える同士!


アイ・オー・データ機器賞


細野会長からのメッセージ!


自分で作ったロボット、コロちゃんと共に受賞の喜びを伝えてくれました!


最優秀賞 The color picker、おめでとう!

今回も多数提供した副賞のノートパソコン。ScratchやIchigoJamで学んだ子たちは、ぜひステップアップにもチャレンジしてほしい!

Scratch、IchigoJam,JavaScript(Deno)で人類最古のアルゴリズムと言われる最大公約数を求めるユークリッドの互除法を実装する様子。(Scratch, IchigoJam BASIC, JavaScript(Deno), C言語

緯度経度の新表現、Geo3x3が対応するプログラミング言語数は、今回Scratchにも対応して69。 用途に合わせていろいろなプログラムがあります。ぴったりの言語を探してみよう!


次回もやるよ!とPCN代表、松田さん、閉会の挨拶。


参加してくれたこどもたち同士の交流の場、創りたい!

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