PerlBeginners #16発表資料です。ファイルストア型Ｗｅｂアプリの作り方。

1. クラウドストレージを使って
音声投稿Ｗｅｂサイトを作っ
た話
#perlbeginners #16
2014.12.22 @dokechin

2. 自己紹介(@dokechin)
•システムＰｅｒｌでバッチ処理を
書いている
•Ｗｅｂアプリを2012年から趣味
で書いている

3. Ｗｈａｔ

4. 思い立った・・・
• 著作権のない楽曲の伴奏（もみじ、海など文部
省唱歌）を予め登録。
• それをバックに歌を歌い投稿できるサイト。
• オンラインオーディションサイト。（すでにあ
る？）

5. 問題
• 僕はピアノが弾けない
• クラウドワークスを使う手もあるが・・お金が
かかる
• ＭＩＤＩもよくわからないし・・・

6. 伴奏も登録できるサイトにしてしまえ
カエルの歌
（歌なし）
カエルの歌
（歌付き）
カエルの歌
（輪唱）
カエルの歌
（輪唱）
カエルの歌
（歌付き
カエルの歌
（輪唱）
Ａさん
Ｂさん Ｃさん
Ｃさん Ｄさん Ｄさん

7. Renka – 連歌 http://renka.xyz
カラオケに限定すべきか？
• 会話、戯曲なども取り込むべきか。
• 汎化しすぎると趣旨がボヤける
ドメイン名で頭を悩ます
• Karapd(パブリックドメインのカラオケ）
• Karap(カラピー）
• Renka(連歌 ５，７，５に合わせて７,７をつな
げて遊ぶ）

8. Ｈｏｗ

9. ブラウザでマイク録音
Recorder.js
• HTML5でマイク録音するjsライブラリ
• IE、Safariでは動作しない
• Firefox,Chrome,(Opera)では動くはず
• スマホブラウザでの再生でハマった（Blobでの
再生できない。Base64でできた。）

10. 構成①
さくらVPS 1G＋100Gストレージ
Nginx Mojolicious
/upload
/sound/hoge.mp3
ローカルストレージ

11. 問題
• １Ｍ×10万ファイルでローカルストレージが一
杯になってしまう
• スケールアウトするときに困る

12. 構成②
さくらVPS 1G＋100Gストレージ
Nginx Mojolicious
/upload
https://hoge.s3.amazon.com/hoge.mp3
ＡＷＳ Ｓ３
Amazon::S3

13. 問題
• クラウドのＵＲＬが公に公開されのは、ちょっ
と嫌な感じ。課金が心配。

14. 構成③
さくらVPS 1G＋100Gストレージ
Nginx Mojolicious
/upload
/sound/hoge.mp3
AWS S3
日本
Amazon::S3
aws_authモジュール

15. 問題
• ＶＰＳのリージョン付近からのアクセスからだ
といいけど、遠距離だと不利。

16. ＣＤＮ（コンテンツデリバリーネット
ワーク）
90年代以降ネットが一般に普及するにつれ、大手サイトからのリン
クやテレビといった他メディアからのリンクにより、通常想定され
ていない大量のユーザーがサイトへ集中し、反応が遅くなったり、
まったく応答不能になること（フラッシュクラウド効果）が多く
なってきた。このような現象に対処する場合、サーバを一ヶ所だけ
に置くのではなく、地理的・バックボーン的に分散させるのが効果
的である。
- Wikipediaより抜粋

17. CDN(CloudFlare)

18. 構成④
さくらVPS 1G
AWS S3
Nginx Mojolicious
CloudFlare
CloudFlare DNS
/upload
/sound/hoge.mp3
CloudFlare
日本
アメリカ
Amazon::S3
aws_authモジュール

19. 問題
• サイトの会員のみファイル公開したい場合に、
対応できていない。→ AmazonのCDN
(CloudFront)では署名付きURLで対応する模様。

20. • ご清聴ありがとうございました。