はてなブックマーク

2024年8月22日、Xserverより新サービス「Xserver Static」がリリースされました。 Xserver Staticとは？「Xserver Static」は静的コンテンツの運営に特化したクラウドホスティングサービスで、高速かつ安全性に優れたサーバー環境を、広告なしで無料（！）で利用できるそうです。 Xserver Staticの特長静的コンテンツ専用サーバであるHTML、CSS、JavaScriptなどの静的コンテンツの運営に特化しており、Next.jsやAstroなどのWebフレームワークのデプロイ先としても利用できます（ただし、静的サイト生成に限ります）。もちろん、microCMSを使用したSSGサイトのデプロイも可能です。ただし、WordPressなどの動的サイトには対応していません。 CI/CDの機能はないNext.jsやAstroなどのWebフレームワークからデ

プロダクトエンジニアのりゅーそうです。 現在パブリックベータ版として開発を進めていた新リッチエディタの「正式版」をリリースしました。 新リッチエディタの機能新リッチエディタは、現行のエディタに加え テーブルカスタムclassの設定コードブロックでの言語・ファイル名の指定リンクの「別のタブで開く」オプションの設定Enterで段落分け（pタグ） / Shift + Enter で改行（brタグ）画像キャプションの追加埋め込みプレビューなどの機能を追加しました。それぞれ紹介します。 テーブルの挿入・編集新リッチエディタでは、テーブルを挿入・編集できます。 テーブルを挿入するには、テーブルアイコンをクリックして、挿入したい列数・行数を選択します。 上記の例ですと、4*4のテーブルが挿入されます（画面幅におさまらない場合は横スクロールで表示されます）。テーブル内では文章はもちろんですが、リストや画像

ヘッドレスCMSという言葉をご存知でしょうか？ まず、CMSとはContent Management Systemの略でありウェブサイトのニュースや記事などを管理することの多いシステムです。代表的な製品としてWordPressがあげられます。 次に「ヘッドレス」ですがこれは「見た目を有していない」という意味です。 まとめるとヘッドレスCMSとは、WordPressなどの従来のCMSとは異なり、表示部分をなくしてAPIベースでコンテンツを取得することが特徴のコンテンツ管理システムです。 ヘッドレスCMSに関する詳しい解説は下記記事をご覧ください。 参考：今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流 ※弊社COOの寄稿記事です このヘッドレスCMSは従来とは異なる仕組みであるため、向いているケース・向いていないケースが顕著に存在しています。 我

こんにちは、でぃーすけと申します。 今回はWebフレームワークAstroを使ってmicroCMSにおける検索機能を実装する方法をご紹介します。 はじめに事前準備として以下の公式ブログを参考に「ブログサイト」を構築してください。 https://blog.microcms.io/astro-microcms-introduction/ 今回は上記で作成したブログサイトをベースに検索機能を実装していきます。 また、UIフレームワークとしてPreact、データフェッチライブラリとしてSWRを使用しますので、以下の公式ブログを参考にそれぞれのライブラリを導入してください。 https://blog.microcms.io/astro-preview/#h00c1750207 実装の全体像全体像としては先ほど挙げた「AstroとmicroCMSを使った画面プレビューを実装する」の記事でのやり方とかな

SmartHRの年末調整機能は、企業の年末調整業務を効率化・自動化するためのサービスで、登録企業数は50,000社以上（※）を誇ります。 労務担当者の業務を遂行する機能と、従業員が年末調整用の申告書を作成・提出する機能があり、従業員がアンケート形式で回答することで申告書を簡単に作成できます。※SmartHR上で事業所登録を完了しているテナント数（但し、退会処理を行ったテナント数を除く） プロダクトエンジニアの近藤さんとプロダクトマネージャーの三好さんに、microCMSの導入経緯や導入後の変化についてお話を伺いました。 導入の背景：Webアプリケーション画面の文言修正対応の工数が多く発生していた導入前に抱えていた課題を教えてください。- 近藤さん2021年までの年末調整機能の従業員向けアンケート画面は、UXライターがGoogleスプレッドシート上で文言を検討したものをエンジニアが実装してい

はじめに こんにちは、フロントエンドエンジニアの森茂です。 Next.js v13からapp directoryが利用可能になりました。2022年12月現在、まだbeta版ではありますが、Next.jsのあたらしい方向性を垣間見ることができます。またapp directoryではデフォルトでReact Server Componentが採用されているのも大きな特徴です。 もちろんmicroCMSはServer Componentでも利用ができます。今回はapp directoryを利用する環境でのmicroCMSの利用方法についていくつか紹介します。 更新情報microcms-js-sdk v2.5.0からcustomRequestInitとしてfetchへリクエストオプションを追加できるようになりました。 Next.jsのApp Routerで利用されるfetchのcacheオプションを

