JavaScript
公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…
最近めっきり使うことの少なった jQuery 。 しかし、稀にjQuery導入済みのサイトの改修を依頼されることもあるので、使う機会がゼロになったわけではありません。 久しぶりに使うと、animateがすごく便利で、ついつい多用したくなります。animateを使えばペ…
blog.kimizuka.orgblog.kimizuka.orgこの2つを足してみました。 マイク入力がバッティングして動かないかな？と思ったんですが、動きました。 DEMO develop.kimizuka.org
blog.kimizuka.org以前、音源をFFT解析するデモを作ったときは、事前にホスティングしてあったmp3を解析しましたが、今回は、MediaDevices.getUserMedia をつかって、ブラウザからマイクにアクセスし、マイク入力をリアルタイムにFFTで解析してビジュアライ…
developer.mozilla.org ざっくり作ってみました。 マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。MacとAndroid10のGoogle Chromeで動作を確認しました。 DEMO develop.kimizuka.org ソースコード JavaScript const recognition = new we…
DEMO develop.kimizuka.org iOS14.0.1の端末でSafariに表示された動画をダウンロードして写真アプリに表示するべく、色々調査してみました。 結論としては無理でした。 href属性 <a href="動画ファイルのパス" /> href属性が動画ファイルに設定してあるリンクを長押しし、「リンク先ファイル</a>…
WebAudioAPI の AnalyserNode を使って音源をFFTで解析してビジュアライズするデモを作りました。ChromeとSafariで動作確認しています。 DEMO develop.kimizuka.org JavaScript const canvas = document.getElementById('canvas'); const ctx = canvas.getCo…
WebVRの可能性を探るべく、OculusQuestのブラウザの性能を確認していこうと思います。 まずは、加速度センサ値の取得から。developer.mozilla.org developer.mozilla.orgdevicemotion と deviceorientation を確認してみました。 devicemotion develop.kimiz…
特に使いどころのない技なのですが、どうしてもディベロッパーツールに画像を出力したい場合。❶ 複数行の空文字を出力 ❷ paddingで幅をいい感じにする ❸ 背景画像を設定という手順で出力できます。 DEMO See the Pen Display images on the console by kimmy…
developer.mozilla.org別ドメインのiframeを貼り付けたとき、iframeと通信できたらいいのになと思う瞬間があります。 例えば、iframe内の高さを親に伝えて、iframe自体の高さを変更したいときなどです。そんなときに役に立つのが、window.postMesage。 これ…
この記事ではdelegateの説明は省略しますが、興味のある方は昔書いた記事を読んでいただけると幸いです。これまでは自作したdelegate関数を使って、deleateを設定してきました。 自作のdelegate function delegate(parent, eventName, selector, callback) {…
最強のviewportを探っていた際、昨今のviewportは環境によって出し分けられていることを知り、フロントでviewportを書き換えるスクリプトを書いてみました。blog.kimizuka.org本当はサーバで書き換えたものを返した方が良いことは百も承知なのですが、静的な…
現象 yarnしようとすると、 The `yarn’ command exists in these Node versions: v13.1.0 v14.7.0と表示される。 原因 nodeのバージョン管理ツール（僕の場合で言うとndenv）をつかいつつ、npm経由でyarnをインストールしていることが原因。 解決方法 ❶ npm…
結論 ことの発端 DEMO リメイクした箇所 動画のインライン再生対応 クリックで再生するように変更 結論 PC版Chromeで複数のYouTubePlayerは動作可能 Android版Chromeでも動いた！（Pixel3aで確認） iOSのSafariでの挙動がおかしいので要調査（iPhone SE、iPa…
最近、1年前の己のコードを見返す機会があったのですが、 this.items.some((item, i) => { }); という見慣れない記述が。itemsは配列だったので、Array.prototype.someを使ってます、 いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れ…
ウェブサイトにファイルをアップロードする際、ファイルをドラッグ＆ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…
最近加速度センサの値に応じた音を再生する仕組みを作り続けてます。 窓を開けたときに歓喜の歌が流れる仕組みを作りました。名付けて「換気の歌」です。 pic.twitter.com/x8ku2DN2Ul— 君塚史高 (@ki_230) 2020年6月21日 加速度が「しきい値を超えた際のイベ…
npmでユーザー名が数字のみで構成されるアカウントをつくろうとしたとき、 400 Bad Request - PUT https://registry.npmjs.org/-/user/org.couchdb.user:123456 - That word is not allowed. Please contact support (support@npmjs.com) if you believe you…
もろもろ、調べた結果、 /[^\x01-\x7E\uFF61-\uFF9F]/ この正規表現にマッチすれば、全角文字という結論に達しました。 1バイトの文字と半角カタカナ以外を全角文字と定義した書き方です。 /^[^\x01-\x7E\uFF61-\uFF9F]+$/.test('あいうえお'); // => true /…
先日、こちらの npmパッケージ をちょっと改造して、プロコンをMacに接続することに成功しました。www.npmjs.comblog.kimizuka.org同じ要領で、リングコンをMacに繋げようとしたのですが、どう頑張ってもJoy-Con（R）として認識されてしまいます。Bluetooth…
DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…
https://obniz.io/ja/products/m5stickc/obniz.io obnizとは 株式会社 CambrianRobotics（カンブリアンロボティクス）がつくっている、obnizという名のデバイスです。 そしてobnizOSという名のOSのことを指すこともあります。 M5StickC[obniz無期限ライセン…
OSXのコマンドに afplay というものがありまして、これを使うとターミナルから音楽が再生できます。おそらく Audio File Play ということなんだと思います。違うかもしれません。 もうちょっと調べようと思ったのですが、OSXのコマンド一覧や、afplayのドキ…
www.pixijs.comPixiJS をつかって、全面Canvasのサイトをつくっているときには気づかなかったのですが、ファーストビューがCanvas（PixiJSでレンダリング）で、その下にコンテンツがつづくページを実装していた際に気付きました。PixiJSのviewに設定したCanv…
Macが接続しているWiFiのSSIDなどステータスバーを見れば一目瞭然なのですが、今回はSSIDをコードから取得する方法を調査しました。 ターミナルから調べる Node.jsで調べる ターミナルから調べる /System/Library/PrivateFrameworks/Apple80211.framework/Ve…
Gamepad APIをつかって、ブラウザからコントローラーの入力を取得。https://t.co/EQ4CxCylO6 pic.twitter.com/JuQ3At6RNP— 君塚史高 (@ki_230) 2020年7月3日 昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad …
接続方法 ボタンイベントのコールバックを登録する ソースコード プルリクエストをつくる Nintendo Switch Proコントローラー、通称プロコン。www.nintendo.co.jp 世界のアソビ大全用に購入したのですが、複数人でのプレイ時には使用できず、どうしたものか…
ひょんなことからGETパラメータを基にキューブを生成してくれるサイトをつくってみました。develop.kimizuka.org 使い方 ❶ https://develop.kimizuka.org/cube/?1,1,1,1,1,1,1,1という形でGETパラメータにカンマ区切りで1を渡すと、1x1のcubeを8個並べてcube…
いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…
ユーザーが音声で質問したことに回答してくれる、夢のデバイス、スマートスピーカー。 スマートスピーカー向けのアプリケーションをつくるのも比較的簡単で、これまで僕も何本かリリースしてきました。amzn.tohttps://amzn.to/2Z7Koiyamzn.toしかし、スマー…
