Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,242 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. フロントエンド界隈 遷移速度早すぎないですか… と思いながら FM⾳源をいじれる サービスを作った murata 1
  2. 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. 3. 近況報告 1⽉から下宿開始 (@北⽩川) => ネット回線 => グローバルIP => ラズパイ宅内サーバー (sagisawa.0am.jp / muratam.0am.jp) http://amzn.asia/4n4xnzC Webサービス作る機運 3
  4. 4. 元々やりたかったこと 今まで : Piet => 今度は⾳楽でプログラミングしてみたい Midiのピアノロール ? => ⾯⽩くないので ☓ もっと普段やらない⽅法… => FM⾳源 !!! 4
  5. 5. FM⾳源とは Frequency Modulation (周波数変調) を 使った⾳源 - 正弦波・三⾓波・矩形波 の合成だけのシンセより凄い <=> PCM⾳源 簡単に複雑な⾳が出せる => ⾄る所で使われる - アーケードゲーム - 電⾞の発着⾳ YAMAHAのDX7が有名 5
  6. 6. FM⾳源とは Frequency Modulation (周波数変調) を 使った⾳源 𝑭𝑴 𝒕 = 𝑨 𝒔𝒊𝒏 𝟐𝝅Ct + 𝑩 𝒔𝒊𝒏 𝟐𝝅𝑴𝒕 ただのsin波の定数だった周波数に 別のsin波を⾜し合わせてみたもの 𝒇 𝒕 = 𝑨 𝟏 𝒔𝒊𝒏 𝟐𝝅𝑪 𝟏 𝒕 + 𝑨 𝟐 𝒔𝒊𝒏 𝟐𝝅𝑪 𝟐 𝒕 + … とは格が違う 6
  7. 7. FM⾳源とは 𝑭𝑴 𝒕 = 𝑨 𝒔𝒊𝒏 𝟐𝝅C𝒕 + 𝑩 𝒔𝒊𝒏 𝟐𝝅𝑴𝒕 周波数上への合成 +波形上への直接の合成の組合せで 複雑な⾳⾊がどんどん出せる! 𝑭𝑴 𝒕 = 𝟐𝒔𝒊𝒏 𝟒𝟒𝟎 ∗ 𝟐𝝅𝒕 + 𝟓𝒔𝒊𝒏 𝟏𝟏𝟎 ∗ 𝟐𝝅𝒕 + 𝟏𝟎𝒔𝒊𝒏(𝟐𝟐 ∗ 𝟐𝝅𝒕) +𝟕𝒔𝒊𝒏 𝟒𝟐𝟎 ∗ 𝟐𝝅𝒕 + 𝟓𝒔𝒊𝒏 𝟓𝟓 ∗ 𝟐𝝅𝒕 + 𝟏𝟎𝒔𝒊𝒏(𝟕𝟐 ∗ 𝟐𝝅𝒕) みたいにアルゴリズムを定義してやばい⾳⾊を作れる 7
  8. 8. FM⾳源とは アルゴリズムでプログラミングできそう! => 意外とむずかった… - 状態を上⼿く持たせる発想が思いつかなかった => ていうか⾳が作れなすぎる… => みんなで⾳⾊をいじって セッション出来れば最⾼では?? 8
  9. 9. 作りました ( http://muratam.0am.jp/fm/ ) ここから先各⾃⾳出しOK!! 花背⽤に saezuri.hanase.kmc.gr.jp:31415/ でも開放中! 9
  10. 10. 操作⽅法(ログ⽤) いいかんじに実演 - Volume Ratio はそのままの意味 - ⾏毎の6個のsin波⽣成器と対応 - Attack(sec) : ⽴上がり時間 - Decay(sec) : 減衰⾳量までの時間 - Sustain(x100%) : 減衰⾳量 - Release(sec) : 余韻の時間 10
  11. 11. 操作⽅法(ログ⽤) 例 1 ) 初期状態 ( 𝒇 : 周波数 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 例 2 ) ( 𝑨 : 定数 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟗𝟕𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕) 11
  12. 12. 操作⽅法(ログ⽤) 例 3 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟐𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟑𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟒𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟓𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟕𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 12
  13. 13. 操作⽅法(ログ⽤) 例 4 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟐𝟎𝑨𝒔𝒊𝒏 𝟐 ∗ 𝟐𝝅𝒇𝒕 +𝟑𝟎𝑨𝒔𝒊𝒏 𝟑 ∗ 𝟐𝝅𝒇𝒕 +𝟒𝟎𝑨𝒔𝒊𝒏 𝟒 ∗ 𝟐𝝅𝒇𝒕 +𝟓𝟎𝑨𝒔𝒊𝒏 𝟓 ∗ 𝟐𝝅𝒇𝒕 +𝟕𝟎𝑨𝒔𝒊𝒏 𝟔 ∗ 𝟐𝝅𝒇𝒕 +𝟎. 𝟓𝒔𝒊𝒏 𝟐 ∗ 𝟐𝝅𝒇𝒕 + 𝟎. 𝟔𝒔𝒊𝒏 𝟑 ∗ 𝟐𝝅𝒇𝒕 +𝟎. 𝟕𝒔𝒊𝒏 𝟒 ∗ 𝟐𝝅𝒇𝒕 + 𝟎. 𝟖𝒔𝒊𝒏 𝟓 ∗ 𝟐𝝅𝒇𝒕 +𝟎. 𝟗𝒔𝒊𝒏(𝟐𝝅𝒇𝒕) 13
  14. 14. 操作⽅法(ログ⽤) 例 5 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 + 𝟏𝟎𝟎𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 + 𝟏𝟓𝟎𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕) 14
  15. 15. 操作⽅法(ログ⽤) 例 6 ) - 𝑭 𝒕 = 𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 + 𝟏𝟎𝟎𝑨𝒔𝒊𝒏 𝟔 ∗ 𝟐𝝅𝒇𝒕 +𝟏𝟒𝟏𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 +𝟏𝟑𝟑𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕) + 𝟎. 𝟕𝟐𝒔𝒊𝒏 𝟔 ∗ 𝟐𝝅𝒇𝒕 + 𝟏𝟒𝟏𝑨𝒔𝒊𝒏 𝟐𝝅𝒇𝒕 + 𝟏𝟑𝟑𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕) 15
  16. 16. 操作⽅法(ログ⽤) 例 7 (feedback)) - 𝑭 𝒕 = 𝒔𝒊𝒏(𝟐𝝅𝒇𝒕 + 𝟏𝟕𝟒𝑨𝒔𝒊𝒏(𝟐𝝅𝒇𝒕 + … )) (実装は⼀つ前の時点のデータを取ってる) 16
  17. 17. Web初⼼者の奮闘⽇記を解説します 1 . サーバー構築 2 . イマドキっぽいjsでWebサービスを作る 3 . 地獄のWebフロントエンド 17
  18. 18. サーバー構築 今時だと AWS や GCP などのクラウド ? せっかく買ったのでラズパイで作るぞ! ムカムカしても実体を物理的に殴ってストレス解消可能! 18
  19. 19. サーバー構築 : ラズパイとは 35$(僕は4400円で買った)で買える激安PC - 1GBRAM, USB*4, Wifi, BlueTooth 等完備 - イヤホンジャック => ⾳響 - HDMI => ディスプレイ - ピン => 電⼦⼯作 - 消費電⼒も少ない(7Wらしい) => 電気代が浮く! - 64bit :: Raspbian じゃなく ArchLinux 19
  20. 20. サーバー構築 : SSHポート開放 最初はキーボードとディスプレイで起動 めんどう => SSH - 設定をいじるだけ 楽 デフォルトの22番のまま公開 => 1時間で中国から⼆件SSH(admin)アクセス Fail2Ban + ポート変更 20
  21. 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. 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. 23. サーバー構築 : node.js 導⼊ サーバーでも動く JavaScript 最新のjsの仕様(ES6等)で書ける ライブラリがいっぱい - forever : 楽々デーモン化 - express : パスに応じて配信 - socket.io : 楽々websocket 23
  24. 24. Web初⼼者の奮闘⽇記を解説します 1 . サーバー構築 2 . イマドキっぽいjsでWebサービスを作る 3 . 地獄のWebフロントエンド 24
  25. 25. イマドキっぽいjsでサイトを作る - ES6 + HTML5 + CSS3 - jQuery / underscore / bootstrap / less - Vue.js - Webpack (+babel + import) 25
  26. 26. イマドキ ? そもそもはじめてWebサービス作るし全くの初⼼者 - ここから先の内容は本当にイマドキなのだろうか - そもそもイマドキとはなんなのだろうか 僕のメインは Unity なので その観点からも考察したい。 - UIに関しては⼤体神という印象を持ちました 今回のサイトでどこに何を利⽤したかを説明します。 ( ここにはUnityer ⽬線で⾒た感想が記述されます ) 26
  27. 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. 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. 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. 30. Web Audio API ~HTML5~ ⾳声を操作できる 例 ) - オシレーター(sin波など)を鳴らす - ディストーションエフェクトをかける - コンプレッサをかける - マイク/Webカメラ などと接続する - 任意の⾳声を鳴らす => FM⾳源の実現 ( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 30
  31. 31. Web Audio API ~HTML5~ FM⾳源を実現する 1. サンプリングレートを指定 (今回は44100) 2. データをセットする配列⻑を指定 (今回は2048) 3. createScriptProcessor,onaudioprocess を指定 4. 2048/44100秒分毎にデータを作成 outputBuffer.getChannelData(0) のデータを書き換える ( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 31
  32. 32. Web Audio API ~HTML5~ データを書き換える -1~1の振幅 (変化が 0 だと無⾳) - Chrome だとデータをリサイクルするので変な⾳ ( canvas楽で裏⼭ / そもそもテキストで シュッと UIを綺麗に書けて裏⼭ ) 32
  33. 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. 34. CSS 3 2011年ごろから徐々に勧告されているCSSの仕様 - hsl / hsla :扱いやすい⾊ - :not / :nth-child / ... : 扱いやすいSelector - グラデーション / 丸⾓ / シャドウ - アニメーション ( そんな項⽬まで簡単に指定できるとか裏⼭…) 34
  35. 35. イマドキっぽいjsでサイトを作る - ES6 + HTML5 + CSS3 - jQuery / underscore.js / Bootstrap / LESS - Vue.js - node.js + express + forever + socket.io - Webpack (+babel + import) 35
  36. 36. $ jQuery(イマドキでは無さそう) DOM操作を簡単にするやつ 例 ) $("#slider > .edit").removeClass(”edit"); - HTMLの構造に⼤きく依存してしまうので⾟い - 構造制御が分散しがち - プラグインのライブラリが結構あるのでそこで使った - $(”.hoge“).find(‘.slider’).roundSlider({...}); みたいな var piyo = GameObject.Find(”hoge"),FindChild(”fuga"),AddComponent<Piyo>(); ... 36
  37. 37. _ (underscore) 便利ライブラリ集 なんかいっぱい便利関数がある _.debounce(()=>{ ... },500) - 待ち時間に対応した繰り返し呼び出しを抑⽌ - 今回はtwitterボタン増殖バグ対策に _.throttle(()=>{ ... }, 100) - 宣⾔した時間内の⼆度⽬以降の呼び出しを抑⽌ - range / bind / memoize / delay / once / wrap ... ( そんなん毎回わざわざ (多分Unityにデファクトなの無いけど)書きとうない…) 37
  38. 38. Bootstrap レスポンシブデザイン楽々なTwitter社のフレームワーク - Bootstrapなデザインにすーぐにできるよー - 今回は 垂直スライダーライブラリ⽤に使った ( 少なくともUGUIのデフォルトのよりは数倍カッコイイから裏⼭ / 垂直バーは余裕w ) 38
  39. 39. LESS CSSでは出来ないあんなことやこんなこと - 変数 : @hoge = #765; - 演算 : fuga : @hoge + #111; - ⼊れ⼦ルール / import - // ⼀⾏コメント ブラウザで CSSに実⾏時に変換も (CDNですぐ試せる) http://less-ja.studiomohawk.com/ ( そもそもCSSをください(45$のはあるけどね) ) 39
  40. 40. イマドキっぽいjsでサイトを作る - ES6 + HTML5 + CSS3 - jQuery / underscore.js / Bootstrap / LESS - Vue.js - Webpack (+babel + import) 40
  41. 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. 42. Vue.js 最初はとりあえず直書きしてた const div = document.createElement(“div"); div.className += ”container”; document.getElementById('sliders').appendChild(div); 流⽯につらすぎたし動的UI変更もつらすぎる ( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 42
  43. 43. Vue.js jQuery にしてみた $('#fmsliders')[0].appendChild( $('<div class="container"></div>')[0] ); 増えてくると構造が把握できなくなってくる ( 疲れてきたら⾳⾊を作って遊んで下さいませ ) 43
  44. 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. 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. 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. 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. 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. 49. イマドキっぽいjsでサイトを作る - ES6 + HTML5 + CSS3 - jQuery / underscore.js / Bootstrap / LESS - Vue.js - Webpack (+babel + import) 49
  50. 50. Webpack js/css だけでなく json / html / pug / coffee / png ... など 様々な種類のリソースをまとめてビルドしてくれるくん ( Unity はそもそもUnityが全部Asset として扱ってくれますね ) 50
  51. 51. Webpack そもそも何故ビルドするのか? .js / .css をそのまま配置した⽅が早いのでは? .less だってクライアント側でパースすればいいのでは? そう思っていたけれども… ( まあUnityもビルドするしね... ) 51
  52. 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. 53. Webpack ブラウザの js には 別スクリプトの import 機能がない! => 動的にスクリプト内で別スクリプトタグを追加するくんを 書けばいいのでは ? => ⾮同期に読み込まれて あかん => Require.js ( C# だったら普通に名前空間でusing すればいいだけですね ) define((require, exports, module)=>{ let util = require('util'); console.log(util.add(1, 2)); }); 53
  54. 54. Webpack ブラウザの js には 別スクリプトの import 機能がない! でもどうせ require するなら ES6みたいにしたい => Browserify - ES6感覚でrequireしていい => npm のモジュールも使える! => ビルドして⼀個のjsにまとめる! => ⼀回のリクエストで全部とれて便利 ( C# だったら普通に名前空間でusing すればいいだけですね. ) 54
  55. 55. Webpack ブラウザの js には 別スクリプトの import 機能がない! でもどうせ ビルドするなら css とかも全部ビルドすれば? => Webpack - ビルドも早い(らしい)(実際差分watchビルドも出来る) - js の minify もできる(1/4くらいに) - lessもビルド可能 - ビルドしたjsは昔のブラウザでも読める!(babel) ( UnityはUnityが勝⼿にやってくれます ) 55
  56. 56. Webpack いつの間にか ブラウザのくせに jsもcssもビルドする 世界観になっていた ( UnityはC#なのでもとよりビルドします ) 56
  57. 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. 58. Web初⼼者の奮闘⽇記を解説します 1 . サーバー構築 2 . イマドキっぽいjsでWebサービスを作る 3 . 地獄のWebフロントエンド 58
  59. 59. 地獄のWebフロントエンド 別名「Web初⼼者の愚痴の時間」です - ブラウザ毎に微妙に異なる実装状況 - ビルド⽅法に依って異なる実⾏時間 - webpack する .vue なんかキモい - ブラウザ間の同期 - っていうかフロントエンド界隈遷移速度早すぎないですか… 59
  60. 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. 61. ブラウザ毎に微妙に異なる実装状況 Edge の css - “inline-flex” プロパティが上⼿く処理されなかった - 最初の実装だと⿊鍵が左端に全部集まってた Edge で es6対応が微妙に⾜りてなかった - let [x,y] = [100,200] ; が出来なかった => Webpackのbabelでいつの間にか解決してた ( プラットフォームごとにレンダリング結果が変わるとかUnityからするとありえんですぞw ) 61
  62. 62. ビルド⽅法に依って異なる実⾏時間 minify するのとしないのとで実⾏時間が⼤幅に変わった プロファイリングしてみると、⾳楽⽣成部で 2048のデータのループを36の⾏列演算するところだった その関数を呼び出す階層が深かったせいか? ワカンネ ( 数倍も変わるとかありえんですぞww ) 62
  63. 63. webpack する .vue なんかキモい Vue.js 公式は webpackでの .vue 形式を推している html / js / css を全部まとめてて なんか気持ち悪い エディタサポートも⾟い レンダリング⽅法も特殊で⾯倒 ( * 個⼈の感想です ) 63
  64. 64. ブラウザ間の同期 new Date().getTime() で取得する現在時間が ブラウザ(クライアント)毎に微妙に違う 0.04秒くらい⼿元で実⾏して違ってつらたん 定期的にサーバーに合わせるようにした ( > < ) 64
  65. 65. っていうかフロントエンド界隈遷移 速度早すぎないですか… 最初は index.html と fm.js と style.css だけでいいと思った ⼀年以上前の記事だと参考にならないこともよくある ⼀年ごとくらいでフレームワークぽんぽん乗り換えてる 記事とか読むととてもつらそうに⾒えてきた ⼀から始めるの⾟そうだなあ〜〜〜〜〜〜 ( * Unity だったらすーぐにできるよ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 ) 65
  66. 66. デザインについて 結構頑張ってみた - アクセントカラー / ベースカラー - フォント - アフォーダンス - ⾯積効果 - 既存のWebサイトをいじって遊ぶ⽅法も分かってきた - きれいなデザインが出来るのは楽しいです。 ( 時間が余っていればここをなが〜くしゃべります) 66
  67. 67. まとめ+感想 最近のっぽい WebツールでFM⾳源サービスを作ってみた フロントエンド界隈は進みが早いのでほえ〜という気分 Web媒体で作ると公開するのがめっちゃ楽で最⾼ ⾊々なプログラミングをするのは楽しい ラッパーの⽅は、 いい⾳⾊が出来たら是⾮共有して下さい 67
  68. 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

×