はじめに こんにちは、森茂です。 先日公開したmicroCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】に引き続き、今回は後編として前編で紹介させていただいた構成にあわせて、実際にどのような実装とチームへの浸透を行っていったかについて紹介いたします。 なお、記事内に記載している仕様、ソースコードは説明用として省略や変更、部分的な引用を行っています、実際のサービスとは異なる箇所もある点をあらかじめご了承ください。 前編より 前編ではmicroCMSのフロントエンドアーキテクチャをどういった背景、構成で採用したかを紹介しました。実装の段階に進むにあたっては、その中でもとくに責務（関心）の分離と負担なく開発を進めことができるかを意識することにしました。 また、前編でも紹介の通り、クリーンアーキテクチャという概念に振り回されないことも重要と考えています。完璧な設計を求めるこ

はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーンアーキテクチャです。 2回に分けて大西と森茂（フロントエンドテックリード）がmicroCMSのWebフロントエンドの設計パターンについて紹介します。 前提としてmicroCMSのフロントエンドはReact、状態管理にはuseState/useContextを使用しています。APIのキャッシュにReact Query（TanStack Query）を使用しています。比較的素朴な設計になっています。 背景と課題microCMSはサービス開始から数年が経過しており、バック

待望の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

はじめにフロントエンド開発をしている中でUIライブラリを用いて開発することってありますよね。 機能や見た目、A11Yへの配慮など色々な役割を担ってくれますが、その中でも見た目に関しては独自で定義したいことが多いのではないでしょうか。 そんな時に便利な「Radix UI」というヘッドレスUIの1つをご紹介できればと思います！ ヘッドレスUIについてRadixUIについて紹介する前にヘッドレスUIについて少し説明させてください。 ヘッドレスUIとはUI要素やインタラクションのロジック、状態、処理、APIを提供し、マークアップやスタイルを提供しないライブラリやユーティリティを指す言葉です。 そのためプロダクトごとのデザインやブランドカラーと完全に合うようにカスタマイズして採用することができます。 そして、ヘッドレスUIと言われるライブラリにはcomponentベースとhooksベースがあります。

我々が提供するmicroCMSはAPIでデータを取得することに主眼が置かれた「ヘッドレスCMS」の一つです。 Nuxt.jsやNext.js、Gatsbyなど様々なウェブフロントエンドフレームワークと組み合わせて数多くのウェブサイトに導入いただいています。 こうしたモダンなウェブフロントエンドフレームワークの多くには静的サイト生成といった（≒Jamstack）考え方が取り入れられており、ウェブサイトをあらかじめ生成したうえでホスティングされることも多いです。 このような構成の特徴としてサイトの安定性やセキュリティ面での安全性などサイトの読み取りや運用に関する多くのメリットがあります。 一方で、こうした構成における「サイトへの書き込み」の議論は後回しにされがちです。具体的にはウェブサイト制作であれば「お問い合わせ機能」をどのように用意するかが問題になることが多いでしょう。 そこで、この記事で

=== 更新履歴 2024/1/10: MicroCMSQueriesをインポートするときにType-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroとは？Astroは静的サイトジェネレーターの一つです。 そのGitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウ

こんにちは。λ沢です。 皆さんは普段どのようにローカルから AWS の API を実行していますか？ AWS の基礎を学んだ人の多くは aws configure コマンドを使ってアクセスキーを入力し、 aws-cli や AWS SDK を使用しているのではないでしょうか。 しかし aws configure コマンドはアクセスキーを平文でローカルマシンの ~/.aws/credentials に保存します。 いくらローカルマシンとはいえ、様々なセキュリティリスクが存在する現代では平文でアクセスキーを管理することは好ましくないです。 最近だと faker.js と colors.js に DoS 攻撃のコードが仕込まれたことが話題になりました。 もしこのコードが DoS 攻撃ではなく、~/.aws/credentials の内容を悪意を持った人に対して送信するコードだとしたら、何が起きる

こんにちは、柴田です。 今回は「会員制メディア」のチュートリアルを全3回に分けてお届けします。 === 認証編ページ作成編完成編=== 会員制メディアは、一部の記事は会員しか見れないような形式のメディアです。 ビジネスでは近年よくあるユースケースであり、もしかしたら個人ブログに導入してみても一風変わっていて面白いかもしれません。 また、応用すれば課金しないと見れない記事のような仕組みも作れると思います。 今回想定している仕様は以下の通りです。 記事一覧画面と全公開記事（/public配下）は事前生成をしておき、静的に配信する会員向け記事（/private配下）はログイン済みユーザーのみ閲覧可能とし、SSRで配信する Next.jsを用いてJamstackとSSRの合わせ技を行い、認証にはAuth0を用います。 1. Next.jsプロジェクトを用意まずは、Next.jsのプロジェクトを作成

