Cocoon

WordPressに画面キャプチャ動画を貼り付ける方法

動画入りマニュアル作成の試み

4月から松山在住の中学生とシニアのグループを対象に、WordPressを使ったホームページ作成教室を開いています。そのためのテキストとして、紙の冊子の他に、ほぼ同じ内容のホームページをやはりWordPressで作成してきました。このたび、教室で使うWordPressテーマを、LuxeritusからCocoonに変更することになり、それに伴って、テキストも部分的に書き直すことになりました。

テキストの改訂は、Cocoonに準拠して行う必要があり、なにはともあれ、開発者のわいひらさんが運営するCocoonの公式サイトにアクセスして、使い方などを勉強しているところです。このサイトを読んでいて、「あ、これはいいな!」と思ったのは、Cocoonのサイト画面で操作方法を動画で表示させているところでした。このような動画なら、実際の操作をいちいち言葉に直してくどくどと説明する手間が省けるし、生徒が自宅で画面を見ながら自分で独学もできるでしょう。具体的なイメージが沸かない方は、わいひらさんのCocoon公式サイトをごらんください。

https://wp-cocoon.com/#toc13

このような操作手順を、適宜動画で示せば、これまでのテキストよりもはるかに効率的にホームページの作り方を習得することができるでしょう。

そこで、このような動画の作り方、WordPress画面への埋め込み方について、調べてみた結果、QuickTime PlayerというMac純正の無料ソフトを使えば、簡単に作成できることがわかりました。また、WordPress画面への埋め込みも、わずか2行のコードを入れるだけでできるということがわかりました。再生の方法も、Cocoonのサイトのように自動的にループ再生する方法と、手動で再生ボタンを押して再生する方法と2通りあることも分かりました。

Cocoonサイトのように、音の出ない動画の場合は、自動ループ式で問題ないのですが、解説のナレーションなど音声つきで再生させる場合には、自動式だとうるさかったり、複数の動画画面から音声がだぶって再生されるなどの不都合を生じると思われますので、手動再生にしたほうがいいかと思います。

以下では、音声のないばあいとある場合の二通りの動画サンプルを作成してみたいと思います。

QuickTime Playerでの動画録画

QuickTime Playerというのは、MacbookやiMacなどAppleのPCに初めからバンドルされているフリーの動画再生ソフトです。単に再生するだけではなく、パソコンに付属のカメラを使ってビデオを撮影したり、画面の動作を収録することもできます。ここでは、PC画面の動画収録機能を説明したいと思います。

QuickTime Playerの起動

まずは、PCにインストールされているQuickTimeのアイコンをクリックして、起動させます。アイコンは、こんなマークです。

次に、上部メニューの「ファイル」⇒「新規画面収録」をクリックします。

すると、「画面収録」の小さなウィンドウが表示されます。

この真ん中にある赤い丸のボタンを押すと、画面の全体あるいは一部分の領域を録画することができます。次のようなメッセージが出ますので、これに従って、全画面収録か部分領域収録かを選択します。今回のケースでは、ウェブブラウザの一部分だけを収録しますから、カーソルで収録したい領域をドラッグして選択します。

ここでは、WordPressのダッシュボードを表示させ、その一部を領域設定しました。そこで、領域の中央にある「収録開始」ボタンを押すと、録画が始まります。

録画が終わったら、PC上部メニューの録画ボタンを押して、終了します。録画した画面が表示されますから、再生ボタンで録画の結果を確認することができます。

録画を保存するには、上部メニューで「ファイル」⇒「書き出す」として、ファイルの画質を選びます。高解像度のファイルは1080P、普通の解像度は720Pを選びます。

下に示した動画は、高解像度1080Pで録画したものです。とてもきれいな動画ですね。マニュアル用の画面キャプチャなら、720Pでも十分かもしれません。

WordPress編集画面への動画の埋め込み

さて、問題は、録画した画面キャプチャの動画を、WordPressのテキストの中にどうやって埋め込むかでした。これがなかなか分からずに苦労しましたが、あるウェブサイトで、埋め込みのためのHTMLタグが紹介されていたので、これを使ってテキストエディタで入れてみたところ、あっけないほど簡単に画面を埋め込むことができました。それは、次のようなコードです(タグは全角で表示していますが、動画を表示させる場合は半角に直してください)。

<video controls autoplay loop><source src="https://medialabo.info/blog/wp-content/uploads/2018/09/Cocoon-install.mov " ></video>

動画を自動でループ再生させる場合は、赤字のように、autoplay loopを入れます。これを外すと、手動での再生になります。また、黄色のマーカー部分は、サーバーにアップロードした動画ファイルの場所を示しています。これは、編集画面で「メディアを追加」ボタンを押すことによって、ファイルのアップロードとファイルのURLの取得を行うことができます。

上の動画再生は、このHTMLタグを入れることによって可能になったものです。

ナレーションつき動画の録画と再生

上の例は、音声を入れずに、画面の動きだけを録画しましたが、よりマルチメディア的な動画テキストでは、ナレーションを入れると効果的だと思います。方法は簡単で、録画するときに、「内蔵マイク」を指定すればいいのです。

