元気になってきたので、昨日やり残したコメントシステムの機能強化を行いました。Twitterの認証機構を組み込んだので、Twitterのアカウントを持っている方は簡単にコメントでき、アバター画像も表示されるようになりました。

Twitterで接続するには

記事ページの下部にあるコメント入力フォームに、「Twitterで接続する」というボタンを追加しました。

もしあなたがTwitterのアカウントを持ってなくて、今後も取得するつもりがないなら、このボタンは無視して通常通り「お名前」や「メールアドレス」欄に記入してコメントを送信してください。

※Gravatarにも対応していますので、そちらに登録すれば、Twitterで接続しない場合でもメールアドレスに対応したアバター画像が表示されます。

Twitterの認証を使ってこれらの入力欄をパスし、かつTwitterのアバター画像も表示したいなら、「Twitterで接続する」ボタンをクリックしてください。

Twitterにログインしている場合

既にブラウザでTwitterにログインしている状態であれば、以下のような接続承認ページが表示されます。

ブラウザのアドレス欄を見ればわかるように、このページは当サイトではなくTwitterにより提供されています。

ここで「許可する」を選択すると、当サイトのコメントシステムがあなたのTwitterアカウントに「連携アプリ」として登録され、「Tiwtterのアカウントを使って当サイトに自動ログインしたような感じ」になります。

※実際には、あなたが当サイトにログインしたのではなく、「Twitterが代わりにログインした」状態になります。

Twitterにログインしていない、またはアカウントがない場合

Twitterのアカウントを持っていない場合、またはTwitterのアカウントを持っていてもブラウザでTwitterにログインしていない場合には、以下のようなページが表示されます。

既にアカウントを持っているなら、入力して「ログイン」ボタンをクリックしてください。これで前述の「許可する」ボタンをクリックしたのと同じことになります。

もしTwitterのアカウントを持っていないなら(あらかじめアカウントを取得しておくことをおすすめしますが)、「ついったーに参加しましょう」のリンクから新規アカウントを取得することができます。

Twitterでの接続が完了したら

上記いずれかの方法で、(もしかしたら数秒かかるかもしれませんが)以下のようにコメント入力フォームが変化します。

これで、「お名前」や「メールアドレス」の入力、及びGravatarのようなアバター画像の設定を、Twitterが肩代わりしてくれました。

あとはコメント本文を記入してコメントを送信してください♪(*´∀｀)ﾉﾗｸﾁﾝ!

ちなみに「コメントしたことをTwitterでつぶやく」にチェックを入れておくと、「MHFみお☆ちゃんねるのエントリーにコメントしました」というメッセージを記事ページへのリンク付きで自動ツイートします。

Twitterでのつぶやきにも対応しました

上記のように当サイトのコメントシステムを使わず、Twitter上で当サイトの記事へのリンク付きでツイートをした場合も、(たまに漏れがありますが)自動的に拾ってきてコメント一覧に表示します。

※この仕組みにはBackTypeというサイトの提供するWordPress用プラグインを利用してます。

そして、右側のサイドバーにある「最近のコメント」へも、同じようにTwitterのアバター画像が表示され、またTwitter上でのリンク付きツイートも拾ってきて表示します。コレ結構大変でした…。

皆さんからのコメントやツイートを励みに、がんばって更新しますので、お越しの際はぜひ一言くださいね(*´∀｀)♪

既に何度か触れていますが、知りたいというご意見をいただいたので、わたしの動画編集環境についてまとめてみます。

初期 (旧みおのニコニコ動画向けSD画質～zoome向けHD画質)

中期 (旧みおのYouTube向けHD画質・前期)

後期 (旧みおのYouTube向けHD画質・後期)

現在 (新みおのYouTube向けFull HD画質)

動画素材作成	Adobe After Effects CS5 Windows版 (64bit)
カット・字幕編集	Adobe Premiere Pro CS5 Windows版 (64bit)
エンコーダ	上記付属の Adobe Media Encoder CS5

編集効率で言えば、中期→後期で格段に向上しました。そもそもAviUtlはPremiereのようなタイムライン編集の概念はなく、カット編集も自由度が低くて大変でしたし、Windows上で様々な素材合成や高度なエフェクトを利用するにはやはりAdobe Creative Suiteが最適解でした。

しかしそれはAviUtlがダメちんという意味では全然なく、プラグインや各種設定項目をしっかり把握して使いこなせば、機能的に高額なソフトウェアに大きく劣るわけではありません。実際、国内では多くの動画公開者がWindows ムービーメーカーやAviUtlを利用していると思います。これは単に操作が煩雑でなく(簡単という意味ではないです)、なにより無料で環境構築でき、がんばれば高度な動画編集にも耐えられるからでしょう。

実際、現在公開しているわたしの動画をAviUtlやNiVEでつくれるかと言われれば、答えは「ほぼYes」です。手間が何倍になるかわかりませんし、場合によっては小さなミスが後々大きく響いたりして大変ですけど(；´д｀)

現在使用しているAdobe CS5 に関しては、さすがに関連書籍も多いですし説明は省きますが、AviUtlで動画を作成したい！という方のために、参考までにわたしが使用しているプラグインを列挙しておきます。

主に使用しているAviUtlのプラグイン(すべてフリー)

• 拡張 x264 出力(GUI) … MP4(H.264+AAC)形式動画にエンコード
• DirectShow File Reader … DirectShow対応動画の読み込み
• MP4 File Reader … MP4形式動画の読み込み
• リサイズフィルタ … サイズ変更、主に縮小用
• 拡張編集Plugin … 字幕編集やタイムライン上での素材合成

