贵惭音源をいじれる奥别产サービスを作った
?
0 likes?3,073 views
贵惭音源をいじれる奥别产サービスを作った
Convert to study guideBETA
Transform any presentation into a summarized study guide, highlighting the most important points and key insights.
![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](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-27-320.jpg)
![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](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-33-320.jpg)
![Vue.js
jQuery にしてみた
$('#fmsliders')[0].appendChild(
$('<div class="container"></div>')[0]
);
増えてくると構造が把握できなくなってくる
( 疲れてきたら??を作って遊んで下さいませ ) 43](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-43-320.jpg)
![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](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-44-320.jpg)
![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').round狠狠撸r(property);
}
};
( 疲れてきたら??を作って遊んで下さいませ ) 45](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-45-320.jpg)
![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](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-46-320.jpg)
![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 FM狠狠撸rView from './fm-slider-view';
let fm = new FM();
import Vue from 'vue';
new Vue({
el: '#app',
components: {
'fm-slider-view': FM狠狠撸rView(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](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-57-320.jpg)
![ブラウザ毎に微妙に異なる実装状況
Edge の css
- “inline-flex” プロパティが上?く処理されなかった
- 最初の実装だと?鍵が左端に全部集まってた
Edge で es6対応が微妙に?りてなかった
- let [x,y] = [100,200] ; が出来なかった
=> Webpackのbabelでいつの間にか解決してた
( プラットフォームごとにレンダリング結果が変わるとかUnityからするとありえんですぞw ) 61](https://image.slidesharecdn.com/fm-publish-170325114407/85/FM-Web-61-320.jpg)
贵惭音源をいじれる奥别产サービスを作った
- 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’).round狠狠撸r({...}); みたいな 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').round狠狠撸r(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': FM狠狠撸rView(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=/slideshow/fmweb/73630821/"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
- 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 FM狠狠撸rView from './fm-slider-view'; let fm = new FM(); import Vue from 'vue'; new Vue({ el: '#app', components: { 'fm-slider-view': FM狠狠撸rView(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
- 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
- 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