常連

注目の的

自己紹介

async/awaitの勉強のためにpromiseを勉強しています。

やりたいことは、要素が3つずつある2次元の配列([[1,2,3],[4,5,6],...])をループする形で、一つめの配列をpromise.allで並列実行し、それがおわれば次の配列をpromise.allで実行...という風にしたいです。
それを実現するとなると以下の様な構造でやるしかないでしょうか？

```ここに言語を入力
Promise.all([1,2,3])
   .then(Promise.all([4,5,6])
         .then(Promise.all([7,8,9])
               .then(Promise.all([10,11,12]))))

```
以下に試しに書いてみましたが、4秒ぐらいですべての処理が終わってしまいます。本当は9秒で終えてほしいです。setTimeout(3秒) * 3
```ここに言語を入力
function main(n){
	return new Promise(resolve => {
  	setTimeout(console.log, 3000, 'インデックス' + n + 'の処理終了')
    resolve()
    })
}

function promisewrapper(arr){
	return Promise.all(arr)
}

let array = [1,2,3,4,5,6,7,8,9]

function divide(arr, n){
	return arr.reduce((new_arr, _ , i)=> i % n === 0 ? [...new_arr, arr.slice(i, i + n)] : new_arr, [])
}

array = divide(array, 3)
array = array.map(val => val.map(val2 => main(val2)))
array = array.map((x, i) => promisewrapper(x, i))


array.reduce((pre, cur, i) => pre.then(() => {cur; return cur}), Promise.resolve())
```
チェーン化する場合、pre.thenのcallback内でreturn preすると思いますが、return curとしましたが、結果が変わりませんでした。

javascript 複数のPromise.allをそれぞれのPromiseが完了してから実行したい

### 前提・実現したいこと

タイトル通り、Xamarin.Formsアプリで、クラウド（に限った話ではないですが）との接続に使う接続文字列をどこに保存するべきか教えていただきたいです。

現状は動作確認のみなのでハードコーディングなのですが、流石にこのままというわけにはいかず、ちゃんとした場所に保管してそこから読み取る方式に変更したいです。

そこで、AndroidとiOSの規約を読んだのですが、
* Android：/data/data/(パッケージ名)/files/(ファイル名)
* iOS：App/Library/(サブフォルダ名)/(ファイル名)
にそれぞれ保存するとありました。

ただ、アプリはXamarin.Formsで作成しており、クラウドとの接続メソッドもPCL内のメソッドです。

この場合、接続文字列を記載したファイルはPCL内のどこかに格納しておくのか、それともそれぞれのOSのプロジェクトに格納するのか、どちらがよいでしょうか？
また、他に推奨のやり方があるならご教示いただきたいです。

### 補足情報
以下のMicrodoftドキュメントも一読してみました。
[接続文字列と構成ファイル](https://docs.microsoft.com/ja-jp/dotnet/framework/data/adonet/connection-strings-and-configuration-files)
外部ファイルに定義して名前呼び出しする方法が既にあれば楽できると思ったのですが、app.configのようなファイルを見つけられず、新規作成する必要があるのか、そもそもそういった仕組みは無いのかわからずじまいでした。

【Xamarin.Forms】接続文字列などの機密ファイルをアプリ内のどこに保存する？

例えば、以下のような連続で行われる2つのajax処理があったとします。

1).DBからアイテムデータを消す(削除用APIを叩く)
2).1の処理がthenの場合、消した後のアイテムデータをDBより再取得し、mutationsを呼びstateにアイテムデータをセット(取得用のAPIを叩き、その後mutationsを呼ぶ)

1の処理はmutationsを呼ばないという意味でstateに関係ありませんが
2の処理はmutationsを呼ぶためstateに関係あります。

このような場合
1の処理は各コンポーネントに書いて
2の処理はストア内のactionsに書くのが一般的でしょうか。

