2017-02-27

Multi Track Playerっぽいのつくった。

php javascript

本人バレが怖いのでgithubのありかとか配備場所とかは言えませんが、私、バンド活動をしておりまして、練習後の会話で「マルチトラックレコーダーのweb版とか無いのかな？」という話になりまして、探したけど、きっとあるのだろうけど見つけられないので2時間ぐらいで作りました。作ったのはマルチトラックプレイヤーです。トラックをアップローダーでアップして、アップしたファイルをaudioタグにセットして協調して再生、一時停止、シークとかが出来ればよいかなと。バンドの皆さんからは高評価を頂いております。

アップローダーはいぜんどこからか持ってきたものを流用しました。以下、マルチトラックプレイヤー部分のソース。

phpファイル

<?php
error_reporting(E_ALL);

function getFiles(){
    $mp3_files = glob("/var/www/hoge/mtr/uploader/uploads/*.mp3");
    $m4a_files = glob("/var/www/hoge/mtr/uploader/uploads/*.m4a");
    return array_merge($mp3_files,$m4a_files);
}

function renderSelect($files,$i){
    $html = "<select id=\"select-" . $i . "\" style=\"display:inline-block\">\n";
    foreach($files as $k => $v){
        $html .= "<option value='" . normalizePath($v) . "'>" . basename($v) . "</option>\n";
    }
    $html .= "</select>\n";
    return $html;
}

function renderSetButtons($i){
    $html = "<button id=\"set-" .  $i . "\" data-select=\"select-" . $i . "\" data-audio=\"audio-" . $i . "\">set</button>\n";
    $html .= "<button id=\"unset-" . $i . "\" data-select=\"select-". $i . "\" data-audio=\"audio-" . $i . "\">unset</button>\n";
    $html .= "<span id=\"setted-" . $i . "\"></span>";
    return $html;
}

function normalizePath($value){
   return "https://somewhereinwww/hoge/mtr/uploader/uploads/" . basename($value);
}

$files = getFiles();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Multi Track Player</title>
<script src="//code.jquery.com/jquery-1.8.3.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Multi Track Player</h1>

<?php for($i=0,$l=8;$i <$l;$i++){ ?>
<div>
<audio id="audio-<?php echo $i?>" src="" controls>
  <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
<?php echo renderSelect($files,$i)?>
<?php echo renderSetButtons($i) ?>                       
</div>                                  

<?php } ?>
<p><button id="play">play</button>&nbsp;&nbsp;<button id="pause">Pause</button></p>
<div id="slider" style="margin:20px;"></div>
</body>
</html>

JS

$(function(){

  $("#slider").slider({min : 0});

  var max_duration = 0;

  function play(){
    $("audio[id^='audio']").each(function(){
      try{
        if($(this)[0].src != "" ){
          $(this)[0].play().catch(function(){});
        }
      } catch (x) { }
    });
  }
  
  function pause(){
    $("audio[id^='audio']").each(function(){
      try{
        if($(this)[0].src != "" ){
          $(this)[0].pause().catch(function(){});
        }
      } catch (x) { }
    });
  }
  
  function setCurrentTime(time){
    $("audio[id^='audio']").each(function(){
      if($(this)[0].src != undefined ){
        $(this)[0].currentTime = time;
      }
    });
  }
  
  $("#play").click(function(){
    play();
  });

  $("#pause").click(function(){
    pause();
  });

  $("button[id^='set']").click(function(){
    var src= $("#" + $(this).data("select")).val();
    $("#" + $(this).data("audio"))[0].src = src;

    setTimeout(function(elem){
      var duration = $("#" + $(elem).data("audio"))[0].duration;
      if(max_duration < duration){
        max_duration = duration;
        $("#slider").slider( {max : duration, min : 0 });
      }
    },200,this);
  });

  $("button[id^='unset']").click(function(){
    $("#" + $(this).data("audio")).attr("src","");
  });

  var players = $("audio[id^='audio']");
  players.each(function(){
    var player = $(this)[0];
    player.addEventListener("timeupdate",function(){
      if(player.currentTime){
        var VALUE = Math.floor(player.currentTime);
        $("#slider").slider({value : VALUE});
      }
    });
  });

  $("#slider").on("mouseup touchend",function () {
    var currentTime = $("#slider").slider("value");
    setCurrentTime(currentTime);
    play();
  });

  $("#slider").on("mousedown touchstart",function () {
    pause();
  });
});

chromeが怒るので

.catch(function(){})

みたいなソース初めて使いました。
jQueryから抜け出せない。
stackoverflow.com

2017-02-26

Rails Tutorial 9章 10章

ruby

9章

なんかいつの間にか終わらせてた。
理解が進んでいないので一回読んだあともう一度読んだ。
自分一人で実装とかできる自信ない。

10.0の最初の演習

newとeditでformを共有したいって要件
下記のようにした。

view

optionで必要な値を与える

<% provide :title, "Sign up" %>
<% provide :button_text, "Create my account" %>
<% option = { url: signup_path } %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= render "form", option: option %>    
  </div>
</div>

共有するform

<%= form_for(@user,  option ||= {} ) do |f| %>
  <%= render 'shared/error_messages' %>

  <%= f.label :name %>
  <%= f.text_field :name, class: 'form-control' %>

10.0の最後の演習

Nokogiriぇーー

    assert_select "div#error_explanation > ul > li", count: 4

面白いねrails。rails5は本当に完成度高い。

2017-02-19

Rails Tutorial 8章

ruby

難しくなってきた。
写経っぽくなってきた。
一度コードリーディングする必要ありそうだけど眠すぎて
もう今日はむり。
あしたもう一度8章確かめてみる。
明日、9章もやりたいね。

