[Work/Class/サウンドトラック制作基礎/setup]

FL Studioのダウンロードとインストール(Mac用)

FL Studioのダウンロード

http://www.image-line.com/downloads/flstudiodownload.htmlへ行く.

ダウンロード画面

Mac版をダウンロード.

FL Studioのインストール

ダウンロードされたインストーラのディスクイメージ

ダウンロードされたディスクイメージ.

ディスクイメージをダブルクリックしてマウントするとインストーラが出る.

ディスクイメージをダブルクリックしてマウントするとインストーラが出る.

インストーラをダブルクリックしてインストール開始

インストーラをダブルクリックしてインストール開始.

確認 確認 ユーザ認証

普通に管理者ユーザ認証.

インストール中 インストール完了

インストール完了

インストーラの削除確認

インストーラの削除確認.どちらでも.

インストールされている

アプリケーションを見るとインストールされている.

起動

起動.

以下は以前のベータ版のインストール方法.

FL Studio Mac用Beta版

Macにはまだ正式版がないので,Macで作業したい人はBeta版を用いる.(ユーザ登録などの細かいことについては,自分で行うこと.

http://www.image-line.com/downloads/flstudiodownload.htmlへ行く.

ダウンロードページからBeta版を選択

ダウンロードページからBeta版を選択.

フォーラムへ行く

フォーラムへ行く.(あらかじめユーザ登録は済ませておくこと)

フォーラムの中からトピックを選択

フォーラムの中から,Beta版のトピックを選択.

インストーラをダウンロード

インストーラをダウンロード.

ダウンロードしたインストーラのイメージをダブルクリックするとインストーラパッケージが出てくる

ダウンロードしたイメージ(.img)をダブルクリックしてマウントすると,インストーラパッケージ(.pkg)が出てくるので,これを実行.

インストーラが起動

インストーラが起動するので「続ける」.

インストーラでインストール

「インストール」

インストール中

インストール中

インストール完了

インストールが完了したら「閉じる」.

インストール完了

インストールが完了したら「閉じる」.

インストールされている

/Applicationsの中に「FL Studio Mac Beta」が入っているので,起動.

起動成功

起動成功.


[Work/Class/Google Maps APIの基礎/basic]

GoogleMaps APIの基礎 - マーカの情報をCSVから持ってくる

マーカーを大量に描画しようとする時,全てJavaScriptで書き下すのは非常に面倒くさい.そこでExcelやGoogleスプレッドシートで2次元テーブルの形でデータを作っておき,それをCSV形式でサーバにおいておき,それを読み込んできてマーカの情報として表示する.

CSVデータの読み込みには非同期処理(AJAX)を使う.XMLHttpRequestを使ったAjaxとfetchを参考にすること.

自販機とそこで売っている飲み物をまとめたCSVファイル vendor_data.csv は以下の通り

飲み物名称\自販機ID,m001,m002,m003,m004,m005,m006,m007,m008,m009,m010
すべて,1,1,1,1,1,1,1,1,1,1
FIRE,0,0,1,0,0,1,1,0,0,0
BOSS,0,0,0,0,1,0,0,0,1,0
GEORGIA,0,0,0,1,0,1,0,0,0,0
DyDo,0,0,1,0,0,0,1,1,0,0
WONDA,1,0,0,0,0,1,0,0,0,1
TULLY'S,0,1,0,0,0,0,0,0,0,0
ココア,0,0,0,0,0,0,0,1,0,0
生茶,0,0,1,0,0,0,1,0,0,0
麦茶,0,1,1,0,1,0,1,1,1,0
レモンティー,0,0,1,1,0,0,0,1,0,0
ミルクティー,1,0,1,0,1,0,1,1,1,0
爽健美茶,0,0,0,0,0,1,0,0,0,0
綾鷹,0,0,0,1,0,1,0,0,0,0
伊右衛門,0,0,0,0,1,0,0,0,1,0
自販機lat,35.61298,35.612963,35.613368,35.613168,35.613184,35.612488,35.610865,35.617523,35.617498,35.617628
自販機long,139.381036,139.381059,139.381978,139.381584,139.381563,139.382121,139.383056,139.385693,139.385877,139.386235

表示ボタンを配置してマーカ描画関数を呼び出すhtmlファイル vendor_map.html と,JavaScriptファイル fetc_csv.js

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>自販機をGoogle Mapsにマッピングする</title>
    <!-- Google Maps APIをWeb上から読んでくる -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <!-- 自分で作ったJSファイル -->
    <script type="text/javascript" src="./fetch_csv.js"></script>

        <!-- とりあえずCSSを直接書いてしまう -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            /*
             div id=mapになってるdiv
             ここに地図
             高さ500ピクセル,幅は上位のdiv(ここではbody)の50%
            */
            height: 500px;
            width: 50%;
        }
    </style>

  </head>
  <body>
    <div id="select_button">
      <input type="button" value="全ての自販機" onclick="drawMarkers(0)" />
      <input type="button" value="キリンFIRE" onclick="drawMarkers(1)" />
      <input type="button" value="サントリーBOSS" onclick="drawMarkers(2)" />
      <input type="button" value="GEORGIA" onclick="drawMarkers(3)" />
      <input type="button" value="DyDo" onclick="drawMarkers(4)" />
      <input type="button" value="WONDA" onclick="drawMarkers(5)" />
      <input type="button" value="TULLY's" onclick="drawMarkers(6)" />
      <input type="button" value="ココア" onclick="drawMarkers(7)" />
      <input type="button" value="生茶" onclick="drawMarkers(8)" />
      <input type="button" value="麦茶" onclick="drawMarkers(9)" />
      <input type="button" value="レモンティー" onclick="drawMarkers(10)" />
      <input type="button" value="ミルクティー" onclick="drawMarkers(11)" />
      <input type="button" value="爽健美茶" onclick="drawMarkers(12)" />
      <input type="button" value="綾鷹" onclick="drawMarkers(13)" />
      <input type="button" value="伊右衛門" onclick="drawMarkers(14)" />

    </div>

    <div id="map"></div>
  </body>
 </html>
