$30 off During Our Annual Pro Sale. View Details »

しがないラジオの作り方

zuckey_17
December 18, 2017

 しがないラジオの作り方

zuckey_17

December 18, 2017
Tweet

More Decks by zuckey_17

Other Decks in Technology

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