みかづきブログ・カスタム

基本的にはちょちょいのほいです。

2020-01-01から1年間の記事一覧

A-Frameでマーカーの状態(認識・移動・回転)を検知する 👀 ※ サンプルコード付き

はじめに A-Frameとは A-FrameでARコンテンツをつくる マーカーをつくる ミニマルなWebARの例 DEMO ソースコード マーカーが認識されたことを検知する DEMO ソースコード マーカーの認識が切れたことを検知する DEMO ソースコード 思ったこと マーカーの…

A-FrameにGoogleフォントを読み込んで使う ✏️

結論 HTML <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> もしくは、 CSS @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); という感じで、普通に読み込むだけでOK。 blog.kimizuka.org以前、頭の上…</link></link>

@hubspot/api-clientを使ってHubSpotのdealを取得する 🛒

HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…

jQueryを使わずにoffset().topを実装する 📄

ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…

Nuxt.js + microCMS + NetrifyでJamstackを実装しつつAPIキーを隠す 🔑

micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。https://microcms.io/blog/nuxt-secure-api-key/microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDeve…

A-Frameでアニメーションを複数設定する 🎬

傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl— 君塚史高 (@ki_230) 2020年12月8日 ふと思い出したのですが、こちらを作成したとき、「痛いのオブジェクト」の「position」「scale」「rotation」をアニメーションさせていま…

音声認識 + WebAR で頭の上に吹き出しを表示する 💬

直近のツイートを頭の上に表示する帽子を作りました。 pic.twitter.com/RwyY0JiFWi— 君塚史高 (@ki_230) 2020年11月13日 先日、帽子にARマーカーをつけてみたのですが、なかなか可能性を感じまして、思い切ってARマーカー付きの帽子を作ってみることにしまし…

Blender 2.8でテキスト(日本語)を立体にしてA-Frameで表示する 🩹

4つのポイント Blenerでテキスト入力モード切り替えはTab 日本語フォントを設定すれば日本語の入力も可能 何故か入力できないときはテキストエディタからコピペで入力 objファイルであれば楽々A-Frameで表示できた 傷口から痛いのが飛んでいくAR絆創膏を作り…

Blender 2.8でstlファイルを作って3Dプリンタ(UP Plus2)でプリントする 📦

以前Three.js上で作ったこちらのモデルをBlenderでモデリングして3Dプリンタでプリントしてみました。 See the Pen CubeMan by kimmy (@kimmy) on CodePen. Blender 2.8でモデリング 設定の変更 まずは、単位をmmにするために、LengthをMillimetersに、Unit …

image-renderingをつかってCanvasをニアレストネイバー法で拡大してドット絵のような見た目にする

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…

Blenderで作ったglbファイルをThree.jsで読み込んでマテリアルを変更する 📦

以前、Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞するという検証をした際に、Blenderからglbファイルを書き出して、Three.jsに読みました。blog.kimizuka.org今回は、Three.js側で読み込んだglbファイルのマテリア…

CanvasRenderingContext2D.filterでCanvasをグレースケールにする 🖼

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…

A-FrameでCanvasをテクスチャーに設定して動的に更新する 🎥

以前、Three.jsでCanvasをテクスチャーに設定した場合、material.map.needsUpdateをtrueに設定すれば動的に更新できることを調べました。blog.kimizuka.org今回は、それのA-Frame版です。 A-Frameも内部はThree.jsを使っているので、material.map.needsUpdat…

サーバにインストールしたGitLabとNetlifyを連携させる 🦊

いつもはGitHubやBitbucketと連携して使うことの多いNetlifyですが、初めてGitLabと連携させてみました。GitHub、Bitbucketと並列にGitLabボタンもあるので、いつもと同じように連携できるのかと思いきや、リポジトリがひとつも見つかりません。 どうやらサ…

Nuxt.jsがローカルでのビルドは通るのにCIでのビルドがコケる(There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.)😱

結論から書くと、ものすごく単純な話なんですが、大文字小文字はしっかり区別しようという話です。 Nuxt.jsで作ったプロジェクトがローカルだとビルドが通るのに、CIだとコケていて「なんでだろう」と思いログを確認してみました。 [fatal] Nuxt build error…

Nuxt.jsの静的書き出しで、はてなブログのRSSを表示するウェブサイトを作る 📝

はじめに はてなブログのRSS取得 Nuxtプロジェクトの作成 Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備 静的なHTMLとして書き出す準備 はじめに はてなブログの最近記事30件と、JSONに記載されているモックを取得して羅列するウェブサイ…

Jestを使ってwindow.locationやwindow.navigatorなどのwindow直下の変数(グローバル変数)にアクセスする関数のテストをする 💯

