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

HTML5とPHPを用いた画像のアップローダ / 2018-06-29 (金)

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アプリ / 2018-06-29 (金)

この授業の目的

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用のローカルサーバを立てるのが面倒くさいので,基本的にはこちらで用意したサーバでサーバ側プログラムを動かす.


[Work]

Publications

Degree Thesis

安藤大地 (Daichi Ando): 対話型進化論的計算による作曲支援に関する研究(A Study about Application of Interactive Evolutionary Computation in Composition-Aid System) 博士論文 東京大学大学院新領域創成科学研究科.Mar. 2009.

Daichi Ando: "Computer Aided Composition using Interactive Evolution" Master's thesis in Art & Technology, IT University of Gothenburg. Report No. 2004-62, ISSN:1651-4769. Sept, 2004.

Journal Papers (peer-reviewed)

安藤大地, Palle Dahlstedt, Mats Nordahl,伊庭斉志: "対話型GPを用いたクラシック音楽のための作曲支援システム" 芸術科学会論文誌 第4巻 第2号 pp77-86,2005年6月.
URL: http://www.art-science.org/journal/v4n2/index.html

安藤大地: "クラブ系ループ音楽パフォーマンスのためのリアルタイムに音楽をBreedingするシステム" 情報処理学会論文誌 第53巻 第3号 pp1030-1040, 2012年3月.

安藤大地,伊庭斉志: "音楽創作支援IECのための買い物フロー型インタフェース" 進化計算学会論文誌.第3巻 第3号 pp73-84, 2012年12月.

Book Chapters (peer-reviewed)

Daichi Ando, Palle Dahlstedt,Mats G. Nordahl and Hitoshi Iba: "Interactive GP with Tree Representation of Classical Music Pieces" Giacobini et al. Eds: Application of Evolutionary Computing, Springer LNCS Series 4448, pp:577-584. Apr. 2007.

Musical / Media Art works performed Internationaly (peer-reviewed and invited)

Daichi Ando: "Wandering Finger for Tape", Music Japan Today 2007, University in Maryland, UMBC.

Daichi Ando: "Rusty Bucket for alto-saxophone and computer", ICMC International Computer Music Conference 2007, Copenhagen, Denmark.

Daichi Ando: "Animated Flourish for soprano-saxophone and computer", ICMC International Computer Music Conference 2011, Huddersfield, U.K.

Daichi Ando: "Towards to Black Plume: an improvisation work for a live interactive breeding system and a saxophonist", ACMP Asia Computer Music Project 2011, Tokyo, Japan.

Daichi Ando: "Opaline for tenor-saxophone and computer", ACMP Asia Computer Music Project 2012, Hsinchu, Taiwan.

Daichi Ando: "Softstep for baritone saxophone, electric guitar and computer", ICMC International Computer Music Conference 2015, Denton, Texas, U.S.A.

International Conference Paper (peer-reviewed)

Shu MATSUDA, Takayuki RAI, Chikashi Miyama, Daichi ANDO: "DIPS for Linux and Mac OS X" Proceeddings of the International Computer Music Conference 2002, Gothenburg, Sweden. Sep. 2002

Takayuki Rai, Shu Matsuda, Chikashi Miyama, Daichi Ando: "DIPS for Mac OS X and Linux" Resonaces International Convention on Technologies for Music 2002, Paris, IRCAM, Oct. 2002.

Takayuki Rai, Daichi Ando, Shu Matsuda, Chikashi Miyama: "DIPS for Linux" Resonances International Convention on Technologies for Music 2003, Paris, IRCAM, Oct. 2003.

Daichi Ando, Hitoshi Iba: "Real-time Musical Interaction between Musician and Multi-agent System" Proceedings of the 8th International Conference on Generative Art 2005, Milan, Italy. pp:93-100. Dec. 2005.

Daichi Ando, Palle Dahlstedt,Mats G. Nordahl and Hitoshi Iba: "Computer Aided Composition by means of Interactive GP" Proceedings of the International Computer Music Conference 2006, New Orleans, USA. pp:254-257. Oct. 2006.

Daichi Ando: "Improving User-Interface of Interactive EC for Composition-Aid by means of Shopping Basket Procedure",New Interface for Musical Expresssion (NIME) 2011 Jul. 2011, Oslo, Norway

Daichi Ando: "CACIE SB : GENETIC PROGRAMMING BASED COMPOSITION-AID SYSTEM BY SHOPPING BASKET INTERFACE", International Computer Music Conference (ICMC) 2011 Aug. 2011, Huddersfield, U.K.