場合によって使用するAviUtlプラグイン(すべてフリー)

• MPEG2-VIDEO File Reader … MPEG2形式動画の読み込み
• 自動フィールドシフト インターレース解除 … インターレース素材の縞解除
• NL-Means Light for GPU … 非実写動画でのノイズ除去(対応GPU必須)
• YUY2アップサンプリング … 色空間の変換が必要な動画のみ使用

AviUtlやプラグインから使用する外部フリーウェア

• Nero AAC Codec … 拡張 ｘ264出力(GUI)と組み合わせてAAC音声を出力
• MP4Box … 拡張 x264出力(GUI)と組み合わせてMP4形式動画を合成
• MKVToolnix … 拡張 x264出力(GUI)でMKV形式動画にエンコード

上記を揃えれば、あとは素材となる動画や見栄えの良いフォントがあれば、完成度の高い動画を作成することができます。動画編集やプラグインのパラメータいじりに慣れたら、最終難関となるのはx264の設定まわりですが、ご要望があればこちらもそのうち執筆してみようと思います。

何をいじってるかというと、「何もかも」 だったり。

• デザインを 「とある有名サイト」 に激似に変更 ←びっくりポイント
• 上記に伴う WordPress のカスタマイズとプラグインの修正、一部自作
• カテゴリ構造やタグの扱いを根本的に変更
• スクリーンショットはどうしよう
• もはやブログではなく動画共有サイトみたいになっちゃうね
• 将来の展望として、自作動画だけでなくほかの動画共有サイトからｍ（ｒｙ
• Amazon と仲良くする

というような感じで、プライベートタイムをほとんど割り当てて作業してます。 睡眠時間まで削っちゃってます、わたし。

最初に挑戦した頃のYouTubeはまだHD画質のサービスが始まっておらず、どうがんばってもサーバ側で再エンコードされた動画は見るに堪えない画質になってしまったのですが、最近になってHD画質でクオリティの高い動画を見かけるようになったので再挑戦してみることにしました。

結果、やはりYouTubeは何をどうしようとも必ずサーバ側で再エンコードされてしまうようです。 これによりビットレートが落ちてしまいますし、そもそも例えビットレートが同じであっても再エンコードを行った時点で画質は低下します。

しかしアップロードした動画がHD画質、具体的には 1,280×720 (720p) であった場合は約2,000bpsというかなり高めなビットレートに変換されることになり、WEB上で再生する分には十分な画質になることもわかりました。

以下、YouTubeへのHD画質動画のアップロードについてまとめました。

まずはソースとなる元動画ですが、わたしはMHFのゲーム画面を 1,280×720 のウィンドウ表示にし、Dxtoryで非圧縮録画したファイルを使います。 ロスレスのコーデックを使ってRGBで録画しますので、当然この段階での画質劣化はありません。

続いて編集作業が必要な場合は、EDIUS や VideoStudio 等で編集し、ロスレスのコーデックで書き出しておきます。 サイズは大きくなりますが中間ファイルなので仕方ありません。

さて肝心のエンコードですが、ここでは大定番のフリーソフト、AviUtl を使います。 使用しているプラグインはたくさんありますが、今回は元ファイルと同サイズ、つまりリサイズする必要がなく色空間も (AviUtl上では) 変換する必要がないため、mp4 (または mkv) 形式で出力するための 『拡張 x264 出力(GUI)』 があればOKです。

先に触れた通りYouTubeにアップロードした動画は、必ずサーバ側で再エンコードされます。 したがって画質は少なからず低下しますので、アップロードするファイルはなるべく高画質なものにしておくべきです。

ニコニコ動画やzoomeの場合は (ソース動画が16:9の場合) 512×288 や 640×360 にリサイズしていたため、ビットレートはだいたい700～1,000bps程度を割り当てれば十分な画質になっていましたが、YouTube のHD画質の場合は 1,280×720 という大きさに加えてサーバ側での再エンコードが必須ということを考慮すると、少なくとも3,000bps以上のビットレートでエンコードするのが良いと思います。

試しに 3,000bps でエンコードしたものをアップロードしてみたところ、サーバ側での再エンコード (長い…1時間以上かかりました) の結果、やはり細かいディティールは失われてしまいましたが、画質はまずまず満足のいくものになりました。

ゲームプレイ動画(つまり高精細なCG)の場合、ビデオカメラでの実写映像に比べて細部のディティールが目に付きやすく、個人的には3,000bpsでは少々心許ないという印象です。

よって今後は動画に 8,000～9,000bps、音声に192kbpsを割り振ることにしました。

これは 「MPEG-4に圧縮してHDDに保存しておく」 用途として考えると、相当オーバースペックな設定値ですが、何度も繰り返しているようにYouTubeでは必ずサーバ側での再エンコードが発生しますので仕方がありません。

YouTube は仕様上10分以内、1GBまでの動画でないとアップロードすることはできません。 8,000bpsで約10分の動画であれば、だいたい数百MB程度に収まりますのでファイルサイズ的には問題ありません。

こうして作成した動画ファイルをアップロードしてしばらくすると、まずは 「すっごい低画質で」 視聴できる状態になります。 この間、動画のページ上部に 「この動画は現在処理中です。処理が完了すると動画の品質が向上する場合があります。」 というメッセージが表示されます。

この状態で待つこと数十分～数時間 (?)、上記メッセージが表示されなくなると、動画プレイヤーの右下に 「HD」 のボタンが！ これでやっとHD画質で再生できるようになります。

次回は実際にYouTubeにHD画質でアップロードしたプレイ動画をお届けします(*´∀｀*)