福野泰介の一日一創 - create every day

G空間ハッカーはじめのいっぽ「Geospatial Hackers Program | Peatix
福井会場の1日目は、サンドーム福井のものづくりキャンパス


40名もの参加者、みんなでつくろう地図アプリ!


Chromeじゃないと動かなかったり、コピペの貼り付け場所が分からなかったり、いろいろありましたが、それぞれの地図アプリできました!
Forks · code4fukui/egmapjs


かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド (PDF)
分かりづらかった点など、ブラッシュアップしました。
地図アプリのページ、下にQRコードを出したので、すぐにスマホで確認できますよ!
誰かに教えるのも簡単、自分だけの地図アプリ、自慢しちゃいましょう。


SPARQLを使ったサンプル位置ゲーム「消火栓へゴー」とすぐにお試し「チュートリアル
こちらを元にあれこれ改造するのもいいですね!

文書を編集するHTML、プログラムをつくるJavaScript、デザイン変更CSS、データを取得するためのSPARQL。
用途に合わせて登場する、4種類のコンピューター言語、興味があるものから、ひとつずつ遊んでみると良いですよ!

links
- egmapjs

福井高専テスト明け、IT研究会でミニLT会!

トップバッター福井高専IT研 部長による「C++でゲームを作ってみた」


VRとシェーダーとUnityのススメ
こちらGitHubにC#のプログラム、VR空間で撃ってターゲットを破壊するコードもとってもシンプル!
VRアプリは意外と簡単、部費でVR機材、買っちゃう!?


世界征服が夢の高専生が部活を征服する話 / I wanna dominate this world - Speaker Deck
スペシャルゲスト、山口県宇部高専のG空間ハッカー、コンピューター部部長のはすみんのLT
高専IT系部活のありかたのディスカッション、もりあがりました!


