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

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

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

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

YouTube IFrame Player APIで読み込んだ動画を自動で再生してループさせる 🎥

公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…

TypeScriptでスクリプトファイルをimportする際に拡張子を省略する為のwebpack.config.jsの設定 📦

すべては公式ドキュメントに乗っています。webpack.js.orgresolve.extensionsに文字列の配列を渡せばOKです。webpack.js.org module.exports = { //... resolve: { extensions: ['.ts', '.js', '.json'] } }; TypeScriptファイル、JavaScriptファイル、JSON…

Macのsayコマンドを使ってText to Speechの音声ファイルをつくる 💻

Mac

Macでターミナルに、 say こんにちはと打つと、機械音声で「こんにちは」と読み上げてくれます。さらに、 say こんにちは -o sayと打つと、say.aiffという感じにaiffファイル化してくれます。 2つ目のsayはファイル名なのでなんでも構いません。また、ffmpeg…

A-Frameを使って爆速でWebARをつくる 💻

分身の術。 pic.twitter.com/ATedQVtJXn— 君塚史高 (@ki_230) 2020年10月27日 A-Frameを使ってWebARを作ってみました。 ソースはこんな感じです。 HTML <html"> <head> <meta charset="UTF-8" /> <title>AR DEMO</title> </meta></head></html">

jQueryを使ってページ内リンクのスクロールを実装する 🖱

最近めっきり使うことの少なった jQuery 。 しかし、稀にjQuery導入済みのサイトの改修を依頼されることもあるので、使う機会がゼロになったわけではありません。 久しぶりに使うと、animateがすごく便利で、ついつい多用したくなります。animateを使えばペ…

JavaScriptを1行も書くことなくドロワーメニューをつくる 💻

CSS

HTMLのcheckボックス、CSSの隣接セレクタ、target擬似クラスを使って、JavaScriptを書かずにドロワーメニューをつくってみました。ざっくりとだけ解説すると、 メニューボタンに見える要素が実はinput要素(チェックボックス) inputにチェックの有無でメニ…

Gitで削除してしまったファイルのログを確認する 🐱

Git

削除したファイルでも、 git log -- ファイル名で、コミットのログを確認できる。

metaタグを使ってGoogleの検索結果に引っかからないようにする 🔍

developers.google.comGoogle検索ディベロッパーガイドたるものがあるので、これに従いましょう。ものすごくざっくり結論を書けば、 <meta name="robots" content="noindex" /> というmetaタグをhead要素内に書いておけば、検索結果に表示されなくなります。 そんなケースはないような気がしますが、G</meta>…

Vimeoにホスティングしたビデオをiframeからしか呼び出せなくする(vimeo.com上で非表示にする) 🎥

個人的には、ウェブページでビデオを表示したいときにvideoタグを直接書くことはほとんどなくて、YouTubeやVimeoにホスティングして、API経由で表示したり、iframe埋め込みをすることが多いです。その際、例えばログインしたユーザーのみなど、限られたユー…

Sublime Text 3でスニペットを登録・編集する 💻

Mac

Sublime Textにはスニペットを登録する機能があります。 Tool > Developer > New Snippet... を選択すると、 <snippet> <content></content> </snippet>

マイク入力をFFTで解析しながらwebkitSpeechRecognitionを使ってブラウザで音声認識する 🎙

blog.kimizuka.orgblog.kimizuka.orgこの2つを足してみました。 マイク入力がバッティングして動かないかな?と思ったんですが、動きました。 DEMO develop.kimizuka.org