こんにちは、シンハラです。 普段はmicroCMSでテクニカルセールスとカスタマーサポートを行なっております。 microCMSは単体では活用できないサービスとなるので、フロントエンドのフレームワークを組み合わせて構築を行う必要があります。私が参加しているセールスの打ち合わせでも、当然利用するフレームワークのお話が出てくるのですが、最近はNext.jsの利用を検討されるケースが増えていると感じます。 Next.jsはVercel社が開発しているReactベースの高機能フロントエンドフレームワークで、OSSとして公開されています。 Next.jsは高機能で使いやすい一方で、慣れるまでは全体像が掴みづらいという部分があります。特に、静的サイトジェネレーターとしても動作するし、バックエンドのプログラムとしても動作するという点が、初めて利用するユーザーにとっては非常に混乱を招く点となっております。

本記事は 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

2022年4月1日から改正個人情報保護法が施行されました。 ユーザーのプライバシー保護の観点から、AppleはSafariの「ITP ※1」という形でサードパーティCookieを廃止、GoogleもサードパーティCookieを2023年に廃止することを発表しています。CookieはWebブラウザの話ですが、iOSアプリでもIDFAの使用に制限がかかるなど、同様の動きが始まっています。 日本国内におけるWebブラウザのシェアは、Google Chromeが約50%・Safariが約27%となり、日本国内で利用されているWebブラウザの大半でサードパーティCookieが利用できなくなることを意味し、影響が大きいことがわかります。 参考：statcounter また、スマートフォン機種のシェアについてもiPhoneユーザーが約56%以上と、こちらもIDFAの使用に制限による影響も大きいと言えます

今年の3月3日にUIリニューアルのお知らせがありました。私はエンジニアとして、開発面をサポートするツールの導入やフロントエンドの実装を担当しました。 UIリニューアルに至った理由として、デザイナー組織が誕生したことが上げられます。今までは専業のデザイナーがおらず、デザインカンプもない状態でした。そして、組織の体制が変わるにあたって、エンジニアとデザイナー間での開発フローを最優先で整える必要がありました。 そこで、デザイン・開発フローの一例として、Style DictionaryとStorybookを導入してデザイントークンを連携したmicroCMSの事例を紹介致します。 概要UIリニューアルをするにあたって、FigmaにmicroCMS Design Systemとしてデザインを作成して頂きました。(サムネイルがすごいいい感じだったのでシェアします) Figma上では、管理画面の各ページ毎

本記事は React best practices and patterns to reduce code を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第1パートとなる記事です。 パート1（この記事）パート2パート3 私は数年に渡っていくつかのプロジェクトで、React.jsを使った取り組みに参加してきました。様々なプロジェクトに取り組む中でいくつかの共通するパターンを見出したため本ブログでご紹介いたします。それではいきましょう。 1. reduxのactionsとdispatcherのためにカスタムフックを作成する私はreduxを使うことを好んではいませんが、いくつ

本記事は React best practices and patterns to reduce code - Part2 を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第2パートとなる記事です。 パート1パート2（この記事）パート3 時間を無駄にしないために早速Reactのベストプラクティスとコード削減についてみていきましょう。まずは最も一般的な内容から始めます。 コンポーネントが子要素を持たない場合はself-closing tagするよくないコード： return <Component></Component>よいコード： return <Component />

どうも。 microCMSで分析やCRM構築を担当しているにっしーです。 常にリソースが足りないスタートアップでは、プロダクトをグロースする上で欠かせないデータ分析にはなかなか手が回らないのが実情ではないでしょうか。 弊社も例にもれず、プロダクトは伸びているものの専任のデータエンジニアも不在で本格的な分析ができていませんでしたが、ここ数ヶ月でようやく分析の基盤が整い、よりデータドリブンなアプローチができる状態になってきました。 そこで本記事では、実際に弊社の分析で大活躍しているサービスを3つご紹介します。 「分析基盤ってどう作っていけばいいかわからない・・」 「そんなリソースも時間もない・・メンテも大変そう・・」 という方が分析をはじめるきっかけになれたら幸いです。 それではまいります。 Fivetran まずおすすめしたいのがFivetranです。 https://www.fivetra

