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

ブラウザで動き、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

7seg LED simulator for IchigoJam web by WebAssembly x HTML

2017/04/20 23:55:00
#js #IchigoJam #web #english 

IchigoJam web updated to simulate 7-segment LED.

IchigoJam web by WebAssembly *7seg on right top!
IchigoJam web connects a 7-seg LED on HTML through shared memory on WebAssembly.


"LED(7seg) by PCN Kanazawa / LED(7セグ) by PCN金沢@ja"
7-segment LED is one of very popular electronics parts to build devices.

You can control the 7seg LED very easy.

OUT1,1

"OUT1,1" to light up a top of LED. OUT1-7 connects each LEDs.

OUT127

127 means 1111111(binary). So all 7 LEDs lighted up.


"Janken using 7seg LED"

This is the dice program.

10 LET[0],6,91,79,102,109,125 20 OUT[RND(6)]

This is the count down progrom.

10 LET[0],63,6,91,79,102,109,125,39,127,111 20 FOR I=9 TO 0 STEP -1:OUT[I]:WAIT60:NEXT


Let's make it!

IchigoJam BASIC on the web by WebAssembly

2017/04/16 23:55:00
#IchigoJam #web #english 

I updated IchigoJam on the web by WebAssembly.
You can write programs in "IchigoJam BASIC" on the web!

"IchigoJam web by WebAssembly" (for Firefox, now)
The size of main program "ichigojam.wasm" is just 30KB. It boots so quickly!

Notice!! Now it's only runs on Firefox.
I've not known why it couldn't boot on Chrome yet.

links
- IchigoJam ($15 PC for Kids)
- Moblie Game Machine making workshop for Kids using IchigoJam RPi (on Raspberry Pi)
- Write in C language! The fast web with WebAssembly

Write in C language! The fast web with WebAssembly

2017/04/14 23:55:00
#js #web #english 

Chrome and Firefox support WebAssembly to make fast application on the web!
You can write your web application in C language also!
This is simple demo using shared memory on both JavaScript and WebAssembly.

"WebAssembly test" (src on GitHub)

To set up WebAssembly to your Mac (taking 2 hours and 20GB storage space!!)

1. binaryen (compiler for WebAssembly)

cd *** git clone https://github.com/WebAssembly/binaryen.git cd binaryen cmake . && make

*** : your bin path
2. wabt (assembler for WebAssembly)

git clone --recursive https://github.com/WebAssembly/wabt cd wabt make cd ..

3. LLVM (takes long time and big storage space!)

git clone http://llvm.org/git/llvm.git cd llvm/tools git clone http://llvm.org/git/clang.git cd ../projects git clone http://llvm.org/git/compiler-rt cd ../.. mkdir llvmtmp cd llvmtmp cmake -G "Unix Makefiles" -DCMAKE_INSTALL_PREFIX=/usr/local -DLLVM_EXPERIMENTAL_TARGETS_TO_BUILD=WebAssembly ../llvm make -j 8 sudo make install

4. edit PATH (.profile etc...)

export PATH=***/wabt/out/clang/Debug/:***/binaryen/bin/:$PATH

5. done! Let's make web an app in C!

#define SIZE 10 int mem[SIZE]; int* getMemory() { return mem; } int getMemorySize() { return SIZE; } int calc() { int sum = 0; for (int i = 0; i < SIZE; i++) { sum += mem[i]; } return sum; }

"WebAssembly test on GitHub"

Do you know how many cities your prefecture have?

2017/02/15 23:55:00
#web #opendata #english 

262 cities opened them data in Japan.
But do you know how many cities in Japan? And how many cities in your home prefecture?

This is a map to solve such questions with link to official site and them pharase.
Enjoy Japan tour on web!


"How many cities does your prefecture have? / Japan"

Japan will lead the web / 1st W3C Japan Executive Committee Meeting

2017/02/14 23:55:00
#web #opendata #english 

