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

気分は 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

ブラウザで動き、URLでプログラムを共有する IchigoJam web - runs on browser, share with URL

2017/06/15 23:55:00
#IchigoJam #web #js #KidsIT 

ブラウザで動く IchigoJam web のバージョンアップ。エクスポート(テキスト出力)に加え、インポート(テキストからの入力)にも対応!
I update the IchigoJam web, IchigoJam runs on browsers edition. The "import" function was supported.

URLのハッシュにも設定されるので、そのまま共有も可能です。
You can share your IchigoJam BASIC program with URL.


"IchigoJam web by WebAssembly"

例えば「かわくだりゲーム」がこのリンクで遊べる!
For instance, you can play "Rafting Game" with this link.

links
- 7seg LED simulator for IchigoJam web by WebAssembly x HTML #js #IchigoJam
- IchigoJam BASIC on the web by WebAssembly
- Write in C language! The fast web with WebAssembly

JavaScriptはじめのいっぽ「はじめてのJS」つくるひとをつくる@木更津高専 - first step of JS

2017/06/09 23:55:00
#chiba #js 

PC、スマホ、ゲーム機など、世界最大のアプリプラットフォームであるwebの標準言語、JavaScript(ジャバスクリプト)。 ブラウザさえあれば誰でも簡単にプログラミングを始められます。GitHubを使えば、つくったアプリや、プログラムを簡単、無料で公開できます! 作る側の世界へようこそ!

JavaScriptはじめのいっぽ


J科の教室に設置されていたラズパイの掲示板システム、これもきっとJS


講演、AI x IoT時代を楽しもう!


インターン生との再開!

コメント.netに寄せられた質問への回答
Q. 成績は常にトップだった?
A. いいえ、適度に卒業できる感じだったはず
Q. 語彙力を高めるためにはどうすればいいですか?
A. お気に入りの人の語彙を真似てみるとか?
Q. どうすればコミュ力上がりますか
A. まずは創造力をあげて、何かつくる!いいものできたら誰かに言いたくなるよ
Q. 使ってるエディタはなんですか
A. ずっと秀丸エディタ(福井高専卒業生作)でした(今はMacなのでmi)
Q. お金の方はどうなんですか?
A. プログラムのバイトで稼ぐ自信がついてからのスタートでした!
Q. JS始めたのいつですか
A. 本格的に始めたのは一日一創、2012年です


参加、感謝!


じゃんけん大会、IchigoJam獲得者


じゃんけん大会、IchigoLatte獲得者(賞品提供、ナチュラルスタイル松田さん


おみやげ「松屋 むぎこうせん」


木更津のこどもたちへもプログラミング!
8/10 PCN木更津、ファーストイベント!

links
- PCN プログラミング クラブ ネットワーク
- 木更津高専

BrainIchigo - 5 commands programming language / 5つの文字種でつくるプログラミング言語

2017/06/03 23:55:00
#IchigoJam #js 

I created new esoteric programming language "BrainIchigo". It's just a forked from Brainfuck. BrainIchigo has 5 simple commands (Brainfuck has 8). While it is fully Turing-complete also.
新しい難解プログラミング言語「BrainIchigo」を作りました。「Brainfuck」からのただの派生です。BrainIchigoがもつコマンドは5つ(Brainfuckは8つ)。もちろんチューリング完全です。

H: p++
I: [p]++
C: start a loop
O: input
G: opposit the next command (+ → -, start → end, input → output)

IIIIIIIIICHIIIIIIIIHIIIIIIIIIIIHIIIIIGHGHGHGIGCHGOHIIGOIIIIIIIGOGOIIIGOHGIGOGIGIGIGIGIGIGIGIGIGIGIGIGOGHIIIIIIIIGOGIGIGIGIGIGIGIGIGOIIIGOGIGIGIGIGIGIGOGIGIGIGIGIGIGIGIGOHIGO

Hello, world!


"BrainIchigo interpreter" on web written in JavaScript

BrainIchigo interpreter on IchigoJam BASIC

1 'BrainIchigo 100 CLV 110 P=0:E=0 120 M="IIIIIIIIICHIIIIIIIIHIIIIIIIIIIIHIIIIIGHGHGHGIGCHGOHIIGOIIIIIIIGOGOIIIGOHGIGOGIGIGIGIGIGIGIGIGIGIGIGIGOGHIIIIIIIIGOGIGIGIGIGIGIGIGIGOIIIGOGIGIGIGIGIGIGOGIGIGIGIGIGIGIGIGOHIGO" 200 @LOOP:C=PEEK(M):M=M+1 210 IF C=ASC("G") E=1:GOTO@LOOP 220 IF C=ASC("H") IF E P=P-1 ELSE P=P+1 230 IF C=ASC("I") IF E [P]=[P]-1 ELSE [P]=[P]+1 240 IF C=ASC("O") IF E ?CHR$([P]&#FF); ELSE GSB@GETC:[P]=N 250 IF C=ASC("C") IF E GSB@BACK ELSE GSB@SKIP 260 IF C=34 ?:END 270 E=0:GOTO@LOOP 400 @GETC 410 N=INKEY():IF N=0 CONT ELSE RTN 500 @SKIP 510 IF [P] RTN ELSE S=0:N=M 520 @LSKIP:D=PEEK(N):N=N+1 530 IF D=ASC("G") E=1:GOTO@LSKIP 540 IF D=ASC("C") IF !E S=S+1 ELSE IF S=0 M=N:RTN ELSE S=S-1 550 IF D=34 STOP 560 E=0:GOTO@LSKIP 600 @BACK 610 IF ![P] RTN ELSE S=0:N=M-2 620 @LBACK:D=PEEK(N):N=N-1 630 IF D=ASC("C") IF PEEK(N)=ASC("G") S=S+1 ELSE IF S=0 M=N+2:RTN ELSE S=S-1 640 IF D=34 STOP 650 GOTO@LBACK

links
- Turing completeness (チューリング完全@ja)

Learn how to learn. Common Multiple on IchigoJam / 学び方を学ぼう「IchigoJamで公倍数」

2017/06/01 23:55:00
#IchigoJam #js 

Do you like the number? 数字は好きですか?
I made a self-learning print of IchigoJam for "Common Multiple". IchigoJam自習プリント「公倍数」を作成。
Let's discover the world of numbers! 数の世界を探検しよう!

"Common Multiple (公倍数@ja)"
公倍数さがし(小5用) / こうばいすうさがし(小4以下用) with tokana.js (漢字かな変換js)


Meeting with ZESDA!
NPO ZESDA: produce = entrepreneurship x inspiration x introduce
新規事業の実現 = 起業意思 x 気づき x つながり


The moblie IchigoJam bringing Mr. Saito from Ueda city joined us. Program anywhere!
合流した長野県上田市の斉藤さんのモバイルIchigoJam!どこでもプログラミング!

links
- IchigoJam print on GitHub
- 数で遊ぼう「公約数探し」 - Play with Numbers! Discover the Common Divisor

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