2018年10月19日金曜日

Oculus GO アプリ内で WebView (ブラウザ)を表示する方法

Oculus GO のアプリ内で WebView みたいにブラウザ機能を利用できると一気に便利なるので、なんかいい方法はないか調べてみました。(試してみたとは言っていないw)
先に言っておきます「まともなものはない」と。

なお、Unity を利用することが前提です。
また、空間上にブラウザを配置(テクスチャとして利用)できることが条件です。

以下、2019年4月追記。

3D WebView for Android

超高いが Oculus GO にも対応している様子。
$200

以下、2018年10月以前の情報

Mobile Web View (Android, iOS)

https://assetstore.unity.com/packages/tools/gui/mobile-web-view-82142
ほぼ理想通りの機能を提供してくれるアセット!
でもレビューを見る限りかなりビミョーな様子……
$45 で人柱になれます。

UniWebView 3

Android にも対応しているけど、最前面に表示されるタイプなので残念ながら無理のようです。
$25

Embedded Browser

https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459
一見 VR にも対応しているようだが、これは PC プラットフォームの VR に対してであり、Android がベースの Oculus GO には対応していない様子。
お値段が高いので試せないw
$80

WWebView

Windows のみ!
$20

unity-webview

gree のやつです。
残念ながら VR 非対応。

Popup Webview Android Ios

なんか見た感じダメっぽい。
$5

In-App Web Browser

全画面のみっぽい。
$5

Android Webview Texture (VR compatible)

検索するとよく出てくるし、いい感じなんだけど提供終了みたい。

ULiteWebView

情報少なすぎ。
$5

OculusGoWebView

まさにそのものズバリな名称だけど開発中なのかな…


あれ?もしかして無理なんじゃね?(爆)
神アセット待ちかなー。

2018年10月17日水曜日

Ubuntu 上の Dropbox フォルダを Windows と共有する方法

やる意味がわからないと思いますが、そういうシチュエーションもあるんですよ。
(Windows 側に空き容量がないとかね)

せっかく Ubuntu 入れてるんだから可能な限りコマンドは使わない方向でやります。
ちなみに Ubuntu 18.04.1 LTS でやりました。

なお、まるで熟知しているかのような書きっぷりですが、カンで作業した結果を書いてるだけなので、嘘、大げさ、紛らわしい可能性があることをご了承ください。

フォルダを右クリックして「プロパティ」でひらくやつ。
この画像は設定前の状態です。

まず素直に GUI 上で「ローカルネットワーク共有」を設定してみましたが、これでは Windows からの書き込みと Ubuntu での書き込みではユーザーが異なり権限(パーミッション)を変更しないと相互に上書きできない状態になってしまいました。

鍵がついちゃう

それではめんどいので、「ローカルネットワーク共有」ではなく samba をインストールして設定してみました。

注)以降の作業を行う前に全ての「ローカルネットワーク共有」の「このフォルダーを共有する」はチェック解除しておきましょう。
(もしくはそもそも触らない)

samba は「Ubuntu ソフトウェア」を起動して「samba」って検索すれば出てくるので、それをインストールします。

これをインストールする

しかし残念なことに、samba の設定画面はスーパーユーザー(管理者みたいなもん)でなければ開くことができません。
つまりマウスぽちぽちでは起動できません。
そのため「端末」アプリでコマンドを入力する必要があります。

CLI は説明不足の典型例w

そのコマンドは以下のとおりなのですが、
sudo system-config-samba
いきなりこれを入力してエンターキーを押しても、英語で「/etc/libuser.conf が無いよ」って言われてしまいます。
そこで、最初だけ次のコマンドを実行しておく必要があります。
(二回目移行は必要ありません)
sudo touch /etc/libuser.conf
上記コマンドで空のファイルが作れます。
このコマンドを実行するとパスワードを聞かれるので入力します。(何も表示されませんが入力されてます)
コマンドについて詳しく知りたい方は「sudo」コマンドと「touch」コマンドをググればいいと思います。
ファイルを作った上で再度
sudo system-config-samba
と入力しパスワードを入力すれば設定画面が開きます。
+ボタンで共有フォルダを追加したりなんやかんや設定しましょう(爆)

