jiro@f – ページ 3 – シニア旅日記

MacBook PROのバッテリィ交換

投稿日2024年2月24日2024年2月24日

以前からMacBook Proのバッテリィが不調で整備が必要のサインが表示されるので、Amazonで互換バッテリィを購入して交換にチャレンジしてみた

なかなか、細かく手強い　途中挫折しかけたが、丁寧な説明動画が付属していたので何とか完了

無水エタノールやドイラーを用意しておかなかったので
古いバッテリィを外すのに手こずった

無事、再起動できた

ウッドデッキ改修　２

投稿日2024年2月11日2024年2月11日

計画の70%程度の進捗となった
床材と大引きはウエスタンレッドシダーを
束はウリンを使用した
床材もいい感じでキシラデコールも良かった
今後は、最下段の作成、既存材のサイディング、塗装の予定

ウッドデッキを改修　１

投稿日2024年2月3日2024年2月5日

２０年以上前に設置したウッドデッキを改修することにした
床板の裏側は、壁側はほとんど傷みがないが、庭側は、腐食している部分も多く、傷みが激しい

現在のものは長手約280cmの2バイ6のウエスタンレッドシダーを３枚を１組として接続、大引きに載せる構造
今回は、同じ2バイ6のウエスタンレッドシダーを半分の長さ140cm程度にし、中央の大引きで固定することとした
ウエスタンレッドシダーと大引き、束は、木工ランドさんで購入した
大引き、束は近くのホームセンターでの購入を予定していたが、短材がなくカットサービスをお願いしたところ、厚み４cmまでしたできないとのことで木工ランドさんに追加注文した

束は90mm角のウリンを注文した、きれいな材料だが、何せ重い
バンドソーを庭に設置して所定の長さに切断
やはりバンドソーは便利

WebVRでの日本語表示

投稿日2024年1月14日2024年1月14日

前回の方法では、なぜか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>

A-frameで日本語表示

投稿日2024年1月5日2024年1月5日

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>

マーカーARで画像クリックにより動画再生・遷移の振り分け

投稿日2024年1月3日2024年1月3日

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>

クロマキー動画を使ったホログラム動画

投稿日2023年12月24日2023年12月24日

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動画配置の解説動画

投稿日2023年12月24日2023年12月24日

WebARでの動画配置について丁寧に解説してくれている動画をyoutubeで見かけました

詳しくかつ丁寧に説明されています
ここでも方法としては、前画像を配置・クリックすることで動画再生させるjavascriptになってますね

やはりこの方法が、一番安定しているようで

これまでで解決できない問題
WebAR上に配置したオブジェクトを個別にクリックすることができません
MindARのテンプレートでは可能となってますので、何かやり方が間違っているようです

マーカーなしWeARの作成

投稿日2023年12月18日2023年12月18日

今回のミッションは、マーカーなしWebARの作成

A-FrameやAR.jsを使い、HiroマーカーやMindARなどでマーカーを使ったWebARの作成は一通りできるようになったが、マーカーなしのWebARは勝手が違うようで何かと難しい

今回の目標は、
・マーカーなしでWebARを実現
・動画を配置
・動画が読み込まれるまで真っ黒になるのを防止
→動画が読み込まれる前にプレビュー画像を動画の前に配置し、プレビュー画像のクリックでプレビュー画像を非表示すると同時に動画再生するようjavascriptsを調整
・動画再生後、案内画像クリックでyoutube動画にページ遷移
→先のスクリプトがプレビュー画像のクリックではなく画面のクリックで発火する（修正できなかった）ため、動画再生後、location.hrefでurl遷移するように調整した

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

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