彼女はWebだが役に立つ
昨年まで放送されていた某TBSのドラマにインスパイアされて、Webサービスを作りました。
サイトURL↓
http://hagiwara.nkmr.io/cmp2/haji/サイトは閉鎖しました。(追記:2018/05/20)
デモ動画
www.youtube.com
特徴
- 安心安全のgoogle認証での契約
- いつだってどんなときも相手してくれる会話機能
- あなたの睡眠をしっかり管理！睡眠グラフ機能
- googleカレンダーと連動で予定も管理！カレンダー機能
- 火曜日じゃなくてもハグできる！？毎日ハグ機能
技術的なやつ
google認証
主に以下のサイトを見ながらリンクを生成し、リダイレクトで投げてます。
Google OAuth 2.0 を使い、Web アプリケーションに認証機能を追加する - komiyakの通り道
良い点としては、アクセス権を申請すると、ユーザーからは一回認証するだけで、googleの様々なサービスのapiを叩くことができます。
今回はプロフィールの名前情報などとカレンダーの予定にアクセスする権限を利用しました。
gyazo.com
googleカレンダーapi
公式のサンプルをいじって、認証した済みのアカウントからカレンダー情報を読み取るようにしました。
Browser Quickstart | Calendar API | Google Developers
google api群のサンプルは本当に充実してて、様々な言語でコードをコピペすれば動くようになってて感動しました。
会話機能
会話機能は2つのapiから成り立っています。
- ドコモの雑談会話API 雑談対話 | docomo Developer support | NTTドコモ
- MicrosoftのCognitive ServicesにあるComputer Vision API Image Processing with the Computer Vision API | Microsoft Azure
流れとしては、会話の入力があったら雑談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
初めてのSongle (ソングル)
Songleというサービスとそれを利用するためのAPIについて紹介したいと思います。
Songleとは
Songle（ソングル）は、音楽をより深く理解しながら、能動的に音楽鑑賞が楽しめるサービスです。音楽理解技術で解析した内容（サビ、メロディ、コード、ビート）を見ながら、楽曲中のサビ区間や繰り返し区間へ頭出しして聴くことができます。 その解析誤りは誰でも自由に訂正でき、さらに、インターネット上のお好きな楽曲を登録できます。
よくわからないと思うので、詳しくはアクセス↓↓↓↓
songle.jp
要約すると、「ネットにある音楽動画を解析してサビやメロディなどを情報を使うことができたり、訂正することができるシステム」です。
Songleのサービスは大きく分けて3つ
- 音楽情報を見たり、編集するメインサイトの http://songle.jp/
- 音楽情報を元に自分の思うようなサービスをつくるために提供される埋め込みAPIのSongle Widget http://widget.songle.jp/
- 上のSongle Widgetを活用したサービスたち http://widget.songle.jp/docs/featured-projects
今回はこのうちの上2つについて解説します。
songle
Tell your world(↓のサイト)を例にして解説していきます。
Tell Your World by livetune - Songle
一番上のオレンジ色はサビを区間を表しており、他の青い部分は一列ごとに繰り返し区間と呼ばれ、AメロBメロなどの情報になってます。
上からコード、メロディ、ビートが一覧で見れます。(薄くなっているのは初回解析での判定結果)
Songle Widget
Songle Widget は動画と音楽情報のうめ込みだけではなく、JavaScriptから実際に音楽情報をリアルタイムに取得することができます。
一部情報はxmlやjsonで取得もできるのでアプリからAPIとして使うこともできます。
すべてメールアドレスなどを使用した認証はありません。
Songle Widgetから取得できる情報
JavaScriptからアクセスできる主な情報
- 楽曲情報(タイトルや長さ、更新情報など)
- 拍
- 拍の更新情報
- 和音
- 和音の更新情報
- メロディ
- メロディの更新情報
- サビ
- サビの更新情報
- 楽曲の検索
SongleWidgetの使い方
JavaScriptから操作する方法を主に紹介しますが、基本的なことはリファレンスを参照してください。
Songle Widget - Songle Widget API (version 1)
よく使う関数のリアルタイムデモを準備しましたので参考にしてください。
http://songle-samples.azurewebsites.net/list/
ちょっとくせ者なのがcurrentChorusSegmentとcurrentRepeatSegmentの中身の構造です。
それぞれ、repeat.indexが示すものは、今の繰り返し区間の通し番号です。
例を見ながら説明します。
このとき、youtubeのシークバーはオレンジ色(サビ区間)と青色(繰り返し区間)のところにあって、
currentChorusSegment(.repeat.index) currentRepeatSegment(.repeat.index)
はそれぞれ0を指しています。
これになると、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を使うと今までできなかった様々な音楽動画に関することができるようになるのでぜひ、つかって遊んでみてほしいです。
WindowsでImagemagickを使ってローカルのコマンドラインでpdfから画像を作る方法
ImageMagickという超便利な画像変換ソフト?を使ってpdfを画像にしてしまう方法です。
最初にダウンロードページでWindows Binary ReleaseからImageMagick-7.0.3-5-Q16-x64-dll.exeを選択し、ダウンロード&インストールします。
詳しいインストール方法は、
ImageMagickのインストール - Qiita
さて、コマンドプロンプトでファイルのあるディレクトリに移動して下のコマンドを実行
convert hoge.pdf hoge.jpg
するとエラーが出てしまいました。これを解決するためにはGhostscriptというPDF用のプログラムが必要なようです。
Ghostscript: Ghostscript Downloads
↑これの「GNU Affero General Public License」のものをインストールして開くと、さらにインストールしろとダイアログが出るのでそれもインストールすると動きました。
以上、動いたことの報告でした。
[2016-11-08追記]
pdfを変換したところ、画質がすごく悪くびっくり！以下のサイトを参考にコマンドを叩くときれいになりました。
takuya-1st.hatenablog.jp
