とあるラーメン店のWordpressサイトをNuxt.js+Firebaseで作り直した話 #JavaScript

お店と Web サイトの紹介

中華そば四つ葉
https://yotsuba628.com/

ラーメンが好きならご存じの方もいらっしゃるのではないでしょうか。

最寄駅から徒歩 90 分という衝撃のアクセスの不便さ。
にもかかわらず多数の祭事出店、テレビ出演、都内から足繁く通う芸能人もいる埼玉県川島町が誇る名店です。

経緯

何を隠そう私は川島町出身なのですが、学生時代に店舗に通っているうちに店長に顔を覚えてもらうことができ、Web ページの作成をさせてほしいと申し出たところ承諾を頂けて 2018 年の 3 月頃に Web ページをリリースしました。

しかし当時の技術力不足もあり、Wordpress の入門書を写経しながらのものとなり・・・
サイズの大きい画像を多数保有しているため表示が遅く、見た目が芋臭いというなんともお粗末な状態で 1 年以上運用を続けていました。

時がたち社会人になってからいくつかの技術的知識を付け、このお粗末な状態でも多くの閲覧者がいる現状に恥ずかしさを覚え、つい先日リニューアルを決意。約 3 日で完了することができました！(Nuxt.jsとFirebase便利すぎです)

どのようなスケジュールで行ったか、リニューアルした点などを記録に残しておきたいと思い、今回記事を書かせていただいております。

スケジュール

1 日目現行サイトの改善したい点洗い出し
- 表示速度の改善
- レイアウトの一新など
2 日目コーディング
3 日目確認依頼、OK が出た後新規ドメインを取得して接続。旧ドメインのリダイレクト設定

実装内容

エックスサーバ + Wordpress ⇒ Nuxt.js + Firebase

見た目

Vuetify を使用しました。テンプレートそのまま使えるものが多く、非常にスピーディに開発が進められて助かりました。

またこだわった点として写真を非常に良いものを使っています。プロのカメラマンさんに依頼して店舗側ともアポを取り、時間を取って写真を取っていただきました。

機能

一部紹介させていただくと、お品書きページで各メニューにお気に入り機能のようなものを実装しています。以前のページでは一方的で、今回リニューアルにあたって少しだけ閲覧者の方からリアクションを貰える仕組みを追加出来たらうれしいなと思ったのがきっかけです。

コードの一部分はこんな感じです。
template 部分は

        <v-card>
          <v-img :src="rcard.src" class="white--text align-end" height="300px"></v-img>
          <v-list-item two-line>
            <v-list-item-content>
              <v-list-item-title class="subtitle">{{ rcard.title }}</v-list-item-title>
              <span>{{ rcard.content }}</span>
            </v-list-item-content>
          </v-list-item>
          <v-card-actions v-if="rcard.isFavorite">
            <v-alert color="pink lighten-4" icon="mdi-emoticon-happy">Thanks！</v-alert>
            <v-spacer></v-spacer>
            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
              {{ favs[index].count }}
            </v-btn>
            <v-btn icon @click="twitterShare()">
              <v-icon>mdi-twitter</v-icon>
            </v-btn>
          </v-card-actions>
          <v-card-actions v-else>
            <v-spacer></v-spacer>
            <v-btn icon @click="addFavoriteRamen(index, rcard.id, rcard)">
              <v-icon>mdi-heart-outline</v-icon>
              {{ favs[index].count }}
            </v-btn>
            <v-btn icon @click="twitterShare()">
              <v-icon>mdi-twitter</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>

script 部分は

    addFavoriteRamen: function(index, id, shina) {
      var favRef = firebase
        .firestore()
        .collection("favorite")
        .doc(id);
      var count = this.favs[index].count;
      favRef.set({
        title: shina.title,
        src: shina.src,
        content: shina.content,
        count: (count += 1)
      });
      this.ramencards[index].isFavorite = true;
    }

よくあるお気に入り機能のようにもう一度押したら解除できるように最初はしていたのですが、短時間に何度もデータを書き込まれてしまうことを懸念してこのような仕様にしました。
（※防ぐ良い方法が思いつかなかった・・・ご教授いただければ幸いです。）

おいしそう！と感じたものがありましたらぜひクリックしてみてください。

ドメインの接続、リダイレクト設定

Firebase、エックスサーバ、お名前ドットコムの設定部分ですが結構躓きました・・・

時間あるときに記録しておきたいと思います。

おわりに

最後まで見てくださりありがとうございました！

本当においしいラーメン屋さんなのでぜひ一度行ってみてください。
Web サイトも随時更新予定なので見て頂けたらうれしいです。

こちらも

JobQuest ジョブマッチングSNS風サイト
https://jquest.jp/

Vue.js + Firebaseで作ってます。宜しければご覧ください！