iPhone の操作画面を動画で公開するために使った3つのアプリ・サービス vol.3—Vimeo

via Vimeo
via Vimeo

iPhone の画面を動画に撮ってブログにアップロードするまでの道のりを、3回にわたってお伝えする今回の連載記事もいよいよ最終回です。最後は Mac の iMovie で編集した動画を、動画共有サイト Vimeo にアップロードし、ブログの記事に埋め込んだり、スマートフォン向けに CSS で表示を整えたりする方法を紹介します。

iPhone の操作画面を動画で公開するために使った3つのアプリ・サービス

今回の目次

  1. おしゃれな動画が多数公開されている Vimeo
  2. 無料プランでできること
  3. アカウント登録
  4. iMovie からアップロード
  5. アップロードするサイズ(解像度)
  6. ブログに動画を埋め込む
  7. 動画のサムネイルを変更する
  8. iPhone で縦長に表示されるのを CSS で修正する
  9. まとめ

おしゃれな動画が多数公開されている Vimeo

動画のアップロード先に Vimeo を選んだのは、サイトの素敵な雰囲気に一目惚れしたからです。サイト全体の色遣いがきれいで、アップされている個々の動画もおしゃれなものばかり。ブログに動画を埋め込んだ時、記事に表示されるプレーヤーのデザインがかっこいいことも決め手になりました。

また、Mr. iMovie や「カントク」の異名を持つ PonDad さん (@pon_dad) が Vimeo について詳しい記事を書かれていたことも安心感につながりました。

無料プランでできること

Vimeo には無料プランと有料プランが用意されています。無料プランには主に以下の制限がありますが、通常はこちらで十分かと思います。

  • アップロード容量: 500MB/週
  • HD(ハイビジョン)動画のアップロード: 1本/週
  • ブログへの HD 動画の埋め込み: 不可
  • 広告: あり

アカウント登録

アカウントの登録は Vimeo のトップページから行えます。

ユーザネーム、メールアドレス、パスワードを入力し、「Join」をクリックします。すぐに確認メールが届くので、メールの中の「Complete Your Registration」をクリックして認証します。

ブラウザには有料プランを案内するページが表示されますが、下の方にある「Continue with your Basic account」をクリックします。Basic は無料プランのことです。

アカウントが開設されたら、「Me」→「My Settings」をクリック。

設定画面で数字8桁のユーザ ID を確認します(このアカウントはこの記事のためにサンプルで作成したものです)。iMovie から動画をアップロードする際に必要になります。

iMovie からアップロード

iMovie には、アプリから直接 Vimeo に動画をアップロードする機能が備わっています。

アップロードしたいプロジェクトを選択した状態で、メニューバーから「共有」→「Vimeo…」をクリックします。

ダイアログが表示されるので、「アカウント」→「追加…」で先ほどの8桁の ID を入力。さらに Vimeo のパスワードを入力し、「再生できるユーザ」を「全員」にします。タイトルや説明、タグは気の向くままに記します。「公開するサイズ」を選び、「次へ」をクリック。続く画面で「公開」をクリックするとアップロードされます。

アップロードするサイズ(解像度)

「公開するサイズ」に関してですが、動画の解像度については知識がなかったので、これも PonDad さんの記事を参考にさせてもらいました。また、Vimeo のサイトにも英語ですが解説ページがあります。

Vimeo のページでは無料プランのアップロードサイズとして、1280 x 720 px の HD サイズと 640 x 360 px の SD サイズ(アスペクト比 16:9 の場合。4:3 なら 640 x 480 px)が挙げられています。これに則って、iMovie では「HD 720p」を選びます。

自分でもサイズを変えながら何度かアップロードを試したところ、SD サイズは iPhone で再生するだけなら十分でも、解像度の高い PC のディスプレイで再生するとやはり画像が粗く感じられました。

無料プランは HD 動画のアップロードが週に1本となっているので、時間的に間に合わない時はとりあえず SD サイズでアップロードし、後で HD サイズを再アップロードして動画を差し替えるのがいいと思います。

HD サイズでアップロードすると iPhone などモバイル端末からアクセスする時にファイルサイズが大きすぎないかと心配する人もいるかもしれません。でも、その点は心配無用です。無料プランではもともと HD 動画をブログに埋め込むことができないので、ブログ上では SD 画質で再生されます。

もし PC からブログを閲覧してくれた人が、より高い画質で見たいと思えば、埋め込み動画の「HD」ボタンから Vimeo のサイトに飛んで HD 画質で再生することができます。

ブログに動画を埋め込む

iMovie からアップロードした動画は、Vimeo 側でコンバートの作業が終わると再生できるようになります。無料プランの場合、30分ほど待つことになります。

動画の「SHARE」ボタンをクリックすると、共有用の URL リンクやブログに埋め込むための HTML コードを取得することができます。SNS への投稿ボタンもあります。

WordPress であれば、わざわざ HTML コードをコピペする必要さえありません。動画の URL を投稿画面に直接書くだけで動画が埋め込まれます。

動画のサムネイルを変更する

記事に埋め込まれた動画は、再生されるまではずっとサムネイルの静止画像を表示しています。このサムネイルは動画の中の好きな瞬間に変更することができます。

まず、動画の「Settings」ボタンをクリック。

続いて「Thumbnails」→「CHOOSE」を選びます。

サムネイルにしたいシーンで動画を止めたら、「Use this frame」をクリックします。最初からあったサムネイルは「×」ボタンで削除してしまいます。

iPhone で縦長に表示されるのを CSS で修正する

WordPress のデフォルトテーマ Twenty Twelve の場合、記事に埋め込んだ動画のフレームは、iPhone で見ると上下に黒い帯が入ってこのように縦長に表示されてしまいます。

Twenty Twelve のスタイルシート(style.css)を覗くと、iframe には次の通り横幅が画面サイズを超えないように設定がされています。ただ、横幅が自動的に調整されても、縦幅は調整されないためフレームが縦長になってしまいます。

iframe {
  max-width: 100%;
}

そこで、横幅の狭い iPhone 用に別途次のコードを style.css に追記します。Twenty Twelve は 600px を境にレイアウトが変わるようになっているので、それに合わせてメディアクエリを使ってみました。

@media screen and (max-width: 600px) {
  iframe {
    height: auto;
  }
}

こうすると iPhone でも上下の黒い帯が消えてきれいに表示されました。

ちなみに最初はメディアクエリを使わずにこのコードを書いて PC 表示にも適用したのですが、height: auto; がなぜか height: 150px; と出力され、縦幅が短すぎるフレームになってしまいました。

まとめ

3回に分けて書いてきた連載もこれで終了です。今までは他のブログで掲載されている動画を見た時、単純にかっこいいなあと思うだけだったのですが、自分で実際にやってみて、いかに時間のかかる大変な作業なのかということを思い知りました。

でも、やっぱり動画があると記事に新たな魅力が加わります。慣れてくれば、動画を撮って、編集する作業自体が楽しいものになってきます。今回の連載が、これから動画を作ってみたいとお考えの方に少しでもお役に立てましたら、これ以上ない喜びです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です