読者です 読者をやめる 読者になる 読者になる

日本地図3Dビュワーを作った

CGを使った作品の課題が出たので日本地図を3Dにしました。


このために使用したのが国土地理院apiです。
↓これ
地理院地図|標高タイルの詳細仕様

仕様としてはズームができるはずなのですが、叩いても落ちてこず、仕様のURL
http://cyberjapandata.gsi.go.jp/xyz/dem/14/14547/6463.txt
を叩いてその情報を元にプログラムを作成しました。

ただ、すべての情報を使用するとCGが重くなって大変なので、間引きを行って軽くしました。
かなり精密なデータが落ちてくるので今後使えそうだなと思いました。

彼女はWebだが役に立つ

昨年まで放送されていた某TBSのドラマにインスパイアされて、Webサービスを作りました。
サイトURL↓
彼女はWebだが役に立つ

デモ動画
www.youtube.com

特徴

  • 安心安全のgoogle認証での契約

f:id:matatsuna:20170130203135j:plain

  • いつだってどんなときも相手してくれる会話機能

gyazo.com

  • あなたの睡眠をしっかり管理!睡眠グラフ機能

gyazo.com

gyazo.com

  • 火曜日じゃなくてもハグできる!?毎日ハグ機能

技術的なやつ

google認証

主に以下のサイトを見ながらリンクを生成し、リダイレクトで投げてます。
Google OAuth 2.0 を使い、Web アプリケーションに認証機能を追加する - komiyakの通り道
良い点としては、アクセス権を申請すると、ユーザーからは一回認証するだけで、googleの様々なサービスのapiを叩くことができます。
今回はプロフィールの名前情報などとカレンダーの予定にアクセスする権限を利用しました。
gyazo.com

googleカレンダーapi

公式のサンプルをいじって、認証した済みのアカウントからカレンダー情報を読み取るようにしました。
JavaScript Quickstart  |  Google Calendar API  |  Google Developers
google api群のサンプルは本当に充実してて、様々な言語でコードをコピペすれば動くようになってて感動しました。

会話機能

会話機能は2つのapiから成り立っています。

流れとしては、会話の入力があったら雑談APIにそのまま投げて、画像が投げられたらその結果をComputer Visionに投げ、帰ってきた英文字に関して雑談APIに投げ直すってことをしています。現在、ご飯系(food,dish)とケーキ系(cake)の画像だと判断されたらそれぞれ、"食事"と"ケーキ"という単語を雑談APIに送って結果を表示しています。
はじめは、すべての写真に対して返信したかったのですが、無料で簡単に叩ける翻訳APIが見つからず、断念しました。

画像のpostをajaxですることがサンプルがなかなか見つからず、苦労しました。このサイトを見つけてサンプルをいじることで、なんとか実装できました。顔検出API仕様

ハグ機能

打ち合わせ中
??「やっぱ、ハグしたい!!」
俺「そうだなー圧力センサーぬいぐるみの中に入れて使うのも面倒だな(ハード触りたくない)」
??「うん....」
俺「あ、ぬいぐるみに鈴を付けて、鈴の周波数を解析して、ハグして音が鳴ったら反応するとかいけるんじゃね?」
結論できた
まず、マイク入力をフーリエ変換するサンプルを探しました。
マイクから周波数取得(WebAudio) - jsdo.it - Share JavaScript, HTML5 and CSS
ところが、マイクが動かないという事態に
どうして動かないかを調べてみると新しいAPIになったらしく動かないのと同時に制約がついてました。
新しいAPIと制約について
カメラを使ってみよう ーWebRTC入門2016 | HTML5Experts.jp

HTMLファイルの置き場所

カメラやマイクにアクセスするには、サンプルのHTMLファイルをWebサーバーに配置する必要がありますが、実はブラウザによって条件が異なります。

Chromeの場合 … 原則 https://~ のみ。例外として http://localhost/~ でも利用可能
Firefoxの場合 … https://~ および http://~ の両方で利用可能。さらに file://~ でも利用可能
Edgeの場合 … https://~ および http://~ の両方で利用可能。さらに file://~ でも利用可能
FirefoxやEdgeの場合は、ローカルのHTMLファイルを直接読み込んでも、利用可能です。

