『しらぎくさいとアメブロ出張所』だったブログ -2ページ目

アメブロに自作動画を載せるには

制約だらけのアメブロですが、その気になれば自作の動画を乗せる事も不可能ではありません。

実際、制作者は昨日自作の動画をアメブロに掲載しております。

確かに、ユーテューブ等で共有する動画であれば恐らく誰でもすぐアメブロに載せられると思われます。

今回は、共有サイトに置いていない動画をアメブロに掲載する方法を説明します。

  • もっとも、こう言う事が易々と出来る方は制約でガチガチに固められたアメブロなど使いたいとも思わないでしょう。サイバーエージェント社ご自慢の SEO にしても末端ユーザは殆ど恩恵を受けられませんし。

動画の必須条件

アメブロに載せる動画は、以下の要件を満たす必要があります:

H.264 コーデックの MPEG4 動画である事

加えて、スマートフォンを考慮すると

  • ベースラインプロファイル
  • レヴェルは 3.0以内

にしないといけません。

TLS/SSL(HTTPS)で配信する事

アメブロ自身も TLS を使っており、非 TLS で配信すると混合コンテンツとなって問題が生じます。

TLS に対応している WWW サーヴァを選び、そこから動画を配信しましょう。


動画の埋め込み方(基本編)

動画を埋め込むには、アメブロのエディタを PC で開いて HYML表示 に切替える必要があります。

また、アメブロのエディタには変な癖があるので、メモ帳でも良いですから予めローカルで HTML を編集してそれをエディタに貼り付ける方が良いでしょう。

貼り付ける HTML は以下の通りです。

日本語で書いている部分は、適切な URL や数値を指定してください。

<div>
    <video src="①動画のURL" poster="②サムネ画像のURL" width="③動画の横幅"  height="④動画の高さ" controls="controls">
        <img alt="" src="②サムネ画像のURL" width="⑤サムネ画像の幅"  height="⑥サムネ画像の高さ">
        </video>
   </div>

この例では、フィーチャフォンなど動画に対応していない環境でもサムネ画像を代替として表示するようにしております。

ここで、サムネ画像について、幾つか補足します:

  • <video>要素poster 属性で示されるサムネ画像は、動画を再生するまで表示される画像です。

    • 動画再生後は最後の一コマで静止した状態となりますので、最後の一コマをサムネ画像と同じものにする事も考えられます。
  • サムネ画像の解像度が動画と異なる場合は、動画の解像度に合わせて適宜拡大縮小されます。

    また、サムネ画像にアニメーテッド GIF 画像を用いた場合は、閲覧者が再生ボタンを押すまでアニメーテッドが表示されます。

  • サムネ画像は動画配信サーヴァに置いても良いのですが、アメブロでの記事一覧などでサムネイルとして使える画像はアメブロにアップロードしたものに限られるため、少なくとも<img>要素で埋め込む画像はアメブロにアップロードしておく必要があります。

動画の埋め込み方(高度なマークアップ)

グーグル検索で利用される構造化データをアメブロで使うのは非常に難しいものです。

と言うのも、アメブロでは<meta>要素, <link>要素, <script>要素のいずれも禁止されているからです。

このため、強引にテキストに構造化データとなるテキストを書き込んでそれらを構造化データとしてマークアップするしか無いでしょう。

  • 一部要素については属性値を構造家データとするものもあります(後述)。

動画の場合には必須プロパティが幾つか定められておりますが、以下のようにする事で強引にですが一通り記述出来ます:

<div itemscope="itemscope" itemtype="http://schema.org/VideoObject">
    <div>
        <video itemprop="contentUrl" poster="①" src="②" width="③" height="④" controls="controls">
            <a itemprop="thumbnailUrl" href="①"><img alt="『⑤』のサムネイル画像" src="⑥" width="⑦" height="⑧"></a>
                <img alt="『⑤』のサムネイル画像" src="⑥" width="⑦" height="⑧">
                </a>
            </video>
        </div>
    <p><time itemprop="uploadDate" datetime="⑨">⑩</time>に制作した動画『<cite itemprop="name">⑤</cite>』です。</p>
    <div itemprop="dsescription"></div>
