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

マイクロソフトのWebサーバーは、1996年、ASP(Active Server Pages)という技術からスタート。 Windows Script Host として、VBScriptというスクリプト言語でサーバーアプリケーションが作れます。

なんと、VBScriptの互換でマルチプラットフォームな「OpenVBS」がナチュラルスタイルから登場!
さすが、ZOZOを支える福井の企業!
ZOZO / NaturalStyle ~ZOZOを作っています~ | Natural Style

早速動かしてみます。

cat > test.obs WScript.ECho "HELLO!"

そして、実行

penb test.obs HELLO!

なんと、ASP風も動きます。

cat > webserver.obs osp = new OpenASP osp()

webサーバーアプリケーション用のコードはこれだけ

penb webserver.obs bindto: 0.0.0.0:8000. Press ENTER to stop server.

http://localhost:8000/test.osp を開けば、wwwroot/test.osp がサーバーで実行され、ブラウザで表示されます。
WebSocketでつながりサーバーとのリアルタイム通信もできる test.osk のシンプルなコードがすごい!
Windows, Mac, Linux で動きます!

ASPはC++で簡単に拡張できるのがポイント。COMコンポーネントを作って、CreateObjectで生成する仕組みもちゃんとあります!

懐かしついでに、かつてよく作ったアクセスカウンターをOpenVBS用COMコンポーネントとして作ってみました。

COM-COUNTER (src on GitHub)

C++との接続部分の COUNTER.cpp の一部はこんな感じ。必要な部品はサクッとつくって、BASICをグルー言語、のりのように使うのもいいですね。 久々に使った、iostreamとオーバーライドされたアロー演算子!

HRESULT STDMETHODCALLTYPE GetIDsOfNames(REFIID riid, LPOLESTR *rgszNames, UINT cNames, LCID lcid, DISPID *rgDispId){ if (_wcsicmp(*rgszNames, L"Inc") == 0){ *rgDispId = 0; } else if(_wcsicmp(*rgszNames, L"Dec") == 0){ *rgDispId = 1; } else if(_wcsicmp(*rgszNames, L"Get") == 0){ *rgDispId = 2; } else if(_wcsicmp(*rgszNames, L"Reset") == 0){ *rgDispId = 3; } else { wprintf(L"###%s: Implement here '%s' line %d. (%ls)\n", __func__, __FILE__, __LINE__, *rgszNames); return DISP_E_MEMBERNOTFOUND; } return S_OK; } HRESULT STDMETHODCALLTYPE Invoke(DISPID dispIdMember, REFIID riid, LCID lcid, WORD wFlags, DISPPARAMS *pDispParams, VARIANT *pVarResult, EXCEPINFO *pExcepInfo, UINT *puArgErr) { if (dispIdMember == 0) { n++; save(); } else if(dispIdMember == 1) { n--; save(); } else if (dispIdMember == 2){ pVarResult->vt = VT_I8; pVarResult->llVal = n; } else if (dispIdMember == 3){ n = 0; save(); } else { return DISP_E_MEMBERNOTFOUND; } return S_OK; }

VBScriptは、MSXでも使われた Microsoft BASIC、Windows用に広く使われる Visual Basic の血を受け継ぐBASIC系言語。 BASICならいける!という方、サーバー側プログラムにもチャレンジしやすい環境が誕生しそうです!

WScript.Echo という文字が懐かしく、昔書いたVBScriptのプログラム探してみましたが見つからず。合わせて使えた ほぼJavaScriptな JScript の方を使っていたようです。 後のHTML5となるマイクロソフト提唱 dynamic HTML と後にJavaScriptに取って代わられた Java Appletを使って、サーバーとのリアルタイム通信であれこれ遊んでいた90年代、webの世界は広がりましたが、ベース技術は変わってませんね。

ソースコードがコンパクトかつCC BYのオープンライセンスなので、プログラミング言語の学習、web技術の学習、オレオレ言語、オレオレプラットフォームづくり、C++を使った限界までパフォーマンスを引き出したい人にもオススメです!

Let's start OpenVBS!

最強の学習ツール、ネットにつながったパソコン。

IchigoJam BASICで学び、ノートパソコンにステップアップする一歩手前、無線LAN接続ボード「MixJuice」を使って IchigoJam をブラウザ化する「Ichigobrowser」を作ってみました。webサイトへアクセスして日本語が読めます!

単にパソコンを手にしたこどもは、ゲームで遊んだりYouTubeにハマってしまうだけかもしれません。 プログラミングから触れてもらうことで、こどもたちは自分で創る楽しさ、自分で学ぶ楽しさ、コンピュターとネットの本当の力に気がついてくれます。

