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

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

2020-10-01から1ヶ月間の記事一覧

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

TypeScript

すべては公式ドキュメントに乗っています。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をつくる 💻

A-Frame

分身の術。 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を使ってページ内リンクのスクロールを実装する 🖱

JavaScript

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

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

CSS

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

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

Git

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

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

HTML

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

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

HTML

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

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

Mac

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

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

JavaScript

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

マイク入力をFFTで解析してビジュアライズする 🎙

JavaScript

blog.kimizuka.org以前、音源をFFT解析するデモを作ったときは、事前にホスティングしてあったmp3を解析しましたが、今回は、MediaDevices.getUserMedia をつかって、ブラウザからマイクにアクセスし、マイク入力をリアルタイムにFFTで解析してビジュアライ…

webkitSpeechRecognitionを使ってブラウザで音声認識を試す 🎙

JavaScript

developer.mozilla.org ざっくり作ってみました。 マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。MacとAndroid10のGoogle Chromeで動作を確認しました。 DEMO develop.kimizuka.org ソースコード JavaScript const recognition = new we…

ElectronでPush通知を送るMacアプリをつくる 👀

Electron Mac

非常に目が悪くて2時間に1回ぐらい目薬を刺さないといけないんですが、うっかり忘れてしまう事が多く、2時間おきにPush通知を送ってくれるMacアプリを作ってみました。 サーバPushではなくローカルPushで実装しています。 JavaScript const { app, Notificat…

iOSでvideoタグのposter属性を省略するとサムネイルが表示されない 🎥

iOS

<video src="movie.mp4" controls playsinline></video> という感じで、poster属性を省略するとiOSでサムネイルが表示されないことに気づきました。 PC版のChrome、Safari、Firefox、Android版のChromeでは1フレーム目がサムネイルとして表示されます。 動画はYouTubeにホスティングしてつかっていたので、全然気…

iOSでdownload属性を試して動画のダウンロードを試みる 📱

iOS JavaScript

DEMO develop.kimizuka.org iOS14.0.1の端末でSafariに表示された動画をダウンロードして写真アプリに表示するべく、色々調査してみました。 結論としては無理でした。 href属性 <a href="動画ファイルのパス" /> href属性が動画ファイルに設定してあるリンクを長押しし、「リンク先ファイル</a>…

音源をFFTで解析してビジュアライズする 🎶

JavaScript

WebAudioAPI の AnalyserNode を使って音源をFFTで解析してビジュアライズするデモを作りました。ChromeとSafariで動作確認しています。 DEMO develop.kimizuka.org JavaScript const canvas = document.getElementById('canvas'); const ctx = canvas.getCo…

Electronで背景透過のアプリをつくる 👀

Electron

ElectronでBrowserWindowのインスタンスを生成する際にオプションとして、transparent: trueを渡すと背景が透明なアプリを作成できます。 const mainWindow = new BrowserWindow({ transparent: true }); Macだとこれで問題ないのですが、Windowsだと、 cons…

OculusQuestのブラウザの性能を確認する（加速度センサ値の取得） 🕶

JavaScript

WebVRの可能性を探るべく、OculusQuestのブラウザの性能を確認していこうと思います。 まずは、加速度センサ値の取得から。developer.mozilla.org developer.mozilla.orgdevicemotion と deviceorientation を確認してみました。 devicemotion develop.kimiz…

ディベロッパーツールに画像を出力する 📷

JavaScript

特に使いどころのない技なのですが、どうしてもディベロッパーツールに画像を出力したい場合。❶ 複数行の空文字を出力 ❷ paddingで幅をいい感じにする ❸ 背景画像を設定という手順で出力できます。 DEMO See the Pen Display images on the console by kimmy…

Three.jsにてCanvasを使ってTextureを動的に変更し、VRモードでも動くようにする 🖼

Three.js

以前、VRモードに対応する形で作ったので、そのままVRモードでつくりますが、VRモードじゃなくても要点は変わりません。❶ Canvasを作る ❷ TextureにCanvasを設定する ❸ MaterialにTextureを設定する ❹ MeshにMaterialと適当なGeometryを設定する ❺ Meshのmat…

Nuxt.jsで作ったサイトをGitHub Pagesで公開する際の注意点（_nuxtディレクトリが404になる）👀

Nuxt.js

nuxt generateで静的書き出ししたウェブサイトをGitHub Pagesにアップすると、_nuxt以下のファイルが404になってしまいます。原因としてはこちらに書いてある通りなのですが、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で始まる、またはテ…