はてなブックマーク

あなたの仕事にAIをインストール。開発やコンテンツ管理をさらに加速させます。AI × コンテンツ管理に関する最新情報をお届けする事前登録の受付を開始しました。

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

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の値は定数に変換されてしまいます。 よって

こんにちはかみむらです。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

料金プラン コンテンツ管理のためのウェブサーバーや管理画面、高品質なAPIの開発や運用には多大な時間と費用がかかります。 microCMSを使えばそれらのコストを大幅に削減可能です。

はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的

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サーバーに依