目白の風景、40年前と見比べると

前回の「マイコンレーサー」（動画入り）の続きです。

ここでは、htmlを自分では書かずに、
アサブロに動画を組み込む（埋め込む）方法を紹介します。
十数年前にhtmlの初歩をかじっただけの私でも、何とかできました。
より良い方法が他にもあるとは思います。

事前にYouTubeのアカウントを取得して、
マイチャンネルに動画をUPしておきます。
私は姓は「ター」、名は「坊」のアカウント名にしたら、
意図通り「ター坊」と表示してくれることもあり、「坊ター」だったりしています。
佐藤一郎さんが一郎佐藤さんだったりするのと同じですね。
でも、坊ターはちょっと間抜けっぽいです。

さて本題に戻り、アサブロにログインして記事を書きます。
管理画面の「記事の作成・編集」では、
多くの方がそうしているように、「エディタで新規作成」を選びます。

普通に記事を書いて、静止画も普通にUPして行きます。

動画を除いた部分の記事作成が済んだら、
編集原稿として、公開せずに保存しておきます。
（下書きですので、いずれ削除します）
その記事を編集モードで再度開き、次のようにしてソースを見ます。

MacのFirefoxの場合は、
Fileメニューから、「ツール」→「Web開発」→「ページのソース」と辿ります。
WindowsのInternetExplorerであれば、
Fileメニューから、「表示」→「ソース」です。

該当ページのhtmlソースが次のように表示されるので、
そのうちの「本文」に該当する一行（かなり横長）を見つけてコピーします。

テキストエディットを開いて、
先ほどコピーした「本文」のhtmlソースをペーストします。
こういう状態になります。

YouTubeのマイチャンネルに行って、使いたい動画を表示させます。
動画の上を右クリックして「埋め込みHTMLをコピー」を選びます。
次の画面になりますので、中央に表示された文字列をコピーします。

テキストエディットにペーストした「本文」の中の動画を埋め込みたい場所に、
先ほどYouTubeでコピーした「埋め込みHTML」をペーストします。
下図の白抜き部分がそれです。

ここでは見易くなるように、事前に適宜改行を入れています。
<BR>の文字列の前後で改行する分には問題は起きなさそうです。
動画の画面サイズを指示したい場合は、埋め込みHTMLのうち、
width="○○○" height="○○○"の部分の数字を変えます。
上の例では、480と292にしています。
また、src=“http://www.youtube.com/embed/********”の部分で、
src=“http://www.youtube.com/embed/********?rel=0”というふうに、
“?rel=0” の文字列を、おまじない的に末尾に追加しておくと、
動画の再生が終了した時に表示される「関連動画の紹介」が非表示になります。
スッキリするのでお勧めです。

次にアサブロ管理画面に戻って、
「記事の作成・編集」で、エディタでない方の「新規作成」を選びます。
必要事項を適宜記入し、下の画像のように、
・記事本文の欄に、テキストエディットのhtmlソース全文をペーストします。
・記事の記述方式欄で、HTMLを選びます。

全て済んだら、「公開」ボタンを押せば完了です。
公開前に動画もプレビューできれば良いのですが、
残念なことに、この作成・編集画面では、「プレビュー」ボタンを押しても、
静止画のみ表示して、動画は表示されません。
正しく作成できている事を祈って、「公開」ボタンを押しましょう。

それから、最初にアサブロエディタで作った下書きを削除しておきます。
削除しても、UPした画像はそのままサーバに残るので支障はありません。
（終り）