この状態で録画を開始し、ナレーションによる解説を加えながら、カーソルを動かしてテキストを作ります。

埋め込みコードは、さきほどと同じですが、音声入りなので、autoplay loopは削除して、手動再生モードにします。これだと、上の動画のように、再生ボタンが表示されますので、好きなときに動画を再生することができます。音声を消したいときは、画面のスピーカーボタンをクリックすれば、無音で再生されます。全画面表示することもできます。

このように、テキストと静止画だけでは表現することが困難な操作説明も、このような動画を使えば分かりやすく表示できるので、ウェブ上のテキストがはるかに効果を上げるものとなるでしょう。この手法をこれから随所で活用していきたいと思っています。みなさまにとってもご参考になれば幸いです。

なお、「ホームページ教室」のサイトで、さっそくQuickTime Playerで作った動画を活用しています。こちらをごらんください。

https://medialabo.info/blog/wordpress/cocoon/

長期連載:デジタル・ツールで海外旅行をフルに楽しむ法(旅行前篇)

1

最近ではネットのおかげで、自分で企画を立て、航空券やホテルの予約もオンラインのサイトで行い、お安く海外旅行を楽しむことができるようになりました。現地での小旅行やイベント参加も、かつてはパック旅行のオプションを選択するしかなかったのですが、今ではやはりネットで提供されている現地の添乗員同行ツアーを自分で申し込むことができますし、劇場のチケットなども、座席指定でオンライン予約することができます。ただ、こうした一連の準備作業は必ずしも簡単ではありませんし、きちんとしたドキュメントで整理、保存するのは容易ではありません。このブログでは、この「海外旅行プランをしっかりと管理するための情報収集、整理法」を、できるだけ詳しく、かつ分かりやすく紹介したいと思います。

2

OneNoteのいいところは、さまざまなテーマでノートブックをつくり、「セクション」「ページ」「サブページ」という階層構造で情報を収集、整理、保存できることにあります。実際に「2020年パリ旅行」のOneNoteノートブックを作成していきましょう。最初に、このノートブックで収録すべき大項目を「セクションの追加」で作成しておきます。

3

Evernoteの魅力は、Webページの内容を、もとのサイトそのままにコピーできることにあります。OneNoteのように、ページ全体をクリップすると画像ファイルに変換してしまうという問題もありません。「パリ観光」という大きなタグの下に観光に関連したタグを並べ、それぞれと関連の深い、参考になるWebページを精選して取り込めば、書籍よりも新鮮で実用性の高い「Evernote版パリ観光ガイドブック」が出来上がるでしょう。

4

WebページをEvernoteに取り込んで、自分だけの海外旅行ガイドブックを作るのは楽しいですが、クリッピングの作業が面倒な上、もとのWebページが更新されても、それを反映させることができません。そこでWebページを効率的にに収集し、容易にアクセスするためのツールとして、ブラウザのブックマークを編集して使う方法がおすすめです。

5

Googleマップは、海外旅行をする人がいちばんお世話になるスマホアプリの一つですから、その使い方を知らない人はあまりいないと思います。けれども、Googleマップの重要な機能の一つである「マイマップ」を海外旅行のツールとしてフルに使いこなしている人は少ないのではないでしょうか?ここでは、「マイマップ」が海外旅行プランの作成においていかに役立つツールかを、わかりやすく、かつ詳しくご紹介したいと思います。実際にパリを事例として作成した旅行用マイマップもお見せします。

6

ノートブックアプリOneNoteに、自分にとって必要なパリの情報だけを編集して「パリ・ガイドブック」というノートブックあるいはセクションを作って持っていけば、旅行中に大いに役立つのではないでしょうか。Kindle、honto、Koboなどの電子書籍は、好きな箇所だけをコピーして、OneNoteの好きな部分に「貼り付ける」ことが簡単にできますから、自分流「パリ観光ガイドブック」をOneNote上に簡単に作ることができます。

7

本記事では、YouTubeの「再生リスト」機能を最大限に活用して、海外旅行の観光に関する好きな動画を、テーマ別に「再生リスト」として登録し、これをオフラインのOneNote、マイマップ、ブラウザのブックマークに階層メニュー方式で取り込む方法を、YouTube登録の段階から順を追って、わかりやすく紹介したいと思います。完成までしばらくお待ち下さい。

8

海外旅行に役立つ最新ニュースや最新の現地情報は、登録したTwitterのタイムライン上に流れていますが、IFTTTというアプリを使えば、「お気に入り」(いいね!)に登録したTweetだけを、OneNoteのページに自動的に保存することができます。

9

かつては、海外旅行のガイドというと、紙のガイドブックと地図を片手に歩きまわったものですが、今や多くの観光客はスマホやタブレットを片手に、アプリに入れた地図や路線図やグルメ・アプリ、美術館ガイドのアプリなどを見ながら、自由自在に観光を楽しむことができるようになっています。この記事では、「パリ観光」を例として、観光旅行を目一杯楽しむために役立つiPhoneやAndroidのスマホ・アプリと、その使い方を紹介したいと思います。

-Cocoon

© 2021 dシニアライフ / Blog Powered by AFFINGER5