Daichi Ando: "Real-time breeding composition system by means of genetic programming and breeding procedure", Interanational Computer Music Conference (ICMC) - Sound And Music Computing (SMC) 2014 Joint Conference, Sep. 2014, Athene, Greece.

Daichi Ando: "Efficiency of adopting Interactive Machine Learning into Electro-Acoustic Composition", Electro-Acoustic Music Stdies 2017, Nagooya, Japan.

講演など

安藤大地: 人間と人工知能が協調したモノづくり - 「家族の好みを反映したレシピを提案するシステム」を例に, 第15回ユニテックフーズ技術セミナー.2018年5月.

国内学会・研究会等 (査読有)

安藤大地,Palle Dahlstedt,Mats Nordahl,伊庭斉志:"対話型進化論的計算によるクラシック音楽作曲支援システム: CACIE" 情報処理学会,インタラクション2005 論文集,情報処理学会シンポジウムシリーズ,Vol.2005, No.4, pp:185-186, Feb. and Mar. 2005 (インタラクティブ発表)

安藤大地,丹治信,伊庭斉志:"IECを用いた作曲支援システムCACIEのユーザインタフェース改良" 情報処理学会,インタラクション2007 論文集,情報処理学会シンポジウムシリーズ,Mar. 2007 (ポスター発表)

安藤大地,稲田雅彦,丹治信,伊庭斉志:"IECを用いた作曲支援のためのユーザインタフェース" 情報処理学会,インタラクション2009 論文集,情報処理学会シンポジウムシリーズ,Mar. 2005 (インタラクティブ発表)

安藤大地,馬場哲晃:"マルチタッチディスプレイを利用した電子擦弦楽器とエフェクトコントローラ" 情報処理学会,インタラクション2010 論文集,情報処理学会シンポジウムシリーズ,Mar. 2010 (インタラクティブ・スタンダード発表)

安藤 大地,笠原 信一: "フォトアルバムから音楽を生成するプログラムの対話型GPを用いた最適化" 情報処理学会,インタラクション2011 論文集 情報処理学会シンポジウムシリーズ,1CR3-12,Mar. 2011 (インタラクティブ発表)

梶家彩実,安藤 大地,笠原 信一: "HEaSシステムによる新しいライフスタイルの提案" 情報処理学会,インタラクション2011 論文集 情報処理学会シンポジウムシリーズ, 1CR3-17,Mar. 2011 (インタラクティブ発表)

谷澤奈津妃,笠原 信一,安藤 大地: "ゲーム感覚で楽しめるCube型3Dフォトアルバムの構築" 情報処理学会,インタラクション2011 論文集 情報処理学会シンポジウムシリーズ, 1DEX-1,Mar. 2011 (インタラクティブ発表)

高 碩,清水 要,笠原 信一,安藤 大地: "裸眼立体視による注視点の動きを利用した視力回復訓練ソフトウェアの開発" 情報処理学会,インタラクション2011 論文集 情報処理学会シンポジウムシリーズ, 1DEX-3,Mar. 2011 (インタラクティブ発表)

丁 慶松,笠原 信一,安藤 大地: "ARによる「紙のピアノ」の提案" 情報処理学会,インタラクション2011 論文集 情報処理学会シンポジウムシリーズ, 3CR3-2,Mar. 2011 (インタラクティブ発表)

安藤大地: "地図上に投稿された現地写真からBGMをみんなで生成するシステム" 情報処理学会,インタラクション2012 論文集 情報処理学会シンポジウムシリーズ,1EXB-17,Mar. 2012 (インタラクティブ発表)

為廣 愛美,安藤 大地,笠原 信一: "ユーザーフレンドリーな対話型ヘルプキャラクターの制作と提案" 情報処理学会,インタラクション2012 論文集 情報処理学会シンポジウムシリーズ,1EXB-35,Mar. 2012 (インタラクティブ発表)

浜田 真成,安藤 大地,笠原 信一: " Idea In: プロジェクト管理を効率化するWebアプリケーション 提案と制作" 情報処理学会,インタラクション2013 論文集 情報処理学会シンポジウムシリーズ,1EXB-08,Mar. 2013 (インタラクティブ発表)

木下 夏織,安藤 大地,笠原 信一: "モールス信号を用いた新しいユーザインタフェースの提案と制作" 情報処理学会,インタラクション2013 論文集 情報処理学会シンポジウムシリーズ,1EXB-44,Mar. 2013 (インタラクティブ発表)

