最近では、WebサイトやWebアプリケーション、あるいはOSにおいてダークモードがサポートされているケースが増えてきています。 （PC向けのWebアプリケーションとして）要件として必須であるケースはまだそう多くないかもしれませんが、UX向上のためにできればダークモードも提供できるようにしておきたいところです。 最近、UIフレームワークとしてCloudscapeを利用する機会があるのですが、Cloudscapeではダークモードがサポートされており簡単に導入することができます。 本エントリでは、Cloudscape( +Next.js)を利用したアプリケーションにダークモードの切り替え機能を実装する方法を紹介します。 なお、今回作成したサンプルは以下のリポジトリで公開しています。 https://github.com/amotz/cloudscape-dark-mode-sample 検証環境

Webサービスやアプリケーションを運用していると、パフォーマンス改善やエラー調査を目的としてクライアント側の情報を収集したいことがあります。 Amazon CloudWatch RUM（以下、CloudWatch RUM）を使うと、CloudWatch上にほぼリアルタイムでクライアント側の情報を収集することができます。 このエントリでは、Next.jsアプリケーションにCloudWatch RUMを導入して、クライアント側の情報をモニタリングする方法を紹介します。 検証環境 next 13.4.8 react 18.2.0 aws-rum-web 1.13.7 CloudWatch RUMとは CloudWatch RUMは、CloudWatchの機能として提供されているクライアントモニタリングサービスで、Webアプリケーションにおけるクライアント側のデータを収集することができます。 Am

ヘッドレスWYSIWYGエディターフレームワークであるTiptapでは、標準で拡張機能が用意されており様々な拡張機能を追加することでエディターの動作をカスタマイズできます。 このエントリでは、標準の拡張機能をさらに拡張して独自のオプションやアトリビュートを追加して使用する方法を紹介します。 Tiptapとは Tiptap はリッチテキストエディターのツールキットであるProseMirrorのヘッドレスラッパーで、サクッとWYSIWYGエディターを構築できるオープンソースのライブラリです。 公式ドキュメントが充実しており、デフォルトで多くの拡張機能が用意されているためカスタマイズ性も良好なライブラリになっています。（一部の拡張機能は有償としてプライベートレジストリで提供） Tiptap はVue.js(Nuxt.js)/React(Next.js)/Svelteなど、様々なフレームワークで利

NotionやGoogle Docsなど、最近のオンラインドキュメントエディターでは、リアルタイムで複数人による共同編集が可能なサービスをよく見かけます。 便利ですよね、リアルタイムでの共同編集。 自分も日々お世話になっています。 最近、お仕事で上記サービスのような共同編集が可能なエディターを実装する機会があったのですが、そちらで採用した Tiptap というエディターライブラリがかなりいい感じだったので、今回その実装を簡単なサンプルとして紹介してみたいと思います。 なお、今回作成したサンプルのソースコードはGitHubに公開しています。 https://github.com/amotz/nuxt-tiptap-sample 完成イメージ 検証環境 nuxt 3.2.0 tiptap 2.0.0-beta.217 y-prosemirror 1.0.20 y-websocket 1.4.5

現在、自分はProfllyというプロフィールビュアーサービスの開発を行っています。 Profllyでは、CI/CDの一部にAWS CodeBuild（以下、CodeBuild）を採用しており、連携されたGitHubリポジトリでプルリクエストが作成・更新されたタイミングで、自動でCodeBuild上でビルドやテストを実行させるような仕組みになっています。 この仕組みでは、元々連携されたリポジトリの全てのPRに対してCIが走るように設定していましたが、特定のブランチ間でのPRにおけるCIは不要なので実行しないようにしたい、というニーズがありました。 このエントリでは、CodeBuildのウェブフックイベントフィルタリングの機能を使って、特定のブランチ間でのイベントをトリガーしないようにする方法をご紹介します。 プロジェクトにおけるGitブランチモデル まず、前提としてProfllyではブランチ

新規事業統括部 Profllyチームの持田です。 私達のチームでは、Profllyというプロフィールビュアーサービスを開発・提供しています。 Profllyってなんぞや？と興味を持っていただけた方は、以下のブログなどをご参照いただけると嬉しいです。 今回のエントリでは、Profllyの開発チームで定期的に行っている勉強会について紹介したいと思います。 開発チームでの勉強会 Profllyチームは普段スクラムによる開発を行っていますが、日々のストーリー対応とは別に、大体1時間/週のペースで開発メンバーによる勉強会を定期的に実施しています。 開発メンバーによる勉強会は、主に以下の目的で開催されています。 プロダクトのロードマップに基づき、将来実装で利用するかもしれない技術のスキルを獲得する 目の前のストーリー対応に追われ「木こりのジレンマ」に陥らないよう、斧（スキル）を研ぐ スキルマップ上で属

