新着情報

社内ブログ

社員旅行 in 有馬温泉

はじめにこの記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の19日目です。続きをみる

テックブログ

ChatGPT を活用して年間 1 億円の人件費を削減！独自ツール開発の舞台裏

! この記事は、「ハックツ&YOSHINANI 合同アドベントカレンダー Advent Calendar 2024」の 23 日目です。はじめに「日々の業務をもっとラクに進めたい」「ブログやコラムの更新だけで手いっぱいで、他のことまで手が回らない」こんな悩みを抱えている方が多いと思います。私たちは、そういった課題を解決するためにChatGPTを活用した独自ツールを作り上げ、実際に取引先の企業で年間 1 億円もの人件費削減に成功しました。この記事では、「どうやってそんな成果を出したの？」「どんな工夫を盛り込んだの？」といったポイントを、できるだけわかりやすくご紹...

Notion x Stripeで請求書の作成からステータスの更新までをNotionで完結させる

はじめに顧客の支払いステータスを管理するのは意外と大変ですよね。顧客に請求書は送られたのか、顧客は支払いを終わらせたなどのステータスを管理するためにスプレッドシートやNotionデータベースを用意し、決済代行サービスやメール通知などをチェックし、その都度人の手でステータスを更新する必要があります。顧客の支払いを管理するNotionデータベースと請求のステータスが一致していればいいのにと思いませんか？今回はそれを実現するために最近リリースされたNotion WebhookとStripeを活用して、請求書発行からステータスの更新までを自動化してみました。 https://github...

Meshy APIを使って3Dモデルを生成する

はじめに ! この記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の17日目の投稿です。本記事では、テキストや画像から3Dモデルを自動生成するAIツールMeshyをAPI経由で利用する方法を紹介します。主な内容はMeshyとは何か、Postmanを使った利用手順、実際の呼び出し例を示すチュートリアル、まとめになります。 Meshyとは Meshyは、テキストや画像入力から3Dモデルを自動生成するAIツールです。生成結果は.objや.glb、.fbxなど、一般的な3Dモデル形式でダウンロード可能なため、すぐに...

Notion Webhookで実現するNotion x DiscordのChatOps

はじめに Notionのデータベースはチームでのタスク管理やプロジェクト管理に便利ですが、これまでデータベースの変更通知はSlackにしか対応していませんでした。Slack を採用しているチームではこの機能を活用してCSチームから来た問い合わせのステータスなどをSlackに通知するなどの ChatOps を実現しており、Discordを採用しているチームにとっては不便な状況が続いていました。そんな中、つい最近NotionにWebhookオートメーションが追加されました！ https://x.com/NotionJP/status/1864201607698894850 これを活用す...

GitHub Actionsを活用した安心してマージできる取り組み

はじめにこの記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の9日目です。フロントエンドの開発で弊社が取り組んでいるGitHub Actionsの活用方法を紹介します。使用技術はNextJS, Turborepo, pnpmです。要約 pr-agentの導入: AIを活用したレビューでレビュワーの負担を下げました。 TypeCheck,Lint,Build CIの作成: 基本的なCIを組みました。 PRAgent 弊社は小規模なチーム構成で開発を進めているため、コードレビューがスキップされてマージ...

TypeScriptでエラーを型で表現できるライブラリを作ってみた

はじめにこの記事では例外処理をきちんと行うためのやり方として例外をリターンする方法について説明し、それを支援するための自作ライブラリ「tagged-error」について紹介します。またその実装方法についても解説します。 https://github.com/nakanoasaservice/tagged-error https://www.npmjs.com/package/@nakanoaas/tagged-error 皆さん例外処理ちゃんとやってますか？例外が発生するかもしれない関数を呼び出すとき、ついついtry catchをサボってしまうことってよくありますよね？例:...

scrcpyを使ったAndroid端末のミラーリングで楽に実機デバッグ

はじめにこの記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の1日目です。株式会社YOSHINANI CTOのふっけです。✨ アドベントカレンダーの季節がやってまいりました。🎄🎉 今回は株式会社ハックツさんと株式会社YOSHINANIで合同アドベントカレンダーを実施することになりました!🤝こちらはその初日の記事となります! 要約 scrcpyを使うとmacでもAndroid端末のミラーリングが可能 scrcpyとは scrcpyとはAndroid端末をミラーリングするためのツールです。 scrcp...

