今風なメッセージ表現例

概要

この記事はメッセージや画像を動的に表現して人の注意を惹きつける作品の作り方について語っています。

ネオンサインなどは文字や画像を横や縦にスクロールさせるだけですが、幾何学曲線、回転、フェードイン、フェードアウトの多彩な描画について具体的に紹介しています。

ここではデジタル時代の申し子たるHTML(CSS, JavaScript)を使って作り上げていますが、曜日や時間、外気温度、照度などに連動した表現方法も可能になります。この部分は将来の拡張機能として道筋を立てるに留めています。

HTMLは古来からのテキストに加え、画像や音声を表現することを得意としており動的なコミニュケーションツールとしてその地位を不動のものとしています。

Result

百聞は一見に如かず、四季の移り変わりを詩的に表現したり、誕生日メッセージを親しい人に贈ったり、プログラミングマスター法などをまとめました。

ワンフレーズに18文字を割り当て16フレーズをサンプルとして挙げています。人生訓、励ましの言葉、囲碁・将棋上達の格言集、入学祝い、会社創業記念のメッセージ、社訓、想いを告げることば、短歌・俳句・詩の発表、学習塾のプロモーションなど利用方法は無限です。

どんなところで利用するのか

パソコンやスマホの画面、人が集まるところの宣伝媒体、パブリックビューイングで利用できます。入学祝いの文面には公開したサイトのURLアドレスを添えてお祝いを差し上げてください。

利用方法

必要な開発ツールはテキストエディタとブラウザだけです。インターネットにつながり、時刻、GPS位置などを参照できる環境が望ましいです。

サンプルコードが動作する環境

HTML5を読み込んで動作する主要ブラウザ（モダーンブラウザ）に以下のものがあります。

❶Google Chrome
❷Edge
❸Opera
❹FireFox

著作権と二次使用について

この記事（主としてプログラミングコード）は有料記事ですが、HTMLソースコードの正式購入者はこれをテンプレートにして作品を作り上げ販売するなどの二次利用が可能です。著作権者名も自前のものを明示しリリースしてください。

JavaScriptの音声・動画再生技術をマスターしてBGM付きプロメーションビデオを完成させてはいかがでしょう。ショーウインドー、パブリックビューイング等に新しい表現方法として利用され、生成発展の礎となることを祈っています。

オリジナル作品への道

オリジナル作品を作るにはテンプレートとしてHTMLソースコードを取得する方法があります。オリジナル作品にはテキストエディタの操作法とHTMLの基本知識を必要とします。

誕生日のメッセージを入学祝い用に変更するだけならばソースコードをテキストエディタにて編集するだけで十分です。HTMLの初心者はこの辺りからスタートすると良いでしょう。

18文字でワンフレーズ内に納める才覚を発揮するだけで十分です。18文字に満たない場合は句の切れ目に2バイトの絵文字で調整することができます。絵文字が3文字以上の場合はフレーズを正式な配列にします。じっくりサンプルコードを観察してください。

オリジナル作品への拡張方法

ブログやホームページに公開したり、有料サイトに掲載するためのオリジナル作品への拡張方法を示します。

①この記事のサンプルコードの役割を把握する、全体を眺める
②例題は扱いやすさを考慮し、html, css, JavaScript が一体化になっている
③HTMLビギナーならば制御部分には手を加えず、データのみを改変する
④拡張子をhtml、例えばsample.htmlファイルを用意する
⑤このファイルをモダーンブラウザで実行する
⑥データ部が18文字を超えたら表示が乱れるので短縮する
⑦18文字未満でも表示は乱れるので2バイトの絵文字を加える、❓❗⛄⚾
⑧正常動作が確認できたら他を少しずつ変更する
⑨必ず元のファイルは温存し、新規ファイルは新しいファイル名にする
⑩誤動作になったらほとんどは変更箇所が原因、変更部を見直す
⑪仕様を追加するにはHTML言語の基礎知識を紐解く
⑫テキストサイズを小さめにして語数を増やすには三角関数を応用
⑬JavaScript文の//以降はコメントである、サンプルのコメントを熟読する
⑭HTMLはcss, JavaScriptの3つの機能をそれぞれ理解する
⑮文字化けにはcharsetを確認する
⑯誤動作になったら１つ前に正常動作してファイルに戻り、再考する
⑰行き詰まったら熟達者に援助を求める
⑱プログラムコードが大きくなったら、使いやすいテキストエディタ採用
⑲プログラミング教則本を見直す
⑳言語のバグなども疑ってみよう

余談

番号のついて項目の説明はである調、その他はです・ます調です。

プログラミングコード

以下にHTMLプログラミングコードを載せます。コードはほとんどの行がコメントが付きです。コメントはコードの読解に有益です。charsetはUTF-8です。UniCodeを扱うことができるのでShiftJisより一般的です。フリーソフトのサクラエディタで自在に編集できました。主要モダーンブラウザ( chrome, edge, firefix, opera)で動作することでしょう。

サンプルコードはそれなりに何度も校正が加えられたものです。これを土台にしてアッと驚くオリジナル作品を作り上げ公開、有料頒布してください。

ご自身の引き出しを大きくして、創造性に満ちた生活ライフを送られますように願っています。