サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
microcms.io
あなたの仕事にAIをインストール。開発やコンテンツ管理をさらに加速させます。AI × コンテンツ管理に関する最新情報をお届けする事前登録の受付を開始しました。
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
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは? Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
こんにちは、柴田です。 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の値は定数に変換されてしまいます。 よって
こんにちは、柴田です。 Next.jsの勢いが凄いな〜と思っていた昨今ですが、Nuxt.jsもなかなかアツい感じになってきております。 つい先日リリースされたNuxt 2.13から利用可能となったFull Static Generationについて紹介したいと思います。 本ブログもNuxt製なので、Full Static Generationを導入してみました。 サイドメニューにある最新の記事やカテゴリーをクリックすると、かなりの速度で次の画面が表示されるようになりました。 (是非お試しあれ!) どんな機能?Nuxt.jsはもともと `nuxt generate` によるページの静的生成機能は備えていました。 これにより各ページの生成は可能でしたが、ページ遷移時は `asyncData / fetch` の処理が動き、その中でAPIリクエストが動作してしまう問題がありました。 例えばヘッド
こんにちはかみむらです。Webサイトを公開するホスティングサービスでお悩みではないですか? 最近ではNetlifyやFirebase Hostingなど、様々な種類のホスティングサービスが登場していて、選択肢が増えてきました。 そんな中、私が注目してるのがAWS Amplify Consoleです。特徴として、GitHubと連携したシンプルなデプロイ機能や、Basic認証、プレビュー機能など、Web制作の痒いところに手が届くサービスになっています。 前提事前にAWSのアカウントを作成してください。 https://aws.amazon.com/jp/ Nuxt.jsのプロジェクトをホスティングしていきます。あらかじめ、GitHubにプロジェクトをプッシュしておいてください。Nuxt.jsの記事はこちらでも書いています。よかったら一読してください。 Nuxt.jsとmicroCMSで採用ペー
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
こんにちは、柴田です。 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/`以下のファイルはサ
microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
皆さん、Reactしていますか?今回はReact 16.8から導入されたReact hooksのルールについて書きます。 React Hooksとは従来のReactはいわゆるClass Componentで書いていくのが普通で、componentDidMountやconponentWillUnmountといったライフサイクルを用いて様々なアプリケーションを作っていく流れでした。 その後、Functional Componentが登場し、副作用のないシンプルなコンポーネントを関数として定義できるようになりました。 そして現在、Functional Component内にClass Componentにおけるライフサイクル相当のものが実装されました。 これがReact hooksです。 あくまで関数として上から下まで順に処理をしていくことで、副作用を抑える仕組みとなっています。 hooksには
Jamstack Advent Calendar 最終日の記事です。 最終日ということで、締めっぽい内容を書いていきたいと思います。 JamstackについてJamstackとは何なのかについては以前書いた記事が参考になると思います。 2018年の後半あたりからJamstackという単語がちらほら流行り始め、2019年後半になって急激な広まりを感じています。 CSS NightやWordCampといった大きなイベントでも言及があったり、PixelGridさんが「Jamstackな会社です」と表明したり、特に今年の10月以降あたりから、畳み掛けるようにJamstackな話を聞くようになりました。 個人的には、WordPress界隈でもJamstackの話題が出てきたのが大きかったなと思います。 文脈としてはWordPressのRest APIを用いてJamstack構成にするというもので、そ
ここ最近、耳にすることが増えたヘッドレスCMS。今までのCMSとの違いについて解説していきます。 ヘッドレスCMSとはヘッドレスの「ヘッド」は、ビュー(表示する画面)を指します。ヘッドレスなので、ビューの無いCMSということになります。 ビューがないとはどういう事でしょうか? そもそもCMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。 最も代表的な例としてはWordPressが挙げられます。また、はてなブログやQiita、NoteなどもCMSです。 CMSのビュー(見た目)には以下の三種類があります。 サービス固有の画面(Qiita、Note、Mediumなど)テンプレートを選択できるもの(WordPress、はてなブログなど)自由に作成
JAMstack Advent Calendar 2019の11日目の記事です。 また、本記事は Git-based CMS vs. API-first CMS: Which Headless CMS Should You Choose? を翻訳したものです。 (提供元には事前に許可を得て掲載しています) ========== 世界中がクラウドにシフトしている中、CMSはおよそ20年間、古い技術・アーキテクチャのままでした。 しかもそれらは今でも動作しており、WordPressは全Webサイト中で34%のシェアがあります。 イノベーションとより良いデジタル体験の需要の高まりにより、モダンなフロンエンドツールは、より軽くて速くてセキュアなサイトを構築できるようになりました。 でもあなたのウェブサイトのコンテンツは依然として前のままですよね? 是非ヘッドレスCMSの世界に足を踏み入れてみましょ
Jamstack Advent Calendar 2019の4日目の記事です。 今回は、Jamstackという言葉が何を指すのかについて考察したいと思います。 なぜこの記事を書こうと思ったかというと、人によってJamstackという言葉の定義が異なっていると感じたためです。 Jamstackの公式サイトから読み解いていきたいと思います。 https://jamstack.org/ 以下、和訳(イタリック)と考察(太字)です。 Jamstackとは何かあなたはもうすでにJamstackなサイトが動いているのを目にしているかもしれません。 JavaScript, API, Markupの全てを含んでいる必要はありません。 自力でビルドされていても、JekyllやHugo、nuxt、Next、Gatsby等の静的サイトジェネレータで作られていても良いです。 すべてに共通するのはWebサーバーに依
このページを最初にブックマークしてみませんか?
『microCMS|APIベースの日本製ヘッドレスCMS』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く