現在、自分はProfllyというプロフィールビュアーサービスの開発を行っています。 Profllyでは、ホスティングおよびCI/CDにAmplify Consoleを採用しており、フロントエンドにNuxt.jsで実装されたアプリケーションをホストしています。 なお、Profllyで採用している技術スタックなどの詳細については、以下のエントリも参照いただけると幸いです。 Profllyを支えるアーキテクチャや技術スタックを紹介します（月刊Proflly2022年2月号） Amplify Consoleでホスティングされたアプリケーションを日々運用する中で、Amplifyのデフォルトビルドイメージで用意されているNode.jsのバージョンを変更したいケースがあります（ありました）。 今回、Amplify ConsoleでNode.jsのバージョンを変更する方法をいくつか試してみたので紹介してみ

Developers.IO 2022という弊社オンラインイベントにて、「OpenSearchで作る社員間レコメンドシステム」というテーマでお話させていただきましたので、紹介します。 セッション概要 プロフィールビュアーサービスProfllyでは、組織のコミュニケーション課題の解決を目的とした、社員同士をレコメンドする機能を検討している最中です。 このセッションでは、OpenSearchを利用して簡易的なレコメンドシステムを実現する手法をご紹介します。 動画 スライド アジェンダ プロフィールビューアーサービス「Proflly」におけるレコメンド機能の検討 Amazon Personalizeを利用したレコメンド検証 OpenSearchを利用したレコメンド検証 まとめ 動画内で紹介したリンク Amazon Personalize - How it works builders.flash✨

GitHub Actionsの実装 デプロイ対象となるソースが準備できたので、Sphinxのビルド&デプロイを行うGitHub Actionのワークフローを実装してみます。 任意のタイミングでデプロイしたいので、トリガーは手動実行とする（workflow dispatch） リポジトリにはSphinxソースのみpushされているため、ワークフロー内でSphinxのビルドを行う ビルドで生成されたドキュメントファイル群を、ドキュメント配置場所となるS3バケットへアップロード（sync）する これらの要件を元に実装した結果、ワークフローは以下のようになりました。 name: "Deploy document files to S3" on: workflow_dispatch: inputs: confirm: required: true description: Please type "

現在、自分はProfllyというプロフィールビューアーサービスの開発を行っています。 Profllyでは、ソースコードなどの管理はGitHubを利用しています。 最近、Profllyで利用しているリポジトリを別のOrganizationへ移行する機会があったので、その移行記録をブログにしてみます。 GitHubリポジトリ移行のざっくりとした流れ 今回、リポジトリの移行は主に以下のような流れで実施しました。 移行先Organizationへのリポジトリ移行 連携先AWSサービスでのリポジトリ再接続 SlackへのSubscribe/Scheduled Reminder設定 それでは、以下よりそれぞれのフェーズで実際に行った作業を見ていきます。 移行先Organizationへのリポジトリ移行 早速ですが、現行のリポジトリを移行先となるOrganizationアカウントへ移行していきます。 ま

AWS Lambda（以下、Lambda）で、同一AWSアカウント内で共有可能なテストイベントが作成できるようになりました！ このアップデートにより、同一AWSアカウントで複数開発者が異なるIAMユーザーでアクセスしている場合においても、開発者間で同じテストイベントを共有してLambda関数を呼び出すことが可能となります。 Lambda のテストイベントについて Lambdaではテストイベントを定義してLambda関数を呼び出すことで、マネジメントコンソール上でLambdaをテストすることができます。 詳しくは、以下の公式ドキュメントを参照してみてください。 やってみる それでは、実際にLambdaでテストイベントの共有を試していきましょう。 まずは、適当に用意したLambda関数をコンソールで開き、「テスト」タブを選択します。 「新しいイベントを作成」を選択し、複数の開発者（IAMユーザ

新規事業統括部 Profllyチームの持田です。 私達のチームでは、Profllyというプロフィールビューアーサービスを開発・提供しています。 Profllyってなんぞや？と興味を持っていただけた方は、以下のブログや紹介動画をご参照いただけると嬉しいです。 これまでの月刊Profllyのバックナンバーでは、プロダクトに関する最近のアップデートやお客様からのフィードバックなどを中心に紹介してきました。 今回のエントリでは、「ProfllyというSaaSがどのようなアーキテクチャや技術スタックで開発・運用されているのか？」について紹介してみたいと思います。 アーキテクチャ全体像 まずはじめに、こちらがProflly全体のアーキテクチャ構成図になります（ユーザー向けのアプリケーション部分を抜粋）。 基本的にインフラはAWSで構成されており、できるだけマネージドサービスを使ったサーバーレスアーキテ

Amazon CloudWatch Lambda Insights（以下、Lambda Insights）が、Graviton2 proccessor（arm64）をサポートするようになりました！ このアップデートにより、arm64アーキテクチャを適用したLambda FunctionにもLambda Insightsを設定してモニタリングできるようになりました。 Lambda Insightsについて Lambda Insightsは、Lambda用に準備されているモニタリング・トラブルシューティングのツールになります。 簡単な設定で、様々なメトリクス情報の収集やコンソール上での可視化が可能です。 Lambdaの性能把握、比較が一瞬で! CloudWatch Lambda InsightsがGAになりました #reinvent LambdaのGraviton2 proccessor対応