ちなみに当初の上書きできない問題については、プリファレンス > サーバー設定 > セキュリティのゲストアカウントを自分のアカウントにすることで、相互に上書き保存ができるようになります。

ゲストアカウントを自分にすることで解決
まぁセキュリティがザルになりますがねw
ちゃんとする場合は samba のユーザーも設定しておきましょう。

設定が終わり設定画面を閉じたら samba を再起動する必要があります。
以下のコマンドを実行します。
sudo systemctl restart smbd
あとは windows のネットワークから見られるかと、ちゃんと Dropbox が同期できてるかをチェックしましょう。

なお、共有しているフォルダ側もちゃんと自分にしておかないと意味ないので注意。

変えておけば以降は設定に準ずるはず
いつになったら Ubuntu は CLI 使わなくても良くなるんっすかねー。

2018年7月17日火曜日

Unity で地面のテクスチャがボケる時の正しい対処法

テクスチャ画像の Inspector の Generate Mip Maps を OFF にする方法ではパフォーマンスが犠牲になるようなので Aniso Level を変更するほうが良い。


実際にはここまで値を上げる必要はない
Aniso Level は「急角度から見たときのテスクチャの品質を向上します。床や地面のテクスチャに適しています。」とのこと。
この数値を上げることによる弊害は知らんw

2018年7月3日火曜日

xismo から Unity へ obj 書き出しする時の設定

デフォだと UV 変になったりしちゃったので、以下のようにするとうまくいった。
倍率は xismo は cm のつもりで作ってるので、100分の1にした。
X軸を反転にチェック。
UVのV座標を反転にチェック。これをしないと変になる。
面を表裏反転はオフに。これをオンにしてると左右が反転しちゃう。
モディファイアと表示ノードのみはお好きにどーぞ。

あとは出力された .obj と .mtl と テクスチャを Unity へわたしてあげればOK。

2018年6月25日月曜日

アップロードされたファイルを Node-RED で受け取る方法

例えば画像を Node-RED へアップロードしたい、とかの時です。
下のフロー図は、ファイルを送信できるアップロードページと、送られてきたファイルを鯖上に保存するフローのサンプルです。
フローの JSON コード貼ると化けちゃうブログなので、下記の説明を読んで各自で自作してくださいw

ただし環境によっては file ノード(ファイル作成ノード)がない場合もあります。(IBM Cloud のボイラーテンプレートで用意された Node-RED とか)
その場合は file ノードの代わりに、データベースなどへの保存の処理を行う必要があるわけですが、それはまた別のお話……

では、個々のノードについてザッと説明します。

アップロードページのフロー

まずは動作確認のためにも、ファイルをアップロードするためのページを用意します。

「[get] /upload」http 入力ノード

Node-RED 鯖の /upload に GET でアクセス(単にブラウザでアクセス)されたときのフローがここからスタート。

「HTML」template ノード

ここでファイルをアップロードできる HTML を msg.payload にぶち込みます。
HTML はこんな感じ。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>アップロード</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input name="file" type="file" id="file"><br>
<input type="submit" value="アップロード">
</form>
</body>
</html>
ちゃんと form 要素の method属性は post に、enctype 属性は multipart/form-data に設定しましょう。

http 出力ノード

上記の HTML をここで返します。
それにより無事、アクセスしてきたブラウザにはアップロードページが表示されます。
特に何も設定しなくてもデフォで Content-Type: text/html として返してくれるので楽ちん。

ファイルを受け取ったときのフロー

こっからが本題。
先のページからファイルがアップされた時のフローです。

「[post] /upload」http 入力ノード

アップロードページと同じ URL だけど、POST だった場合はこっちがスタートします。
ファイルがアップされるはずなので、ノード編集画面の「ファイルのアップロード」にチェックを入れましょう。
チェック入れておかないと msg.payload にバイナリバッファが入っちゃって意味不明になります。
入れておくことでファイルは msg.req.files に格納され、msg.payload には HTML の form の各値が格納された状態になります。

「処理」function ノード

