GW突入ですね！
この記事は、challenge-every-month全員でアウトプット芸人 Advent Calendarの2日目記事です！
- GW Advent Calendar | challenge-every-month全員でアウトプット芸人 Advent Calendar
- 10連休向けアドベントカレンダーシステムを作った【個人開発】 - Qiita
1日目は、tadaさんです。お疲れ様でした！
記事の内容はなに？
父親が「山梨県の親父たちに気軽におしゃれなものを食わせてやりたい（そして自分も飲みたい）」というコンセプトをもとに飲食店を始めることになりました。
お店の名前は「TRATTORIA e BAR PORTO」と言います。
ポータルサイトを作る必要があり、勉強の意味合いで作らせてくれないかと話したところ「好きにやっちゃえ」と気軽にOKしてくれました。（感謝）
この記事では、どんな環境や技術等使って開発しているかをざっくり（プラグイン等は別途記事にて）。
そして、今後やるべき（やりたい）ことを書きたいと思います。
本編
制作したサイトは次になります。
trattoria-e-bar-porto-yamanashi.netlify.com
そう。本記事作成時では、まだOGPが設定できてないのです...。🙇♂️
主に使用している技術
この記事では、使用した言語・FWとホスティングサービスについて記載します。
リポジトリは次になります。
Vue.js製の静的サイトジェネレータ「Gridsome」
次のリンクを踏むと公式サイトに飛べます。セットアップや基本的な設定は、基本、公式サイトで用意されているDocベースで進めることができます。（丁寧）
他、つまづいたところはtyankatsu5さんの以下記事などを参考にさせていただきました。
tyankatsu5さん、今ははてなブログの方は休止して、Netlifyにホスティングしているブログに移行されているみたいです。定期的に拝読させていただこうかなと思っています。
ホスティング「Netlify」
ざっくり言うと、GitHubにPush後、ちょこっと操作するだけでサイトがデプロイできる「Netlify」というホスティングサービスを使っています。
もっとさんが出された次の本をきっかけに、Netlifyの存在とFunctions、サイト設定などの仕組みを知ることができました。改めて感謝します。
今後やるべき（やりたい）こと
TODOってやつですね。
OGPとSNSシェアの設定
ブログやSNSでサイトをシェアしようとしても、次のような感じで、画像や概要が表示されません。
trattoria-e-bar-porto-yamanashi.netlify.com
下調べした際に、React製の静的ジェネレータ「Gatsby」の記事を書かれているたくもんさんの記事にさせていただきました。「Gatsby」では、ReactHelmetというプラグインを使ってOGPを設定するみたいですね。
Gridsomeの公式サイトにヘッダ情報の設定方法が記載されています。こちらを参考に実装する予定です。
Gridsomeでは、Nuxtで使われている「vue-meta」を使って実現できるようです。
お問い合わせフォームの作成
こちらの方法は、さきほど紹介したもっとさんの【DL版】Netlify Recipes - mottox2（つのぶえ出版） - BOOTHに記載されていたNetfliy Formsをベースに作成する予定です。
マップの表示
Googleマップ or Yahooマップを使ってさせようと考えています。
デザインのブラシアップ
今回のサイトは、次のBootstrapベースのテンプレートをベースに作成しました。
開発していながら思ったのですが、デザイン周りはBootstrapに助けられていて、自分自身のデザイン力の無さを痛感しました。（あとCSS力）
ノンデザイナーズ・デザインブックという本を買いました。整列の章まで読み進めたのですが、どのように見出し等を配置するか、とても参考になります。
読破して、よりよいデザインになるようにブラシアップしていきたいと思います。
アニメーション付け
よくaタグにhoverすると下線がうにょーんとなるアニメーションがあると思います。業務で開発しているWebアプリ等ではそんなに気にしていなかったアニメーションも、今回の開発を通して見栄えとしての必要性を感じました。
hoverのアニメーションについて、以下の記事を参考にさせていただこうと思っています。
他はどのように調べて、学んでいけばよいかはまだ目処付いてないのですが、やっていきな感じです。
その他諸々
あとはざっと考えて以下の改善を考えています。
- 背景画像の差し替え
- もうちょっとよい雰囲気の写真を撮っておきたい
- mask要素の除去
- 透過した画像のみにする
- ブログ機能の追加
- NetlifyCMSの導入を参考にする予定
終わりと所感
個人開発？と言えるのかはわかりませんが、普段行なっている勉強とは異なるメリットが得られている気がします。
- 楽しくて長続きしそう
- どのように作るかを考えながら長い目で開発できるので、楽しい
- CSSについて詳しくなれる
- 普段、デザインはUIチームの方におんぶに抱っこ状態であるため、学びになっている
- 解像度に合わせてデザインを考える等の知識が身につけられている
ヘッダとか、まだまだ業務系なイメージのデザインが多いため、もっとおしゃれな飲食店雰囲気を出せるような感じに修正していきたいですね。
challenge-every-month全員でアウトプット芸人 Advent Calendarの3日目担当は、脱脂綿さんです！
乞うご期待！