ずっとChromeで開発しており、研究室のサーバーはhttp接続ということでピンチ!
そこで、Firefoxで実行することにしました。(実行はFirefoxからしてください)
あとの画面の描画はprocessing.jsでしました。Processing.js

最後に

いろいろありましたが、無事に動く形に完成できました。年始はとくに死にそうだったけど。お疲れ様でした。

Special Thanks

www.tbs.co.jp

初めてのSongle (ソングル)

Songleというサービスとそれを利用するためのAPIについて紹介したいと思います。

Songleとは

Songle(ソングル)は、音楽をより深く理解しながら、能動的に音楽鑑賞が楽しめるサービスです。音楽理解技術で解析した内容(サビ、メロディ、コード、ビート)を見ながら、楽曲中のサビ区間や繰り返し区間へ頭出しして聴くことができます。 その解析誤りは誰でも自由に訂正でき、さらに、インターネット上のお好きな楽曲を登録できます。

よくわからないと思うので、詳しくはアクセス↓↓↓↓
songle.jp

要約すると、「ネットにある音楽動画を解析してサビやメロディなどを情報を使うことができたり、訂正することができるシステム」です。

Songleのサービスは大きく分けて3つ

今回はこのうちの上2つについて解説します。

songle

Tell your world(↓のサイト)を例にして解説していきます。
Tell Your World by livetune - Songle

f:id:matatsuna:20161209112706j:plain
一番上のオレンジ色はサビを区間を表しており、他の青い部分は一列ごとに繰り返し区間と呼ばれ、AメロBメロなどの情報になってます。

f:id:matatsuna:20161209113230p:plain
上からコード、メロディ、ビートが一覧で見れます。(薄くなっているのは初回解析での判定結果)

Songle Widget

Songle Widget は動画と音楽情報のうめ込みだけではなく、JavaScriptから実際に音楽情報をリアルタイムに取得することができます。
一部情報はxmljsonで取得もできるのでアプリからAPIとして使うこともできます。
すべてメールアドレスなどを使用した認証はありません。

Songle Widgetから取得できる情報

JavaScriptからアクセスできる主な情報

  • メロディ
  • 和音(コード)
  • サビ区間
  • 繰り返し区間(AメロBメロなど)
  • 曲の長さ
  • 現在のbpm
  • 平均音量

XMLJSONで返せる情報(URLを叩けば落ちてくる)

  • 楽曲情報(タイトルや長さ、更新情報など)
  • 拍の更新情報
  • 和音
  • 和音の更新情報
  • メロディ
  • メロディの更新情報
  • サビ
  • サビの更新情報
  • 楽曲の検索

SongleWidgetの使い方

JavaScriptから操作する方法を主に紹介しますが、基本的なことはリファレンスを参照してください。
Songle Widget - Songle Widget API (version 1)

よく使う関数のリアルタイムデモを準備しましたので参考にしてください。
http://songle-samples.azurewebsites.net/list/

ちょっとくせ者なのがcurrentChorusSegmentとcurrentRepeatSegmentの中身の構造です。
それぞれ、repeat.indexが示すものは、今の繰り返し区間の通し番号です。
例を見ながら説明します。
f:id:matatsuna:20161227123959p:plain
このとき、youtubeのシークバーはオレンジ色(サビ区間)と青色(繰り返し区間)のところにあって、

currentChorusSegment(.repeat.index)
currentRepeatSegment(.repeat.index)

はそれぞれ0を指しています。
f:id:matatsuna:20161227124356p:plain
これになると、0と1になっています。この1というのは、青色の繰り返し区間の上から3番目の区間が1回目(仕様上、初回は0回目とカウント)ということを指しています。これが0が1に変わった理由です。その繰り返し区間が何回目かをリアルタイムで知ることができます。

ちなみに、以前作ったものもsongleからJSONをprocessingで読み込みました。
matatsuna.hatenablog.com

Songle Widgetの埋め込みプラグイン

深く理解したり、簡単にスゴイことがしたいなら見てもいいかもしれません。
Songle Widget API Examples
Songle Widget API Examples

最後に

songleを使うと今までできなかった様々な音楽動画に関することができるようになるのでぜひ、つかって遊んでみてほしいです。