しがないラジオの作り方

by zuckey_17

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

収録・編集裏話

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

収録環境 - Skype + LadioCast + Soundflower - 下記2つの音声をそれぞれAudacityとGarageBandに  ルーティングする - 自分のみの音声 - Skype経由の2人の音声（バックアップ）

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

編集ソフトの使い分け - Garage Band - カット、オープニングの編集、個別音声のマージ - Audacity - 正規化、コンプレッサー、ノイズの除去 2つのソフトを使い分けるのは大変、  1つにしたいのでいい感じのソフトウェアを検討中

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

shiganai.org の実装

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

お便り投稿フォーム・Twitter表示 - お便り投稿フォーム - Slackのincoming-webhookをXHR通信で利用 - Twitterアカウント名を記載していただくと、  パーソナリティのみのプライベートSlackにリンク付きで投稿される - Twitterハッシュタグの最新の表示 - Twitterの埋め込みを利用

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

利用している技術、サービス HTML  CSS JS お便り  送信ハッシュタグツイート取得ツイートページへエピソード一覧・取得エンベッドプレーヤー RSSフィード

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

SoundCloud API

Slide 23

Slide 23 text

課題とこれから

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Audio関連知識の欠如 - 音ムラ - パーソナリティーの2人の声が大きすぎて、  ゲストの方が小さく聞こえる問題 - 編集ソフトで解決？ - 編集時間の長さも継続的な公開には致命的もう少し腰を据えて学習する必要あり、 CSOとかいないかな？（cf. https://ajito.fm/15/）

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

SoundCloud 依存 - Client_idがいつ無効になるのかわからない - 無効という概念があるのかすらよくわかっていない - 各エピソードのキーをSoundCloudが発行しているため  きちんと管理していないと、個別ページ出し分けが難しい - サービス自体いつくなるのか（ry RSSの移行を含め、困難はあると思うが他の仕組みで代用することを検討中

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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