Gatsbyスターターを使ってリンク集をつくる

13163 ワード
gatsby React JavaScript JavaScript テキストリンク

前回に引き続きGatsbyの報告です

今回完成したサイトはこちら「パソコンのべんきょうのためのリンク」

前回作ったサイト

前回もリンク集を作りました。その時の記事が次です。
「Gatsby -> github -> netlifyでリンク集をデプロイしました」
その続きで、さらにちょっといいやつを作れそうだったので、
お助けを受けながらやってみることにしました。

前回オッケー👌のところ

  • 私の初デプロイ！(railsチュートリアルは除く)
  • HTML CSSだけでつくったことはあるが、素人感満載でもやもやだったが、今回はちょっと動きのあるものになっていい感じ！

次の課題

  • 学校の環境で開くと、どうやってもレイアウト崩れる
  • 画像がないので、できたら入れたい。

over40web club勉強会

で、@pitangさんのアドバイスで、画像もあつかえる新たなスターターを使用して、内容はそのままで新しいサイトを作ることにしました。そしてまた、over40WebClub で勉強会をしてもらい、サイトデプロイに向けてスタートしました。

手順

1. Gatsbyを使えるようにするための準備

  1. node.jsを環境にインストールしておく必要もあります。こちらを参考にしました。
  2. GatsbyCLIのインストール

2. スターターを選んでインストール

今回使うスターターはこれ。
gatsby-airtable-listing

AirTableというデータベース的なウェブサービスと連携して、サイトを構築するスターターです。初心者に優しいGUI操作ができて、しかも、リレーショナルなものも作れて、無料という素敵なサービスです。もちろん、ある程度の規模で使うなら有料プランということになりますが、ぼくが作ろうとするくらいなら無料プランで十分な感じです。

コマンドラインからインストールします！

＄ gatsby new my-gatsby-project https://github.com/wkocjan/gatsby-airtable-listing

my-gatsby-projectのところは自分のプロジェクト名にします。

前回のスターターはこの段階でサーバーを起こせば、サンプルのサイトが表示されたので、
ここで、調子に乗って gatsby develop をして、localhost:8000を表示しましたが、エラー・・・。

3. AirTableとの連携設定

AirTableとの連携の設定をしていなかったので、データベースにつなげませんというエラーでした。スターターのREADMEに説明が書かれていたので、それを読みつつ（英語で時間がかかる）すすめました。

1. AirTableアカウントを作成します

2. 用意してくれているデータベースをコピーして自分のアカウントにいただきます

  1. README.md内　### Create Airtable baseのところにあるリンクにとびます
  2. 画面右上の’CopyBase’をクリック
  3. これで、自分のAirTableアカウントのところに、データベースができました

3. .envファイル API設定編集

1.アプリのルートフォルダにある　.env.example をコピーしてファイル名を.envに変更
2. API_KEYとBASED_IDは、データベースを表示している画面右上のHelpからAPIDocumentationのところへ行くと見ることができます。ちょっとさがすのに苦労をしました。
3. BASED_ID　API DocumentationーINTRODUCTIONのところにありました
4. API_KEY 　API DocumentationーAUTHENTICATION　さらに、accountページへとびました。結局、自分のアカウントページへ行くと見ることができるということでした。

env.example
# Airtable API Key
AIRTABLE_API_KEY=""
AIRTABLE_BASE_ID=""
AIRTABLE_TABLE_NAME="Destinations"

とりあえずこれでAirTableとの連携が完了しました。
gatsby develop して、localhost:8000でめでたくサンプルサイトと同じように表示されました！

4. 学習リンク集用にカスタマイズ

編集したところは以下の通り。
reactのことやjavascriptを十分理解していないので、
コードを見ながら「ここかなあ」と予想したり、
over40WebClub勉強会やその後もslackで教えてもらったりしながら、
なんとかカスタマイズしました。

  1. タイトルなどのメタデータ
  2. アイコン、ヘッダー画像などの変更
  3. カード、カードからとんでいくモーダルウィンドウのラベル
  4. カードからサイトへの直接リンク作成

1. タイトルなどのメタデータ

src/pages/index.jsxを触ります。


      <SiteMetadata
        title="Travel destinations"
        description="Check the most popular travel destinations in Europe."
        image={data.hero.url}
      />

      <Hero
        image={data.hero}
        tag="#travel"
        title="Travel destinations"
        description="Check the most popular travel locations in Europe."
      />

