FM音源をいじれるWebサービスを作った

1. フロントエンド界隈
遷移速度早すぎないですか…
と思いながら
FM⾳源をいじれる
サービスを作った
murata
1

2. ⾃⼰紹介 a(){ a|a& };a
ID : murata
今年の主な活動 : ボドゲ / slack-bot 量産 / etc ...
Piet (⽩有⿊無5⾊カラーゴルフ) ごちうさ速報Bot あほげー(原⼨⼤エレベーター)
2
https://twitter.com/gochiusa_sokuho https://unityroom.com/games/gensundai_elevator/webgl

3. 近況報告
1⽉から下宿開始 (@北⽩川)
=> ネット回線 => グローバルIP
=> ラズパイ宅内サーバー
(sagisawa.0am.jp / muratam.0am.jp)
http://amzn.asia/4n4xnzC
Webサービス作る機運
3

4. 元々やりたかったこと
今まで : Piet
=> 今度は⾳楽でプログラミングしてみたい
Midiのピアノロール ? => ⾯⽩くないので ☓
もっと普段やらない⽅法…
=> FM⾳源 !!!
4

5. FM⾳源とは
Frequency Modulation (周波数変調) を 使った⾳源
- 正弦波・三⾓波・矩形波 の合成だけのシンセより凄い
<=> PCM⾳源
簡単に複雑な⾳が出せる => ⾄る所で使われる
- アーケードゲーム
- 電⾞の発着⾳
YAMAHAのDX7が有名
5

6. FM⾳源とは
Frequency Modulation (周波数変調) を 使った⾳源
𝑭𝑴 𝒕 = 𝑨 𝒔𝒊𝒏 𝟐𝝅Ct + 𝑩 𝒔𝒊𝒏 𝟐𝝅𝑴𝒕
ただのsin波の定数だった周波数に
別のsin波を⾜し合わせてみたもの
𝒇 𝒕 = 𝑨 𝟏 𝒔𝒊𝒏 𝟐𝝅𝑪 𝟏 𝒕 + 𝑨 𝟐 𝒔𝒊𝒏 𝟐𝝅𝑪 𝟐 𝒕 + … とは格が違う
6

7. FM⾳源とは
𝑭𝑴 𝒕 = 𝑨 𝒔𝒊𝒏 𝟐𝝅C𝒕 + 𝑩 𝒔𝒊𝒏 𝟐𝝅𝑴𝒕
周波数上への合成 +波形上への直接の合成の組合せで
複雑な⾳⾊がどんどん出せる！
𝑭𝑴 𝒕 = 𝟐𝒔𝒊𝒏 𝟒𝟒𝟎 ∗ 𝟐𝝅𝒕 + 𝟓𝒔𝒊𝒏 𝟏𝟏𝟎 ∗ 𝟐𝝅𝒕 + 𝟏𝟎𝒔𝒊𝒏(𝟐𝟐 ∗ 𝟐𝝅𝒕)
+𝟕𝒔𝒊𝒏 𝟒𝟐𝟎 ∗ 𝟐𝝅𝒕 + 𝟓𝒔𝒊𝒏 𝟓𝟓 ∗ 𝟐𝝅𝒕 + 𝟏𝟎𝒔𝒊𝒏(𝟕𝟐 ∗ 𝟐𝝅𝒕)
みたいにアルゴリズムを定義してやばい⾳⾊を作れる
7

8. FM⾳源とは
アルゴリズムでプログラミングできそう！
=> 意外とむずかった…
- 状態を上⼿く持たせる発想が思いつかなかった
=> ていうか⾳が作れなすぎる…
=> みんなで⾳⾊をいじって
セッション出来れば最⾼では？？
8