'use strict';
window.addEventListener('load', () => {
  // 地図の表示
  // ここから地図を表示する
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
// 南大沢駅の緯度経度を中心にして表示する
      center: {lat:35.614349, lng:139.379774},
      // ズームレベル
      zoom: 16
  };

  // 地図を保持するためのconstオブジェクトmyMapを宣言し,
  // GoogleMapsのコンストラクタの引数に,先に定義した地図表示に必要なパラメータを食わせる
  window.myMap =
      new google.maps.Map(document.getElementById('map'), mapElement);
  // コンストラクタが実行されると表示される


  // CSVデータを非同期で持ってくる
  fetch('./vendor_data.csv', {
    method: 'GET',
    mode: 'cors', //クロスオリジンポリシーを無視する
    credentials: 'same-origin' // 認証がある時はこのオプションを指定しておく
  }).then((response) => {
    // 成功したら,取得したファイルをテキストとして,次のthenに回す
    return response.text();
  }).then((text) => {
    // テキストデータとしてきた内容から,必要なデータを組み立てる
    // 読み込んだデータを1行ずつ格納する配列をグローバルで宣言する
  	window.drinkName = new Array();
  	window.drinkData = new Array();
  	window.latArray = new Array();
  	window.longArray = new Array();

  	// 読み込んだCSVデータの名前を変える
  	let csvData = text;

  	// CSVの全行を取得
    // 「改行」でスプリットすると,1行を単位とした配列に分かれる
  	let lines = csvData.split("\n");

  	for (let i = 0; i < lines.length; i++) {
  	    // 1行ごとの処理

  	    if (i >= 1 && i <= 15) { // 0行目を飛ばして,1行目から20行目まで
          // 1行をカンマでスプリットすると,CSVの1要素になる
  		    let aDrinkSet = lines[i].split(",");
  		    window.drinkName.push(aDrinkSet[0]);
  		    window.drinkData.push(aDrinkSet.slice(1));
  	    }
  	    else if (i == 16) { // 18行目はlat(緯度)
  		    window.latArray = lines[i].split(",").slice(1);
  	    }
  	    else if (i == 17) { // 19行目はlng(軽度)
  		    window.longArray = lines[i].split(",").slice(1);
  	    }
  	}


    // マーカを格納する配列を初期化する
    window.currentMarkerSet = new Array();

    // 飲み物のマーカーを表示する
    // 最初は0番目「全て」の自販機の意味
    drawMarkers(0);

  }).catch((error) => {
    // 何かエラーが起きたら,そのエラーコードを表示する
    alert("<p>" + "Faild to get CSV. Error code is: " + error + "</p>");
  });
});

function drawMarkers(drinkNumber){

    // まず最初に既表示のマーカーを消す
    for(let i=0; i< window.currentMarkerSet.length; i++){
	     window.currentMarkerSet[i].setMap(null);
    }
    window.currentMarkerSet = new Array();

    // マーカーを作る
    let aDrinkSet = window.drinkData[drinkNumber];
    for(let i=0; i<aDrinkSet.length; i++){
	     if(Number(aDrinkSet[i]) == 1){
	     let aVenderMarker = new google.maps.Marker({
		       position: {lat: Number(window.latArray[i]), lng: Number(window.longArray[i])},
		         map: window.myMap
	     });
	     window.currentMarkerSet.push(aVenderMarker);
	    }
    }
}

[Work/Class/Google Maps APIの基礎]

Google Maps API 授業資料


[Work/Class/ES2015で動的Webアプリ/es2015_basic]

HTML5とPHPを用いた画像のアップローダ

HTML5のメディアアップロード機能

HTML5はメディアのアップロード機能を持っており,formの中で

<input type="file" />

とすることで,簡単にPC内やスマホに格納されている画像やムービーをアップロードできる.

サーバ側のプログラムは,PHPが一番簡単で,常駐プロセスを起動する必要がないため,多くのレンタルサーバに設置することができるので,これを用いる.

