2021-05-04

scroll-behavior: smoothだとChromeで要素スクロールが動かない

JavaScript

技術系のTIPSをGistに書き溜めてるんだけど、ググラビリティが低すぎる気がするのでこっちにも貼る。

これはoverflowを指定した要素をrequestAnimationFrame経由でスクロールしようとした際、Chromeでは動かなかった時のメモ。

scroll-behavior が smooth だとだめで auto なら動作するので、Chromeのスムーズスクロールと干渉するのかもしれない。FirefoxはどちらでもOKだった。

動作確認用のCodePenはこちら。 https://codepen.io/superdoghuman/pen/ExgzjXP

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
  
<button id="scrollButton">
  start scrolling
</button>

#parent {
  scroll-behavior: smooth; /* ここをautoにするとChromeでも動く*/
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: gray;
  width: 800px;
  height: 200px;
}

.child {
  background-color: darkgray;
  margin: 20px;
  text-align: center;
  min-width: 300px;
  min-height: 150px;
}

#scrollButton {
  margin-top: 50px;
  width: 150px;
  height:100px;
  font-size: 1rem;
}

const parentElement = document.getElementById("parent");
const scrollFunc = document.getElementById("scrollButton");
scrollFunc.onclick = () => {
  animate();
}

function animate() {
  parentElement.scrollLeft += 10;
  requestAnimationFrame(animate);
}

2021-05-04

Next.jsでthree.jsのexamplesを利用する

JavaScript

three.jsのリポジトリにはsrcディレクトリと同階層にexamplesディレクトリがあり、有用なツールが多数用意されている。Next.jsからこれらを利用するには、next.config.jsにちょっとした設定が必要。

resolve.modulesでも同じことができるが、aliasの方が意味的によさそう。

// next.config.js
const path = require('path')

module.exports = {
  webpack: (config) => {
    config.resolve.alias['ThreejsExample'] = path.resolve(__dirname, 'node_modules/three/examples')
    return config
  },
}

// FooComponent.js
import { GLTFLoader } from 'ThreejsExample/jsm/loaders/GLTFLoader'

最初ローカルに全然examplesが落ちてこなくて困ったんだけど、yarnのautocleanが有効になってたせいだった。

2021-05-04

lamejsでAudioWorkletを使用する

JavaScript

lamejsは定評のあるmp3エンコーダのJS実装なのだが、サンプルコードが少し古めでAudioWorkletが使われていない。

以下のファイルを少し変更するだけで動きそう。 github.com

// mic.js
const stream = await navigator.mediaDevices.getUserMedia({audio: true});
const context = new AudioContext();
const microphone = context.createMediaStreamSource(stream);
await context.audioWorklet.addModule('/voiceRecorderProcessor.js')
const recorder = new AudioWorkletNode(context, 'recorder');
recorder.port.onmessage = e => {
  realTimeWorker.postMessage({cmd: 'encode', buf: e.data});
}
microphone.connect(recorder);
recorder.connect(context.destination);

// voiceRecorderProcessor.js
class Recorder extends AudioWorkletProcessor {
  constructor() {
    super();
  }

  process(allInputs) {
    const inputs = allInputs[0][0];
    this.port.postMessage(inputs);
    return true;
  }
}

registerProcessor('recorder', Recorder);

2021-04-22

液晶フィルム貼りヘタクソ選手権

圧倒的に失敗した。六千円ぐらいしたのに…

f:id:grrr_inu:20210422131518j:plain

星空かな？

f:id:grrr_inu:20210422131803j:plain

気泡の下は全部ホコリ。天の光は全て星みたいに言うな

その後リベンジした。

zygoptera.hatenablog.jp

2020-09-05

SwitchでXboxワイヤレスコントローラーが使えるアダプタを買った。

ゲーム

Xbox ワイヤレスコントローラーファントムホワイト

Xboxワイヤレスコントローラーファントムホワイトを限りなく愛しているのだが、Switchでイカやろうと思ったらなんかProコンがお勧めらしく、でもこれ以上コントローラーが増えるの嫌だし、Proコンって結構お高いしで、なんとかしてこれをSwitchでも使えるようにしたかったのだが、そんな都合のいいガジェットがあるわけあったわスゲー！！！