Supabaseの機能

はじめに新規開発でSupabaseを利用しました。 NextJSからのSupabase利用について簡単に紹介します。要約 Supabaseクライアントを作成して、Server Actionsやクライアントで扱える Supabase Auth: メールコード認証が簡単に実装可能 Supabase DB: 中間テーブルの結合が簡単に実現可能 NextJS連携 https://supabase.com/docs/guides/auth/server-side/nextjs のガイドに従ってクライアントを作成します。サーバー側で扱えるコードとクライアント側で扱えるコードを分...

受託案件におけるリリース管理方法

はじめに GitHub ReleaseとGitHub Actionsを利用し、受託案件におけるリリース管理の効率化を図る方法を解説します。要約ブランチ運用の改善: releaseブランチを導入し、developブランチのマージを停止することなく、リリース確認中も開発を継続できるようにしました。 GitHub Releaseの導入: Release起点のCI/CDを作成しました。リリースノートの自動生成機能により、リリースの差分が確認しやすくなりました。課題弊社のとある案件では、毎週リリースしています。これまでは、以下のようなブランチ運用をしていました。 prod...

Firebase Remote ConfigでFeature Flagを管理する

はじめに機能開発とデプロイの両方を円滑に進めるために、Feature Flagの運用を始めました。 Feature Flagとは機能のON/OFFを切り変えるフラグをコード内に埋め込む運用のことです。 Feature Flagを用いることで、機能を隠しながらリリースしビックバンリリースを防いだり、一部ユーザーにのみ機能を公開するようなことができます。今回はFirebse Remote ConfigとNextJSを使ったFeature Flagの管理について執筆します。 Firebase Remote Config Firebase Remote ConfigはFirebase...

変数などの命名の長さを決める2つのポイント

はじめに変数や関数の命名の長さっていつも悩みませんか？長すぎても短すぎてもコードが読みづらくなり、コードレビューなどで揉めてしまうこともありますよね。この記事ではその変数名の長さを決める2つの強力なポイントについて紹介します。変数名を付けるときの2つのポイント変数名を付けるときに気をつけたい2つのポイントがあります：その変数がどこで使われるか（使用範囲）その変数が表す内容がどれくらい一般的か（一般性）これらのポイントについて、わかりやすく説明していきます。 1. 変数の使用範囲によって変わる名前変数が使われる範囲（プログラマーは「スコープ」と呼びます）によっ...

Clockifyの稼働状況をDiscordへ通知する仕組み

はじめに弊社では従業員の稼働状況をClockifyを使って管理しています。また社内コミュニケーションツールとして使っているDiscordとClockifyを連携させ、稼動状況を通知する仕組みを導入しています。今回はClockifyとDiscordを連携する仕組みについて解説します。この記事で解説する内容 ClockiflyとDiscordの連携 hono * Cloud Runを使ったサーバー構築 Clockify webhook ClockifyにはWebhookを送る仕組みがあります。 Preferences > Advance > Webhoo...

CapacitorJSで始めるアプリ開発

はじめに Webアプリをモバイルアプリ化するツールとして、CapacitorJSを紹介します。 CapacitorJSはクロスプラットフォーム開発のためのライブラリです。既存のWebアプリをiOSやAndroidアプリとして展開することや、Web技術でアプリ開発が可能です。今回は、CapacitorJSを使ってReactで作ったWebアプリをiOSアプリとAndroidアプリにする方法と実際に運用する上でのTipsを紹介します。 Reactアプリの作成まずは、Reactアプリを作成します。 Viteのドキュメントに沿ってReact-tsプロジェクトを作成します。 pnpm ...

stripe SESSIONS 2024現地レポート〜初海外編〜

