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

世界をつないだOS、web。
JavaScriptを使って創れば世界中のPC、スマホを持ってる人に届けられます!

日々アップデートされる、JavaScript用の数々な便利ツール。 そろそろリニューアルを考えている本ブログ、静的ページ生成もサクッとこなしてくれるという Nuxt.js の前段として Vue.js はじめ。

日本コミュニティがしっかりしていて、本家ドキュメントがわかりやすい!
はじめに — Vue.js

ひとまず、ネパールの車のナンバーや、お札など、まちなかでも良く見かける、ネパール数字変換アプリを、漢数字変換アプリをもとにつくってみます。

Vue.js を使い始めは簡単。1ファイル vue.js を読み込むだけ!

<meta charset='utf-8'/> <div id="app"> <input id="jp_num" v-model="num"><br> <span id="nepali_num">{{ npnum }}</span><br> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>"use strict" const toNepaliNumber = function(s) { return s } new Vue({ el: '#app', data: { num: "192.168.0.1", }, computed: { npnum: function() { return toNepaliNumber(this.num) } } }) </script>

v-model や、 {{ }} を使って、HTMLとJavaScriptをつなぎます。
数字をネパール数字に変換するJavaScriptのメソッド toNepaliNumber を実装して、できあがり!

const toNepaliNumber = function(s) { const NEPALI_NUM = "०१२३४५६७८९" let res = [] for (let i = 0; i < s.length; i++) { const c = s.charCodeAt(i) - "0".charCodeAt(0) if (c >= 0 && c < 10) res.push(NEPALI_NUM[c]) else res.push(s.charAt(i)) } return res.join("") }

to Nepali Num (base)」 → to Nepali Num (with CSS and so on..) Vue.js の真骨頂は、配列や複雑なデータ構造も View としての DOM に即反映されるところ。
いろんなデータをきれいに整理したwebサイトやwebアプリ、更にすばやくたくさん作れそう!
PCN大阪、森さんの本もどうぞ!「動かして学ぶ!Vue.js開発入門 (NEXT ONE)

世界中のプログラマーが自らの道具を創り、磨き、シェアされ、それらを使って一段と強い道具を作るループは、構造的に高速化するしかありません。 ぜひ、この輪に加わわっちゃいましょう!

はじめての JavaScript のための、時計、地図、AR、ゲームなど作成用シンプルフレームワーク jigjs もどうぞ!

links
- Vue.js
- jigjs - Numbers in Nepali language on IchigoJam

30年前の今日、1989年3月12日、ティム・バーナーズ=リー氏「web」を発明!
The original proposal of the WWW, HTMLized

インターネットで結ばれたコンピューター内の文書同士をリンクで結ぶというシンプルなコンセプトと、オープンなシステムは、瞬く間に広がり、世界中を覆った。 ただ、世界中に兆単位にある文書をすべて辿ることはもはやコンピューターでも不可能。

リンクに意味をつけるだけで整理できるティム氏による更なる発明「セマンティック・ウェブ」は、同氏提唱の「5つ星オープンデータ」と共に花開く。

そろそろ本ブログも次世代webへと移行しなければと、まずはリンクだけを整理したJSONデータを作成。
ひとまず、webアプリとしてグラフ表示してみたのがこちら。(これでも一部))

とても、手におえないので、直近300件の相互に何らかのリンクがあるもののみの表示としたものがこちら。

一日一創 graph
ブログ内でのリンクを可視化し、タップまたはクリックでそのページを開く。
リンクのつながりで、関連ある塊感だけがわかる状態。

シンプルなリンクは世界中をつないだ偉大なアイデア!
ただ、世の中を整理するには不十分。
例えば、福井県と鯖江市をつなぐリンク。これだけだと、ただの関係としてしかわからない。
ここで、意味付きリンクの出番となる。

福井県内にある市町のひとつであるなど、組織の含有関係をことを示す「意味付きリンク」でつなげば日本にいくつ市があるか瞬時にわかり、世界中の自治組織がすべて整理できる。

