おさらい

前回はHTMLについて何も知らないとこらからスタートして動作させる例をあげました。表示したい文言をテキストファイルにし、拡張子をhtmlにしてファイルに保存するだけでした。今回はこれらを拡張して高級化を図ります。

拡張子（かくちょうし）

その前に拡張子について考えます。拡張子とは、ファイルの種類を識別するために使われるファイルの末尾にある「.（ピリオド） + 英数字3文字」のことです。今では英数字3文字に限定されることはありません。例えば、テキストファイルだと「.txt」、HTMLファイルだと「.html」が拡張子です。

ファイルの扱いに慣れてくると拡張子を気にすることがなくなりますが、拡張子を明示的に表示する方法を示します。

ファイル名がABCD.TXTの場合、Windows10ではABCDと表示され、ABCD.DOCなどと区別しにくいことがあります。

拡張子をも含めて表示させるには『Windows10 – ファイルの拡張子を表示/非表示にする』 などを参照ください。

拡張子はアプリケーションに関連を明示するものです。数を数える際の数詞のような役割を持ち、相応しいアプリケーションの起動を手助けします。

機能の追加

前回に追加する機能を示します。

①文字に色、サイズ、書体などの装飾をする。
②俳句に合ったイラスト画像を加える。
③領域に枠線を付ける。
④読みにくい漢字に振り仮名をふる。
⑤バージョン情報を付ける。

領域に枠線を付ける部分は枠線なしになっています。コピペするときに、border:0pxをborder:1pxに２ヶ所、変更します。

俳句を表示する

HTMLコード

<div style="width:240px; height:70px; font-size:22px; font-family:serif; font-weight:bold; color:blue; border:0px solid orange;">
<p>小林一茶の俳句　二首</p>
</div>
<div style="float:left; width:240px; height:490px; font-size:32px; border:0px solid maroon; line-height:1.0em;">
<p style="color:green;">
やせ蛙<br /><br />
　負けるな一茶<br /><br />
　　これにあり</p>
<br /><p style="color:purple;">
春雨に<br /><br />
　<ruby>大欠伸<rt>おおあくび</rt></ruby>する<br /><br />
　　美人かな</p>
<p><span style="font-size:12px; color:navy; font-weight:bold;">&copy;TacM,2018 Ver0.01</span></p>
</div>
<div><img src="https://aidesign.lolipop.jp/wp-content/uploads/2017/04/frog3-300x284.png" width="264" height="250"/></div>
<div><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/akubi.png" width="250" height="250"/></div>

あとがき

今回は16行のHtmlコードですが、満足のいく仕上がりになるまで結構な時間がかかりました。慣れれば短時間で作成できるようになります。完成品を少しずつ手直しして所望するものに仕上げる際の速成方法に応用してください。

はじめに

HTMLやJavaScriptで文字や画像をローカル環境（公開サーバー上でない自分だけの動作環境）で表示・描画するには、拡張子がhtmlのテキストファイルを作成します。

小林一茶の俳句を画面に表示させるには以下のようなファイルを作ります。ファイル名はyasegaeru.htmlなどとします。

《yasegaeru.html》HTML言語

やせ蛙　負けるな一茶　ここにあり

同じようなことをC言語での記述は以下のようでありました。

《yasegaeru.C》C言語

#include <stdio.h>
int main(int argc, char *args[])
{
    printf("やせ蛙　負けるな一茶　ここにあり\n");
    return 0;
}

　

2つを比較するとCに較べHTMLでは前提条件は何もなく、表示内容を記述するだけです。強いてあげればhtmlというファイル拡張子だけです。

yasegaeru.htmlを作成しエクスプローラーなどでJavaScriptコードを実行し、やせ蛙　負けるな一茶　ここにありが表示されたら、あなたは立派なHTML(Javascript)の習得者です。

初めてHTMLやJavaScriptを扱うのならば、実際に動作させて自信を深め自分の血肉にしてください。

少しずつ進化

これらを少しずつ進化させます。本文だけでも構いませんが拡張したり高級化のために本文を＜p＞＜/p＞で囲みます。<や>は本来、半角文字ですが説明のために全角文字を使っています。ブログ記事はHTML言語を用いて記述しており、要素に用いる記号文字に半角文字を使うと表示が乱れるので便宜的に全角文字を用います。

