HPの実装方法

2018年10月28日 21:17

どうもはじめまして、むさしと申します。
システム班に所属しています。

今日はりめんばーのホームページの話をしたいと思います。
tech blogぽくなるのですみません。
わからなくても、なんか頑張ってる感じが伝われば……

ホームページについて

内容としてはランディングページ的な役割や運用が開始した時のお知らせ等を掲載するページとして使用する予定です。
けものフレンズりめんばーは基本予算ゼロなので、もちろんホームページも予算ゼロで作らないといけません。
また、あくまで趣味の範囲なので保守等はしたくないです。
なのでサーバーを自分たちで持つことはダメですし、メンテナンスコストを出来るだけ落とすことを必要があります。

ホームページは私が時間があるときにサクサクっと2週間ぐらいかけて作りました。

どうやって作ったか

最終的には以下のような構成で作成しました。

１つずつ解説していきたいと思います。

作成したコードをGitLabへプッシュ

けものフレンズりめんばー製作委員会（以下りめんばー）では、コードの管理にGitLabを使用しています。
理由としては、
- 無料で使えること
- git-lfsの容量が大きい
ことがあげられます。
特にHPはあんまり関係ありませんが、アプリ（Unity）で開発する場合アセットの量が多くなるのでgit-lfsが使えてなるべつ無料枠の容量が多いものが必要でした。
githubやbitbucketと比べてこの条件に合うのでGitLabを選択しました。

GitLabにプッシュに反応して、Netlifyに自動デプロイ

Netlifyとは、静的サイトをホスティングしてくれるサービスです。
また、CIのような機能が入っており、サービス一つで自動デプロイに環境が整います。
本番反映の手軽さでこれを選びました。

また、静的ファイルをホスティングするだけなら、実質メンテナンス・監視等のコストはゼロで運用が楽になります。
最初の目的にもあいます。

Netlifyのデフォルトの機能で特定のブランチにプッシュしたら自動で検知してデプロイしてくれる機能があります。
それを利用しているので、GitLabにプッシュするだけで本番反映が出来ます。

サイトへのアクセス

まず、NetlifyにホスティングされているHPにアクセスします。
HP自体はvueで出来ています。
vueとは、最近日本で人気が出てきているjsのフレームワークです。
私はvueは人気が過熱する前から使ってます！（流行りで使ってるわけでないアピール）
まあ、ver1より後なので古参でもないですが…
vue-cli使えば一発でボイラープレートから開発・本番が出来る準備ができるのでサクッとホームページを作るためにこちらを採用しました。

レスポンジブル対応は非常につらいので、デバイスごとの表示するHPを変えようと考えました。
netlifyを使っているので、サーバー側で判定が出来ないのでブラウザ側（vue）で行いました。
以下のライブラリがシンプルで使いやすかったので使いました。

以下のようにページのコンポーネントがマウントされた時にvue-routerのreplaceを使って切り替えています。
ちなみにpushを使うと、スマホのブラウザバックが使えなくなる（戻ってもPCページに戻ってまたSPページに飛ばされる）ので、履歴が残らないreplaceを使う必要があります。

  mounted () {
    // スマホならスマホページにリダイレクト
    if (isMobile.any) {
      this.$router.replace('/sp')
    }
  },

その他

twitterのカード対応
今はtwitterで拡散されることが重要なので、サムネイルの画像表示は重要です。
headにmetaタグでtwitter系の情報を埋め込んでおく必要があります。
設定方法はこちらを参考にしました。

注意としては、twitter:image:src や og:imageはhttpからのurlを入れる必要があります。相対パスでは設定できません。
また、指定する画像容量は1MB以下にする必要があります。

ツイートボタン
オリジナルのデザインのボタンを使いたいので公式のジェネレーターから作ったものではなく、hrefにurlを使用する形式にしました。
urlのパラメーターの指定方法はこちらのサイトを参考にしてます。

パララックス
個人的にけものフレンズのポップな感じとかを表現したくてパララックスを導入しています。
以下のサイトの「サンプル４」を参考に実装しました。

キャラごとに大きさが異なるので、キャラごとに異なるcssを適用させています。
これは画像の方を合わせたほうが楽だと思うので、おすすめしませんｗ

多重スクロール
PC版の方はロゴがページのスクロールに比べて早くスクロールなるようにしています。
かっこいいかと思ったのですが、わかりづらいですよね…
スクロールの検知はこちらを参考にしています。

上のhandleScrollでロゴ画像のcssを直接いじって早くスクロールさせています。

GCP + WordPressでよくない？

私もそう思います。
正直わざわざ自分しか使えない技術を使うべきでなかったと思っています。
当時netlifyの便利さに感銘を受けて、サイトを量産していたので、りめんばーもついnetlifyで作ってしまいました…
この程度のサイトのアクセス数ならGCPの無料枠で十分運用可能ですし、WordPressの方が複数人で運用可能です。
なので、移行も検討しています。
またNelify CMSの利用も検討しています。
そのようなことを考えながら、現在絶賛悩み中です。

次回更新の時にはどうやったのか書けるといいなと思っています。

この記事が気に入ったらサポートをしてみませんか？