タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.（現新規事業開発部）で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳！」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1react v17.0.1gatsby v4.11.2 WordPressとGatsby用の環境を作る WordPressで記事の更新を行い、Gatsby側でそのデータを受け取って実際のサイトに表示させるようにします。それはWordPress用のドメインと、実際のサイトを表示させるためのドメインの２つが必要になるということを覚えておきましょう。 今回は本番環境でサイトを表示させる方法については説明していません。環境構築の手順とGatsbyを使ってWordPressからデータを取得して基本的なページを表示させる方法について説明しています。 まずは環
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ Webサイトのホスティングサービスを提供するNetlifyは、静的サイトジェネレータGatsby.jsの開発元であり、GatsbyをベースにしたWebサイトホスティングサービスを提供しているGatsbyの買収を発表しました（Netlifyの発表、Gatsbyの発表）。 We’re thrilled to announce that we have acquired Gatsby Inc.! Together we will build the future of composable, and empower developers with flexibility and choice in building composable web experiences.
本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。 🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰 はじめまして、フロントエンドエンジニアの牧と申します。 今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。 リニューアルの概要について Jamstackとは 今回の採用サービスと採用理由 microCMS（ヘッドレスCMS） Gatsby（静的サイトジェネレーター） Netlify（CDN/ADN） 各サービスを使ってみた所感 microCMS Gatsby Netlify 最後に リニューアルの概要について リニューアルの背景やコンセプトについては別記事にて記載しておりますので、こちらも合わせてご覧いただければと思います。 tech.nri-net.com Jamsta
I’m excited to announce that Gatsby Inc. is joining Netlify in order to spread the growth of Gatsby and composable architectures across the entire web. To see how we got here, let’s start by rewinding back in time. Eight years ago, I was a front-end developer, and I fell in love with React. At the time, React was a tiny emerging framework for apps, but I wanted to build a website with it. So I too
Purpose-built for TypeScript and designed around established AI patterns, Mastra gives you everything you need to build great AI applications out-of-the-box. Some highlights include: Model routing - Connect to 40+ providers through one standard interface. Use models from OpenAI, Anthropic, Gemini, and more. Agents - Build autonomous agents that use LLMs and tools to solve open-ended tasks. Agents
はじめてGatsbyを使ってページをビルドしたとき大量のJSファイルが同時に生成されているのを見つけました。 単純にHTMLだけを生成すると思っていたので少し予想と異なり混乱しましたが、勉強を進めていくとGatsbyのより便利な側面が見えてきました。 この記事の概要 Gatsbyはプリレンダリングをしている クライアント側でページを生成することも可能 用語の整理 静的レンダリング 静的レンダリングは 「全てのページ分の HTML ファイルをあらかじめ生成しておき、それを配信するという方法」 です。 先にファイルを生成しておくことでサーバーの計算量を減らすことができ、素早くコンテンツを提供することが可能です。 また、静的ファイルをホスティングできれば良いので S3 や Netlify などにデプロイすることも可能です。 静的レンダリングの問題点はリクエストが予測できない場合にあります。 検索
SAN FRANCISCO – February 1, 2023 – Netlify, the leading platform for modern web development, today announced that it has acquired Gatsby Inc., providers of an advanced cloud platform for web delivery and content orchestration, and creators of the open source framework Gatsby. The acquisition of Gatsby is Netlify’s latest move to support its vision of empowering developers at companies such as Twil
正直、無料プランで十分です。 使い方 ツールはどうこう言う前に一回触ってみるのが大切なので早速触っていきます。 どんなもんか見たいという人はここからウェブサイト見れます(ウェブサイトもノーコードで作られてるっぽい) サインイン/サインアップ 下記のページからGoogleアカウント、GitHubアカウント、メールアドレスで登録することができます。 エクスポートとかがしたいのであればGitHubアカウントで登録しておくと後々楽です。 プロジェクト作成 サインアップが完了すると、このようなページに飛ばされます。 ここがダッシュボードでプロジェクトの管理や作成が可能です。 真ん中にある「Start Building」と書いてある黒いボタンを押してプロジェクトを作成します。 黒いボタンを押すと「1から作るか」「テンプレートを利用するか」を選ぶことが可能です。 今回は試しなのでなにか良さげなテンプレー
URL は 2023-no-gatsby だが、これは 「2023 の gatsby」であって「NO！」ではない。「YES！」だ。 定期的に 「Gatsby は良いぞ」なブログを書いていますが今日もそれを書いていく。 ブログが新しくなりました(2 ヶ月前に)ので、その報告と技術的な解説 なぜ私は Gatsby でブログを作っているのか Gatsby3 はいいぞ Gatsby は React を使ったハイパフォーマンスな静的サイトジェネレータの先駆け的な存在だ。リリース当初から チャンク最適化、画像の最適化、CSS の最適化などが実装されており、後のさまざまな SSG FW に影響を与えた。 Next.js もその一例であり、v9 あたりで SSG がサポートされたときにはこれらの多くの機能が入り、定期的に Gatsby の機能を取り入れている。残念ながら Next.js で SSG ができ
We run an annual survey of web developers and have shared that data with the community in 2020, 2021 and 2022. While that data is about web developers as a whole, we often get questions about what framework usage looks like on Netlify specifically. So we dug into our data and here’s what we found. Netlify is a pioneer of the composable web, sometimes called the Jamstack: this architectural approac
JSer.info #530 - Gatsby v3がリリースされました。 Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby Gatsby v3.0 (March 2021 #1) ローカルでは実際にアクセスされたページだけをビルドすることで、全体を再構築せずにビルドする挙動がデフォルトとなっています。これによって必要なページだけをビルドするため、開発時のビルド待ち時間を少なくしています。 破壊的変更としてNode.js 12未満のサポート終了、React 17/webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更などが含まれています。 マイグレーション方法については、次のドキュメントに丁寧な解説が書かれています。
JSer.info #559 - Web Componentsを扱うライブラリであるLit 2がリリースされました。 Announcing Lit 2 stable release – Lit Lit 2.0 Release Livestream - YouTube Lit 2は今までLitElement 2.xとlit-html 1.xという別々のパッケージになったものを統合していて、litという新しいパッケージ担っています。 classベースのDirectives API、非同期Directives、Reactive Controllersの追加されています。 要素全体に対して影響を与えられるElement expressions、タグ名などに変数を使えるStatic expressionsなども追加されています。 また、実験的にSSRのサポートなども追加されています。 LitElem
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
tl;dr: We are excited to announce Gatsby v3.0.0! This new version of Gatsby’s core framework introduces massive improvement to the developer and user experience. Upgrade now using our v2 to v3 migration guide. Meet the latest Gatsby Ever since the very first version of Gatsby we’ve simplified the building of performant React sites for web developers. Optimized loading, prefetching, responsive imag
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
「Muddy Web」はMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。平山氏と三好氏からは、株式会社CAMにおける「Gatsby」の活用方法について発表がありました。全2回。前半は、自社の占いサービスの基盤「Fensi」の概要と「Gatsby」のシャドーイング機能について。 占いサービスを支える基盤「Fensi」平山大暉氏（以下、平山）：「CAMがGatsbyで新規サービスを爆速で開発できるワケ」というタイトルで話します。よろしくお願いします。 自己紹介から始めます。2019年新卒の平山大暉です。趣味ですが、最近は外に出ることがなくなってしまったので、掃除にはまっています。特にお風呂場とか洗面台とか、水回りの掃除に最近はまっています。 三好良弥氏（以下、三好）：2020年新卒の株式会
「Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」」について記述した記事です
JSer.info #618 - Parcel 2.8.0がリリースされました。 Parcel v2.8.0 Release v2.8.0 · parcel-bundler/parcel Parcel 2.8.0では、ViteとTurbopackのベンチマーク比較から着想を得たパフォーマンス改善が含まれています。 Is Turbopack really 10x Faster than Vite? · Discussion #8 · yyx990803/vite-vs-next-turbo-hmr 大規模なアプリケーションでのビルド時間とバンドルサイズの削減、HMRのincremental buildのパフォーマンス改善、Tree Shakingの改善によるバンドルサイズの削減などが含まれています。 Deno 1.28がリリースされました。 Deno 1.28: Featuring 1.3
GatsbyでMarkdownをソースにするブログを作ったらサイト内検索が欲しくなった。 検索自前で作るの面倒…とはいえ検索がないブログは不便なんだよなあ…。 他所に頼るならお手軽なGoogleのカスタム検索か、有能なAlgoliaを使うのが手っ取り早いが、Googleのカスタム検索はUIがカスタムしづらく、Algoliaは有料プランだとお値段が結構高い。 結果自前で渋々実装しなければならないケースもままあると思う。 で、実際にサイト内検索の実装をやってみた結果このメモが生まれたわけだが、これくらいの手間をかけないと日本語の検索として満足な動作を得られなかった。 やったこと Markdownからキーワードを抽出したJSONを生成キーワード抽出はKuromoji.jsを利用する最近の単語に反応させるため mecab-ipadic-neologd の辞書を追加mecab辞書をkuromoji辞
ベルリンオフィスの小西です。 Gatsbyでは、ビルド処理の効率化のためにインクリメンタルビルドという仕様があります。これはコードやデータソースの変更内容に基づき、更新が必要なHTMLファイルのサブセットのみを生成することで、ビルドの高速化を図る機能です。 非常に便利な機能で、静的サイトであることを意識させないくらい高速なビルドを行うことも可能なのですが、困ったことにGatsbyには「インクリメンタルビルド」と名のつくビルド方法が複数あります。 それぞれ動作する条件や環境が異なるため、今回はGatsbyサポートにもヒアリングしつつ、それぞれの概要を整理してみました。 各ビルドの説明 Incremental buildsと名のつくビルド方法は、大きく分けて3つあります。 1. Incremental builds Gatsbyのバージョン3からコアとして組み込まれている、インクリメンタルビル
それから、黄金の帽子も被るんだ。もし彼女が喜ぶんだったらね。 もし高く跳べるなら、彼女のために跳んであげるんだ。 彼女がこう叫ぶまで。「大好き、金ぴかの帽子を被って、高くジャンプするあなた。 あなたは私のもの！」 Then wear the gold hat, if that will move her; If you can bounce high, bounce for her too, Till she cry “Lover, gold-hatted, high-bouncing lover, I must have you!” - Thomas Parke D'Invilliers Chapter I 若くてまだ傷ついてばかりだった頃、父が言ってくれたことがある。今日に到るまで、父のこの言葉に思いを馳せては、自分なりに考えてきた。 「人の批判をしたくなることもあるだろうが」そう父は
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。 【結論】どれか1つ選ぶならGatsby.js Nuxt.js、Next.js、Gatsby.jsの順番で使いました。技術レベルのブレもあるため、完全にフラットな視点で選ぶのが難しいのが本音ですが、どれか1つ選ぶならGatsby.jsにします。その後、Next.js、Nuxt.jsと続きます。 詳細は以下に続きます。 開発環境の違い Next.jsがベストです。Zero Config（ゼロコンフィグ）を謳っていて、文字通り「設定が不要」です。もちろん、拡張することもできます。 私が行った拡張はたった1つ。イメージのドメイン設定だけです。 // next.config.js module.exports = { i
Gatsby 4 combines the control and scalability of server-side rendering with the performance of static-site generation, creating a whole new web of possibilities.
どうも、ベルリンオフィスの小西です。 本日はGatsbyのビルド時間を短縮する仕組み DSG を使ってみたので紹介します。 GatsbyのDSGってなぁに？ DSG (Deferred Static Generation)はGatsbyのバージョン4から追加された機能で、一部のページの生成を、ビルド時ではなくアクセスがあって初めて行います。 自分は 静的ページ遅延生成機能 と訳すとしっくりきました。 Gatsbyは静的ページ生成フレームワークのため、基本的にサイトビルド時に全ての静的ページを生成します。 これによりユーザーがどのページをリクエストしても高速なページの表示が可能になるのですが、一方でページ数が増えるに従ってビルド時間も比例して増えていくことになります。 数百ページ程度なら問題になることはないと思いますが、ヘッドレスCMSなどを使って数千ページ以上の規模になってくると、一回一回
華麗なる Gatsby + WordPress のメールフォーム実装方法 – Contact Form 7 活用例 Gatsby + WordPress 構成の場合におけるメールフォームは、どのように実装すればいいだろうか？ このエントリーでは、Gatsby のメールフォームから Contact Form 7（WP プラグイン）にアクセスしてメール送信する方法を共有したい。 はじめに Netlify にホスティングするならば Netlify Forms を選ぶだろうし、それ以外では、ホスティング先に関わらず静的サイトからアクセスできるフォームサービスも、いくつか選択肢がある。その、いずれもリーズナブルで活用できるし、専用の Web API エンドポイントとアクセスキーを設定するだけ、という簡単なものだ。 ただ、メールのフォーマットに不自由さがあったり、利用回数による課金の可能性を考えると不
Gatsby and Next.js, from a first glance, could look pretty much the same. Both are React-based frameworks, do SSR, SSG, have big communities. We actively use both technologies in our agency, but we think that they fit better for different use cases. I often get asked why we use Gatsby instead of Next.js for websites development? This article will explain it in detail. Choosing the technology for w
どうも、ベルリンオフィスの小西です。 UAからGA4になって色々大変なGoogle Analyticsですが、GTM(Google Tag Manager)を通じてGAタグを埋め込んでおけば、基本的にはJamstackなサイトでもうまくページビューなどを検知してくれます。 今回は自分で設定が必要な部分 = 「フォーム送信などのイベント発生データをGoogle Analyticsに送信する」 を行なってみたいと思います。 前提 Google Analytics（GA4）、GTMの基本設定は終わっている Gatsbyのセットアップが完了している セットアップ記事は→ 1. Gatsby立ち上げ GTM側の準備 トリガーの作成 重要なのは [Event name] で、アプリ側から送信するキー名と一致させる必要があるため [formSubmit] としておきます。トリガー条件は [All Cus
概要 Kentaro Matsushitaさんが開発されたOGP画像生成ライブラリ「catchy-image」を使用して、Gatsby.js製ブログにOGPを自動生成・設定する実装をしました。お手軽に記事タイトルに応じたOGP生成ができる素晴らしいライブラリです。gatsby-starter-blogをベースに構築したブログを想定し、導入までの作業をメモしておきます。 完成したOGP画像の例 記事のタイトルとサイト名、アイコンが記載されたシンプルなOGP画像が完成しました。 執筆時構成 node v12.15.0 gatsby 2.27.5 catchy-image 0.1.6 最新の情報はcatchy-imageリポジトリのREADMEをご参照ください。 手順 catchy-imageをインストール catchy-image パッケージをインストールします。 npm install --
はじめに なんか既視感のあるタイトルから始まります、今回の記事。本稿では、「これからGatsbyJs」を使ってブログ・メディアを作ってみたい皆さんに向けて、私がハマって辛かった情報をご提供できればと思います。 さて、本題に入る前に、ひとつだけ言わせてください。「みんな、もっとContentful + Gatsbyの構成を使って！」 …いや、あのですね、情報が少なすぎませんか？どうして浅瀬の民がちょっとしたブログを作るためにGatsby本体のissueをアサリに行かなくてはならないのか。 あ！そっかぁ、潮干狩りか！え、あ、ちょっまっ…ｺﾞﾝ! ｲﾃﾃﾃ… 今回の潮干狩り会場のご紹介 では、今回の潮干狩り会場についてご紹介させていただきます（強い意志）。会場となる干潟は以下の要素で構成されております。こちら事前情報程度の簡単なものですので、詳しくは各項目のリンク先をご覧ください。 Gatsby
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
先日レセナの「ドライシールド デオドラント パウダースティック」を試しましたが、 【制汗剤】ワキ汗を抑制すると言う「レセナ メン ドライシールド パウダースティック」を試す。 消臭効果はあるものの（真夏日は）脇汗は全く止まりませんでした（笑 Amazonの「制汗デオドラントの売れ筋ランキング」によると「８ｘ４メン ロールオン」の 「フレッシュソープ」や「無香料」がよく売れてるようですが、 エイトフォー メン ロールオン フレッシュソープ Amazon 楽天 YahooShop 上位の「８ｘ４メン 濃厚 ロールオン ディープシトラス」が気になったものの、 エイトフォーメン 濃厚 ロールオン ディープシトラス Amazon 楽天 YahooShop 売れ筋の上位に居た「GATSBY EXプレミアム デオドラントロールオン」が同じくらいの価格で【最強】を謳うのでコチラを購入してみました。 GAT
Building upon the success of previous Gatsby features, Gatsby 5 boasts impressive, bleeding-edge technology to supercharge your sites. Over the past year (like every other), we have been obsessed with build and site performance. We recently reviewed our most impactful major changes over the past seven quarters in our Gatsby’s Greatest Hits post, and we’re not slowing down as we enter the final str
Azure Static Web Appsを無料で試す みなさん、Azure Static Web Apps知ってますか？ 私はpreviewのときから使ってまして、Gatsby製の個人ブログをデプロイしていました。 なにがいいかって、とにかくお手軽なんです。 Gatsbyブログをただホストするだけなら実作業10分もいらないレベルです。 もちろん、開発をしているエンジニアじゃなくても全然問題ありません。実際に私はインフラ寄りのエンジニアでゴリゴリの開発畑にいるわけでは決してありません。 これってすごいことじゃないですか？ 今回は、とにかくスピード勝負でGatsbyブログをデプロイするところまで目指します。 静的なブログをホストするだけならAzureのBlob StorageやawsのS3でも可能ですが、時代は変わりました。 Azure Static Web Appsなら無料かつ爆速でGit
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く