kirakir - egarjs sample
(書籍はIchigoJamとの接続も掲載、超特急Web接続!ESPマイコン・プログラム全集
簡単にできてテンションあがるARアプリ、かんたんフレームワーク化しました。#jigjs 第6段!


egarjs」こちらのQRコードをスマホで読み取ってお試しください!


さまざまな解像度があるPC、スマホに簡単に対応できるよう、座標系として真ん中を(500,500)とした 1000x1000 の正方形を採用(sg-game.jsと同様)

例えば、左上から右下へ線を引きたかったら

g.drawLine(0, 0, 1000, 1000)

まんなかに円を描きたかったら

g.fillCircle(500, 500, 10)

など、とってもシンプル!

ミニLT「ARアプリをつくろう」でデモした、色がみえるアプリ iromieru はこちら


福井高専メディア研究会のFMラジオ番組「高専ライブ」の収録
コミュニティFMラジオ放送局、たんなん夢レディオは福井高専の一期生が創設!


ものづくり好きネットワーク、宇部高専x福井高専x石川高専!
高専生と、地域のものづくり好きな子供や大人たちとつながる場、Hana道場も見学。

福井高専に入学した時、電子情報工学科では全員SHARPのポケコンPCG-805を買うこととなってました。

BASICでプログラミングできる、ちょっと大きな関数電卓。テストに持ち込めないので結局関数電卓も買う羽目になりましたが、運命を変えるほどの大活躍。 当時持っていたMSXと接続してゲームをクロス開発し、ケーブルを使ったローカルネットワーク転送で高専のクラスの友達に配布は、モバイルアプリサービスの原点です。

現代で言う、クラス全員スマホを持っているような状況。今ならきっとスマホのアプリを作って配布したいはず。

そこで、JavaScriptかんたんフレームワークです!

重たい開発環境は一切不要で、数行から書き始めることができ、GitHub pagesを使えば、クラス内はもちろん世界中の人に見てもらうことだって可能です。

こちら、PCスマホタブレット対応、かんたんフレームワーク jigjsシリーズ(ちょっとしたjsの治具)
- 正方形ゲームフレームワーク - sq-game.js
- デジタル万華鏡フレームワーク - websarasa.js
- 4択クイズフレームワーク - q4js
- 地図フレームワーク - egmapjs
- 時計フレームワーク - egclockjs

新作、時計フレームワーク「egclockjs」は、プログラミングでちょっとしたものづくりをより簡単にします!

simple analog clock - egclockjssrc on GitHub
秒で変化する色相を使った sin/cos 三角関数を使った定番、アナログ時計。
1秒で1回転するミリ秒針がワンポイント!


simple digital clock - egclockjssrc on GitHub
シンプルに文字で時計を表し、背景が1秒を表現する。
fixnum は、指定した桁数で0埋めする関数。

IchigoJamでプログラミングの学び方のコツをつかんでいたなら、スマホで動くアプリづくりもすっと取り組めるはず。
何か困ったことがあれば、Twitterで #jigjs ハッシュタクで質問ください!

地理院地図を使ったハンズオンチュートリアルを公開したところ、オープンデータ伝道師のイスマイルさんより、OSMは?と入電あり。

OSM(オープンストリートマップ)は、無料で使える地図データ。ただし、タイル(地図を画像状にしたもの)データ提供サーバーを使ったアプリとしての利用は不可。 ただ、同じ形式の地理院地図 x leafletjs ならOKと気が付き、機能はばっさり削ったシンプル版でいいことに気がつきました。

leaflet x 地理院地図を使った薄いフレームワーク「egmapjs」と、活用例アプリ「Hana道場はどこ?」を作成。


Hana道場はどこ?」 徐々に拡大していきます(動かしたら、オートスクロールは停止)
クリックしたら、Hana道場のページを開きます。
ソース on GitHub


はじまりは日本全体から! zoom = 4


色味は前回同様ちょっと補正していい感じに! zoom = 13


ハンズオン資料も書き換える予定! zoom = 17

links
- Hana道場はどこ? - leafletjs x 地理院地図 (src on GitHub)
- Documentation - Leaflet - a JavaScript library for interactive maps
- 地理院地図|地理院タイル一覧 (出展リンク先)
- JA:タイル利用規約 - OpenStreetMap Wiki

学習を簡単にゲームっぽく楽しくする手法、クイズ。
シンプルなJavaScriptの4択クイズフレームワーク「q4js」を作りました。


クイズ Ichigo Q - q4js」

特徴は、CSSを使った、そこそこデザインとマルチプラットフォーム対応なレスポンシブ対応。
縦長スマホからタブレットや大画面PC、iframeによる埋め込みまで対応したシンプルなコード、ぜひ改造元として活用ください。

Chromeの開発ツールのこのボタンを押すと、いろんな大きさをデバッグできます。

横長から

縦長まで、どんな大きさでもOK!

こちらがメインのjsプログラム。タイトルや、問題文、クリア後の処理を startQuiz に渡すだけ!
まずは、単にクイズを追加、変更するところから始めましょう。
CSSをのぞいて、色を変えてみるのもいいですね。

<!DOCTYPE html><html><head><meta charset="utf-8"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="viewport" content="width=device-width"/> <title>クイズ Ichigo Q - q4.js</title> <meta property="og:image" content="q4js.png"/> <link rel="apple-touch-icon" href="q4js.png"/> <link rel="stylesheet" type="text/css" href="q4js.css"/> <script src=fukuno.js></script> <script src=q4.js></script> <script>"use strict" window.onload = function() { // タイトル var title = "クイズ Ichigo Q" // 問題文、正解、誤答3つ以上いくつでも var quiz = [ [ "IchigoJamでLEDをつけるには?", "LED1", "LED0", "PRINT1", "CLS", "LED" ], [ "IchigoJamの誕生日は?", "4/1", "1/5", "10/15", "10/10", "1/1", "12/31" ], [ "PEEKコマンドと同じ働きをするコマンドは?", "ASC", "CHR$", "STR$", "POKE", "CLS" ], [ "複雑すぎる式を実行しようとしてでるエラーは?", "Complex expression", "Syntax error", "Out of memory", "Too long", "Illegal argument", ], [ "IchigoJamのプログラムで使える最大サイズは?", "1024byte", "512byte", "4KB", "32KB", "1000文字", "100文字" ], [ "ALT+Cででるキャラクターは?", "ネコ", "イヌ", "宇宙人", "ハート", "宝箱" ], [ "PRINTコマンドの省略形は?", "?", "PRT", "println", "print", "P" ], [ "LCとは何の略?", "LOCATE", "LLC", "LOCATION", "LOCALIZE", "LLC" ], [ "変数の最大値は?", "32767", "32768", "255", "65535", "30000", "1024" ], [ "IchigoJamの名前の由来は?", "1,500円", "15,000円", "福井の特産物", "開発者の誕生日", "CPUの型番" ], ] // クリアした時 var callback = function() { // 即、ジャンプしたい場合はこちら // location = "https://fukuno.jig.jp/2355" // ダイアログ形式で尋ねたい場合はこちら if (confirm("クイズフレームワーク q4.js についてくわしく知りたい")) { location = "https://fukuno.jig.jp/2355" } else if (confirm("こどもIchigoJamについて詳しく知りたい")) { location = "https://ichigojam.net/" } else if (confirm("もういちど?")) { location.reload() } } // クイズスタート startQuiz(title, quiz, callback) } </script> </head><body> <div id=head>第1問</div> <div id=main> <!--<div id=ind class=indcorrect></div>--> <div id=ind class=indcorrect>正解</div> <!--<div id=ind class=indincorrect>不正解</div>--> <div id=q>魁のよみは?</div> <div id=ans> <div id=ans1>さきかけ</div> <div class=correct id=ans2>さきがけ</div> <div id=ans3>ささき</div> <div class=disable id=ans4>がけがけ</div> </div> </div> <div id=credit> <a href=https://fukuno.jig.jp/2355>CC BY fukuno.jig.jp - 4択クイズアプリ framework q4.js</a> </div> </body></html>

HTML、必要な要素を構造化して記述。
JavaScript、シンプルに呼び出すだけ。startQuiz のプログラムも64行と短い!(see q4.js)
CSS、画面幅や高さを100とするvwやvhをレイアウトやフォントの大きさの単位として使い、media query の min-aspect-ratio を使って、入れたい文字数を確保するのがポイントです。(see q4js.css
q4js.zip - まとめてダウンロード ZIP)

石川高専が先生を務めたIchigoJamプログラミング体験@津幡町まちなか科学館で発見、巨大な万華鏡に触発されて、webで動く万華鏡JSフレームワーク「websarasa.js」を開発!11月末締切、何かが当たる更紗眼鏡コンテストを開催!

goals17 / websarasa.js
SDGsカラーのアプリ「goals17」をカレイドスコープ化!
タップ or クリックするごとにパラメータが変わります。
プログラムはGitHubにあって、ライセンスは CC BY のオープンデータなので自由に改造できます。

3ステップで動かせる、websarasa.js 簡単チュートリアル

1. 好きなテキストエディタ(メモ帳でもOK)でつぎのコードをコピペ

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>websarasa.js</title> <script src="https://taisukef.github.io/websarasa/websarasa.js"></script> <script>"use strict"; var main = function(scr) { scr.loop = function(g, ts, dt, vw) { // 背景 g.setColor(255, 255, 255); g.fillRect(0, 0, 1000, 1000); // 赤い動く丸 var x = 500 + 80 + Math.sin(ts / 200) * 80; var y = 500 - 50; g.setColor(255, 0, 0); g.fillCircle(x, y, 60); }; }; </script> </head><html>

2. simple.html などと、拡張子.htmlで、名前をつけて保存
3. Chromeなどのブラウザで開く!(動く!タップするとデバッグモード

websarasa.js リファレンス

var main にセットされた関数が呼び出す main に渡される scr の loop にセットされた関数で万華鏡のように描画 * 他は、JavaScriptに準拠する g.setColor(r, g, b); // 色変更 g.drawLine(x1, y1, x2, y2); // 線を引く g.drawRect(x, y, w, h); // 四角を描く g.fillRect(x, y, w, h); // 四角で塗りつぶす g.drawCircle(x, y, r); // 丸を描く g.fillCircle(x, y, r); // 丸で塗りつぶす

#websarasa コンテスト応募方法

1. GitHubアカウントをつくる(もうもっていれば不要)
2. websarasa.js を Fork する(Forkボタン、押すだけ!)
3. Forkした(コピーした)サンプルをベースに、オリジナルの更紗眼鏡(万華鏡の別名)をつくる
4. 作品のURLと作者名を index.html に加えるプルリクを送る(2018.11.30締切)
5. 優秀作品として選ばれたら、何かを受け取る!(連絡は メールや、Twitter DM などを想定)

高専生の挑戦、求む!(もちろん中高校大学生、大人でもOKです)

links
- websarasa.js - kaleidoscope on web
- つなごう高専IT部、沖縄高専で情報セキュリティ実習&ICT委員会訪問、PCN美ら爆誕!
- 高専生が審査する小中学生プロコンいいかも!? 大人も子供も高専生もみんなで研修、IoT with PCN仙台
- 高専生が伝える小学生プログラミング at スゴイ津幡町まちなか科学館、高専生先生の意気込み&感想動画 / KidsVenture x 石川高専

4Kや8K、映像の進化は画面解像度だけでなく、時間解像度も進化してました。
通常、秒間60回、60Hzで更新される画面、なんと4倍の240Hzにも達しています。(実験では480Hzも!)

レースゲームなど、動きが激しいアクションゲームでのフレームレートはとても大事。
処理が重たいゲームで30fps(frame per second、秒間更新回数)なものは、操作の遅れが最大33ミリ秒(1秒/30)発生し、見た目にもカクカクぎこちなく見えて幻滅です。

初代ファミコンも60fps(正確には59.97fps?)のなめらかなでクイックな反応が楽しい。ゲームによっては敵が多く出すぎて「処理落ち」と呼ばれるフレームレートの低下も当時でも、よく知られた現象でした。

そんな重要な要素、フレームレートが4倍にもなった世界、ゲームに限らず未来を感じます。ブラウザ上でも手軽に実験できそうなので、JS用かんたんゲームフレーム「sg-game.js」を作って、その実現の時を待つことにしました。

サンプルアプリ「FPSChecker」は、その環境でのリフレッシュレートを表示しながら、ぐるぐる色を自身の角度を色相としながら回る円、タップまたはクリックするほどに回転周波数が変わります。 10Hzにしたときに残像で見える円の数、通常の環境では6ですが、12コ、14コ、24コと増えるはず。(480Hz環境なら48コ!)


FPSChecker」(スクリーンショットは60fps環境を模したもの)

IO-DATA製24.5インチ240Hz対応モニター「KH2500V-ZX2」を買って試してみます!
(「EX-LDGC251UTB」と同じ仕様のパッケージ違い)

今回、新設した正方形ゲーム用シンプルフレームワーク「sg-game.js」、ゲームづくりに、JavaScript言語によるプログラミング学習に、活用ください。


こちら、最小サンプル「min.html」をコピペし、min.htmlとして保存、ブラウザで開けば動きます!
PC、iPhone、iPad、Android、いずれもOK!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>min</title> <script src="https://taisukef.github.io/sq-game/sq-game-r1.js"></script> <script>"use strict"; var gamemain = function(game) { game.loop = function(g, ts, dt, vw) { g.setColor(255, 0, 0); g.fillCircle(500, 500, ts % 1000); }; }; </script> </head></html>

正方形ゲーム専用フレームワーク sq-game.js の使い方
- gamemain メソッドをつくる
- 受け取った、game オブジェクトに 描画用ループ loop メソッドを設定する
- g は canvas、ts は時間、dt は時間差分、vw はバーチャル幅と高さ1000
- 必要なら、タップされた時の操作用に tap メソッドを設定する

こちらが、sg-game.js を使った、上記、FPSCheckerのプログラム!

<!DOCTYPE html><html><head><meta charset='utf-8'/> <title>FPSChecker</title> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta property="og:image" content="ss.png"/> <link rel="apple-touch-icon" href="icon.png"/> <script src="sq-game-r1.js"></script> <script>'use strict'; var gamemain = function(game) { game.tap = function() { if (hz == 10) hz = 0.1; else if (hz < 0.95) hz += 0.1; else hz++; }; var hz = 1; var th = 0; game.loop = function(g, ts, dt, vw) { g.setColor(0, 0, 0); var fh = 60; g.setFontSize(fh); var s = "" + fixfloat(hz + 0.05, 1) + "Hz"; g.fillText(s, 10, 10 + fh); var s = "FPS: " + Math.floor(1000 / dt) + " / " + fixfloat(dt, 2) + "ms"; g.fillText(s, vw - g.measureText(s).width - 20, 10 + fh); th += dt / 1000 * Math.PI * 2 * hz; var r = vw / 4; var x = vw / 2 + Math.cos(th) * r; var y = vw / 2 + Math.sin(th) * r; var cr = 90; var rgb = hsv2rgb(th / (Math.PI * 2) * 360 + 90, 0.8, 0.8); g.setColor(rgb[0], rgb[1], rgb[2]); g.fillCircle(x, y, cr); g.setColor(255, 255, 255); var fh = 80; g.setFontSize(fh); var s = "" + fixfloat(hz, 1); g.fillText(s, x - g.measureText(s).width / 2, y + fh / 4); }; }; </script> <style> a { color: gray !important; } </style> </head> <body> <div id="src"> FPSChecker<br> APP: CC BY <a href=http://fukuno.jig.jp/1686 target=_blank>fukuno.jig.jp</a><br> LIB: CC BY <a href=sq-game-r1.js target=_blank>sq-game.js</a><br> </div> </body> </html>

ちなみに、映画のフレームレートは秒間24コマ、CGはきれいになってもなかなか変わりませんね。
8Kで秒間240コマの映画とか、未知の体験も楽しみです。

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