世界のデータは、まだバラバラ。5つ星オープンデータによってつながる未来、創りましょう!

対策ダッシュボード和歌山県、奈良県、埼玉県の速報連携を実施し、連携先都道府県は18になりました。 これで18/47、38%が連携できたことになります。(連携条件、オープンデータとして新型コロナウイルス対策を公開していて、退院数・死亡数がデータから分かること)

この条件の都道府県の連携は完了。オープンデータと明記はなくても、政府・行政の公開は、オープンバイデフォルト。次は、オープンデータとみなし、連携拡大を図ります。


COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー
HTMLによるオープンデータは、5つ星オープンデータにおいて、星いくつか?実は、1つ星にも5つ星にもなりえます。 肝心なデータが画像であれば1つ星ですし、きちんと他とつながる語彙(ボキャブラリー)が設定されていれば、5つ星オープンデータです。

埼玉県のサイトを例に、実際にHTMLを5つ星にしてみます。
感染確認状況や関連情報 - 埼玉県
公式サイトにある、累積陽性者数、累積退院数、累積死亡者数、更新日。これらデータがあれば新型コロナウイルス対策ダッシュボードは更新可能です。


「ソースを表示」で、HTMLを確認すると、outlineというクラスは設定されていますが、基本的に人間向けのテキスト文章のみとなっています。画像ではないので、2つ星オープンデータです。 こちらを読み取ってデータ化するプログラムを作って、連携しましたが「parseInt(text.match(/県内の陽性確認者数:(\d+)人/)[1])」と文の書き方を決め打ちして作っているので、表現が変わってしまうと読み取れなくなります(src on GitHub)。

このHTMLを見た目を一切変えずに、5つ星オープンデータ化します。鍵は、itemscope itemprop itemtype (Microdata)と語彙(ボキャブラリー)。「COVID-19 Vocabulary 新型コロナウイルス対策ボキャブラリー」を使って、サンプルを作ってみました。

<table class="outline" itemscope itemtype="https://wvw.stopcovid19.jp/schema/"> <tbody> <tr> <td> <span itemprop="pref" value="Saitama"></span> <p><span class="txt_big">県内の陽性確認者数:<font color="#c51f1f"><span itemprop="npatients">868</span></font></span><span class="txt_big"><span class="txt_red">人</span><br /> (<span itemprop="lastUpdate" value="2020-05-01">5月1日</span>公表分:<font color="#c51f1f">5</font><span class="txt_red">人</span>)</span></p> </td> <td> <p>入院:280人(うち重症者:16人) 宿泊療養:50人 自宅療養:202人</p> <p>退院・療養終了:<span itemprop="nexits">295</span>人 死亡:<span itemprop="ndeaths">36</span>人 調整中:5人<br /> &nbsp; ※<a href="https://www.pref.saitama.lg.jp/a0701/covid19/jokyo.html">県内の発生状況(陽性確認者の状況・一覧)</a></p> </td> </tr> </tbody> </table>

データを囲むタグの属性として、itemscope と語彙を指定した itemtype を設定し、データにあたる部分を表示に影響を与えない span タグを使って囲み、itemprop属性で意味を指定します。(参考「最新のSEO事情!schema.orgで構造化マークアップせよ! - Qiita」「サイトをエンジニアフレンドリーにしよう!robots.txt / sitemap.xml / itemscope / opensearch で機会判読可能に改良する」)

こうしてできたHTMLであれば、下記のプログラムで簡単に新型コロナウイルス対策のデータとして、すぐ活用できます!

const html = await (await fetch(url)).text() const res = htmlparser.parseItem(html, 'https://wvw.stopcovid19.jp/schema/') console.log(res)

urlからhtmlを取得(fetch)して、対策語彙をデータを抜き出し(parseItem)する JavaScript のプログラム例 (src on Github)

人間も機械もうれしい、HTML5つ星オープンデータ、ぜひ使ってみてください!
失敗しても見た目に影響ないので大丈夫ですし、プログラムでの読み取りは成功するまでサポートしますのでご安心を。 (サポートメールアドレス fukuno@jig.jp、新型コロナウイルス対策語彙サポート宛 )


COVID-19 Japan - 都道府県別 新型コロナウイルス陽性患者数
退院者増加し、現在患者数が5%以上減少している都道府県は白下矢印が増えました。決して油断はできませんが、医療リソースのキャパを見て、自粛を段階的に緩める検討もありでしょう。

ただ、東京都はコールセンターや検査数が頭打ち、潜在患者数が多いことが想定されるので、注意が必要です。

都内の最新感染動向 | 東京都 新型コロナウイルス対策サイト」より、新型コロナコールセンター相談件数 4/30実績値

オープンデータは、行政からの一次情報が正しく早く伝わるツールです。
では、正しさとは何でしょう?


日本の自治体「信頼の一次情報」実現率
SSLかつ.lg.jpドメインな自治体は、32.1%

