はじめに ABC記法を使って楽譜を表示できるライブラリ「Abcjs」を使用して、テキストベースで楽譜を管理・表示する方法をご紹介します。 Abcjsとは Abcjsは、ABC記法で書かれたテキストを楽譜として表示するためのJavaScriptライブラリです。 ABC記法は、テキストベースの音楽記譜法で、シンプルな文法で楽譜を表現できます。 例えば、以下のようなコードでCメジャースケールを表示できます。 <Music code="CDEFGAB" />; Abcjsの導入 Reactで使用する場合、以下のようなシンプルなコンポーネントを作成するだけで実装できます。...
HRMOS勤怠の打刻をDiscordに投稿するBotをCloudflare Workerで作ってみた はじめに 私の会社ではHRMOS勤怠という勤怠管理システムで打刻を行っています。このシステムの打刻履歴を全員の見えるところに配信したい、でも工数はかけたくない！という問題をCloudflare Workerで簡単に解決できたのでそれについて紹介します。 https://github.com/nakanoasaservice/hrmos-kintai-to-discord-bot システム概要 開発したシステムは以下のような流れで動作します： 指定時間ごとにCloudflar...
! この記事は、「ハックツ&YOSHINANI 合同アドベントカレンダー Advent Calendar 2024」の 23 日目です。 はじめに 「日々の業務をもっとラクに進めたい」 「ブログやコラムの更新だけで手いっぱいで、他のことまで手が回らない」 こんな悩みを抱えている方が多いと思います。私たちは、そういった課題を解決するためにChatGPTを活用した独自ツールを作り上げ、実際に取引先の企業で年間 1 億円もの人件費削減に成功しました。 この記事では、「どうやってそんな成果を出したの？」「どんな工夫を盛り込んだの？」といったポイントを、できるだけわかりやすくご紹...
はじめに 顧客の支払いステータスを管理するのは意外と大変ですよね。顧客に請求書は送られたのか、顧客は支払いを終わらせたなどのステータスを管理するためにスプレッドシートやNotionデータベースを用意し、決済代行サービスやメール通知などをチェックし、その都度人の手でステータスを更新する必要があります。 顧客の支払いを管理するNotionデータベースと請求のステータスが一致していればいいのにと思いませんか？今回はそれを実現するために最近リリースされたNotion WebhookとStripeを活用して、請求書発行からステータスの更新までを自動化してみました。 https://github...
はじめに ! この記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の17日目の投稿です。 本記事では、テキストや画像から3Dモデルを自動生成するAIツールMeshyをAPI経由で利用する方法を紹介します。主な内容はMeshyとは何か、Postmanを使った利用手順、実際の呼び出し例を示すチュートリアル、まとめになります。 Meshyとは Meshyは、テキストや画像入力から3Dモデルを自動生成するAIツールです。 生成結果は.objや.glb、.fbxなど、一般的な3Dモデル形式でダウンロード可能なため、すぐに3...
はじめに Notionのデータベースはチームでのタスク管理やプロジェクト管理に便利ですが、これまでデータベースの変更通知はSlackにしか対応していませんでした。Slack を採用しているチームではこの機能を活用してCSチームから来た問い合わせのステータスなどをSlackに通知するなどの ChatOps を実現しており、Discordを採用しているチームにとっては不便な状況が続いていました。 そんな中、つい最近NotionにWebhookオートメーションが追加されました！ https://x.com/NotionJP/status/1864201607698894850 これを活用す...
はじめに この記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の9日目です。 フロントエンドの開発で弊社が取り組んでいるGitHub Actionsの活用方法を紹介します。 使用技術はNextJS, Turborepo, pnpmです。 要約 pr-agentの導入: AIを活用したレビューでレビュワーの負担を下げました。 TypeCheck,Lint,Build CIの作成: 基本的なCIを組みました。 PRAgent 弊社は小規模なチーム構成で開発を進めているため、コードレビューがスキップされてマージ...
はじめに この記事では例外処理をきちんと行うためのやり方として例外をリターンする方法について説明し、それを支援するための自作ライブラリ「tagged-error」について紹介します。またその実装方法についても解説します。 https://github.com/nakanoasaservice/tagged-error https://www.npmjs.com/package/@nakanoaas/tagged-error 皆さん例外処理ちゃんとやってますか？ 例外が発生するかもしれない関数を呼び出すとき、ついついtry catchをサボってしまうことってよくありますよね？ 例:...
はじめに この記事は「ハックツ&YOSHINANI合同アドベントカレンダー Advent Calendar 2024」の1日目です。 株式会社YOSHINANI CTOのふっけです。✨ アドベントカレンダーの季節がやってまいりました。🎄🎉 今回は株式会社ハックツさんと株式会社YOSHINANIで合同アドベントカレンダーを実施することになりました!🤝こちらはその初日の記事となります! 要約 scrcpyを使うとmacでもAndroid端末のミラーリングが可能 scrcpyとは scrcpyとはAndroid端末をミラーリングするためのツールです。 scrcp...
はじめに 新規開発で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...
はじめに 機能開発とデプロイの両方を円滑に進めるために、Feature Flagの運用を始めました。 Feature Flagとは機能のON/OFFを切り変えるフラグをコード内に埋め込む運用のことです。 Feature Flagを用いることで、機能を隠しながらリリースしビックバンリリースを防いだり、一部ユーザーにのみ機能を公開するようなことができます。 今回はFirebse Remote ConfigとNextJSを使ったFeature Flagの管理について執筆します。 Firebase Remote Config Firebase Remote ConfigはFirebase...
はじめに 変数や関数の命名の長さっていつも悩みませんか？長すぎても短すぎてもコードが読みづらくなり、コードレビューなどで揉めてしまうこともありますよね。この記事ではその変数名の長さを決める2つの強力なポイントについて紹介します。 変数名を付けるときの2つのポイント 変数名を付けるときに気をつけたい2つのポイントがあります： その変数がどこで使われるか（使用範囲） その変数が表す内容がどれくらい一般的か（一般性） これらのポイントについて、わかりやすく説明していきます。 1. 変数の使用範囲によって変わる名前 変数が使われる範囲（プログラマーは「スコープ」と呼びます）によっ...
はじめに 弊社では従業員の稼働状況をClockifyを使って管理しています。 また社内コミュニケーションツールとして使っているDiscordとClockifyを連携させ、稼動状況を通知する仕組みを導入しています。 今回はClockifyとDiscordを連携する仕組みについて解説します。 この記事で解説する内容 ClockiflyとDiscordの連携 hono * Cloud Runを使ったサーバー構築 Clockify webhook ClockifyにはWebhookを送る仕組みがあります。 Preferences > Advance > Webhoo...
はじめに Webアプリをモバイルアプリ化するツールとして、CapacitorJSを紹介します。 CapacitorJSはクロスプラットフォーム開発のためのライブラリです。 既存のWebアプリをiOSやAndroidアプリとして展開することや、Web技術でアプリ開発が可能です。 今回は、CapacitorJSを使ってReactで作ったWebアプリをiOSアプリとAndroidアプリにする方法と実際に運用する上でのTipsを紹介します。 Reactアプリの作成 まずは、Reactアプリを作成します。 Viteのドキュメントに沿ってReact-tsプロジェクトを作成します。 pnpm ...
こんにちは、ひょうどうです。 今回はサンフランシスコで開催されたstripe SESSIONS 2024に現地参加したレポートをします。 現地参加したきっかけは、stripe ジャパン様から招待していただいたことと、サンフランシスコに一度は行ってみたい好奇心です。 本レポートは、Sessions の内容については触れず、初海外での体験を中心に書いていきます。 事前準備 アメリカ行きが決まってすぐしたことは、海外によくいく先輩にアドバイスをもらいました。 その中で、以下のようなことを教えてもらいました。 ESTA の申請 ホテルの清掃時にチップを渡すため、小銭を持っていく チップは...
はじめに 前回自分が書いた記事で依存性の逆転について説明したところ、じわじわいいねが増えて嬉しかったため、今回はその続編です。 前回の記事で説明した依存性逆転のテクニックはオブジェクト指向の特権のように思われがちですが、実はそうではありません。 むしろクラスを使わない関数型スタイルの方が簡潔に表現できます。 今回はそれを示すために、前回の説明をTypeScriptでクラスを使わずに行います。 依存性の逆転のやり方（関数バージョン） 例えば関数Aが関数Bに依存している状況を考えます。（クラス図を関数の依存関係と読み替えてください） 具体例: 関数Aは挨拶するとき、関数Bに挨拶の...
こんにちは、ひょうどうです。 今回は、Stripe Checkout Session（以下 Checkout と略す） で初回決済に使用したクレジットカード（以下カードと略す）をデフォルトカードに設定する方法を紹介します。 Checkout で初回決済に使用したカードは顧客のデフォルトカードにはならないため、2 回目以降に Stripe Charges API を活用した 1 クリック購入フローを実現することができません。 そこで、初回決済が行われた後、以下で紹介するデフォルトカードに設定する処理をすることで、2 回目以降から 1 クリック決済を実現することができます。 デフォルトカ...
こんにちは！ 本記事では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 ...
この記事は、JP_Stripes Advent Calendar 2022 13 日目の記事です。 今回は紹介する施策は、実際に Stripe Checkout URL を使った決済サービスを運用する際に起こった不具合対策です。 起こった事象 二重決済による問い合わせが非常に多発した時期がありました。 これは本当にまれな事象ですが、以下のような手法を行ったユーザーがおられました。 スマホブラウザから Checkout URL を生成するための決済ボタンを押す 生成した URL をコピーし、PC ブラウザに貼り付ける 再度スマホブラウザから Checkout URL を生成し、上記と...
この記事は、JP_Stripes Advent Calendar 2022 12 日目の記事です。 今回は、Stripe の売上報告の仕組み化した実装例をいくつか紹介します。 サブスク課金が起こった際の通知 前月分の売上報告を通知 サブスク課金が起こった際の通知 現在リリース中のお絵描きばりぐっどくんには、プレミアムばりぐっどくんというプランがあります。 そのアプリに Stripe Subscription を導入しており、月額契約されると Discord に通知が来る仕組みを実装しました。 活用した技術 Stripe Webhook Discord Webhook ...
この記事は、JP_Stripes Advent Calendar 2022 7 日目の記事です。 とあるプロジェクトで Stripe を使った月額サービスアプリを作りましたが、開発時 Apple Pay と Google Pay(以下電子決済と呼ぶ)が表示されない現象がありました。 本来は以下のように表示されます。 電子決済は基本自動で有効化になっているため、Stripe ダッシュボード上の設定不足はありませんでした。 原因 色々調査した結果、Checkout URL を生成する際の設定が原因だと判明しました。 以下は Checkout 作成時のコードです。 const { ...
この記事は個人開発Advent Calendar 2022 4 日目の記事です。 はじめまして、ひょうどうです。 2022 年 9 月ぐらいにバズった AI でお絵描きができる LINE サービス「お絵描きばりぐっどくん」をコミュニティ内の学生が開発したことで、最近ばりぐっどくん開発でバタバタです... 簡単に自己紹介をさせてください。 ばりぐっど大学の運営、開発の統括をしてます。 2022 年 12 月現在、開発してきた LINE 公式アカウントの総友だち登録数は 330 万人を突破しました。 最近海外の AI の進化が非常に激しい為、最速でキャッチアップし LINE で実装し「ばりぐ...
今回は、こちらのツイートで紹介した API の使用方法について紹介します。 一斉配信の分析 API https://developers.line.biz/ja/reference/messaging-api/#get-message-event セグメント配信の分析 API https://developers.line.biz/ja/reference/messaging-api/#get-statistics-per-unit 使用方法 API export const getLineInsight = async ( unitId: string, from: st...
ローカルでは問題なくできていた Firebase Functions のデプロイですが、GitHu ｂ Actions だと以下のようなエラーが起きました。 ✔ functions: Finished running predeploy script. i functions: ensuring required API cloudfunctions.googleapis.com is enabled... i functions: ensuring required API cloudbuild.googleapis.com is enabled... i artifactre...
あくまで私の生活スタイルに合う働き方を紹介しているため、参考程度にお読みください。 書いた経緯 １年前ぐらいから「フリーランスエンジニアとして独立したいけど、どのような仕事をしてますか？」という相談が私宛に届くようになり、最近になってかなり言語化できるようになってきたため、忘れないうちに記事にまとめておこうと考えました。 本編 結論から述べます。 現状の働き方は３つあり、これらを同時こなしています。 クライアントワーク（２社） 単発受託開発 継続受託開発（自社サービスに近い） ひとつずつ深堀ります。 クライアントワーク（２社） クライアントワークは、エージェントさんを通し...
解決方法だけ知りたい方は、結論セクションを御覧ください。 はじめに 私事ですが、先日新しい M2 MacBookAir を買いました。 ことの始まりはこのイベントが原因です。 ここ最近、GitHub Actions の CI/CD 環境でデプロイ作業をしてたのでローカルの Docker 環境を気にしてませんでした。 しかしつい先週大学の教授から、大学時代に作った「研究室マッチングシステム」というアプリを今年も卒業研究室配属のマッチングに使うと連絡があり、チューニングしました。 CI/CD 環境なんてしらない３年前の僕が設計したため、ローカルで Build するようのスクリプトが作...
最近 Nx を使って monorepo 開発し Vercel にデプロイすることが増えたため、その方法をメモします。 Nx に関してはこちら https://nx.dev/ デプロイ方法 「Sessiongs」→「General」→「Build & Development Settings」内の設定方法はこちらです。 項目 スクリプト BUILD COMMAND npx nx build nextjs --prod OUTPUT DIRECTORY dist/apps/nextjs/.next 今回は、アプリケーション名をnextjsにしていますが、...
現在運用中の Stripe Connect を使ったサービスで、子アカウントユーザーより「入金の明細がほしい」と言われたため、アップデートするために Stripe API を色々触った知見をメモします。 balanceTransactions API 調査した結果、balanceTransactionsを使うのが妥当だと判断しました。 使い方 interface BalanceData { created: number fee: number net: number amount: number } const balanceAscSortByCreated ...
私が LIFF と LINE ミニアプリを開発するために使っていた、テンプレートを公開します。 https://github.com/hyodoblog/liff-nextjs-template 先日リリースされた LIFF Mock を搭載してます。 https://github.com/line/liff-mock 使い方 cloneまたはuse templateをする .env.exampleファイルをコピーし、.env.localファイルを作成する cp .env.exapmle .env.local NEXT_PUBLIC_LIFF_ID変数に LIFF ID ...
今回は以前、LINE Developer Community の LT 会で発表した以下の動画を記事にします。 https://www.youtube.com/watch?v=6lZbW23p_rs&t=110s ! 本記事は、Stripe API に少し知見がある方向けに書いているため、初学者向けの説明は省いている箇所がありますがご了承ください。 序章 2021 年 11 月にリリースした「すごい文字起こしばりぐっどくん」という画像、音声、動画を LINE トーク画面に送ると文字起こししてテキストで返す LINE アプリ、のアーキテクチャをもとに LINE× 月額会員サー...
GitHub の草が生えていると開発のモチベーションが上がり継続的に開発を続けることができると思います。 そこで今回は、GitHub Skyline で出力される stl データを 3D プリンターで出力してみました。 https://skyline.github.com/hyodoblog/2021 出力方法 今回は、「DMM Make」というサービスで出力しました。 材質によって価格が 4,000~30,000 円内で調整されます。 https://make.dmm.com/print/biz/corp/ 注文から到着まで約 1 週間ほどかかりましたが無事到着しました。 一番安い...
作ったもの 自社で DB を持たず、Stripe のダッシュボードで顧客管理、商品管理、注文管理ができる、LINE チャットコマースアプリを作りました。 ! 2 泊 3 日間の開発合宿で開発したアプリなので細かい仕様に関してはご了承ください 友だち追加から商品詳細 単品商品購入手順 定期販売購入手順 定期販売のキャンセル手順 作った経緯 2022 年 4 月に公開された Stripe Search API により、Stripe に保存している顧客、注文、商品、といった情報にクエリをかけることができるようになりました。 https://stripe.com...
本記事は、開発エディターに VSCode を採用している方を対象としております VSCode ワークスペース VSCode には、ワークスペースという機能がありソースコードで VSCode の設定ファイルを組織またはチームごとに統一することができます。 詳しくはこちらの記事を参考ください。 https://qiita.com/YuichiNukiyama/items/ef16a0219f46ea03a045#ワークスペースとは .code-workspaceファイルをデスクトップに置く利点 パソコンを起動した際、デスクトップ画面には開発環境すばやくアクセスするためのものが並んで...
LINE Bot での画像の取り扱い方法 LINE Bot で画像を扱う方法は以下の 2 種類あります。 Stream API Buffer 今回は LINE Bot でのこの 2 つの取り扱い方法について説明します。 前提条件 messageId：webhook で取得したevent.message.id line：@line/bot-sdkで初期化した Client Stream API export const getMessageContent = (messageId: string): Promise<Readable> => { ...
はじめに LINE Bot 開発入門したてのころ、デバッグするためには毎回 GAE または Cloud Functions にデプロイしてconsole.logで確認する方法をとっていた時期があり、デプロイには 5 分から 10 分かかり、console.logがロギングに反映されるには数秒かかったりなどすごく時間を浪費してました。 Ngrok を使えばこれらの問題が一気に解消されます。 このサービスを使うことで、PC 内で立ち上げたサーバ（localhost）を 1 つのコマンドを叩くだけで外部に公開することができます。 https://ngrok.com 言葉で説明するより実際に...
私が LINE Bot を迅速に開発するために使っていた、LINE Bot のテンプレートを公開します。 https://github.com/hyodoblog/line-bot-typescript-template LINE Bot 入門でよく行われる、オウム返しが初期構築されるようになっております。 初期設定手順は README に記載しているためこちらでは省略します。 公開目的 良質な LINE Bot テンプレートを作るため 初学者の LINE Bot 開発のハードルを下げるため LINE API Expert として LINE Developer Community ...
依存性逆転の原則とは SOLIDの原則のD、依存性逆転の原則（Dependency Inversion Principle）とは、ざっくり言えばプログラムの重要な部分が、重要でない部分に依存しないよう設計すべきであるということです。 これを実現するためには依存関係の向きを自由に制御するテクニックが非常に役立ちます。 この記事ではそのテクニックを簡単な具体例を交えて紹介します。 依存性の逆転のやり方 例えばクラスAがクラスBに依存している状況を考えます。 具体例: Aは挨拶するとき、Bに挨拶の仕方を教えてもらって挨拶している class B { // クラスBの定義 getH...