安藤 大地: "GPを用いたアドリブジャズギターの演奏と主観的演奏表情状態の紐付けに関する検討 ~人間の演奏表情を読み取り反応するジャムセッションシステムの構築に向けて~" 情報処理学会,インタラクション2013 論文集 情報処理学会シンポジウムシリーズ,2EXB-37,Mar. 2013 (インタラクティブ発表)

多々良 友理,笠原 信一,安藤 大地: "モザイク画像の認知に関する考察とそれに基づいたグラフィックデザイン支援プログラムの開発",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

安藤 大地: "GPS軌跡と写真から旅行記のBGMを作成して再生するWebシステム",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

黒田 宙馬,笠原 信一,安藤 大地: "3Dインターフェースによるプレゼンテーションツールの可能性提案",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

浜田 真成,安藤 大地,笠原 信一: "idea in: プロジェクト管理を効率化するWebアプリケーション その2 - タスクチャート手法の提案",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

染矢 さらら,安藤 大地,笠原 信一: "メロディモーフィング手法を用いた初学者向けの作曲支援システムの研究",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

小林 央,安藤 大地,笠原 信一: "VOCALOIDでの話し言葉作成に特化したツールの制作と提案",情報処理学会インタラクション2014シンポジウム,Mar. 2014.

安藤大地: "ジャズ即興演奏における4ビートベースラインの2段階対話型遺伝的プログラミングによる生成” 情報処理学会インタラクション2015, Mar. 2015.

有山 大地,安藤 大地,笠原 信一: "位置・時間を主軸においたWebコンテンツのストーリー形式まとめシステム" 情報処理学会インタラクション2015, Mar. 2015.

浜田 真成,安藤 大地,笠原 信一: "idea in: プロジェクト管理を効率化するWebアプリケーション その3 - タスクチャート手法によるプロジェクトの目的別可視化" 情報処理学会インタラクション2015, Mar. 2015.

三善 優紀,安藤 大地,笠原 信一: "コンピュータビジョン周辺監視による二輪車向け安全性向上システムの開発のための基礎検討" 情報処理学会インタラクション2015, Mar. 2015.

松岡 宗人,安藤 大地,笠原 信一: "マルチウィンドウにより情報の収集・比較を可能とするWeb検索ツールの提案" 情報処理学会インタラクション2015, Mar. 2015.

有山 大地,安藤 大地,笠原 信一: 進化論的計算を用いたエレキギターの音色再現手法の提案, 情報処理学会インタラクションシンポジウム2016,1B24, 2016年3月.

三善 優紀,安藤 大地,笠原 信一: 周辺情報の把握による二輪車向け運転支援システムの開発,情報処理学会インタラクションシンポジウム2016,1C51, 2016年3月.

川島 絵里奈,安藤 大地,笠原 信一: 進化的アルゴリズムを用いた家族向け献立提案システムの試作, 情報処理学会インタラクションシンポジウム2016, 1C53,2016年3月.

安藤 大地: マルチスピーカシステムのためのパンニングモジュレーションの基礎検討, 情報処理学会インタラクションシンポジウム2016, 1C74,2016年3月.

本田 将大,安藤 大地,笠原 信一: 国際化する医療現場における医師と外国人患者とのコミュニケーション支援に関する研究,情報処理学会インタラクションシンポジウム2016, 2B27,2016年3月.

高野衛,安藤大地,笠原信一: 運動学習支援を目的とした動作情報における可聴化手法の提案, 情報処理学会インタラクションシンポジウム2017, 1-408-7, 2017年3月.

安藤大地: 対話型遺伝的プログラミングを用いた無調性音高配列からの和声進行の生成, 情報処理学会インタラクションシンポジウム2017, 2-403-47, 2017年3月.

三善優紀,安藤大地,笠原信一: 周辺情報の把握による二輪車向け運転支援システムの開発, 情報処理学会インタラクションシンポジウム2017, 2-410-68, 2017年3月.

宇野花梨,安藤大地,笠原信一: 3DCG技術を活用した2Dアニメーション制作システムの提案, 情報処理学会インタラクションシンポジウム2017, 2-510-09, 2017年3月.

磯野優夏,安藤大地,笠原信一: シネマグラフを簡易的に作成する新手法の提案, 情報処理学会インタラクションシンポジウム2017, 3-408-78, 2017年3月.

矢追那実,安藤大地,笠原信一: 「三次元スケッチブック」の可能性, 情報処理学会インタラクションシンポジウム2017, 3-409-71, 2017年3月.