本ブログ内のリンクはまだ意味がついていない状態。
まずは、自分のオープンデータを整理しながら、次世代web化のメリットを明らかにしていきたい。

links
- Web will connect world as one! (web25周年)

目指せG空間ハッカー!
インプット、アイデアソン、チーム分け、ハンズオンアプリづくり体験まで行った初日に続き、2日目はハッカソン!
ステキなG空間アプリ9作品、参加者による投票によって、東京での発表会へと出場する2チームが決定しました。

高校、高専生、大学生から社会人、山口県、石川県、東京都などの参加もあって大いに盛り上がったG空間ハッカソン。
メガネポーズで記念撮影!


今日の会場は、サンドーム福井、小ホール。こちらも天井高くて気持ちいい。

成果発表会、持ち時間は5分。9チームから、デモ付きプレゼンテーション!


チームB. お店も観光客も時間有効活用サービス
店の空き時間と、出先でちょっと作業したい人のマッチング。
店舗の人向けデータ登録と、検索、地図へのマッピングまで動いてた。
オープンデータを元に入力支援したり、電源やWiFiは備考でなく正規化して、5つ星オープンデータにしたい。

細かいニーズ同士のマッチングはITならでは!


チームE. 危機一髪回避サービス
出先でスマホが使えないは、ほぼ災害!


コンセントをAR表示して、最寄りの電源コンセントが利用可能なスポットまで案内するアプリ


お店の外観、内装、商品のセット、どんなお店にもほしいですね。
写真、大事!オープンデータとして集めたい!
コンセントの空き状況や、使用量をリアルタイムにオープンデータ化するIoTコンセントとかも便利かも?


チームI. みんなどこに通った?マップ
初めての土地、特に地方は人通りがないのでどこにいったらいいか分からない。足跡を可視化しよう!


鯖江駅からサンドーム福井までの道筋。発表社自らがしっかり迷ったとのこと。


みんなどこ通ったマップがあれば、熱いスポットが一目瞭然!
年代別、性別、時間帯別、曜日別、さまざまな角度で分析して、楽しいスポット紹介だけでなく、新規出店用データとして、安全性向上データにも!
データベースを構築し、Go言語でサーバーアプリケーションまで準備と、高専生エンジニアっぽい作品!


チームH. AR市長が観光名所を案内
Hana道場に通う、柔道部の高校生チームによる、ARで市長が登場し、観光名所を案内してくれるという作品。


Unityを使って、ARマーカーにスマホをかざすと、空間に登場する市長に大げさに驚く寸劇付き。さすが、受け身がうまい。
街中にマーカーを置きまくる作戦、ぜひやろう!


チームG. バスの確認サービス
利用者が多すぎてバスに乗れない、バスの遅延で待ち時間が無駄、リアルタイムオープンデータで解消しよう。
日本版GTFSによって、続々と日本国内のバスオープンデータが広まってます。
福井市 京福バスのAPIは残念ながら運用停止中でした。
鯖江市 つつじバスAPI」「つつじバス乗客数」で実現しましょう!
身近な課題の解決、自分で作って自分で使う!


チームC. おやさい 逆アマゾンダッシュボタン!
農家さんが作った食べきれない野菜、近所の人は同じものを作っているのであげられない。


あげたい野菜の数だけボタンを押すだけ逆ダッシュボタン!


IchigoSoda(IchigoJam x sakura.io)を使ったプロトタイプ!


ほしいを登録しておくとプッシュ通知され、地図上の野菜アイコンからタップで農家さんの写真が見え、農業への親近感アップ。
感謝の気持ちは、地域通貨の投げ銭スタイルがおもしろい。


東京進出!
副賞に大阪のフルタ製菓x鯖江市役所「サバエイト


チームD. 高齢者自動送迎サービス「病院へGO!」
風邪かと思ったら誤嚥性肺炎という例が増えていると、医大生。
交通弱者である高齢者、痛い場所と顔写真をシンプルに送って、病院からの自動運転送迎を使おうというサービス。


