youtube動画のサムネイル編集には、Adobe Expressを利用していますが、便利です
Adobe Expressはオンラインで、しかも無料
様々なテンプレートも使え、サムネイルが簡単に作成できます

加えて、動画編集も可能です
昨日は限定されていますが、初心者には十分です
さらに重い4K動画の編集も可能です
4K動画がノートPCでも完全オンライン編集が可能です

旅と日々の記録
youtube動画のサムネイル編集には、Adobe Expressを利用していますが、便利です
Adobe Expressはオンラインで、しかも無料
様々なテンプレートも使え、サムネイルが簡単に作成できます
加えて、動画編集も可能です
昨日は限定されていますが、初心者には十分です
さらに重い4K動画の編集も可能です
4K動画がノートPCでも完全オンライン編集が可能です
以前からMacBook Proのバッテリィが不調で整備が必要のサインが表示されるので、Amazonで互換バッテリィを購入して交換にチャレンジしてみた
なかなか、細かく手強い 途中挫折しかけたが、丁寧な説明動画が付属していたので何とか完了
無事、再起動できた
計画の70%程度の進捗となった
床材と大引きはウエスタンレッドシダーを
束はウリンを使用した
床材もいい感じでキシラデコールも良かった
今後は、最下段の作成、既存材のサイディング、塗装の予定
20年以上前に設置したウッドデッキを改修することにした
床板の裏側は、壁側はほとんど傷みがないが、庭側は、腐食している部分も多く、傷みが激しい
現在のものは長手約280cmの2バイ6のウエスタンレッドシダーを3枚を1組として接続、大引きに載せる構造
今回は、同じ2バイ6のウエスタンレッドシダーを半分の長さ140cm程度にし、中央の大引きで固定することとした
ウエスタンレッドシダーと大引き、束は、木工ランドさんで購入した
大引き、束は近くのホームセンターでの購入を予定していたが、短材がなくカットサービスをお願いしたところ、厚み4cmまでしたできないとのことで木工ランドさんに追加注文した
束は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のテンプレートでは可能となってますので、何かやり方が間違っているようです