旅と日々の記録
現在、インターネット回線は、ピカラ光の1G対応だが、宅内LAN配線は、新築時のCAT5eのケーブルとなっている
これをより安定・高速化のために宅内LAN配線を順次バージョンアップすることにした
まずは、ONUとAterm間をCAT8のケーブルに変更
まだまだ CAT8は高価だし、ケーブルが硬い
次に、Atermとバッファローのwi-fiルーターやデスクトップ間はCAT6Aとした
これで体感的にもアップしてデスクトップPCではダウンロード600M-700M、アップロードは、300M-500Mが出るようになった
１階での無線LAN接続でも最低でも150M程度が出ている
以前からMacBook Proのバッテリィが不調で整備が必要のサインが表示されるので、Amazonで互換バッテリィを購入して交換にチャレンジしてみた
なかなか、細かく手強い 途中挫折しかけたが、丁寧な説明動画が付属していたので何とか完了
無事、再起動できた
計画の70%程度の進捗となった
床材と大引きはウエスタンレッドシダーを
束はウリンを使用した
床材もいい感じでキシラデコールも良かった
今後は、最下段の作成、既存材のサイディング、塗装の予定
２０年以上前に設置したウッドデッキを改修することにした
床板の裏側は、壁側はほとんど傷みがないが、庭側は、腐食している部分も多く、傷みが激しい
現在のものは長手約280cmの2バイ6のウエスタンレッドシダーを３枚を１組として接続、大引きに載せる構造
今回は、同じ2バイ6のウエスタンレッドシダーを半分の長さ140cm程度にし、中央の大引きで固定することとした
ウエスタンレッドシダーと大引き、束は、木工ランドさんで購入した
大引き、束は近くのホームセンターでの購入を予定していたが、短材がなくカットサービスをお願いしたところ、厚み４cmまでしたできないとのことで木工ランドさんに追加注文した
束は90mm角のウリンを注文した、きれいな材料だが、何せ重い
バンドソーを庭に設置して所定の長さに切断
やはりバンドソーは便利
前回の方法では、なぜかWebVRではエラーとなり、日本語が表示できない
日本語を表示するには、いくつかの方法があるようで、スクリプトを利用した方法が紹介されていた
https://qiita.com/afujiu/items/d1885710acaf7b35fe03
理屈は、あまり理解できなかったが、試したところWebVRでもエラーなく表示できた かつ こちらの方が非常に簡単
https://webar-senior.glitch.me/webvr.html
<a-entity
mb-text
position="6 5 -8"
scale="5 5 5"
data-text="画像をクリックしてね"
></a-entity>
<script>
function aframeMutlByte() {
document.querySelectorAll("[mb-text]:empty").forEach((mb_text) => {
console.log(mb_text.dataset.text);
const text = mb_text.dataset.text;
const text_cnt = text.length;
const width = text_cnt * 1.4;
const height = 1.6;
let cvs = document.createElement("canvas");
let ctx = cvs.getContext("2d");
cvs.width = width * 100;
cvs.height = height * 100;
ctx.fillStyle = "rgb(255, 255, 253)";
ctx.font = "100pt Arial";
ctx.fillText(text, 0, 125);
const base64 = cvs.toDataURL("image/png");
mb_text.innerHTML = `<a-image scale="${width / 10} ${
height / 10
} 1" src="${base64}"></a-image>`;
});
}
aframeMutlByte();
</script>WebARを簡単に実現するA-frame非常に便利だが、日本語に対応しておらず、デフォルトでは、日本語を表示できない
ネット検索するといくつかの対応策で表示できるようになるとのこと
こちらhttps://www.alpha.co.jp/blog/202308_02や
こちらhttps://crieit.net/posts/A-Frame-5e93285a259c3を参考に表示できるようになった
jsonファイルとpngをネットからお借りして導入
<a-text id="text" rotation="0 0 0" position="0.7 -0.4 -0.01" value="クリックでyoutubeへ" font="https://web-senior-backup.glitch.me/noto-sans-cjk-jp-msdf.json" font-image="https://cdn.glitch.global/2b6a4eb5-022f-4add-9765-5212abbb4a7b/noto-sans-cjk-jp-msdf.png" negate="false" color="white" scale="0.5 0.5 0.5" ></a-text>
MindArを利用して画像トラッキング後、オブジェクト画像のクリックにより動画再生、別画像のクリックでURLを遷移
動画再生は、プレビュー画像を配置し、プレビュー画像のクリックで動画再生させる
javascriptによりイベント振り分け（動画再生・URL遷移）
<script>
AFRAME.registerComponent("click1", {
init: function () {
var panel = document.querySelector("#panel");
var v = document.querySelector("#vid");
var pic = document.querySelector("#pic");
let is_playing = false;
this.el.addEventListener("click", () => {
console.log("click1");
// alert("clicked_start");
if (!is_playing) {
pic.setAttribute("visible", false);
v.play();
is_playing = true;
} else {
v.pause();
// location.href =
// "https://youtu.be/XeZcFc1jD9E?si=T34Z7Hyxt43I9meK";
is_playing = false;
}
});
},
});
</script>
A-Frameを使ったWebARにクロマキー処理のスクリプトを利用するとホログラム動画が再生できるよう
完成したのがこちら
https://webar-senior.glitch.me/holo.html
クロマキー処理のスクリプト
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>
video配置時にmaterialを追加するだけでいいよう
<a-video
src="#vid"
position="0 0 -7"
rotation="0 0 0"
width="6"
height="1.7"
material="shader: chromakey; src: #vid; color:0.1 0.9 0.2"
>
</a-video>WebARでの動画配置について丁寧に解説してくれている動画をyoutubeで見かけました
詳しくかつ丁寧に説明されています
ここでも方法としては、前画像を配置・クリックすることで動画再生させるjavascriptになってますね
やはりこの方法が、一番安定しているようで
これまでで解決できない問題
WebAR上に配置したオブジェクトを個別にクリックすることができません
MindARのテンプレートでは可能となってますので、何かやり方が間違っているようです
今回のミッションは、マーカーなしWebARの作成
A-FrameやAR.jsを使い、HiroマーカーやMindARなどでマーカーを使ったWebARの作成は一通りできるようになったが、マーカーなしのWebARは勝手が違うようで何かと難しい
今回の目標は、
・マーカーなしでWebARを実現
・動画を配置
・動画が読み込まれるまで真っ黒になるのを防止
→動画が読み込まれる前にプレビュー画像を動画の前に配置し、プレビュー画像のクリックでプレビュー画像を非表示すると同時に動画再生するようjavascriptsを調整
・動画再生後、案内画像クリックでyoutube動画にページ遷移
→先のスクリプトがプレビュー画像のクリックではなく画面のクリックで発火する（修正できなかった）ため、動画再生後、location.hrefでurl遷移するように調整した
と、一応は解決したのがこちら
今後、オブジェクトごとのクリックについて研究してみたい