とよももです！ お仕事で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
Vercel + Next.js + micro CMSで作る、jamstackなCMS構築 - Qiita
概要 こんにちは、都内でフロントエンドエンジニアをしてますかめぽんです。先日、便利なツールしか開発しないことで有名なあのZEITの名前が変わりVercelになった、というニュースは記憶に新しいかと思います。どんどん使い勝手がよくなっていくということで注目していきたいわけですが、昨今ではjavascrptあるいはtypescriptを中心としたアプリケーションが主流になっている中で、jamstackと呼ばれるアーキテクチャが注目されていると思います。jamstack自体は過去に執筆した記事でも紹介していて、基礎的な内容はそちらで確認してみてください。 以前はNuxt.js + Contentful + Netlifyの組み合わせでやってみましたが、今回はVercelのプロダクトと国産のヘッドレスCMSで有名なmicro CMSを使って、jamstackなブログサイトを作ってみたいと思います。
Nuxt.js + microCMSでヘッダのまとめサイトを作ってみた
blog.ojisan.io
InteliJ で作った new Kotlin Project が、Gradle のバージョン設定が古くてビルドできなかった
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話) | Ryusou Blog
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話)JamstackNext.jsmicroCMS この記事はJamstack Advent Calender 5日目の記事です。 はじめまして。りゅーそう(@ryusou_mtkh)です。 現在、埼玉県の高校で地歴科の教員をしています。教員の業務軽減や生徒の学びの場や手段を増やすためにプログラミングを勉強しています。 先日、WEBサイトで歴史について学べるHisTubeというメディアサイト的なものを公開しました。 このサイトは以下のような技術を使って制作しています。 Next.js(TypeScript)storybookstyled-componentsmicroCMS 今回はそのサイトを作って得た知見を共有できたらと思います。 なぜHisTubeを作ったのか？ まずはじめに
Is Jamstack Officially Finished? Brian Rinaldi | Wednesday, July 26, 2023 Earlier this week, Netlify officially killed The Jamstack Community Discord. It was a rather abrupt end, with little more than a week’s notice. Here’s a portion of the announcement: Over time, we have noticed a decline in activity and engagement within the server. After careful consideration, we have come to the decision to
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） - Qiita
4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS）JavaScriptJAMstackHeadlessCMS この記事はJAMstack Advent Calendar 24日目の記事です。 前提 本投稿にはJAMStackとヘッドレスCMS自体の説明は省きます。 JAMStackとは何か、ヘッドレスCMSとは何かといった所については、JAMstack Advent Calendarの主催者であるshibe97さんが大変分かりやすい日本語記事を幾つか投稿してくださっているので、是非見てみてください。 JAMstackとは何を指すのか今一度考えてみる Jamstack公式ページの和訳 + 考察記事 ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！ GitベースのCMSとAPIベースのCMSの比較 はじめに
ぐるなびでフロントエンドを担当している原田です。 今回は、コーポレートサイトをリニューアルしたお話です。 リニューアルとはいえ、ページの見た目は全く変わっていないので、気づく人はほとんどいないと思いますが……裏側でどんなことが行われ、どう変わったのかをお伝えしようと思います。 corporate.gnavi.co.jp 目次 リニューアル前のコーポレートサイト システム構成 問題点 管理できていないシステム 運用上の問題 移行不能なデータ リニューアル Jamstackとは システム構成と技術スタック APIを担うヘッドレスCMS 工夫したところ ビルド時間の短縮 ビルド対象の絞り込み Github Actions でのキャッシュ利用 その他 リニューアル後の変化 障害が起きにくい環境、起きても発見しやすい環境へ ページのパフォーマンスが大幅に改善 パフォーマンス改善の要因 まとめ リニュ
こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。 全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです） ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。 こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。 よって
この記事はBASEアドベントカレンダー 19日目の記事です。 devblog.thebase.in Webアプリの解体 こんにちは。フロントエンドエンジニアの松原(@simezi9)です 近年、Webアプリはクラウドの発展とともにそのあり方を大きく変質させてきました。 具体的にはXaaSの発展により、Webアプリはその構成要素をあらゆるレイヤにおいて細かく分解され、それらを開発者が組み合わせることで作られるようになりました。 このアプローチによりシステムはプラガブルになり可用性の面でも品質面でも大きく進化しました。 その反面で当然このアプローチにも問題があります。その最たるものが組み合わせの複雑度の増加だと思います。 あらゆるものがプラガブルになった反面、それぞれのサービスをどのように組み合わせてWebアプリを構築していくのか自体が一つの知見・分野となり、「昔はWebアプリフレームワーク一
Modern Web Development on the JAMstack: Modern Techniques for Ultra Fast Sites and Web Applications
Really pause and think about how much time and effort web teams around the world have spent building and managing infrastructure. For many years, launching a site or web application has been as much about deploying complex server environments as it’s been about building actual application code. The cloud made provision- ing all these resources faster but no less complicated. The JAMstack was born
使えばわかる！Jamstackの前に microCMS × PHP から始めてみる
という選択肢 | 東京都・駒込のWeb制作 ペンタプログラム
佐藤あゆみ（旧姓:古庄）屋号Pentaprogram／Web制作者／著書「Webページ高速化超入門」／計算メモ帳アプリ「Kanau」制作／Mastodon:@ayumisato@hachyderm.io
GitHub - cloudflare/wrangler-legacy: 🤠 Home to Wrangler v1 (deprecated)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
本投稿はJamstackその２ Advent Calendar 2020の15日目です。その1と比べてその2は過疎化しているので今からでも間に合いますよ！ はじめに Jamstackとは Jamstackは新しい何かなのか？ 結局、Jamstackとは何なのか 結論 余談 はじめに 勢いで登録したもののいまさら見直してみると、 Next.js / Nuxt.js / Gatsby / Gridsome / Vercel / Netlify / Amplify / CDN / サーバーレス / ヘッドレスCMS 等々、関連する話なら何でもOK ということで実際にNext.jsとかGatsby、CMS周りの話が多い様子。では自分は何について書こうかと考えたときに最近こんなツイートをしたことを思い出しました。 Jamstackって言わんとすることはわかるんだけどどうにもなんか腹に落ちきらないんだ
このnoteの対象者： - Headless CMSというのを聞いたことがある（あるいは勉強したい） - エンジニアではないので、専門用語難しい - 簡単にHeadless CMSの使い方を知りたい。 【注意】 このnoteの情報は古い可能性があります。正確なMicro CMSの情報は、Micro CMSの公式ドキュメントをご確認ください。 『Headless CMSとは？』『Micro CMSとは？』『Micro CMSの利用方法』- Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 Micro CMSは日本語であることと、ある程度マニュアルがまとまっているので、ドキュメント確認していただければ基本的には理解できると思います。 ここからは、使っていて気になったり、私自身が止まってしまった箇所を細く入れ
A Complete Guide To Incremental Static Regeneration (ISR) With Next.js — Smashing Magazine
Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more. A year ago, Next.js 9.3 released support for Static Site Generation (SSG) making it the first hybrid framewo
CircleCI × Contentful × S3で作るJamstackなブログ環境。 | DevelopersIO
こんにちは、ベルリンオフィスの小西です。 最近日本語の記事も充実してきたJamstack。説明はこちらの記事で書かれているので省略しますが、要はサイト表示が高速でセキュリティも強くてスケーラビリティもある環境構成のことです。 今回は爆速にページを表示でき、記事データの管理も楽で、かつセキュリティもあまり気にしなくていいブログサービスを構築したいと思います。 目次 環境構成 前提 1. Contentfulの準備 2. Gatsbyアプリの立ち上げ 3. S3へのアップロード 4. CircleCIのセットアップ 5. ContentfulとCircleCIの連携 さいごに 記事が長めで初歩的なことも書いてたりするので、適宜必要な見出しまで飛んでってください。 ローカルでアプリ立ち上げたいだけなら1と2だけ、既にContentfulアプリがあってCircleCIと連携したい人は5だけ読んでい
前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ https://mithril.js.org/ その中でも今回はKINTOのコーポレートサイト、KINTOテクノロジーズのコーポレートサイト、そして現在進行しているプロダクトでも採用しているSvelteを使用してみての所感、そして簡単なSGまでのコードを紹介したいと思います。 本記事で紹
Next.js + microCMS + NetlifyでJAMstackな世界に入門する - Qiita
追記: Next.js v9.3以降SSGに関するAPIの変更や、環境変数の扱い方が変わったので、対応した記事に書き換えました。 はじめに この記事はJAMstack Advent Calendar 2019 7日目の記事です。 こんにちはかみむらです。最近は、Twitter上でJAMstackアーキテクチャーについての情報をシェアしています。 先日、個人のポートフォリオをJAMstackアーキテクチャーな構成で立ち上げました。このサイトの技術スタックはNext.js(静的サイト) + microCMSでホスティングサービスにNetlifyを利用しています。 JAMstackは静的なJavaScript、独立したAPI、ビルド済みのマークアップを総称したアーキテクチャーで、今回作成したウェブサイトはこれらの要件を満たしていることになります。もしJAMstackアーキテクチャーをもっと詳しく
要約 JAMstack手習で、 Nuxt + Strapi + Apollo のブログを作ってみます。 手本記事(チュートリアル) [strapi.io] Build a blog with Nuxt (Vue.js), Strapi and Apollo https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo 手元環境 macOS Catalina (10.15.1) anyenv (1.1.1) nodenv (1.3.0) Node.js 12 LTS (v12.13.0) Yarn (v1.19.1) Google Chrome (78.0.3904.108 (Official Build)) 拡張機能: Vue.js DevTools (5.3.3) 拡張機能: JSONView (0.0.32.3) Vi
Kuroco | Kuroco is a headless CMS
Maximizing your customer experience with our API-centric platform design Develop system-free applications with an enterprise headless CMS. Our backend-for-frontends (BFFs) platform enables a smooth UI/UX that is key to customer experience. Cut development costs by using your favorite programming languages as is. Say goodbye to the backend nightmares of traditional system development. Pick and choo
はじめまして。テクニカルディレクターの横川です。CINRA, Inc.でクライアントワークや自社メディアCINRAなどに携わっています。 今回は、ウェブサイトを構築するうえで、土台ともいえる技術選定についてお話したいと思います。 エンジニア向け記事に見えますが、ウェブサイト構築の技術選定は、スケジュールやデザイン、そのあとの運用など、開発フェーズ以外の与件も考慮して決定されるため、自分には関係ないと思った非エンジニアの方（とくにウェブディレクター、プロジェクトマネージャーなどサイト制作全体のディレクションをする方々）にもぜひ読んでいただきたい記事です。 技術選定はエンジニアのものだけではない ウェブサイト（アプリケーション）は、複数の技術の組み合わせによって実現されます。技術の組み合わせが示す範囲はさまざまですが、ある程度パターン化され、SPA、Jamstack、SSR、SSG……といった
microCMS & Astro で永久0円のJamstack爆速ブログを作成する丁寧なハンズオン - Qiita
アイレット株式会社 22新卒 Advent Calendar 2022 1日目の投稿です！ 社外へアウトプットする習慣を作ることを目的として、このアドベントカレンダーを企画しました 同期25人で最後まで完走することを目標に頑張ります！ 概要 このハンズオンでは、microCMS・Astro・Vercelを利用し、永久0円の個人ブログを作成します。 所要時間 1 時間 流れ & 学べること 前知識 : 必要な知識を確認します。 microCMS : microCMS の会員登録 / サービスを作成します。 Astro : Astroプロジェクトを作成し、microCMSと連携します。 Vercel : Vercelにデプロイし、microCMSとのデプロイフック連携をします。 前知識 なぜ 0円 なのか このハンズオンでは、記事の管理（CMS）に microCMS、ブログのデプロイに Ver
本ブログはGatsbyを使って、esa.ioで書いたコンテンツをNetlifyで配信しています。 esa.ioは情報共有サービスとして作られているので非常に書きやすいサービスです。しかし、（意図しない使い方をしているので）文章以外の情報を持たせるには不向きです。 ブログでシリーズ物の記事を書いてみたいが、連載情報をesa.ioに持たせるのは難しい。ただ、見た目とコンテンツの密を避ける意図でブログのソースコードには依存しない形にしたいと考えていました。 そこで目をつけたのが日本製のHeadless CMS「microCMS」です。 > Headless CMSとmicroCMSHeadless CMSとmicroCMS 本ブログでも何度か取り上げていますが、簡単にHeadless CMSについて説明します。 通常WordPressのようなCMSはコンテンツの管理層とプレゼンテーション層を持つ
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
Expand: Runtime APIs Runtime APIs Expand: Bindings (env) Bindings (env) AI Open external link Analytics Engine Open external link Browser Rendering Open external link D1 Open external link Durable Objects Open external link Environment Variables Open external link Hyperdrive Open external link KV Open external link mTLS Queues Open external link R2 Open external link Rate Limiting Secrets Open ext
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。 私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。 ghost.org Jamstackアーキテ
待望のSvelteKit 1.0がリリースされましたね！ https://svelte.dev/blog/announcing-sveltekit-1.0 早速、microCMSとの連携を試してみたいと思います。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズが小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを実現するために、SvelteではVirtual DOMを敢えて採用せず、代わりにコンポーネントを非常に効率的な命令型コードに変換して、DOMをピンポイントに更新します。 SvelteKitとはSvelteと組み合わせて使うアプリケーションフレームワークです。 NextやN
How Smashing Magazine Manages Content: Migration From WordPress To JAMstack
WordPress adoption is massive. So why would a WordPress site consider moving to JAMstack? In this technical case study, we’ll cover what an actual WordPress migration looks like, using Smashing Magazine itself! We’ll talk through the gains and losses, the things we wish we knew earlier, and what we were surprised by. This article has been kindly supported by our dear friends at Netlify, an all-in-
こんにちはかみむらです。Qiitaを眺めていた時にJAMstackアーキテクチャーというワードを見つけました。最近はReactやvueなどのSPAフロントエンドばかり開発していたのに、JAMStackというアーキテクチャを明確には知りませんでした。 なので今回はJAMstackがweb開発にとって、どういったアーキテクチャーなのか調べてみました。 こちらがJAMstackの公式サイトです。 jamstack.org JAMStackとは？ JAMstackはJavaScript、API、Markupの略です。これは総称してJAMstackと呼びます。この用語はMathias Biilmannによって、クライアント側のJavaScript、再利用可能なAPI、および事前構築されたMarkupに基づいた最新のWeb開発アーキテクチャを実現するために作成されました。Mathias Biilman
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの10日目の記事です。 JAMstackとは2016年ごろにNetrifyの創設者Matt Biilmann氏が提唱した新しいフロントエンドスタックです。リクエストを受けてからサーバー上で処理を行いレスポンスを返す従来のWebサイトの配信方法とは異なり、JAMstackでは事前にビルドされたHTMLをCDN上で配信します。 最近、特に注目が集まっているこのJAMstackについて、基礎知識編と構築編の2回に分けてご紹介したいと思います。 JAMstackとは JAMstackの公式サイトによるとJAMstackとは、 A modern architecture -- Create fast and secure sites and dynamic apps with JavaScript, APIs, and prere
Jamstack gives developers full-stack powers Findings from the Jamstack Community Survey 2022 The third year of the Jamstack Community Survey found a mix of things we expected – indeed, things we predicted last year – as well as some big surprises about the many diverse members of our community. Some key takeaways include: Four out of five developers are now working remotely most of the time, and m
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
What is the Jamstack? | Jamstack
What is Jamstack? Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before. Explore more of the bene
JAMstackの紹介
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
Jamming into the Mainstream: Jamstack Community Survey 2021 | Jamstack
Jamming into the Mainstream: Jamstack Community Survey 2021 This year we saw Jamstack go mainstream, with big changes in working patterns for Jamstack developers in every region. Our community has grown, adding not only experienced developers but also becoming the first stop for those just breaking into the industry. We also learned that the move to remote work has been significant and lasting amo
「Serverless Meetup Tokyo #12」にて発表した際のスライドです。
Let’s pretend I own a service and I want to grant other services access to my service on behalf of my users. The familiar OAuth 2.0 is the industry standard used by the likes of Google sign in, Facebook, etc. to communicate safely without inconveniencing users. Implementing an OAuth Authentication server is conceptually simple but a pain in practice. We can leverage the power of Cloudflare Workers
MOONGIFT.dev #1「ヘッドレスCMS」
MOONGIFT.devはあらゆるテクノロジー、技術ワードについて探求するコミュニティです 従来のサーバサイドでHTMLを生成するCMSに対して、ここ数年盛り上がっているのがヘッドレスCMSになります。フロントエンドは別途開発することで、コンテンツはAPIベースで配信されます。政府統一WebサイトがヘッドレスCMSであることが望ましいとされるなど、注目される技術です。 そこで、今回はヘッドレスCMSを提供、活用する各社を招いてパネルディスカッションを行います。ヘッドレスCMSが何なのかはもちろんのこと、何ができて何ができないのか、採用することによる利点や、考えるべきポイントなどをディスカッションします。 続きを読む
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Strapi (Headless CMS)を使ってみたので使い方まとめ + GraphQL - Qiita
Remote Synthesis | Is Jamstack Officially Finished?
コーポレートサイトをリニューアルしました - ぐるなびをちょっと良くするエンジニアブログ
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
Stackbitを触って感じるWebアプリ構築の進化のひとつの形 - BASEプロダクトチームブログ
結局、Jamstackとは何なのか - Sweet Escape
【超初心者向け】「Micro CMS」のはじめ方。｜Koushi Kagawa
SvelteKit + Svelte を1年間くらい使ってみた知見など
Nuxt(Vue.js)+Strapi(headless CMS)+Apollo(GraphQL)でブログを作る - Qiita
オウンドメディアやコーポレートの技術選定どうしてる？ 非エンジニアでもわかる基礎知識｜CINRA, Inc.
microCMSを使ってGatsbyブログに連載機能を実装した - mottox2 blog
Examples · Cloudflare Workers docs
GatsbyJS + GhostでJamstackなブログを作成する - hiro08gh
SvelteKit + microCMS のブログ作成チュートリアル
モダンなweb開発「JAMstack」アーキテクチャについて調べてみた - hiro08gh
AWSでJAMstackことはじめ（基礎知識編） | フロントエンドBlog | ミツエーリンクス
Jamstack Community Survey Results 2022 | Jamstack
Pros and Cons of SSR and JAMstack
JAMstackのカレンダー | Advent Calendar 2019 - Qiita
サーバーレスなウェブフロントを実現する JAMstack | Slides | Riotz.works
OAuth Auth Server through Workers
sugimuratoshio4.hatenablog.com
ameblo.jp/shigeru-izumiya
www.nikkei.com
www.pref.hokkaido.lg.jp
hicbc.com
yurika0.lo.gob.jp