架空のレストラン「Steakhouse Cardinal」

はじめに

私は自分のスキルを楽しみながら高めるため、ウェブサイトを作成してみたいと考えました。

ただ、自分のポートフォリオのような物ではなく、もう少し実用的なウェブサイトの方がモチベーションも保てると考えため、架空のレストランのホームページを作成することに決めました。

しかし、実際に依頼されたわけではなく、写真やロゴがない状態でない上に、デザイナーに関する経験やスキルも特に無く、どう進めれば良いか少し悩みました。

そこで、画像やロゴに関しては、ChatGPTやDALL-Eに依頼すれば解決できるのではないかと考え、挑戦してみることにしました。

以下が実際のウェブサイトと、ソースコードになります。

(4/17追記: TypeScriptに書き直しました。)

今回作成したウェブサイト↓

ソースコード↓

使用したライブラリ、ツールなど

・フレームワーク: React

・使用したライブラリ: Bootstrap, Vivus.js, Animate.css, loadash

・その他: Adobeイラストレーター, ChatGPT, DALL-E3

画像/ロゴや、一部テキストをChatGPT及びDALL-E3に生成してもらいました。以下が一例です。

・ロゴ

・料理

・レストラン外/内装

こだわり?ポイント

Carousel (Bootstrap)

せっかくChatGPTに色々綺麗な画像を生成してもらったので、それを全て活かすために以下のホーム画面で、背景画像を自動でローテーションするようにしました。

注意

以下の公式ドキュメントをそのまま使用し、画像を差し替えたがうまくローテションしないので注意が必要。(写っているような1枚しか表示されなかった)。

https://getbootstrap.com/docs/5.3/components/carousel/

解決法: CDN経由でBootstrapをインストールする。

まず以下よりBootstrapのサイトにアクセス。

スクロールすると、以下のような画面が現れます。

この二行を、index.htmlの<head>下に入れます。

結果求めているようなローテーションを得ることができました。

解決には以下の方の動画を参考にさせて頂きました。
https://www.youtube.com/watch?v=mPZLxhgTKCU

手書きアニメーション/Splash Screen

友人の結婚式のweb招待状に、手書きアニメーションが実装されていて、感銘を受けて是非とも作成したいと思いました。

SVG作成編

Adobeイラストレーターを使用。

基本的にはまではYukinoさんの動画とウェブサイトを参考にしましたが、黒背景に文字が書かれていく挙動にしたかったので一部編集しました。

編集した箇所

<svg>タグがついている箇所は全て抜き出し、maskの方にある<path>を全てコピペします。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ~~~省略~~~ >
  <path... >
  <path... >
  <path... >
  <path... >
</svg>

元の画像は以下のような金色の文字に、グレー系の影をつけていました。

ですが、今回は黒背景に金の手描き文字が現れるようにしたいため、影のpathをfill="#FFFFFF"とし、文字のpathをfill="#F3D823"と加えました。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ~~~省略~~~ >
  <path... fill="#FFFFFF">
  <path... fill="#F3D823">
  <path... fill="#FFFFFF">
  <path... fill="#F3D823">
</svg>

すると、求めているような見た目を得ることができました。

Vivus.js + React Hooks編

ウェブサイトを訪れた後、このアニメーションが画面いっぱいにマウントされ、アニメーション完了後には時間経過とともにじわじわ消えつつアンマウントされるちようなSplash Screenを作成しました。

TSでやる場合は、以下のDLも必要。

https://www.npmjs.com/package/@types/vivus

npm i --save-dev @types/vivus

長くなるので(自分のメモも兼ねて)書き出しました。詳細は以下。

・Splash ScreenはuseStateを使いながらisVisibleで可視の有無を管理

・useEffectは、一回限りのレンダーにするためdependencyは[]。

(ベースレイヤのid,{アニメーションのオプション},アニメーション完了後に呼び出される関数)といった並び順でるので、

・ベースレイヤーのidはmove。

・アニメーションのオプション
→type:アニメーション着手のタイミング

→duration:再生時間
→start:全体のアニメーション開始タイミング
→animTimingFunction:SVGの各アニメーションの入り方

オブジェクトを作っているのに何故名前をつけない理由

普通はオブジェクトを作成する時、普通は以下のようにオブジェクト名をつける。

object = new クラス

ただDOMを加工するなど、今回のようにオブジェクト自体を直接扱う必要の無い物に関しては名前をつけることを省略しても良い。

メソッドに関して

JSのクラスの中にある関数のことをメソッドと呼ぶ。今回はVivusが用意してくれているメソッドが、実際のスクリプトをしてくれている。

(今までプロパティに値をつけるような方法でのみ使用していたので、オブジェクト自体がスクリプト/関数のような挙動をしていて何故?と疑問に思っていた。)

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
        console.log("私は" + name + "で" + age + "歳です");

    }
}

const Asato = new Person("Asato",29);

結果: 私はAsatoで29歳です

これはいわゆる「オブジェクト指向」の言語ならではの話で、例えばPythonでCVのモデルのアーキテクチャをクラスで指定した後、実際に以下でモデルをインスタンス化するのと同じである。

net = SimpleCNN()

・アニメーション完了後の関数
大まかにやっていること
① Splash Screen自体のopacityを0にする(急に消えたら不自然)

→最初のsetTimeoutは、opacityを0にする処理までの開始時間を1秒遅らせている。
→以下2行で、今回のsplash screenのidとした要素を取得したのち、それをopacity 0にしている。

const splashScreen = document.querySelector(".splash-screen");
splashScreen.style.opacity = 0;

このアニメーション自体の設定は、CSS側で行う。

.splash-screen {
transition: opacity 1.75s ease-out;
}

② それとは別に、ずっとSplash Screenが存在していると処理が重くなるのでアンマウントをする。

→再度setTimeoutを使用し、Splash ScreenのisVisibleをFalseに設定するまで2秒待つ。

setTimeout(() => {
            setVisible(false);
          }, 2000);

この時点でuseEffectでのマウントは終わっていますが、ダメ押しで最終的にisVisibleがfalseである場合は何も返さないというようにしました。(不要?)

if (!isVisible) {
    return null;
  }

Vivus.jsの使い方は、公式のgithub及び以下の方のWebページを参考にしました。

https://www.evoworx.co.jp/blog/animating-svg-with-vivus-js/

https://github.com/maxwellito/vivus#vivusjs

浮き玉?

こちらも友人の結婚式のweb招待状から着想を得まして、淡い球がふわふわ浮いていて幻想的で素敵だなと思ったので、実装してました。

以下の動画を参考に、CSSのみで作成しました。

transform: translateを駆使して、計15個の球が動いています。

また、色は文字の色(#f3d823)にしました。

メニューのハバー時のエフェクト

当初は、以下のようにメニューも色がついていたのですが、ウェブサイト全体を通して少し色が多すぎて少し見ている方もお腹いっぱい/胃もたれしてしまうといった印象を抱きました。

なので、ハバー時のみ色がつくといったエフェクトをつけることで、胃もたれを防ぐことに加え、黒・白・金(・赤)といった色使いの纏まりが出たと個人的には思っています。

Github Pagesへのデプロイ

当初はNetlifyを使用していたのですが、パフォーマンスが芳しくなかったので今回はGithub Pagesにデプロイをしました。

その際は、Acha_for_CS様の記事を参考にデプロイをさせて頂きました。