新装開店の贈り物

このたび、知人がスナックを開業した記念のお祝いにセールス用の動画を進呈することを想定し作品を制作しました。連絡先や店の周辺情報はお知らせにあるホームページのURLアドレスからたどっていただくことにして、店の概要をネット時代にふさわしく動画風に仕立て上げています。

作品の概要

本作品はSVG(Scalable Vector Graphics)を採用してきめ細かな幾何学模様を表現しています。三葉曲線は正葉曲線の一つで葉が3枚からなるバラ曲線とも称されることがあります。

曲線は三角関数を参照し動径を変えて重ね書きすることによって閲覧者にインパクトを与えています。

三葉曲線の算出式

x=(a-b)cosθ+c･cos((a-b)/bθ)
y=(a-b)sinθ-c･sin((a-b)/bθ)　　(θ: 0～2π)
三葉曲線のパラメーター：a=1/1, b=1/3, c=1/2

見ているものへ刺激を与えるために、時間差表示、回転、色を変えています。

今ではテレビにおいてもよく見られる光景ですが、ホームページなどを閲覧するためのURLアドレスはQRコードを使っています。

この記事の仮のURLアドレスは、https://xxxxxx.com ですがQRコードの画像を右に表示しています。URLアドレスにパラメータを付けると長い桁数になり、入力ミスを引き起こしやすくなります。こういう場合にQRコードが力を発揮します。

テキストデータをQRコードに無料で変換してくれるサイトが数多くあります。サイトにアクセスしてQRコード画像をダウンロードして使います。

実存する住所・ホームページアドレス

動くキャッチコピーを表現するプログラミングコードはHTML言語を用いています。コードを入手して実際の社名・店名、ホームページアドレス、ロゴマークに加えて気の利いたキャッチコピーを織り込んで営業促進に役立ててください。

終わりの前に

この記事はネット時代の魁としてご利用いただけたらありがたいです。プログラムコードは100行あまりながらdiv, svgをはじめとする様々な要素を使いつつ、setTimeoutを用いた遅延処理、アニメーション、アニメーション完了イベントなどJavaScriptが所有する貴重な関数を駆使して記述されています。

スナック名として『シンビジウム』の花言葉《深窓の麗人》を仮の名前にしてあります。ネット社会が充実するまでは商売を始めるときには印刷したハガキを知人や関係者に郵送したものです。今ではLINEなどで連絡することが当たり前になっています。HTMLはまず、教養として理解されますようにご期待申し上げます。

お願い

記事を系統的に読んでいただけたら最高にありがたいです。記事は１回で完結が原則ですが、前後につながりがあると説明上のくどさを省くためにはしょることがありますので、前後の記事も閲覧していただけたら最高です！

コードと参照画像などについて

次項にHTMLコードを載せますが、画像ファイルを参照しています。画像ファイルは筆者が管理する公開レンタルサーバー上のものがほとんどです。このサーバーは今年の契約期限には新規に更新しましたのでしばらくは安泰ですが、長期の保証はできないことをご理解いただきたく存じます。最悪、画像が表示されない場合は冒頭の動画をご覧いただきたく存じます。

コード