サンプル

HTML側

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像ファイルアップロードのサンプル</title>
</head>
<body>
<!-- サーバ側のプログラムのパスを書いておく.今回はHTMLファイルと同じ階層にあるPHP -->
<form action="file_uploader.php" method="post" enctype="multipart/form-data">
  <p>
    <input name="userfile[]" type="file" accept="image/*" id="upfile" onChange="printFile()"/>
    <!-- accept="image/*" というのは,画像ファイルのみを受け付けるという意味 -->
    <!-- onChange はサブミットされた時に実行する関数を書いておく.このサンプルでは下のprintFile関数 -->
  </p>
  <p>
    <input type="submit" name="send" value="アップロード" />
  </p>
</form>
 
<div id="result">
    <p>
      アップロードで選択されたファイル
    </p>
</div>
<script>
  // 単純にアップロードするファイル名を表示するだけ
  function printFile(){
      let fileList = document.getElementById("upfile").files;
      let list = "";
      for(let i=0; i<fileList.length; i++){
	  list += fileList[i].name + "<br />";
      }
      document.getElementById("result").innerHTML = list;
  }
</script>
</body>
</html>

PHP(サーバ)側

<?php
// 複数アップロード可能なので,for文で回す
for ($i=0; $i<count($_FILES['userfile']['name']); $i++) {
    // ファイル名を取得
    $file_ext = pathinfo($_FILES["userfile"]["name"][$i], PATHINFO_EXTENSION);

    if (is_uploaded_file($_FILES["userfile"]["tmp_name"][$i])) {
       // ファイル名が重複しないようにアップロードした日時をファイル名につけて,
       // HTML5とApache標準の仮のアップロード場所から,
       // 実際の保存場所にファイルを移動させる
       // このプログラムでは,htmlとphpが置いてあるフォルダの中のimgフォルダに保存する

       // 日時の取得       
       $uploaded_date = date("YmdHis");
       // もしちゃんとアップロードされていたら,
       // 移動して,中括弧の中を実行する
       if(move_uploaded_file($_FILES["userfile"]["tmp_name"][$i], "img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i])){
          // アップロードされたことを表示する
          echo "<p>" . $uploaded_date . $_FILES["userfile"]["name"][$i] . "をアップロードしました.<p>";

	  // アップロードしたファイルのパーミッションをいじれるようにする
	  // Webサーバプログラムがオーナーになっているので,
	  // ユーザが消せるように777
	  chmod("img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i],0777);

	  // img以下の画像ファイルを検索して表示
	  echo '<p>現在までアップロードされたファイル一覧</p>';
	  foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file){
	     if(is_file($file)){
		echo htmlspecialchars($file) . '<br />';
	     }
	  }


	  // アップローダのhtmlに戻る表示
    	  echo "<p><a href='./file_uploader.html'>アップローダへ戻る</a></p>";				      
      } else {
      	  echo "<p>ファイルをアップロードできませんでした.</p>";
      }
    } else {
      echo "<p>ファイルが選択されていません.</p>";
    }
}
?>

参考サイト Qiita @kiryuumomoka 自分用: html5とphpを用いた複数ファイルのアップロード


[Work/Class/ES2015で動的Webアプリ]

ES2015で動的Webアプリ

この授業の目的

Processingで行ったWebSocket通信を使って,ウェブブラウザ上で動くJavaScriptの2015年版(ECMAScript2015, 通称ES2015, ES6)とProcessingのJavaScript用ライブラリP5.jsを用いて,動的なWebアプリケーションを作るための基礎を学ぶ.

コンテンツ

  1. ES2015の基本 - 変数とそのスコープ,関数定義,Promiseによるコールバック
  2. ES2015の基本 - クラスの定義とインスタンス化
  3. ES2015の基本 - PromiseとXMLHttpRequestを使ったAjaxとfetch
  4. ES2015準拠でP5.jsのインスタンスモード
  5. P5.jsで日本語文字列を表示する
  6. ES2015でWebSocketの基本 - テキストメッセージの受け渡し
  7. ES2015でWebSocket - Tornadoでマルチクライアント
  8. ES2015でWebSocket - TornadoでSecureWebSocket
  9. ES2015でWebSocket - ビデオチャットのように端末側カメラの画像をWebSocketで送る
  10. HTML5とPHPを用いた画像のアップローダ

授業の下準備

実行環境としてはGoogle Chromeを使うので,最新版を入れておくこと.また描画部分にはP5.js(ProcessingのJavaScript版)を使うので,Processingの描画の復習をしておくこと.

WebSocketサーバ側は,実験用Webサーバ上で実行を行うため,MSYS2やTerminal.appを使ってUnixの基本操作に慣れておくこと.

WebSocketサーバ用のライブラリとしてはPythonのTornadoを使う.TornadoはAnacondaにパッケージがあるが,http用のローカルサーバを立てるのが面倒くさいので,基本的にはこちらで用意したサーバでサーバ側プログラムを動かす.