はじめに 昨年、AWS のインフラを運用・監視する上で使いやすいと思ったサービスを組み合わせて構成図を紹介した記事、「【AWS】ぼくのかんがえたさいきょうの運用・監視構成」が投稿したその日の Qiita のトレンド 1 位になり、はてなブックマークのテクノロジー分野でトップを飾りました。（たくさんの方に見ていただき感謝してます！） 本記事では「ぼくのかんがえたさいきょうの運用・監視構成」の続編として「ぼくのかんがえたさいきょうの DevOps 実現構成」を紹介させていただきます。あくまでも「ぼくのかんがえた」なので私個人の意見として受け入れていただけると助かります。 前回の記事でもお伝えいたしましたが、各個人・企業によって環境は違うと思いますし、使いやすいサービスは人それぞれだと思うので、これが正解という訳ではありません。一個人の意見として参考にしてただければ幸いです。 また、こちらの記事

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

こんにちは。昨年の11月にエンジニアとしてコミューンに入社したざびえる（仮名）です。 コミューンは、CEOのブログ「進出して分かった日本とアメリカのSaaSプロダクトニーズの違い｜高田優哉/commmune｜note」にもある通り、アメリカ進出をしており、私はその開発担当をしています。 この記事では、海外展開に関わるようになった経緯や、プロダクトのグローバル化をどのように進めているか、そして今後のグローバル化の課題などをお話しようと思います。 GlobalPJ参加の経緯 新卒でWebエンジニアとして働き始めてから常々「日本初のソフトウェアプロダクトで世界的に使われるものってないな。いつかそういうプロダクトが出て来れば日本のソフトウェア業界ももっと盛り上がって、優秀な人がソフトウェアエンジニアとして集まってくるだろうに」と思っていました。 一つ思い当たるのはプログラミング言語のRubyですが

はじめにこれは何？ 数カ月間マーケット調査、商談をして見えてきた日本とグローバルでSaaSプロダクトに求められることの違いを紹介する 誰向けの記事？ グローバルで利用されるプロダクト開発に興味のあるPdM, エンジニアの方 まとめると？ 競合がエグい。日本はプロ野球で、グローバルはメジャーリーグみたいなイメージ。プロダクトは広く浅く→狭く深くに要件が変わる。 エコシステム、SaaS市場の成熟度の違いから、インテグレーションファーストになる 時差や人件費の違いがプロダクトに影響を与え、セルフサービス前提の設計になる 伝えたいこと グローバルで使われるSaaSプロダクトづくり（＝メジャーで野球する）、そしてそこで勝つためのプロダクト・開発組織づくりに経営者として本気で取り組みます。 メジャーで勝利するために、優秀なメンバーが集まり、切磋琢磨し、成長できる環境。勝ち筋も見えています。他ではできな

ヤフーという大手企業を退職し、なぜ次にコミューンを選んだのか、そして、すでに動き出しているコミューンの海外展開へ向けての開発の現状をお伝えします。 東京工業大学大学院博士課程を単位取得退学し、新卒でヤフー株式会社にWebエンジニアとして入社。複数のサービスの開発に従事した後、広告部門で社外API連携や広告閲覧履歴DBの移行やSRE導入、新人教育などを経験。2021年11月にコミューンへ入社し、グローバル化プロジェクトの開発を担当している。 ※記事の内容は執筆時点の内容です。前職ではエンジニアとして幅広い経験をした後、新人の教育担当として試行錯誤していました。ヤフーの広告部門はGoogleやMetaといったグローバル企業が競合なので、淘汰されないためには世界レベルの開発の速度と品質が必要です。一方で、巨大で安定した組織が持つ長所や限界についても考えるようになりました。そんな意識の変化が社外に