Auth0のテナント設定をエクスポート/インポートできるAuth0 Deploy CLIを利用しつつ、Auth0のテナント移行作業を実施してみた記録です。 現在、自分はProfllyというプロフィールビューアーサービスの開発を行っています。 Profllyでは、サービスのIDaaSとしてAuth0を採用しています。 先日、Profllyで利用しているAuth0のテナントを移行する機会があったので、その移行記録をブログにしてみます。 Auth0テナント移行のざっくりとした流れ 今回、Auth0のテナント移行は主に以下のような流れで実施しました。 移行元Auth0テナント情報のエクスポート 移行先Auth0テナントへのインポートおよび事前設定作業 Auth0テナント切替実施 それでは、以下よりそれぞれのフェーズで実際に行った作業を見ていきます。 移行元Auth0テナント情報のエクスポート でき

Developers.IO 2021 Decadeという弊社オンラインイベントにて、「Cloudflare + OpenSearch + Lambdaで始める全文検索開発入門」というテーマでお話させていただきましたので、紹介します。 セッション概要 現在開発に携わっているプロフィールビュアーサービスProfllyでは、検索エンジンとしてAmazon OpenSearch Serviceを採用しています。 サーバーレス環境において、コストを抑えつつ快適にOpenSearchを利用できる開発環境を準備すべく、Cloudflareを利用したOpenSearch + Lambdaの構築方法を解説します。 動画 スライド アジェンダ Amazon OpenSearch Service + Lambdaを組み合わせた全文検索 開発のためのローカル環境OpenSearch構築 Cloudflareを利用

Argo Tunnel ClientのCloudflaredを利用して、ローカル環境に構築したOpenSearchとLambdaを接続してみました。 現在、自分はProfllyというプロフィールビューアーサービスの開発を行っています。 Profllyでは、サービス内の検索エンジンとしてAmazon OpenSearch Service（旧Amazon Elasticsearch Service）を採用しています。 システム内においては、OpenSearch Serviceで起動しているOpenSearchドメインのエンドポイントに対しAWS Lambdaからアクセスを行う、という形になっていますが、開発環境ではコストを抑えたり自由に検証するために、OpenSearch Serviceのインスタンスではなく、個人のローカル環境に構築したOpenSearchを利用したい、というニーズがありまし

現在、自分はProfllyというプロフィールビューアーサービスの開発を行っています。 Profllyでは、サービス内の検索エンジンとしてAmazon OpenSearch Service（旧Amazon Elasticsearch Service）を採用しています。 システムを構築するにあたっては、マネージドサービスであるOpenSearch Serviceを利用していますが、開発環境ではコストを抑えるために個人のローカル環境に構築したOpenSearchを利用したい、というニーズがありました。 上記ニーズを満たすため、Dockerを利用しつつローカル環境にOpenSearchを構築してみたので、その手順をご紹介します。 OpenSearchについて OpenSearchは、Apache2.0ライセンス（ALv2）のElasticsearch7.10.2およびKibana7.10.2から派

インストール それでは、実際にSlack Developer Toolsをインストールしてみます。 インストールするSlackワークスペースにて、Appから Slack Developer Tools を検索し追加します。 Slack App Directoryの画面で追加をクリックし、Slack Appへの権限を許可します。 無事Slack Developer Toolsがインストールされました。 使ってみる インストールできたので、Slack Developer Toolsの各種機能を使ってみます。 Display Platform status （Slack全体のステータス確認） Slackのショートカットから Display Platform status を選択、あるいはスラッシュコマンドで /sdt status を実行します。 Slack全体のステータスが表示されました。 S

現在、自分はProfllyというコミュニケーションハブサービスの開発を行っています。 その中で、以下のような要件のリソースを構築する必要がありました。 とあるファイルを保管するS3バケット バケットに保管されたファイルの閲覧やAthenaでのデータクエリはしたいが、（一定期間）ファイルの更新・削除は不可としたい この要件だとS3のオブジェクトロック機能が使うのが良さげだったので、今回はそちらを適用して対象のS3バケットを作成することにしました。 このエントリでは、オブジェクトロックで保護されたS3バケットをAWS CDKを利用して構築するサンプルをご紹介します。 なお、今回作成したサンプルはGitHubに公開しています。 amotz/object-locked-s3-cdk-sample S3 オブジェクトロックとは S3 オブジェクトロックは、いわゆるWrite Once Read Ma

とあるリポジトリで、GitHub ActionsワークフローのランナーからAmazon S3（以下、S3）にアクセスしたいニーズがありました。 簡単なサンプルを構築してみたので、ご紹介します。 手っ取り早くワークフローのYAMLを見たい方はこちらをどうぞ。 【GitHub】cm-mochida-atsushi/actions-python-sample GitHub Actionsとは GitHubが提供する高機能なCI/CD（継続的インテグレーション/継続的デリバリー）ツールです。 リモートリポジトリをGitHubで管理している場合、GitHub内でCI/CDを完結させることができます。 また、pushやpull requestだけでなくGitHub上の様々なアクティビティをトリガーにできます。 【GitHub ヘルプ】GitHub Actionsについて なお、GitHub Actio