9. 作りました ( http://muratam.0am.jp/fm/ )
ここから先各⾃⾳出しOK!!
花背⽤に
saezuri.hanase.kmc.gr.jp:31415/
でも開放中！
9

10. 操作⽅法(ログ⽤)
いいかんじに実演
- Volume Ratio はそのままの意味
- ⾏毎の6個のsin波⽣成器と対応
- Attack(sec) : ⽴上がり時間
- Decay(sec) : 減衰⾳量までの時間
- Sustain(x100%) : 減衰⾳量
- Release(sec) : 余韻の時間
10

11. 操作⽅法(ログ⽤)
例 1 ) 初期状態 ( 𝒇 : 周波数 )
- 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
例 2 ) ( 𝑨 : 定数 )
- 𝑭 𝒕 = 𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+𝟗𝟕𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕)
11

12. 操作⽅法(ログ⽤)
例 3 )
- 𝑭 𝒕 = 𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+𝟐𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+𝟑𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+𝟒𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+𝟓𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+𝟕𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
12

13. 操作⽅法(ログ⽤)
例 4 )
- 𝑭 𝒕 = 𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+𝟐𝟎𝑨𝒔𝒊𝒏 𝟐 ∗ 𝟐𝝅𝒇𝒕
+𝟑𝟎𝑨𝒔𝒊𝒏 𝟑 ∗ 𝟐𝝅𝒇𝒕
+𝟒𝟎𝑨𝒔𝒊𝒏 𝟒 ∗ 𝟐𝝅𝒇𝒕
+𝟓𝟎𝑨𝒔𝒊𝒏 𝟓 ∗ 𝟐𝝅𝒇𝒕
+𝟕𝟎𝑨𝒔𝒊𝒏 𝟔 ∗ 𝟐𝝅𝒇𝒕
+𝟎. 𝟓𝒔𝒊𝒏 𝟐 ∗ 𝟐𝝅𝒇𝒕 + 𝟎. 𝟔𝒔𝒊𝒏 𝟑 ∗ 𝟐𝝅𝒇𝒕
+𝟎. 𝟕𝒔𝒊𝒏 𝟒 ∗ 𝟐𝝅𝒇𝒕 + 𝟎. 𝟖𝒔𝒊𝒏 𝟓 ∗ 𝟐𝝅𝒇𝒕
+𝟎. 𝟗𝒔𝒊𝒏(𝟐𝝅𝒇𝒕)
13

14. 操作⽅法(ログ⽤)
例 5 )
- 𝑭 𝒕 =
𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+ 𝟏𝟎𝟎𝑨𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+ 𝟏𝟓𝟎𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕)
14

15. 操作⽅法(ログ⽤)
例 6 )
- 𝑭 𝒕 =
𝒔𝒊𝒏
𝟐𝝅𝒇𝒕
+ 𝟏𝟎𝟎𝑨𝒔𝒊𝒏
𝟔 ∗ 𝟐𝝅𝒇𝒕
+𝟏𝟒𝟏𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+𝟏𝟑𝟑𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕)
+ 𝟎. 𝟕𝟐𝒔𝒊𝒏
𝟔 ∗ 𝟐𝝅𝒇𝒕
+ 𝟏𝟒𝟏𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕
+ 𝟏𝟑𝟑𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕)
15

16. 操作⽅法(ログ⽤)
例 7 (feedback))
- 𝑭 𝒕 = 𝒔𝒊𝒏(𝟐𝝅𝒇𝒕 + 𝟏𝟕𝟒𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕 + … ))
(実装は⼀つ前の時点のデータを取ってる)
16

17. Web初⼼者の奮闘⽇記を解説します
1 . サーバー構築
2 . イマドキっぽいjsでWebサービスを作る
3 . 地獄のWebフロントエンド
17

18. サーバー構築
今時だと AWS や GCP などのクラウド ?
せっかく買ったのでラズパイで作るぞ！
ムカムカしても実体を物理的に殴ってストレス解消可能！
18

19. サーバー構築 : ラズパイとは
35$(僕は4400円で買った)で買える激安PC
- 1GBRAM, USB*4, Wifi, BlueTooth 等完備
- イヤホンジャック => ⾳響
- HDMI => ディスプレイ
- ピン => 電⼦⼯作
- 消費電⼒も少ない(7Wらしい) => 電気代が浮く！
- 64bit :: Raspbian じゃなく ArchLinux
19

