旅と日々の記録
海外旅行vlogで作成したい「空港からホテルまで」のルート・軌跡が動くアニメーション動画を作成したいと思う
Google mymapでルートを作成し、kmlファイルを出力
ここまでは簡単にできるようになった
Youtubeを見てラインでgpxファイルに変換してみる
これをGoogle Earth proで読み込みツアーを作成してみたが、ルートは表示されたが、動かない
この原因は、元々のkmlファイルや変換したgpxファイルに高度情報がないために動かないらしい
kmlファイルに高度情報を追加するには、ガーミンコネクトというアプリを使えば良いようだが、ガーミンというスマートウォッチを持ってないと使えないようだ
別のYoutube動画https://youtu.be/6fSRZ6IQAPY?si=4degRcVVqKveB5kj
を見ると轍wadachiというフリーソフトを使ってgpxファイルを作成すれば良いとのこと
早速、やってみた
見事動いた
当初見ていた動画ではWadachiは仕様変更となり使えなくなったとあるが、まだ使えた
AR.jsやMindARでWebARを簡単に実現できます
作成したWebAR上の任意の画像をクリックし、動画再生を行うことも可能です
動画再生は、動画そのものがクリック出来ないため、動画にサムネイル画像を重ね、サムネイル画像のクリックにより、javascriptsを起動させサムネイル画像を非表示とし、その下の動画を再生表示するという流れです
<script>
AFRAME.registerComponent("click1", {
init: function () {
const video = document.getElementById("video");
const arVideo = document.getElementById("arVideo");
const thumbnailImg = document.getElementById("thumbnailImg");
let is_playing = false;
this.el.addEventListener("click", () => {
console.log("click1");
if (!is_playing) {
thumbnailImg.setAttribute("visible", false);
arVideo.setAttribute("visible", true);
video.play();
is_playing = true;
} else {
video.pause();
is_playing = false;
}
});
},
});
</script>
サムネイルや動画を<a-assets>で準備し、配置します
<a-assets>
<image
crossorigin="anonymous"
id="thumbnail1"
src="https://cdn.glitch.global/a575940f-5bb4-4d84-b1ec-39de683638f7/11omote_start.jpeg?v=1728086615601"
></image>
<video
crossorigin="anonymous"
id="video"
src="https://cdn.glitch.global/cbf17ad1-1348-4ae7-b9c3-7207634324f5/2024meishi.mp4?v=1703162875641"
></video>
<a-entity mindar-image-target="targetIndex: 0">
<a-video
id="arVideo"
src="#video"
width="1.8"
height="0.9"
position="0 0 0"
rotation="0 0 0"
></a-video>
<a-image
click1
class="clickable"
id="thumbnailImg"
src="#thumbnail1"
width="1.8"
height="0.9"
position="0 0 0"
rotation="0 0 0"
></a-image>なお、画像クリックには、以下の定義が不可欠です
<a-camera
position="0 0 0"
look-controls="enabled: false"
cursor="fuse: false; rayOrigin: mouse;"
raycaster="near: 10; far: 10000; objects: .clickable"
></a-camera>
これでサムネイル画像をクリックすると動画を再生することが可能となります
加えて、MindARの利用でマルチターゲットに対応しています
なお、以下のようなjavascriptsでも動画再生は可能ですが、この場合は、画像のクリックでの動画再生でなくWindowsクリックで再生となり、オブジェクトごとでの切り分けはできません
<script>
window.addEventListener("click", () => {
const video = document.getElementById("video");
const arVideo = document.getElementById("arVideo");
const thumbnailImg = document.getElementById("thumbnailImg");
thumbnailImg.setAttribute("visible", false);
arVideo.setAttribute("visible", true);
video.play();
});
</script>キャビネット天板と底板の角をトリマーでR加工をやってみた
何度か試し加工をして、コツがつかめてきた
昨年の旅行の写真をやっと飾ることにした
壁面にポスターレールとポスターフレームを既に設置しているので、ポスターを変更するだけ
ポスターは、前回同様ソクプリさんで印刷
ここは名前のとおり、データ送信からお届けまでが速い！
前日の13:00にデータ送信、15:00にデータ確認終了、18:00には印刷完了・発送、翌日の11:30には、クロネコさんが玄関先に
24時間かからずにA0サイズの大判プリントが到着しました
今回発注のA0サイズは、84cm*119cmと大きいですが、ポスターはダンボールの筒に入れられ、折れもなく到着です
ちなみにポスターフレームはこのサイズになると宅急便も大型配送になり、クロネコさんでは扱ってません
youtube動画のサムネイル編集には、Adobe Expressを利用していますが、便利です
Adobe Expressはオンラインで、しかも無料
様々なテンプレートも使え、サムネイルが簡単に作成できます
加えて、動画編集も可能です
昨日は限定されていますが、初心者には十分です
さらに重い4K動画の編集も可能です
4K動画がノートPCでも完全オンライン編集が可能です
現在、インターネット回線は、ピカラ光の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>