少しずつ拡張
前回、画像と文字を混在させて自由研究の一環として絵日記の作り方を示しました。今回は予告の通り、プールの喧騒の音声を加えてみます。
作成手順
音声データを設定する部分をクローズアップします。音声データは動作ブラウザがサポートする形式にする必要があり、mp3, ogg, aacなどを用意します。ここではchromeがサポートしているmp3にしています。
用意する場所はローカル環境で動作させる場合、同一のフォルダで問題ありませんが、公開サーバー上で動作する場合は、アップロードしたURLアドレスを指定します。
サンプルコード
<p><audio src="https://aidesign.lolipop.jp/wp-content/uploads/2017/08/PoolSide.mp3" autoplay controls controlsList="nodownload"></audio><span style="font-size:28px; color:skyblue">プールサイドの喧騒</span></p> <DIV style="position:relative; left:0px; top:0px;"> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="432" height="323"> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/suiyoku.png" width="99" height="130" style="position:absolute; left:290px; top:182px;"> <div style="font-size:26px; color:mediumblue; font-family:serif; position:absolute; left:30px; top:60px;"> 今日、お父さん、お母さん、<BR>僕、妹の四人でプールに出か<BR>け、はしゃぎまわりました。<BR>お父さんと競争した<BR>り、妹にはおよぎを<BR>教えました。 </div> </DIV>
HTMLコードの説明
①1行、音声データを読み込んで自動スタートを指定し、再生ボタンなどのインターフェースを表示する。次いでヘッダー文を付加する。
②2～8行、重ね書き区域を定義する。タグは大文字と小文字を区別しないが対応付けを明示するために、大文字を用いる。
③3行、ノートブックの画像を読み込む。
④4行、水浴姿の画像を読み込む。
⑤5～7行、絵日記の文章の色、フォント、書体、位置を指定する。ここのタグは小文字を用いて対応付けをわかりやすくする。＜BR＞は改行です。
⑥6行、絵日記の文章をセットする。
②2～8行、重ね書き区域を定義する。タグは大文字と小文字を区別しないが対応付けを明示するために、大文字を用いる。
③3行、ノートブックの画像を読み込む。
④4行、水浴姿の画像を読み込む。
⑤5～7行、絵日記の文章の色、フォント、書体、位置を指定する。ここのタグは小文字を用いて対応付けをわかりやすくする。＜BR＞は改行です。
⑥6行、絵日記の文章をセットする。
HTMLとは何か
かいつまんでHTMLを説明します。HTMLとは、HyperText Markup Languageの頭文字をとったものであり、タグ（要素,＜と＞）を使って通常の文字表現に加えて、画像や音声、動画、色、フォントタイプなど多彩な表現ができる仕組みのことと覚えておきましょう。ブログやホームページを作るにはHTMLを知らなければなりませんが、数種のタグの役割を理解するだけで先ずはHTML文書を作成することができます。
ここでは、p, audio, span, div, img, BRの6種のタグを使っています。ほとんどのタグはブロックを形成し、最後はスラッシュから始まるタグで閉じられます。今回のタグでBRだけが単独で使われます。
絵日記
プールサイドの喧騒
今日、お父さん、お母さん、
僕、妹の四人でプールに出か
け、はしゃぎまわりました。
お父さんと競争した
り、妹にはおよぎを
教えました。
僕、妹の四人でプールに出か
け、はしゃぎまわりました。
お父さんと競争した
り、妹にはおよぎを
教えました。
次へのステップ
今回は絵とテキストに音声を加えてみました。次回には、絵と音声を複数用意して動きのある絵日記に進化させます。