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

初老のボケ防止日記

おっさんのひとりごとだから気にしないようにな。

スポンサーリンク

スマホにセクシーな声でIPアドレスを喋ってもらおう



以前、TextToSpeechの音声合成について情報を探していたら偶然発見してしまったサイトがとても印象的だったんだけども、残念ながらそのサイトはFlashが必要となるため今どきのスマートフォンやタブレットじゃ聞くことが出来なくて可哀想だよねってことで聞こえるようにしてみました。


今回のターゲットはこちら。

f:id:osa030:20150410205516p:plain
MoanMyIP.com - Sexy Girls Moaning Your IP Address!

  • 海外サイトです。
  • ぱっとみアダルトサイトっぽいです。
  • Flashが動作するブラウザから閲覧すると音がでるので危険です。

随分と前にGizmodoさんの記事にもなっていたので記憶に残っている人も多いかと。

www.gizmodo.jp

で、こちらはサイトができたのがどうも2007年頃らしく、当時の世の中はまだFlash全盛期。当然、このサイトもFlash再生を前提としているので、HTML5が当たり前のスマートフォンやタブレットでは閲覧しても音が再生されません。

Oh、なんてこったい。そんなの人生面白くないぜ。

ということで、Flash非対応のサイトでもこのサイトを体験できるページを作ったよ*1。それが、コチラ。

f:id:osa030:20150410210547p:plain
MoanBakan

動作確認のとれている環境

以下のFlash非対応の環境でも再生できることは確認済。

デバイス OS ブラウザ
PC Windows 8.1(x64) FireFox(Flash未インストール)
Xperia Android 4.4.4 標準ブラウザ,Chrome
iPhone5 iOS 8.3 Safari,Chrome
iPad iOS 8.3 Safari,Chrome


なお、PCのFlash対応ブラウザで閲覧した場合は本家サイトに誘導します。本家で楽しめる人は本家をちゃんと見て頂きたい。

iOSの動作確認については、宗教上の理由でApple製品を持つことは固く禁じられているので、恥部友のお二人に協力頂きました。

twitter.com
twitter.com

こんなくだらないネタの動作確認に付き合って頂きありがとうございました。

最初は気楽に実現できると考えていたんだけど、いかんせん技術力がない残念なオジサンなので色々とつまずいた部分がありWeb系フロントエンジニアの皆さんには当たり前な内容なのでしょうが、せっかくなので記事に残しておきます。

本家の仕組み

MoanMyIP.comはこんな仕組みになっているっぽい((サーバ側の挙動は推測))

  1. アクセス元のクライアント情報(IPアドレスとかブラウザとか)を取得
  2. GeoIP2からIPアドレスを元にドメイン名とかを取得
  3. IPアドレスを元にMP3ファイルを生成
  4. 取得情報とMP3を再生用Flashの引数にセットしたHTMLを返却

後は表示したブラウザがFlashをサポートしていればMP3が再生されると仕組み。
まあなんというシンプルさでしょう。返却されたHTMLのFlash部分はこんな感じ。

        <div id="player">
          <object type="application/x-shockwave-flash" width="300" height="15" data="/player.swf?song_url=/output/xxx.xxx.xxx.xxx.mp3&song_title=Your+IP+is+xxx.xxx.xxx.xxx&autoplay=true"><param name="movie" value="/player.swf?song_url=/output/xxx.xxx.xxx.xxx.mp3&song_title=Your+IP+is+xxx.xxx.xxx.xxx&autoplay=true" /></object>
        </div>

これを見る限り、以下の手順をふめばFlash未サポートのブラウザでも音がだせるはずだ。

  1. MP3を生成するためにMoanMyIP.comにアクセス
  2. HTML内でFlashのパラメータに指定されているMP3を取得する
  3. MP3を再生する

ということで、これを一つ一つ解決すればいい。

今回作ったものの仕組み

1. MP3を生成するためにMoanMyIP.comにアクセス

表示したいわけでもないので、AJAXでアクセスすればいいじゃん。楽勝だーと思ったら、

クロスドメインだからAJAX使えないわ。

ということで色々調べたら、以下のサイトが見つかった。

github.com

ソースを読むとわかるけど、YahooのAPIにアクセスしてYQLで目的のサイトにアクセスするようだ。うーん、確かにそれでクロスドメインはクリアするけどIPアドレスがYahooのものになってしまうぞそれはただのMoanYahooIPではないか。