高野衛,安藤大地,串山久美子: 運動学習支援を目的とした多変数マッピングを用いた動作情報の可聴化手法, 情報処理学会インタラクションシンポジウム2018, 1B26, 2018年3月.

安藤大地: CPPN表現とNeuro-Evoluationを用いたエレクトロニカのためのノイズ音素材, 情報処理学会インタラクションシンポジウム2018, 1B58, 2018年3月.

宇野花梨,安藤大地,笠原信一: 3DCG技術を用いた2Dアニメーションの制作の効率, 情報処理学会インタラクションシンポジウム2018, 2B44, 2018年3月.

国内学会・研究会等 (査読無)

橋田光代,美山千香士,安藤大地: "DIPSエクスターナルオブジェクトの開発と作品創作への応用" 情報処理学会音楽情報科学研究会,IPSJ, 2000-MUS-36, Vol.2000, Aug. 2000

橋田光代,松田周,美山千香士,安藤大地: "DIPSプログラミングチュートリアル" 情報処理学会音楽情報科学研究会,IPSJ, 2000-MUS-38 Vol.2000, Dec. 2000

松田周,美山千香士,安藤大地: "DIPS for Linux and Mac OS X" 情報処理学会音楽情報科学研究会,IPSJ, 2002-MUS-48 Vol.2002, Dec. 2002

松田周,安藤大地,美山千香士,酒井由: "マルチメディアビジュアルプログラミング環境DIPS2" 情報処理学会音楽情報科学研究会,IPSJ, 2003-MUS-51 Vol.2003, Aug. 2003

安藤大地,Palle Dahlstedt,Mats Nordahl,伊庭斉志: "対話型進化論的計算による作曲支援システム: CACIE" 情報処理学会音楽情報科学研究会,IPSJ, 2005-MUS-59, Vol.2005, No.14, ISSN:0919-6072, pp:55-60, Feb. 2005

安藤大地,伊庭斉志: "人間の演奏者と音楽インタラクションを行うマルチエージェントシステムの構築" 情報処理学会音楽情報科学研究会,IPSJ, 2005-MUS-63, Vol.2005, No.129, ISSN:0919-6072, pp:43-48, Dec. 2005

安藤大地,丹治信,伊庭斉志: "ECを用いた作曲支援システムと作曲モデルの客観的評価手法" 情報処理学会音楽情報科学研究会,IPSJ, 2006-MUS-68, Vol.2006, No.133, ISSN:0919-6072, pp:29-34, Dec. 2006

丹治信,安藤大地,伊庭斉志: "GPを用いた旋律のグルーピングルール生成" 情報処理学会音楽情報科学研究会,IPSJ, 2006-MUS-68, Vol.2006, No.133, ISSN:0919-6072, pp:67-72, Dec. 2006

安藤大地、伊庭斉志: "木構造型遺伝子を用いたクラシック音楽作曲支援システム:CACIE" 人工知能学会2007年全国大会, 3C7-2, Jun. 2007

安藤大地,稲田雅彦,丹治信,伊庭斉志: "能動的音楽聴取インタフェースの作曲支援IECへの取り込み" 情報処理学会音楽情報科学研究会,IPSJ, 2007-MUS-73, Vol.2007, No.127, ISSN:0919-6072, pp:1-6, Dec. 2007

丹治信,安藤大地,伊庭斉志: "確立文脈自由文法による旋律の拍節モデル推定" 情報処理学会音楽情報科学研究会,IPSJ, 2007-MUS-73, Vol.2007, No.127, ISSN:0919-6072, pp:57-62, Dec. 2007

安藤大地,伊庭斉志: "音楽CGMのユーザをターゲットとした音楽創作支援システムの開発に向けて" 第1回同人音楽研究会予稿,Feb. 2008

稲田雅彦,安藤大地,丹治信: "Sign Do Sound:対話型作曲支援システムの能動的音楽聴取インタフェース--インスタレーションに対するIECインタフェースの取り組み" 映像情報メディア学会技術報告 Vol.32, No.15, pp:25--28, Mar. 2008.

安藤大地,丹治信,稲田雅彦,伊庭斉志: "初心者向け音楽創作IECのためのユーザアシスト機能についての検討" 情報処理学会音楽情報科学研究会, IPSJ, 2008-MUS-75, pp:123-128, May. 2008.

丹治信,安藤大地,伊庭斉志: "PCFGの文法拡大による音列パターン解析" 情報処理学会音楽情報科学研究会, IPSJ, 2008-MUS-76, No.13, pp:69-74, Aug. 2008.