title,description,tagなどの中身を書き換えました。

2. アイコン、ヘッダー画像などの変更

アイコン画像は、imagesフォルダ内においておきます

gatsby-config.jsの中、gatsby-plugin-manifestのoptions内、

icon:の値を、自分のアイコン画像のパス・ファイル名にします。
nameとか、shotr_nameとかも、自分の目的にあった名前にかえました。
この辺はなんとなくです。

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Son Hiroki Hong-su`,
        short_name: `Son Hiroki Hong-su`, 
        start_url: `/`,
        background_color: `#fff`,
        theme_color: `#4299e1`,
        display: `standalone`,
        icon: `src/images/icon-son.png`,
      },
    },

ヘッダー画像は、pages/index.isxとHero.jsxをさわりました。

pages/index.jsx の最後の方

export const query = graphql`
  query IndexQuery($tableName: String!) {
    hero: file(relativePath: { eq: "tm-image.jpg" }) {
      ...HeroImageFragment
    }

imagesフォルダ内に使いたいヘッダ画像を入れておいて、
貼り付けた部分の３行目あたりのファイル名を変更します。
hero: file(relativePath: { eq: "tm-image.jpg" }) {

実際のコンポーネントはHero.jsxで、そこでgraphqlをimportして、この画像を使っているという感じでしょうか。

Hero.jsx
  • 実際の表示部分

<Img
  alt={title}
  //className="grayscale-1 blend-multiply"
  fadeIn={false}
  fixed={[
  { ...image.childImageSharp.desktop, media: `(min-width: 768px)` },
  { ...image.childImageSharp.mobile, media: `(max-width: 767px)` },
  ]}
/>

この部分のclassName="grayscale-1 blend-multiply"のところは無効にしました。
たぶん、tailwindcssというやつで、画像に暗い加工が施されていたと思われます。

  • export constのところ

ヘッダー画像がどうしても勝手にトリミングされてしまって
上の部分がきれてしまうという問題があって、なかなかわかりませんでした。
どうやらGatsby-imageというプラグインの具合で
勝手にそうなることまではわかったのですが、自力ではそこまで。
いつものように@pitangさんに教えてもらって、
画像のトリミング具合を以下の部分で調整。desktop: の　heightを変更しました。


export const query = graphql`
  fragment HeroImageFragment on File {
    url: publicURL
    childImageSharp {
      mobile: fixed(width: 768, height: 240, quality: 80, cropFocus: CENTER) {
        ...GatsbyImageSharpFixed_withWebp
      }
      desktop: fixed(width: 1248, height: 500, quality: 85, cropFocus: SOUTH) {
        ...GatsbyImageSharpFixed_withWebp
      }
    }
  }
`

カード一覧のラベル変更

card.jsx
もとになったサイトで旅行先の国名表示のところには
リンクの紹介者名を入れていたので、
そのラベルを「しょうかいした人」に変更しました。

カードが一覧表示されているところから、サイトへのリンクを作りました。

こちらも、まずは　card.jsx
「データベースのこのカラムをとってきて」という命令が書いているのだと思いますが
もとのサイトではカード一覧にurlカラムは必要ないので、書かれていなかったところへurlを追加。


export const Card = props => {
  const {

    image: {
      localFiles: [cover],
    },
    name,
    navigation,
    slug,
    summary,
    country,
    url,
  } = props

この変更だけではエラーとなってしまいました。
pages/index.jsxの
export const query = graphqlの設定にも
urlカラムを追加しました。
これも、自力で解決したのではなく
Over40WebClubの勉強会（という名の個別指導）で
解決！

5 できあがり

カカスタマイズしたのはたぶんこのくらいのはず・・・。
なにか、認識が違うことや、まちがいがあったらコメントなどくれるとうれしいです！

deployはnetlifyを使いました。
githubとの連携で、git pushすれば変更が反映されます。
ただ、データベースを更新したときには、git status　に変更がなくcommit,pushできなくてどうするか困りました。
netlifyCLIをインストールして、ターミナルからnetlify deploy --prodでOKとわかりました。

前回に続いて２つ目のデプロイは自分的にも満足度の高いものでした！

プログラミング学習をすすめるにあたってオンラインコミュニティは強い味方だと実感しています！