または、最終的にstateに関連する部分なので
全部actions内に書くのが一般的でしょうか。
（公式にはアクションを繋げて書くやり方も書いてありますが）

例として他にあげるなら、新規ユーザ登録用のAPIとかも気になります。
(これは登録用コンポーネントに書いても良い気がしますが)

actions内に処理が少ないようであれば全部actionsに書くなど
規模などにもよる部分もあるかと思いますが、気になったので質問させて頂きました。

よろしくお願いします。

(Vuex) 非同期処理を、actionsに書くか各コンポーネントに書くか分ける基準について

### 前提・実現したいこと

mp3ファイルの音声の波形と音声認識からの波形の類似度などどれだけ似ているかっていうのをHTML上で表示できるように作りたいです。探してもそういう技術がないため見て判断するしかないのかなと結論がでそうなため　そういったことができるようなサイトやどういった方法でやったらよいか教えていただけると幸いです。


### 発生している問題・エラーメッセージ

HTML上で波形がどれだけ似ているかの判定の手段がない

### 該当のソースコード

```HTML
#波形を表示する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.6/wavesurfer.min.js"></script>

<div id="waveform"> </div>

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    <i class="glyphicon glyphicon-play"></i>Play</button>

<p class="row">
    <div class="col-xs-1">
      <i class="glyphicon glyphicon-zoom-in"></i>
    </div>

    <div class="col-xs-10">
      <input id="slider" type="range" min="1" max="200" value="1" style="width: 100%" />
    </div>

    <div class="col-xs-1">
      <i class="glyphicon glyphicon-zoom-out"></i>
    </div>
  </p>

</div>

<script language="JavaScript">

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple'
});

wavesurfer.load('sightseeing.mp3');

var slider = document.querySelector('#slider');

slider.oninput = function () {
  var zoomLevel = Number(slider.value);
  wavesurfer.zoom(zoomLevel);
};

</script>
</body>
</html>

```
```HTML
#音声認識から波形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>*{box-sizing:border-box;margin:0;padding:0;}html,body{font-family:Meiryo;height:65%;}input,button{font-family:Meiryo;}#app{display:flex;overflow-y:hidden;flex-direction:column;min-width:320px;height:100%;}#control{color:#fff;background:#424242;display:flex;align-items:center;height:50px;max-height:50px;}#content{background:#212121;height:calc(100% - 50px);}#content .col{height:calc(100% / 2);}#content .col canvas{width:100%;height:calc(100% - 40px);}#content .head{background:#455a64;display:flex;align-items:center;justify-content:space-between;height:40px;max-height:40px;padding:0 10px;}#content .head h2{font-size:18px;font-weight:normal;color:#fff;flex:1 0 0%;margin:0;}#btn-tgl-rec,#btn-tgl-mute,.btn-play,.btn-clear,.btn-download{font-size:14px;color:#333;background:#e0e0e0;display:flex;align-items:center;justify-content:center;height:30px;margin:0 0 0 10px;padding:0 10px;cursor:pointer;border:0;text-decoration:none;}.btn-download{color:#ccc;}.btn-download[href]{color:#333;}#btn-tgl-rec::before,#btn-tgl-mute::before,.btn-play::before,.btn-clear::before,.btn-download::before{font-family:"Material Icons";font-size:24px;display:inline-block;margin:0 5px 0 0;}#btn-tgl-rec::before{color:#b71c1c;content:"\E061";}#btn-tgl-rec.is-recording::before{color:#212121;content:"\E034";}#btn-tgl-mute::before{content:"\E029";}#btn-tgl-mute.is-muted::before{content:"\E02B";}.btn-play::before{content:"\E037";}.btn-play.is-played::before{content:"\E034";}.btn-clear::before{content:"\E92b";}.btn-download::before{content:"\E2C4";}</style>
</head>
<body>
<div id="app">
<div id="control">
<audio id="audio"></audio>
<button id="btn-tgl-rec"><span>REC</span></button>
<button id="btn-tgl-mute"><span>MUTE</span></button>
</div>
<div id="content">
<div class="col">
<div class="head">
<h2>リアルタイム入力波形</h2>
</div>
<canvas id="input-waveform"></canvas>
</div>

<div class="col">
<div class="head">
<h2>録音した音声の波形</h2>
<a id="btn-rec-download" class="btn-download"><span>DOWNLOAD</span></a>
<button id="btn-rec-clear" class="btn-clear"><span>CLEAR</span></button>
<button id="btn-rec-play" class="btn-play"><span>PLAY</span></button>
<audio id="rec-audio"></audio>
</div>
<canvas id="rec-waveform"></canvas>
</div>

<div class="col">
<div class="head">
  <a id="btn-effect-download" class="btn-download"><span>DOWNLOAD</span></a>
  <button id="btn-effect-clear" class="btn-clear"><span>CLEAR</span></button>
  <button id="btn-effect-play" class="btn-play"><span>PLAY</span></button>
  <audio id="effect-audio"></audio>
  </div>
<canvas id="effect-waveform"></canvas>
</div>
</div>
</div>
</div>
<script src="run.js"></script>
</body>
</html>

```
```JavaScript
#run.js
!function(win,doc,AudioContext,MediaRecorder){"use strict"

function resizeCanvas(){$waveformInput.width="100%",$waveformInput.style.width="100%",offsetWidth=$waveformInput.offsetWidth,offsetHeight=$waveformInput.offsetHeight,

function(arr){for(var i=0;i<arr.length;i++)arr[i].style.width=offsetWidth+"px",arr[i].style.height=offsetHeight+"px",arr[i].width=offsetWidth,arr[i].height=offsetHeight}([$waveformInput,$waveformRec,$waveformEffect])}

 function clearCanvas(ctx){ctx.clearRect(0,0,offsetWidth,offsetHeight),ctx.beginPath()}

 function createWaveform(audioBuffer,ctx,size){var bufferFl32=new Float32Array(audioBuffer.length),leng=bufferFl32.length
   clearCanvas(ctx),bufferFl32.set(audioBuffer.getChannelData(0))

for(var idx=0;leng>idx;idx++)if(idx%size===0){var x=offsetWidth*(idx/leng),y=(1-bufferFl32[idx])/2*offsetHeight
   0===idx?ctx.moveTo(x,y):ctx.lineTo(x,y)}var gradient=ctx.createLinearGradient(0,0,0,offsetHeight)
   gradient.addColorStop("0","#f44336"),gradient.addColorStop("0.5","#4caf50"),gradient.addColorStop("1","#2196f3"),ctx.strokeStyle=gradient,ctx.stroke()}

 function clearSection(ctx,$btnDownload,$btnPlay,$audio){clearCanvas(ctx),$btnDownload.removeAttribute("href"),$btnPlay.classList.remove("is-played"),$audio.removeAttribute("src")}

 function playAudio($btnPlay,$audio){$btnPlay.classList.value.indexOf("is-played")<0?($btnPlay.classList.add("is-played"),$audio.play()):($btnPlay.classList.remove("is-played"),$audio.pause())}

 function fetchArrayBufferFromURL(blob){var url=URL.createObjectURL(blob)
   return fetch(url).then(function(response){return response.arrayBuffer()})}

 function renderCanvas(data,$audio,$btnDownload,ctx){var blob=new Blob([data],{type:"audio/webm"})
  $audio.src=win.URL.createObjectURL(blob),
  $btnDownload.href=$audio.src,$btnDownload.download="rec.webm",fetchArrayBufferFromURL(blob).then(function(arrayBuffer){actx.decodeAudioData(arrayBuffer).then(function(audioBuffer){createWaveform(audioBuffer,ctx,1)})})}

 var offsetWidth,offsetHeight,recorder1,recorder2,recorderStream,
 $btnRec=doc.getElementById("btn-tgl-rec"),
 $btnMute=doc.getElementById("btn-tgl-mute"),
 $waveformInput=doc.getElementById("input-waveform"),
 $waveformRec=doc.getElementById("rec-waveform"),
 $waveformEffect=doc.getElementById("effect-waveform"),
 $btnRecDownload=doc.getElementById("btn-rec-download"),
 $btnRecClear=doc.getElementById("btn-rec-clear"),
 $btnRecPlay=doc.getElementById("btn-rec-play"),
 $btnEffectDownload=doc.getElementById("btn-effect-download"),
 $btnEffectClear=doc.getElementById("btn-effect-clear"),
 $btnEffectPlay=doc.getElementById("btn-effect-play"),

 actx=new AudioContext,ictx=$waveformInput.getContext("2d"),

rctx=$waveformRec.getContext("2d"),ectx=$waveformEffect.getContext("2d"),$raudio=doc.getElementById("rec-audio"),$eaudio=doc.getElementById("effect-audio"),fft=1024,gainNode=actx.createGain(),scriptProcessor=actx.createScriptProcessor(fft,1,1),streamDestination=actx.createMediaStreamDestination(),isMute=!1,isRecording=!1
resizeCanvas(),win.addEventListener("resize",resizeCanvas,!1),scriptProcessor.onaudioprocess=function(event){var outputBuffer=event.outputBuffer
outputBuffer.getChannelData(0).set(event.inputBuffer.getChannelData(0)),createWaveform(outputBuffer,ictx,1)},gainNode.gain.value=50,gainNode.connect(streamDestination),scriptProcessor.connect(actx.destination),navigator.mediaDevices.getUserMedia({video:!1,audio:!0}).then(function(stream){var input=actx.createMediaStreamSource(stream)
recorderStream=stream,$btnMute.addEventListener("click",function(){isMute?(isMute=!1,input.connect(scriptProcessor),input.connect(gainNode),
  $btnMute.classList.remove("is-muted")):(isMute=!0,input.disconnect(scriptProcessor),input.disconnect(gainNode),$btnMute.classList.add("is-muted"))},!1),input.connect(scriptProcessor),input.connect(gainNode)}),
  $btnRec.addEventListener("click",function(){isRecording?(isRecording=!1,$btnRec.classList.remove("is-recording"),recorder1.stop(),recorder2.stop()):(isRecording=!0,$btnRec.classList.add("is-recording"),
  $btnRecDownload.removeAttribute("href"),recorder1=new MediaRecorder(recorderStream),recorder2=new MediaRecorder(streamDestination.stream),recorder1.ondataavailable=function(event){renderCanvas(event.data,$raudio,$btnRecDownload,rctx)},recorder2.ondataavailable=function(event){renderCanvas(event.data,$eaudio,$btnEffectDownload,ectx)},recorder1.start(),recorder2.start())},!1),
  $btnRecClear.addEventListener("click",function(){clearSection(rctx,$btnRecDownload,$btnRecPlay,$raudio)},!1),
  $btnEffectClear.addEventListener("click",function(){clearSection(ectx,$btnEffectDownload,$btnEffectPlay,$eaudio)},!1),
  $btnRecPlay.addEventListener("click",function(){playAudio($btnRecPlay,$raudio)},!1),
  $btnEffectPlay.addEventListener("click",function(){playAudio($btnEffectPlay,$eaudio)},!1)}(window,document,window.AudioContext,window.MediaRecorder)
```


### 試したこと

色々調べたがPythonやMatlabなどならできるのですがHTML上に表示する手段がなくとても困ってます。
### 補足情報（FW/ツールのバージョンなど）

mp3から波形を表示するJSはwavesurferというものです。
  URL https://wavesurfer-js.org/ 
音声認識から波形を表示
　URL  https://www.mitsue.co.jp/knowledge/blog/frontend/201704/05_1206.html