本記事ではNext.js(SSG)でページネーションを実装していきます。以前に書いたmicroCMS + Next.jsでJamstackブログを作ってみようの拡張版になります。本記事はこのチュートリアルを終えてる前提で話を進めていきます。 今回の作成イメージはmicroCMSブログのコンテンツ一覧の下部にあるページネーションです。 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0 コンポーネントの作成はじめに、ページネーションを作成するためのベースとなるコンポーネントを作成します。components/Pagination.jsを作成してください。 こちらはコードの全体像です。 //components/Pagination.js import Link f
はじめに Cloudflare Developer Week 2023にて数々の魅力的な発表がある中、Cloudflare PagesでNext.jsを利用するためのパッケージ@cloudflare/next-on-pagesがv1.0.0となりました。 執筆時の最新版であるv13.4.2のApp Routerにも対応しているということで早速試してみました。 なお、現時点でサポートされている機能については@cloudflare/next-on-pagesのドキュメントにもまとまめられています。 検証環境 Next.js v13.4.2 @cloudflare/next-on-pages 1.0.0 試してみる @cloudflare/next-on-pagesを使ってCloudflare Pagesにデプロイしてみます。 Next.jsのセットアップ まずはNext.jsの環境を用意します
Googleなどの検索エンジンで上位に表示させるためには、質の高いコンテンツであることはもちろん、ページが表示される速度や、WebサイトへアクセスするユーザーやGoogleクローラーなどに対して、ページが正確に表示されているかなど、Webサイトの使いやすさ（ユーザビリティ）も非常に重要です。 今回は、Webサイトの評価をチェックすることができる「Lighthouse（ライトハウス）」について、実際にmicroCMSブログをチェックした結果と合わせてご紹介します。 Lighthouse（ライトハウス）とは？Lighthouse（ライトハウス）は、Googleが無料で提供しているWebサイトを分析・診断するための機能です。 自身のWebサイトを、 「パフォーマンス」 「ユーザー補助」 「おすすめの方法」 「SEO」 の4つの項目ごとに、Google独自の基準でチェックできます。 簡単にコンテン
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
いまさら聞けない「CMS」とは？基礎からわかるCMS入門資料をご提供！ >CMSの基本を知りたい方はこちらから ヘッドレスCMS（Headless CMS）とは、ヘッド、つまりフロントエンド（ビュワー）のないCMS（Content Management System 、コンテンツ管理システム）のことです。 ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されているので、それぞれに影響されることなくシステム変更を行えます。 ヘッドレスCMSにはほかにも、表示速度が速い、CMS機能を後付けできるといったメリットがあります。 本コラムでは、ヘッドレスCMSのメリットや通常CMSとの違いについて解説し、おすすめのヘッドレスCMSをご紹介します。 CMS「BlueMonkey」を開発・提供しているクラウドサーカスは、ホームページ制作から運用サポート、リード獲得支援
ReactQueryでキャッシュを最大限利用する
こんにちは、柴田（@shibe97）です。 久々に普通の技術記事です。 microCMSでは状態管理ライブラリとしてReact hooksベースのReactQueryを利用しています。 ReactQueryといえば、主にデータの取得時の状態管理の例が紹介されていることが多いです。 本家の例： function Example() { const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) if (isLoading) return 'Loading...' if (error) return 'An error has occurred: '
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法
iOS でも Web Push が送れる！microCMS と Firebase Cloud Messaging を使った実装方法 お初にお目にかかります(？) chot Inc. で Web エンジニアをしているすてぃんです。 もう 1 ヶ月前ですが iOS Safari でプッシュ通知に対応したバージョンのベータ版が発表されましたね。 Web のプッシュ通知は、シェアの大きい iOS が対応してくれなかったのであまり実用的ではありませんでしたが、これからは Web でも多くのユーザーに能動的に新着情報を伝えることができるようになります。 本記事では Firebase Cloud Messaging(以降 FCM と表記) を用いた Web Push 通知の実装方法を、架空のメディアサイトを実装しながら紹介します。 FCM 以外には microCMS と Next.js を使用します。m
国産ヘッドレスCMSのパイオニア「microCMS」が成長を続ける理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのづやです。 Jamstack構成により表示速度がはやい、コンテンツがHTMLに影響されないという特徴から、今や世界中で大きな注目を集めるヘッドレスCMS。海外で開発されているサービスが多いなか、数少ない国産のヘッドレスCMSが「microCMS」です。私たちLIGもサイト制作に活用しており、そのスゴさを肌で実感しています。 今回は開発会社である株式会社microCMSさんに取材の機会をいただき、どのようにヘッドレスCMSを開発しているのか、なぜ多種多様な企業に選ばれているのか話を聞きました。 ※オンラインにて取材いたしました。 「受託開発の課題」を解決するために辿り着いたプロダクト ―― まずは御社が国内でいち早くヘッドレスCMSを開発した背景を聞かせてください。 柴田 和祈さん 2017年に株式会社microCMSを共同創業し、現在はCXO兼デザイン責任者。元々はWe
RemixでmicroCMSを使ったブログサイトを構築してみた〜OG画像の自動生成〜 | DevelopersIO
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 ブログで記事を書くと欲しくなる機能のひとつにOG画像を自動生成する機能があると思います。今回はRemixを使ってOG画像を自動生成する機能を実装してみました。 RemixでmicroCMSを使ったブログサイトを構築してみた RemixでmicroCMSを使ったブログサイトを構築してみた〜プレビュー画面〜 OG画像を自動生成する方法としては、canvasを利用する方法とヘッドレスブラウザ等でスクリーンショット画像を利用する方法がよく取られますが、今回はPuppeteerを利用してスクリーンショットを撮影しその画像をOG画像として利用する方法を選択しました。 なおデプロイ環境はVercelを想定しています。VercelではRemixはAWS Lambdaの上で動作するためローカルサーバーや他の環境とは少し異なる方法が必要となります。V
Jamstackとは何か？まずは基本を理解しよう！
はじめに昨今、ウェブ制作業界（その中でも特にフロントエンドと言われる領域）においてJamstackという言葉が流行を見せています。 検索のトレンドを確認できるGoogleトレンドで調べてみてもその注目度の高まりを確認できます。 そんなJamstackですが、言葉の定義はエンジニアにとってわかりやすい言葉を組み合わせたものです。 そのため非エンジニアの方にとってはとっつきづらい単語であることも事実です。 そこで本記事では特にエンジニアではない方でも理解しやすい形でのJamstackの解説ができればと思います。 JamstackとはJamstackという単語はアメリカの企業であるウェブサイト管理サービスを運用するNetlify社によって定義されました。 Jamstack公式サイト https://jamstack.org/ もともと、Jamstackとは下記のエンジニア向け単語の頭文字を取って
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
こんにちはhiro08です。 先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。 補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。 www.gatsbyjs.org いままでの課題点 いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、 一部の変更でもすべてのページが再ビルドされてしまうため、ビルド効率が悪い(CI/CDを使ってる場合消費量が多くなってしまう) ビルド
こんにちは。λ沢です。 皆さんは普段どのようにローカルから AWS の API を実行していますか？ AWS の基礎を学んだ人の多くは aws configure コマンドを使ってアクセスキーを入力し、 aws-cli や AWS SDK を使用しているのではないでしょうか。 しかし aws configure コマンドはアクセスキーを平文でローカルマシンの ~/.aws/credentials に保存します。 いくらローカルマシンとはいえ、様々なセキュリティリスクが存在する現代では平文でアクセスキーを管理することは好ましくないです。 最近だと faker.js と colors.js に DoS 攻撃のコードが仕込まれたことが話題になりました。 もしこのコードが DoS 攻撃ではなく、~/.aws/credentials の内容を悪意を持った人に対して送信するコードだとしたら、何が起きる
はじめに エンジニアになってから、個人ブログでさまざまな記事を書いてきましたが、そろそろリプレイスしたいと考え、Astroでシンプルなブログサイトを作成してみました。その作成手順について記事にしていきます。データ管理はmicroCMSを使用し、サイトのホスティングはVercelで構築しています。 作成したもの 作成した記事を一覧で表示するシンプルなデザインにしました。 Github 作成したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回使用したNodeと主なパッケージのバージョン情報です。 Node.js - v18.14.2 Astro - v2.3.0 microcms-js-sdk - v2.3.3 技術概要 Astro Astroは静的サイト生成ツールとして使用されるフレームワークです。 最大の特徴は、サーバーファーストであることです。JavaScriptを
こんにちはかみむらです。Webサイトを公開するホスティングサービスでお悩みではないですか？ 最近ではNetlifyやFirebase Hostingなど、様々な種類のホスティングサービスが登場していて、選択肢が増えてきました。 そんな中、私が注目してるのがAWS Amplify Consoleです。特徴として、GitHubと連携したシンプルなデプロイ機能や、Basic認証、プレビュー機能など、Web制作の痒いところに手が届くサービスになっています。 前提事前にAWSのアカウントを作成してください。 https://aws.amazon.com/jp/ Nuxt.jsのプロジェクトをホスティングしていきます。あらかじめ、GitHubにプロジェクトをプッシュしておいてください。Nuxt.jsの記事はこちらでも書いています。よかったら一読してください。 Nuxt.jsとmicroCMSで採用ペー
[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)
ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！
ここ最近、耳にすることが増えたヘッドレスCMS。今までのCMSとの違いについて解説していきます。 ヘッドレスCMSとはヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。 ビューがないとはどういう事でしょうか？ そもそもCMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。 最も代表的な例としてはWordPressが挙げられます。また、はてなブログやQiita、NoteなどもCMSです。 CMSのビュー（見た目）には以下の三種類があります。 サービス固有の画面（Qiita、Note、Mediumなど）テンプレートを選択できるもの（WordPress、はてなブログなど）自由に作成
ヘッドレスCMSって何？メリット・デメリットや人気のサービスまとめ | Web Design Trends
これまではコーポレートサイト、メディアなど動的なコンテンツを伴うWebサイトの制作にはWordPress、もしくは独自のCMSを使うというケースがほとんどでした。 最近では、ヘッドレスCMSが注目を集めており、実際にヘッドレスCMSを使って運用されているWebサイトの数も増えており、今後もその数は増えていくと見られています。 今回は、ヘッドレスCMSの基本とメリット・デメリット、人気のサービスなどをご紹介していきます。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends ヘッドレスCMSとは ヘッドレスCMSとは、コン
本記事は React best practices and patterns to reduce code - Part3 を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の最後である第3パートとなる記事です。前2つの記事を読んでいなければ是非以下のリンクからお読みください。 パート1パート2パート3（この記事） それではいきましょう。 トークンはlocalStorageよりもCookieに保存するよくないコード： const token = localStorage.getItem("token"); if (token) { axios.defaults.headers
追記: Next.js v9.3以降SSGに関するAPIの変更や、環境変数の扱い方が変わったので、対応した記事に書き換えました。 はじめに この記事はJAMstack Advent Calendar 2019 7日目の記事です。 こんにちはかみむらです。最近は、Twitter上でJAMstackアーキテクチャーについての情報をシェアしています。 先日、個人のポートフォリオをJAMstackアーキテクチャーな構成で立ち上げました。このサイトの技術スタックはNext.js(静的サイト) + microCMSでホスティングサービスにNetlifyを利用しています。 JAMstackは静的なJavaScript、独立したAPI、ビルド済みのマークアップを総称したアーキテクチャーで、今回作成したウェブサイトはこれらの要件を満たしていることになります。もしJAMstackアーキテクチャーをもっと詳しく
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の比較 はじめに
今年の3月3日にUIリニューアルのお知らせがありました。私はエンジニアとして、開発面をサポートするツールの導入やフロントエンドの実装を担当しました。 UIリニューアルに至った理由として、デザイナー組織が誕生したことが上げられます。今までは専業のデザイナーがおらず、デザインカンプもない状態でした。そして、組織の体制が変わるにあたって、エンジニアとデザイナー間での開発フローを最優先で整える必要がありました。 そこで、デザイン・開発フローの一例として、Style DictionaryとStorybookを導入してデザイントークンを連携したmicroCMSの事例を紹介致します。 概要UIリニューアルをするにあたって、FigmaにmicroCMS Design Systemとしてデザインを作成して頂きました。(サムネイルがすごいいい感じだったのでシェアします) Figma上では、管理画面の各ページ毎
デザインはほぼ同じですが、完全にリライトしています。Lighthouseの記録もリニューアル後にかなり向上したことがわかります。 トップに画像のカルーセルがあるようなサイトでのこのスコアなので個人的は満足しています。 この記事ではこのサイトリニューアルに際しておこなったことを紹介していきます。 NetlifyからCloudflare Pagesにホスティング先を変更 Netlify(無料プラン)で配信するとレスポンスにかかる時間が他のサービスに比べて長いです。 そこで、Vercel、Cloudflare Pages, Amplify hostingなどを比較し、レスポンスまでの時間が早く、料金体系が良心的なCloudflare Pagesに移行しました。 以下はリニューアル後のサイトをNetlifyにデプロイしたものと、Cloudflare PagesにデプロイしたものをDevtoolsの
こんにちは、柴田です。 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の値は定数に変換されてしまいます。 よって
オリジナルのファンタジー世界事典を生成AIで作る
オリジナルのファンタジー世界事典を生成AIで作る by kogu 2023年10月18日 第二回AIアートグランプリに応募して落選した作品の、制作の裏側を詳しくご紹介します。 応募した作品は以下からご覧いただけます。 この作品は「生成AIを使って、24時間でオリジナルのファンタジー世界の事典を作る」という設定で取り組んだものです。 従来ひとりでは叶えるのが難しかった、大きな世界を素早く作り上げたいという願望。それが近い明日には実現するんじゃないかという予想。その現在地を、今使える生成AIで確認しようと試みました。 制作開始 元々制作に1週間はかけて何か応募しようと考えていましたが、色々重なって24時間しか使える時間がなくなってしまいました。そこで開き直って次の条件で制作をスタート。 ファンタジー世界の事典を作る Webで公開する 使える時間は24時間 ツールもゼロから検討する 「ファンタジ
コミュニティ初期の熱量を肌で感じるCloudflareUGミートアップ開催報告 #CloudflareUG | DevelopersIO
会場の様子 会場は、クラスメソッドの日比谷オフィスでの開催となりました。2023年4月から本格稼働開始ということで、自分自身もまだ慣れていないところがあり、いろいろてんやわんやでしたね。 今回のミートアップのスタッフの皆さんと。 メイン会場の様子。窓の奥には東京タワーが垣間見えます。よござんす。 いっつも元気なエバンジェリスト亀田さん。今日もその亀田節は健在でした！ オープニングは、運営の山口さん(@kinunori)より。本日のミートアップの位置づけやタイムテーブルの説明がありました。 その後、クラメソ社員大栗さんより、会場のファシリティ面の案内があったあと、ミートアップの開始となりました。 「はじめてのCloudflare 高速化とセキュリティの両立を行うために」 （資料は、亀田さんから共有された時点で、ここにあげます） 最初にCloudflareエバンジェリストの亀田治伸さんより、「
WP REST API × NuxtJS で SSG するサイト作り｜TechRacho by BPS株式会社
ebi です。定期ネタの WordPress 芸をやっていきます。 今回は一度やってみたかった WP REST API を利用したサイトに少し手出してみます。 React より Vue.js の方がまだ触ったことあるので NuxtJS を使ってみます。 また、 SSR だとホスティングするサーバをどうするかの問題が出てくるので SSG 前提のサイト構成にしてみようと思います。 そんなわけで実験がてらこう言う構成のサイト作りをやってみることにしました。 GitHub にコードも晒しておくので最終的なコードの細かい詳細見たい方は後で確認してください。 CMS として WordPress を採用している理由 正直自分自身にとって馴染みがある以外の理由は特にないです。 近年、 ContentFul や microCMS などのヘッドレスCMSが台頭してきているので、好みでそう言う CMS を選
こんにちは、柴田です。 Next.js 9.3からPreview Modeがサポートされました。 Preview Modeは完全にヘッドレスCMS向けに作られた機能です。 静的生成によるJamstack構成は高パフォーマンス、高セキュリティを実現しますが、プレビューの実現には工夫する必要がありました。 下書き状態の記事を確認する際に、その都度ビルドを走らせてページを生成するのは時間がかかりすぎてしまうためです。 そこで今回のNext.jsによるPreview Modeの登場です。 Preview Modeを利用すると静的生成ロジックをうまく利用してサーバーサイドレンダリング（SSR）を行い、プレビューを実現することができます。 API Routesまず前提として、Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。 `/pages/api/`以下のファイルはサ
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作るWordPressの表示速度をカイゼン Jamstack（Javascript+API+markup）なウェブサイトが流行の兆しを見せていますが、これをウェブ制作の現場にフィットするように、既存のリソースを活かしてアレンジしてみたので簡単にまとめます。Next.jsのソースコードなどはまた別の記事でとりあげます。 コスパの良いJamstackを目指す 日本国内でJamstackといえば、一般的にはmicroCMSとNext.js（or Nuxt.js）をVercelにデプロイするのがセオリーとされています。 今回は、microCMSの代わりにWordPress（レンタルサーバで運用）をヘッドレスCMSとして用いて、これを別のVPSでNext.jsを使ってSSR（サーバサイドレンダリング）/SSG
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
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を作ったのか？ まずはじめに
はてなブログ独自の集計による人気記事のランキング。1月10日（日）から1月16日（土）〔2021年1月第3週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 小型のゲーミングPCを自作すると楽しいし、数年前の常識が通用しない - SANOGRAPHIX Blog by id:sngrpx 2 PHPとPythonとRubyの連想配列のデータ構造が同時期に同じ方針で性能改善されてた話 - hnwの日記 by id:hnw 3 極右勢力が使っている北欧神話のシンボルについて（議事堂乱入男のタトゥーを読み解く）※今日は英文法はお休み - Hoarding Examples (英語例文等集積所) by id:nofrills 4 閉店時間で考えるスケベな百貨店ランキング - 東京で一番オシャレなブログ by id:Verone 5 【決定版】Outer Wildsをクリアした（する）
はじめに AWS Lambda レスポンスストリーミングの紹介 | Amazon Web Services ブログ 最近、上記のブログで Lambda でレスポンスをストリーミングできるようになったという話がありました。 自分がこのブログを読んだ時、ここで話されているストリーミングとは HTTP のレイヤで説明すると何者なのだろうか、という疑問を持ちました。 最近この辺りを調査したので、その内容をこの記事でまとめます。 また、他の AWS + サーバレスな構成でストリーミングをする方法もついでに紹介します。 前提: サーバレスの種類について この記事では以下のサービスについて考慮します。 Lambda AppRunner API Gateway AppSync Fargate がサーバレスの文脈で扱われることもあるかと思いますが、ECS と EKS は考慮しません。 手前に ALB がある
ぐるなびでフロントエンドを担当している原田です。 今回は、コーポレートサイトをリニューアルしたお話です。 リニューアルとはいえ、ページの見た目は全く変わっていないので、気づく人はほとんどいないと思いますが……裏側でどんなことが行われ、どう変わったのかをお伝えしようと思います。 corporate.gnavi.co.jp 目次 リニューアル前のコーポレートサイト システム構成 問題点 管理できていないシステム 運用上の問題 移行不能なデータ リニューアル Jamstackとは システム構成と技術スタック APIを担うヘッドレスCMS 工夫したところ ビルド時間の短縮 ビルド対象の絞り込み Github Actions でのキャッシュ利用 その他 リニューアル後の変化 障害が起きにくい環境、起きても発見しやすい環境へ ページのパフォーマンスが大幅に改善 パフォーマンス改善の要因 まとめ リニュ
Nuxt.jsとmicroCMSで採用ページを作成してみよう！
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
Next.js + tailwindcss + microCMS + Vercelで写真のポートフォリオサイト作ってみた - RX100で撮り歩くブログ
年末の技術の勉強もかねて簡単な写真のサイト作ってみました。 photo.mismith.me 作った理由 Next.js + microCMS next/imageが便利 tailwindcss Next.jsでtailwindcssを使う チートシート Components hover ブレイクポイント 独自のUtilityを追加 アイコン Vercel ホスティング 独自ドメイン Google Analytics さいごに 作った理由 個人の写真まとめサイトとして500pxを使っていたが、純粋に写真だけ一覧できるようなサイトが欲しかった（500pxはSNSなのでいろいろと余計なものが表示される） Next.jsやtailwindcss、Vercelなどを使いたかった（今年まったく技術追ってなかったので...） 実はWordPressで写真サイト作ってたけど、レンタルサーバー解約してコス
コーディング費用について、定期的にお問い合わせをいただいておりますので、こちらに目安を公開いたします。とても正直に書きました。 リニューアル案件のご依頼が多く、その場合は、さまざまな個別の要件が重なることもあり、価格表は用意しておりません。また、相見積もりを前提とするご依頼はお断りしております。※ ※価格だけを選定基準とする場合、私よりも他の方に依頼される方が安いです。 コーディング費用の目安デザインデータやサイト構造が用意されている前提で、ざっくりと1サイト30万円〜60万円ぐらいの範囲に収まることが多いです。 環境構築＆コーディング期間1ヶ月〜2ヶ月（事前打ち合わせを含まない）納品後の保守は有償で承ります必要に応じて更新方法動画などのガイドを用意します制作期間が2ヶ月以上にわたる見込みの場合、着手時に前金として半金をご入金いただきます 前提・特徴更新担当者の方が使用しているソフトやスキ
いきなりですが。 運営して間もないJAMstack構成な当ブログですが CMSをmicroCMSに乗り換えました！👏 （正確に言うとNetlifyCMSも併用していますが。笑） そこで今回、NetlifyCMSで感じた課題、microCMSの便利な点、microCMSでの課題など 観点ごとに思った事をまとめてみました。 HeadlessCMSを導入する際の参考になれば良いかなと思います！ まず、それぞれのCMSに関して簡単にまとめます。 NetlifyCMSとはNetlifyCMS（https://www.netlifycms.org/） アメリカのNetlify社が運営する静的ホスティングサービス、「Netlify」のひとつの機能として搭載されたCMSです。 設定ファイル(ymlファイル)一つで管理画面をカスタマイズする事ができ、非常に簡単に管理画面を構築できます。入稿した記事はGit
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js(SSG)でページネーションを実装してみよう
Cloudflare PagesでNext.js App Routerを使ってみる
Lighthouseとは？Google公式SEOツールの機能と改善法を解説
microCMS + Next.jsでJamstackブログを作ってみよう
Web制作の新しい潮流「ヘッドレスCMS」とは？主要ツールの比較も併せてご紹介
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
aws-vault を使って AWS のアクセスキーを暗号化して扱おう
Astro × microCMS × Vercelで構築するモダンブログの作り方 完全ガイド
Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します
Reactのベストプラクティスとコード削減パターン - パート3
Next.js + microCMS + NetlifyでJAMstackな世界に入門する - Qiita
Style DictionaryとStorybookを使ったデザイントークンの連携フロー
webサイトをAstroにリライトしてパフォーマンスが上がった話
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する
WordPress+Next.js+Tailwind CSSでJamstackな爆速ブログを作る | KYONOHALKYO
料金プラン｜microCMS｜APIベースの日本製ヘッドレスCMS
Nuxt.js + microCMSでヘッダのまとめサイトを作ってみた
今週のはてなブログランキング〔2021年1月第3週〕 - 週刊はてなブログ
AWS 上でサーバレス構成で HTTP レスポンスをストリーミングする
コーポレートサイトをリニューアルしました - ぐるなびをちょっと良くするエンジニアブログ
コーディング費用について | 東京都・駒込のWeb制作 ペンタプログラム
【CMS比較】NetlifyCMSからmicroCMSへ乗り換えたら幸せになった話