JavaScript

Web Audio API 備忘録

Web Audio APIで色々遊んだメモ。サイン波を鳴らす HTMLファイルを作成。適当にindex.htmlとしておく。 1 2 3 4 5 6 7 8 9 <html> <head> <meta charset="utf-8"> </head> <body> <button id="play_btn">play</button> <script src="script.js"></script> </body> </html> script.jsは以下のようにしておく。 1 2 3 4 5 6 7 8 const audioContext = new AudioContext(); const oscillatorNode = audioContext.createOscillator(); oscillatorNode.connect(audioContext.destination); document.getElementById('play_btn') .addEventListener('click', function() { oscillatorNode.start(); }, false); これで、“play” ボタンを押すとサイン波が再生される(音量に注意)。説明 Web Audio APIの枠組みでは、色々な音やエフェクトをノードとして繋いでいく。最終的な出力を担うノードはAppContext.destinationである。まずAudioContextのインスタンスを作成する。このContextというのはプログラミングをやっていると色々なところで現れるが (Canvas要素に描画する際にもgetContextが出てくるし、WinAPIだとデバイスコンテキストハンドル、AndroidアプリのプログラミングでもContextがある)、自分は「Audioについて色々な情報を提供してくれるオブジェクト」くらいの理解をしている。 1 const audioContext = new AudioContext(); 続いて、音源としてOscillatorNodeを作成し、繋いでやる。 1 2 const oscillatorNode = audioContext.createOscillator(); oscillatorNode.connect(audioContext.destination); oscillatorNode.start()で実際に音源が再生される。今回はclickイベントが起こったときに再生されるようにしている。 (補足) ページ読み込み時の再生はできないという仕様 Chrome/Safariの場合、以下のようにページを開いた瞬間に音がなるようなコードを書いたとしても、実際には鳴らない。 1 2 3 4 const audioContext = new AudioContext(); const oscillatorNode = audioContext.createOscillator(); oscillatorNode.connect(audioContext.destination); oscillatorNode.start(); これは、「ボタンが押す」のような、ユーザーが明示的な操作をしない限り再生されない仕様となっているかららしい。実際 Chrome の場合、上のコードを書くと以下の警告がDevalopper Toolで表示される。 ...

webpackに入門する - p5.jsの開発環境作り

webpackを利用してp5.jsの開発環境を作り、ボールが弾むプログラムを作成する。使用するパッケージのバージョン 1 2 3 4 webpack@5.15.0 webpack-cli@4.3.1 webpack-dev-server@3.11.2 p5@1.2.0 動機ふとしたきっかけで久々にp5.jsを触りたくなった。昔使っていたときは、p5.jsのファイルをダウンロードしてscriptタグに直接指定することで書いていた。しかし最近、Vue.jsのガイドを読んでいてwebpackの存在を知った。名前は知っていたのだが、具体的に何をするためのものなのかはよく分かっていなかったので調べた。 webpackとは以下、個人的に調べた限りの理解を書く。 Conceptによれば、webpackとは"module bundler"の一種。bundleという意味から、「複数のモジュールを一つに束ねるツール」だと予想できる。JSのプログラムを、モジュールとして複数の単位に分割して開発する。それを一つのファイルにまとめ上げてくれるのがwebpack。例えばp5.jsで、ボールが弾むだけのプログラムを書こう、と思った場合、ボールを管理するモジュールをBall.jsに書くスケッチを管理するモジュールをsketch.jsに書くメインの処理をindex.jsに書くみたいにモジュールを分けられる。ただし、モジュールを扱うための機能であるimport/export文はES2015の仕様で標準採用され、多くのブラウザで実装されている。じゃあwebpackの他の強みは何かというと、おそらく「JS以外のファイルもまとめてくれる点」だと思う。例えばcssやsassのファイルもJSに埋め込むことができる。TypeScriptやJSXのファイルもwebpackでまとめられる。ただしwebpackの核の機能はあくまでJSのモジュールをまとめることなので、JS以外のファイルはloaderと呼ばれる変換器を通しておく必要がある。とはいえ、「このファイルはこのloaderに通してね」というのをあらかじめ設定ファイルに書いておけば、少ないコマンドで変換からbundleまでやってくれるので、便利である。今回はp5.jsの開発環境づくりのためにwebpackを用意するのだが、JSのモジュールしか扱うつもりはない。なのでwebpackの恩恵は少ないかもしれない。しかし練習として使ってみる。 webpackの導入と動作確認まず適当にプロジェクト用のディレクトリを作る。npmでプロジェクトを初期化する。 $ mkdir p5-sandbox $ cd p5-sandbox $ npm init -y 以下、このプロジェクトのルートディレクトリを/で表す。 webpack本体を入れる。webpackをコマンドラインから実行するためにはwebpack-cliが必要なので、それも入れる。個人で使う分にはどうでもよいと思うが、これらは開発のみに利用されるパッケージなので、--save-devをつけておく。 $ npm install webpack webpack-cli --save-dev ディレクトリの作成今回は次のようにする。ソースコードは/src/index.jsに書く。 bundle後のファイルは/public/js/bundle.jsとして出力されるようにする。あらかじめディレクトリを作成しておく。 $ mkdir src $ mkdir -p public/js index.jsの作成 /src/index.jsを作成。動作確認のため適当に書く。 1 console.log("Hello, World"); webpackの設定 /webpack.config.jsを作成する。 1 2 3 4 5 6 7 8 9 10 const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'public/js') } } 説明 module.exportsの中に色々設定項目を書いていく。基本的なことはConfigurationに載っている。 ...

