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

JavaScriptを使って、MacやWindowsのネイティブアプリを開発する Electron を使ってみました。

絶対音感ツール「AbsScale」が即アプリに!
初回起動時にマイク使用の確認がでますが、その後は起動時にタップする必要がありません。
起動時に即フルスクリーンにもできて、音や、webカメラを使ったツールやゲーム開発にも良さそうです!

必要なのは、Electronのインストールと、index.js の準備だけ(index.html : webアプリ)

const { app, BrowserWindow } = require('electron') let win = null app.on('ready', () => { win = new BrowserWindow({ width: 400, height: 300 }) //win = new BrowserWindow({ width: 800, height: 600, kiosk: true, fullscreen: true, frame: false }) win.loadURL('file://' + __dirname + '/index.html') win.on('closed', () => win = null) })

コメントアウトしている、長めの win = ... に変更するとフルスクリーンのキオスクモードで起動!


こちらはウィンドウ表示させたネイティブアプリ!好きな大きさで起動させましょう。
昔、Windowsにあった HTA = HTML Application みたいな手軽さが良いですね!

electron-packager . absscale --platform=win32 --arch=x64 --overwrite electron-packager . absscale --platform=darwin --arch=x64 --overwrite

electron-packager を使って、Mac用Windows用のバイナリパッケージとしてまとめて、配布もできます!


HTMLはじめのいっぽ

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>My First Electron</title> </head><body> <p>Hello World!</p> </body></html>

Electronで起動すればメモアプリとして使えそう!?


電卓アプリにしてみました。JavaScriptの強力な命令、eval を使っているので、サイバーセキュリティーに注意!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>calc</title> <style> body { background: #f1f1f1; color: black; padding: 20vw 0; text-align: center; } input[type='text'] { font-size: 3vw; width: 50vw; padding: 1vw; margin: .5vw; } button { font-size: 3vw; padding: 1vw; margin: .5vw; } </style> </head><body> <input type=text id=tf> <button id=btn>calc</button> <script>'use strict' btn.onclick = function() { tf.value = eval(tf.value) } </script> </body></html>

HTMLで構造を記述します。styleタグ内のCSSで飾り、scriptタグ内のJavaScriptで動きをプログラムする感じです。
ひとつひとつ調べて、改造を繰り返す内に慣れてきますよ!

index.html をエディタで編集したら、アプリの画面で Control か Command + R 推して、再読み込み。
デバッグするコンソールは Alt か Option + Control か Command + I で開きます。

Let's create something!

福井県坂井市春江東小学校から、福井高専に依頼あった出前授業でプログラミングワークショップ。
講師は、その小学校の一期生で、電子情報工学科の5年生!


電子情報工学科の青山先生から、講師紹介!


サポートする学生も、ここ坂井市近所の小学校出身!


本日の機材。IchigoJam + キーボード + ミニモニターを一人一台!


IchigoJamをつかったはじめてのプログラミング!理科好き、算数好き、何より、ものづくり好きの人にオススメ福井高専!
電源を入れて、LEDの制御、アルゴリズムを基本を高専生からレクチャー受けて、かわくだりゲームづくり、そしてゲーム大会!
最後に、応用例としてプログラミングされたドローンのデモ飛行。


今回も楽しんでくれた、おなじみかわくだりゲームのバージョン1.4ならではの新改造法。
弾幕シューゲーのように、美しい弾道を作る三角関数SIN!

10 CLS:X=15 20 LC X,5:?"O" 30 LC SIN(TICK()*10)/20+16,23:?"*" 35 WAIT3 36 X=X-BTN(28)+BTN(29) 39 IF SCR(X,5) END 40 GOTO20

いろいろ値を変えて遊んでみよう!


はじめてのプログラミング with IchigoJam」(pptx/keynote on GitHub)
復習に、こちら鯖江市総合2コマの授業で使っているスライドもどうぞ!
オープンデータなので、アレンジ・改変もご自由にどうぞ!
下の学年の子に教えてあげるのも楽しいかも?


大成功!


翔ぶコンピューター、ドローンもプログラミング!


見ている位置や方向をセンサーで検出して表示するコンピューター、VR!


体験してもらったVRアートツール「mirrors - drawlinevr」で、描いてもらった縄文土器!


福井新聞&PCNで開催した、プログラミングフェスの参加者に再会!


会場は、新しい校舎が美しい春江東小学校の体育館。


最後に紹介した、IchigoJamを使った使っていないパソコンを飾る、スクリーンセーバー。
Macでもシンプルなスクリーンセーバーつくってみました。

import ScreenSaver class mac_lineartView: ScreenSaverView { var t = 0 var x = CGFloat(0.0) var y = CGFloat(0.0) var r = CGFloat(0.0) override init?(frame: NSRect, isPreview: Bool) { super.init(frame: frame, isPreview: isPreview) } @available(*, unavailable) required init?(coder decoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: NSRect) { if t == 0 { x = CGFloat(Float.random(in: 0 ..< Float(rect.width))) y = CGFloat(Float.random(in: 0 ..< Float(rect.height))) } r = CGFloat(sin(Double(t) / 100 * Double.pi)) * rect.height / 2 let background = NSBezierPath(rect: bounds) NSColor.black.setFill() background.fill() // box let boxRect = NSRect(x: x - r / 2, y: y - r / 2, width: r, height: r) let box = NSBezierPath(rect: boxRect) NSColor.white.setFill() box.fill() t += 1 t %= 100 } override func animateOneFrame() { super.animateOneFrame() setNeedsDisplay(bounds) } }

プログラミング言語は、Swift。どことなく、BASICとも似てますね!
どんどん学んで、気の向くままに、いろいろチャレンジしましょう!
(参考、How to Make a Custom Screensaver for Mac OS X - Better Programming - Medium

鯖江の楽しいチャレンジの場、Hana道場、祝4周年!

15 January is deadline of #6 PCN KIDS Programming Contest 2016 Winter!
Let's try to program your original game or tool!


You can understand this program after reading documents below for first programmer "first step" and "IchigoJam print (in Japanese)".

10 CLS 20 LC RND(32),RND(22) 30 ?CHR$(224+RND(32)); 35 LC 2,10:?" PCN KIDS PROCON 2017 WINTER " 40 WAIT 10 50 GOTO 20

I updated the IchigoJam ap for Windows / Mac to support to text format data on SAVE/LOAD command.
So you can post to the contest by e-mail easily!

You can download the beta version of IchigoJam ap on "IchigoJam-FAN".


"PCN Kids Programming Contest 2016 in Winter | PCN Programming club network"
Check the past works and prizes!

In the start of last year, I updated the bare metal "IchigoJam PC" to support sound.
This year is IchigoJam ap (IchigoJam application for other OS).


Now only on Mac OS X, but I using cross platform library "SDL2", so I will!

This is a one of famous Japanese new year song "OSHOGATSU" in IchigoJam MML(Music Macro Language).

PLAY"A2BAF+.E8DDEEA.G8F+2.R A2BAF+.E8DDEEF+.E8D2.R <DDD>B<D2>AABBA.G8F+2.R A2BA<D.>B8AGF+AG.E8D2.R"

Let's sing a song with your computer!

You can download beta version of "IchigoJm ap" on IchigoJam-FAN links
- IchigoJam

- IchigoJam tone map "Let's make a binary recorder!"

I made IchigoJam ap for Mac OS X!
You can run IchigoJam on your Mac easily!

sample: Mandelbrot set CC BY nshdot


sample: Mandelbrot set CC BY nshdot

IchigoJam ap:
- not supported I/O, I2C, VIDEO, USR and so on...
- change background by LED
- mouse down / up for BTN()
- save / load as ichigojam-file-xxxx.bin
- copy / paste on prompt window

You can download beta version of "IchigoJm ap" on IchigoJam-FAN
Thank you for memorial 1,500 members!!

links
- Kid's PC IchigoJam - first programmable computer ($15)

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