GatsbyでHello, worldからサイトを作ってみる(4) データの条件付き取得と詳細ページの作成

2 days ago#gatsby

概要一覧ページは一つあれば良かったので一覧ページを修正したが、詳細はそもそもポートフォリオの数だけページが必要になるため、ページからして自動で生成する必要が出てくる。そこで、今回はページが自動生成されるようにする方法を紹介したい。Gatsby Node APIを使うGatsbyでは、ページを作成する処理の流れの中で、利用する側に何か追加の処理をする必要があるか聞いてくれる仕組みが備わっている。利用する側で追加の処理をしてもらうためには、予め決められたファイル名()のファイルをプロジェクト直下に…

GatsbyでHello, worldからサイトを作ってみる(3) データの取得と一覧ページの作成

9 days ago#gatsby

概要ポートフォリオの一覧ページを、ポートフォリオが増えるごとにいちいち手直ししていては、とても大変である。なので、一箇所でデータを定義したら、それに沿っていろんなページが自動的に構成されるようにできれば便利である。そこで、今回はその第一歩として一覧ページが自動的に構成されるようにしたい。必要なプラグインのインストールGatsbyには標準でファイルを読み込む仕組みがないため、必要なプラグインを導入する。今回導入するプラグインはソースプラグインとトランスフォーマプラグインと呼ばれているものである。…

GatsbyでHello, worldからサイトを作ってみる(2) レイアウトの作成

16 days ago#gatsby

概要サイトのページにおいては、例えば「見た目の統一感を出すために各ページで同じレイアウトにする」といったように、どのページでも同じ部分、つまり共通部分というものが出てくる。なにも考えずにページをコピペし続けていると、共通部分がいろいろなページに書かれてしまい、いざレイアウトの変更をしようとしても気軽にできなくなってしまう。そこで、今回は共通部分とページごとに異なる部分を分離して記載する方法を紹介したい。画面のレイアウト検討ポートフォリオということで、ざっくり下記の図のようなレイアウトで作ってみ…

GatsbyでHello, worldからサイトを作ってみる

23 days ago#gatsby

概要Gatsbyは、ホームページ・ビルダーやDreamweaverと同じく、ユーザが作成したコンテンツを組み合わせパブリッシュを行うことで、最終的にHTMLやJS、CSSのWebサイト用データを出力する、静的サイトジェネレータというソフトウェアである。出来上がったファイルはFTPサイトなりGithub Pagesなりにアップロードすれば、HTTPサーバの仕組みだけでWebページが公開できるため運用がカンタンである。Gatsbyはサイトづくりに便利な仕組みが最初から揃っており手間が少ない反面、ち…

Cloudwatch Logs Insightsの活用事例

6 months ago#AWS

11/27にリリースされた新機能Cloudwatch Logs Insightsが障害調査を進める上で有用だったため紹介したい。Cloudwatch Logsの課題AWSのイベントログやその他のログ等を管理するサービスとしてCloudwatch Logsは有用であるが、実際にサービス運用を始めて、データ量が増えてくるにつれて、だんだんと使いづらい部分が見えてくる。障害の発生状況を細かく条件設定して見るログから障害の傾向を分析したいが、集計するのが億劫もちろんアラームでログ監視をする方が効果的な…