加えて、＜div＞＜/div＞で大きく囲みます。divはdivisionを省略したものであり領域を定義します。

本文は通常サイズで補足説明は小さな文字で表示する場合、有効領域をブロックとして定義します。このような場合にdiv要素を使います。これらの改良コードと実行例を以下に示します。

yasegaeru1.htmlは最初の例と大差ありませんがp要素により段落として定義しています。<や>により囲まれた単語は要素、タグと呼ばれ特別な働きをしますが、ここでは多くを語りません。

改良コードと実行例

《yasegaeru1.html》

<div>
<p>やせ蛙　負けるな一茶　ここにあり</p>
</div>

《yasegaeru2.html》

<div>
<p>小林一茶の俳句　二首</p>
</div>
<div style="font-size:28px">
<p>やせ蛙　負けるな一茶　ここにあり</p>
<p>春雨に　大欠伸（おおあくび）する　美人かな</p>
</div>

※※※※※※※※※※※※※※※※※※※※※※※※※

《yasegaeru1.html》 《yasegaeru2.html》

今回のまとめ

今回はHTMLにより、実際にプログラムコードを作成し実行させてみました。divとp要素を使った単純な例です。

HTMLには多くの要素(タグ）が用意されており、これらを縦横無尽に使いこなしたときに熟達者と呼ばれることでしょう。次回は定番の例題を味のあるものに変身させてみます。

上述しましたが、既存のものに手を加えて応用し、少しずつ力を付けていきます。車を勝手に改造し公道を走らせることは許されません。これに対し、自由に改造して成長できることはなんと恵まれたことでしょう。

テキストファイル、拡張子とは何ぞやについては端折って語っていません。厳密に詳細に語るのは容易ではありません。100％理解できなくても前に進み、後に振り返るのも一方法です。次回以降で触れる機会があることでしょう。

余禄

古い人間には「やせ蛙　負けるな一茶　ここにあり」と記憶していますが、最近では『やせ蛙　負けるな一茶　これにあり』と記されることが多くなっています。

早春の風景

先日、背景画像の上を早春の歌詞がスクロールする記事を作りました。今回は詞を固定しバックの画像をスクロールしています。

早春の候、もうすぐ新しい旅たちに別れもあります。少し切ないですがゴンドラの唄と冬から春への3風景をお贈りします。

ボーとしていても歳は取ります。外見はいずれ衰え老醜（ろうしゅう）をさらすことになります。内面を磨いたら落ち込みをカバーできるでしょうか。

　

隆盛を極める電子書籍

今や形あるものが見えないものに押されっぱなしです。新聞、雑誌は紙媒体から電子媒体に移行しつつあります。電子媒体は経費が掛からず、発行速度が格段に優れています。

信じてもらえないかも知れませんが、はるか昔、当日のプロ野球ナイター結果が報じられるのは翌日の夕刊というありさまでした。

当初は歌手でしたが芸能プロダクション社長として名をはせた山田太郎氏が歌った《新聞少年》の歌詞は何のことか理解できない時代が間もなく到来しそうです。

手紙も電子書籍にすれば、本体を送らずともそれを記憶した管理先のアドレスを知らせればよいのです。

電子書籍を読む

新しいものが普及するには本体が優れたものであることはもちろんですが、周辺環境が整うことが必須です。電子書籍においてはそれを読むツールがイマイチです。先日、雑誌を滑らかにめくるで自動マガジンリーダーについて語りました。滑らかさが不足していたので改良した使用例をまとめました。参照先はturn.jsです。

自動読込みにした場合、めくり動作の表示が地味な感じだったので派手にしました。ライブラリー参照時のオプション設定が可能か調査しましたが発見できなかったので、直接ソースコード(turn.js)を変更しました。turnOptionsにあるduration[Duration of transition in milliseconds]のdurationを600から2400に変更したところ、ゆっくりしためくり動作になりました。

夢のよう拡張理念

まだ作り始めたばかりなので、多くを望むことはできません。ページを順にめくったり戻したりが基本機能です。全体を斜め読みする自動読込み機能が付いています。ダイレクトに指定したページに飛ぶ機能や音声による指定は未実装です。音声入力は一人の書斎ならば問題ありませんが、図書館などでは不都合です。

いまでは、考えていることをロボットなどに伝える技術が実用化されつつあるようです。念力によるページめくりを目標にしていますが、呪詛（じゅそ）などは非科学的なものと考え信じていません。

納得いく機能にまとまったらソースコードなども公開できるようになるかもしれません。

動作例

進化版 ©TacM,2018 Ver0.03 　

真心と下心

心がこもってない形ばかりの礼儀を虚礼といいます。一方、相手に対する敬意がこもった礼を実礼と呼びたいです。その他、心にもいろいろあるようです。ある4コマ漫画で『真心を込めてお歳暮』を先頭の一文字に紙を貼り『下心を込めてお歳暮』という作品を見たことがあります。クリックボタンを押すとめくり効果でキャッチコピーが変化します。

 ©TacM,2018 Ver0.01
名言・迷言・格言・至言

　

『虚礼廃止』という掛け声を鵜呑みにして、面倒くさいことを避けたがります。定年退職すると届く年賀状が激減すると言われます。

減少率で人望度を推し量ることができます。人は損得勘定で動く動物です。

歳を重ねるほど付き合いは減るので本当はお金のかからない手間を惜しんではならないのですが、多く（小人）はそこを端折ってしまいます。大人物になる人とここが違うのでしょうか。

プレゼントや贈答

お世話になった方への贈答は難しいです。高価な贈り物はなにがしかのもくろみが込められています。上司や担任の先生への贈り物など邪心がないとは言い切れません。
お世話になったお礼ならば、成績や進路に影響を与えることができませんが、卒業後がいいと言われています。感謝は見返りを求めるものではありません。定かではありませんが六年間で一度、三年後に一度贈ったような記憶があります。

大昔は病院にかかるにも菓子折りなどを持っていきました。景品の多寡で診療に差をつけることは民主化とはかけ離れている行為であり、今ではプレゼント合戦はなくなったようです。

お金が余って使い道がないときは、退院後、落ち着いた時期にお礼したり行政機関に寄付するといいでしょう。

季節の挨拶

お中元、お歳暮、暑中見舞い、年賀状などの季節の挨拶は本来、虚礼とは無関係だったことでしょう。

日ごろ余裕がなく年に1～2回の挨拶で親交を継続する手段が時節のお礼であったことでしょう。それが過熱してあらぬ方向に変わっていきました。

62円、82円で年2回ほどの挨拶は日本古来の『歳時記のある暮らし』、『和みの暮らし』の一つといえましょう。費やす金額が100円にも満たないのだから虚礼からは程遠いのではないでしょうか。

美しいページめくり

パソコンの出荷台数が減少してスマホが右肩上がりに増えています。一方、媒体別広告費をみると新聞、雑誌が元気がなくインターネット関連の伸びが堅調です。

これらの傾向を反映して電子書籍が市民権を得て、多くの人々の手に触れる機会が増えています。

そこで、雑誌をめくるように美しくページをめくれないものかと探した顛末をTurn.jsを中心に備忘録としてまとめておきます。

プラグインツール

プラグインツールとは、エアコンの付いている車が少なかった時代に、外付けでエアコンを付けるようなあんばいで、有料・無料のツールをスマホやパソコンに組み込んで機能の大きな製品に作り上げるものです。

電子本のページをめくるツールは以前からあり、紙芝居やぱらぱら漫画のように切り替えるものが一般的でした。写真を対象にしたスライドショーでは前の画像の余韻を残しつつ次の画像を映し出すものや画面と画面の間に切り替え効果を挿入できる高度なものまでそろっています。

プラグインツールにはシステム内に組み込まれ、その効能が全体に及ぶものと、個別に働くものと複数あります。Wordpressのプラグインは前者に当たり、GitHubのライブラリーではそれを利用しているプログラムにのみ波及されます。

ほとんど無料で公開されている

新しいツールは先駆者が、人的、経済的資源・資産を投入して開発し、創業者利益を得て多くの人々に広めます。

世界の研究者は便利なものに心を奪われるので、研究対象に選びます。また、利用者は高すぎるツールに疑問を抱き始めます。

研究者は先駆者のアイデアを使わせてもらうことがあり、自分のアイデアを公開することが多いです。

それらをサポートする会社や組織があり、新しいことに挑戦するときにはGitHubなどを参照するといいでしょう。

【5分でわかる】GitHubとは？概要やメリットを簡単解説！がGitHubについて解説しています。一読をおすすめします。

この度は雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」をダウンロードしてアプリに組み込みました。

拡張利用法

電子書籍を読むにはキンドルリーダーのようなアプリを利用しますが、このturn.jsを用いてかゆいところに手が届くような文書リーダーが可能になります。パソコンのマウスでは少し扱いにくいです。試していませんがスマホのタップは軽快でしょうか。

パソコンではマウスオーバー（マウスホバー）がよいのではないだろうか。ソースコードがそろっているので、音声入力で「次！」、「戻る」を認識してページめくりできるように改訂することも可能です。また、自動的にマガジンを読む仕組みは写真のスライドショーに応用することが可能です。

動作例

 ©TacM,2018 Ver0.04

2月の風物詩

雪を見ながら野趣（やしゅ）いっぱいの露天風呂に浸る。

画像の概要と拡張方法

ここでは10種類の動物をまとめた集合画像を用意し、それを1つずつ取り出し縮小サイズから徐々に大きく拡大表示して2倍の拡大率になるまで継続します。

そして動物の鳴き声を出力するには、10種のaudio要素に音声データを用意します。

26行目の動物に対応する変数vを使って鳴き声を鳴動します。今回は仮の音声データとして3種のファンファーレを鳴らしています。

動作例

10種類の動物を0.5倍のサイズから2倍まで拡大して順に描画します。開始ボタンを押下してスタートさせます。

開始 ❼whale  ©TacM,2018 Ver0.02　scale=2.0

動物を描画するプログラミングコード

<html>
<body>
<button onclick="setClip(0);">開始</button>&nbsp;<span id="num" style="color:red">&#x277c;whale</span>
<span style="font-size:10px">&nbsp;&copy;TacM,2018 Ver0.02　</span>scale=<span style="font-size:16px; color:lime" id='scl'>2.0</span><br />
<div style="position:relative; width:750px; height:300px; border:0px solid gray; overflow:hidden;">
<img id="sample" width="750px" height="300px" style="position:absolute; top:-150px; left:-220px; transform:scale(2.0);
 clip:rect(150px,450px,300px,300px)" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
<audio id="s0" src="https://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf0.mp3"></audio>
<audio id="s1" src="https://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf1.mp3"></audio>
<audio id="s2" src="https://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf2.mp3"></audio>
</body>
<script type="text/javascript" charset="Shift_JIS">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'Lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'Hippopotamus'];
const rectT=[	//GenClip3.html
'rect(  0px, 150px, 150px,   0px)', 'rect(  0px, 300px, 150px, 150px)', 'rect(  0px, 450px, 150px, 300px)', 'rect(  0px, 600px, 150px, 450px)',
'rect(  0px, 750px, 150px, 600px)', 'rect(150px, 150px, 300px,   0px)', 'rect(150px, 300px, 300px, 150px)', 'rect(150px, 450px, 300px, 300px)',
'rect(150px, 600px, 300px, 450px)', 'rect(150px, 750px, 300px, 600px)'];
var v = 0;
var r = s = 500;		//0.5;
var p = document.getElementById( "sample" );

function setClip(f){
 if(f==0){
  document.getElementById("num").innerHTML = "\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1)+animal_10[v];
  document.getElementById("s"+(v%3)).play();				//music on, 鳴き声を出力する場合、ここに設置する。
  console.log("setClip:%d", v);
 }
 document.getElementById("scl").innerHTML = s = r / 1000;	//0.5～2.0
 p.style.transform = "scale(" + s + ")";					//scale
 p.style.clip = rectT[v];
 top1 = 150*s*(1-Math.floor(v/5)) - 150 + 'px';				//縦位置を調整
 p.style.top = top1;
 left = 380*(s-1)-(v%5)*150*s+'px';							//横位置を調整
 p.style.left = left;										//console.log("V="+v+" : "+rectT[v]+" "+top1+" "+left);
 if(++r <= 2000) setTimeout(setClip, 5, 1);					//1はsetClipの引数
 else{
   r = 500;
   if(++v < 10) setTimeout(setClip, 1000, 0);				//0はsetClipの引数
   else v=0;
 }
}
</script>
</html>