ということでこのライブラリを使うことは諦めて、非表示のインラインフレームで取り込む方法を取ることにしたんだけど、それだとFlash対応ブラウザで閲覧した場合にインラインフレームの中身が表示されていないにもかかわらずFlashが自動再生されるのである。何を言っているかわからないと思うがつまりは勝手にあはーんうふーんと音声は流れるわ、自前のMP3再生と被るのでまるで3P状態になってしまう。これはアカン、ということでFlashが動作する場合は何もせずに本家サイトに誘導することにした。

判別は以下をパクった参考にした。

stackoverflow.com

2. HTML内でFlashのパラメータに指定されているMP3を取得する

よーし、パパ。はりきってインラインフレームのHTML解析しちゃうぞーとインラインフレームの中身を参照するコードを実行したら

Error: Permission denied to access property 'document'

というエラーがでた。うーむ。どうやらJavaScriptからインラインフレームで読み込んだ外部サイトの中身にはアクセスできないみたいだ。まあ、そりゃそうか。参照できたら色々と悪いことができてしまうではないか。ということで、諦めようと思った所、Flashのパラメータに指定されているMP3ファイルの命名規則が「アクセスしたIPアドレス.mp3」であることに気がついた。なーんだ。じゃあIPアドレスがわかればいいのではないか。でも、どうやってIPアドレスをJavaScriptから取得するかだ。

JavaScript だけで自分の IP アドレスを取得する | null-x

WebRTCのNAT越えの仕組みを利用するわけか。賢い。じゃあこれで行こうと思ったらまた問題が。

  • iOSだとそのままだと動かない
  • AndroidのChromeのデーターセーバーを有効にするとIPアドレスが変わる

前者はもうiOSに滅びてもらうしかない。後者は、データセーバーを有効にするとHTTPアクセスはGoogleのサーバを経由するらしく、WebRTCを使って取得したIPアドレスと異なってしまう*2。つまりMP3のファイル名が変わるというわけ。

ということでHTML5っぽくてかっこいいけどこの仕組は諦めて、素直に外部APIに頼ることにした。

www.ipify.org

これでMP3ファイル、GETだぜ。

3. MP3を再生する

さて、ここまできたらあとはHTML5の機能を使ってMP3を再生すればいいのだが、動的にMP3ファイルを指定する場合に限ってなのかどうかわからないが、ブラウザによって色々と挙動が違うようだ。色々と難儀した結果、結局以下のコードをパクって参考にしてAndroidもiOSも動いた。

stackoverflow.com

標準のAudioコントロールだとOSやブラウザで見た目も変わるのでもう少し色々と見直したいところだけど、今回はコレで動いたからよしとしよう。というかこのネタだけでここまで色々とやるとは思わなかったよ。

公開

さて、めでたく動作するコードは出来たけれど、これを公開するサーバを自分は持っていない。今回サーバ側のコードを書かないでクライアント側のコードだけで頑張ったのはそのためである。で、どうやって公開したかというとコレ。

qiita.com

最初はDropboxのPublicフォルダでやろうと思っていたんだけど、Dropboxに配置したHTMLから外部サイトにアクセスさせるのがいけないのか、DropboxはHTTPSアクセスなのに外部サイトがHTTPだからいけないのかわからないけれど本家サイトへアクセスできなかったので諦めてGitHubにしました。ああ、初めてのGitHubでこんな恥ずかしいコードを晒すとは思わなかったよ。でもどのみちコードは丸見えだからいいか。

あと、ただのHTMLだとつまらないしBootstrapでも面白みがないので今回はこちらのフレームワークをを使ってみました。

lab.hakim.se

スマホのスワイプとかに対応してて素晴らしい。

HTML5 Web標準API バイブル

HTML5 Web標準API バイブル

WebRTC ブラウザベースのP2P技術

WebRTC ブラウザベースのP2P技術

  • 作者: Alan B. Johnston,Daniel C. Burnett,内田直樹(監訳)
  • 出版社/メーカー: リックテレコム
  • 発売日: 2014/12/12
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

  • 作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章
  • 出版社/メーカー: 技術評論社
  • 発売日: 2014/07/02
  • メディア: 大型本
  • この商品を含むブログ (1件) を見る

*1:怒られたら消します

*2:余談だけど、これを使うと接続元IPで制限かけてるサイトの動作が変わると思うんだけどどうなんだろうか

スポンサーリンク