しがないラジオの作り方

https://shiganai.connpass.com/event/74300/
の発表資料です。

Transcript

1. しがないラジオの作り方
   2017/12/18 @しがないラジオ忘年会 #1
   @zuckey_17
   

   View Slide

2. - zuckey（ズッキー）
   - しがないラジオパーソナリティ
   •編集担当
   - 株式会社Yappli
   •ソフトウェアエンジニア
   •PHP(Laravel) / React.js
   自己紹介
   

   View Slide

3. - 収録・編集裏話
   - shiganai.org の実装
   - 課題とこれから
   トピック
   

   View Slide

4. 収録・編集裏話
   

   View Slide

5. どうもしがないラジオ編集担当のzuckeyです
   

   View Slide

6. 収録機材
   ~ ep.13
   - ZOOM ズーム MSステレオマイクロフォン iQ7 + iPhone 7 Plus
   - 音質はそこまで悪くない
   - オンサイトでないと収録できない
   - 五反田の貸し会議室（マンションの一室）にて

   毎週水曜朝7時半集合 => つらい
   

   View Slide

7. 収録機材
   ep.14 ~
   - Blue Micro Yeti USB 2.0マイク 15374 + Macbook
   - 在宅でのSkype収録が可能に！
   - 水曜朝7時から開始、収録時間が長くなる要因に（汗
   - 個別の声を録音してマージする、ダブルエンダー方式（ドヤッ

   なので編集の幅が広がる（逆に色々削れてしまうので気にすると大変）
   

   View Slide

8. 収録環境
   - Skype + LadioCast + Soundflower
   - 下記2つの音声をそれぞれAudacityとGarageBandに

   ルーティングする
   - 自分のみの音声
   - Skype経由の2人の音声（バックアップ）
   

   View Slide

9. 収録環境
   -BEJP$BTU
   4PVOEqPXFS
   4PVOEqPXFS
   (BSBHF#BOE
   "VEBDJUZ
   4LZQF
   自分のみの音声
   Skype経由の2人の音声
   

   View Slide

10. 編集ソフトの使い分け
    - Garage Band
    - カット、オープニングの編集、個別音声のマージ
    - Audacity
    - 正規化、コンプレッサー、ノイズの除去
    2つのソフトを使い分けるのは大変、

    1つにしたいのでいい感じのソフトウェアを検討中
    

    View Slide

11. モノラルとステレオ
    - つい最近までステレオだった
    - 機材の問題？もあってか、ステレオ音声で片方が聞こえない現象が発生
    - 容量が大きくなったり、妙な立体感が出てしまったり
    - 入出力をモノラルにしてすべて解消！！
    

    View Slide

12. shiganai.org の実装
    

    View Slide

13. View Slide

14. View Slide

15. 機能
    - エピソード一覧のリスト表示
    - エピソード詳細ページ
    - エンベッドプレーヤーによる視聴
    - ShowNote
    - お便り投稿フォーム => Slackへ
    - Twitterハッシュタグの最新の表示
    - パーソナリティーページ
    - ゲストページ
    https://github.com/zuckeyM-17/shiganai-radio-page
    

    View Slide

16. エピソード一覧・詳細
    - エピソード一覧
    - ホーム画面
    - 投稿日、タイトル、ShowNotesの冒頭が表示されている
    - 「もっと見る」ボタンによって過去50件取得可能
    - エピソード詳細
    - ShowNotes
    - エンベッドプレーヤー
    

    View Slide

17. お便り投稿フォーム・Twitter表示
    - お便り投稿フォーム
    - Slackのincoming-webhookをXHR通信で利用
    - Twitterアカウント名を記載していただくと、

    パーソナリティのみのプライベートSlackにリンク付きで投稿される
    - Twitterハッシュタグの最新の表示
    - Twitterの埋め込みを利用
    

    View Slide

18. パーソナリティーページ・ゲストページ
    - パーソナリティーページ
    - やりたかったのでタグクラウドっぽいものを実装
    - コードの変更が面倒くさいので情報の更新はしていない ←
    - ゲストページ
    - ゲストの出演しているエピソードを箇条書きで表示
    

    View Slide

19. 利用している技術、サービス
    HTML

    CSS
    JS
    お便り

    送信
    ハッシュタグツイート取得
    ツイートページへ
    エピソード一覧・取得
    エンベッドプレーヤー
    RSSフィード
    

    View Slide

20. SoundCloudの利用
    - 音声ホスティング
    - ShowNotesホスティング
    - 取得API
    - エンベッドプレーヤー
    - oEmbed API
    - RSS発行 => iTunes Podcastへ
    

    View Slide

21. SoundCloud API
    - https://developers.soundcloud.com/
    - 利用するための情報が少ない
    - すべてのAPIで必要なCliend_idの取得方法が不明
    - “Register a new app”から取得という記載がある
    ものの、”currently unavailable”とのこと
    - 現在は、インスペクタからリクエスト情報を見て取得

    → そんなはずはない？？

    → 情報募集します！！
    

    View Slide

22. SoundCloud API
    

    View Slide

23. 課題とこれから
    

    View Slide

24. 主な課題
    - Audio関連知識の欠如
    - Angularが必要か
    - SoundCloud依存
    

    View Slide

25. Audio関連知識の欠如
    - 音ムラ
    - パーソナリティーの2人の声が大きすぎて、

    ゲストの方が小さく聞こえる問題
    - 編集ソフトで解決？
    - 編集時間の長さも継続的な公開には致命的
    もう少し腰を据えて学習する必要あり、
    CSOとかいないかな？（cf. https://ajito.fm/15/）
    

    View Slide

26. Angularが必要か
    - 特に高機能なWebサービスではないため、

    高機能なフレームワークであるAngularが必要とは思えない
    - メンテができておらずAngularのバージョンも古い
    - 普段触っていない
    もう少し軽めなもので作り直す？
    @kazu_ponさんも出てくださったことですしVue.jsとか？
    

    View Slide

27. 不具合報告
    client_idが無効
    ShowNoteに
    うまくエンコードされない絵文字があった APIが50エピソードまでしか

    取ってくれていない
    

    View Slide

28. SoundCloud 依存
    - Client_idがいつ無効になるのかわからない
    - 無効という概念があるのかすらよくわかっていない
    - 各エピソードのキーをSoundCloudが発行しているため

    きちんと管理していないと、個別ページ出し分けが難しい
    - サービス自体いつくなるのか（ry
    RSSの移行を含め、困難はあると思うが他の仕組みで
    代用することを検討中
    

    View Slide

29. λΠτϧΛݩʹࣗಈͰੜ੒͞ΕΔ
    ฤूՄೳͳͨΊϖʔδੜ੒࣌ʹؾ͍ͮͯ๏ଇੑΛ΋͕ͨͤͨ
    աڈʹ͸ϥϯμϜͳจࣈྻ͕ೖ͍ͬͯΔ΋ͷ΋ʜ
    https://shiganai.org/ep/sp13b-pupupopo88
    ݅Ҏ্ͷΤϐιʔυΛಈతʹग़͠෼͚Δʹ͸ɺ
    ݸผϖʔδग़ྗͷͨΊʹɺ"1*ΛҾ͍͔ͯΒ

    ͜ͷLFZͱΤϐιʔυ৘ใͷIBTIΛ࡞੒͢Δඞཁ͕͋Δ
    参考
    

    View Slide

30. これからも出来る限り皆さまの声を反映して
    より良いしがないラジオにしていきたいと考えておりますので
    これからもどうぞよろしくお願いいたします!!
    

    View Slide