こんにちは、柴田です。 突然ですが、Product-Led Growth（PLG）という言葉をご存知でしょうか？ Zoom、Slack、Shopify、Notion など急速な成長をみせる海外スタートアップたちがこぞって実践している成長戦略のひとつです。 PLGと対になる概念としてSLG（Sales-Led Growth）があります。 SLGはその名の通り、セールスがプロダクトを売っていく考え方で、その代表的なものとして「THE MODEL」が挙げられるでしょう。 一方で、PLGは「プロダクトでプロダクトを売っていく」という考え方を指します。 簡単に言うと、ユーザーにプロダクトを実際に触ってもらって、価値を感じてもらい、有料版へと誘導していくのが基本的な考え方です。 日本でPLGを実践している企業はまだほとんどおりませんが、microCMSはエンジニア向けのサービスとしてPLGと非常に相性

こんにちは、しょうみゆです。 今回はNuxt.jsとmicroCMSでJamstack構成のWebエンジニア向けポートフォリオを作成していこうと思います。 ポートフォリオはブログよりも考慮すべき点が少なくハードルが低いので、Jamstackに興味があってこれから始めたい方にも優しい内容となっております。 今回完成したものがこちらです。 APIを2つ使用してメインビジュアル、プロフィール、制作物を管理画面から管理できるようにしています。 https://confident-brattain-1276f1.netlify.app/ また、デザインはこのようにモノクロシンプルで作成していますので、慣れてきたらお好きな色やレイアウトに変更してみてください。 では、早速作成していきましょう！ microCMSの準備 サービスの作成 まずはmicroCMSでサービスを作成しましょう。 下記のように作成

この記事はmicroCMS Advent Calendar 2021 23日目の記事です。 現在のWeb開発では、JavaScriptではなくTypeScriptを導入することが主流となっています。型安全な開発は、ヒューマンエラーを事前に回避できるなど開発時の負担を減らすことができます。 今回は型安全にフォーカスして、Web APIに型付できるHTTPクライアントライブラリ「Aspida」をご紹介します。microCMSで作成したAPIを例に上げてAspidaを体験してみましょう。 Aspidaのリポジトリはこちらになります。 https://github.com/aspida/aspida Aspidaを使うメリットmicroCMSのAPIを取得する単純なFetch APIのコード例は以下になります。 const response = await fetch(`${BASE_URL}/c

こんにちは、松田です。 本日の更新情報をお知らせいたします。 PHP、Ruby、GoのSDKを公開しましたこれまでは主にクライアントサイド（JavaScript、iOS、Android）を対象としたSDKをご用意しておりましたが、今回のSDK公開によりサーバサイドでもこれまで以上に簡単にmicroCMSをお使いいただけます。 それぞれのSDKはGitHub上にOSSとして公開されているため、どなたでも自由にご利用ください。（Issue、Pull Requestも大歓迎です） microcms-php-sdkmicrocms-ruby-sdkmicrocms-go-sdk また、それぞれドキュメントに詳しい利用方法をご用意しております。合わせてこちらもご確認ください。 PHPとの連携Rubyとの連携Goとの連携 サーバサイドにおけるヘッドレスCMSの利用microCMSはAPIベースのCMS

こんにちは。野崎です。 前回は、imgixの入門記事「pictureタグでレスポンシブ対応を行う」を書かせていただきました。 https://blog.microcms.io/imgix-picture/ 今回は少し発展させて、imgixを用いて動的に画像を生成する方法を紹介します。この手法を用いることで、動的なOGP画像を生成することができます。 なお今回はSSGフレームワークとしてNext.jsを使用します。 Next.jsの使用方法について詳しく知りたい方は、以下の記事をご覧ください。 https://blog.microcms.io/microcms-next-jamstack-blog/ https://blog.microcms.io/next-pagination/ フレームワークに依存する部分はほとんどありませんので、Next.js以外のフレームワークにも転用できるかと思い

こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま

大きめな機能アップデートのご紹介です。 今回のリリースより、複数環境（開発環境）の作成ができるようになりました。 ※ ご利用できるプランについては料金表の「複数環境管理」欄をご参照ください） すでに本番運用が開始している場合は、開発者がAPIスキーマ等の変更を行うことにリスクがあるような状況に対応するための機能になります。 またこれから運用を開始する際にも、開発環境と本番環境を分けておきたい場合にお使いいただけます。 この機能をお使いいただくことで本番環境に影響を与えることなく機能追加や修正の検証を行うことが可能です。 コンテンツ入稿者によるコンテンツの事前確認（画面プレビュー）については、本機能の対象外で、別途下書き保存とdraftKeyを用いて解決いただけます。 画面プレビューについて詳しくはこちらをご覧ください。 機能の概要複数環境機能では「本番環境」の全API / コンテンツ /