サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
blog.microcms.io
Googleなどの検索エンジンで上位に表示させるためには、質の高いコンテンツであることはもちろん、ページが表示される速度や、WebサイトへアクセスするユーザーやGoogleクローラーなどに対して、ページが正確に表示されているかなど、Webサイトの使いやすさ(ユーザビリティ)も非常に重要です。 今回は、Webサイトの評価をチェックすることができる「Lighthouse(ライトハウス)」について、実際にmicroCMSブログをチェックした結果と合わせてご紹介します。 Lighthouse(ライトハウス)とは?Lighthouse(ライトハウス)は、Googleが無料で提供しているWebサイトを分析・診断するための機能です。 自身のWebサイトを、 「パフォーマンス」 「ユーザー補助」 「おすすめの方法」 「SEO」 の4つの項目ごとに、Google独自の基準でチェックできます。 簡単にコンテン
こんにちは、柴田(@shibe97)です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました! リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは? Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
以前、チャリティーカンファレンス沖縄 2020 vol.1 フロントエンド編で行なったmicroCMSワークショップの内容を記事にしました。 【ワークショップ情報】 「microCMS + NuxtでJamstackブログを作ってみよう」 チャリティーカンファレンス沖縄(オンライン)にて、ワークショップをやります。 Jamstack興味あるけどまだ試してみたことないという方、ぜひご参加ください💡https://t.co/GWtVClDQ3q — microCMS|編集者も使いやすい日本製ヘッドレスCMS (@micro_cms) June 16, 2020 このワークショップでは、microCMSとNuxt.jsを組み合わせJamstackなブログを作成することができます。 当時の内容はNuxt v2.13に沿ったものでしたが、本記事では内容をアップデートし、v2.14にて説明を進めます
こんにちは、柴田です。 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の値は定数に変換されてしまいます。 よって
こんにちはかみむらです。Webサイトを公開するホスティングサービスでお悩みではないですか? 最近ではNetlifyやFirebase Hostingなど、様々な種類のホスティングサービスが登場していて、選択肢が増えてきました。 そんな中、私が注目してるのがAWS Amplify Consoleです。特徴として、GitHubと連携したシンプルなデプロイ機能や、Basic認証、プレビュー機能など、Web制作の痒いところに手が届くサービスになっています。 前提事前にAWSのアカウントを作成してください。 https://aws.amazon.com/jp/ Nuxt.jsのプロジェクトをホスティングしていきます。あらかじめ、GitHubにプロジェクトをプッシュしておいてください。Nuxt.jsの記事はこちらでも書いています。よかったら一読してください。 Nuxt.jsとmicroCMSで採用ペー
microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができるチュートリアルです。 前提利用サービス本記事では以下の2つのウェブサービスを利用します。どちらのサービスも個人開発においては無料の範囲で十分な機能を備えており、実績豊富なサービスです。最初にそれぞれのサイトトップより登録を済ませておきましょう。 microCMS:特に日本において市場をリードするヘッドレスCMSです。ブログのコンテンツ管理を担います。Vercel:フロントエンド開発向けのプラットフォームです。サイト公開におけるインフラやCI/CDを担います。 ソフトウェアバージョン下記のバージョンで開発を行なっています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0microcms-js-sdk 2.3.2
2020年も残りわずかとなりました。 本記事は Jamstack Advent Calendar 2020 25日目の記事です。 弊社はmicroCMSというヘッドレスCMSを運営しているため、必然的にJamstack構成をやりたいという要望が舞い込んでくるのですが、その数も去年と比べると格段に増えたと感じています。 Jamstackの本家サイトもリニューアルされました。 いつの間にかロゴも出来てますね。 改めて読んでみると初期のサイトとは内容も一部変わっており、「Jamstackとは呼べない例」や「Webサーバーに依存しない」という記述が無くなりました。 Jamstackの定義は少しずつ時代に合わせて変わってきていると思われます。 JamstackとはJamstackとは、Webをより速く、安全に、簡単に拡張できるように設計されたアーキテクチャです。 SSG(Static Site Ge
ここ最近、耳にすることが増えたヘッドレスCMS。今までのCMSとの違いについて解説していきます。 ヘッドレスCMSとはヘッドレスの「ヘッド」は、ビュー(表示する画面)を指します。ヘッドレスなので、ビューの無いCMSということになります。 ビューがないとはどういう事でしょうか? そもそもCMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。 最も代表的な例としてはWordPressが挙げられます。また、はてなブログやQiita、NoteなどもCMSです。 CMSのビュー(見た目)には以下の三種類があります。 サービス固有の画面(Qiita、Note、Mediumなど)テンプレートを選択できるもの(WordPress、はてなブログなど)自由に作成
本記事では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
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
はじめに昨今、ウェブ制作業界(その中でも特にフロントエンドと言われる領域)においてJamstackという言葉が流行を見せています。 検索のトレンドを確認できるGoogleトレンドで調べてみてもその注目度の高まりを確認できます。 そんなJamstackですが、言葉の定義はエンジニアにとってわかりやすい言葉を組み合わせたものです。 そのため非エンジニアの方にとってはとっつきづらい単語であることも事実です。 そこで本記事では特にエンジニアではない方でも理解しやすい形でのJamstackの解説ができればと思います。 JamstackとはJamstackという単語はアメリカの企業であるウェブサイト管理サービスを運用するNetlify社によって定義されました。 Jamstack公式サイト https://jamstack.org/ もともと、Jamstackとは下記のエンジニア向け単語の頭文字を取って
本記事では、GatsbyJS + microCMSの構成でオウンドメディアを作成していくチュートリアルになっています。作成イメージはライターと記事のコンテンツを結び付けて、複数人で編集できるものを想定しています。 前提検証した環境は以下の通りです。 GatsbyJS v2.26.1gatsby-source-microcms v1.0.1セットアップまずはGatsbyJSのプロジェクトを作成してみましょう。公式で用意されているCLIを使います。 $ npx gatsby new gatsby-microcms-mediaそして開発サーバーを立ち上げてください。 $ yarn run develop無事に開発サーバーが立ち上がってるのを確認してください。 microCMSの用意をする次に、microCMSでAPIを作成していきます。手順は下記に用意しました。詳細については、microCMSの
本記事はブログ作成チュートリアルのSvelte + Sapper版になります。 先日発表されたStateOfJS 2020によると、Svelteがフロントエンドフレームワークの満足度ランキング首位となっていたので注目されている方も多いのではないでしょうか。 今回はSvelteとSapperというフレームワークを用いてブログを作成していきます。 ざっくりな説明としては、Reactに対してNext、Vueに対してNuxt、Svelteに対してSapperというような関係性です。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズがかなり小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを
このページを最初にブックマークしてみませんか?
『blog.microcms.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く