10/1から募集開始になった「第10回PCNこどもプロコン2019-2020」でノートPCをゲットできるよと話すと、鯖江の小学生の子たちみんな目をキラキラさせてチャレンジしたいという頼もしい声!(鯖江市全4年生総合2コマプログラミング教育授業動画公開


Ichigobrowser の仕組み:サーバーで中継プログラムを動かして、URLをMixJuice経由でおくると、IchigoJamで読めるようにカタカナ化されて、リンクと共に文章が送られてきます

11111 @A:?"MJ GET sabae.cc:5001/?u=";STR$(S):END OK2 S="https://ichigojam.net/":GSB@A

Ichigobrowserの使い方:コマンド「OK2」でエラー表示を止めて、変数SにURLをいれて、中継サーバー(仮に動作させている sabae.cc:5001)に渡すと、そのページが返ってきます。意外と読めるカタカナページ!


目指すはMSX! Raspberry Pi より安価な IchigoJam 発表!」をIchigobrowesrで表示!

Ichigobrowser」は、サーバーで動くPythonの中継プログラムで実現しています。
プログラムはオープンソース、こどもたちのために活用ください(src on GitHub)


ロゴデザインはドット絵ツール「dote


参考になった、PCN大阪、森さん著の「Python 2年生 スクレイピング入門
requetsを使って、BeautifulSoup4でタグ解析、Aタグのリンクを抽出して、カタカナ化して、返却!


こちらの本、jigブラウザがきっかけで取り組みを始めた鯖江市のオープンデータも掲載!
データをプログラムで使う楽しさ、広まりそうです。


2004.10.1の jigブラウザ 誕生からちょうど15年!
人類最強のコミュニケーションツール、web上の革命はまだまだ始まったばかり。

IchigoJam is small but powerful computer! (IchigoJamはちっちゃいけど強力なコンピューター)
You can use IN or OUT command to manipulate devices. (IN/OUTコマンドを使っていろんなデバイスを操れます)

Today I updated IchigoJam web to test I/O. (I/OテストできるようにIchigoJam webをアップデート!)

"IchigoJam web"
Please press "I/O" button to open the control panel. ("I/O"ボタンでコントロールパネル表示です)
Enjoy computing! (コンピューターと遊ぼう!)

自治体オープンデータの意義は、自治体の仕事を減らし、民間企業による豊かさの創出!


オープンイベントさいたま
埼玉県オープンデータ」で唯一の4つ星オープンデータ、RDFで提供されていた広報情報オープンデータをjig.jp、この夏のインターンに参加する高専生による作品「福井県のイベント (src on GitHub)」を埼玉化。 自治体による広報の仕事を減らせるかも。

RDFにもターゲット情報が入っていれば、若者や、高齢者など、対象別に見やすいアプリづくりもできるので、一層伝わりやすくなります。 Vue.jsを使ったモダンで見やすいアプリづくりは、地域の高専生や、JavaScriptが使える小中学生にとって良いネタにもなります。


オープンデータを庁内で広めるオープンデータリーダーを育成する総務省企画「オープンデータリーダ育成研修
自治体の中でやっている繰り返される仕事、オープンデータで効率化できませんか?
イノベーションのはじめのいっぽは、当たり前に疑問を持つこと。
今までを変える意識と行動力を持つ人、それがリーダーです。
教材はオープンデータ、今すぐ、行動を!


オープンデータによる連携を活かす、11万件もの公園データを提供する「PARKFUL
公園の設備を提供する会社、株式会社コトブキとの連携がおもしろい!


東さんによるオープンデータ講義。震災での反省から始まったオープンデータ。避難所データがオープンデータではないと、活用するために問い合わせが必要。実際に30箇所問い合わせて、OKの返事はたった9。 事実、災害時にサーバーがダウンしていて避難所データにすらたどり着けない事態が未だに発生しています。


ネット時代、データを広く共有するコストが劇的に下がりました。まだまだ市民意識が追いついていませんが、まずはデータがあれば、楽しく可視化するアプリが生まれ、広まります。 アプリを誕生させるためには、開発者にとって優しく横展開が可能でうれしい「5つ星オープンデータ」が必須!


鯖江市のオープンデータ産みの親、牧田さんに会ったことがきっかっけで、自分でなんでもやっちゃうことにしたという、埼玉県深谷市の斉藤さん! 「ふかやMap」から様々な位置情報付きデータをオープンデータとしてダウンロードできます。


odp - オープンデータプラットフォーム
5つ星オープンデータはじめのいっぽに、避難所データをExcelでまとめてアップロードするだけ。無料です。

さまざまな業務課題や、社会を豊かにする取り組みへのチャレンジに向けて、まずは最小限の手間で、5つ星オープンデータ化と、データをアップした瞬間に動くアプリをご体験を!

5つ星オープンデータ対応避難所ナビアプリ「ヒナンパス

今週末、鯖江のサンドーム福井ではB'zライブ
気になるサラベ柄ポーチ、サイズ感が気になったのでVR。

realbox in VR - 幅18cm x 高さ10cm x 奥行き8cm」スマホVRでもOK!
なるほど、思ってたよりちょっと大きいけど、悪くないかも。
手に持って動かせるといいかも。
自分の手の大きさを測って、コントローラーの替わりに出すと、きっともっと分かりやすい。
PCでも動きますが、サイズ感は伝えられません。


realbox 100インチテレビ (SONY KJ-100Z9D)
おまけに、100インチの4Kテレビ、SONY KJ-100Z9D(コンポジット入力端子も付いているからIchigoJamもOK!)も見てみました。大きい!

URLのパラメータで大きさと色を自在に指定できる、リアルサイズを体感するVRアプリ「realbox」

W cm x H cm x D cm

今回のプログラムは37行でした。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>realbox</title> <meta name="description" content="real box in VR"> <script src="aframe.js"></script> </head> <body> <script>"use strict" window.onload = function() { const hash = document.location.hash let w = .18 let h = .10 let d = .08 let c = "#333333" if (hash.length > 1) { const s = hash.substring(1).split(',') const a = s[0].split('x') w = parseFloat(a[0]) / 100 h = parseFloat(a[1]) / 100 d = parseFloat(a[2]) / 100 c = s.length > 1 ? "#" + s[1] : c } const box = document.createElement("a-box") box.setAttribute("position", { x: 0, y: 1.3, z: -.5 }) box.setAttribute("width", w) box.setAttribute("height", h) box.setAttribute("depth", d) box.setAttribute("color", c) scene.appendChild(box) } </script> <a-scene id="scene"> <a-sky color="#ECECEC"></a-sky> </body> </html>

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

A project started to translate the documents of IchigoJam for English speakers from a member of IchigoJam-FAN.
I added descriptions in broken English to IchigoJam doc opendata, and updated apps.

"IchigoJam BASIC command list" also for printings

I'd be glad if you sent me a comment in cool translated words!
"IchigoJam doc repository on GitHub"

5つ星オープンデータとして規格化しておくと、自分で使うときにも便利!

大人には便利なアプリですが、スマホを持っていない小学生には紙、大事。
アプリと同じオープンデータを使って紙出力版を生成するwebアプリを作りました。

IchigoJam BASIC コマンド一覧 (印刷用)PDFダウンロードはこちら
やさしい順に並んでいますが、ABC順カテゴリ順としても表示可能。お好みでどぞ!


IchigoJam BASIC コマンド一覧アプリ
カテゴリデータ、優先順位データなどを追記したので、アプリも合わせてバージョンアップ。機能ごとの簡単にチェックできるようになりました。 sabae.cc語彙も少し成長。

オープンデータはGitHub上にあります「IchigoJam/doc: documents of IchigoJam
issuesを使ったコメント、プルリクなど、大歓迎です!
次は英語化?

そろそろリリース、IchigoJam BASIC 1.4。
高専生、大学生など、スマホを持っている人にもわかりやすいリファレンスづくり、スタート。


IchigoJam BASIC コマンド一覧
ソースはGitHubにありますので、追記翻訳など、プルリク、コントリビューター希望、歓迎です。
1.4搭載予定のコマンドや、使い方も含まれています。


CSVデータ
schema.orgの語彙と、足りない気がしたものはsabae.cc語彙を作って補っています。

ichigojam-1.4.0b01.zip
- POINTで文字がある場所をチェックした場合1を返すように変更

総額3700万円をかけた一大イベント、鯖江市議選「SABAE20総選挙」スタート!
候補者25人から今後4年、10億円をかける鯖江市議会の運営メンバー20名が決まります。(議員報酬1人あたり3400万円)
福野あおい 鯖江市議会議員 — 鯖江市議会議員選挙

鯖江市の未来を担う、20名のポートフォリオを決定するのに、1名だけを選ぶという不思議な選挙制度ですが、現行ルールなので仕方ありません。
Code for Sabae として、候補者一覧オープンデータ(CSV-utf8)デジタルポスター掲示版アプリをひとまず開発しました。 いろんなアプリを作って盛り上げましょう!(ハッシュタグ #sabae20


SABAE20総選挙2019 鯖江市議候補者デジタルポスター&オープンデータ
ダブリンコアに習って、sabae.cc語彙を作りました。schema.orgにないものを勝手に作っていきます。

選挙カーを使う候補者の方、前回の2015年選挙時につくったアプリをご活用ください!

選挙カー連呼スポット探しアプリ
オープンデータ選挙カー連呼スポット探しアプリ 鯖江市議選スタート!
* 認められているのは、8時〜20時、学校・病院・診療所その他の療養施設の周辺以外、連呼行為(車上の連呼以外は公職選挙法違反です)

各地で欲しいとの声多数。地方公共団体の方、学校と病院オープンデータ、ぜひ5つ星オープンデータ化してください。(odpへの登録いただければ、即アプリに反映されます)

投票日は、6/30日曜日です
鯖江市議会議員選挙のお知らせ – めがねのまちさばえ 鯖江市

かけあわせが熱い、クロステックデザインコース、京都造形芸術大学情報デザイン学科にてIoTハッカソン!ユニークなプロダクトのたまごが産まれました。

3台のIchigoSodaを川沿いにおいたセンサーIoTを使った、あるサービスのデモ発表。スマホで状況が把握できて便利! ユニークな5つのプロトタイプ、実際見てみると発想が更に広がりますね。


資料「IoT&スマホアプリ プログラミング with IchigoJam x sakura.io
IchigoJamを使って、プログラミング、電子工作、ネットワーク、IoTの基本をざっとハンズオンして、自由製作ハッカソン!


5V/GND/信号線、ジャンパーピンで簡単に接続できるセンサーや出力デバイスが27コつまったセット「Gravity」便利で楽しい! (まとめ買いは「こちら、ロボショップ」がお得!)


アナログセンサーからの値を自在に操るのがプログラミング!
フローチャートと照らし合わせて考えるとわかりやすい!


音楽、人気!
エイリアンスピーカーをつなぐと、大きくていい音で鳴らせます!


IoT化を進める前に、まずはシンプルローカルネットワーク with IchigoJam x 2
IN1とOUT1を相互につなぎ、GND同士をつないで、電位を合わせて、プログラムを書いたら二人でボタン通信開始!

10 ?BNT(),IN(1):CONT

どうやって会話するか話してみよう。お互いの約束、それが通信プロトコル。
モールス信号は、人間同士の代表的な通信プロトコル。
世界中を結ぶ電脳ネットワーク、インターネットはTCP/IPをベースにいろんなコンピューター同士のプロトコルでできています。


スマホでもPCでもVRでも動く!人気のプログラミング言語、JavaScript でスマホアプリ入門。
iothackbase - GitHub」を Fork して、開いて、IDだけ設定して、IchigoSodaから操る!


準備ができたら、IchigoSodaからコマンド入力

IoT.OUT 1

ノートPCで開いているページ(webアプリ)がパッと赤く変ってメッセージがでたら成功!


アイデア決定からスタートする、自由製作タイム。
アイデア苦手!?いやいや、アイデアは機械的に無限に作れます。
画像検索と組み合わせたバージョンアップ版idea3x3idea3x3img」誕生!
いいアイデアかも?と思ったら、とりあえず深く考えず作れば見えてくる気づきと、作るほどに伸びるスキルに得しか無い!


いろんなセンサーを使ってユニークなIoTづくり!


IchigoJamリファレンス」を読んで調べて、自分で創る力をつけよう!
解決力さえ身につけて、最新技術が楽しいおもちゃにしよう!


IoTと地図アプリとの連動もいいですね!
その筆頭、バスロケシステム、その筋屋さんによる実験、開発が快調に進んでいます。
学生も海外からの外国人も迷い、不満を抱える、京都の複雑なバス事情もガラッと解決しちゃうかも!?


Googleナビに導かれるまま行った先にバス停なし。同じバス停で路線ごとに異なるバス停!
リアルタイムな位置情報に加え、鯖江のバスでやっている混雑状況も5つ星オープンデータ化して、ナビが取り込めるようになれば、来たバスに乗れない問題や、大幅遅延問題が解消するかも?


もう一つ発見した、Googleナビ、データの問題。京都の中心街、三条大橋、ナビでは右折指示も、実際は曲がれない。 21世紀はデータインフラの時代。交通オープンデータをはじめ、いろんなデータで楽しいを創ろう!


Oculus QuestによるVR体験、JavaScriptを使ったwebアプリづくりも簡単です。
HTMLからできるVRアプリづくり、ぜひチャレンジしてください!(カテゴリー:vr


京都造形芸術大学、アートとテックがクロスする新世代プロダクトの誕生、楽しみですね!
クロステックデザインコース|情報デザイン学科|学科・コース|京都造形芸術大学」

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