ここでは簡単なエラーチェックをしつつ、応答のフローとファイル保存のフローに分けています。
出力数は 2 にして、return の [0] は応答のフローへ、return の [1] はファイル保存のフローへ分かれるようにしました。
コードは以下の通り。
let files = msg.req.files;
if (files.length === 0) {
msg.payload = "ファイルが添付されてないよ";
return [msg, null];
}
msg.payload = "たぶん保存したよ";
//
let msg2 = {};
msg2.payload = files[0].buffer;
msg2.filename = "/home/user/" + files[0].originalname;
return [msg, msg2];
まず、msg.req.files の数を見て、ちゃんとファイルが含まれているかをチェックしています。
もしファイルが含まれていなかったら、ファイル保存のフローへは null を返すことで、フローが進まないようにしています。
他にも必要であれば msg.req.files[0].mimetype などを確認して、想定外のファイル形式を弾いたりしても良いでしょう。

で、問題がなかった場合、新たにファイル保存フロー用のオブジェクト msg2 をこしらえます。
そして次の「ファイル作成」ノードのために、msg2.payload にファイルのバイナリバッファを入れます。
あと、保存先とファイル名もここで設定してしまいます。
サンプルでは鯖上の /home/user/ へ元のファイル名のまま保存するようにしました。

「HTML」template ノード その2

応答フローの template ノードです。
ここでは応答用の HTML を作成して msg.payload に入れています。
予め先の「処理」function ノードで msg.payload にはメッセージが入れられているので、Mustache タグを利用して payload の内容を HTML に差し込んでいます。
↓こんな感じ。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>結果</title>
</head>
<body>
<p>{{payload}}</p>
</body>
</html>
ヒゲ便利w

http 出力ノード

応答フローでも先の http 出力ノードを再利用。えこえこ。

「ファイル作成」file ノード

鯖上にファイルを保存します。
ノード編集画面で「動作」を「ファイルを上書き」にして「メッセージの入力のたびに改行を追加」のチェックは外しておきましょう。
「ファイル名」は先の「処理」function ノードで設定済みなので、ここでは空にしておきます。
(以前は何か入力されていても、msg 側が優先されてたけど、最近 msg 側で設定済みなのにノード編集画面でも何か入力されてると警告されるようになったっぽぃ)

以上、個々のノードの説明でした。
実際に /upload へブラウザでアクセスしてみて、動作を確認してみましょう!
そして何か間違えている場合、またはもっといい方法がある場合は教えてくださいw

おしまーいヽ(=´▽`=)ノ


2018年6月21日木曜日

Node-RED で base64 エンコードとかデコードしたい時

Node-RED は受信した画像とかローカルのファイルとかをバイナリバッファでやり取りするけど、Google さんの Cloud Vision API に画像送りたい時とかには base64 エンコードして送らなきゃいけなかったりするときのなんやかんや。

方法1:node-red-node-base64ノードを使う。

超楽ちん。
https://flows.nodered.org/node/node-red-node-base64
こいつをメニュー「パレットの管理」から追加して使うだけ。
msg.payload がバイナリバッファなら base64 にしてくれて、逆に base64 だったらバイナリバッファにしてくれます。

方法2:Node.js の Buffer クラスを利用する。

下記、new Buffer() は非推奨になりました。
今後は変わりに Buffer.from() を使いましょう。

https://nodejs.org/api/buffer.html

function ノードで
let buffer = new Buffer(msg.payload);
msg.payload = buffer.toString('base64');
return msg;
とかすれば base64 に変換できます。
これも楽ちん。
逆にバイナリバッファにデコードしたいときは
msg.payload = new Buffer(msg.payload, 'base64');
return msg;
てな感じ。

おしまい。

2018年5月21日月曜日

Vcc、Vee、Vbb、Vdd、Vss、Vgg、V+、V-、GND、の違いとは?

トランジスタの歴史的な経緯により、異なる表記になったようです。
とりあえず Vcc、Vdd は入力電圧。
Vee、Vss は出力電圧ないしは GND と思っておけば OK と思われます。(すごいマサカリ飛んできそうですがw)

具体的には回路の内部構造が TTL なのか CMOS なのかによって使い分けられているようです。

TTL なら
Vcc:コレクター
Vee:エミッター
Vbb:ベース

CMOS なら
Vdd:ドレイン
Vss:ソース
Vgg:ゲート

ってことらしいよ。
でも TTL と CMOS が混在している回路も増えてきて、人類の見通しの甘さを露呈しているらしいよw