目次
はじめに
Vue.jsを用いたポートフォリオサイト制作に挑戦してみました。
また今回は、デザイン疎いなりに『かっこいいポートフォリオ』作るぞ！！ってことでVuesaxも使用してみました。
この記事は、制作過程の記録になります。とても長文かつ制作しながら書いているのでまとまりもあまりありません。(すみません)
ですのでとりあえず完成品だけチェックしたいって方は以下のリンクから見て見て下さい。
https://masaru-portfolio.netlify.com/
CSSアニメーションに伴い型崩れが起きますが(要改修部分)、Vuesaxで比較的簡単にかっこいいデザインを実装することができました。
同じくプログラミング初心者の方々やVuesaxなりなんらかのUIフレームワークを使ってみたいといった方々の参考になれば幸いです。※以下一部抜粋。
ライブラリの選定
どのライブラリを使う？？
Bootstrap
すぐ取り入れられそう。
Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！
MDBootStrap
ちょっとめんどくさそう？？
Material Design for Bootstrap 4 (Vue version)を導入してみる
Vuetify
とりあえずかっこいい。
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ
Vuesax
かっこいいけど手軽に始められそう？？
VuetifyかVuesaxを利用してみたいが、良し悪しがいまいちわからないのでとりあえずフォルダをコピーして(予備)、、、
手軽でかっこ良さそうなVuesaxを選定。
Vuesaxを使ってみた
インストール
$ npm install vuesax
マテリアルアイコンもインストール
$ npm install material-icons --save
main.jsへ追記。これでもう使えるらしい。
import Vue from 'vue' import App from './App' import router from './router.js' + import Vuesax from 'vuesax' + import 'vuesax/dist/vuesax.css' + import 'material-icons/iconfont/material-icons.css' + Vue.use(Vuesax) Vue.config.productionTip = false
とりあえず公式ドキュメント見ながら見よう見まねで使ってみる。(英文が嫌で今まで公式ドキュメント系避けてきた。ちゃんと読むのは今回が初。褒め称えたい。(遅すぎ))
https://lusaxweb.github.io/vuesax/components/alert.html#default
Home.vueを編集
<template> <div id="top"> <p>WELCOME TO MY PAGE</p> + <vs-alert active="true"> <h1>Sato Masaru's Portfolio Site</h1> + </vs-alert> <img src="@/image/profile.jpg" width=350px> <p>HTML/CSS(Bootstrap)/JavaScript(jQuery,Vue.js)/PHP(Laravel)</p> <p>Check out some of my works.</p> </div> </template>
反映された！！うれしい◎
アイコンを付けてみた
こんな感じでボタンタグにicon属性を付けてあげるだけでOK。
<vs-button :color="colorx" :gradient-color-secondary="colorx2" type="gradient" icon="home">home</vs-button>
表示された。とても簡単。(ボタンもついでにグラデーション付きで実装。)
以下がアイコンリスト。沢山ありすぎて沼です。
https://material.io/resources/icons/?icon=face&style=baseline
CSSデザイン(フルスクリーン/アニメーション/レスポンシブ対応)
フルスクリーンレイアウト
上記とりあえず見よう見まねで実装。
アニメーション関連
画面遷移時のアニメーションは上記のサイトを参考に実装。スクロールでの表示にはJSが必要。
今回は実装しなかったけど別の機会に試してみたい。
Vueでimgタグのsrcを書き換えて、transitionアニメーションさせる
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
JavaScript不要！CSSだけでアニメーションを作る方法
router-linkでは、アクティブなリンクに対してrouter-link-activeとrouter-link-exact-activeクラスを付与するらしい。
以下でもいけるらしい。が、いまいちわからず。
<transition> <router-view></router-view> </transition>
意外と知られていないCSSの色々な回転アニメーションの作成方法
上記参考にアイコン画像を回転させてみた◎
cssだけ！画像をhoverしたときの簡単おしゃれエフェクト４つ
上記参考にプロフィール写真にホバーエフェクト付ける。
現状こんな感じ。前回よりだいぶ良くなりそうな予感。
レスポンシブ対応
この記事が興味深かったけどとりあえずメディアクエリを導入。
てかBootstrapをVuesaxに加えて使うのもアリなのかな？？と思ったり。。。
App.vueの<style>タグに追記
@media (max-width: 768px) {
p {
font-size: 8px;
}
}
反映された。(画像下の文字が小さくなった)
ヘッダー部分が崩れているので改修。
サイドバーつけるのもいいかなと思ったけど、これでもいいかな？？なんだろこれ的な好奇心で押してもらうことを狙った。(後付け)
コンテンツ制作
Home
ここ辺りで、さすがにコンテンツのしょぼさが目立ち始めたので作り出す。
というより何を書くか決めていなかったので、vuesaxでどれを使うか選べなくなってしまった。
とりあえず『かっこいいポートフォリオサイト』というテーマだけは決めていたので、トップに英語の文章を加える。
英語は苦手なのでGoogle翻訳で。ダサすぎる。。。笑笑
微調整しつつこんな感じで。(PC版がだいぶ素朴だけどまあ良しとしよう。)
About
最初入れようとしていたけど、Homeで自分語りはしてしまったので要らない説。
ってことでなしにしました。
Work
ここにポートフォリオを入れることにしました。
Skill
aboutなしになってちょっと寂しかったので作ることにしました。
Contact
Googleフォームの埋め込みとかも検討したがとりあえずTwitterだけ貼っておくっことにする。
Vuesaxを使ってみた パート2
構成はなんとなく練れたのでさっそくWork.vueでポートフォリオの紹介ページの製作へ。
Work
制作物の紹介に合いそうなコンポーネントを探して。。。
https://lusaxweb.github.io/vuesax/components/card.html#default
制作物の紹介にはCardコンポーネントがちょうどよさそうだったので使ってみた。
はみ出しました。。。笑 が一応反映。
その後、以下を参考に。
https://lusaxweb.github.io/vuesax/layout/
上記のグリッドを参考に、vs-w=”6″をvs-w=”3″にしてみるといい感じになりました。
Bootstrapと似た仕組みですね。
コンテンツ追加して少し微調整でこんな感じになりました。
余白が気になるけどまあいいでしょう。笑
がしかし、レスポンシブで思いっきり型崩れ。。。(当たり前)
とりあえずよくある縦にそろえる感じで調整。
。。。
ここで気づく。全体を囲っているボーダーラインをApp.vue側で作っているので枠を消せない。。。omg
(たまに見かけるボーダーラインが消えるようなアニメーションはどうやっているんだろう？？)
今回はVuesaxで気になっていたTagコンポーネントを使用して解決しました。
https://lusaxweb.github.io/vuesax/components/tabs.html#alignments
アイコンも使えて、Flexで幅一杯にタグを広げることもできました。我ながら良い感じ。
Skills
最初はTableコンポーネントを使おうとしたけど少々オーバースペック&幅の調整の仕方がわからなかったのでやめる。
https://lusaxweb.github.io/vuesax/components/table.html#state
ついでにCollapseコンポーネントを使ってみたけど書く内容が少ないので見え隠れするのが逆に煩わしいと感じてやめる。
https://lusaxweb.github.io/vuesax/components/collapse.html#default
最終的にListコンポーネントに落ち着きました。
https://lusaxweb.github.io/vuesax/components/list.html
シンプルイズベスト。
Contact
よしラスト！！(若干の息切れ感。。。笑)
残念ながらVuesaxにはTwitterアイコンはなかったので以下を参考に、Font awesomeを使うことにする。
公式サイトと照らし合わせて必要なものだけインストールしれば使えるみたい。
$ npm install --save @fortawesome/fontawesome-svg-core $ npm install --save @fortawesome/free-solid-svg-icons $ npm install --save @fortawesome/vue-fontawesome $ npm install --save @fortawesome/free-regular-svg-icons $ npm install --save @fortawesome/free-brands-svg-icons #Twitterアイコン使いたいならこれっぽい
main.jsに以下を追記
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons' //fasで全アイコンを追加できる。
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
あとは以下の公式サイトから使いたいアイコンを探せばOK
https://fontawesome.com/icons?d=gallery
ちなみにTwitterはfasではないので書き方が違うらしい。
Vue CLIの中でfont awesomeを使いたいのですが、fabが反映されません・・・
コチラを参考に以下のように記入。
<font-awesome-icon :icon="['fab', 'twitter']" />
無事表示されました◎
さらにここでPopupコンポーネントを使ってみました。
https://lusaxweb.github.io/vuesax/components/popup.html
以下でTwitterの埋め込みを作成して。。。<script>タグはindex.htmlに記載しました。おそらく邪道。。。
どん。いい感じ！！
と思いきやここでエラー。残念ながら/Contactでリロードすれば読み込むけど、localhostで読み込んだ際は以下の表示。
<script>タグをindex.htmlに埋め込んでいることが原因なのは容易に想像つく。
ただ、コンポーネントで以下のスクリプトを書き換える方法がわからず。。。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
以下の記事も試してみたが解決には至らなかった。。。
User Timeline – ユーザータイムラインをウェブサイトに埋め込む
一旦これはステイ。asyncなりちゃんと別途学習しよう。
デプロイ
Xserverへのデプロイ
もはやコンテンツ制作はモチベーションの問題で、半分力尽きたのでとりあえずデプロイを試みる。
この日のためにいろいろとテストしていたので準備万全。
いざ表示。router.js管理下のviewが一切表示されていない。。。
とりあえずhomeボタンを押してみると、目を覆いたくなる現実。アイコンとイメージも表示されていない。。。号泣
その後、Xserverに上げたdistフォルダの名前をルーティングに合わせてHomeにしたところ、画像が表示されました。
が、ページ遷移すると画像は再度表示されなくなる現象。
念のため恐る恐るスマホからも確認。
こちらは想像を更に超えるひどさでもはや笑うしかありませんでした。。。笑
仮想環境で見ていたフォントと全然違う。。。笑笑
そのあと少しもがくもこれといった改善策が出ず断念。。。
おまけにページ遷移後にリロードすると404エラーになることが発覚。。。泣
Netifyを使ってみた
さすがにここまで作ったのでデプロイを諦めるわけにはいかず、他のデプロイサーバーを探す。
Vue.jsで作ったWebアプリをGitHubで管理してS3に自動デプロイする
ちょっと手間がかかりそうだ。GitHubとS3と使ったことがあまりないのもあり他探す。。。
Herokuは大いにあり！！ただ気になるサーバーが元からあったのでそちらの記事を探す。(初めからそれ調べてやれ)
vue-cliでwebアプリケーションを作って、Netlifyを使って無料で爆速でリリースした話
はい。Netify。とても簡単そうなのでとりあえず試してみる。
以下からGitHub認証を使ってサインイン。
distファイルをZip形式にしてドラッグ&ドロップするだけ。3分程待ち、表示されたリンクをクリックしたらすぐ表示されました◎めちゃ簡単！！そして超早い！！
画像が表示&ページ遷移しても表示されるので画像問題はクリア◎(Xserverではなぜだめだったのだろうか。。。)
ただ残念なことにVuesaxのアイコンが表示されず。。。
改修作業へ
①Vuesaxのアイコンが表示されない
https://lusaxweb.github.io/vuesax/theme/icon.html
公式ページを確認。(お決まりのGoogle翻訳。)
これ見てFont AwesomeのTwitterアイコンは問題なく動作してるしFont Awesomeでよくない？？となっちゃいました。
なので全てFont Awesomeへ置き換え。
以下の感じ
ちなみにサイズの変更もできました。以下に載っています。
https://github.com/FortAwesome/vue-fontawesome
困ったこと。以下のようにVuesaxのコンポーネントタグ内にiconを書いていたケースでは、うまくアイコンを文字に続けて連結させることができませんでした。
<vs-tab label="Blog" icon="public"> <font-awesome-icon icon="plane" size="lg"/> #これ表示させたいアイコン
VuesaxはHTMLを自動生成してくれるので、Font Awesomeで同じ仕様にしたいならVuesax使わないで1から作ることになるのでやめました。残念。
②Twitterの埋め込みができない問題
.jsファイルの読み込み、async/awakeの理解がまだ疎いため、今後勉強することを胸に誓い以下のように変えました。
Popupコンポーネントに画像を挿入できることがわかっただけ収穫ありということにしておきます。
②リロードした際に404エラーになる
これは以下の記事がとても参考になりそう。
SPAにありがちな更新処理を行うと404になっちゃう問題(VueとHeroku版)
今回はNetifyに上げる予定なのでまた次回に回します。(すみません、力尽きました。。。)
③フォント修正
少しだけ調べました。
2020年流行？font-familyのオススメ設定はこれ！【CSS】
すみません、とりあえず上記で最後に記載されているおすすめフォントをコピペしました。。。
Vuesaxでデザインを簡単に作りたかったのに、<style>タグ内を拘り始めるのは本末転倒な気がしてしまいまして。。。(言い訳&力尽きてる)
ってことで以下の表示になりました。そこそこ良い感じ？？
問題は、本番環境に上げたときの表示。Safariから見たらどうなるかです。。。
お、おもい。。。。画像がなかなか表示されない。
そしてなんか左上にずれる。
なぜかタップすると直る。笑 でも仮想環境に比べて下にずれてはみ出てる。(原因が無知なのでわからない。もはやだるい)
フォントはわりとおしゃれなので及第点です。
ここから再修正
重いのでトップ画のホバーエフェクトはなくす。
レスポンシブ側のみh1のサイズを縮小。
スマホでのタブバーが表示される分を考慮できていないことに気付き、ハゲ(私)のプロフィール画像の主張を少し控えめにして、かつ囲いのボーダーラインの位置をずらしました。いろいろ試しましたが上の余白は作んなくてもそんなに気にならない。それ以上に下のタブバーの干渉が強いように感じました。
再表示。囲いの幅は及第点◎
変わらず以下のような型崩れは起きている。。。
が、どこか画面をタッチすれば直るので今回は一旦見過ごすことにする。
アニメーションを外したところ直ったのでこれが干渉しているっぽいが、ないと『かっこいいポートフォリオ』という根底のテーマから覆されてしまうので残すことにした。
navバーからの高さも微調整してデプロイ。とりあえずこれで完成にします。パチパチ。
以下、完成品。ドメイン名もとても簡単に変更できました。すごい！！
https://masaru-portfolio.netlify.com/
おわりに
Vuesaxを使うことで、かなり簡単に動きのあるデザイン、かっこいいデザインを実装することができました。
次はVuetifyを使ってみるのもアリかなと思いながら、そもそものCSSやJavaScript(Vue.js)の基礎が全然身についていないなと実感したので、基本に立ち返り、再度書籍なり公式ドキュメントを利用しながら学習を進めていこうと思います。
また、今回あまりリファレンスのない中、英文の公式ドキュメントを見ながら実装する経験ができたのは大きかったかなと思います。やれば多少はできるんだと実感しました。
次はLaravel+Vue.jsのポートフォリオを作りたいなと思う次第です。
おそらくこんな長文を最後まで見る方はいないかと思いますが、個人的備忘録として残しておきます。(じぶんも修正のための読み返しすらしたくなかった。。。笑笑)
最後にデザイン面で参考にさせていただきましたサイトを別の記事で紹介させていただきます。読んでいただきありがとうございました。
引き続き頑張るぞ！！！
その他備忘録
画像が重かった件
こりゃ重くなるわってくらい1つだけ(私のでこ光ハゲ画像)容量がでかかったのでサイズダウンさせて解決しました。
config/index.htmlに関して
config/index.htmlの以下の修正箇所。
- assetsPublicPath: '/', + assetsPublicPath: '',
デプロイ時推奨の部分ですがこの状態でVue Routerによるページ遷移先(URLが変わっている状態)で更新ボタン押すとページ表示できなくなりました。。。
cannot get / vue と表示されてしまう。(テスト環境において)
さらにここに関しては、再度npm run serveしないと変更が反映されないみたい。。
本番環境においては両方試しにデプロイしたけど、今回は特に変化は見られなかったのでデフォルトに戻して作業しました。
またデプロイして気付いたけどVue Routerの遷移先のURLは頭文字が必ず大文字になるっぽい。デプロイ時はディレクトリ名に気を付けないと。
Xserverでのデプロイ対策
Netifyにアップロードした後に気付いて試したことをここに書きます。
以下のように、WordPressドメイン直下(public_html)に更にディレクトリを作って表示してました。
chobimusic/public_html/dist/index.html
例えばこれをWordPressのない純粋なドメイン直下にアップデートしたらどうなるかも試してみました。(以下の構造)
ドメイン/public_html/index.html
なんと遷移後も画像が表示されました！！(遷移後のリロードはNG)
また、NetifyとXserverへのFTP送信ですが、Netifyの方が若干表示するまでの時間が短縮できました。こればっかりはNetify凄すぎ！！と思いました。
XSERVER(エックスサーバー)にNode.jsをインストールするときはnodebrew使うと楽
Herokuでのデプロイを確認してて思ったけどXserverにNode.jsインストールすればいけるのかな？？とか思ったけどSSH接続だしちょっと大変そう。。。メモ。
バグ
ページ遷移すると治るので何が原因かと思いきや、リロードの際に一瞬ボタンが2段になって読み込まれていることが判明。(なぜかはわからない)
色々弄っていたら解決できたけどなぜ解決できたかもよくわからず。。。笑
CSS関連(躓いたところ)
【HTML】aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法【CSS】
<router-link>タグの高さを親要素<nav>にそろえる際に参考にした。
Google Fonts
【2019年版】Google Fontsの使い方：初心者向けに解説！
今後実装したいこと
トップ画像のエフェクト
canvas⇒SVG
CSS3とHTML5 Canvasで作るモーショングラフィック
Canvasを使った動きのあるWebサイト・ホームページ制作をご希望の方へ (Canvasを使ったサイトがまとめられている)
Vue.js with canvas Vueコンポーネントへの実装に難易度の高さを感じる。
グリグリ動くUIをVueとSVGでサクッと書く canvasよりSVGで実装してみようかな？？
CSS・SVGとVue.jsでのアニメーション作成入門 SVGもなんだかんだ難しそう。。。
コメントを残す