2017-02-18

Rails Tutorial 8章

ruby

ruby2.4/rails5.0.1でやってる。当たり前でしょ.
Fixnum is deprecatedだよとか怒られながら。
途中ちょっとBcryptのとこで詰まったけどtypoだった。
ほかは引っかからずいけた。
gtagsもまだあんまり活用できてない。
anythingにgtags入れようかしら

2017-02-18

Rails Tutorial 7章

ruby

特に引っかかるところもなく。
titleをprovide使わずに省力していたところをチュートリアルどおりに変更した。
guard良いね。
gtags苦心したけどあんま使わないな。今のところ。
rinariでうまいことやってる。

2017-02-18

Emacsでgtagsと真剣に向き合い楽しくRails開発する2017

Emacs ruby

これまで

めちゃくちゃgrepしてた。もうやめたい。

やりたいこと。

タグジャンプがしたい
できればhelm/anythingで
タグファイルは自動更新してほしい

実行

gtagsのインストール

brew install global --with-exuberant-ctags --with-pygments

gtags.elはなんかパス通ってた

なければ
www.gnu.org
から落として展開してelみつけてパスの通ったディレクトリに置いて。githubとかで開発されてない。

anythin-gtagsのインストール

M-x auto-install-from-url [RET] https://www.emacswiki.org/emacs/download/anything-gtags.el

設定

(require 'gtags)
(require 'anything-gtags)
(add-hook 'ruby-mode-hook
          '(lambda()
             (gtags-mode 1)))

とりまruby-modeにフック

anythingの定義とかキーバインドとか

F3は定義ジャンプの定番(Eclipse教徒、信者ではない)

(defun anything-gtags-from-here ()
    (interactive)
    (anything
     :sources '(anything-c-source-imenu
                anything-c-source-gtags-select
                )
     :input (thing-at-point 'symbol)))
(global-set-key [f3] 'anything-gtags-from-here)

自動更新

;; update GTAGS
(defun update-gtags (&optional prefix)
  (interactive "P")
  (let ((rootdir (gtags-get-rootpath))
        (args (if prefix "-v" "-iv")))
    (when rootdir
      (let* ((default-directory rootdir)
             (buffer (get-buffer-create "*update GTAGS*")))
        (save-excursion
          (set-buffer buffer)
          (erase-buffer)
          (let ((result (shell-command "/usr/local/bin/gtags --gtagslabel=pygments")))
            (if (= 0 result)
                (message "GTAGS successfully updated.")
              (message "update GTAGS error with exit status %d" result))))))))

参考URLと違って生でshell-command叩いてる。特に深い意味はない。

プロジェクト初期作業

gtagsをプロジェクトルートで一回実行しておく

$ cd /path/to/project/
$ /usr/local/bin/gtags --gtagslabel=pygments

実際はaliasを設定しておけばよく、こんなコマンド覚える必要はない。

確認

メソッドがあるかどうかを確認するには global <メソッド名>

$ global new
app/controllers/users_controller.rb

結果

ファイルを保存したらgtagsが走り、データベースが再生成される。メソッド呼び出しでF3押せばanythingで検索、ジャンプできる。M-*でジャンプ先から戻れる。
すごーい！
たのしー！

参考

qiita.com
blog.shibayu36.org

*1:newメソッドはRailsプロジェクトなら多分あるよね。。。

2017-02-16

Rails Tutorial 6章

ruby

minitest-reportersと(結局)guardを入れました。
じゃぁということでterminal-notifier-guardも入れて通知領域にguardの結果が表示されます。

guardよいですね。Emacsのモードラインが赤くなったり緑になったり大変気持ち良い

仕事ではJava書いてますけどやっぱrubyは良いです。

Gemfile
group :development, :test do
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3','1.3.11'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug','9.0.0', platform: :mri
  gem 'rails-controller-testing'
  gem 'minitest-reporters',       '1.1.9'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
  gem 'terminal-notifier-guard', '~> 1.6.1'
end

Guardfile
# Guardのマッチング規則を定義
guard :minitest, spring: "bin/rails test", all_on_start: false do
  watch(%r{^test/(.*)/?(.*)_test\.rb$})
  watch('test/test_helper.rb') { 'test' }
  watch('config/routes.rb')    { integration_tests }
  watch(%r{^app/models/(.*?)\.rb$}) do |matches|
    "test/models/#{matches[1]}_test.rb"
  end
  watch(%r{^app/controllers/(.*?)_controller\.rb$}) do |matches|
    resource_tests(matches[1])
  end
  watch(%r{^app/views/([^/]*?)/.*\.html\.erb$}) do |matches|
    ["test/controllers/#{matches[1]}_controller_test.rb"] +
    integration_tests(matches[1])
  end
  watch(%r{^app/helpers/(.*?)_helper\.rb$}) do |matches|
    integration_tests(matches[1])
  end
  watch('app/views/layouts/application.html.erb') do
    'test/integration/site_layout_test.rb'
  end
  watch('app/helpers/sessions_helper.rb') do
    integration_tests << 'test/helpers/sessions_helper_test.rb'
  end
  watch('app/controllers/sessions_controller.rb') do
    ['test/controllers/sessions_controller_test.rb',
     'test/integration/users_login_test.rb']
  end
  watch('app/controllers/account_activations_controller.rb') do
    'test/integration/users_signup_test.rb'
  end
  watch(%r{app/views/users/*}) do
    resource_tests('users') +
    ['test/integration/microposts_interface_test.rb']
  end
end

途中で一度Springを全部殺すというのをやった。

kill `ps ax|grep spring|grep -v grep|cut -d" " -f 1`
kill `ps ax|grep spring|grep -v grep|cut -d" " -f 2`