</div>
①サムネイル画像へのURL(必須プロパティ)
外部サーヴァにアップロードしたものでも、アメブロにアップロードしたものでも構いません。初めに述べた通り、外部サーヴァの場合は HTTPS で配信します。
②動画へのURL(必須プロパティ)
初めに述べた通り HTTPS で配信します。
③動画の横幅
ピクセル数で指定します。
④動画の高さ
これもピクセル数で指定します。
⑤動画の題名(必須プロパティ)
アメブロに上げたサムネイル画像への URL
アメブロの記事一覧等に表示されるサムネ画像は、アメブロにアップロードした画像しか扱えません。
⑦サムネイル画像の横幅
⑧サムネイル画像の高さ
動画と一致していなくても構いません。
⑨動画アップロード日(必須プロパティ)

グーグルが認識する形式「年号四桁-月二桁-日二桁」の形で記述します。

例えば令和 2年 1月14日であれば「2020-01-14」となります。

⑩動画アップロード日を表す文字列

こちらは読者が認識するものですので、和暦でも西暦でもお好きなフォーマットで記述可能です。

それこそ、例えばアップロード日が昨日であれば「昨日」でも構いません。

⑪動画の説明文(必須プロパティ)
複数段落に跨っても問題ありません。

一般に、構造化データとしてマークアップされるのはテキストそのものとなりますが、

の値が構造化データとして扱われます。

成人式に向かう堀北真希うさぎと史子ちゃん(山下史子) (令和 2年 1月13日)

にピクシヴなどに投稿したイラスト・『成人式に向かう堀北真希うさぎと史子ちゃん(山下史子)』です。

  • イラストの動画化のため、音声は入らない無声動画となります。

創作キャラクタ・堀北真希うさぎ史子ちゃん(山下史子)はさいたま市に住んでおり、今年度二十歳となります。

  • 実際には毎年度年齢を巻戻しているため、毎年成人式企画を行っておりますが。

このため、堀北真希うさぎと史子ちゃんは成人式に参加する事となり、二人で一緒に会場に行く事にしました。

動画の内容は、美容室で着付けを終えた堀北真希うさぎが待合せ場所で史子ちゃんと逢って会場に行き、会場の前で記念撮影を行うと言うものです。


こちらはに作り直した仮想コマーシャルうごイラ・『堀北真希うさぎで『マイティア CL』「ソフトでも、ハードでも♪」』です。

  • 音楽著作権問題のため、音声は入らない無声動画となります。

元ネタは昭和55年(西暦1980年)に放映された『マイティア CL』の新発売コマーシャルです。

ユーテューブには何故か映像を静止画に差替えられ CM ソングだけが共有されており、千寿製薬のサイトなどにも載っておりません。

ユーテューブにある昔のコマーシャル関連動画からも探していますが未だに見つけられずにおります。

このため、制作者の不確かな記憶を元に真似ております。

舞台はある女子大学の講義室で、聴講している女の子が全員コンタクトレンズを使っていると言う設定です。

当時はまだ使い捨てソフトレンズがなかっため、ハードレンズの愛用者のほうが遙かに多かったのですが、二本初のソフトレンズ対応目薬と言う事で、ソフトレンズ派とハードレンズ派を半々にし「ソフトでも、ハードでも♪」と言うキャッチコピーと CM ソングで表しております。

