Data platform for PostgreSQL - Xata
Serverless Postgres Every database is a fully managed Postgres instance
Serverless Postgres Every database is a fully managed Postgres instance
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
https://redwoodjs.com/
DIST.40 「Jamstackの実際とミライ」での発表資料です。 https://dist.connpass.com/event/284922/
Compute@Edge’s unique isolation sandbox technology enables a fast, secure JavaScript experience as developers continue to enter into the growing serverless computing landscape. SAN FRANCISCO -- JULY 21, 2021 -- Fastly, Inc. (NYSE: FSLY), a global edge cloud platform provider, today announced the availability of JavaScript in Compute@Edge, allowing developers to build with even more flexibility in
Jamstackとは？ | 株式会社ピクセルグリッド
事前にデータを埋め込んだ静的HTMLを生成することで、配信するWebアプリケーションと、コンテンツを管理するCMSなどを完全に分離したアーキテクチャをJamstackといいます。静的HTMLでも、完全に分離したサービスやシステムのAPIを通じて、ブラウザで実行するJavaScriptで動的コンテンツを扱えます。 Jamstackでは静的HTMLがベースなので、CDNベースのホスティングサービスに配信を任せることができ、Webサーバーの管理や運用をなくせます。大量のアクセスに強く、高速に配信でき、セキュリティ面とコスト面でも有利です。 コンテンツを管理するCMS、ユーザー認証、支払いシステムが完全に別のサービスやシステムに分離されるため、既存の優れたサービスより自由に選択し、それらをAPIで繋ぐことで、必要な仕組みごとに適切なサービスを組み合わせられます。より少ない開発コストで高度な仕組みを
↓動画でも解説しています。 Headless CMSとは？ 近年、目にする機会が増えた「Headless CMS」という単語。この記事では、Headless CMS、関連技術、人気のサービスなど、導入に向けた基礎知識をご紹介していきます。導入のためのイメージ作りになれば幸いです。 キーワード1：CMS（Content Manegement System） CMS（Content Manegement System）は、コンテンツ、ファイル、ワークフロー、リポジトリなどの情報を管理・公開するシステム。身近なところでは、WEBメディアの記事、企業サイトの各ページ、ECサイトの商品情報などの管理・公開など幅広く使われています。 画像などのファイルや、投稿の変更履歴、権限の管理など、様々な機能を技術者でなくても利用できるのが特徴です。 CMSを代表するのがWordpress。 2003年にリリース
「CloudNative Days Tokyo 2019」にて発表した際のスライドです。
PWA Night CONFERENCE 2022の登壇資料です。
Sometimes our sites need a little sprinkling of content management. Not always. Not a lot. But a bit. The CMS market is thriving with affordable, approachable products, so we’re not short of options. Thankfully, it is a very different world to the one that used to force companies to splash out a ga-jillionty-one dollars (not an exact cost: I rounded to the nearest bazillion) for an all-singing, al
Jamstackという手法が2016年にNetlifyから初めて言及されてから6年。日本でも流行り始め、いろんな会社・個人の方々が使っていますね。今回のLTでは、なぜJamstackが生まれたのか？について、エンジニアを長くやってきた経験から感じたことをお話したいと思います。 最初にJamstackについて言及された、Matt Biilmannのカンファレンス動画 https://vimeo.com/163522126
Microsoft Build 2020 で、Azure App Service の新たなオプションとして 静的サイトのホスティング を実現する Static Web Apps が発表になりました（執筆時点で Public Preview）。JavaScript で開発する Web フロントエンドのメインストリームである SPA（Single Page Application)）や 静的サイトジェネレータを使う JAMstack の運用に最適化されているそうです。 詳細は 公式アナウンス や 公式ドキュメント: Azure Static Web Apps documentation を読んだ方がいいですが、ざっと現在わかっている機能や特徴を書いておきます。 App Service Static Web Apps の概要App Service Static Web Apps（名前が長いので以
仕事の都合上、Django を覚える必要が出たので、その素振り課題が欲しい + スプラトゥーンを強くなりたいというニーズが出会って スプラトゥーン 3 反省会会場 を作りました。 色々技術的な挑戦をしたのでそのまとめをします。 スプラトゥーン 3 反省会会場とは スプラトゥーン 3 反省会会場は、自分のスプラトゥーン３プレイ動画を録画して、後から見返して反省をするためのサイトです。ただ反省文を書くためだけに作っていたのですが、どうせなら改善点のアドバイスなどがもらえるようにと思って Youtube への紐付けと反省文を外部から見られるようにしています。 反省文を書こうと思ったきっかけはウデマエを上げたいからで、普段同じようなミスをしている気がしているのでしっかりと反省することと、その反省すべきシーンだけを後から何度でも検索して見返せるようにすることが目的です。 いまではご飯を食べる時は常に
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発 | GiFT（ギフト）株式会社
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発2019.12.13 今年はContentful芸のブログばかり書いていたら、Jamstackおじさん（通称Jamおじさん）になってしまいました。 今回は実際にリリースしたサービスでどのように実装したかを書いてみたいと思います。 最終更新 : 2019/12/16 今年はコーポレートサイトやオウンドメディアの開発には ContentfulやFirebaseを使ったサーバーレスな構成を多用させていただきました😇 2019年にContentfulを使って作ってきたものは、表に出せるもので以下のものがあります。 株式会社Neo Sports様 コーポレートサイト大崎電気工業株式会社様 farmwatch ブランドサイト弊社コーポレートサイトそれらの開発の中で知見が溜まってきたな〜とい
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
This is a statically generated Next.js site with a Notion powered blog that is deployed with Vercel. It leverages some upcoming features in Next.js like SSG support and built-in CSS support which allow us to achieve all of the benefits listed above including blazing fast speeds, great local editing experience, and always being available! Get started by creating a new page in Notion and clicking th
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！ | DevelopersIO
Cloudflareから、JamstackサイトがホストできるCloudflare Pages（Beta版）がリリースされました！ Cloudflare Pagesとは CDNやセキュリティのSaaSで有名なCloudflareが提供する、静的サイトのホスティングサービスです。 NetlifyやVercel（過去に書いたVercelの記事はこちら）と競合する位置づけで、Githubのリポジトリからソースを引っ張ってきて、静的で高速なウェブサイトを簡単にビルド&デプロイできます。 前提 今回はGatsby + Contentfulで構築したアプリを、Cloudflare Pagesでホストしてみようと思います。 アプリの構築からやりたい方は、過去に書いた記事を参考にしてみてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Git
Jamstackとは何を指すのか今一度考えてみる
Jamstack Advent Calendar 2019の4日目の記事です。 今回は、Jamstackという言葉が何を指すのかについて考察したいと思います。 なぜこの記事を書こうと思ったかというと、人によってJamstackという言葉の定義が異なっていると感じたためです。 Jamstackの公式サイトから読み解いていきたいと思います。 https://jamstack.org/ 以下、和訳（イタリック）と考察（太字）です。 Jamstackとは何かあなたはもうすでにJamstackなサイトが動いているのを目にしているかもしれません。 JavaScript, API, Markupの全てを含んでいる必要はありません。 自力でビルドされていても、JekyllやHugo、nuxt、Next、Gatsby等の静的サイトジェネレータで作られていても良いです。 すべてに共通するのはWebサーバーに依
Netlify（ネットリファイ）とは？ Web サイトを作成したとき、いったいどこにアップロードすればいいか頭を悩ませることはありませんか？ FC2 サーバーや、さくらのレンタルサーバー、ロリポップレンタルサーバーなどもありますが、今回は海外のサービスである Netlify（ネットリファイ） を紹介したいと思います。 自分で作成した HTML ファイルを公開する場合、手軽に利用できるのでおすすめです。 Netlifyは静的コンテンツを配信してくれるWebサービスNetlify（ネットリファイ） とは、静的コンテンツ（HTML・CSS・JavaScript) を配信してくれる Web サービスです。 Github や Gitlab 、Bitbucket といった Git リポジトリサービスと連携することで、git push をした途端に、サイトを更新することができます。 こんな方にオススメの
世界のJamstackとこれから
Jamstack Advent Calendar 最終日の記事です。 最終日ということで、締めっぽい内容を書いていきたいと思います。 JamstackについてJamstackとは何なのかについては以前書いた記事が参考になると思います。 2018年の後半あたりからJamstackという単語がちらほら流行り始め、2019年後半になって急激な広まりを感じています。 CSS NightやWordCampといった大きなイベントでも言及があったり、PixelGridさんが「Jamstackな会社です」と表明したり、特に今年の10月以降あたりから、畳み掛けるようにJamstackな話を聞くようになりました。 個人的には、WordPress界隈でもJamstackの話題が出てきたのが大きかったなと思います。 文脈としてはWordPressのRest APIを用いてJamstack構成にするというもので、そ
2020年1月15日、株式会社メルカリにて「Mercari x Merpay Frontend Tech Talk vol.4」が開催されました。フロントエンドの技術に興味があるエンジニアが集まり、各々の知見を共有します。プレゼンテーション「Pros and Cons of SSR and JAMStack」に登壇したのは、メルペイのSasaki Yutaka氏。JAMstackを使ったマイクロサービスの高速化と、そこから得られた知見について語りました。講演資料はこちら キャンペーンのマイクロサービスの高速化 _sskyu氏：では、「Pros and Cons of SSR and JAMstack」と題して発表させていただきます。 私はSasaki Yutakaと申します。メルペイには一昨年の9月1日に入社しまして、フロントエンドエンジニアをやっております。 今日話す内容ですが、去年の8
Get Faster Builds for Large Sites on Netlify: On-demand Builders
Today we’re excited to announce On-demand Builders, a new solution to improve build times for large sites on Netlify. Along with the proposal for Distributed Persistent Rendering (DPR), this release represents the first step forward in a significant evolution of the Jamstack architecture to support larger websites and faster development cycles—across any JavaScript framework. Reducing build times
ISRから考察するこれからのJamstack
2020年も残りわずかとなりました。 本記事は Jamstack Advent Calendar 2020 25日目の記事です。 弊社はmicroCMSというヘッドレスCMSを運営しているため、必然的にJamstack構成をやりたいという要望が舞い込んでくるのですが、その数も去年と比べると格段に増えたと感じています。 Jamstackの本家サイトもリニューアルされました。 いつの間にかロゴも出来てますね。 改めて読んでみると初期のサイトとは内容も一部変わっており、「Jamstackとは呼べない例」や「Webサーバーに依存しない」という記述が無くなりました。 Jamstackの定義は少しずつ時代に合わせて変わってきていると思われます。 JamstackとはJamstackとは、Webをより速く、安全に、簡単に拡張できるように設計されたアーキテクチャです。 SSG（Static Site Ge
この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。 こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.jsプロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms
GitHub Actionsで始めるお手軽Jamstack
高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学び | non-standard world株式会社
こんにちは。代表兼CTOの高崎です。 この前、自社運営の出版レーベルのECを高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」形式でリニューアルしました。 ヘッドレスコマースとは 海外のD2Cと呼ばれるテクノロジーを重視した製造小売で標準となっている次世代型のEC技術で、 データ（バックエンド）とデザイン（フロントエンド）の分離が特徴的なECサイトの作りです。 メリット 1.高速 以下は海外ECサイトがヘッドレス化する前と後で速度がどのように変わったかの例です。 左がShopifyを使ってヘッドレス化したサイトの映像で、右が旧来のECサイトです。 ご覧いただければスピードの差が一目瞭然かと思いますが、「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。」と言われる通り、高速であることはECサイトの売上に直結します。 また、高速なサ
チャリティーカンファレンス沖縄2020 Vol.1の発表資料です。
Jamstackとは何か？まずは基本を理解しよう！
はじめに昨今、ウェブ制作業界（その中でも特にフロントエンドと言われる領域）においてJamstackという言葉が流行を見せています。 検索のトレンドを確認できるGoogleトレンドで調べてみてもその注目度の高まりを確認できます。 そんなJamstackですが、言葉の定義はエンジニアにとってわかりやすい言葉を組み合わせたものです。 そのため非エンジニアの方にとってはとっつきづらい単語であることも事実です。 そこで本記事では特にエンジニアではない方でも理解しやすい形でのJamstackの解説ができればと思います。 JamstackとはJamstackという単語はアメリカの企業であるウェブサイト管理サービスを運用するNetlify社によって定義されました。 Jamstack公式サイト https://jamstack.org/ もともと、Jamstackとは下記のエンジニア向け単語の頭文字を取って
2021年12月14日に開催されたクリーク･アンド･リバー社（C&R社）主催、「フロントエンドエンジニアなら知っておきたい『Jamstack』～入門編～」のスライドです。 https://www.creativevillage.ne.jp/103727
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法 | non-standard world株式会社
こんにちは、代表兼エンジニアの高崎です。 寒くなってまいりましたが、皆様お体の調子は大丈夫でしょうか。 私達の会社では「世界観を作ってモノが売れるを、すべての人へ。」をミッションに主に製造小売のお客様のECサイトを制作しているのですが、現在、高速で開発効率の高い次世代のECサイトの作り方「ヘッドレスコマース�」を研究しています。 この記事では基本を共有できればと思います。 ヘッドレスコマースとは 従来型のECサイトが「デザイン（フロントエンド）」と「データ（バックエンド）」が一体化していたのに対し、ヘッドレスコマースは、「デザイン」と「データ」がきれいに分離したコマースサイトの作りです。 ヘッドレスを採用する理由 主にサイトの動作速度と開発効率を上げることができることから海外のD2Cブランドのサイトで採用が進んでいます。 とくにサイトの表示速度が２秒遅くなるだけで直帰率は50%増加すると言
こんにちは、エンジニアのmkataigiです。 突然ですが、PLAIDエンジニアブログをリニューアルしていました！ このブログは2016年4月から、プレイドのエンジニアが日々の開発業務のなかで得たさまざまな知見を、社内外の皆さんへと共有する場として運営されてきました。おかげさまで公開済みの記事は100件を超え、各記事を通じてたくさんの方々に私たちのパーソナリティについて知ってもらうことができた
サーバーレスな Headless CMS を自作して始める Jamstack - 病みつきエンジニアブログ
この記事は Jamstack Advent Calendar 2020 の 23 日目の記事です。 Jamstack なサイトのアーキテクチャ Jamstack の厳密な定義などは一旦置いといて、今回は、次のような構成のサイトについて考えます。あまりわかりやすい図ではないかと思うのですが、上段は非同期アクセス、下段はエンドユーザー(閲覧者)からのリアルタイムアクセスです。 Jamstack構成図 この構成はざっくりいうと、 データは「Headless CMS」と呼ばれる CMS で管理されており、エンドユーザーには見えない エンドユーザーは静的な HTML のみを閲覧する *1 なんらかの方法で、「静的な HTML」は非同期に動的更新される (Webhook や Incremental Static Regeneration など) といった特徴があります。Django や Rails な
dely株式会社 「クラシル比較」の開発期間は3カ月！Next.jsとVercelを用いたモダンな技術スタックで挑んだフロントエンド開発支援事例
ノーコードでJAMstackなWebサイトを作成できる「Stackbit」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JAMstack*1を構成できるさまざまなサービスと連携してサイトを手軽に作成できる無料のWebサービス「Stackbit」をご紹介します！ しかもプログラミング不要で、話題のノーコード（NoCode）サービスとしても人気が高いことで知られています。面倒な処理はすべて自動化されているので、誰でも手軽に最新のWebサイトを作ることができます。 Webサイト制作やJAMstackなどにご興味ある方は、ぜひ参考にしてみてください！ 【 Stackbit 】 ■「Stackbit」の使い方 それでは、基本的な「Stackbit」の使い方から見ていきましょう！ まず最初にトップページにある【TRY NOW】ボタンをクリックします。 JAMstackを構成する各サービスを選択する画面が表示されます。 2020年5月時点において、選択できるサービスは
開発担当役員(CDO)の小笠原(@yamitzky)です。 11月1日に予定されている「大阪都構想」の住民投票*1についての特設サイトを、先日、ABCテレビと共同リリースしました。JX独自開発のオートコール電話情勢調査システムを活用し、週一ペースでの情勢調査を発表するなど、今までにない取り組みを行っています。 www.asahi.co.jp より詳細なデータは、ニュース速報アプリ「NewsDigest」でも配信しています。 なんだか宣伝っぽい導入になってしまいましたが、今回は NewsDigest の「大阪都構想」特設ページの技術的な舞台裏をご紹介します。 インフラ全体像 まず、特設サイトのインフラ概略図は次のようになってます。 インフラ全体 サイト全体としては、Next.js という React のフレームワークを使っています。特徴的なのは、 Next.js を Lambda@Edge
[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る | DevelopersIO
ブログのコンテンツになります。 リッチエディタを使用すると、API から HTML が戻されます。ただ改行がそのまま <br> で出力されたり、画像にひと手間加えたくなるケースはありそうなので、こだわりがあるのであればテキストエリアを選択する必要がありそうです。今回はこだわらないのでリッチエディタを選択しています。 また、記事から登録済みのタグを登録できるようにしています。一記事に複数個の登録可能なタグなので、複数コンテンツ参照から参照コンテンツとしてタグを選択しました。 slug のようなフィールドはエンドポイントとなるコンテンツ ID で持つことになるため、フィールド ID として別途用意する必要はりません。 Next.js でブログを作っていく Next.js については 公式サイト と、公式のリポジトリに含まれている examples が非常に参考になります。こちらでもざっくりと導
![[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
SSGとしてのAstroとNext.jsを比較してみた
Webサイトを構築するアーキテクチャとしてJamstackを導入する際、Static Site Generator (SSG) としての選択肢は豊富にあります。 HugoやGatsby、Next.jsあたりが定番だと思いますが、2022年8月にv1.0がリリースされたAstroが個人的に気になったので、Next.jsとビルドのパフォーマンスを比較してみることにしました。 中〜大規模サイトでの利用を想定して、API経由でコンテンツ取得する1000ページ分のサイトをNext.js、Astroそれぞれで生成して比べてみます。 なお、Next.jsはStatic Generationを利用します。 先に結論 生成されたページのパフォーマンスはAstroのほうが有利 ビルド時間はNext.jsが早い。ただしやり方を変えればAstroのほうが早くなった。 準備編 Headless CMS（の代わり）
いきなりですが。 運営して間もないJAMstack構成な当ブログですが CMSをmicroCMSに乗り換えました！👏 （正確に言うとNetlifyCMSも併用していますが。笑） そこで今回、NetlifyCMSで感じた課題、microCMSの便利な点、microCMSでの課題など 観点ごとに思った事をまとめてみました。 HeadlessCMSを導入する際の参考になれば良いかなと思います！ まず、それぞれのCMSに関して簡単にまとめます。 NetlifyCMSとはNetlifyCMS（https://www.netlifycms.org/） アメリカのNetlify社が運営する静的ホスティングサービス、「Netlify」のひとつの機能として搭載されたCMSです。 設定ファイル(ymlファイル)一つで管理画面をカスタマイズする事ができ、非常に簡単に管理画面を構築できます。入稿した記事はGit
とよももです！ お仕事でHeadlessCMSのstrapiを触る機会がありました。情報が少なくて苦労したので、誰かの助けになる様にまとめたいと思います。 ちなみにvue + strapiでアプリを作ってみました。axiosでgraphqlを使いたい方など、参考に見てみてください。 ・レポジトリ Strapiでの認証方法記事も書きました。 ・Strapiに認証機能を追加する（特定のユーザしかAPIが呼べない仕様に変更する） 事前知識 CMSとは CMSとは、Contents Management Systemの略です。CSSやHTMLなどのWEBサイトを構築するための専門的な知識を持っていなくてもWEBサイトやコンテンツを構築し、管理ができるシステムです。 最も代表的なCMSは「WordPress」。「はてなブログ」や「Qiita」、「Note」もCMSです。 CMSを使うことで、簡単にW
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
Webフロントエンドの進化とJamstackアーキテクチャの変遷
Fastly Launches Highly-Secure Serverless JavaScript
Headless（ヘッドレス） CMSとは？ 代表的な１０のCMS比較！ | 株式会社ウェブ企画パートナーズ
サーバレス・ネイティブ が お伝えする、フルサーバレス開発の魅力！ | Slides | Riotz.works
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
Using Trello as a Super Simple CMS | CSS-Tricks
Jamstackはなぜ生まれたのかを解説してみる
Azure App Service に Static Web Apps が登場！
スプラトゥーン３の反省サイトを Jamstack でコスト抑えて作った
Home | My Notion Blog
jawssonic2020_AWSサービスで_JAMStackの構築をしてみた.pdf
NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法 – 株式会社ライトコード
メルペイの事例に学ぶ、SSRとJAMstackのメリット・デメリット
microCMS + Next.jsでJamstackブログを作ってみよう
CSR / SSR / SSGの動向2020
フロントエンドエンジニアなら知っておきたい「Jamstack」～入門編～
PLAIDエンジニアブログをJamstackでリニューアルしました🚀
chot Inc.（ちょっと株式会社） | Jamstack・Web制作・システム開発
Jamstack とサーバーレスで提供する「大阪都構想」特設サイトの舞台裏 - JX通信社エンジニアブログ
【CMS比較】NetlifyCMSからmicroCMSへ乗り換えたら幸せになった話
Strapi (Headless CMS)を使ってみたので使い方まとめ + GraphQL - Qiita
www.icrewnj.org
togetter.com
nobubububu.hatenablog.com
mainichi.jp
www.jpo.go.jp
store.minisforum.jp