Vue.js勉強メモ(1) - 簡易Todoリストの作成

公式ガイドの、コンポーネントの詳細の手前まで読み終えたので、この時点でTodoリストっぽいものを作ってみる。データベースを用意しないため、厳密にはTodoリストではない。コンポーネントについてはまだ学んでいないため、これから書くコードにはまだ改善の余地があるだろう。準備 index.htmlを用意する。 1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html lang="ja"> <head> <meta charet="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <h1>Todo List</h1> <script src="script.js"></script> </body> </html> 以下の部分でVue.jsを読み込んでいる。 1 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> script.jsを作成しておく。中身はまだ空。実装する機能初めにも述べたが、データベースは用意しない。以下の簡単な機能だけ実装する。入力エリア Todoリスト表示エリア各要素に削除ボタンをつける。勉強を兼ねて、いくらか遠回りしながら作っていく。配列の要素をli要素として表示 index.htmlに追記する。 1 2 3 4 5 <div id="app"> <ul> <li v-for="todo in todos">{{ todo }}</li> </ul> </div> Vue.jsが用意したテンプレート構文をHTMLに埋め込むことによって、データとDOMを結びつけることができる。v-という接頭辞がついた属性はディレクティブと呼ばれる。今回のv-forディレクティブは、その名の通りfor文を実現する。構文から分かると思うが、JSとかPythonで使われているfor-in文と同じ文法。式の埋め込みは{{ 式 }}で行う。ガイドではMustache(口髭)構文と呼んでいる。良いネーミングだなと思ったけど、{{ }}の書式をそう呼ぶのはわりと一般的みたい？ ...

JavaScript/Elm ビット演算のときにはまったこと

結論 JavaScriptにおいて、>>>以外のビット演算は32ビット符号付き整数値として扱われる。 → 例えば&|^~の計算前に、オペランドに型変換が起こる(ソース)。 JSにおいて数字はNumberという型しかないが、ビット演算のときだけ32ビット整数値に変換されるっぽい JavaScriptにおいて、x >>> 0を使うと符号なし整数になる。負数を2で割り続けても、コンピュータにおける2進表現にはならない。これはすごく当たり前だったコンピュータにおける2進数表現にしたいなら，論理シフトを使うこと。 ElmはJavaScriptに変換されるので、上の事実はすべてElmでも当てはまる。各種ビット演算は、JSの演算をそのまま使っているっぽい(ソース) 検証コード $ elm init src/MyBitwise.elmを作成し、内容を以下のようにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 module MyBitwise exposing (..) import Bitwise toBinaryString : Int -> String toBinaryString x = let bit = Bitwise.and x 1 rem = Bitwise.shiftRightZfBy 1 x in if rem > 0 then (toBinaryString rem) ++ (String.fromInt bit) else String.fromInt bit elm replを起動し、試す。まず必要なモジュールをimportする。 $ elm repl > import Bitwise > import MyBitwise exposing (..) 232-1 = 4294967295を2進表示すると、1が32個並んだ数になる。32ビット整数の2の補数表現では、-1と4294967295は同じ表現方法になる。 > toBinaryString 4294967295 "11111111111111111111111111111111" : String > toBinaryString -1 "11111111111111111111111111111111" : String Bitwise.andの計算結果は符号付き整数値とみなされるので、以下では4294967295ではなく-1と出力される。 ...

