3日間でポートフォリオ作ってみた。
今回作ったポートフォリオはこちら。
このポートフォリオでは、JavaScriptのフレームワークであるVue.jsを使って構築した。UIはVuetifyというフレームワークを使った。
今回は3日間でどのように進めたかと私が参考にした記事を紹介しようと思う。こちらの動画は簡単にポートフォリオを画面録画したものである。
1日目
1日目では、まず大まかなデザインとウェブページの骨組みを作った。
環境は、Vue CLIである。ページ遷移は、Vue Routerを導入した。
Vue CLIを使うと、より簡単にVue.jsを始めることができるからだ。具体的な導入の仕方はこちらをご覧あれ。
2日目
データベースとしてFirebaseの導入、画像のアップロードとDBからデータを取得する(Firebase Storage), 認証処理(Firebase Authentication)、細かなアニメーションを実装した。
さらにVuetifyのCardやListなどUIコンポーネントを用いてページ内の整形も行った。Vuetifyについては公式サイトに使い方が全て書いてあるから、それを参考にすれば誰でも簡単に実装可能だ。GitHubでコードを確認することできる。
簡単なVuetifyの使い方の紹介
Vue.jsのUIライブラリーであるVuetifyはGoogleが提唱したマテリアルデザインにのっとっており、直感的で使いやすいコンポーネントを利用することが可能だ。実際、デザインの知識が全く無くても、簡単にUIを作れるのが特徴である。
基本的な使い方は、v-という前置詞がついたコンポーネントを組み合わる。使用可能なコンポーネントはすべて公式ドキュメントから確認できる。v-iconはVuetifyで使用できるアイコンである。
例えば、緑色のメールアイコンを表示させたい時、以下のコードを書けば簡単に実装できる。
<v-icon
large
color="teal darken-2"
>
mdi-email
</v-icon>その他のicon例
<v-icon>mdi-send</v-icon> #送信
<v-icon>mdi-arrow-down</v-icon> #矢印
<v-icon>mdi-menu</v-icon> #メニュー
<v-icon>mdi-twitter</v-icon> #ツイッターv-iconの一覧は下記のサイトで確認することができる。
Vuetifyのコンポーネントは簡単にスポンシブデザインにも対応できるため、かなりおすすめである。
Firebaseについて
Vue.js + Firebase を使って爆速でユーザ認証を実装する
vue.jsのログイン認証をFirebase Authenticationを使って構築
Vuetifyについて
アニメーションについて
便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
3日目
3日目では、ナビゲーションバー、仕上げ、レスポンシブデザイン、Storage Rulesなど細かな部分の修正である。
デプロイはFirebase Hostingを使ってちゃちゃっと終わらせちゃいました。
インストール -> ログインする -> ログイン確認 -> プロジェクト ディレクトリを設定する -> アプリをデプロイするという順序でできちゃいます。
詳しくはこちら
実はナビゲーションバーにこだわりがある。何とレスポンシブなのである。
パソコンの時
スマホの時
違いにお気づきでしょうか？？何とHome, Aboutなどのタブがなくなって、ハンバーガーメニューになっているのよ。(本当に地味なこだわり。)
さらにこのハンバーガーメニューをタップすると、
ぬにゅっと横からタブバーが出てきたのであ〜る。実はこれVuetifyで実装できるんですよね。
参考にした記事はこちら
Vuetifyでヘッダーメニューの作成①【サイドメニューとハンバーガーメニュー】
注意するポイント
Cloud StorageのRulesについて少し注意する点がある。
以下のSecurity Rulesではログインしたらその画像にアクセスできるものである。しかし、今回ポートフォリオのためログインしなくても画像を表示させたい。
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}修正後
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}上記のSecurity Rulesの場合、認証の有無(if request.auth != null;)がないため、誰でも画像にアクセスすることができる。
参考記事
Understanding Cloud Storage Security Rules
感想
０から自分のポートフォリオを作ってみた。
一応アニメーションやレスポンシブにかなり拘った。コンタクトフォームをFirebase functionsで実装しようと思ったけど、上手く作動させることできず撃沈。AuthとStorageを実装できたからまあよし。
地味に細かい部分(管理画面の実装 -> Authで認証など)に拘ったかな。問題点としては、トップ画面をレスポンシブにしようとscssで場合分けしたが、なかなか上手くいかない。うーん、困った。
まあこれらはこれから改善していくとしよう。あ、あとSEO対策の<meta>タグも改善しなきゃ。やることたくさん。
皆様の感想お待ちしております。ここ直した方が良いとかバグがありましたらどんどんフィードバックしていただければ嬉しいです！
SEO対策
この記事が気に入ったらサポートをしてみませんか？