hiyakake / ar-step Goto Github PK

. 全てのパラメタが全てセットされているか
. PLATESオブジェクトをJSONに変換
. 結果を出力
. 受け取った検索クエリの角度を算出
. DBから高さ条件と使用場所にマッチしたものを取得
. DBから返ってきたplateの不足情報を補完
. ステップを何個か繋げて条件に合う商品のみに絞る
. PLATESを緩やかな順に並べ替える

動画による説明ができないか

車椅子などの人にとって、プレートがいかに大切か客観視

理由を伝えるのではなく、見て必要性を感じてもらえることを目指す

WEBサイトの説明資料としてもよいが
SNS向けの広告としての使い方もいいのでは？

正方形ビデオ15秒以内で

全体のコンセプトとなるキャッチが必要
→#進め、バリアフリー

5つほど実際のケースをモチーフに

話題のお店編
雨の日スリップ編
など

SPのTOPページ作成

PHP
SP CSS
PC CSS
JS

シングルページのみ公開している間の、TOP(WP index）のデザイン及びコーディング

伝えること

工事中である
GitHubへのリンク
サイトの目的
検索ボックスはカミングスーンである
将来的にはARで

サイトの説明

車椅子ユーザーのためとかそういうことは、設置するユーザーにとってはどうでも良いこと。
制作の背景 と サイトの説明 は分ける。

サイトの説明かんたんに

設置場所に合う段差を、ARをつかって定規無しでかんたんに探すことができるサイト

MATCHI_PLATE_APIのアルゴリズム修正

このドキュメントにもあるように、奥行きは設置場所の条件によって、必要な情報量が変わってくるため条件に応じて次のように取得する情報を変えます。

Type MIN	Type MAX	Type MINMAX	Type ABSOLUTE	~~Type FREE~~ 廃止
			No Photo
岡山など側溝があるため、橋をかける必要がある場合	敷地外にプレートが侵入しないようにする必要がある場合	橋を架ける必要があり、かつ敷地外に出ないようにする必要がある場合	プレートを設置する場所の奥行きをぴったり合わせる必要がある場合	奥行に特に条件がない場合
最小奥行を取得	最大奥行きを取得	最小奥行きと最大奥行きを取得	絶対的な奥行きを取得	取得しない

この新たな仕様に対応できるように、アルゴリズムを再考する必要があります。

アルゴリズムのドキュメント
https://github.com/LavP/ar-step/blob/master/Docs/MATCH_PLATE_API/flow.pdf

UI部分のコーディング

ピンがカメラの方を向くように

8th wallのonなんちゃらって、もしかしてa-cameraに対してイベントリスナ提供するのでは？？

だとしたらv-onできるのでは？？？？？？

↑上記はどこにカメラの情報が格納されているのかわからなかったため保留
急ぐ必要はないので将来実装に

AR_SCAN実現仮設 - 千円札によるキャリブレーション案

課題の整理

前回の仮説の立証可能点

6DoFの実現

8thWall Webを用いることで、実現可能

前回の仮説の立証不可能点

実寸方の値を取得する

スマホのカメラの焦点距離をJSでは取得することがない

今回の解決案

ベースは前回の仮説とし、実寸法の取得として千円札を利用したキャリブレーションを行う。

仮説

前回の方法で、形を取り、3D空間の3次元座標上での線分の長さを求めることはできたが、それが現実世界では何cmにあたるかを求めることができなかった。
そこで、AR_SCANの最初に練習として千円札の4スミをスキャンしてもらう。
千円札（他のお札でもいい）は誰しも用意できるもので、かつ大きさが変わらないものなので、これをスキャンすることで大きさの基準点を作ることが可能。

仮説が立証される場合の処理フロー

練習として千円札の横幅を取得してもらう
これにより千円札の横幅160mmと3D空間上の1の大きさをリンク可能
ここからは、実寸での表示を行うことができる。
あとはチュートリアルの後、前回の仮説通りの処理を行う

千円札の大きさはここを参照
https://www.sizekensaku.com/sonota/shihei.html

仮説の正しさを証明する方法

千円札の横幅をスキャンし、160mmと比例させる
そのデータをもとに、AR上で30cmや5cmの大きさがわかっているものを計測
誤差が+-1cm以内であれば良しとする。

OGP情報を定期的に取得して、キャッシュするスクリプトが必要

必要性

このissue #15 に関連して必要性が出てきた問題。

DBの登録に画像を含むと作業量が多くなってしまう。また、画像をDLして配信することは著作物の再配布にあたってしまうため、引用するだけの形式を取る必要がある。

挙動

サーバー側で、定期的に実行
アップされているCSVを読み取り、URLを元にOGP IMAGEのURLとTITLEを取得して保存する

CSVの情報とこのキャッシュデータは別ファイルとして保存するようにする。

保存する情報

保存する情報	型	説明
元のURL	url	CSVとキーを一致するための役割
OGP IMAGE URL	url	OGP画像のURL
OGP TITLE	文字列	商品のタイトルに当たる部分

制作するコード

定期的に実行され、上記の情報をCSVデータとして保存するスクリプト

生成されるCSVはGitに含めない

定期実行の手法

WordPressの標準機能で実行可能
https://b-risk.jp/blog/2017/09/wp_cron/

ファイル名	説明	サーバー上の保存場所
PLATE_DB	プレート情報のソース元	WordPress DB
chash_ogp.php	定期的に実行し、OGP情報を取得してCSVに保存する	AR_STEP/Chash/
ogp.csv	キャッシュ先	AR_STEP/Chash/
page-get-ogp.php	キャッシュされた情報をJSON形式で返す	AR_STEP/

手法

テンプレートファイルをコピーし、公開用のテンプレートファイルと開発用のテンプレートファイルに分ける。
プラグインを用いて、パラメタがある場合及びログイン中のみ開発中プラグインで表示されるように変更する。

AR_SCANのデザイン制作

Googleのドキュメントを読む
AR_SCANの実現のための仮説が立証される
デザインの留意点を考える
デザインする
AR部分の画像を実際の想定される画像に差し替える

必要な仮説

デザイン先行で制作はできない。
良いデザインにするには、まずAR_SCANが実現可能という仮説を立証する必要がある。
そのためAR_SCAN実現仮設 - 千円札によるキャリブレーション案が立証されてからのデザインとなる。

留意すること

カメラの映像はモノクロにしたほうがUIが見やすくなる
ステップバイステップ
使用方法を事前にアニメーションなどで伝える必要がある
（ユーザーにとって、ARの使用は初めてのこと）
各ステップはやり直せるように
GoogleのARデザインガイドラインを一読する

AR SCANの使い方がわかるアニメーションを制作する

海老ラーメンを食べに行く

いい感じのところまで作ったら、海老ラーメンを食べにいく。

PLATE_SITEのデザインを制作する

どんなページが必要かどうかは、ドキュメントによって定義されています。
サイトをデザインするにあたって留意すべきは次のとおりです。

全体的なカラー
OGP画像は様々なサイズで入ってくる
実際のプレートのOGP画像をDLして適用してみる
カメラの映像を実際に入れてみる
屋外で使用することを考え、コントラストをはっきりさせる

制作ツール

制作ツールははじめ、Dramaやframerが検討されていました。
確かにAR_SCANのような先進的なUIを提供するサービスにおいてはXDでは不十分だと思いますが、PLATE_STEPにおいては十分なはずです。

はじめからFramerでないと不可能だと決めるのではなく、XDでやってみる努力をしてから決めることにします。

デザインファイルをGitに含めるか

これはダミーで使用している画像も入ってくるため重要な問題です。
今回は、Designフォルダ内に

from_Internet
made_by_me

フォルダを制作し、from_internetフォルダをGitの管理対象から外すことで問題に対処します。

XDでセーブデータはCCライブラリではなくGit内に保存します。

どうしてこれが必要か

OGタグがあるサイトと無いサイト

モノタロウなどはOGがあるが、Amazonがない。
Amazon率は高いことが予想されるので実現する必要

フロントでOGPを取るということ

クロスドメイン制約にかかることがある。

SPのシングルのコーディング

PHP制作
CSS SP制作
JS
CSS PC制作

画面遷移のしくみをつくり枠組みを作る（HTML/Vue的なところ）

課題

チュートリアルUIと計測UI、計測データの保持を上手くシンクロを取る必要がある

設計アイデア

# プレゼン資料制作

話のネタ

どうしてやろうとおもったのか（どうしてこれが必要か）
バリアフリーの現状
ステップ購入の障壁
わたしがやること
わたしがつくるもの
デザインで気をつけているポイント
フィットするプレートを探す難しさ
段差マッチングの考慮点
現状できていること
次に取り組むこと
段差計測方法論

------以下、話の流れ----------

私のテーマ

私のテーマは、段差です。
ここに1枚のすのこがありますね。

このすのこの大きさは、8cmです。
みなさんにとっては、どうってことない段差です。

それを今から、車いすで乗り越えてみようと思います。
置いてるだけなので、すのこが動いて転ぶかもしれません。

乗り越えてみせる

転んだ場合

このように、小さな段差も車いすにとっては大きな段差です。
これは車いすだけではありません。ベビーカーや高齢者にとっても同じです。

成功した場合

なんとか成功することができました。
でもこれ、実はすごく怖いんです。
段差を乗り越えるために、前輪を一瞬宙に浮かします。
そうすると、車いすの重心が後ろにいくんです。
すごく怖いです。

そして今、みなさんはハラハラしたんじゃないでしょうか？
そのハラハラを、車椅子の人は常に感じています。

どうしてやろうと思ったのか

段差問題をなんとかしたい
実は、店内のバリアフリーって以外にも整ってることが多い
実は、入り口を何とかするだけ
日本の多くのお店は、バリアフリー対応の潜在能力を秘めていた！
要は、入口の段差にフィットするプレートを設置するだけ

でもそれを阻むものがいる。

それは、段差にフィットするプレートを探す難しさ

フィットするプレートを探す難しさ

多くの人は「5cm 段差」などと検索する。
そうすると高さ5cm用のプレートが出てくるけど...

じゃぁそれを何枚買えば横幅を埋められる？
設置してみるとめっちゃ角度が急だったり。

高さだけなら簡単だけど、横幅や角度も考慮しようとするとプレートを探し出すのって大変！

これ、デザインと技術でなんとか解決できないかな？
→やりましょう！

わたしがつくるもの

お店の入口などの段差の寸法にフィットするプレートを紹介するサイト
そのために以下の4大要素を制作します

段差の寸法を教えるとフィットするプレートを検索する検索エンジン
市販の様々なプレートの寸法等を格納したDB
検索方法と検索結果をわかりやすく知れるWebサイト
複雑な形状の段差でも簡単に寸法を計測できるARスキャナ

検索エンジンで考慮すること

当然、段差の横幅、高さ、奥行きにマッチする必要がある。
でもそれだけではない。

傾斜が緩やかな順にヒットするようにしたい。
→ 私達が行けると思ってるプレートも、車いすの人からすると結構急。
雨の日なんかは最悪。
それを何枚買えば、横幅を埋められるか教えてくれる
複数枚並べて設置した時の余白が危険でないかチェックして除外する
複数枚並べて設置した場合にその横幅は車いすが安全に通れるものかチェックして除外

→ つまり、ただフィットするだけでなく
安全性が確保できるプレートだけを紹介できるようにする

ARスキャナが必要なわけ

シンプルな段差だったら計測も簡単だけど
階段型だったらどうやって計測する？

いろんな段差の写真を見せる

プレートが角にぶつかっちゃうかも。
いろんな段差の形がある。側溝をまたがないといけなかったり。

実際にプレビューしながら、色んな角度で確かめならが計測できるといいよね！

デザインで意識してること（時間がなければはしょる）

多くの人は段差を深く考えたことがない
段差は立体で想像しないといけないから言葉じゃ難しい
ARスキャンもあるのでWebアプリに近い。でも検索からプレートの個別ページに入ってくるだろうから、初めて知った人はWebページだと思ってくる。この辺をうまく説明と導線をする必要がある。
→検索から入ってきた人とそうでない人とでは若干UIが変わるように作っています。
ほとんどの人は、ARを使ったことがない
ユニバーサルデザインを常に心がける（今は厳しいですが、将来的には色のハンデにもしっかりと対応したい）

サイトだけどもアプリに近い操作感で。
でも情報はボタを幼くても全部表示されるように。

できるだけふんだんにグラフィック表現を使用して
文字でなく非言語でユーザーとコミュニケーションをする。

これらを意識しています。

今の進捗は？

段差の寸法を教えるとフィットするプレートを検索する検索エンジン
市販の様々なプレートの寸法等を格納したDB(101種類)
検索方法と検索結果をわかりやすく知れるWebサイト
複雑な形状の段差でも簡単に寸法を計測できるARスキャナ

段差に合うプレートをマッチングするというCOREとなる機能はできた。
検索ボックスに手入力でなら、もう動く！

そして公開済みです。
SEO対策もがんばってます。

あとは、ARスキャナだけです。

ARスキャンできるの？

難しいです。
ARアプリ制作には以下の3大要素が不可欠

6DoF -- スマホの現実空間での物理的位置を把握する
平面検知 -- そこに写っているものが水平面なのか垂直面なのか判断して衝突判定をつける
実寸把握 -- そこに写っているものが何センチなのか認識する

でも、現状のWeb技術にはこれらがありません。APIがない！
なので様々な工夫をしています。

3時間くらい語りたいですが、難しいと思うので割愛します。

実際、3大要素がクリアできたとしてどのように計測するの？

このアプローチは完成しているのでデモします。
C4Dでライブデモを行う

さいごに

やることが多いですが、
きっと役に立つことだと思うので
負けずにがんばります。

A-frameをVue.jsでコントロールする

A-FrameはUnityのゲームオブジェクトのように、一つのプリミティブや機能をWebコンポーネントとして利用する。

これが、A-frameのもともとの機能で実装したほうが楽なのか
それともVue.jsのコンポーネント機能として制作したほうが楽なのかを考える。

WordPressに空ファイルをテーマとして認識させる

条件

パーマリンクが4プロジェクト全ての仕様を満たしている
SFTPによってアップロード可能にする（gitに載らないように）
WPプラグインを使ってパスワードをかけ、閲覧できないように

画像URLを挿入していく

[企画]進めバリアフリーフィード

企画概要

ハッシュタグ「#進めバリアフリー」を中心として
実際にプレートを設置した例などを掲載する。

障壁

Twitterはハッシュタグを取得できるAPIを公開していない

暫定解決案

有償のWordPressプラグインを使用する

代替案

進めバリアフリーを訴えるCM映像と、noa氏のちょっとしたコラム
そして、「設置報告」としてTwitterのハッシュタグへのリンクボタンを設置する

手動入力では、検索利用可能に

Vue.jsの適切な実行タイミングを探る

このドキュメントを参考に MutationObserver を使用して 8thWallのローディング要素の消滅を監視することで #loadingContainer 実行
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4

window.addEventListener('load',(event)=>{
    //bodyの監視
    //debugger;
    const target = document.body;
    let _8th_wall_is_show = false; //一度登場したらtrueに
    const observer = new MutationObserver(records => {
        console.log('実行');
        //要素が登場した
        if(_8th_wall_is_show == false && document.getElementById("loadingContainer") != null){
            _8th_wall_is_show = true;
            console.log('登場');
        }else{
            console.log('未登場');
        }
        //要素が消滅した
        if(_8th_wall_is_show == true && document.getElementById("loadingContainer") == null){
            console.log('消滅');
            observer.disconnect();//bodyの監視を終了
            run_after(); //Vueを実行
        }else{
            console.log('登場中');
        }
    });
    observer.observe(target, {
        childList: true
    });
});

どうやってAR_SCANを実現するか&実寸の値を取れるか

この仮設は、立証できないことが確認されました。

現在このディスカッションは、#20 で継続されています。

仮設

8thWallやAR Coreは厳しいところがある
A-FrameにAR.js（マーカーベースのやつ）を組み合わせると、6軸検知はできる
6軸検知ができる→空間上で動き回れる

ポイントを画面の中心だけに限定すれば、ボタンを押したときにA-frame上でラインを引いて
それは6軸上で結構正しく現実の位置とリンクしそう

8thWallは平面検知をしっかりやってくれるのであって、 ~~6軸だけならAR.jsでもいけるのでは？~~
→AR.jsでは不可能だった。6DoFができるのははやり8thWall

この仮設が正しい場合のステップ

6軸を実現する
画面の中心位の座標を取得する
座標にピンを打つ
1ライン２点ずつ（これがそれぞれ奥行きのラインとかになる）
2点間の長さを調べる
実寸では何センチなのか 計算する
実寸は、カメラの換算mmがわかれば計算できるのでは？

仮設が成立するのに必要な材料

~~AR.js~~8thWallは6軸なら正確に行けるという確認
３次元座標の２点間の長さを計算する公式はあるのか
スマホのカメラセンサの換算mmは取得できるのか
換算mmから被写体の大きさを割り出すことはできるのか

ピンがカメラを向く

カメラとピンのx,z座標感の角度をatan2()によって求めれば実現可能ではないか？

ただ、カメラの座標をvueの管理対象としてしまうとarかめらの妨げとなる可能性がある。

そこをうまく解決する必要がある。

'$el.queryselector('a-camera').attr('position')

で取得するのも無理がある
カメラのポジションが変わるたびにイベントを発行する必要

カスタムディレクティブ使えそう？

@changeとかなかったっけ

カメラとピンのrotationを同期すれば同じ方向を向く

Pin looks at the camera ()

プレートの奥の接地面に応じて奥行きの定義を変える

プレートの奥が
地面に接地 => 底辺を奥行きとして扱う
ステップに接地 => 斜辺を奥行きとして扱う

imgやvideoが表示されない問題を解決する

A-frameの <style> によって a-antity img|video に display:none が指定されているのが原因だった。

なのでCSSでこのルールを上回るものを入れる

mian.css

#ui_2d img,
#ui_2d video{
    display: inherit;
}