中野倫靖,福島直,小川圭祐,早渕 功紀,梶原祥平,浜中雅俊,一瀬護,数森康弘,橋本祐輔,石先広海,神田竜,冨林豊,平井重行,渡辺晃生,安藤大地,竹川佳成: "デモンストレーション:音楽情報処理の研究紹介 VI", 情報処理学会音楽情報科学研究会, IPSJ, 2008-MUS-76, No.18, Aug. 2008.

稲田雅彦,安藤大地,丹治信,伊庭斉志: "対話型作曲支援システムにおけるユーザ嗜好の獲得" 情報処理学会エンタテイメントコンピューティング研究会,IPSJ, 2008-EC-11, No.12, Dec. 2009.

渡辺晃生,安藤大地,稲田雅彦,丹治信,伊庭斉志: "IECを用いた歌声パラメータの最適化システム" 情報処理学会音楽情報科学研究会, IPSJ, 2009-MUS-79, No.2, pp:5-10, Feb. 2009.

安藤大地: "動画投稿サイトにおける音源トラックの共有を目的とした投げ銭システムの検討と提案" 情報処理学会音楽情報科学研究会, IPSJ, 2009-MUS-80, No.10, May. 2009.

安藤大地,梶克彦,北市健太郎,草間かおり,佐藤和哉,竹川佳成,浜中雅俊,深山覚,松原正樹: "デモンストレーション:音楽情報処理の研究紹介 VII", 情報処理学会音楽情報科学研究会, IPSJ, 2009-MUS-81, No.22, Jul. 2009.

安藤大地,伊庭斉志: "時系列メディアを生成対象としたアート創作支援IECのインタフェース", 進化計算シンポジウム2009, 1-08. Dec. 2009.

中野倫靖,大沼翔,金泰憲,黒沢佳史,斉藤優理,斎藤佳紀,奥村健太,田中駿二,浜中雅俊,帆足啓一郎,森山剛,吉田周平,吉谷幹人,安藤大地: "デモンストレーション:音楽情報処理の研究紹介 IX", 情報処理学会音楽情報科学研究会, IPSJ, 2011-MUS-91, Vol.2010-MUS-86 No.21, July. 2010.

馬場哲晃,有田光希,安藤大地,伊藤悠真,金井隆晴,小池宏幸,村主大輔,辰巳直也,平井重行,平井辰典,深山覚,水本直希,山本龍一: "デモンストレーション:音楽情報処理の研究紹介 X", 情報処理学会音楽情報科学研究会, IPSJ, 2011-MUS-91, Vol.2011-MUS-91 No.16, July. 2011.

安藤大地: "首都大学東京インダストリアルアートコース スタジオ・レポート" 情報処理学会音楽情報科学研究会, IPSJ, 2011-MUS-93, No.3, Dec. 2011.

安藤大地,阿部ちひろ,遠藤秀行,伊藤仁,伊東直哉,三木翔太,森勢将雅,中村友彦,岡田美咲,佐々木将人,澤田真吾,橘秀幸,飛世速光,宇野愛,魚田知美,山田祐雅,山本龍一: "デモンストレーション:音楽情報処理の研究紹介 XI", 情報処理学会音楽情報科学研究会, IPSJ, 2012-MUS-96, No.18, Aug. 2012.

吉村 ももこ, 笠原 信一, 安藤 大地: "レイトレーシングにおける半影表現の新しいアプローチ -ライトオブスタクルデプス-",第154回情報処理学会グラフィクスとCAD研究会, Feb. 2014.

染矢さらら, 安藤大地, 笠原信一: "GTTMタイムスパン木を用いた旋律モーフィング手法の検討",第102回情報処理学会音楽情報科学研究会, Feb.2014.

高野衛,安藤大地,笠原信一: アコースティック・ギターを素材とした音響作品 “orb” for electronics の制作, 先端芸術音楽創作学会会報vol.7, no.2, pp7--9, 2016年3月.

有山大地,安藤大地,笠原信一: 進化論的計算を用いたエレキギターの音色再現手法の提案, 先端芸術音楽創作学会会報vol.7, no.2, pp10--14, 2016年3月.

安藤大地: 対話型機械学習の実践的な作曲への応用, 先端芸術音楽創作学会会報vol.9, no.2, pp1--4, 2017年9月.

メディア露出など

"NHK サイエンスZERO 進化研究最前線〜ダーウィン進化論150年〜" 2008年2月7日放送.
http://www.nhk.or.jp/zero/contents/dsp236.html


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

