ti0
(ti0)
1
この新しいテーマコンポーネントにより、Discourse のコンポーザーから YouTube および Vimeo への動画アップロードが可能になります。最近私が開発したプラグインに慣れている方にとっては、同じ機能がどのテーマにも追加可能なこのテーマコンポーネントで利用できるようになりました。これにより、インストールが非常に簡単になり、プラグインと全く同じように動作します。
機能
すべてのフォーラムメンバーが Vimeo または YouTube に動画をアップロードできます（管理者はどちらか、または両方を有効にするかどうかを選択できます）。
管理者は、管理者設定を使用して、Vimeo にアップロードされた動画の表示および埋め込みのプライバシーを制御できます。
ユーザーは、アップロードモーダルから YouTube にアップロードされた動画の表示プライバシーを制御できます。
プラグインのデモはこちらからご覧いただけます（設定ページを除き、コンポーネントもすべて同じです。コンポーネントの設定ページは、管理者 > カスタマイズ > コンポーネント > Video Upload にあります）：
設定
重要: テーマコンポーネントの場合、インスタンスで使用しているテーマに対してコンポーネントを有効にする必要があります（「すべてのテーマに追加」をクリックするか、希望のテーマを選択してください）。
YouTube および Vimeo へのアップロードを有効にするための開発者向け設定は以下に記載されています。誰かに依頼して設定を行いたい場合は、@ti0 までお問い合わせください。
YouTube アップロードの場合
Vimeo アップロードが共通アカウントに行われるのに対し、YouTube アップロードはアップローダーのアカウントに行われます。
手順を表示
-
認証情報を設定します：
- OAuth クライアント ID を作成
- Web アプリケーションタイプを選択
- 承認済みの JavaScript 元セクションに Discourse インスタンスの URL を追加
-
生成されたクライアント ID のみをコピーします
-
Discourse 管理者画面のコンポーネント設定ページに移動し、youtube api client id フィールドにクライアント ID を貼り付けます
-
youtube upload enabled 設定を有効にして YouTube アップロードを有効にします
-
必要に応じて、YouTube のデフォルトの表示プライバシーオプションを調整します
-
これで、Discourse トピックコンポーザーから直接 YouTube に動画をアップロードできるようになっているはずです
Vimeo アップロードの場合
以下の手順でコンポーネントを設定すると、すべてのコミュニティユーザーがあなたの Vimeo アカウントに動画をアップロードできるようになります。
Vimeo アカウントの制限と使用については、あなたが責任を負います。
手順を表示
-
Vimeo Developers でアカウントとアプリを作成します：
https://developer.vimeo.com/apps/new
-
アップロード権限を持つアクセストークンを生成します
-
Discourse 管理者画面のコンポーネント設定ページに移動し、生成されたアクセストークンを vimeo api access token 設定に追加して保存します
-
vimeo upload enabled 設定を有効にして Vimeo アップロードを有効にします
-
表示および埋め込みのプライバシーオプションを調整します
- プライバシーオプションについては、こちらの Vimeo ページを参照してください：
privacy.view および privacy.embed
-
これで、Discourse トピックコンポーザーから直接 Vimeo に動画をアップロードできるようになっているはずです
動画の投稿
-
動画を投稿するには、新しいトピックを作成するか、既存のトピックに返信します。
-
コンポーザーツールバーの新しい「動画にアップロード」ボタン（動画アイコン）をクリックします。このボタンは、プラグイン設定で YouTube または Vimeo（または両方）を有効にしている場合のみ表示されます。
-
動画ファイルを選択し、必要に応じてタイトルや説明などの詳細を編集します。
-
「Vimeo にアップロード」または「YouTube にアップロード」ボタンをクリックします。
-
表示されるボタンは、YouTube / Vimeo アップロードを有効にしているか（どちらか、または両方）によって異なります。
-
アップロードの進行状況が表示され、動画のトランスコード処理が完了するまで待機します。
-
トランスコードが完了するまでモーダルは開いたままになります。
-
トランスコードが完了すると、動画リンクがコンポーザーに追加されます（トランスコードエラーが発生した場合を除く）。
-
投稿を保存すると、選択したプライバシーオプションに応じて、他のすべてのコミュニティユーザーが動画を視聴できます。
機能リクエスト
追加機能やサポートが必要な場合は、私までお問い合わせください @ti0。
貢献
このテーマコンポーネントが役に立った場合は、開発者への寄付をこの Paypal リンクからご検討ください：PayPal.Me
大規模な貢献も小規模な貢献も、どちらも歓迎します 
コンポーネント/プラグインを拡張したい場合は、PR を歓迎します。
「いいね！」 28
ti0
(ti0)
3
現時点ではそうではありませんが、テーマコンポーネントを維持する方がはるかに簡単になると思います。当分はプラグインをそのまま残しておきますが、テーマコンポーネントへの移行をお勧めします。
「いいね！」 10
Don
4
@ti0 さん、ありがとうございます！これもまた素晴らしいですね 
プラグインよりもテーマコンポーネントを使う方がずっと使いやすいです。
一つ質問があります。以下のテキストを翻訳可能に追加することはできますか？アップロード中、動画のトランスコード、動画の詳細（タイトル、説明など）。よろしくお願いします！
「いいね！」 3
ti0
(ti0)
5
@Don コンポーネント内のすべてのラベルをカスタマイズできるようになりました
「いいね！」 5
Don
6
こんにちは
素晴らしいコンポーネントを作成してくださり、本当にありがとうございます。
当初は非常にうまく動作していましたが、現在はいくつかの問題が発生しています 
動画（MP4ファイルのみ）のトランスコード中に status.error.transcode というエラーが時々発生します。動画は正常にアップロードされますが、Vimeo 上で表示されるだけで、コンポーザーにリンクが挿入されません。
また、別の問題として、MacOS の Safari ブラウザからは MP4 ファイルをアップロードできません。
これらの問題を解決することは可能でしょうか？
ご回答をよろしくお願いいたします！
「いいね！」 1
ti0
(ti0)
7
@Don さん、MacOS の Safari でのこのエッジケースを発見していただきありがとうございます。これは Safari 側の問題のようです（SO の参考リンク）。テーマコンポーネントでこの問題を修正しましたので、アップデート後にページを再読み込みすれば、Safari からも MP4 ファイルをアップロードできるようになります。自分のマシンでテストしましたが、現在正常に動作しています。
また、トランスコードエラーについては、Vimeo 側で発生する問題であり、こちらで対応する方法はありません。
「いいね！」 6
Don
8
迅速な修正をありがとうございます！これで Safari でも問題なく動作します
Don
9
こんにちは @ti0 さん、
どうやら Vimeo のアップロード仕組みが変更されたようです。フォーラムの投稿 composer にリンクを貼り付けると、Vimeo 側で動画の変換が開始されます。そのため、動画が準備完了するまでワンボックス化してフォーラム上で再生することができません。ご支援ありがとうございます！
「いいね！」 1
私も同様ですが、現在は Mozilla Firefox がすべてのプラットフォームで影響を受けているようです。
Mozilla Firefox には他にもいくつかの問題が発生しましたが、それらの問題について再度確認し、さらに詳しい説明を提供する必要があります。
Don
11
つまり、問題は次の通りだと考えられます。Vimeo では、アップロードの後、変換の前に変換待ちというセクションがあります。
コンポーネントには以下のような設定があります：
const STATUS_POLLING_INTERVAL_MILLIS = 10000;
正しい理解であれば、アップロード処理の後に10秒ごとに Vimeo へリクエストを送信し、動画の完了状態が返ってくるまで「待機」状態となります。Vimeo API は Webhook などをサポートしていないため、トランスコード処理が進行中か完了したかを定期的に確認するために、リクエストを送信する必要があります。
私はこれを 60 秒に変更しました。より良い解決策が出るまでの暫定的な対応ですが、これでほとんどのアップロードにおいて「待機」プロセスのリクエストをスキップできるはずです。小規模（約 10MB）、中規模（約 500MB）、大規模（約 2GB）のアップロードでテストしました。
小規模なアップロードでは待機時間は数秒（約 4〜5 秒）、中規模では約 10〜15 秒、大規模では約 40〜45 秒でした。これはアップロードファイルのサイズに依存しているようです。
動作しているようですが、「変換待ち」プロセスが 60 秒以上かかる場合は、以前と同じようにリンクが貼り付けられてしまいます。この「待機」プロセスをスキップできれば理想的です。
Zup
12
Vimeoのアップロードは、共通アカウントではなくアップロード者のアカウントに保存されるようにしたいのですが、可能ですか？
「いいね！」 1
linzo
(Collins)
13
@ti0 自分だけかもしれませんが、何か不具合があるようです。アップロードが「Authenticating」で止まったままになり、Chrome コンソールに以下のエラーが表示されています。
一部のリソースが、オリジンがサイトのコンテンツセキュリティポリシー（CSP）のリストに含まれていないためブロックされています。サイトの CSP はホワイトリストベースであるため、アクセスするにはリソースをホワイトリストに登録する必要があります。
サイトのコンテンツセキュリティポリシーは、HTTP ヘッダー（推奨）または meta HTML タグを介して設定されます。
この問題を解決するには、以下のいずれかを行ってください：
1. （推奨）`'script-src'` のホワイトリストを使用している場合、厳格な CSP に切り替えることを検討してください。厳格な CSP の方が XSS に対して堅牢です。厳格な CSP の設定方法については、こちらをご覧ください。
2. または、ブロックされたすべてのリソースが信頼できるかどうかを慎重に確認してください。信頼できる場合は、それらのソースをサイトの CSP に含めてください。⚠️信頼できないソースをサイトの CSP に追加しないでください。ソースを信頼できない場合は、代わりにリソースを自サイトでホストすることを検討してください。
影響を受けるリソース
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`
blocked script-src-elem api.js:12
ti0
(ti0)
14
@linzo これは CSP の問題であり、テーマコンポーネントとは無関係です。Discourse の CSP については、こちらをご覧ください：Mitigate XSS Attacks with Content Security Policy
@Zup、これは追加の機能リクエストです。もちろん可能ですが、実装するには追加作業が必要となり、その場合は費用が発生します。ご希望であればお知らせください。
返信が遅れてしまい申し訳ありません。はい、アップロード後に変換（トランスコード）処理が行われ、動画が埋め込まれる前にアップロードダイアログでその状態が表示されます。私の環境では正常に動作しており、変換が完了するまでダイアログは閉じられず、その後に動画が埋め込まれます。以下はデモです：
「いいね！」 1
debryc
(Deborah Chang)
15
このテーマコンポーネントの可能性にとてもワクワクしています。このテーマコンポーネントはモバイル端末でも動作しますか？つまり、スマートフォンから写真ライブラリに保存された動画をアップロードすることは可能でしょうか？
私はテーマクリエイターのプレビューで表示を試みたところ、「アクセスが拒否されました」という通知を受け取りました。
「いいね！」 2
Don
16
こんにちは、Deborah さん。
当社のフォーラムでは Vimeo へのアップロードに対応しており、あらゆるデバイスで非常にスムーズに動作しています。 選択プロセスは Discourse と同じですが、動画を選択した後、アップロードを開始するには「Vimeo または YouTube にアップロード」ボタンをクリックする必要があります。
「いいね！」 3
debryc
(Deborah Chang)
17
あなたのフォーラムは公開されていますか？ぜひ拝見したいのですが！実際に動いている様子を見たいです。URLを教えていただけますか？
「いいね！」 3
これは素晴らしいですね！Vimeo の特定のフォルダに動画をアップロードできるようにすれば、ユーザーのアップロードを自分のものと分けて管理できるという機能があると嬉しいです。ありがとうございます！
「いいね！」 2
ti0
(ti0)
19
気に入っていただけて嬉しいです この機能リクエストに貢献していただけるなら、私が実装しますし、PR を提出していただくことも可能です。どちらが良いかお知らせください。
「いいね！」 2
debryc
(Deborah Chang)
20
動画を自動で字幕付けし、デフォルトで字幕を表示することは可能ですか？アクセシビリティの観点から、これは私たちにとって非常に重要です。
「いいね！」 1