Elm/JavaScript ローカルサーバーで通信する際にハマったこと

今回たまたまクライアント側でElmを使ったけど、これはElmに限ったことではない。結論 Client側での留意点 urlはlocalhost:[port]ではなくhttp://localhost:[port]と指定しなければならない。つまり、URLにはちゃんとスキーム名を指定する。 Server側での留意点 Access-Control-Allow-Originに関連するヘッダーをちゃんと設定する。成功コードプログラムの内容サーバーは{ "msg" : "Hello, World!" }という内容のJSONを送ってくるので、クライアントはその値を受け取って"Success: Hello, World!“を出力する。それだけ。 Client: Elm 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 module Main exposing (..) import Browser exposing (..) import Json.Decode exposing (..) import Http exposing (..) import Html exposing (..) import Html.Attributes exposing (..) main = Browser.element { init = init , update = update , view = view , subscriptions = subscriptions } type Model = Loading | Failed | Success String init : () -> (Model, Cmd Msg) init _ = ( Loading, getServer ) type Msg = GotData (Result Http.Error String) update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of GotData result -> case result of Ok str -> (Success str, Cmd.none) Err _ -> (Failed, Cmd.none) getServer : Cmd Msg getServer = Http.get { url = "http://localhost:3000" , expect = Http.expectJson GotData dataDecoder } dataDecoder : Decoder String dataDecoder = field "msg" string view : Model -> Html Msg view model = case model of Failed -> p [] [ text "Failed!" ] Loading -> p [] [ text "Loading..." ] Success str -> p [] [ text ("Success : " ++ str) ] subscriptions : Model -> Sub Msg subscriptions _ = Sub.none Server: JavaScript (Node.js) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const http = require('http'); const server = http.createServer(); server.on('request', (req, res) => { res.writeHead(200, { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' }); const body = { msg: 'Hello, World!' }; res.write(JSON.stringify(body)) res.end(); }); server.listen(3000); 失敗と解決までの流れ Http.getの引数初めはサーバー側で次のようにしていた。 ...

D3.js 01信号の可視化

信号に関する授業を聴いていたらふと思い立ったのでやってみた。コード index.html 個人的テンプレを書く。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>0-1 Signal</title> </head> <body> <h1>0-1 Signale</h1> <svg> </svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="script.js"></script> </body> </html> script.js JavaScriptでflatMap使うのはこれが初めてかも。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 const format = (data, w) => { const pairs = d3.pairs(data); const deltas = pairs.flatMap(e => { let sig = e.toString() if (sig == '0,0') { return [[1,0]]; } else if (sig == '0,1') { return [[1,0],[0,-1]]; } else if (sig == '1,0') { return [[1,0],[0,1]]; } else if (sig == '1,1') { return [[1,0]]; } else { throw new Error('invalid element.'); } }); const points = deltas.reduce((acc, e) => { const back = acc[acc.length - 1].slice(); back[0] += w * e[0]; back[1] += w * e[1]; return acc.concat([back]) }, [[0,0]]); return points; }; const [svgWidth, svgHeight] = [800, 800]; const svg = d3.select('svg') .attr('width', svgWidth) .attr('height', svgHeight); const pad = 70; const render = (data) => { svg.selectAll('*').remove(); svg.append('path') .datum(data) .attr('transform', `translate(${pad}, ${pad})`) .attr('stroke', 'black') .attr('fill', 'none') .attr('d', d3.line() .x(d => d[0]) .y(d => d[1])); }; render(format([0,0,1,0,1,0,1,1,1,1,0,0], 50)); 実行結果説明 format 01の情報を、path用の頂点データに変換する関数。 ...