locationのテストの例 JavaScript Jest 変数を受け取る例 navigatorのテストの例 JavaScript Jest 変数を受け取る例 locationのテストの例 JavaScript const isProduction = () => { return location.hostname === 'kimizuka.fm'; }; export default isProdu…

A-FrameでARマーカーが回転したことを検知する 🔁

ARマーカーの回転検知。 pic.twitter.com/W6ukDJorN8— 君塚史高 (@ki_230) 2020年11月19日 以前は、マーカーのpositionを取得する方法を使ったデモを作りましたが、今回はマーカーの回転を検知してみます。blog.kimizuka.org JavaScript let timer; let last…

VoxelでThree.jsに読み込み可能な3Dモデルをつくってアニメーションさせる 🏃‍♂️

https://blog.kimizuka.org/entry/2020/11/05/145418blog.kimizuka.orgこちらの記事 の応用版です。 1フレームずつポーズを作りアニメーションさせてみました。作り始めた時は、1フレームあたり10x10x10の1000個のcubeで想定していましたが、途中でどうして…

A-FrameでARマーカーが動いたことを検知する 🚗

A-Frameを色々試していたところ、marker.getAttribute('position')でマーカーの座標が取得できることがわかったので、 Webカメラを定点で固定 0.1秒間隔でマーカーの座標を取得 1個前の座標と現在の座標を結んだでベクトル化 ベクトルの大きさが一定以上であ…

iOS12以前のSafariではwindow、document、bodyにclickイベントを設定しても発火しない 🖱

mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…

Canvasのピクセルデータを編集して動画をグレースケールにする 🖼

canvasタグはcontextのputImageDataを使って、ピクセルデータを編集することができます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = document.createElement('video'); video.src = 'movie.mp4…

動的に生成したvideoタグを自動再生するときはmuted属性ではなくプロパティを変更する 🎥

ビデオをミュートにすれば自動再生できることは知っていたので、 const video = document.createElement('video'); // ミュートに設定 video.setAttribute('muted', 'muted'); video.setAttribute('autoplay', 'autoplay'); video.setAttribute('loop', 'loo…

A-FrameでARマーカーを認識した時、認識が切れた時にコールバックイベントを設定する 💣

この投稿をInstagramで見る 片付けが捗るように、3秒以上物を置きっぱなしにすると爆発音がする机を作りました。名付けて「かたづくえ」です。 #音楽 #家 #音楽家 #ミュージックハウス #片付け #机 音楽+家=音楽家(ミュージックハウス)(@ongaku.ie)がシ…

A-Frameを使ってobjファイルをARで表示する 🐄

己との戦いAR。 pic.twitter.com/1bHUuSggc0— 君塚史高 (@ki_230) 2020年11月2日 これまではglbファイルを読み込んでいたので、Blenderを使ってファイルを変換していました。が。A-Frameのドキュメントを読んでいると、objファイルが読み込めそうな気配が。 …

A-Frameをつかって影とスポットライトをつくる 🔦

以前、こんなものをつくりました。本人よりも先に踊り出す影。 pic.twitter.com/mo29EZ19lY— 君塚史高 (@ki_230) 2020年6月18日 この時は、Unityをつかって影とスポットライトをつくっていたのですが、three.jsやA-Frameをつかうことにハマっている今となっ…

A-Frameを使って、ARでボクセルのモデルを表示する 📦

昨日つくったボクセルをA-Frameを使ってARで表示してみました。blog.kimizuka.orgA-Frameも内部はThree.jsを使っているので、もっと色々できそうな気がします。 あと、3Dモデルを確認するインターフェイスとして、マーカー型ARは非常に優秀な手段かもしれな…

VoxelでThree.jsに読み込み可能な3Dモデルをつくる 📦

はじめに 己のスキル 己のスキルで実行可能な作戦を考える ドット絵の三面図の大きさを決める ドット絵で三面図を描いて輪切りにする 輪切りの情報を配列にする 弓 Aポーズ 配列をThree.jsでレンダリングする 弓 Aポーズ はじめに ちょっと前からVRのゲーム…

Nuxt.js + TypeScript(+ nuxt-property-decorator) + SCSSでプロジェクトを作る ✌️

昔はReact派だった僕も、いまとなってはJavaScriptの書き方的にはReactでもVueでもどちらでも構わないぐらいになってきました。 NextJSとNuxt.jsを比べると、CSSの管理の仕方がNuxt.jsの方が好き、というかSFCが好きなので、どっちでも良いと言われた時は、…

A-Frameを使って爆速でつくったWebARにアニメーションを付ける 🥊

blog.kimizuka.orgの記事の続編です。分身の術。 pic.twitter.com/ATedQVtJXn— 君塚史高 (@ki_230) 2020年10月27日 前回は、実寸代のARで分身の術を作ってみた次第ですが、分身(3Dモデル)はピクリとも動いていませんでした。なので、今回は3Dモデルにアニ…