ホームGatsbyGatsbyで日本語のポートフォリオサイトの立ち上げプロセスと学んだポイント。
2020年3月14日

Gatsbyで日本語のポートフォリオサイトの立ち上げプロセスと学んだポイント。

portfolio

10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、筋肉めがねです。

前回の記事「筋肉めがね」という事業の2020年2月の実績振り返りと3月の目標（PL含む）にて、「30Daysトライアル1st」を終わらせる、という目標を3月の目標の1つとして立てました。

そして、昨日、30Daysトライアルの一貫で、日本語でのポートフォリオサイトをGatsbyを使ってたちあげましたので、立ち上げた報告としてツイートしました。

本日は、ポートフォリオ立ち上げのプロセス・および幾つかの学んだ点をシェアさせていただきます。

まず、成果物はこちらでございます。

webreelancejp

webreelancejp

それでは、本日は以下の内容を書いていきます。

日本語ポートフォリオの立ち上げプロセス

先月、英語でのポートフォリオサイトを立ち上げ、その時のプロセスを以下の記事に書きました。基本的には、今回作った日本語のポートフォリオも同じプロセスを経ておりますので、簡潔にポイントを書いていきます。

【保存版】Gatsbyで英語のポートフォリオサイトを0から立ち上げるまでの全行程。(2020年2月11日時点)

  • ポートフォリオに載せるべき項目の選定
  • 使用するテンプレートの選定
  • ドメインの選定と取得
  • サイト作り

ポートフォリオに載せるべき項目の選定

ポートフォリオに載せるべき項目を選定する際に参考にさせて頂いたサイトはこちらです。
【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ

ポートフォリオサイトを作る目的は、web制作会社へ営業するためのツールとして使うこと、その目的を果たすために必要な項目として以下を選定しました。

  • サービスと料金
  • Webreelanceとは（自己紹介含む）
  • 制作実績
  • お問い合わせ

使用するテンプレートの選定

いつも通り、Gatsby starter kitからポートフォリオとして使いやすいテンプレートを選びました。

gatsby-starter-forty

ドメインの選定と取得

webreelanceという言葉を使いたかったこと、そして、英語のポートフォリオとは別にしたかったため、webreelancejp.comとしました。

サイト作り

以下の手順を1つ1つ進めていきました。

  • Gatsbyの開発環境をローカルで設定
  • Githubで新しいrepositoryを作成
  • Githubへpush
  • Netlifyにて新しいサイトを作成（Githubとの紐付け）
  • GoDaddyでCNAMEとANAMEの設定
  • サイトの内容を変更し、Githubの本番環境へディプロイ

プロセスの詳細は、以下の記事に書かれております。

【保存版】Gatsbyで英語のポートフォリオサイトを0から立ち上げるまでの全行程。(2020年2月11日時点)

ほぼほぼテンプレートを踏襲しておりますので、基本的な構成にはあまり時間がかかりませんでしたが、幾つかハマったポイントがありましたので、次のセクションで共有させていただきます。

サイト作りで学んだ点

今回のサイト作りで特に学びのあった以下の3点について、書いていきます。

  • Emmetでjsxファイルのショートカットを設定する方法
  • lighthouseで画像の問題があった時の解決方法
  • Netlifyを使用したContact formの設定方法

1つ1つ振り返っていきます。

Emmetでjsxファイルのショートカットを設定する方法

コードエディターにはVisual Studio Codeを使用しておりますが、コードを書く上で、Emmetのショートカットはとても役立ちますよね。ただ、Gatsbyでは、jsxファイルを使用しており、デフォルトでは、Emmetはjsxファイル内でショートカットが使えない仕様となっております。そこで、jsxファイル内でもショートカットが使えるよう設定をしました。

Visual Studio Codeを開き、Code/Preferences/Settingsを開きます。

settings.jsonを開き、以下の情報を追加する。

Users/xxxx/Library/ApplicationSupport/Code/User/settings.json
{
  ...
  "emmet.includeLanguages":{
      "javascript": "javascriptreact"
  }
}

最後に、Visual Studio Codeを再起動すれば、設定が反映されております。

例えば、jsxファイル内のhtmlセクションにて、div.col-md-4と書いてタブを叩けば、以下のセットを出力してくれるので、とても便利です。 