見たり聞いたりしたことの正しいか?その出処、出典を当たることで、確認できます。

例えば、福井県庁が病床数を発表したと聞いたとします。福井県庁のサイトを見て、その数が確認できれば、正しいと言えます。(対策ダッシュボードは一次情報のみで更新しています)

でも、本当にそのウェブサイトは福井県庁のものでしょうか?偽物かもしれません。 真偽は表示しているURLで確認できます。福井県庁のドメイン(URLの一部)に「pref.fukui.lg.jp」とあります。この「.lg.jp」 は、日本の地方自治体を表すので大丈夫です。(地方公共団体における情報セキュリティポリシーに関するガイドライン

ただ、その情報は改ざんされたものかもしれません?ブラウザによって表示は異なりますが、URLやその付近を見て、http:// で始まっていたり、「not secure」「安全ではありません」などと表示されている場合、行政のサーバーとお使いのブラウザの間の通信経路が暗号化されていないため、インターネットの経路上の誰かが改ざん可能な状態にあることを意味します。安易な信用は禁物です。


なんと、北海道庁はSSLに非対応。早急な対応が必要です。

もうひとつ、見ているブラウザ自体は安全でしょうか?出処の怪しいブラウザや、アプリ内ブラウザ、入れているプラグイン、入れているアプリによっては、手元のパソコンや、スマホ上での改ざんも有りえます。より信頼できるソフトを使い続けることが大切です。


日本の都道府県と市区町村のサイト一覧
なぜか国でもまとめていない全国地方自治体の公式ウェブサイト。上記、信頼できないドメインからの変更などのため、どんどんアドレスが変わっています。全国の新型コロナウイルス対策情報のまとめニーズもあり、市区町村全1916サイトを調べなおして更新しました。


list of local government in Japan (日本の地方自治体一覧オープンデータ)
調査したデータはもちろんオープンデータ。CSV/JSONでどなたでも自由に活用いただけます。


日本カラム地図 - TabularMaps Japan
オープンデータの活用例として、昨日開発の全国カラム地図から全自治体の公式ウェブサイトへ飛べるようにしてみました。


日本の自治体「Webの安全」対策率
SSLを使っている率、72.3%


日本の自治体ドメインセンサス
.lg.jpを使っている率、40.2%

オープンデータ化の取り組み、ご紹介いただきました。ひとつひとつ改善していきましょう。
データ解析を民主化せよ 新型コロナで重み増す「オープンデータ」:日経ビジネス電子版
行政機関の「オープンデータ」活用は不十分、新型コロナ対策の足を引っ張る | 日経クロステック(xTECH)
プロデューサーシップのススメ #02 データシティ鯖江から始まったウェブ新時代|PLANETS|note

テレビの地上波に、スマホで気軽にリアルタイム参加!

MC若新雄純と福井テレビによる実験番組生放送「じゃみじゃみ(仮)」、3年目はゲストに福井出身アーティスト、川本真琴さんと荒牧勇仁さん。 福井でしか見られない深夜番組、福井弁でゆるーく、時折届くコメントに触れながら、生でのコラボライブも交えた台本なしの1時間。

視聴者の方も喜んでくれた様子!ネット部分に、一日一創生まれの「コメント.net」カスタムが活用されました。 不測の事態に備えるも、平和に流れるコメント達。楽しく使っていただき感謝です!

「じゃみじゃみ」とは福井弁でアナログ放送のノイズ画面のこと、ランダムドットステレオグラムも一種のじゃみじゃみ。

shoot-rds」(タップして打ち、外したら負け)

コラボライブの様子!荒巻勇仁さん4/1ファーストアルバム発売!

曲は「川本真琴 feat. TIGER FAKE FUR/アイラブユー」途中、川本さんのお母さん、川本ユキさんのポスターが映っていておもしろい。ロケ地福井、鯖江の西山公園とかわいいレッサーパンダも登場してます。

地方局ならではのテレビとネットと楽しいコラボ。広げていきましょう!

次回に向けて、配信プラットフォーム「ふわっち」などを使ったネット連動展開、どうでしょう? 尖ったテーマ x 濃い視聴者 x 双方向通信アプリの組み合わせ、ますますおもしろくなりそうです。

福井市の中学生からの質問

HTMLのテンプレートにMarkdownを埋め込もうと考えたのですが、いい方法はないのでしょうか。
GitHubでドキュメント書く時に使うMarkdown記法、HTMLの替わりにシンプルにマークアップできるので慣れるといろいろ使いたくなりますよね!作りました!

<script src="https://taisukef.github.io/marked_md/marked.min.js"></script> Markdownを埋め込むよ <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

先頭のscriptタグはページ内にひとつあればOKです。
思う存分 Markdown を使って、サクサクウェブサイト作っちゃいましょう!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

スタイルシートはお好みでどうぞ!

参考までに、この実現に至るまでの調べ方、作り方を紹介。
1. "markdownをhtmlに埋め込む"で検索
2. 「Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita」が見つかる
3. MITライセンスの marked が使えることが分かる。でも、JavaScript埋め込みで /* などに制約あり
4. ` を使った記法を使えば制約が緩めて、シンプルに使えるような関数を実験しながら作成

<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script> const md = function(html) { const div = document.createElement("div") div.innerHTML = marked(html) document.body.appendChild(div) } </script> </head> <body> <h1>markdown</h1> <script>md(` # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 `)</script>

5. forkしたmarkedにmdを加える(ちょっと強引だけど、MITライセンスなのでOK)
6. GitHubのSettingsで、GitHub Pages として master branch を公開、誰でも使えるようになる

お店を開くのは大変ですが、ネット上の仮想店舗なら簡単、無料!
自分だけのウェブサイトづくり、Herokuを使って無料ではじめる方法を紹介します。

salesforce.comの子会社、Herokuには、サーバーサイドでプログラミングでき、広告なども一切ない代わりにアクセス制限がある、無料版があります。


JavaScript, Ruby, Java, PHP など、さまざまな言語に対応しているHeroku、今回はJavaScript/Node.jsを使って、ひとまずウェブサイト立ち上げまでをご案内!

1. 準備
Node.js をインストール
git をインストール

2. サンプルをローカル(自分のPC上)で開く
ターミナルやコマンドプロンプトを開いて、任意のフォルダに移動(cd)して、下記を順番に実行

git clone https://github.com/heroku/node-js-getting-started.git cd node-js-getting-started npm install node index.js

http://localhost:5000/を開くと、下記のような画面がでれば成功です!

(でなかった方 @taisukef までご連絡ください)

3. オリジナルサイトづくり
HTML/CSSを書いて、オリジナルサイトに変更しましょう。

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>わたしのウェブサイト</title> <meta property="og:image" content=""> <meta name="viewport" content="width=device-width"/> <meta name="format-detection" content="telephone=no"> <style> body { font-family: sans-serif; color: hsl(40, 80%, 10%); background-color: hsl(40, 90%, 80%); text-align: center; } .main { margin: 2em; } .footer a { color: gray !important; } </style> </head> <body> <h1>わたしのウェブサイト on Heroku</h1> <div class=main>ようこそ!わたしのウェブサイトへ</div> <div class=footer><a href=https://fukuno.jig.jp/>無料ではじめるウェブサイトづくりHeroku編</a></div> </body> </html>

上記HTMLとCSSでできたウェブサイトを自由にアレンジし、publicフォルダに index.html というファイル名で保存。
先程開いた、http://localhost:5000/をリロードしてみましょう!

できました!

4. ウェブサイトを公開する
Herokuにユーザー登録して、Heroku CLIをインストールします。
再度、ターミナルやコマンドプロンプトを開いて、同じディレクトリへ移動(cd)し、URLのホスト名にあたるユニークな名前をアルファベットと数字、ハイフンの組み合わせで決めます。

heroku create taisukef-firstweb1

私はここで taisukef-firstweb1 と名付けましたが、同じ名前は世界中の誰であっても付けられません。
続いて、Herokuのサーバーへファイルをアップロードします。

git add . git commit -m "add index.html" git push heroku master

commitの後に続くパラーメーターで、コミット時のメモを書いておくのがプロジェクト管理ツール git のポイント。
開いてみましょう!

heroku open

無事、表示されましたか?
付けた名前 + .herokuapp.com があなたのウェブサイトのURLになります!

5. 更新が面倒?
マイクロソフトの子会社、GitHubが提供する、GitHub Desktopから「Add Repogitry」で追加すれば、GUIで使えます!

6. next steps...
あとは、自由にデザイン変えたり、内容を追加したり、ページを増やしたり、サーバーサイドのなにかプログラミングを加えたり自由自在です。
こちらが、今回ベースに使った Node.js の入門です。データベースへの接続方法の記載もあるので、試してみましょう。(add-onsは、カード登録が必要な様子)
データーベース入門に、北九州高専生で、インターンOB、ふっけの記事!
[Heroku Postgres] Herokuを使って無料でデータベースを利用する - Qiita
この記事きっかけで Heroku 初使用、ありがとう!


かんたんにスタートできるHeroku、制限が来そうなら、月額$7からの有料プランを検討しましょう。

自分でサーバーを管理にチャレンジするなら ConoHa(プリペイドOK!)やさくらインターネットのVPS、 サーバーサイドのプログラミングが不要なら、GitHub Pagesがオススメです。


小中学生向けプログラミングコンテスト「PCNこどもプロコン2019-2020」締め切り間近!
プログラミングに慣れてきたら、サーバーサイドプログラミングにもチャレンジしよう!

マイクロソフトの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

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