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

セグメントを2つ減らして消費電力3割減、5セグメントLED時計風アプリ

2017/09/22 23:55:00
#js #maker 

IchigoJam webでPCブラウザ上のフルスクリーンという技を覚えたので、プロジェクターなどの大画面に映える時計アプリを作ってみました。 ビジュアルで魅せるアプリづくりのテンプレートとしても活用ください。

選んだのは、一日一創2012の中でもお気に入り成果のひとつ、5セグメントディスプレイを使った時計「my5segclk
ゼビ文字に似せたことでちょっとが読みにくかったので、0と4を変更。


1 2 3 4 5
6 7 8 9 0 、と読みます。

エレベーターなどでおなじみ7セグメントLEDとくらべて2セグメント少ないので、消費電力28%減!(単純計算)
一味違った雰囲気で時を伝えます。


fivesegclk」 大きさ色をカスタマイズ可、表示部分クリックでフルスクリーン化

links
- 一日一創 - 時計アプリ
- 【IchigoJam】5セグメントLED - 2017-09-24 - SHIROのモバイル日記 (角型LEDで実現!)
- http://scientific601.altervista.org/5segment.html 1973年に考えられた5セグディスプレイ
- 道新スタッフブログ: いまだ現役!41年前のシャープ製電卓 - 7セグに固まる前は8セグ?

プログラム容量4倍、IchigoJam 4k on web、失敗を楽しむ教育を!

2017/09/21 23:55:00
#js #IchigoJam 

容量4倍、プログラム領域を4kにしたIchigoJamの拡張おためし版を使った、大作ゲーム「IchigoTrek-4K」登場! IchigoJam web も4kバージョンを用意して動かしてみました。


IchigoJam web 1.3b」- プログラム4kbyte version (IchigoTrek by shiro0922 動きます!)

元になったゲーム「スタートレック」は1971年生まれで、1980年前後にかけて大流行したBASICのゲームとのこと。 実感ありませんが、78年生まれがスーパーマリオに熱狂したような感じかも。

こどもプログラミング教育などに取り組む、ICT CONNECT 21のイベント「 シリーズ:プログラミング教育の世界での取り組み ~英国における低学年でのプログラミング教育の取組~」へ参加。 イギリスでコンピュテーショナル・シンキングを学ぶためのロボット「Bee-Bot」を学校へ販売・指導しているTTS GroupのAndrewさんによるイギリス事情とロボット実演がありました。

パソコン上のシミュレーター、上下左右などのパネルを並べた「ならべたじゅんにうごく(逐次実行)」でクイズ。 動くと思う人は、サムアップしてくださいと会場に語りかけるも誰も反応せず・・・。 せっかくなので、サムアップ!

日本で長く続いた「間違いを怖れる」教育の縮図を見ました。
遠慮?間違えたら恥ずかしい?実は逐次処理も自信がない?

こどもプログラミングを、どんどん間違ってOK!という新習慣をつくるいいきっかけにしましょう!

プログラムのいいところは、間違っても淡々と何度も粘り強く正確に指摘してくれるコンピューターが相手してくれるところ。 コンピューターは絶対根負けしないので、安心していくらでも失敗させてくれます。失敗は成功の母。自転車を転ばずに乗れるようにならないのと同様、失敗こそ最大の学習です。 失敗を見守るという人間にとっては辛い仕事は、実にコンピューター向きです。


Andrewさん、遠くUKからありがとうございました!
Thank you very much Mr. Andrew!! Next time we'll meet in UK!
Here is English documents of IchigoJam.
"$15 Computer IchigoJam meets Cute Manufacture Pimoroni in UK, and connects SkyWriter HAT!"

続々と公開予定の各地で実証が進む「若年層に対するプログラミング教育の普及推進報告2017
ご関心ある方、ICT CONNECT 21への入会もぜひご検討ください!

links
- 鯖江市全15小中学校を結んだ教員向けプログラミング研修とネクストステップ、総務省実証事業と同日開催
- KidsVenture&教員職員向けIchigoJamワークショップ at 大阪/さくらインターネット本社、IchigoJamのつなぎかた
- 新書籍「小学校教員のためのプログラミングで考える教育の実践入門」とIchigoJamプログラミング シニア講師育成講座@Hana道場
- 大人のプログラミング入門、プログラミングをもっと身近に!iOS11とフルスクリーンに対応 IchigoJam web
- こどもパソコンIchigoJam

