落とし穴に立て札を立てるが如く

ハマりどころの解決が少しでも早くなることを願って書いていきます

vue+firebaseでwebサイトを作った話

f:id:nam_yu_sql:20191230075324j:plain この記事はcloud.config tech blogにマルチポストしています。

portfoliosite作ったった

目的は2つあって、普段業務ではバックエンドの開発ばかりやっているのでフロントエンドについて学習したいというのが一つと、そろそろ業務でもフロントエンド寄りのことがしたいと考えていて、それを伝える際に「業務に入るだけの実力と意思がありますよ！」ということを示すために使うというのがもう一つです。 また、アーキテクチャとしては以前社内向け決済アプリを作るチームの一員だった時に使っていたもので、今度は自分一人で何かしら作ってみたいと思っていたためアーキテクチャとしてはその時と同じくfirebase+vueで作ることにしました。 そういったいきさつの下で今回作ったポートフォリオサイトについて、どのように作ったか、何を参考にして作ったかをまとめていきたいと思います。

作ったもの

https://namuyu-s-portfolio.firebaseapp.com/ デザインで1週間、コーディングで2週間弱程度かけて作った静的サイトです。 大抵の時間をcssを調整するのに使っていたような気がします。

参考にしたサイト、教材

最初に参考にしたQiita記事です。 クオリティも高いです。 どんな機能を持たせようか考えるのに役立ちました。 firebaseの機能を一通り網羅して作られているので、それぞれの機能をどのように使うのかの実例や使い方を知ることもできます。

vueのインストールからプロジェクトの作成、サイトのホスティングまで必要なものは一通り載っています。 vueでサイトを作ってfirebaseでホスティングする際に必要なことまとめられています。

udemyの教材です。 7月～9月の間、これを見ながらphotoshopでデザインしてhtml,cssに落とす方法を勉強していました。

  • その他、実際に作られたポートフォリオサイトがいくつか 主にどんな内容をサイトに含めるか検討する際にいくつかの実例を実際に見ました。 国内だとあまり作例が見つからなかったので、「developer portfolio」等のワードで検索をかけて海外のデベロッパーのサイトをいくつか見つけることができました。 これを基にしてページをいくつかのセクターに分けて表現する形式を採用しました。

使った技術スタック

やったこと

  • 英語で表現

海外のデベロッパーのポートフォリオサイトを見ると大抵が英語だったので、海外からみられることを考えると自己紹介くらいは英語で書いておいた方がいいかなと考えました。 ブログの欄や資格の名称は日本語ですが・・・

  • Componentのインポート

各セクターのタイトル(ABOUT~「Hi, I'm Namuyu.」の部分)は定型なので、纏めて別ファイルのコンポーネントにしました。言っても3つだけの要素ですが、これによってコードの重複を若干減らしています。

  • レスポンシブ対応

参考にしたポートフォリオサイトでレスポンシブ対応をしたと書いていてざっと聞いた感じだと難しそうだなぁと思ったのですが実際にやることを調べてみると画面サイズで表示物に当てるcssを変えるというシンプルなものだったので挑戦してみました。 画面が大きいと要素は2カラムの左寄せ、画面が小さいとタイトルが中心寄せになります。

  • firebase storageから画像を取得

画像の取得の方法としてはリンクを使用する程度ですが、画像の置き場所としてはfirebaseのサービスの一つであるfirebase storageを採用しました。

やらなかったこと

  • ブログの動的な取得

はてなブログには記事一覧を取得するAPIがあり、それを利用してBLOGSのブログ一覧を投稿されている最新4本を表示しようとも考えたのですが、firebaseの無料プランでは外部APIとの通信が行えないことを思い出してやらないことにしました。 表示されているブログ記事はテキストと画像を直接htmlの形で書き込んでいます。

  • 画像のurlの取得

画像のリンクはfirebaseのストレージのページで取得できるリンクをそのまま埋め込んでいます。 本来は画像のファイル名からfirebase SDKを使ってfirebaseから画像を取得する方法もあったのですが今回は表示する画像の数が限られているので使用しませんでした。 これによって本来はfirebase sotrageに接続するためのクレデンシャルをどこに保存するかといったことを考えずに済んだところはあります。

  • ルーティング 1枚のページに要素は全部含めたので、別ページとのルーティングなどは特に作成していません。

詰まった部分

具体的なinit->build->deployの方法は他の解説に譲るのですが、そのfirebase initを行う際に、deployを行う対象のファイルが入ったディレクトリを指定することになります。 ここで、最初は元々index.htmlが入っていた"public"ディレクトリをデプロイするディレクトリに指定していたのですが、いざデプロイしてみると公開されたページには何も表示されていませんでした。 正しくはどうすべきだったかを先に言うと、npm run buildすると"dist"というディレクトリが作られるのですが、このディレクトリをデプロイの対象にする必要があります。 このディレクトリにはvueで書かれたコードをjava scriptなどブラウザが読める形に変換された完成形のファイルが入っています。 先のpublicディレクトリにはindex.htmlとfaviconくらいしか入っていないため、vueで書かれた他の表示物が表示されなかったのですね。

  • faviconをどこで設定するか

今回主に編集を行ったのはメインのページのコードである"App.vue"というファイルでした。 いざfaviconをデフォルトのものから変えようとしたとき、そのファイルの中にfaviconを設定するタグは存在しないしやり方を調べても全く出てこないのでしばらくハマっていました。 正しくは先ほどの"public"ディレクトリ内の"index.html"にiconタグがあるので、これを書き換えてやればfaviconを設定できます。 デフォルトではApp.vueはどれだけ弄っても最終的にbuildされればjavascriptに変換され、index.htmlのAppというidが振られたdivタグの中に要素として動的に生成されるので、その元のindex.htmlがすべてのベースになります。 当然metaタグやiconタグもそこにあります。 フロントエンドエンジニアリングの基礎的なところな気もしますが、そこが分かっていないとここでハマるよと言われたような気分です。 今度は一度その基礎的な部分から学んでみたいと思います。

一番力を入れた部分

小さいことですが、一番上のカラーバーは力作です。 これ、色が変わる一つ一つhtmlが割り当てられていて5色でループさせています。 いくつかのサイトでこれを見たときこれはお洒落だと思ったのでマネすることにしました。 要素の数はウィンドウサイズを大きくしたり小さくしたりすると裏で動的に要素が消されたり追加されたりしています。 このページで唯一の動的に生成、消去される要素でもあります。

これから追加するとすれば

  • CONTACTの追加
  • svgのアニメーションとかさせてみる
  • Unityで何か作ってUnity roomの欄に追加
  • コードを公開される形にしてGithubの欄に追加
  • スマホで見るにはサイズが大きすぎるので調整
  • その他何か作ったらどんどんCREATIONの欄に追加していく
  • UnitTestの追加

おわりに

今回は初めて自力でwebページを作成したのでその際に参考にしたことや気付いたことをまとめました。 これから初めて自身のwebページの制作をやりたいと思った方やfirebase、vueといった技術が気になる方の参考になれば幸いです。