人の体の絵をタップ、ARアプリによる撮影、呼び出し完了までとってもシンプル!病院側も呼び出しを受けた患者さん情報が事前によく分かるという、プロトタイプ。
わかりやすいUIと写真による119、良いかも!?


チームF. 有料パーキングの簡単支払い
駐車場にまつわる課題、空いている駐車場を探すのが面倒、止めている間の料金が心配、精算が面倒を全部解決!
場所、台数、料金、営業時間など、駐車場に関する細かなオープンデータを語彙化して、IoTによって空き状況をリアルタイムオープンデータ化して、賢く案内!
QRコード決済、LINEペイを使って、すばやく支払いまでできたら便利ですね!駐車後も安心できるよう、止めた場所、料金確認などあるのがいい感じ。
PayPayなど、個人間送金もできるお手軽決済サービス、空き地を気軽に時間貸しできても便利そう!


東京進出!メガネ型のサバエイト、みなさんで分けていただきました!


チームA. 近くに何がある!?(公共の施設を探そう!!)
もともと兵庫県出身「近くに何があるか知りたい」を地図上でアプリ化!
学校、病院、警察、駅など、SPARQLをそれぞれ呼び分けて、地図上に表示。この日のためにノートPCを買って参戦とのこと!
SPARQL、ぜひいろいろ遊んでくださいー

初日、インプット

主催者、総務省 情報流通行政局 地域通信振興課長 吉田正彦さんより激励!


「G空間データの潜在能力」
事業構想大学院大学 小塩篤史さん、早期警報、都市マッピング、スポーツ、スマホログ解析、室内測位、おもてなし、ヘルスケア、ドローン、農業など、G空間とつながる、さまざまな分野のご紹介。


奈良先端科学技術大学院大学、オープンデータ伝道師、新井イスマイルさんは動画で登場!


宇宙や衛星にも広がる「地理空間情報とプログラミングと現在とこれから」
日本情報経済社会推進協会 電子情報利活用研究部 主任部員、オープンストリートマップ・ファウンデーション・ジャパン副理事長、飯田哲さん(@nyampire)
飯田さん記事「行政サイトでウェブ地図を使う際の注意点などまとめ - Qiita」は参考になります。 ここでも紹介されている国営で自由な地理院地図のデザインの問題を egmapjs は改善!

アイデアソン&チーム分け風景

1分半で3つのアイデアを考えて、次の人回す。これを6ターン!まずは質より量!たくさんのアイデアを机上に。


こちら7テーブルでのグルーピングされたアイデア「アイデアオープンデータ(PDF)」にしました!


みんなで見て回り、自分のアイデアをまとめて、絵にする時間。


テーブル内で自分のアイデアを紹介。良いアイデアに星印をつけましょう。


テーブルごとのアイデアのトップ2をみんなに発表。
やってみたいアイデアに集まって、チームができました!
その後、開催「かんたんマップアプリづくりハンズオン」は別記事参照。

ハッカソン風景

IoTを駆使するチーム。IchigoSodaによるIoTを紹介しました。
kintone x sakura.io x IchigoJam 親子イベント」「こどもIoTハッカソン」でおなじみ、BASIC言語による簡単IoTをご紹介。
IchigoSoda、IoTコマンド搭載で、より便利になった IchigoJam ver 1.3 でぜひ遊んでください!


経路探索を使うチーム。