一月の週末、鏡開きのおしるこを外出前に食べている史子ちゃん(山下史子) (令和 2年 1月11日

「一月の週末、鏡開きのおしるこを外出前に食べている史子ちゃん(山下史子) (令和 2年 1月11日)」の画像

令和 2年 1月11日にピクシヴなどに投稿したイラスト・『一月の週末、鏡開きのおしるこを外出前に食べている史子ちゃん(山下史子)』です。

史子ちゃんも創作キャラクタの一人で、大学時代の同期の女の子がモデルです。

イラストでは史子ちゃんが三連休の一日目の午後にアルバイトに行くため、その前にお昼代わりに描かみ開きしたおしるこを食べているところです。

一月の三連休前の金曜の夜、帰宅してコートを脱いでいる堀北真希うさぎ(令和 2年 1月10日)

「一月の三連休前の金曜の夜、帰宅してコートを脱いでいる堀北真希うさぎ(令和 2年 1月10日)」の画像

令和 2年 1月 9日にピクシヴなどに投稿したイラスト・『一月の三連休前の金曜の夜、帰宅してコートを脱いでいる堀北真希うさぎ』です。

令和 2年 1月10日は令和 2年初の平日である金曜日で、しかも三連休前と言う事でこの絵を描きました。

堀北真希うさぎは大学二年生と言う設定ですので、実質的にはまだ冬休みが続いておりますが、この日は用事で外に出ておりました。

堀北真希うさぎは家に帰ってきてコートを脱いでおります。

尚、堀北真希うさぎは毎年度年齢を十九歳に巻戻しており、このため月曜日は成人式に出る事になるため三連休とはなりません。

寒い一月の放課後、教室のストーヴの前で同級生を待っているねこ耳中学生(令和 2年 1月 9日)

一時期放置していたアメブロ出張所跡地ですが、令和 2年に入ってからほぼ毎日更新しております。

但し、メインブログではないため、あちらには載せてもこちらには載せない作品もあります。


「寒い一月の放課後、教室のストーヴの前で同級生を待っているねこ耳中学生(令和 2年 1月 9日)」の画像

令和 2年 1月 9日にピクシヴなどに投稿したイラスト・『寒い一月の放課後、教室のストーヴの前で同級生を待っているねこ耳中学生』です。

寒い日が続いているので、この絵を描きました。

ねこ耳中学生は制作者の創作キャラクタの一人で、高校時代茶道部長だった同期の女の子がモデルです。

  • 当然、ねこ耳中学生も茶道部員と言う設定にしております。

ネコは寒さに弱い動物であるため、ねこ耳中学生は特に寒さに弱いと言う設定になっております。

このため、イラストではねこ耳中学生が放課後教室のストーヴの前に立って、同級生が戻ってくるのを待っていると言う内容にしております。

ただ、空気が乾いて目も乾くらしく、ねこ耳中学生は目薬を差していたようです。

  • この娘は他の女の子たちと違ってハードコンタクトを使っているため、他の女の子と目の描き方が異なります。

一月初めの新学期の朝の教室でのあいちゃん(井出愛美)と美香ちゃん(鈴木美香) (令和 2年 1月

「一月初めの新学期の朝の教室でのあいちゃん(井出愛美)と美香ちゃん(鈴木美香) (令和 2年 1月 8日)」の画像

令和 2年 1月 7日にピクシヴなどに投稿したイラスト・『一月初めの新学期の朝の教室でのあいちゃん(井出愛美)と美香ちゃん(鈴木美香)』です。

令和 2年 1月 8日、小中高校では冬休みが終わって新学期に入ったのでこの絵を描きました。

左の女の子はあいちゃん(井出愛美)で、右の娘は美香ちゃん(鈴木美香)。いずれも制作者の創作キャラクタです。

あいちゃんは昔住んでいた場所の近所に越してきた女の子がモデルで、その娘は転居後も転校せずバスでも解いた中学校に通っておりました。

一方美香ちゃんはモデルはおらず、"現代の学級委員"をコンセプトに考えたキャラクタです。

学級委員と言えば三つ編みに眼鏡がステレオタイプなイメージですが、眼鏡の代わりに使い捨てコンタクトを使っている設定にしております。

イラストは、新学期の朝教室に着いたあいちゃんと、既に教室に着いている美香ちゃんです。

美香ちゃんは既に教室に着いているため、コートを脱いで制服姿になっております。


例年創作キャラクタの年賀うごイラでは他のキャラクタと一緒にあいちゃんを出すのですが、令和 2年は時間がなかったためあいちゃんは出せませんでした。

冬休み最終日、神田明神に初詣に来ている小泉花陽ちゃん(『ラブライブ!』) (令和 2年 1月 7

「冬休み最終日、神田明神に初詣に来ている小泉花陽ちゃん(『ラブライブ!』) (令和 2年 1月 7日)」の画像

令和 2年 1月 7日にピクシヴなどに投稿したイラスト・『冬休み最終日、神田明神に初詣に来ている小泉花陽ちゃん』です。

制作者は版権イラストもやっており、毎週火曜日には"火曜日かよちゃん"として"かよちん"のイラストを投稿しております。

  • 版権絵では創作絵とは目の描き方などを変えております。

"かよちん"は令和 2年年賀うごイラとしても作りたかったのですが、創作キャラクタ他の版権キャラクタでの年賀うごイラ制作を優先した為作れませんでした。

幸いまだ松の内ですので、年賀イラストとしては有効でしょう。

今回は『ラブライブ!』聖地の一つ・東京は秋葉原の外れにある神田明神に初詣に来た"かよちん"を描きました。

尚、"かよちん"はもう少し髪は短いのですが、別の版権キャラクタの影響でセミロングにアレンジしております。


ついでですので、過去に描いた"かよちん"の絵も載せておきます:

「廊下でコンタクトレンズを落としてしまい、同級生と一緒に探している小泉花陽ちゃん」の画像

昨年令和元年に描いた『ラブライブ!』小泉花陽ちゃんのイラスト・『廊下でコンタクトレンズを落としてしまい、同級生と一緒に探している小泉花陽ちゃん』です。

凛ちゃん辺り「コンタクト落としてオロオロしているかよちんも好きだにゃ」とか言うのでしょうかw

こちらはかなり前の作品なので、まだ髪をセミロング化しておりません。

新年初の平日の朝、お出掛け前にお部屋でお化粧をしている堀北真希うさぎ(令和 2年 1月 6日)

「新年初の平日の朝、お出掛け前にお部屋でお化粧をしている堀北真希うさぎ(令和 2年 1月 6日)」の画像

令和 2年 1月 6日にピクシヴなどに投稿したイラスト・『新年初の平日の朝、お出掛け前にお部屋でお化粧をしている堀北真希うさぎ』です。

  • 堀北真希うさぎは創作キャラクタの一人で、言うまでもなく堀北真希ちゃんがモデルです。

    堀北真希ちゃんにうさ耳を付けたら可愛いだろうなと思って作りました。

令和 2年 1月 6日が「仕事初め」となる方が多かったため、堀北真希うさぎの朝の身支度を描きました。

但し、堀北真希うさぎは大学生なのでまだ冬休みとなっており今回は私用で出掛けるところです。

いつものようにコンタクトレンズを装用してから、お化粧をしているところを描きました。

コンタクトケースが大きすぎると思われるかも知れませんが、ソフトコンタクトは黒目より大きいのでこの絵だとこの大きさになります。


堀北真希ちゃんは既に三十代で結婚・出産しておりますが、堀北真希うさぎはサザエさん方式で毎年度十九歳に巻き戻しております。

  • 初設定が堀北真希ちゃんが大学生となりえる平成19年11月で、以来毎年度年齢を巻き戻しております。

学校から帰って来て制服のままでおやつの苺を食べている紀子ちゃん(神崎紀子) (令和 2年 1月

「学校から帰って来て制服のままでおやつの苺を食べている紀子ちゃん(神崎紀子) (令和 2年 1月 5日)」の画像

令和 2年 1月 5日にピクシヴなどに投稿したイラスト・『学校から帰って来て制服のままでおやつの苺を食べている紀子ちゃん(神崎紀子)』です。

令和 2年 1月 5日が「いちごの日」だったため、新学期にはまだ早かったのですが学校から帰って来ておやつに苺を食べている紀子ちゃんを描きました。

本当なら家から帰ってきたら私服に着替えてコンタクトレンズも眼鏡に換えるべきなのですが、紀子ちゃんはお腹が空いていたのかそれとも苺が大好物なのか、コードだけ脱いで苺に飛び付きました。

お正月、近所の神社で巫女をしている美香ちゃん(鈴木美香) (令和 2年 1月 4日)

「お正月、近所の神社で巫女をしている美香ちゃん(鈴木美香) (令和 2年 1月 4日)」の画像

令和 2年 1月 4日にピクシヴなどに投稿したイラスト・『お正月、近所の神社で巫女をしている美香ちゃん(鈴木美香)』です。

  • 美香ちゃん(鈴木美香)は創作キャラクタの一人で、三つ編みの学級委員と言う設定です。

    "現代の学級委員"がコンセプトなので、三つ編みですが眼鏡ではなく使い捨てコンタクトを使っています。

令和 2年年賀うごイラにはメインサイト限定でおまけクリップを追加しており、巫女をしている美香ちゃんもおまけに付けたいと思っておりました。

ですが、時間が足りず結局おまけは干支の関係でメインに出せなかった堀北真希うさぎのおまけのみとなりました。

でもまだ松の内なので、今回巫女の美香ちゃんを静止画で描きました。

美香ちゃんはこの神社の神主の娘ではないのですが、神主が実父の同級生だった関係で小学生の頃から巫女になるよう頼まれていました。

小学生時代は眼鏡を掛けていたため断っていましたが、中学入学時にコンタクトデビューしてから巫女をやるようになりました。

  • もっとも、眼鏡を掛けている巫女はたまに見掛けますけどね…。

蛇足ですが、昔は"ねこ巫女美香ちゃん"と言うねこ耳ヴァージョンも描いていたのですが、現在は別にねこ耳キャラクタを設定しているため描いておりません。