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

デフォルトじゃないブラウザの会 THE BROWSER BROTHERS

2017/06/30 23:55:00
#browser_b01 #opendata #jig #web #doc 

基底現実とネットをつなぐ「ブラウザ」
エンジニアには非常に重要なツールであり、ツール故に強いこだわりが出やすいモノ。

Yahoo! LODGE で開催されたブラウザナイト「THE BROWSER BROTHERS #1 - デフォルトじゃないブラウザの会」は、 インターネットエクスプローラー、Safari、Chromeという標準(=デフォルト)ではないブラウザをあえて使う、あえて作る人によるイベントです。

ファシリテーションユニット、ショートカッツ(SHORTCUTS)のなんと初仕事!

4ブラウザベンダー+ショートカッツ!
jigブラウザVIVALDISleipnirSmooz(アルファベット順)

それぞれのLT後、パネルディスカッション。ショートカッツによるキレ良いファシリテート!

こちらjigブラウザLT資料、W3C入りましょう!次世代webに取り組もう!

WebAssemblyで動く IchigoJam web。BASICプログラム、打ち込んで遊んでください!(VIVALDI on Mac ok!)
IchigoJamプリント」「IchigoJamミニゲームズ

3名様にプレゼントした「IchigoJam特別セット」PCNこどもプロコン(プログラミングコンテスト)最優秀賞は、BASICのプログラムが書かれた紙が入ったパッケージとして販売されます!まわりのお子さんをぜひこちら側へ引き入れちゃってください。

Firefox(レッサーパンダ)でお馴染みブラウザベンダー、Mozilla Japan 改め WebDINO JAPAN よりメッセージ。 レッサーパンダの産地、めがねのまちさばえ大使、仮面女子の西山動物園PR課長、桜のどかさんも絶賛、鯖江開催もぜひ!

話は尽きないブラウザの未来。実は、IchigoJamにMixJuiceを加えると、ブラウザになります!
IchigoJam+MixJuice向けホームページを開設しました ( パソコン ) - ボクにもわかる電子工作 - Yahoo!ブログ

links
- 【再々度増席しました!】Browser Brothers #1 〜 デフォルトじゃないブラウザの会 〜 #browser_b01 | Peatix

ブラウザで動き、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 applications 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だけを使った情報発信もできるとおもしろいかも!?

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