経路探索サンプル - egmapjs チュートリアル
ただし、この経路探索APIはテスト用、実運用する場合は別途商用のサービスへの申込みが必要です。(Api usage policy · Project-OSRM/osrm-backend Wiki


SPARQLでWiFiマップ - egmapjs チュートリアル

select ?uri ?name ?lat ?lng { ?uri rdf:type <http://purl.org/jrrk#PublicWIFI>. ?uri rdfs:label ?name. ?uri geo:lat ?lat. ?uri geo:long ?lng. } limit 100


SPARQLでWiFiマップに条件をつけて、電源マップ - egmapjs チュートリアル

select ?uri ?name ?lat ?lng ?plugs { ?uri rdf:type <http://purl.org/jrrk#PublicWIFI>. ?uri rdfs:label ?name. ?uri geo:lat ?lat. ?uri geo:long ?lng. ?uri jrrk:hasPlugs ?plugs. filter(contains(str(?plugs),'有')) } limit 100


ARアプリを使うチーム。内側カメラを使ったARアプリフレームワーク「egarjs」サンプルとしてインカメラを追加しました。


助っ人コーディングが落ち着いたので、TELLOを使った室内巡回自動運転プログラムの実験。
締切5分前のギリギリの時に、お騒がせしてすみませんでした。

告知タイム!
2日間、一緒にハッカソンに参加した仲間、せっかくなので、イベント紹介で広がる交流の輪。


学生団体withによる「もしも最先端システムでビジネスゲームをできるとしたら。「体験型ビジネスゲーム」 | Peatix
ビジネスが学べる「ERP GAME」2.23、再び開催!


こちらは東京、同日2.23-24開催「NICT SpaceHack 2019」宇宙や衛星オープンデータ活用ハッカソン!
Tellus」の正式版公開も近い!?

全体講評
大事なのは楽しむこと。
2日間、長時間に渡るイベント、参加者の人が終始楽しそうにしていたのが印象的でした。

楽しく作った、楽しいアプリは使うし、使うと改善点が見えてきて、楽しく改善、どんどんよくなる。
楽しいと誰かに教えたくなるし、広がる。
データがつながる、5つ星オープンデータで、使える地域が隣の市、隣の県、日本中、世界中へと広がり、イノベーション!

もう一つ大事なのは、アプリの名前。
せっかく作った楽しいサービスはまさに我が子、みんなでステキな名前をつけてあげましょう。
伝えやすい、探しやすいがいい名前のコツ!

年齢や、住んでいるところ、専門分野もみんなバラバラ、みんなでつくった、9つの作品。
視点が違う人が集まるともっと楽しい、データが増えるともっと楽しい。使えるテクニックが増えるともっと楽しい!

ちょっとずついいものを作って広めていきましょう。
まずは、気楽な「G空間ごはん会」からはじめます!

links
- 総務省|「Geospatial Hackers Program」の開催《地理空間情報を活用可能な人材の裾野拡大に向けたハッカソン等の開催》
- 消火栓へゴー!? かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド公開 - G空間ハッカーはじめのいっぽ(1日目、ハンズオン)
- GEOSPATIAL Hackers Program in福井まとめ
- G空間ハッカソンに参加しました | 鯖江から世界へ! 学生団体with

G空間ハッカーはじめのいっぽ「Geospatial Hackers Program | Peatix
福井会場の1日目は、サンドーム福井のものづくりキャンパス


40名もの参加者、みんなでつくろう地図アプリ!


Chromeじゃないと動かなかったり、コピペの貼り付け場所が分からなかったり、いろいろありましたが、それぞれの地図アプリできました!
Forks · code4fukui/egmapjs


かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド (PDF)
分かりづらかった点など、ブラッシュアップしました。
地図アプリのページ、下にQRコードを出したので、すぐにスマホで確認できますよ!
誰かに教えるのも簡単、自分だけの地図アプリ、自慢しちゃいましょう。


SPARQLを使ったサンプル位置ゲーム「消火栓へゴー」とすぐにお試し「チュートリアル
こちらを元にあれこれ改造するのもいいですね!

文書を編集するHTML、プログラムをつくるJavaScript、デザイン変更CSS、データを取得するためのSPARQL。
用途に合わせて登場する、4種類のコンピューター言語、興味があるものから、ひとつずつ遊んでみると良いですよ!

links
- egmapjs

地方自治体職員が集結、未来の行政運営を研究する、公益財団法人 日本都市センターの第5回都市調査研究交流会にて、基調講演とIoT、webアプリのハンズオンワークショップを開催しました。
オープンデータで創る地方の未来―オープンデータのトップランナーになるには―


オープンデータとIoTが注目される理由、活用事例を紹介しつつ、実際に手を動かしてもらうハンズオン形式。 プログラミングで制御するLED、IoTで集めるデータ、スマホで制御するIoTをIchigoSodaで体験。 後半は、ノートPCを使ってオープンデータでよく使われる地図アプリを実際、GitHubのアカウントを作って、自分で作ってみるwebアプリワークショップ。 SPARQLも少し紹介できました。


地図アプリ向け、かんたん地図フレームワーク「egmapjs」
チュートリアルを作りました。ぜひ、みなさんで挑戦してみてください!


マップアプリづくりハンズオン(地理院地図編) 地図簡単フレームワーク egmapjs (PDF)
こちらは、スライドオープンデータ。

何かつくった自慢や、ご質問など、サポートはFacebookグループ「Code for Fukui」までどうぞ!

links
- 消火栓へゴー!? かんたんマップアプリづくりハンズオン(egmapjs 地理院地図編)スライド公開 - G空間ハッカーはじめのいっぽ
- はじめようG空間ごはん会 - 福井生まれのG空間9アプリレビューとアイデア集 / 総務省主催ハッカソンレポート Geospatial Hackers Program in 福井

I want to make web apps in Python3.
Python3でwebアプリを創りたい!
Django!


I made the simplest sample web app. (only 27 lines)
超シンプルなサンプルwebアプリを作りました。(たった27行)

import os webappname = os.path.basename(__file__)[0:-3] if __name__ == '__main__': os.environ.setdefault('DJANGO_SETTINGS_MODULE', webappname) import django.core.management django.core.management.execute_from_command_line([ '', 'runserver' ]) SECRET_KEY = 'secret' ROOT_URLCONF = webappname WSGI_APPLICATION = webappname + '.application' import django.core.wsgi application = django.core.wsgi.get_wsgi_application() DEBUG = True #ALLOWED_HOSTS = [ "localhost" ] # webapp main from django.http import HttpResponse from django.shortcuts import redirect, render def root(req): return HttpResponse("<h1>simple django</h1>") from django.contrib import admin from django.urls import path urlpatterns = [ path('', root), ]

At the first, install Django.
まずは Django のインストール

pip3 install django

If you want to run after saving that python program as the name 'test.py'
動かすときは、さきほどのPythonプログラムを 'test.py' として保存して

python3 test.py

Try to access 'http://localhost:8000/' on your browesr!
ブラウザで 'http://localhost:8000/' へアクセス!

It's simple isn't it?
シンプルでしょ?

This is a sample program using the parameter and redirecting (see also official document)
パラメータを使ったり、リダイレクトしたりするサンプルはこちら(詳細は公式ドキュメントをどうぞ!)

# webapp main from django.http import HttpResponse from django.shortcuts import redirect, render def root(req): return HttpResponse(""" <h2>hello django</h2> <a href=t1?p=param>param</a><br> <a href=t2>redirect</a><br> """) def test1(req): return HttpResponse(req.get_full_path()) def test2(req): return redirect("http://fukuno.jig.jp/2388") from django.contrib import admin from django.urls import path urlpatterns = [ path('', root), path('t1', test1), path('t2', test2), ]

links
- Django
- Django documentation | Django documentation | Django
- Django ドキュメント | Django documentation | Django
- simpledjango src on GitHub

あけましておめでとうございます!
今年の一日一創も、よろしくおねがいします。


nenga2019」 - framework websarasa.js
こどもパソコンIchigoJamIchigoJamフォント と websarasa.js を使った年賀アプリ!

本サイト「福野泰介の一日一創」遅ればせながら、ようやくAOSSL(Always on SSL / 常時SSL)にしました。 無償で使えるSSL Let's Encrypt と、軽量webサーバー Nginx で、Javaで開発する自前webアプリケーションサーバー Zerosen へ受け渡す形で実現。

従来の非URL http で始まるアドレスへのアクセスは、https を付ける形でリダイレクトするので、基本的には動くはずですが、混ぜるな危険のSSLの仕組み上、アプリが動かなくなっているものは、順次修正していきます。

アドレスが変更になったことから、Facebookのいいね数などがリセット。心機一転、リスタート。ひとまず、ソーシャルボタンを外したところ、ずいぶん軽量になりました!


日本の自治体「Webの安全」対策率
1年ぶりに調査してみた、地方自治体webサイトのAOSSL化状況。
2017年12月には54自治体、2.8%から、306自治体15.9%まで大幅増とはいえ、対策は遅い。
Webの安全、準備できてますか? 2017年はHTTPS標準化元年 地方自治体対応率はわずか1.5%

SSLの普及率、世界平均69.9%、日本平均62%、アメリカはすでに82%!(2018年5月の調査)
日本のHTTPS導入、普及しつつもまだ不十分 – Anderswodenkender – Medium

オープンデータ伝道師&地域情報化アドバイザーとしての活動にも力が入ります!

links
- 2012年 2012年のテーマ「一日一創」
- 2013年 じゃみじゃみ年賀アプリでスタート、2013年の一日一創
- 2014年 セマンティックWeb元年、一日一創第三章のテーマは「つなぐ」
- 2015年 創造は力なり スロットおみくじハードウェアで占う2015年
- 2016年 起動10秒!IchigoJam BASIC、PC用のOSベータ版リリース! IchigoJam PC
- 2017年 BIG SCREEN IchigoJam New Year Update!
- 2018年 Happy New Year 2018! Starting with Glasses! 新メガネで迎える新年

Web inventor, Sir Tim started new open social platform "Solid".
Web発明者、ティム卿が始めた新しいオープンなSNS「Solid」

It's a little hard to understand to add a friend, but we can make ourselves because it's open!
標準ではちょっと分かりづらい友達追加でしたが、オープンに作れちゃうのがいいところ!作ってみました。

"add friend" button. (友達追加ボタン)

add a friend 'taisukef'

Let's start to make and join "Solid", decentralized open SNS!
Solidでつくる、非中央集権型(デセントライズド)分散型オープンSNS。はじめのいっぽ、はじめましょ!


"Add a friend on Solid" (Solidで友だち追加) src on GitHub

On Chrome, why do I get the error after log in!?
Chrome、ログイン後、エラーメッセージがでる不思議

{"error":"invalid_request","error_description":"Mismatching redirect uri"}

links
- The first step of Solid / web発明者による新ソーシャルプラットフォーム「Solid」はじめのいっぽ with GitHub
- Ruben Verborgh's answer to In layman's terms, what is the essence of Sir Tim Berners-Lee's project Solid? - Quora
- How solid is Tim’s plan to redecentralize the web? – Irina Bolychevsky – Medium
- solid/chat - Gitter

web発明者TimによるLinked Dataベースの新プラットフォーム「Solid」発表!
“Webの父”バーナーズ=リー氏、個人情報をGAFAからユーザーの手に戻すプロジェクト「Solid」立ち上げ - ITmedia NEWS
One Small Step for the Web... — Inrupt
Tim、MITを休職、W3C業務を減らし、Inruptを共同創業という本気っぷり!

こちらSolidアプリはじめのいっぽ、チュートリアルを日本語化して、1項目追加したもの

プロフィール ビューワー for Solidsrc on GitHub


「Log in with Solid Community」でログインすると、名前、ノート、友達が取得できます。

アカウント名は速いもの勝ち、とりあえず自分のWebID、ひとつ作ってみましょう。
Solid」→「Get a Solid POD


「Solid Community」で「GET A POD」


Registerで登録!
これで上記のアプリ「プロフィールビューワー」が動作します。(ログインは、Solid Communityを選ぶ)


ちょっとわかりづらい友達(知っている人 knows)追加の方法は、自分のカードをホームアイコンの左で編集画面にいき


下部にある同心円状の白黒の丸に誰かのWebIDのURLをドラッグアンドドロップすると、追加されます。
WebIDの例:https://taisukef.solid.community/profile/card#me

WebID、ぜひお知らせくださいっ
(2018.10.4追記 「Add a friend on Solid! Add a link to make friends on your new open SNS. #solid #js #web」)

続いて、Solid appづくり
昼休み中にできちゃうアプリづくり、やってみましょう!(Build a Solid app on your lunch break)

チュートリアルを見てもOKですが、もっと簡単、日本語化した Solid app on GitHub を活用ください。
GitHubで、forkして、Settings、Sorceを「master branch」でSaveして、しばらく待つと、https://[自分のgithub ID].github.io/profile-viewer-tutorial/ でアクセスできます!

今回触ったJavaScriptコードは、たったこれだけ (main.js)

const VCARD = $rdf.Namespace('http://www.w3.org/2006/vcard/ns#'); // Display their note (added by taisukef) const note = store.any($rdf.sym(person), VCARD('note')); $('#note').text(note && note.value)

RDFlibというJSのライブラリを使って、人や人との関係を表すFOAF語彙のRDFデータに認証情報付きでいろいろとシンプルにアクセスできます。

Solidのドキュメントには、Linked Data、Solid Appのつくりかた、Solid Serverの立て方なども!

はじめよう、新しいwebへの小さな一歩!
Let's start a small step for new web!

links
Solid (MIT)
- Solid (GitHub)
- Solid Project @ MIT (@SolidMit) | Twitter
- ウェブの父バーナーズ・リー氏、「データを企業から個人の手に取り戻す」新計画 - ZDNet Japan
- “Webの父”バーナーズ=リー氏、個人情報をGAFAからユーザーの手に戻すプロジェクト「Solid」立ち上げ - ITmedia NEWS
- One Small Step for the Web... — Inrupt

2014年、Durovis Diveが教えてくれた、スマホを使って安価に実現するスマホVR。
スマホのスペックが上がり、画面が大きく、残像も少なくなったiPhone Xであの夢にもうチャレンジ!

redrain」WebVR使用、スマホVR用 (base app: ICS MEDIA)
3Dライブラリ three.js で、作りたい空間を作るだけ!
二画面分割して見る方向合わせはライブラリがやってくれます。

1995年、高専1年生の夏に登場し、瞬く間に、専用ゲームが10円ワゴンセールや「ご自由にお持ちください」状態になった、早すぎたVRゲーム機「バーチャルボーイ」(on Wikipedia)


今ではだいぶ市民権を得たが、当時は異様すぎた、没入感抜群の固定式ヘッドセットタイプ。 見える世界は、赤と黒のみのバーチャルな3D空間。多彩な操作方法と、奥行きある斬新な3D表現が楽しかった!(が、一般には受け入れられなかった)


VRゴーグル - otamart
THETAなど、360度動画が多数アップされる中、オタマート公式ショップでのスマホVRの販売開始!
手軽に体験できる千円台、三千円台、五千円台の3ラインナップ。
(* 2019.3.20追記、DAISOで500円商品として登場!)


こちら五千円台、PSVRと同様、ヘッドバンドタイプのVRヘッドセット。後ろのネジを引っ張り、回して締め付け固定。 耳に当たらないので疲れない、スピーカー付き!


イヤホンジャックが格納されてます(Lightningコネクタは付属品ではありません)
フロントカバーを外すことで、外カメラを使ったAR、MRにも対応可能。
ヘッドセット下にあるボタンを押すと、ヒンジを通して画面中央をタップしてくれるので、YouTubeなどの操作が簡単、手軽!


左右レンズの前後と左右を調整できるダイヤルが3つで調整すれば、裸眼視力0.1でもメガネ無しでくっきり見える。

平面では伝わらないVR、体験するとしないとでは大違い。まだの方、ぜひどうぞ!

links
- 必要なのはスマホと1,000円のGoogle Cardboardだけ! WebGLではじめるお手軽VR入門 - ICS MEDIA
- WebVR はじめよう - Qiita
- VRゴーグル - otamart
- RICHO THETAで撮る鯖江の花火360度動画
- 22年前に発売されていた元祖VRゲーム機を楽しむ

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