シニア旅日記

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遷移するように調整した

と、一応は解決したのがこちら

今後、オブジェクトごとのクリックについて研究してみたい

評判のいいSK11のバンドソー（帯鋸）を買ってみました

評判どおり音が静かでドリフト減少もほぼありません
何より、厚板を縦引きすることもできます
安全性も高いようです

バンドソー専用のテーブルも作ってみました
材料は、マルトクセンターでパイン材を購入しました
ジャストカットしてもらい、ポケットホールで組み立てました

下段は、集塵機ボックスにしています　集塵機を囲っているため、集塵機の騒音がかなり低減できました

フレンチクリートを作成するための45度カットジグをバージョンアップ！
より安全により効率的にフレンチクリートが作成できるようになった
もちろん、ワンバイ材の縦割りも簡単！！

まずは、丸鋸ベースに固定用２つの穴開け
穴は、ネジを切ればいいのだろうが簡単にビス留め

手前側はダブテイルクランプで固定
奥側は、平行ガイドで材料を挟み込む
丸ノコを安定（押さえ込む）のに力は必要とせず、不安が少ない

簡単かつほぼ無料で縦切断ができます

先日購入したダブテールクランプを使うために天板に専用のアリ溝を掘った
今までは通常のアリ溝ビット利用していたが、割れや下ボリと誤差が出るのを防止し、圧着を高めるため、途中から高価だが専用のビットを購入してみた
確かに、正確に溝を掘ることができる
値段程のものだな

ただ、シナ合板の場合、やはり割れが出やすいようだ
メーカーの推奨は、MDF材となっているので将来はそちらを試してみたい

パネル構造の勉強を兼ねて、youtubeで紹介されていた小物入れを作ってみた
パネル構造ということで木工ボンドで簡単に作成できるが、枠組みを適当に配置していたが、間違いだった

DIYでよく利用される１バイ４材（厚さ19mm 幅89mm）を丸ノコで縦方向に切断（縦引き）は、簡単そうですが、意外と難しくことに初心者には非常に難しいです

難しい理由は、丸ノコの底板の幅より切断する板材の幅の方が短いため、切断時に非常に不安定になります
そこで、youtubeなどで紹介されている手法は、
１　切断材を下地材（多くはスタイロフォームなどの丸鋸の歯が入ってキックバックを起こさないもの）にビスで固定したうえで、切断するというものです
２　他に、丸ノコを固定し、木材で作成したレール内で切断材を移動させて切断する方法もありますが、仕組みが複雑でジグ作りも厄介です

そこで、ほとんど手間なく安全に特別な部品も購入する必要のない方法を思いつきました
丸ノコを切断材と同じ１バイ４材に固定し、丸ノコ付属の平行定規で切断材を挟み込み２と同様にレールを構成し、切断材を移動することによって切断する方法です
これであれば、費用はほぼかかりませんし、手を丸ノコの歯元に近づける必要がなく何より安全です　しかも準備は簡単です