BlenderでつくったモデルをVR上で確認したく、Three.jsをつかってWebVRコンテンツをつくってみました。 そこまでの手順を簡単にまとめておきます。 Blenderの基本操作を覚える 簡単なモデリングをする .glbファイルで書き出す Three.jsで読み込む ❶ Three.js…

DEMO See the Pen Custom CheckBox without JavaScript by kimmy (@kimmy) on CodePen. 解説 checkboxとlabalと隣接セレクタをうまく使えば、JavaScriptを一切書かずにチェックボックスをカスタムすることができます。 ポイントとしては、❶ チェックボックス…

iOS13のSafariでは簡単にページ全体のスクリーンショットをPDF化することができますが、iOSシミュレータからでも同様の手順でPDFを保存できます。 シミュレータにGUIとして搭載されているスクリーンショットボタンから撮影できると最高だったのですが、残念…

特殊な状況だと思うのですが、若干ハマったのでメモ。 結論 経緯 PHP TypeScript 問題点 完全ビルドのインポート方法 結論 ものすごく、ひさしぶりにNuxt.jsなしてVueを使ったのですが、 vue.runtime.esm.js:619 [Vue warn]: You are using the runtime-only…

blog.kimizuka.orgNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダー、nuxt-svg-loader ですが、オブジェクトが返ってくると都合が悪いケースもあります。 <template> <img src="~/assets/img/title.svg" alt="title" /> </template> というケースや、 <style> .title { background: url(~assets/img/title.s</style>…

最近、1年前の己のコードを見返す機会があったのですが、 this.items.some((item, i) => { }); という見慣れない記述が。itemsは配列だったので、Array.prototype.someを使ってます、 いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れ…

すべてはドキュメントに書いてある通りなので、僕がまとめるまでもないのですが、一応ことの顛末をまとめておきます。jestjs.io Jestでテストする Nuxt.jsのプロジェクトのテストにはJestを使ってます。例えば、 expect(wrapper.vm.width).toBe(1200); // 幅…

blog.kimizuka.orgテストの仕方を先に記事にしてしまいましたが、nuxt-svg-loaderとTypeScriptの共存のさせ方もまとめておきます。 nuxt-svg-loaderとは www.npmjs.comNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダーです。 …

Nuxt.jsでウェブアプリをつくっていたら、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Baili…

これまで、Alexaスキルはいくつもつくってきたのですが、Googleアシスタント向けアプリはひとつしかつくったことがありませんでした。https://amzn.to/2Y3vvhBamzn.tohttps://assistant.google.com/services/a/uid/000000d6315c9755?hl=ja-JPassistant.googl…

すべて 公式のドキュメント に書いてあることなので、わざわざまとめるほどのことでもないのですが、せっかく調べたのでまとめておきます。ja.nuxtjs.org nuxt generateとは 動的なルーティングとは nuxt generateでは動的なルーティングは無視される nuxt g…

Sidecarとは support.apple.comiPadをMacの外部モニタをして使う技です。 macOS Catalina、iPadOS 13以上で使うことができますが、詳しい条件はこちらを参照のこと。 メニューバーにSidecarのアイコンが消えた 僕は外部ディスプレイを持っていないので、よく…

Nuxt.js は開発環境を整えるのがとても簡単で、セットアップが終われば、 yarn devnpm run devのいずれかで、すぐに開発サーバが立ち上がります。このときのURLは、ポート3000が空いていれば、 http://localhost:3000もしくは、 http://0.0.0.0:3000となりま…

天井に設置したEcho Flexから、子供の足音を流すスキルを作りました。上の階に子供部屋がある気分になれます。名付けて「夢の二世帯住宅」です。ゆくゆくは自宅で遊んでいる子供の足音を、実家の天井から流したいです。 pic.twitter.com/kQDcNxHQi1— 君塚史…

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ＆ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

electron と mdns を同時に使おうと思ったところ、 App threw an error during load Error: The module '/Users/nanashi/develop/node_modules/mdns/build/Release/dns_sd_bindings.node' was compiled against a different Node.js version using NODE_MODU…

最近加速度センサの値に応じた音を再生する仕組みを作り続けてます。 窓を開けたときに歓喜の歌が流れる仕組みを作りました。名付けて「換気の歌」です。 pic.twitter.com/x8ku2DN2Ul— 君塚史高 (@ki_230) 2020年6月21日 加速度が「しきい値を超えた際のイベ…

ElectronでMacアプリをつくるとき、リリースの予定はないもののアプリアイコンをオリジナルのものにしたいなと思い、Macアプリのアイコンのつくりかたを色々調べました。 アイコンファイル（.icns）のつくりかた 本当に色々調べました。いろんなサイズの画像…

twitter.com最近毎日ツイッターに動画を投稿しているのですが、お世話になっているのは予約ツイートとMediaStudioです。 予約ツイートを使えば投稿し忘れを防ぐことができますし、MediaStudioをつかえば動画のサムネイルを変更したりできます。そんなことを…

隣の部屋からの音漏れをポジティブにするWebARをつくりました。壁に穴を開け、隣人がUnityちゃんだと思い込むことで、音漏れに対するイライラを和らげます。ダンスを練習してるなら仕方ないな、と。 #ウソ穴 #バーチャルお隣りさんhttps://t.co/K6VrOOmmH5 p…