大人のプログラミング入門、プログラミングをもっと身近に!iOS11とフルスクリーンに対応 IchigoJam web

2017/09/20 23:55:00
#js #IchigoJam 

子供のプログラミングはじめはゲームがテッパン。
一方、興味関心が多様化しているため、難しかった大人向け入門。

コンピューターとネットワークの低価格化によって一気に身近になった今こそオススメしたいのがこちら。
マイコンを使ったプログラミング入門!

マイコンとは、マイクロコンピューターの略で、大人には懐かしい炊飯器「マイコンジャー」などでおなじみの小さなコンピューター。 マイコンを使えば、身の回りのちょっとしたことを自動化できるので実用的!(例、ねこIoTイノシシIoT


こちら指先に見えるたくさん足が生えた四角いチップが、IchigoJamの心臓部のマイコン「NXP LPC1114」。
値段は約100円。たった100円のくせに秒間約5000万回の処理速度を誇ります。
* 値段はロットと為替次第@digikey / 190円で1コから購入可能 / はんだづけが用意な大きなパッケージは400円
* スマホ用CPUとして圧倒的シェアを持つ、ソフトバンクグループになったARM社の設計、NXP社製造のコンピューター

電気で動くコンピューター。その正体はとってもシンプル!
コンピューターは電源を入ると予め決められた通りに、その足につながった先の何かを自在にコントロールしたり、つながったセンターからON/OFFを受け取ったりするだけのものです。 どのように動かすかを決めているのが「プログラム」。「プログラム」を作ることを「プログラミング」といいます。

コンピューターの足にLEDをつないで光らせてみましょう。

LED1

100円の心臓部をもつIchigoJamなら、キーボードで打てば即、コントロールできます。

1秒光らせる

LED1:WAIT60:LED0

1分たって点滅してから消す

LED1:WAIT60*60:LED0:WAIT10:LED1:WAIT10:LED0

運動会のプログラムと同様、予め記憶する時は番号をつけます

1 LED1:WAIT60*60 2 LED0:WAIT10:LED1:WAIT10 3 LED0 RUN

ずっと点滅させるプログラム

1 LED1:WAIT30 2 LED0:WAIT30 3 GOTO1 RUN

変数を使ってだんだん速くしたり、センターからの入力を使って速さを変えたり自由自在。
コマンドをひとつ使えるだけで、表現の幅がどんどん広がるのが、プログラミングの楽しいところです。

単純なON/OFFですが、LEDの代わりにブザーをつなげば音がなり、モーターをつなげばモノが動き、スイッチにつなげば家電が動き、ネットにつなげばスマホへの通知や、遠く離れたモノをもコントロールもできるわけです。(ネット接続するIoT、sakura.ioなら月額61円〜

ちょっとやってみたくなった方、今お使いのパソコン上でお試しできます。
ChromeかSafariで「IchigoJam web」を開いたら、「LED1」と打って、エンター!
LEDが光る感動には程遠いですが、縁が反転し、言うことを聞いた証「OK」メッセージが返ってきます。


IchigoJam web」 for Chrome/Safari/Android/iOS11
[fullscreen]ボタンを押すと画面いっぱいに広がるIchigoJam。
フルスクリーン時、動き続けるタイプのプログラムを止めるには、ESCの代わりに、CTRL-Cを使うと便利です。


IchigoJam web、iPhone/iPadでも新OS「iOS11」で動くようになりました!
Bluetoothキーボードを接続すれば、パソコンと同じように使えます。

プログラムの表現方法はたくさんあります。
iPhoneアプリをつくるためのSwift、AndroidならJava、WebならJavaScript、AIで活躍Pythonなど用途によって様々。 IchigoJamで使っているのはBASICという言語。53年前に作られた歴史ある、わかりやすさには定評ある言語です。 プログラミング学習用言語として作られているので、スマホアプリがつくりたくなったら、Swift/Java/JavaScriptへステップアップしましょう!


10月放送のTokyo MXのテレビ番組の収録、パックンにもマイコン、プログラミング体験してもらいました!
「エトス、パトス、ロゴス」伝え方3種がおもしろい、パックン著書にサインもらいました!

基本1500英単語でオリジナル勉強アプリをつくろう!タイピングは英語の書道!

2017/09/19 23:55:00
#js 

英語は2台目の自転車、と、元Googleの村上さん談。
実際に口にだすことで英語が聞こえる耳を育て、ちょっとした自己紹介を翻訳しておき丸暗記。
後は、アウトプットする場数と、単語力。

福井にも縁あるパックンの本「パックンの「伝え方・話し方」の教科書 世界に通じる子を育てる」内に、アメリカの子供も遊ぶボキャブラリーゲームを発見。
日英、英日のクイズ形式で学べるアプリを一日一創2012からリメイク!


Globish 基本英単語学習アプリ(英日)」(日英もあり)

同じ1496の英単語データ(JS)を使って、英単語力がついたら、英単語タイピングに挑戦!

typeinglish - 一日一創2012

話すと同様大事なタイピングによるアウトプット。
キーボードを見ず、すらすらタッチタイピングする力は、小学校低学年で身に着けておくのが理想的。
英単語データを使って楽しいゲームを作って遊べば一石二鳥!

2台目の自転車、英語があれば、学びたいものを家に居ながらにして無料で無限に自習可能。
ここぞという場所には自慢の作品を持って、実際足を運んで、直接コミュニケーションとりにいきましょう!

自分で学べるようになって一人前。
「教えてもらう」は小学生までで卒業させてあげたい。

links
- 一日一創 英語アプリ一覧
- 一日一創 アプリ一覧
- 一日一創2012

気分は iPhone X!? 縁取りSVGをつくってみた

2017/09/13 23:55:00
#web #js 

祝、iPhone 10周年!
記念の iPhone X (アイフォン・テン)の気になる縁取り画面をSVGで再現してみました。

iPhone X風、縁取りSVG

このWebサイト「一日一創」にも適応してみました。
「ホームへ追加」から開くとアドレスバーが消えて、更に iPhone X 気分になれます!

iPhone X 風、一日一創

使い勝手、アプリの対応、楽しみですね!
CPUがA10からA11になり、処理速度70%アップ、GPU速度も30%アップ!
省電力用のコアが2つ増えて6コア化、バッテリーライフに効果ありかも?

iOSの配信日が19日と決定し、10年目にしてようやくカメラにQRコードリーダーが付くのは大きい!
QRコード復権!?


maked by qrmaker (2012 create every day)

触るウェブ、Web MIDI API x TouchMIDI32 = WebTouch

2017/09/03 23:55:00
#maker #web #js #midi 

ちょっとハードルが高い、ハードウェア工作。
でも、奇楽堂TouchMIDI32があれば、JavaScriptでタッチボタンがすぐできる!(旧10キー版は安い!)

TouchMIDI32は、32コのタッチセンサーをつなぐMIDI入力デバイス、USBでパソコンにつなぐと、MIDI IN デバイスとして使えて、Web MIDI API を使えば、ブラウザ上のJavaScriptで簡単に遊べる!

Web MIDI API は、使い方簡単!

navigator.requestMIDIAccess({ sysex: false }).then(successcallback, errcallback);

requestMIDIAccess でデバイスを受け取ったら、onmidimessage で受信したり、send で送信するだけ!


WebTouch with Web MIDI API

links
- Web MIDI API - W3C
- MIDIデバイスの準備不要、Web MIDI APIの基礎 | HTML5Experts.jp
- Web MIDI APIを触ってみた - Qiita
- Web MIDIでつなぐパソコンとIchigoJam

WebBluetoothで超小型センサーをJavaScriptで遊ぶ!(接続編)

2017/07/28 23:55:00
#js #web 

WebでBLE (Bluetooth Low Energy) が使えるようになってます! WebBluetooth!
アルプス電気製の超小型BLE「センサネットワークモジュール」とChromeをひとまず接続してみました。

自動接続はできないので、ユーザーからの何かのアクションからモジュールを選択して、ペアリング

電界強度(RSSI)、バッテリー状態などが取得できました!

SNM WebBluetooth Demo

プログラムも結構シンプルに書けます! src on GitHub
電子工作はじめのきっかけ、ユカイ工学のkonashiとも接続したり、konashi経由でIchigoJamを制御したり、いろいろ夢は広がります!

links
- ブラウザからBluetoothが使える! JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] - ICS MEDIA
- 【センサネットワークモジュール開発キット】 アルプス電気

中国語ショッピング、数から覚える円元計算機 Shopping in Chinese / Yen-Gen Calc

2017/07/02 23:55:00
#js #china 

買い物は、現地語がきっと楽しい。 Enjoy shopping in local language!
一日一創2012円ユーロ変換をベースに、中国語のピンイン表示付きの円元計算機を作成。


円元計算機 - Yen-Gen Calc


香港周辺の船を見ていたら偶然の雷!


市内へは電車が便利。ここはカードが使えた。


香港のタクシーではカードが使えないことがあるので注意!
レートは元とだいたい一緒だったので、幸い手持ちの元で支払い成功。
香港ドルは準備しておこう。

もっと住みよくするには? 品川区と福井県坂井市連携あり 特別区全国連携プロジェクト賛同自治体一覧オープンデータ&マップ

2017/06/28 23:55:00
#opendata #codefor #js 

プログラミングの授業で訪問した荏原第六中学校がある品川区は、オープンデータの活用も盛ん。
オープンデータ | 品川区」 - 5つ星オープンデータあり

今月開催のオープンデータを活用する、地域課題解決ワークショップ「品川をもっと住みよくするには?」
Code for Tokyo の Facebookページに写真とグラレコレポートがありました!

ケーブルテレビとYouTubeで配信されている品川区の広報番組「わ!しながわニュース」によると、品川発、全国へのアプリ誕生を目指し、第2回10/21(土)、第3回11/4-5(土日)開催とのこと!

品川のことが動画で分かる「品川区公式チャンネル しながわネットTV」そのまま聞いていると、なんと福井県坂井市の話題。(先日、坂井市の東尋坊へ行ったばかり!)


坂井市立丸岡南中学校の修学旅行で品川区で坂井市PR活動!
特別区全国連携プロジェクトという、東京都23区と地方との連携。福井県坂井市は品川区との連携し、サミットの共同開催や、アンテナショップ出店など、積極的
- 福井県坂井市の文化・芸術を品川区で紹介|品川区
- 福井県坂井市アンテナショップ 戸越銀座にオープン|品川区
- 福井県坂井市/「全国シティプロモーションサミット2016」を開催!


特別区全国連携プロジェクト賛同自治体一覧マップ
特別区全国連携プロジェクト賛同自治体一覧JSON形式のオープンデータへと変換するプログラムと、簡単なマップをつくってみました。 坂井市-品川区など、自治体同士の連携線もどんどん加えていきたいところです!

特別区(=東京23区)を紫色で表示。

福井県坂井市は、東洋経済の「住みよさランキング」で、8位(鯖江市は7位)
品川区とのオープンデータによる比較、坂井市でのワークショップ開催も「品川をもっと住みよくするには?」の何かヒントになるかも!?

JSでレーザー残像効果シミュレーション ProjectionBallフォントを見てみる - laser view

2017/06/19 23:55:00
#js 

パーソナルレーザープロジェクター「ProjectionBall」で、好きなパターンを投影したい!
I'd like to irradiate my laser pattern on ProjectionBall.


"laser view"
とりあえず、ProjectionBallのオープンソースより、数値フォントをお借りして、カウントダウンしてみました。(ベースにしたアプリは落書きアプリ freepad
In the beginning, I rented number font data from OpenSource of ProjectionBall and counted down. (the base is scrabble app freepad)

公式サイトにて、Windows用描画データ作成ツール「prjball-drawingtool」が公開されています!
Official site published the drawing tool "prjball-drawingtool" for Windows.

links
- ProjectionBall (on GitHub)
- ProjectionBall controlled by IchigoJam

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