こんにちは、ひょうどうです。今回はサンフランシスコで開催されたstripe SESSIONS 2024に現地参加したレポートをします。現地参加したきっかけは、stripe ジャパン様から招待していただいたことと、サンフランシスコに一度は行ってみたい好奇心です。本レポートは、Sessions の内容については触れず、初海外での体験を中心に書いていきます。事前準備アメリカ行きが決まってすぐしたことは、海外によくいく先輩にアドバイスをもらいました。その中で、以下のようなことを教えてもらいました。 ESTA の申請ホテルの清掃時にチップを渡すため、小銭を持っていくチップは...

依存性の逆転をクラスなしで実現する方法

はじめに前回自分が書いた記事で依存性の逆転について説明したところ、じわじわいいねが増えて嬉しかったため、今回はその続編です。前回の記事で説明した依存性逆転のテクニックはオブジェクト指向の特権のように思われがちですが、実はそうではありません。むしろクラスを使わない関数型スタイルの方が簡潔に表現できます。今回はそれを示すために、前回の説明をTypeScriptでクラスを使わずに行います。依存性の逆転のやり方（関数バージョン）例えば関数Aが関数Bに依存している状況を考えます。（クラス図を関数の依存関係と読み替えてください）具体例: 関数Aは挨拶するとき、関数Bに挨拶の...

【Stripe】Checkout Sessionで初回決済したカードをデフォルトカードにする方法

こんにちは、ひょうどうです。今回は、Stripe Checkout Session（以下 Checkout と略す）で初回決済に使用したクレジットカード（以下カードと略す）をデフォルトカードに設定する方法を紹介します。 Checkout で初回決済に使用したカードは顧客のデフォルトカードにはならないため、2 回目以降に Stripe Charges API を活用した 1 クリック購入フローを実現することができません。そこで、初回決済が行われた後、以下で紹介するデフォルトカードに設定する処理をすることで、2 回目以降から 1 クリック決済を実現することができます。デフォルトカ...

【Luma AI】Video-to-3D AI APIをNodeJSで使う方法

こんにちは！本記事ではLuma AIが提供している「Video-to-3D AI」の API の使用方法をメモがてら記載します。 2023 年 3 月 38 日（日本時間）Luma AI の公式 Twitter より API が公開されました。 Luma AI API Key の発行方法まずは API Key を発行する必要があります。こちらにアクセスし、以下の画像の場所に API Key があります。この Key を保存しましょう。 Luma AI API の使い方公式サイトのチュートリアルにも記載がありますが、3D モデル化の手順はこちらです。 Create ...

【Stripe】有効なCheckout URLを複数発行しないための施策【二重決済対策】

この記事は、JP_Stripes Advent Calendar 2022 13 日目の記事です。今回は紹介する施策は、実際に Stripe Checkout URL を使った決済サービスを運用する際に起こった不具合対策です。起こった事象二重決済による問い合わせが非常に多発した時期がありました。これは本当にまれな事象ですが、以下のような手法を行ったユーザーがおられました。スマホブラウザから Checkout URL を生成するための決済ボタンを押す生成した URL をコピーし、PC ブラウザに貼り付ける再度スマホブラウザから Checkout URL を生成し、上記と...

Stripe売上報告を仕組み化してみた

この記事は、JP_Stripes Advent Calendar 2022 12 日目の記事です。今回は、Stripe の売上報告の仕組み化した実装例をいくつか紹介します。サブスク課金が起こった際の通知前月分の売上報告を通知サブスク課金が起こった際の通知現在リリース中のお絵描きばりぐっどくんには、プレミアムばりぐっどくんというプランがあります。そのアプリに Stripe Subscription を導入しており、月額契約されると Discord に通知が来る仕組みを実装しました。活用した技術 Stripe Webhook Discord Webhook ...

Stripe Tax使用時、Apple Pay・Google Payを表示する方法

この記事は、JP_Stripes Advent Calendar 2022 7 日目の記事です。とあるプロジェクトで Stripe を使った月額サービスアプリを作りましたが、開発時 Apple 　 Pay と Google Pay(以下電子決済と呼ぶ)が表示されない現象がありました。本来は以下のように表示されます。電子決済は基本自動で有効化になっているため、Stripe ダッシュボード上の設定不足はありませんでした。原因色々調査した結果、Checkout URL を生成する際の設定が原因だと判明しました。以下は Checkout 作成時のコードです。 const { ...

LEARN MORE