株式会社ブラキオ｜埼玉県越谷市のJamstackが得意なWEB制作会社
Support your website by development.JamstackをはじめとするNext.js, React, TypeScriptを使ったフロントエンド開発、承ります。 フロントエンド開発・ホームページ制作をご依頼ならブラキオにお任せください。 株式会社ブラキオはWEBサービスの開発やホームページ制作および運用・保守を行っています。 モダンな技術でつくる高品質なソリューションを低価格でご提供します。 法人ではありますが、社長ひとりの会社です。 そのため安定した品質のご提供、細かいご要望への対応や迅速なやりとりができます。 SERVICE事業内容 WEBサービス開発Next.js,React,TypeScriptによるフロントエンド開発をメインにしており、特にComponentの設計を得意としております。 今まで業務委託としてジョインした複数プロダクトでの経験を活かし
【超初心者向け】「Micro CMS」のはじめ方。｜Koushi Kagawa
このnoteの対象者： - Headless CMSというのを聞いたことがある（あるいは勉強したい） - エンジニアではないので、専門用語難しい - 簡単にHeadless CMSの使い方を知りたい。 【注意】 このnoteの情報は古い可能性があります。正確なMicro CMSの情報は、Micro CMSの公式ドキュメントをご確認ください。 『Headless CMSとは？』『Micro CMSとは？』『Micro CMSの利用方法』- Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 Micro CMSは日本語であることと、ある程度マニュアルがまとまっているので、ドキュメント確認していただければ基本的には理解できると思います。 ここからは、使っていて気になったり、私自身が止まってしまった箇所を細く入れ
React & GatsbyJS開発入門 - mottox2（つのぶえ出版） - BOOTH
既刊「GatsbyJS Guidebook」を改訂して技術書典10で頒布したものです。 ■ 概要 第1章ではReactのおさらいをしつつJSXでポートフォリオを構築します。最後にReact単体でウェブサイトを作る際のデメリットを確認し第2章でGatsbyに入門します。 第2章ではポートフォリオの要件を達成するGatsbyのサイトを作成します。Gatsbyのルーティング、データの取扱、Netlifyのデプロイまで一通りサイトが作れるレベルまでやります。 第3章では記事データを外部のmicroCMSというHeadless CMS（Viewを持たないCMS）に保存し、そのデータをもとにサイトを構築する方法を学びます。 第4章では公式情報への当たり方やGatsbyをより便利に扱うためのテクニックを紹介します。 ■ 対象読者 本書では、次のような方を対象読者として執筆しています。 • Git/Gi
Gatsbyjs + Netlify + Contentful で Blogを作ってみた。 - Qiita
Gatsbyjs + Netlify + Contentful で Blogを作成 今回作成するサイトのDemoです。 こちらが今回実際に作成したBlogです。 以前にgatsby-starter-blogでブログを作成したのですがCMSを利用したいと思い、 新たにgatsby-starter-gcnでブログを作成したので備忘録を残します。 利用したサービス Gatsbyjs GatsbyjsはReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。 Gatsbyjsでなにか作りたい方はテンプレートが豊富に用意されているので、そちらを利用するといいと思います。 Netlify Netlifyは静的なサイトを高速で提供できるホスティングWebサービスです。 フロントエンドのビルド、デプロイ、ホスティングの全てを高速に行ってくれます。 また、NetlifyはGit
Gatsby ソーシャルボタンを画面遷移時にも正しく表示する方法｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
土居です。新型コロナウイルスによる昨今の事情もあって、元々あまり外出しない方であった性質にさらに拍車が掛かっています。そこに赤ちゃんのお世話であまり手元が空かないことも加って、映像作品やテレビの視聴をすることが増えました。ドラマとかあんまり観なかったけど、けっこう面白いな。。。（いまさら）と思いながらのんびり過ごしています。 Gatsbyでソーシャルボタンを追加する 各種公式 (FaceBookはこちら)からシェアボタンのコードを取得して、利用するだけ。。かと思っていたのですが、 あれ？ はてなブックマークは正しく表示されていますが、TwitterとFacebookが単なるリンクになってしまっています。 リロードすると、ボタンが表示されている どうも初期表示時や、他ページに移動したときには表示されていませんが、リロードすると表示されているようでした。 そこで、以下を追加します。 const
Gatsby Cloud で Contentful にプレビュー環境を簡単構築する - Qiita
Gatsby Cloud を使うと、Gatsby + Contentful で構築したサイトにプレビュー機能を簡単に実装できたので、その手順を紹介します。 Gatsby Cloud とは Gatsby Cloud は、Gatsby 社が提供するクラウドサービスで、Gatsby 製サイトのビルド、デプロイ、ホスティング、CMSプレビューなどの機能を基本無料で使うことができます。 有料プランでは、月間のビルド数上限が増えたり、並列ビルドが可能な Incremental Builds を利用可能になります。 いくつか機能を簡単に紹介します。 Lighthouse Reports 各ビルドに Lighthouse のレポートを出力することが可能です。 ビルド履歴にスコアが残るので、推移が見えて良いです。 Gatsby Preview この記事のメインである、サイトのプレビュー機能です。 データソー
GatsbyJSをYouTubeで学べる「The Great Gatsby Bootcamp」をやってみたら最高だった - hiro08gh
こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 The Great Gatsby Bootcampとは？ www.youtube.com これは、YouTubeで学べるGatsbyJSのチュートリアルです。約4時間30分のコンテンツになります。 非常に質の高いチュートリアル動画ですが、全編英語です。しかし、英語が聞き取れない方でも動画を見ながら写経すれば大丈夫です。実際に、私は英語が全くわかりません笑 コンテンツ内容 動画の概要をざっと
基礎から始めるGatsbyJS入門 | アールエフェクト
Gatsbyとは GatsbyはStatic Site Generator(静的サイトジェネレーター)でReactをベースに開発されているフレームワークです。Gatsbyを理解するためにはJavaScriptだけではなくReact, GraphQLなどの基礎知識が必要となります。 Gatsbyではデータを取得する際にはGraphQLを利用します。GraphQLを使って内部リソースのMarkdownファイル、データベース、CSVファイルまたは外部リソースのContentfulやWordPressなどさまざまなリソースからデータを取得することができます。WordPressのテーマに対応するStarter(スターター)やPlugin(プラグイン)も豊富にあるため効率的にサイト構築を行うことができます。 Gatsbyを使いこなすためにはPluginにどのようなものがあるかも理解する必要があります。
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
こんにちはhiro08です。 先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。 補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。 www.gatsbyjs.org いままでの課題点 いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、 一部の変更でもすべてのページが再ビルドされてしまうため、ビルド効率が悪い(CI/CDを使ってる場合消費量が多くなってしまう) ビルド
GatsbyでGoogle Lighthouseで満点を取るブログを一から作る - Qiita
概要 Gatsbyは、React.jsを使ったStatic Site Generator(SSG、静的サイトジェネレーター)で、とても早いウェブサイトを作れる技術です。静的なサイトだけでなく、CSRやSSRサイトも作れますが、この記事では静的サイトに集中しておきたいと思います。Gatsbyが使用するGraphQLについても扱います。 Google Lighthouse Score 学生時代には取れなかったオール100点 完成品はこちら コードはこちら 対象読者 Gatsbyがどう動くか知りたい方 Reactの基本的知識がある方 ブログをScratchで作りたい方 目標 Gatsbyの構造を知ることによって、色んなライブラリーを応用できるようになる 注意事項 完成品の基本的構造にふれるだけなので、上記の例と全く同じものが作られる記事ではありません。 Gatsbyのことがよくわかってて、開発時
【JAMstack】Gatsby.js + microCMS + Netlifyで読んだ本のメモを記録するアプリを作った | Qrunch（クランチ）
先日、自分が読んだ本のメモを記録するためのアプリを作りました。 https://flamboyant-varahamihira-2505ee.netlify.app/ 今まで読んだ本のメモを Evernote、keepに残したりしてたんだけど、なんかしっくりこなかった。 なので、超簡易的だけど自分で作ってみた。 メモは徐々に追加していく。https://t.co/OYt0BxkM8p pic.twitter.com/Expm75QOIn — 大里匠@琉球インタラクティブ (@dolphinrokujiro) June 1, 2020 技術構成 Gatsby.js https://www.gatsbyjs.org/ Reactベースのフレームワークです。 これで、マークアップ、API連携、取得データの表示、静的ビルドなど、フロントエンドの実装をしています。 microCMS https://
GatsbyをNetlifyでサイトやブログを作成しよう！（無料・サーバーレス・ほぼコーディング不要）｜masia02 (CipherWeb,LLC.)
GatsbyをNetlifyでサイトやブログを作成しよう！（無料・サーバーレス・ほぼコーディング不要） 次回の記事を簡潔にするための前フリ記事ですｗ Gatsbyは、Reactに基づく無料のオープンソースフレームワークであり、開発者が高速のウェブサイトやアプリを構築するのに役立つ静的サイトジェネレーターです。 スターターライブラリには、サイトやブログのテンプレートが複数あります。Netlify CMSに対応したテンプレートが増えております。 Netlifyは、静的ウェブサイトのためのホスティングサービスとサーバーレスのバックエンドサービスを提供しています。無料プランでも十分利用できると思います。 Netlify料金表スターター 個人向け $ 0 /月 ・無料SSL ・100GBの帯域幅/月 ・300ビルド分/月 簡単に利用するにはスターターライブラリから利用したいテンプレートのGithub
Gatsby製ブログでサイト内検索を実装しました
Gatsbyではビルド時に静的ページを生成する為、検索結果ページのように入力された検索ワードによって動的に内容が変わるようなページは生成することができません。 なので検索機能はSaaSなどを利用して実装するのが一般的になっているみたいなんですが、こちらのブログで検索機能を自前実装する方法が紹介されていて、参考にさせていただいたところ思った以上に手軽にできたので、今回の記事ではその実装の記録を残しておきたいと思います。 実装方法 以下のような手順を踏んで実装していきます。 useStaticQueryを使って検索コンポーネント内で全記事データを取得する 検索コンポーネント内で検索処理 参考にさせていただいたブログ記事では、ビルドの度に全記事分の情報が格納されたjsonファイルを生成し、それをReactコンポーネントからaxiosを使って取得していましたが、今回はuseStaticQueryを
【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita
Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者がJamstackなブログを作ってみる【Gatsby.js+microCMS+Bootstrap】（開発環境構築編）
GatsbyJSにGoogle Analyticsを導入する
Gatsbyでブログやメディアを作る時に使いたいプラグイン | MK Dev
サイト内検索できるAlogoliaとGatsbyの相性が良すぎる | MK Dev
コーポレートサイトをGatsbyJSを利用したJamstack構成でリニューアル
The Best React-Based Framework | Gatsby
