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

IchigoJam 誕生5周年に感謝して、オール鯖江コラボでイチゴ焼!

Special Thanks: 三六商店さん、うちのぶどうさん、福岡農園さん、田中眼鏡さん


こちら採れたて、鯖江産イチゴ by 福岡農園!(めがね会館から車で1分)


期間限定、人数限定、鯖江で唯一のイチゴ狩りができたり、夏には採れたて野菜の自動販売もあり!


イチゴジャムにしていただいた、みやもとぶどう園「うちのぶどう」さん!


ふわっふわのサクラ風味のシフォンケーキもおいしいお店!
鯖江市下新庄町55-34-1、道路沿い(土日限定営業)


そして、鯖江のソウルフード、三六サラダ焼!三六商店社長と!
みなさま、コラボへのご賛同、ありがとうございます!!


サラダ焼、イチゴ焼の焼いている様子と珍しい焼印シーン。


この焼印、クラウドファンディングでゲットした、IchigoJam オリジナル!
目指せ全国制覇!鯖江の知られざるソウルフード「サラダ焼」を皆様に知ってほしい! | クラウドファンディング - Makuake(マクアケ)


こうして焼きあがったイチゴ焼!


早速、サラダ焼大使、田中眼鏡の田中さんによる食レポしてもらいました!


世界で唯一、IchigoJamが買えるメガネ屋さん、田中眼鏡、田中さんは、サラダ焼大使!


こちら開発中のウェアラブル 鯖gumo!?


メガネ裏のアクセサリーとしてもいけそう。光るシリーズに追加!?


150コ限定生産!


IchigoJam5才の誕生日!【IchigoJam生誕祭】: Hana道場
Hana道場、IchigoJam体験会にたくさん来てくれたこどもたち!お祝いありがとう!


サラダ焼の外見に、中身は鯖江産イチゴジャムとカスタードクリーム!
この世で一番うまい」と言った小学生、頭と体をフル回転する子供たちにはぴったりなのかもw


三重からかけつけてくれた、PCN三重代表の岡村さん!福岡、静岡、愛知など各地高専でも活躍!


おみやげも、イチゴ!


世代を超えて、みんなでつくって、みせあって楽しむ姿!


高専生、大学生も一緒に!


京都から里帰りしていた新小学3年生の女の子、初のプログラミングとゲームづくり、大いに楽しんでくれました。


ライフ制、ゴール付きのかわくだりゲーム。
38行の絵文字「うずまき」を「イチゴ」に変えると、イチゴゲットでライフ回復!1分(=3600)耐えればゴール!


こどもたち大はしゃぎ、ショップのふうせんさんより、IchigoJam 5th特別風船、いただきました!
IchigoJam ロゴ入りゴム風船 - ショップのふうせん」IchigoJamロゴ入り風船も!
ありがとうございます!


Hana道場のIchigoJamとイチゴ焼。


イチゴ焼コラボマップ
ご協力いただいた場所、半径3km圏内!


三六サラダ焼とイチゴ焼。
鯖江コラボ、またいつの日か!

5才になった、IchigoJam、これからも多くのこどもたちに笑顔とワクワク、届けます!
IchigoJam 5th Annivarsary | PCN プログラミング クラブ ネットワーク

ポスターなどをまっすぐ貼りたい!を実現するARアプリ「gmeterAR
スマホの外カメラの映像に、加速度センサーを使った補助線をいれました。


gmeterAR」 for iPhone/iPad/Android

以前作った傾きを調べるミニツール「gmeter」を、ARフレームワーク「egarjs」を使ってAR化。
まっすぐが気になる人、ぜひ使ってみてください。

DAISO版500円で買えちゃうスマホVRで作った、遅延メガネテクノロジーを横展開、iPadのカメラを使った過去を映す鏡「delaymirror」を開発。

メガネをかけている人の悩み、メガネを外すとよく見えない。
1.5秒過去が映る鏡を使って、自分の新しいメガネ姿を見てみましょう。


delaymirror
iPad, iPhone 他、インカメラがあるPCでも動作します。
めがね会館1FのショップにあるiPadでもご利用いただけます!
(タップすると、画面を停止する機能付き。停止があれば、遅延いらないかもw)

映っている映像はどこにも送信していません。
オープンソース on GitHub、なので心配ならご自身でチェック可能です!
egarjsを使えば、カメラを使ったアプリ開発が簡単便利。ぜひ、チャレンジしてみてください。

links
- egarjs かんたんARフレームワーク - #jigjs

PCNこどもプロコンでノートパソコンをゲットしたこどもや、高専生などにおすすめしたいプログラミング言語 JavaScript。 webを通じて、世界中のパソコンやスマホ、一部のゲーム機でも動きます!

シンプルなフレームワークを提供する jigjs のひとつ、時計フレームワーク「egclockjs」を使って、学生が好きな弾幕シューゲー風時計を作ってみました。


danmaclocksrc on GitHub

中央から放たれる弾幕、開始角度が長針、終了角度が短針です。
慣れれば読めます。

弾幕の数や、回転させる数、弾の飛ぶ速度と加速度、あれこれいじって実験してみましょう!

弾幕に三角関数の cos と sin は欠かせません!
とりあえず定石的に使いつつ、試行錯誤、いろいろ遊びながら理論に触れるとすっと理解できます。

links
- スマホを手にしたら挑戦したいJavaScriptで楽しいwebアプリづくり!かんたんフレームワーク群 jigjs 第5段は時計アプリフレームワーク

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系部活のありかたのディスカッション、もりあがりました!


kirakira - 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 石川高専

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