はじめに こんにちは、フロントエンドエンジニアの多田です。 フロントエンド領域の勉強をはじめて 1 年が経ち、今回個人でゼロからアニプラさん(バルーンショップを経営してる会社)のバルーンサイトの検索システムを作らせていただく機会に恵まれました。 開発にかけられる総時間が 200 時間(つまり工数 1 人月ちょいぐらい、、)というだいぶヤバめなチャレンジングな時間的制約の中、要件定義・デザイン・フロントエンド・バックエンド・インフラ周りまで通して全て 1 人で開発し、完成させることができました。 はじめてfigmaでデザインしてみた アニプラさんより記事を書く許可をいただいたので、開発の裏側の話を記事にまとめます。 開発したサイトはこちら ↓ (今回の記事のメインとなる Next.js で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →

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

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 ブログで記事を書くと欲しくなる機能のひとつにOG画像を自動生成する機能があると思います。今回はRemixを使ってOG画像を自動生成する機能を実装してみました。 RemixでmicroCMSを使ったブログサイトを構築してみた RemixでmicroCMSを使ったブログサイトを構築してみた〜プレビュー画面〜 OG画像を自動生成する方法としては、canvasを利用する方法とヘッドレスブラウザ等でスクリーンショット画像を利用する方法がよく取られますが、今回はPuppeteerを利用してスクリーンショットを撮影しその画像をOG画像として利用する方法を選択しました。 なおデプロイ環境はVercelを想定しています。VercelではRemixはAWS Lambdaの上で動作するためローカルサーバーや他の環境とは少し異なる方法が必要となります。V

Flutterのプロジェクトを新規作成したらする設定(コード自動フォーマット/Lint静的解析/Visual Debugging設定) 筆者は Flutter 歴まだ浅い初心者なのですが、その中で筆者が学んだオススメ設定を紹介します。 筆者は Flutter の Widget を試す度に Android Studio のプロジェクトの新規作成を繰り返すので、プロジェクト新規作成したら真っ先にする設定です。 特にある程度開発をしてから静的解析をするとほぼコードを修正するハメになるので、Lint 設定はマストでいれています。 コード保存時の自動フォーマットや Lint 静的解析、Visual Debugging、画像の設定は最初にしておいた方が良いので順番に解説していきます。 前提として OS は macOS で IDE は Android Studio となります。 環境macOS Big

佐藤あゆみ（旧姓:古庄）屋号Pentaprogram／Web制作者／著書「Webページ高速化超入門」／計算メモ帳アプリ「Kanau」制作／Mastodon:@ayumisato@hachyderm.io

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, support TypeScript and developer-first. It saves API development time through a beautiful admin panel anyone can use.

—— Zoom、Slack、Shopify、Twilio… リモートワーク進展とともに、国境を超えて急速な成長をみせるスタートアップ群。 彼らが実践する最新の成長戦略がある。 —— Product-Led Growth（プロダクト・レッド・グロース、PLG） 「プロダクトでプロダクトを売る」 対極にあるのが、これまで、私たちが当たり前にしてきた、 「セールスがプロダクトを売る」Sales-Led Growth（セールス・レッド・グロース、SLG）です。 近年、日本においてSaaSメトリクス、T2D3、The ModelなどのSaaS実践論が急速に浸透しましたが、そのほとんどはSLGを前提に設計されています。 日本のSaaS熱が高まる最中、北米ではPLGを実践するスタートアップが多くの事例を蓄積し、PLG手法を体系化をしていきました。 蓄積されたノウハウが、今の海外SaaSスタートアップの躍

プロダクトLPをmicroCMSでヘッドレス化しようとした 以下の記事で以前既存のプロダクトLPをヘッドレス化する計画について書きました。 今回はそのヘッドレスCMS化したLPの公開にあたり、Next.js側の設定でどのレンダリング方法を選択するのが最適なのかについての記事になります。 レンダリング方法の選定 レンダリング方法はCSR/SSR/SG/ISRの4種類がありますが、LPという特性上SEOと表示速度に焦点を当てて選定をしました。 CSR 通常のSPAです。クライアント側でデータフェッチおよびレンダリングを行います。 メリット リアルタイムにデータが反映がされる デメリット SEOに弱い(クローラによる) データが反映されていないページが最初に一瞬表示される 結果 特に理由がない限りCSRで基本はいいのかなと思っているのですが、SEOの点で引っかかるので今回は無しとしました。 SS

Next.jsとは React.jsを拡張してサーバー機能やファイルベースルーティングなどが追加されたものです。 詳細は下記URLで確認してください！ microCMSとは そもそもCMSとは microCMSの説明をする前にCMSとはContents Management Systemの頭文字を並べたもので、コンテンツを管理することができるシステムを指します。 大まかに説明すると「View」「コンテンツ管理画面」「DB」の機能を持ったシステムとなります。 「View」は記事の一覧ページなどを表示する機能。 「コンテンツ管理画面」は記事を追加したり、お知らせを追加する機能。 「DB」は記事などの情報を保持する機能。 CMSにはいくつか種類がありますが、大まかにはViewの形によって分類することができます。 View固定型 この記事を書いているZennも「View固定型」となります。他にはQ

イメージ的にはこんな感じ。 自分のサーバーになにもインストールしなくていいので、すぐに始められます。 API大好きなのでTwitterのタイムラインに microCMS を見かけた時はとっても気になりました。 せっかく頭がJavaScriptになってるので、気になってた　#microCMS さわってみよっかなー 「microCMSはJavaScriptだけで導入できるCMSです。」って、なんか便利そう。API大好き！https://t.co/StSmfWSJYl — なかみ (@misato_NN) October 14, 2019 あの、開発するわけじゃないので、仕組みとか全然わからなくても大丈夫です。 「へぇ」て感じで読んでいただければ。 「お知らせ」の更新機能が欲しい。でも自分じゃ作れない。そんな時どうする？ WEBサイトのコンテンツに「お知らせ」を設置しようと思った時、なにを思い浮

企業が自社のコーポレートサイトやオウンドメディア上で定期的な情報発信をする際に、コンテンツの運用・管理をどのような方法にするか悩みますよね。インハウスで、かつマーケターなどビジネス側のメンバーだけで、素早くコンテンツを発信できる運用方法を構築したいと考えている企業も多いのではないでしょうか。 そこで登場するのが、世界中で広く使われているCMS（コンテンツ・マネジメント・システム）です。 CMSと言えば、まずはじめに名前が上がるのが、WordPress（ワードプレス）でしょう。WordPressは2003年に誕生したオープンソース型のCMSで、世界中で圧倒的なシェアを誇っています。しかし、最近ではWordPressや既存のCMSから乗り換えて、2018年頃から注目されはじめたヘッドレスCMS（Headless CMS）を導入する企業が増えています。 そこで、今回の記事では、「ヘッドレスCMS

この記事は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

本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。 🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰 はじめまして、フロントエンドエンジニアの牧と申します。 今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。 リニューアルの概要について Jamstackとは 今回の採用サービスと採用理由 microCMS（ヘッドレスCMS） Gatsby（静的サイトジェネレーター） Netlify（CDN/ADN） 各サービスを使ってみた所感 microCMS Gatsby Netlify 最後に リニューアルの概要について リニューアルの背景やコンセプトについては別記事にて記載しておりますので、こちらも合わせてご覧いただければと思います。 tech.nri-net.com Jamsta

友達の子供が今年は小学校に入学する歳で、コロナのために学校に行けないので、家で漢字の読みの教えていると聞きました。 最近、ReactやVueというWebアプリケーションを作るフレームワークの勉強を始めたので、その友達のお手伝いとしてWebアプリを開発しました。 友達からは「（子供が）すごい勢いで漢字を覚えている」「とても便利」と好評をいただいたので、公開することにしました。 Webアプリ紹介 親子でかな・漢字の読み学習 | バンブー 読みを分かっている方が付き添って教えてあげるためものです。 使い方 スマホの縦長画面で使うことを想定しています。 設定画面 ひらがな/カタカナ、1〜6年生の漢字の中から教えたいリストを選んだり、自分でリストを入力します 複数選ぶと連結されます リストから全文字を使うか、ランダムに5文字抜き出すか選択します 出題方式を選びます 「設定完了」ボタンを押すと問題画面

はじめに 半年前に、いちご狩りツアーに参加した。 いちご狩りに引き続き、◯◯狩りに行ってみたいと思っていたので、果物とはジャンルを変えて、きのこ狩りに行ってみることにした。 育てられてるやつを採るのではなく天然のきのこを採りたい。ネットで調べてみた感じで、ここなら本格的なきのこ狩りができそうだったので、早速申し込んでみた。 きのこ狩りハイキング｜長野県、黒姫、妙高できのこ狩りハイキング｜サンデープラニング 目次 出発 長野駅 黒姫駅 きのこ狩り準備 参加者集合 山へ 山歩き開始 初きのこ さらに見つかるきのこ達 昼休憩 きのこの探し方 きのこ爆発 帰りの車中 LAMPにて きのこ仕分け 食事まで自由時間 きのこづくしディナー 朝ごはん 帰り 出発 上野駅からの始発の新幹線で黒姫駅へ行けば迎えに来てくれるというプランなので、早朝に起きて上野駅に行き、自動券売機で新幹線の切符を購入した。指定席