There are 262 open data cities in Japan!
And it will great improve this year by the open data raw.


Mr. Japanese Internet Jun Murai wil lead Japanese Open Data at "1st W3C Japan Executive Committee Meeting".

I want to support as Open Data Evangelist and one of the W3C member. This is open data city ratio in Japan I made today.

"Open Data City Ratio / Japan"

Does your city open?

WebのSSL化待ったなし!さくらのクラウド x Nginx x Let’s Encrypt でつくるココイクSSL版

2016/10/10 23:55:00
#web #js 

iPhoneアプリからの通信がHTTPS必須となるまで3ヶ月を切りました。
iOS10から、Webで現在位置を取得するGeoLocation APIがSSL環境ではないと動かなくなっています。
Tech TIPS:Webブラウザで現在地情報を正しく取得できない場合の原因と対策 - @IT

GitHubに置く方法もありますが、今回はサーバープログラムを自由につくるためにサーバーをSSL対応してみました。


まずは実験、さくらのクラウドで一番安いサーバーのインスタンスを生成、1時間だけ実験するなら9円!
起動したら、adduser/passwdでユーザーをつくり、sshで手元のパソコンから接続。下記を参考に、nginxというWebサーバーとLet's Encryptという無料で自動更新対応のSSLを設定します。
Let’s EncryptのSSL証明書で、安全なウェブサイトを公開 - さくらのナレッジ

SSLでページが表示されました!

2014年一日一創のココイクを試しに移植してみます。
SSL環境から呼び出すJavaScriptや画像ファイルすべてがSSLにしておくのがポイントです。

ココイク」-->

授業で活用するスマホ、リアルタイム投票システム「vote」 福井高専1EIにて

2016/08/03 23:55:00
#js #kosen #web 

前期期末テスト、コンピューターな科目のテスト返しの時間を少しもらって、福井高専電子情報工学科の1年生のクラスにおじゃましてきました。 先生が許可すれば使えるというスマホ、3人ほど持ってない人がいたのは申し訳なかったところですが、リアルタイム投票システム「vote」も使っていろいろと聞いてみました。


vote viewer」と「vote」(鯖江市役所JK課卒業←で使ったアプリをシンプル化)
それぞれのURLの後ろに「#fnct1ei」などとハッシュを付けると、独自の投票ルームがつくれます。 授業や講演、イベントなどに使ってみてください。

学生に操作してもらうのは、YESかNOかのボタンを押すだけ。教室前のプロジェクターに映した投票結果画面にリアルタイムに反映されます。 どちらも超シンプルなので、円グラフにするとか、いろいろ改造するのもいいですよ!

プログラミングは後期からスタートということで、みんなワクワクしているところでした。 中学生まででプログラミング経験者が1人だけでしたが、夏休みからがんがん予習することをオススメしますよ!

プログラミングの楽しさを伝える活動、PCNの一端を高専生にも紹介。その場でゲームをつくっていくと、みるみる表情が輝いていきました。

「lol風ゲーム? only on IchigoJam!」
自分のパソコン所有率が、40%と低いのが気になるところ。Hana道場へ、IchigoJamつくりにおいで!