20. サーバー構築 : SSHポート開放
最初はキーボードとディスプレイで起動
めんどう => SSH
- 設定をいじるだけ 楽
デフォルトの22番のまま公開
=> 1時間で中国から⼆件SSH(admin)アクセス
Fail2Ban + ポート変更
20

21. サーバー構築 : 外部公開
買ったwifiルーターでポートフォワード設定
http://118.237.118.55/ は HTTP 80番ポート
宅内のラズパイの(固定した) 192.168.2.107:80 へ転送
無料のMyDNSで名前固定
- http://muratam.0am.jp
- http://sagisawa.0am.jp
(ちなみに数百円の http://無.space も持ってます )
21

22. サーバー構築 : nginx 設定
$sudo apt-get install nginx
proxy /virtual host / fastcgi-php / etc ...
http://muratam.0am.jp
- / => http://muratam.github.io/ へ 転送
- /fm/ => ポート 31415 (今回のWebサービス) へ 転送
http://sagisawa.0am.jp
- #gacha⽤の画像 や よさRTで集めた画像を保存してます
22

23. サーバー構築 : node.js 導⼊
サーバーでも動く JavaScript
最新のjsの仕様(ES6等)で書ける
ライブラリがいっぱい
- forever : 楽々デーモン化
- express : パスに応じて配信
- socket.io : 楽々websocket
23

24. Web初⼼者の奮闘⽇記を解説します
1 . サーバー構築
2 . イマドキっぽいjsでWebサービスを作る
3 . 地獄のWebフロントエンド
24

25. イマドキっぽいjsでサイトを作る
- ES6 + HTML5 + CSS3
- jQuery / underscore / bootstrap / less
- Vue.js
- Webpack (+babel + import)
25

26. イマドキ ?
そもそもはじめてWebサービス作るし全くの初⼼者
- ここから先の内容は本当にイマドキなのだろうか
- そもそもイマドキとはなんなのだろうか
僕のメインは Unity なので その観点からも考察したい。
- UIに関しては⼤体神という印象を持ちました
今回のサイトでどこに何を利⽤したかを説明します。
( ここにはUnityer ⽬線で⾒た感想が記述されます ) 26

27. ES6 (ES2015)
2015年6⽉に標準化された最近のJavaScriptの仕様
import { hoge } from "fuga";
let,const,()=>{} : ブロックスコープで書ける
`id = ${id}` : テンプレートリテラル
class : 継承とかもきちんと出来る
(x,y=0)=>x+y : デフォルト引数も使える
let [x,y] = [1,2] : 分割代⼊とかも出来る
( const とか 分割代⼊とか C#でも使いたかった… (無くはないけど…) / JSONが楽で裏⼭) 27

28. HTML5
2014年10⽉に勧告された最近のHTMLの仕様
canvas : 図形/画像の描画
WebGL : 3Dグラフィックスの描画
web audio API : 好きな⾳を鳴らせる
WebSocket : ブラウザとサーバーでセッション可能
article/nav/header/footer... : 妥当なタグの追加
history API :: URLを動的に変更
Adobe Flashを駆逐しましょう
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 28

29. Canvas ~HTML5~
線や図形を描画できる (今回の波形ビューなど)
ctx.strokeStyle = "#999";
ctx.clearRect(0,0,w,h);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
毎フレーム実⾏ : requestAnimationFrame(func)
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 29

30. Web Audio API ~HTML5~
⾳声を操作できる
例 )
- オシレーター(sin波など)を鳴らす
- ディストーションエフェクトをかける
- コンプレッサをかける
- マイク/Webカメラ などと接続する
- 任意の⾳声を鳴らす => FM⾳源の実現
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 30

31. Web Audio API ~HTML5~
FM⾳源を実現する
1. サンプリングレートを指定 (今回は44100)
2. データをセットする配列⻑を指定 (今回は2048)
3. createScriptProcessor,onaudioprocess を指定
4. 2048/44100秒分毎にデータを作成
outputBuffer.getChannelData(0) のデータを書き換える
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 31

32. Web Audio API ~HTML5~
データを書き換える
-1~1の振幅 (変化が 0 だと無⾳)
- Chrome だとデータをリサイクルするので変な⾳
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 32

33. history API ~HTML5~
URLバーのURLを動的に変更できる
history.replaceState("","","./hogehoge");
ADSRやマトリクスを変更すると動的にURLが変わる
.../?mat=[[0,0,...,0],...,[1,1,...,0,0]]&adsr=[0.6,0.05,0.7,0.2]
このURLをパースしてパラメータにする実装をしている
( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 33

34. CSS 3
2011年ごろから徐々に勧告されているCSSの仕様
- hsl / hsla ：扱いやすい⾊
- :not / :nth-child / ... : 扱いやすいSelector
- グラデーション / 丸⾓ / シャドウ
- アニメーション
( そんな項⽬まで簡単に指定できるとか裏⼭…) 34

35. イマドキっぽいjsでサイトを作る
- ES6 + HTML5 + CSS3
- jQuery / underscore.js / Bootstrap / LESS
- Vue.js
- node.js + express + forever + socket.io
- Webpack (+babel + import)
35

36. $ jQuery(イマドキでは無さそう)
DOM操作を簡単にするやつ
例 ) $("#slider > .edit").removeClass(”edit");
- HTMLの構造に⼤きく依存してしまうので⾟い
- 構造制御が分散しがち
- プラグインのライブラリが結構あるのでそこで使った
- $(”.hoge“).find(‘.slider’).roundSlider({...}); みたいな
var piyo = GameObject.Find(”hoge"),FindChild(”fuga"),AddComponent<Piyo>(); ... 36

37. _ (underscore)
便利ライブラリ集
なんかいっぱい便利関数がある
_.debounce(()=>{ ... },500)
- 待ち時間に対応した繰り返し呼び出しを抑⽌
- 今回はtwitterボタン増殖バグ対策に
_.throttle(()=>{ ... }, 100)
- 宣⾔した時間内の⼆度⽬以降の呼び出しを抑⽌
- range / bind / memoize / delay / once / wrap ...
( そんなん毎回わざわざ (多分Unityにデファクトなの無いけど)書きとうない…) 37

38. Bootstrap
レスポンシブデザイン楽々なTwitter社のフレームワーク
- Bootstrapなデザインにすーぐにできるよー
- 今回は 垂直スライダーライブラリ⽤に使った
( 少なくともUGUIのデフォルトのよりは数倍カッコイイから裏⼭ / 垂直バーは余裕w ) 38

39. LESS
CSSでは出来ないあんなことやこんなこと
- 変数 : @hoge = #765;
- 演算 : fuga : @hoge + #111;
- ⼊れ⼦ルール / import
- // ⼀⾏コメント
ブラウザで CSSに実⾏時に変換も (CDNですぐ試せる)
http://less-ja.studiomohawk.com/
( そもそもCSSをください(45$のはあるけどね) ) 39

40. イマドキっぽいjsでサイトを作る
- ES6 + HTML5 + CSS3
- jQuery / underscore.js / Bootstrap / LESS
- Vue.js
- Webpack (+babel + import)
40

41. Vue.js
データバインディングが楽々出来る凄いやつ
- React.js / Angular.js / Riot.js よりも楽々らしい
https://jp.vuejs.org/v2/guide/comparison.html
- React.js よりも速いしJSXも無いしシンプルらしい
- Angular.js より学習が楽らしい ( ... )
- Riot.js よりも ツール/APIサポートがいいらしい (察し)
今回のUI構築は全部これに任せました
( キムワイプみたいなデザインしてからに... / 逆に裏⼭でもない ) 41

42. Vue.js
最初はとりあえず直書きしてた
const div = document.createElement(“div");
div.className += ”container”;
document.getElementById('sliders').appendChild(div);
流⽯につらすぎたし動的UI変更もつらすぎる
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 42

43. Vue.js
jQuery にしてみた
$('#fmsliders')[0].appendChild(
$('<div class="container"></div>')[0]
);
増えてくると構造が把握できなくなってくる
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 43

44. Vue.js
最終的にVue.jsにした ( 48個のスライダー⽣成部 例)
let sliders = {
template:
`<div class="h-sl"><fm-h v-for="y in 6" :y="y-1"></fm-h></div>`,
components: {
'h-sl': {
props: ['y'],
template:
`<div class="h-w-sl"><sl v-for="x in 8" :x=x-1 :y=y></sl></div>`,
components: {
"sl": slider
}
}
}
};
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 44

45. Vue.js
最終的にVue.jsにした (丸スライダー部 例 )
const slider = {
props: ['x', 'y'],
template: `
<div :class="{
evens: ((x<6?x:1)*y+1) % 2 === 0,
odds: ((x<6?x:1)*y+1) % 2 === 1 ,
lighter: ((x+1) * (y +1) ) % 2 === 1 && x < 6}">
<div class="slider"></div>
</div>`,
mounted() { ...
$(this.$el).find('.slider').roundSlider(property);
}
};
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 45

46. Vue.js
最終的にVue.jsにした (ピアノ鍵盤部 例 )
template: `<div class="piano">
<pianokey v-for="p in pianos()" :code="p.code" :keyboard="p.keyboard"
:issharp="p.issharp" :hz="p.hz"> </pianokey></div>`,
components: { pianokey:
props: ['code', 'keyboard', 'issharp', 'hz'],
data() { return {ispressed: false}; },
template: `<div class="piano-key"
:class="{'sharp' :issharp,'piano-press':ispressed}"
@mousedown="press" @mouseup="release" @mouseleave="release">
<div>{{code}}<br>{{ keyboard.toUpperCase() }}</div> </div>`,
methods: {
press() { fm.regist(this.hz); this.ispressed = true; },
release() { fm.release(this.hz); this.ispressed = false;},
}}}}
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 46

47. Vue.js
最終的な index.html と fm.js の例
<div id="app">
<amplitude-view></amplitude-view>
<fm-slider-view></fm-slider-view>
<piano-view></piano-view>
</div>
new Vue({
el: '#app',
components: {
'fm-slider-view': FMSliderView(fm),
'piano-view': PianoView(fm),
'amplitude-view': AmplitudeView(fm)
}
});
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 47

48. Vue.js
のちのちUIが複雑になってきても⾒通しが⽴ちやすい
template:
`<div class="fm-sliders">
<table>
<tr class="slider-container">
<td style="width:22px;"></td>
<td v-for="x in 8” … ></td> </tr>
<fm-h-container v-for="y in 6" :y="y-1"></fm-h-container>
</table>
<div>
<adsr-view :A=A :D=D :S=S :R=R ></adsr-view>
<div class="adsr-sliders">
<fm-adsr-slider v-for="index in 4" :index="index-1"
@adsr-value-changed="adsrchanged">
</fm-adsr-slider> </div></div></div>`,
( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 48

49. イマドキっぽいjsでサイトを作る
- ES6 + HTML5 + CSS3
- jQuery / underscore.js / Bootstrap / LESS
- Vue.js
- Webpack (+babel + import)
49

50. Webpack
js/css だけでなく json / html / pug / coffee / png ... など
様々な種類のリソースをまとめてビルドしてくれるくん
( Unity はそもそもUnityが全部Asset として扱ってくれますね ) 50

51. Webpack
そもそも何故ビルドするのか？
.js / .css をそのまま配置した⽅が早いのでは？
.less だってクライアント側でパースすればいいのでは？
そう思っていたけれども…
( まあUnityもビルドするしね... ) 51

52. Webpack
ブラウザの js には 別スクリプトの import 機能がない！
htmlに こんな感じでスクリプトタグで⼀列にべた書きする？
=> 依存関係が全然わからなくなる
=> そもそもグローバルが汚染されてつらい
( js糞 wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
….........................................................….
52

53. Webpack
ブラウザの js には 別スクリプトの import 機能がない！
=> 動的にスクリプト内で別スクリプトタグを追加するくんを
書けばいいのでは ? => ⾮同期に読み込まれて あかん
=> Require.js
( C# だったら普通に名前空間でusing すればいいだけですね )
define((require, exports, module)=>{
let util = require('util');
console.log(util.add(1, 2));
});
53

54. Webpack
ブラウザの js には 別スクリプトの import 機能がない！
でもどうせ require するなら ES6みたいにしたい
=> Browserify
- ES6感覚でrequireしていい
=> npm のモジュールも使える！
=> ビルドして⼀個のjsにまとめる！
=> ⼀回のリクエストで全部とれて便利
( C# だったら普通に名前空間でusing すればいいだけですね. ) 54

55. Webpack
ブラウザの js には 別スクリプトの import 機能がない！
でもどうせ ビルドするなら css とかも全部ビルドすれば？
=> Webpack
- ビルドも早い(らしい)(実際差分watchビルドも出来る)
- js の minify もできる(1/4くらいに)
- lessもビルド可能
- ビルドしたjsは昔のブラウザでも読める！(babel)
( UnityはUnityが勝⼿にやってくれます ) 55

56. Webpack
いつの間にか
ブラウザのくせに
jsもcssもビルドする
世界観になっていた
( UnityはC#なのでもとよりビルドします ) 56

57. Webpack
( UnityではimportというよりはC#の関数として読み込むというか… )
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './css/style.less';
import FM from './fm';
import AmplitudeView from './amplitude-view';
import PianoView from './piano-view';
import FMSliderView from './fm-slider-view';
let fm = new FM();
import Vue from 'vue';
new Vue({
el: '#app',
components: {
'fm-slider-view': FMSliderView(fm),
'piano-view': PianoView(fm),
'amplitude-view': AmplitudeView(fm)
}
});
!function(t){function e(i){if(n[i])return
n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return
t[i].call(o.exports,o,o.exports,e),o.l=!0,o.export
s}var n={};e.m=t,e.c=n,e.i=function(t){return
t},e.d=function(t,n,i){e.o(t,n)||Object.definePr
operty(t,n,{configurable:!1,enumerable:!0,get:i
})},e.n=function(t){var
n=t&&t.__esModule?function(){return
t.default}:function(){return t};return
e.d(n,"a",n),n},e.o=function(t,e){return
Object.prototype.hasOwnProperty.call(t,e)},e.p
="/dist/",e(e.s=98)}([function(t,e){var
n;n=function(){return
this}();try{n=n||Function("return
this")()||(0,eval)("this")}catch(t){"object"==typ
eof window&&(n=window)}t.exports=n},functi..
57

58. Web初⼼者の奮闘⽇記を解説します
1 . サーバー構築
2 . イマドキっぽいjsでWebサービスを作る
3 . 地獄のWebフロントエンド
58

59. 地獄のWebフロントエンド
別名「Web初⼼者の愚痴の時間」です
- ブラウザ毎に微妙に異なる実装状況
- ビルド⽅法に依って異なる実⾏時間
- webpack する .vue なんかキモい
- ブラウザ間の同期
- っていうかフロントエンド界隈遷移速度早すぎないですか…
59

60. ブラウザ毎に微妙に異なる実装状況
Safariでは document.addEventListenerでkeyを取れない
- キーボード取得に keyIdentifier という別のでやる
- ʻU+0041ʼ: ʻaʼ, ʻU+0030ʼ: ʻ0ʼ, ... 的な世界です
Chrome が 何か キーボード反応が遅い => 誰か助けて…
- あまりにも遅すぎるので Chromeは切りました
document.addEventListener(
'keydown', (e) => e.key === ”a” && press());
( キーボード操作すらめんどいとかUnityからしたらありえんですぞwwww ) 60

61. ブラウザ毎に微妙に異なる実装状況
Edge の css
- “inline-flex” プロパティが上⼿く処理されなかった
- 最初の実装だと⿊鍵が左端に全部集まってた
Edge で es6対応が微妙に⾜りてなかった
- let [x,y] = [100,200] ; が出来なかった
=> Webpackのbabelでいつの間にか解決してた
( プラットフォームごとにレンダリング結果が変わるとかUnityからするとありえんですぞw ) 61

62. ビルド⽅法に依って異なる実⾏時間
minify するのとしないのとで実⾏時間が⼤幅に変わった
プロファイリングしてみると、⾳楽⽣成部で
2048のデータのループを36の⾏列演算するところだった
その関数を呼び出す階層が深かったせいか？
ワカンネ
( 数倍も変わるとかありえんですぞww ) 62

63. webpack する .vue なんかキモい
Vue.js 公式は webpackでの
.vue 形式を推している
html / js / css を全部まとめてて
なんか気持ち悪い
エディタサポートも⾟い
レンダリング⽅法も特殊で⾯倒
( * 個⼈の感想です ) 63

64. ブラウザ間の同期
new Date().getTime() で取得する現在時間が
ブラウザ(クライアント)毎に微妙に違う
0.04秒くらい⼿元で実⾏して違ってつらたん
定期的にサーバーに合わせるようにした
( > < ) 64

65. っていうかフロントエンド界隈遷移
速度早すぎないですか…
最初は index.html と fm.js と style.css だけでいいと思った
⼀年以上前の記事だと参考にならないこともよくある
⼀年ごとくらいでフレームワークぽんぽん乗り換えてる
記事とか読むととてもつらそうに⾒えてきた
⼀から始めるの⾟そうだなあ〜〜〜〜〜〜
( * Unity だったらすーぐにできるよ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 ) 65

66. デザインについて
結構頑張ってみた
- アクセントカラー / ベースカラー
- フォント
- アフォーダンス
- ⾯積効果
- 既存のWebサイトをいじって遊ぶ⽅法も分かってきた
- きれいなデザインが出来るのは楽しいです。
( 時間が余っていればここをなが〜くしゃべります) 66

67. まとめ+感想
最近のっぽい WebツールでFM⾳源サービスを作ってみた
フロントエンド界隈は進みが早いのでほえ〜という気分
Web媒体で作ると公開するのがめっちゃ楽で最⾼
⾊々なプログラミングをするのは楽しい
ラッパーの⽅は、
いい⾳⾊が出来たら是⾮共有して下さい
67

68. ネット上の参考記事
javascriptから始めるプログラミング (KMC by drafear) :
https://inside.kmc.gr.jp/pukiwiki/?javascript%A4%AB%A4%E9%BB%CF%A4%E1%A4%EB%A5%D7%A5%ED%A5%B
0%A5%E9%A5%DF%A5%F3%A5%B0
HTML5 MDN : https://developer.mozilla.org/ja/docs/Web/HTML/HTML5
CSS3 MDN : https://developer.mozilla.org/ja/docs/Web/CSS/CSS3
便利機能満載のライブラリ Underscore.js : http://d.hatena.ne.jp/ninoseki/20110414/1302786001
FM⾳源 Wikipedia : https://ja.wikipedia.org/wiki/FM%E9%9F%B3%E6%BA%90
FM⾳源 ニコニコ⼤百科 : http://dic.nicovideo.jp/a/fm%E9%9F%B3%E6%BA%90
FM⾳源について : http://qiita.com/fukuroder/items/e1c2708222bbb51c7634
ご清聴ありがとうございました！
68