以前に予告していた、"花火"のアニメーション。
作ってみたので、ここに掲載。
これを『データ駆動Webサイト』に組み込んでみたのが以下。
サンプルのサイトの夜の海ライクなヘッダ部に花火を表示しています。
CSSアニメとして作成したもので、こんな感じに組み込んでみました。
別の告知でもしているように、楽しいサイトとなるような、いろいろな試みは今後も継続していく予定です。
ひとまずご紹介まで。
2025/06/23追記
ありゃ。できないなぁと思っていたら、実はできたんですね。ブログへのYouTube動画貼り付け。
というわけで、前回までに貼り付けていた画像も置き換えられるものは置き換えちゃいます。
今回、以下の動画を作成しました。
サービスのいくつかにもリンクを付けてあります。
内容は、ちょっと長いですが、サーバまわりについて、ぐちゃぐちゃと書いています。
（「ぐちゃぐちゃと」というのは、いろいろ考えていたら、けっこうな文章量になってしまったもので、なんとか形にはなった気がしますが、一言に集約してみると、そういう表現になってしまいました）
本サービスの価格に跳ねる多くは、サーバ環境構築にあって、できれば別のものとして取り扱いたいくらいですが、そうもいかず、また、VPSというサーバの価値の高さを知ってほしく、その観点ではあまりにも安すぎる価格設定であることをわかって欲しかったわけです。
ただ、内容を参照される方によっては、なかなか難しい内容でもあり、うまく伝えられたかは気になるところです。
いろいろ伝えたいことは多く、それをなんとかわかりやすく伝えられないかと試行錯誤を重ねていました。
作ること自体もかなり大変なのですが、やはり文章化はなかなか難しいものですね。単純に文章にはできるわけではなく、その一つ一つを短くわかりやすい単位で区切っていかないと、スライドのようなページ単位の中に埋もれていってしまいます。まだまだ修行が足りないようで、温かい目で見守っていただけると助かります。
平日の夜はそれほど時間が取れないため、今日はいったんこの辺で。またいつか編集・追記したいと思います。
ココナラのビデオチャットの手数料増額が発表されました。まだ、発注を受けたことはありませんが、この増額は大きすぎると捉えています。
このため、かなりの痛手だと考え、いっそのこと、テキストチャットへ変更しようと考えていますが、なかなか時間取れずの状況です。
ただ、上記の増額はココナラとの間の話なので、もしも発注しようとお考えの方がいらっしゃいましたら、ビデオチャットが使えるうちにお申し込みいただくのが、理解の深いやり取りができることからオススメなのかもしれません。
また、以前にもどこかに記述したように、常に現在進行形でいろいろと機能拡張を行っているのですが、どこかを改善すると、別のどこかも併せての変更が必要だったりで、公表するにはなかなかキリが悪く、お知らせできていない状況となっています。
そこで、近況報告としての状況推移、という形でお知らせしてみてはどうかと思い、このブログ記事を起こしました。
現在、以下のようなことを構想し、着々と進めています。
（この動きをお伝えしたく、うっかりYoutubeにも手を出してしまいました。販売サービス側にちゃっかり動画を追加しています。動画もなかなか大変なので、お見苦しい部分はご容赦ください。いずれはこなれていくはず✨）
・別々の表示スタイルとなる複数のグループ
・サイト表示を彩るエフェクトの追加
--
・別々の表示スタイルとなる複数のグループ構成
まず、このシステムではデータ登録により構成や振る舞いを制御できる仕組みであることと、まだ既に作成済のhtmlコンテンツがあれば、それを取り込む形で、なおかつ、特定のフォルダ構造に配置する方式であることなど、既にお伝えできていると思います。
例えば、以下のような構成パターンで、データとhtmlコンテンツを登録することができます。システムの特徴として、このように構成することはさほど難しくはないものと思っています。
URL：
{ドメイン}/dd/{test}/{aaa}/aaa1.html
{ドメイン}/dd/{test}/{aaa}/aaa2.html
{ドメイン}/dd/{test}/{bbb}/bbb1.html
{ドメイン}/dd/{test}/{bbb}/bbb2.html
{ドメイン}/dd/{test}/{ccc}/ccc1.html
{ドメイン}/dd/{test}/{ccc}/ccc2.html
そして、このシステムでは、この「特定のフォルダ構造」（≒url）ごとに異なる設定を適用（何もしなければデフォルト適用）できる仕組みとしています。
それぞれを別のグループとして扱うことができるわけですが、上記はaaa、bbb、cccといった、3種類のグループが定義された状態となります。
それは、例えば、同じ会社や団体の別の部署や小さなグループなどで、仕分けた構成とするなら、一つのサーバに複数のサイトが同居するような形ができあがります。
例えば個人であっても、その目的ごとに異なるサイト（サイトイメージや扱う内容が異なるような）を運用することができると思います。
趣味や志を共有するような、仲の良い個人が複数人集まって、共同で運用するというのも面白いと思います。
単独のサイトイメージで個人で申し込まれる場合、本サービスは個人としてはお高いと思われた方も、仲間が集まって共同で運用するサイトとするなら、コストをかなり抑えることにもなるのではないか、とも思っています。
または、表側のサイトとは別に、裏で試行錯誤を重ねるサイトを作るなどもありかもしれません。
ただし、同じDBとWebサイトを共有することとなるため、自分の担当範囲以外のデータも触れることが可能となります。
これについては、きちんと影響のないような共同作業に努めるか、DBなどは単独のDB管理要員にて管理するほうが好ましいとは思います。少なくとも相互に信頼のおける間柄である必要はあります。
この場合、デフォルトのサイトで他の子サイトへのリンクを配置して、可能なら、親→子、子→親、子→別の子などのリンクを配置するのもいいかもしれません。複数のサイト間でコラボレーションではないですが、相互に行き来可能とすることでビジネス上の相乗効果も得られるかもしれません。
一例として、例えばこんな感じです。
さっくりと作ってみましたが、サイトデザインの一番の肝となるヘッダー領域の色を変えたり、画像を配置したりなどが、すぐに思いつく手法ですが、ここでは色を変えてみました。ただし、ヘッダー部分だけでなく、メインメニュー部分の背景色も合わせて変更しています。
すると、ですが、なんとなくメニュー部分の背景が海に見えたりはしませんか？ そして、ヘッダ部分が空のようにも。
さらには、続く画像の1番目、2番目、4番目が海のイメージで、晴れた海、霞んだ海、夜の海みたいにも見えてきます。
このサンプルの例では、ヘッダ部に相互リンクを配置することで、相互に行き来が可能となります。
そして、前述のとおり、何もしなければ、デフォルトの表示デザインが適用されます。上記では背景色だけでなく、メニューのデザインも別のデザインに変えていますが、その適用がなければ、下記のようなメニューになるわけです。
この場合、この「特定のフォルダ構造」のサイトごとに個別のスタイル要素（css）を適用することで、同一のWebサイトにありながら、各子サイトが異なる印象のサイト表示にすることができます。
（この部分は、設定と調整が難しいため、初期構築時にご要望をお伺いして、それに合わせた表示スタイルとなるよう調整するつもりです。もちろんcssに詳しい方なら、cssファイルとDBでの紐付けで個々による設定作業は可能です）
このように、実際は一つですが、URLで仕分けた複数サイトデザインを運用できるのは、かなり有用なのではないかと考えています。
★上記に関連する動画を貼り付け
--
・サイト表示を彩るエフェクトの追加
次に、これは私の個人的な思いから加える機能ですが、Webサイトには、ハッとするような煌めきや驚きなど、おもしろいものがあるといいなと常日頃から思っています。
例えば、桜の季節には桜の花びらが舞うアニメーション効果などがそうです。
動画貼り付けできることがわかったので差し替えました。
今後は、桜だけでなく、落ち葉や雪なども構想にあります。
そのほかに花火も作ってみたいと思っています。
さらに先では、海の部分にクジラや船などを進ませたり、可能かは未定ですが、海鳥を止まらせたり、猫を動かそうなどと、妄想は止めどなく進んでいます。
今は、一旦、桜など(以降に記述の波も)をデータで指定することで適用される仕組みですが、先では、四季折々の必要なタイミングで自動で切り替わるような仕組みを追加したいと思っています。設定するある特定期間や特定時間帯などに表示されるイメージです。
などなど、いろいろとやりたいことは多くあり、「データ駆動Webサイト」の利便性や機能を高める改修ももちろん重要なのですが、Webサイトを訪れる方たちにも楽しんでもらいたいという思いがあります。
今回、前述のようなサイトのグループ分けの際に、異なる特徴を持たせるために、ヘッダ部分をいろいろと変えてみたわけですが、青空や海、夜空などのイメージにしてしまったこともあり、私の中でさらにいろいろと膨らむものがありました。
その一つは「波」。なんとなく海のように見えるメインメニューの背景部分ですが、ここに波の表示効果を加えられれば、もうそれは海ではないかという思いに至りました。
そうして、新たに加えたものとして、海の寄せる波のアニメーションがあります。前図にも含まれていますが、桜を省いたのが下の図です。
わかるでしょうか？
（昼間の海のイメージ）
メニューの背景部分を海に見立てた色合いなわけですが、それだけでは足りないと加えてみたのが波のアニメーションです。
構想を考えてざっくりと作成してみたら、あらら、本当に波らしいものができてしまいました。
個人的に、絶え間なく押し寄せる海の波は、時間を忘れて見入ってしまう性格なのですが、このアニメーションもついついボーっとしながら魅入られてしまいます。
このような運用が可能となる仕組みは、当「データ駆動Webサイト」の特徴の一つに掲げてもよいかもしれません。
（作成途上です。お見苦しい点はご容赦ください）