教壇に立つ、同福井高専、電気科の先輩、PCN/ナチュラルスタイル代表松田さん。(photo by 村田さん
私のスライドタイトルは、powered by とあるさくらのジェネレーター
このジェネレーターの作者は、舞鶴高専の先輩、さくらインターネット社長、田中邦裕さん

ステキな機会いただいた、福井高専村田先生に感謝です!
後輩のみなさん、チャンスまみれのこの時代、めいいっぱい自分だけの「ものづくり」楽しんでください!

Webサイトをプログラミング! IchigoJam「よくあるご質問」メニュー追加

2016/07/25 23:55:00
#IchigoJam #web 

インターネット上で最も使われ、ネットの代名詞ともなっているアプリ「Web(ウェブ)」
ブラウザや、アプリからHTTP(エイチ・ティー・ティー・ピー)というお作法に則ってデータを送ると、それに対応したデータが返ってくるというシンプルな仕組みが、あっというまに世界をつなぎました。

IchigoJam BASIC で、擬似的に表すとこんな感じ。

10 ?"ナニヲミマスカ?(0:トップページ 1:リファレンス 2:ヨクアルゴシツモン)" 20 INPUT N 30 IF N=0 ?"トップページデス。コドモプロコン カイサイチュウ!" 40 IF N=1 ?"LED: LEDヲコントロールシマス 0:ショウトウ 1:テントウ" 50 IF N=2 ?"プログラムノ ホゾンハ SAVEコマンド" 60 GOTO 10

Webサーバーと呼ばれる、データセンターなどにおいてあるコンピューターでは、こんな感じのプログラムが動いているわけです。 URLの「http://」のあとに続くのがサーバーがあるアドレス(住所)、その後に続く文字がそのサーバーに対して送るリクエストデータを表します。

IchigoJamの公式サイトに、ひとつ「よくあるご質問」メニューを追加しました。
Webブラウザ用のデータは、HTML(エイチ・ティー・エム・エル)を使いますが、すべてのページにメニューを追加するのは、手動でやろうと思うと結構面倒な作業です。
そんなとき活躍するのが、プログラミング!
今回、私はJavaを使いましたが、使う目的に合わせて、使えるプログラミング言語をいろいろと持っておくと便利です!


IchigoJam よくあるご質問

IchigoJamと無線LANボード「MixJuice」を使えば、IchigoJamでもWebが使えます!
IchigoJam+MixJuice向けホームページを開設しました ( パソコン ) - ボクにもわかる地上デジタル(ブログ) - Yahoo!ブログ
IchigoJamだけを使った情報発信もできるとおもしろいかも!?

W3Cx鯖江 福井で進むオープンイノベーション IoTとLPC812

2016/07/21 23:55:00
#opendata #sabae #fukui #web #efas #pcb 

Webの標準化団体、W3C(ダブリュー・スリー・シー)のグローバルビジネス開発のリーダー、アラン・バード氏が来鯖。 鯖江市はW3Cに加盟する、日本で唯一の地方自治体!(もしかしたら世界でも唯一!?)

市役所、鯖江市長を訪問、W3Cにおいてホットな、IoTとスマートシティにおいて一歩先行く、鯖江市の展望をディスカッション。 バス、水位、図書館空席など、市民の生活に密着した、時々刻々と変化するリアルタイムオープンデータの活用が鍵!


こどももオープンイノベーション、Hana道場を見学。 こどもパソコンIchigoJamを使ったプログラミング学習環境、IoT推進でさらなる活用拡大狙います!


福井のIT業界団体、会員急拡大中の福井県情報システム工業会でのセミナーで、福井県工業技術センター所長の強力さんより、ふくいオープンイノベーション推進機構と、IoT推進ラボの紹介。ここでもIoTは熱い!

IoT用のコンパクトで使いやすいマイコンとして、NT金沢でLPC812を使った液晶ゲーム機 negimiku lcd board (by @raimaxpさん)でも使われていたLPC812を実験。

1.27mmピッチと比較的幅は広めなので、子供でもちょっと慣れてる人ならいけそう。

Upverterを使った、プリント基板(PCB)データづくり、LPC812M101FD20(LPC812M101JD20)が無かったので、Create New Part で、FOOT PRINTに切り替え、右側のPinsのEdit、ピン配置を記入して、

左メニューの足マーク、generate a footprintを選択、LPC800のサイトの「LPC81xMデータシート」を見て、サイズを入力、フットプリントを作ればパーツ出来上がり!
→「NXP Semiconductors LPC812M101FD20FP - Upverter

PCN、次なるしかけを打ち合わせ。熱い夏になりそうです!

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