Visualization

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....

iPhoneアプリ開発メモ - 棒グラフの作成(Chartsの利用)

今度は外部ライブラリChartsを利用して、棒グラフを作成してみる。目標値が最大のデータは色をオレンジにするアニメーションがある棒グラフの上に値を表示するページ切り替えができる棒グラフを作るタップしたらイベントを発生させる 1〜3、5は機能としてある。4だけ頑張って作る。思い通りのレイアウトにするためにはプロパティとかドキュメントとかを漁る必要があるが、どこにどのプロパティがあるのかは大体予想できる。 ChartDataSet.colorsで各棒の色を変更できる。 BarChartView.animate(yAxisDuration:)を利用。 BarChartView.drawValueAboveBarEnabled = trueとする。表示形式を変更するためにはChartDataSet.valueFormatterにフォーマット用のオブジェクトを指定する。 ScrollViewの中ににBarChartViewを複数配置。 ChartViewDelegateを利用。その他デフォルトの設定だと表示する情報量が多すぎるので、いくつかのプロパティをいじる。 Chartsのインストールまず、CocoaPodsがインストールされていることが前提。プロジェクトフォルダで以下のコマンドを実行。 1 $ pod init podfileが作成されるので、それを編集する。use_frameworks!の下に以下の記述を追加。 1 pod 'Charts' プロジェクトフォルダで以下のコマンドを実行。 1 $ pod install 以降、プロジェクトはプロジェクト名.xcodeprojではなくプロジェクト名.xcworkspaceから開く。基本 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 import UIKit import Charts struct BarChartModel { let value: Int let name: String } class ViewController: UIViewController { let barItems = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] override func viewDidLoad() { super....

iPhoneアプリ開発メモ - 棒グラフの作成(UIStackView) (2) アニメーションとタップ処理

棒グラフをアニメーションさせたり、タップしたら詳細画面に遷移するようにしたい。 (寄り道) StackViewのアニメーション自分がいままでやったことがあるのは以下のような感じで、frameやlayer.positionをいじるパターン。 1 2 3 4 UIView.animate(withDuration: 1, animations: { view.position.x += 100 view.frame.size.height += 20 }); ただし、これをAutoLayoutと混ぜて使おうとすると動かなかったり、動いたとしても変な挙動を起こす。そもそも、AutoLayoutは制約を設定して位置やサイズを決定する仕組みで、frameは位置やサイズを手動で決める仕組み。これが競合を起こすのは当たり前な気もする。 StackViewはframeを設定しても何も反応しない。これは内部的にAutoLayoutっぽいことをやっているからなのかもしれない。例えば次のようにしてもStackViewの子要素は変更されない。 1 2 subView.frame.size.height = 100 stackView.addArrangedSubview(subView) その代わり、次のようにすると、ちゃんと子要素の高さは100になる。 1 2 subView.heightAnchor.constraint(equalToConstant: 100).isActive = true stackView.addArrangedSubview(subView) よって、StackViewでアニメーションするためには、AutoLayoutでのアニメーションの方法を知る必要がある。 AutoLayoutでのアニメーション例えば、「ボタンを押すと長方形が0から伸びる」アニメーションを実現したい。まずは次のように、高さ制約を0に設定しておく。ただし、それを何か変数に入れておく。 1 2 3 4 5 var constraint: NSLayoutConstraint view.addSubview(view0) constraint = view0.heightAnchor.constraint(equalToConstant: 0) constraint.isActive = true アニメーションをしたいタイミングで、次のように書けば良い。 1 2 3 4 UIView.animate(withDuration: 1, animations: { constraint.constant = 100 view.layoutIfNeeded() }) constraintにはconstantプロパティがあるので、そこで制約の定数を変更できる。layoutIfNeededは、アプリにレイアウト変更を直ちにさせるメソッド。...

iPhoneアプリ開発メモ - 棒グラフの作成(UIStackView) (1)

前に頑張ってCoreGraphicsを使って棒グラフを描いたが、やはりViewを棒に見立てて扱った方が良さそうだ。考えられる利点は次の3つ。タップ時に何かアクションを起こせる。例えば、棒グラフをタップしたら、そのデータに関する詳細ページに飛ぶ、などの処理が実装できる。アニメーションについてのコードを描きやすい。例えば棒グラフの高さを0から伸ばしていくアニメーションが実現できる。 StackViewで棒を管理すれば、棒のサイズや棒同士の間隔を自動で設定してくれるこれはやるしかない。基本的にはこちらを参考にしながら進めていく。 UIStackViewをコード上で使う基本とりあえず使い方を確認する。 Main.storyboard こんな感じにする。 ViewController.swift 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 class ViewController: UIViewController { let colors: [UIColor] = [.systemRed, .systemBlue, .systemPink, .systemGreen, .systemIndigo] let percentages: [CGFloat] = [0.1, 0.2, 0.5, 0.3, 0.9] @IBOutlet weak var graphStackView: UIStackView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view....

iPhoneアプリ開発メモ - 棒グラフの作成(UIKit/CoreGraphics) (2)

目標前回の棒グラフを複数ページにする今回は、1ページに最大5本の棒が並ぶ、とする。ページは横スライドで切り替えるプロジェクトは前回のものを引き継がず、新しく作る。用いるデータ ViewController.swiftが次のようなデータを持っていることを想定する。 1 2 3 4 5 var dataSource = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] このデータは、後で整形してグラフ描画用のデータに変換する。 UScrollViewの配置 Main.storyboardにUIScrollViewを配置する。サイズ設定はコードで行うので、ここでは単に配置するだけ。その後、UIScrollViewのOutlet接続をViewController.swiftに対して行う。 UIScrollVieの設定「スクロールの対象となるコンテンツを中に入れる」だけで、スクロール可能なViewが作れる。ただし、思い通りの表示にするためには、UIScrollViewやコンテンツのサイズを設定しておく必要がある。複数ページを持つコンテンツを作りたいので、コンテンツ用Viewの中にページ用のViewが複数存在する状態になる。なのでページの位置やサイズもちゃんと設定する。 ScrollViewのレイアウトこんな感じにする。なのでコードはこんな感じにする。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 class ViewController: UIViewController { @IBOutlet weak var scrollView: UIScrollView!...

iPhoneアプリ開発メモ - 棒グラフの作成(UIKit/CoreGraphics) (1)

iPhoneアプリで棒グラフを描く方法として考えられるのは次の3通り。ライブラリを使う - Chartsというライブラリがある。おそらくこれが一般的な選択肢。 Viewを棒グラフに見立てる - UIStackViewをうまく使った例にこんなのがある。 CoreGraphicsを使って手で描画する - 厳密にはUIKit側でこれを扱いやすくしたものがあるみたいで、Drawingとしてまとめられている。ここではCoreGraphicsの練習を兼ねて、3つ目の方法で棒グラフを書いてみる。目標棒グラフを表示する棒グラフの先端に値を表示する今回用いるデータは(ラベル, 整数値)とする整数値を棒グラフの高さとし、棒グラフの頂点にその数字を描くラベルは棒グラフの下に描く整数値が最も大きなものの色をオレンジ色にする画面の大きさに関わらない図を作る要するに以下のようなものを作る。細かいレイアウト画面の大きさに応じて棒グラフのサイズを変更する必要があるため、レイアウトについてそれなりに決めておく。テキストについては適当なサイズに設定する。ビューの幅を$W$、barWidthを$w$、データの個数を$n$とする。するとpadXの個数は$n+1$である。このとから、$w$は次のように計算できる。 $$ \begin{aligned} & wn + \frac{w}{2}(n+1) = W \\ \Leftrightarrow&\ w = \frac{2W}{3n + 1} \end{aligned} $$ この計算結果をbarWidthとして利用する。準備 Main.storyboardを次のようにしておく。 GraphViewのClassをGraphViewにする。新たにGraphView.swiftを作っておく。 GraphView.swiftを作る以下が雛形。 1 2 3 4 5 6 7 8 9 10 class GraphView: UIView { override func awakeFromNib() { } let data: [(String, CGFloat)] = [(7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎")] override func draw(_ rect: CGRect) { } } Viewの枠線 layer....

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....