質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.99%

  • JavaScript

    13865questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5830questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

配列の中身をabc順に表示したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 177

yuzumikan

score 18

以下の出力(メインコードの112行目)をabc順にwebページでも表示したいです.herokuの更新の都合?によって,更新が入るたびに順番が変わってしまい困っています.常に,abc順で固定されるようにしたいです.
ターミナルとコンソール上ではabc順にソートできている状態です.

$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key); //ユーザID

例えば,ユーザが3人いてtanaka,satou,uedaがログインするとweb上でsatou,tanaka,uedaと表示されるようにしたいということです.
ユーザIDはkeys配列に入っていて,それぞれユーザIDはkeyとなっています.

わかりにくい説明ですみません.

↓メインコード

navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.AudioContext = window.AudioContext || window.webkitAudioContext;

var keymicnodepair=new Object();
var keygainpair=new Object();
var beforevalue=new Object();
var keyoutputpair=new Object();

navigator.getUserMedia({ audio: true}, function (stream) {

  var context = new AudioContext();
  var peer;
  var socket = io();//元のやつ
  var id;
  var output = context.createMediaStreamDestination();//ダミー用

  socket.on('connect', function () {
    var options = {
      host: location.hostname,
      port: location.port,
      path: '/api', // app.use('/api', peerServer);と同じ位置になるように
    };
    id = localStorage.getItem('user_id');
    peer = new Peer(id, options);
    //peer = new Peer(socket.id, options);
    peer.on('call', function (call) {
      console.log('%sにcallされました', call.peer);
      for(var i in keygainpair){
        console.log("call key="+i+"   gain="+keygainpair[i].gain.value);
      }
      call.answer(keyoutputpair[call.peer].stream);
    });
    $(function(){
        setInterval(function(){
          console.log("calldammy!");
          peer2 = new Peer("dammy", options);
          peer2.on('call', function (call) {
            console.log('%sにcallされました', call.peer);
            call.answer(output.stream);
          });
        },25000);
    });
  });

  //受信した全てのP2Pkeyをaudio要素に変換する
  socket.on('keys', function (keys) {

    for(var i in keymicnodepair){//ソース削除
      console.log("key="+i+"   gain="+keygainpair[i].gain.value);
      keygainpair[i].disconnect();
      keymicnodepair[i].disconnect();
      delete keymicnodepair[i];
      delete keygainpair[i];
      //不具合出たらdelete keyoutputpair[i];をまず検討
    }

    $("#audios").empty();
    $("#sliderarea").empty();

    var audios = document.querySelector('#audios');
    audios.innerHTML = '';

    console.log("keys",keys); //abc順に表示されるようになった171024
    console.log("socket.id",id);

    var index = keys.indexOf(id);
    if (index > -1) {
      keys.splice(index, 1);// 自分自身を無視
    }

    arrayforkeys=keys;//キー押下時の繰り返し処理のため 多分いらない

    keys.forEach(function (key) {
      keymicnodepair[key]=context.createMediaStreamSource(stream);//sourcenode
      if(context.createGain) {
        keygainpair[key] = context.createGain();
      }
      else {
        // 多分不要だと思われますが、念のため古いWeb Audio APIへの対処
        keygainpair[key] = context.createGainNode();
      }
      keyoutputpair[key]=context.createMediaStreamDestination();
      keymicnodepair[key].connect(keygainpair[key]);
      keygainpair[key].connect(keyoutputpair[key]);

      var call = peer.call(key, keyoutputpair[key].stream);
      if (call === undefined) {
        console.log(key + 'なんて居ません');
        return;
      }
      call.on('stream', function (remoteStream) {

        $(function(){
            setInterval(function(){
              console.log("senddammy!");
                socket.emit('dammy', "dammy");
            },25000);
        });

        var audio = new Audio();
        audio.src = URL.createObjectURL(remoteStream);
        audio.controls = false;
        audio.play();
        audios.appendChild(audio);

        //171024
        var ary=[keys];
        ary.sort();
        // document.write(ary);

        $('<div id=group'+key+'><div>').appendTo("#sliderarea");
        $('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key); //ユーザID
        console.log(key);
        $('<div id="num'+key+'"><input id="input'+key+'" readonly type="text" size="3"/></div>').appendTo("#group"+key); //数値
        $('<div id="slider'+key+'" style="height:300px"/></div>').appendTo("#group"+key); //スライダー

        $(function() {
          //スライダーを適用
          $('#slider'+key).slider({
            orientation: 'vertical',
            min: 0,
            max: 200,
            step: 1,
            value: 100,
            //スライダーの変化時にテキストボックスの値表示を更新
            change: function(e, ui) {
              $('#input'+key).val(ui.value);
              console.log("change!!!"+key+"    "+ui.value);
              console.log("change before: "+keygainpair[key].gain.value);
              keygainpair[key].gain.value=1;//0.5;
              //keygainpair[key].gain.value = ui.value/200;//デバッグ用
              console.log("change after: "+keygainpair[key].gain.value);

              //beforevalueの値更新
              try{
                if(key in beforevalue){
                  beforevalue[key]=ui.value/100;
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                }
              }catch(e){
                alert("key is not found");
              }
              for(var i in keygainpair){
                console.log("change key="+i+"   gain="+keygainpair[i].gain.value);
              }
            },

            //スライド中に変化を取得
            slide: function(e, ui) {
             $('#input'+key).val(ui.value);
           },

            //スライダーの初期化時に、その値をテキストボックスにも反映
            create: function(e, ui) {
              try{
                if(key in beforevalue){
                  console.log("value is updated");
                  keygainpair[key].gain.value=1;//0.5;
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                  console.log("");
                  $('#input'+key).val(beforevalue[key])*100;
                  $("#slider"+key).slider("value",beforevalue[key]*100);
                  ui.value=beforevalue[key]*100;
                  console.log("create before: "+keygainpair[key].gain.value);
                  console.log("create after: "+keygainpair[key].gain.value);
                }
                else{
                  //音量値初期値記憶
                  keygainpair[key].gain.value=1;//0.5;
                  beforevalue[key]=1;//0.5;
                  $('#input'+key).val('100');
                  console.log("初期化!");
                  console.log(  $('#input'+key).val());
                  for (var keyString in beforevalue) {
                    console.log("key="+keyString+"  value="+beforevalue[keyString]);
                  }
                }
              }catch(e){}
            }
          });
        });
      });
    });
  });

}, function (error) {
  alert('Failed to get local stream', error);
});

//キーダウン処理
var flag=true;
  document.onkeydown = function (evt){
      if (!evt) e = window.event;
      if(flag){
        console.log("キーが押された");
        document.getElementById("running").classList.add("pressing");
        for(var key in keygainpair){
          console.log("keydown before: "+keygainpair[key].gain.value);
          keygainpair[key].gain.value=beforevalue[key];
          console.log("keydown after: "+keygainpair[key].gain.value);
        }
      }
      flag=false;
    }

  //キーアップ処理
    document.onkeyup=function (evt){
      if (!evt) e = window.event;
      console.log("キーが離された");
      document.getElementById("running").classList.remove("pressing");
      flag=true;
      for(var key in keygainpair){
        console.log("keyup before: "+keygainpair[key].gain.value);
        keygainpair[key].gain.value=1;//0.5;
        console.log("keyup after: "+keygainpair[key].gain.value);
      }
    }

//自分の音を返す処理
navigator.getMedia2 = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getMedia2({ audio:true }, function(stream) {
var context = new AudioContext();
var source = context.createMediaStreamSource(stream);
if(context.createGain) {
  var micGain2 = context.createGain();
}
else {
  //多分不要だと思われますが、念のため古いWeb Audio APIへの対処
  micGain2 = context.createGainNode();
}
source.connect(micGain2);
micGain2.gain.value =1.0; //自分の音量調整

micGain2.connect(context.destination);
}, function(err){ //エラー処理
});

↓サーバコード

// Dependencies
const express = require('express');
const createHttpServer = require('http').createServer;
const createIo = require('socket.io');
const createPeerServer = require('peer').ExpressPeerServer;

// Environment
const port = process.env.PORT || 5650;

// Routes
const app = express();
const httpServer = createHttpServer(app);
const io = createIo(httpServer);
const peerServer = createPeerServer(httpServer);

app.use('/api', peerServer);
app.use(express.static(__dirname));

// Boot
httpServer.listen(port, () => {
  console.log(`Boot on http://localhost:${port}`);
});

// Manage p2p keys
const keys = [];

peerServer.on('connection', (key) => {
  if(key!="dammy") keys.push(key);
  keys.sort(); //追加171024
  console.log('connected', keys);

  io.emit('keys', keys);// 接続中の全てのクライアントへ`keys`イベントを発行
});
peerServer.on('disconnect', (key) => {
  const index = keys.indexOf(key);
  if (index > -1) {
    keys.splice(index, 1);
  }
  console.log('disconnect', keys);

  io.emit('keys', keys);// 同上
});

//---------------------------//
io.on('connection',function(socket) {
  socket.on("dammy",function(data){
    console.log(data);
  });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • masaya_ohashi

    2017/11/01 14:09 編集

    $('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key);の次の行のconsole.log(key);ではABC順で出てるんですよね?なのに#slideareaの中には実際にはABC順でない#groupXXXが入っている、ということですよね?

    キャンセル

  • yuzumikan

    2017/11/02 16:32

    すみません,ご指摘の$('<div><input readonly type="text" value='+key+' /></div>').appendTo("#group"+key);の次の行のconsole.log(key);では一つのkeyしか出ていません..//スライド中に変化を取得の上のconsole.log("change key="+i+" gain="+keygainpair[i].gain.value);では,abc順でkeyとgainの情報が一行ずつ出ています.恐らくこちらのconsole.logと間違えて前回コメントしてしまいました.

    キャンセル

  • masaya_ohashi

    2017/11/02 16:36

    1つのkeyしか出てないのは承知のうえで、それが3回「ABC順」で出るかを確認したいのです。console.log(key);ではなく、console.log("appendTo:" + key);と出力を変えてテストして、appendTo:satou、appendTo:tanaka、appendTo:uedaと3回に分けて出力されているかを確認してください。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13865questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5830questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。