GoogleMaps APIの基礎 - 曲線ルートの表示

ルートラボの道ピタモード

緯度経度を指定して線を引く方法を前回やったが,道路の経路を描くためには,いちいち緯度経路を調べるのは面倒くさい.そこで他のツールを使って生成したいど経度のデータをGoogleMaps APIを使って表示する.

GoogleMapsも経路探索などでルートを生成できるが,任意のルート,特に折り返しなどを含む場合,「ルートラボ」の「道ピタモード」で書くのが便利.

ルートラボの画面

一番左のアイコン「道ピタモード」になっていることを確認し,地図上をクリックしてルートを作成する.作成したら左下の「エクスポート」.

ルートラボでKMLエクスポート

「KMLでエクスポート」

すると,route.kmlという名前でダウンロードされる.

KMLの中身をエディタで開くと以下のようになっている.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<Style>
<LineStyle>
<color>99ff0000</color>
<width>6</width>
</LineStyle>
</Style>
<LineString>
<coordinates>
139.36811305555557,35.662075,113
139.36820111111112,35.661613055555556,113
139.36821305555554,35.661455,112
139.36821305555554,35.661355,112
139.36820111111112,35.66087111111111,112
139.36816305555556,35.66007111111111,112
139.3681511111111,35.659638055555554,112
139.36811305555557,35.659155,112
139.3680688888889,35.65915805555556,112
139.3680688888889,35.65915805555556,112
139.36811305555557,35.659155,112
139.36897611111112,35.65908805555556,111
139.37012611111112,35.659013055555555,110
139.37021305555555,35.659013055555555,110
139.37116305555554,35.658955,110
139.37180111111113,35.65889694444444,109
139.37218,35.65886805555556,109
139.3721788888889,35.65886805555556,109
139.37223805555556,35.65886305555556,109
139.37228805555554,35.65938,109
139.3723011111111,35.65949694444444,109
139.3723261111111,35.659638055555554,109
139.37237611111112,35.659838055555554,109
139.3724511111111,35.65999611111111,109
139.37260111111112,35.66026305555555,109
139.37276305555557,35.660455,109
139.3729011111111,35.66058805555556,108
139.37301305555556,35.66069611111111,108
139.37333805555556,35.66088805555555,108
139.37413805555556,35.66131305555555,107
139.3741311111111,35.66135111111111,107
139.3741311111111,35.66135111111111,107
139.37413805555556,35.66131305555555,107
139.37477388888888,35.66164805555555,107
</coordinates>
</LineString>
</Placemark>
</Document>
    </kml>

要するにLineStringの中に座標(coordinate)が大量に並んでいる,という形である.

color(線の色)やwidth線の太さなどは,エディタで直接編集できる.

このKMLファイルはインターネットからアクセスできる領域に置いておく必要がある.(Googleのシステムがそれを取得して表示する形式にしてくれるため)授業用のWebサーバの個人領域に置いておくこと.

JavaScriptのコードは以下の通り.

// display_kml.js
 window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    zoom: 16
  };

  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);

  // KMLを表示するためのレイヤーのプロパティ
  const kmlLayerElements = {
    // KMLファイルのURL
    url: 'http://cad.lolipop.jp/data/from_latlonglab.kml',
    // インターネットから探せるサーバ上においておき,そのURLを記述する.
    //ルートの場合関係ないが,レイヤ上のオブジェクトの方がInfoWindowよりも上にくる(抑制する)
    suppressInfoWindows: true,
    // 地図オブジェクト
    map: myMap
  };
  // KMLを表示するためのレイヤーのコンストラクタを実行する.
  // これを実行すると,Googleのシステムが上記KMLファイルを読み込んで来て,表示してくれる
  // もちろん複数作ることもできる.
  const kmlLayer = new google.maps.KmlLayer(kmlLayerElements);
}); // window.addEventListenerに登録する関数オブジェクトここまで

[Work/Class/Web基礎/assignment]

課題その1 - 他己紹介

他己紹介

自己紹介ではなく,パートナーの紹介をする課題.聞き取り調査で「その人にまつわる10個のキーワード」を定めて,そのキーワードを元にその人の紹介を「己」のように行うWebコンテンツを制作する.

フェイク混じりでもよいので「コンテンツとして面白い」ものを作ることが目標.

締め切り

2018/5/6 20:00 GoogleGropusで,全体に共有する.

2018/5/7の授業で,教員とTAが高評価をつけた上位10人の発表を行う.