<div className="col-md-4"></div>

設定にあたり、以下の動画を参考にさせていただきました。
Enable Emmet for React.js JSX in VSCode

lighthouseで画像の問題があった時の解決方法

ポートフォリオを作る上で、フリーの画像素材が必要になる時がありますよね。30Daysトライアルでも紹介されているo-danは僕自身もとても良く使います。

ただ、中には画像の容量が大きいため、そのままサイトに使ってしまうと、サイトの読み込みが遅くなってしまうことがあるので気をつけなければなりません。

今回の日本語ポートフォリオを作った際にも、画像の読み込みがとても遅く、画面のスクロールが正常に機能しなかったので、chrome検証ツールで確認したところ、lighthouseで問題が確認されました。

issue in lighthouse

そこで、lighthouseにて、紹介されているsharp packageを使用して、画像の容量を小さくします。

Serve responsive images

resize fileの作成

componentsフォルダー直下にresize.jsを作成し、その中に以下のコードを書きます。

src/components/resize.js
const sharp = require('sharp');
const fs = require('fs');
const directory = '../assets/images'; //容量を変更した画像が格納されているパスです。

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(870, 522) // width, heightを必要に応じて変更しますが、870, 522で見栄えの良い、それでいて容量の低い画像が作成されます。(数10kB)
    .toFile(`${directory}/${file}-small.jpg`);
  });

そして、このjavascriptファイルを実行してあげれば、容量の小さくなった画像が生成されます。

Terminalでsrc/components直下へ移動し、

Terminal
node resize.js

これで、オッケーです。

Netlifyを使用したContact formの設定方法

最後です。Netlifyを使ってのContact formの設定方法は、以下の記事でも書きましたが、使用するGatsbyのテンプレートによって、必要な設定が異なってきます。ということで、今回使用しているgatsby-starter-fortyのケースを書いていきます。　　

【保存版】WordPressをGatsby+Contentfulに移行する全工程（2020年2月24日時点）

テンプレートには既にContact formが存在しますが、それだけでは動きません。

大事なことは以下の2点です。

  • formタグにdata-netlify=“true” data-netlify-honeypot=“bot-field”を追加する。
  • inputタグ(type=“hidden”)を追加する。
src/components/Contact.js
import React from 'react'

const Contact = (props) => (
  <section id="contact">
    <div className="inner">
      <header className="major">
        <h2>お問い合わせ</h2>
      </header>
      <div className="grid-wrapper">
        <div className="col-12">
          <form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field"> //この行を編集しました。
          <input type="hidden" name="form-name" value="contact" />　//この行を追加しました。
            <div className="field half first">
                <label htmlFor="name">Name</label>
                <input type="text" name="name" id="name" />
            </div>
            <div className="field half">
                <label htmlFor="email">Email</label>
                <input type="text" name="email" id="email" />
            </div>
            <div className="field">
                <label htmlFor="message">Message</label>
                <textarea name="message" id="message" rows="6"></textarea>
            </div>
            <ul className="actions">
                <li><input type="submit" value="Send Message" className="special" /></li>
                <li><input type="reset" value="Clear" /></li>
            </ul>
          </form>
        </div>
      </div>
    </div>
  </section>
)

export default Contact

これで、contact formが正常に動くようになりました。メールを受信したら、Netlifyのページで確認できます。Contact formから受信したメールを特定のアドレスへ送信する場合には、Netlifyで設定を行います。

まずは、Netlify上のSettings/Settings/Formsにて、Notificationの設定を行います。

notification

設定が終われば、メールが指定されたアドレスへ転送されるようになります。

notification

まとめ

いかがでしたでしょうか。ようやく日本語でのポートフォリオができました。このポートフォリオをツールとして利用し、営業をはじめていきたいと考えております。

この記事では大きく以下2点について書きました。

  • 日本語ポートフォリオの立ち上げプロセス
  • サイト作りで学んだ点

それでは、本日は以上です。

シェアする

管理人

めがね

ドイツ現地採用サラリーマンです。色々書いてます。

HOME

Copyright - 筋肉めがね. 2019-2021 All Rights Reserved.