feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Pepabo Tech Portal</title>
  <id>https://tech.pepabo.com/</id>
  <link href="https://tech.pepabo.com/"/>
  <link href="https://tech.pepabo.com/feed.xml" rel="self"/>
  <updated>2025-02-12T15:00:00+00:00</updated>
  <author>
    <name>GMO Pepabo, Inc.</name>
  </author>
  <entry>
    <title>ロリポップ for Gamers におけるフロントエンドテストの拡充</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/02/13/gamers-frontend-component-test/"/>
    <id>https://tech.pepabo.com/2025/02/13/gamers-frontend-component-test/</id>
    <published>2025-02-12T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>kinosuke01</name>
    </author>
    <content type="html">&lt;p&gt;こんにちは。Webアプリケーションエンジニアの&lt;a href="https://x.com/kinosuke01"&gt;きのすけ&lt;/a&gt;です。&lt;/p&gt;

&lt;p&gt;フロントエンド開発において、適切なテスト戦略を選択し実装することは、品質を担保する上で重要な課題です。この記事では、ロリポップ for Gamersにおけるフロントエンドのテスト拡充の取り組みについて紹介したいと思います。&lt;/p&gt;

&lt;h2 id="背景"&gt;背景&lt;/h2&gt;

&lt;p&gt;GMOペパボでは、2024年に「&lt;a href="https://gamers.lolipop.jp/"&gt;ロリポップ for Gamers&lt;/a&gt;」というサービスをリリースしました。これは、VPSをベースに「ゲームのマルチプレイが簡単にできる環境」を提供するサービスです。技術スタックとしては、フロントエンドにNext.js、バックエンドにGoを採用しています。&lt;/p&gt;

&lt;p&gt;&lt;img src="https://files.speakerdeck.com/presentations/57ee0628a8174d5094b9a249a3c14441/slide_39.jpg" /&gt;&lt;/p&gt;

&lt;p&gt;プロジェクト初期において、フロントエンドの経験が豊富なチームメンバーはいませんでした。しかし、迅速な市場参入を実現するために、非常に限られた時間の中で、可能な限りフロントエンドのキャッチアップを行い実装を行いました。&lt;/p&gt;

&lt;p&gt;結果として、プロジェクトの立ち上げから13営業日で初期リリースを実現することができました。&lt;/p&gt;

&lt;h2 id="課題"&gt;課題&lt;/h2&gt;

&lt;p&gt;プロジェクト初期において、フロントエンドのテストは表示やフックに関わらないロジック部分のユニットテストのみを実装していました。しかし、実際の開発を進める中で、以下のような課題が見えてきました。&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;ユーザーの実際の操作（ボタンクリックなど）に対する動作確認ができていない&lt;/li&gt;
  &lt;li&gt;APIリクエストの成功/失敗時の挙動を確認できていない&lt;/li&gt;
  &lt;li&gt;画面表示が意図通りに更新されるかを確認できていない&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;非常に簡略化をすると以下のようなイメージです。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// sample.tsx&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;wrapText&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!!!!!!!`&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reqApi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// サンプルのため、API呼び出しをPromiseで代替&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Sample&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setValue&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleClick&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;reqApi&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;setValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;wrapText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;v&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;data-testid&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;'sample-button'&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleClick&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        Fetch
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;span&lt;/span&gt; &lt;span class="na"&gt;data-testid&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;'sample-text'&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;span&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// api.ts&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reqApi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// サンプルのため、API呼び出しをPromiseで代替&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// sample.test.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;it&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vitest&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;wrapText&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./sample&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// このくらいしか書けない...&lt;/span&gt;
&lt;span class="nx"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;wrapText&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;should wrap text&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;wrapText&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nx"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World!!!!!!!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;このテストコードでは、単純な文字列処理（wrapText関数）の検証しかできていません。実際のアプリケーションでは&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;ボタンをクリックしたときの動作&lt;/li&gt;
  &lt;li&gt;データ取得後の画面表示の更新&lt;/li&gt;
  &lt;li&gt;エラー発生時のエラーハンドリング&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;といった重要な部分が検証できておらず、品質を担保するには不十分な状態でした。&lt;/p&gt;

&lt;p&gt;しかし、テストの方針について再考するほど余裕もありません。一旦はそのまま実装を進め、後ほど検討することとしました。&lt;/p&gt;

&lt;h2 id="対応したこと"&gt;対応したこと&lt;/h2&gt;

&lt;p&gt;リリースラッシュが一区切りついたタイミングで、チーム内の有志にてフロントエンドの課題を棚卸ししました。この時期にはフロントエンドの経験が豊富なメンバーがジョインしてくれたため、相談をしつつテストコードのあり方についての議論も行いました。&lt;/p&gt;

&lt;h3 id="テスト戦略を決める"&gt;テスト戦略を決める&lt;/h3&gt;

&lt;p&gt;結論から言うと「testing-libraryを用いたコンポーネントテスト」に重点を置く方針としました。jsdomのようなライブラリを使用してメモリ上にコンポーネントをレンダリングし、イベントを発火することで、DOMにどのような変化が発生したかをチェックするテストになります。&lt;/p&gt;

&lt;p&gt;テストコードの例は以下のようになります。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// sample.test.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;fireEvent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;waitFor&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@testing-library/react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;vi&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vitest&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;reqApi&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./api&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Sample&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./sample&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="c1"&gt;// APIをモック&lt;/span&gt;
&lt;span class="nx"&gt;vi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mock&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./api&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;reqApi&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;vi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;span class="p"&gt;}))&lt;/span&gt;

&lt;span class="nx"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Sample&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// 各テストの前にモックをリセット&lt;/span&gt;
  &lt;span class="nx"&gt;beforeEach&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;vi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clearAllMocks&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;正常系のメッセージが表示されること&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// APIの成功レスポンスをモック&lt;/span&gt;
    &lt;span class="nx"&gt;vi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reqApi&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;mockResolvedValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// レンダリングする&lt;/span&gt;
    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Sample&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// レンダリングされた要素を取得する&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getByTestId&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sample-button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getByTestId&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sample-text&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// クリックする前の表示&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toHaveTextContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// クリックする&lt;/span&gt;
    &lt;span class="nx"&gt;fireEvent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// クリック後の表示&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;waitFor&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toHaveTextContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, World&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;

  &lt;span class="nx"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;APIがエラーの場合、エラーメッセージが表示されること&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// APIのエラーレスポンスをモック&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;errorMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;API Error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="nx"&gt;vi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mocked&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reqApi&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;mockRejectedValue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;errorMessage&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

    &lt;span class="c1"&gt;// レンダリング&lt;/span&gt;
    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Sample&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// ボタンをクリック&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getByTestId&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sample-button&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;fireEvent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;click&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;// エラーメッセージが表示されることを確認&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;waitFor&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getByTestId&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sample-text&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toHaveTextContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Error: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;errorMessage&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;ユーザーのアクションを起点に、画面にどのように反映されるかまで、コンポーネント単位で網羅的にテストができているのではないでしょうか。&lt;/p&gt;

&lt;p&gt;コンポーネントテストは 2024年10月の &lt;a href="https://www.thoughtworks.com/radar/techniques/component-testing"&gt;Technology Radar で Adopt&lt;/a&gt; となっており、トレンドに即した選定でもあったかと思います。&lt;/p&gt;

&lt;p&gt;なお、他に「&lt;strong&gt;hook,viewで独立したユニットテストに重きを置く&lt;/strong&gt;」という手法を検討しましたが、以下の理由のためお見送りしました。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;ふるまいではなく実装をテストしてしまう傾向がありそう。そのため、コンポーネントのリファクタリングに伴いテストも書き換える必要がでてきそう。&lt;/li&gt;
  &lt;li&gt;&lt;a href="https://www.react-hook-form.com/"&gt;React Hook Form&lt;/a&gt; のように、簡単な設定で挙動が変わるコンポーネントのテストができない。&lt;/li&gt;
  &lt;li&gt;hooksをテストするライブラリが、&lt;a href="https://github.com/testing-library/react-testing-library?tab=readme-ov-file#hooks"&gt;コンポーネントテストを推奨&lt;/a&gt;していた。&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id="いつやるかを決める"&gt;いつやるかを決める&lt;/h3&gt;

&lt;p&gt;テスト戦略は決まりましたが、いつ実装するかという問題がありました。リリースして間もないサービスです。提供機能を充実させることが非常に重要なフェーズでもありました。&lt;/p&gt;

&lt;p&gt;そのような状況下で私がとったアプローチは「まずは自主的な活動として、朝の30分時間を確保してテストコードを書く」ことでした。リリースして間もないサービスで、機能もそれほど多くありません。裁量が効く範囲で時間を確保すれば、おおむねテストコードの拡充ができるのではないかと考えました。また、AIバンドルエディタであるCursorも活用すれば、効率的にテストコードを拡充できる予感もありました。&lt;/p&gt;

&lt;h3 id="テストコードの生成"&gt;テストコードの生成&lt;/h3&gt;

&lt;p&gt;Cursorによるテストコードの生成は、当初は試行錯誤でした。しかし最終的には以下の手法で、ほぼ手直しなく生成できることを確認しました。&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;前準備として data-testid(テストに用いるタグの識別子)を付与するために、以下のようなプロンプトを使用。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt; '@testing-library/react', 'vitest' を使用して、コンポーネントのテストを書きたいです。まずは xxx.tsx に data-testid を付与してください。
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;テスト対象となるコードと、関連するコードをコンテキストとして追加する。&lt;/p&gt;

    &lt;p&gt;&lt;img src="/blog/2025/02/13/gamers-frontend-component-test/images/cursor-context.jpg" alt="Cursorにコンテキストを追加" /&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Cursor Composer を用いて、以下のようなプロンプトでテストコード生成を指示する。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt; '@testing-library/react', 'vitest' を使用して、コンポーネントのテストを書いてください。テストのファイルは xxx.test.tsx としてください。なお、hook は以下の例のように、xxxApi のメソッドをモックするようにしてください。

 // ここに例となるコードを記載
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;生成したテストケースが不十分だと感じるときは、以下のプロンプトを用いてチューニングする。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt; では、この出力を60点とします。60点とした時に100点とはどのようなものですか？100点にするために足りないものを列挙した後に、100点の答えを生成してください。
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;このような取り組みを経て、効率よくテストコードの拡充を進めることができました。&lt;/p&gt;

&lt;p&gt;※ なお、AIによるコード生成領域は進化が著しいため、読者の方がこの記事を目にされたときには、かなり古い手法になっているかもしれません。&lt;/p&gt;

&lt;h3 id="みんなで実装できるようにする"&gt;みんなで実装できるようにする&lt;/h3&gt;

&lt;p&gt;ここまでの実装は主に私が個人で進めてきましたが、これではスケールしません。チーム全員が取り組めるようにする必要があります。&lt;/p&gt;

&lt;p&gt;人が行動を起こす条件には&lt;a href="https://note.com/fladdict/n/n723d55548d10"&gt;「動機」「能力」「きっかけ」の3つが必要&lt;/a&gt; という考え方があります。チームメンバーにはテストコードを書いたほうがいいという思いはあるため「動機」は満たしていそうです。あとは「能力」と「きっかけ」を作ったらよいのではないかと考えました。&lt;/p&gt;

&lt;p&gt;これらを満たすため、メンバーを集め、コンポーネントテストを書くハンズオンを実施することにしました。実際に手を動かしてコードを書くことで「能力」を醸成し、そしてハンズオンというイベント自体を「きっかけ」とするアプローチです。&lt;/p&gt;

&lt;p&gt;ハンズオンは、以下の構成で実施しました。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href="https://www.robinwieruch.de/react-testing-library/"&gt;React Testing Library Tutorial&lt;/a&gt; をベースとした座学&lt;/li&gt;
  &lt;li&gt;Cursorを使ってテストコードを生成する手法の紹介&lt;/li&gt;
  &lt;li&gt;実運用されているプロダクトのテストコードを各自で実装&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;ハンズオンはメンバーからは好評で、各自がフロントエンドのテストを書く土壌を整えることができたのではないかと思います。現在は、わたし以外が書いたテストコードがどんどん増えています。&lt;/p&gt;

&lt;h2 id="残された課題"&gt;残された課題&lt;/h2&gt;

&lt;p&gt;テストを書くのは「手早く安全にコードの変更を実現するため」と考えています。そのためには、複数のコンポーネントを統合したインテグレーションテストや、backendともつなぎ込んだE2Eテストの自動化も検討していく必要がありそうです。今後はそれらも視野にいれて、開発に取り組んでいきたいと思います。&lt;/p&gt;

&lt;p&gt;なお、ロリポップ for Gamersの backendにおけるテストについては、「&lt;a href="https://developers.gmo.jp/technology/57747/"&gt;短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略&lt;/a&gt; 」に詳しく記載があります。興味のある方は是非ご覧ください。&lt;/p&gt;

&lt;h2 id="まとめ"&gt;まとめ&lt;/h2&gt;

&lt;p&gt;以上、ロリポップ for Gamersにおけるフロントエンドのテスト拡充の取り組みについて紹介しました。コンポーネントテストを中心としたテスト戦略の選定から、AIを活用した効率的な実装、そしてチーム全体での取り組みへと発展させた経緯をお伝えしました。この事例が、フロントエンドのテスト導入を検討されている方々の参考になれば幸いです。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>東京Ruby会議12でbuty4649、yumu、kenchanが登壇しました！</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/02/12/tokyorubykaigi-report/"/>
    <id>https://tech.pepabo.com/2025/02/12/tokyorubykaigi-report/</id>
    <published>2025-02-11T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>yumu</name>
    </author>
    <content type="html">&lt;p&gt;2025年1月18日（土）に開催された&lt;a href="https://regional.rubykaigi.org/tokyo12/"&gt;東京Ruby会議12&lt;/a&gt;で、GMOペパボの&lt;a href="https://x.com/buty4649"&gt;@buty4649&lt;/a&gt;、&lt;a href="https://x.com/myumura3"&gt;@yumu&lt;/a&gt;、&lt;a href="https://x.com/kenchan"&gt;@kenchan&lt;/a&gt;が登壇しました！&lt;/p&gt;

&lt;p&gt;本記事では、発表の内容を振り返りつつ、当日十分に説明しきれなかった部分の補足や、後日談についてお話しします。&lt;/p&gt;

&lt;ol id="markdown-toc"&gt;
  &lt;li&gt;&lt;a href="#yumu-rubyawsで作る動画変換システム" id="markdown-toc-yumu-rubyawsで作る動画変換システム"&gt;@yumu Ruby×AWSで作る動画変換システム&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#発表の概要" id="markdown-toc-発表の概要"&gt;発表の概要&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#内容の補足" id="markdown-toc-内容の補足"&gt;内容の補足&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#後日談shoryuken-gemの復活と今後の展開" id="markdown-toc-後日談shoryuken-gemの復活と今後の展開"&gt;後日談：Shoryuken gemの復活と今後の展開&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#buty4649-mrubyでワンバイナリなテキストフィルタツールを使った" id="markdown-toc-buty4649-mrubyでワンバイナリなテキストフィルタツールを使った"&gt;@buty4649 mrubyでワンバイナリなテキストフィルタツールを使った&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#regionalrb-and-the-tokyo-metropolis" id="markdown-toc-regionalrb-and-the-tokyo-metropolis"&gt;Regional.rb and the Tokyo Metropolis&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#q-コミュニティを長く続けるコツは" id="markdown-toc-q-コミュニティを長く続けるコツは"&gt;Q. コミュニティを長く続けるコツは？&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#q-コミュニティを立ち上げたいと思っている人は何からするといい" id="markdown-toc-q-コミュニティを立ち上げたいと思っている人は何からするといい"&gt;Q. コミュニティを立ち上げたいと思っている人は何からするといい？&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#おわりに" id="markdown-toc-おわりに"&gt;おわりに&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id="yumu-rubyawsで作る動画変換システム"&gt;@yumu Ruby×AWSで作る動画変換システム&lt;/h2&gt;

&lt;h3 id="発表の概要"&gt;発表の概要&lt;/h3&gt;

&lt;iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/e71eb9aaf4fe4060960f9480cfc01b02" title="Ruby×AWSで作る動画変換システム　東京Ruby会議12" allowfullscreen="true" style="border: 0px; background: padding-box padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 315;" data-ratio="1.7777777777777777"&gt;&lt;/iframe&gt;

&lt;p&gt;発表では、minneにおける動画投稿機能の裏側で動作している動画変換システムについて、以下の3つの観点からお話ししました。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;技術選定：SaaSではなく自前実装を選んだ理由&lt;/li&gt;
  &lt;li&gt;実装方法：RubyとAWSの各サービスを組み合わせたシステム構築&lt;/li&gt;
  &lt;li&gt;開発・運用：ローカル開発環境の整備から本番環境での安定運用まで&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;特に、&lt;a href="https://github.com/streamio/streamio-ffmpeg"&gt;Streamio FFMPEG&lt;/a&gt;と&lt;a href="https://github.com/ruby-shoryuken/shoryuken"&gt;Shoryuken&lt;/a&gt;という2つのgemを中心に、FFmpegを使った動画変換処理とAWS SQSを使った非同期処理の実装について詳しく説明しました。&lt;/p&gt;

&lt;p&gt;&lt;img src="/blog/2025/02/12/tokyorubykaigi-report/images/yumu.png" alt="yumuが登壇している写真" /&gt;&lt;/p&gt;

&lt;h3 id="内容の補足"&gt;内容の補足&lt;/h3&gt;

&lt;p&gt;発表後、いくつか質問をいただきました。ここでは、それらの質問について回答します。&lt;/p&gt;

&lt;h4 id="アプリケーション側から動画の変換が完了したかどうかをどうやって判別しているの"&gt;アプリケーション側から、動画の変換が完了したかどうかをどうやって判別しているの？&lt;/h4&gt;

&lt;p&gt;変換後の動画の判別には、Active Storageの仕組みを活用しています。ActiveStorage::Blobで生成されるユニークなkeyを基にして、以下のような命名規則でファイルを管理しています。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;original/  # オリジナルファイル
  └── {key}
large/  # 変換後ファイル・高画質版
  └── {key}
small/  # 変換後ファイル・軽量版
  └── {key}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;この命名規則により、アプリケーション側では元の動画のkeyから各バージョンの動画パスを容易に特定できます。また、オリジナルのファイルにはタグとしてステータス（ウイルススキャン完了、変換完了など）を付与しており、これをアプリケーション側から参照することで変換状態の確認も可能です。&lt;/p&gt;

&lt;h4 id="別の似たライブラリと比べてshoryukenを選んだ理由は何"&gt;別の似たライブラリと比べて、Shoryukenを選んだ理由は何？&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://github.com/aws/aws-activejob-sqs-ruby"&gt;aws-activejob-sqs-ruby&lt;/a&gt;の開発に関わっている方から、Shoryukenの選定理由について質問をいただきました。&lt;/p&gt;

&lt;p&gt;今回の動画変換システムは本体のRailsアプリケーションから独立した形で構築したかったため、ActiveJobに依存しないShoryukenを選択しました。SidekiqもActiveJobに依存しませんが、発表でも触れた通り、インフラをAWSに統一したかったのでShoryukenを採用しています。&lt;/p&gt;

&lt;p&gt;なお、動画変換システムとは別の機能で、ActiveJobのバックエンドとしてShoryukenを使用しているものもあります。&lt;/p&gt;

&lt;h4 id="hls変換はどうやって実現するの"&gt;HLS変換はどうやって実現するの？&lt;/h4&gt;

&lt;p&gt;HLS（HTTP Live Streaming）への対応は今後の重要な課題の1つとして認識しています。すでにStreamio FFMPEGを利用して動画変換システムを構築していることから、HLSの実装でも引き続きこのgemを活用していく予定です。実際に以下のようなコードでHLS形式への変換が可能です。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="nb"&gt;require&lt;/span&gt; &lt;span class="s1"&gt;'streamio-ffmpeg'&lt;/span&gt;

&lt;span class="n"&gt;movie&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;FFMPEG&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Movie&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;new&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'sample.mp4'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="ss"&gt;video_codec: &lt;/span&gt;&lt;span class="s1"&gt;'libx264'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                                 &lt;span class="c1"&gt;# H.264コーデックを使用&lt;/span&gt;
  &lt;span class="ss"&gt;audio_codec: &lt;/span&gt;&lt;span class="s1"&gt;'aac'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                                     &lt;span class="c1"&gt;# AACコーデックを使用&lt;/span&gt;
  &lt;span class="ss"&gt;custom: &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="s1"&gt;'-bsf:v'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'h264_mp4toannexb'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                         &lt;span class="c1"&gt;# HLSに必要なストリームフォーマット&lt;/span&gt;
    &lt;span class="s1"&gt;'-f'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'segment'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                                      &lt;span class="c1"&gt;# セグメント分割の指定&lt;/span&gt;
    &lt;span class="s1"&gt;'-segment_format'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'mpegts'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                          &lt;span class="c1"&gt;# セグメントフォーマットをMPEG-TSに設定&lt;/span&gt;
    &lt;span class="s1"&gt;'-segment_time'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'5'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;                                 &lt;span class="c1"&gt;# 各セグメントの長さを5秒に設定&lt;/span&gt;
    &lt;span class="s1"&gt;'-segment_list'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="no"&gt;File&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'stream'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'playlist.m3u8'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;# m3u8プレイリストの出力先&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="n"&gt;transcoder_options&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="ss"&gt;validate: &lt;/span&gt;&lt;span class="kp"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="n"&gt;output_path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;File&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'stream'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'a%03d.ts'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;movie&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;transcode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;output_path&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;options&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;transcoder_options&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;ただし、HLS形式への変換は通常の動画変換よりも処理時間が長くなることが予想されます。そのため、処理の進捗状況をより細かく把握・通知できる仕組みの実装や、長時間処理に対応するためのワーカーの設定調整などの工夫が必要そうです。&lt;/p&gt;

&lt;h3 id="後日談shoryuken-gemの復活と今後の展開"&gt;後日談：Shoryuken gemの復活と今後の展開&lt;/h3&gt;

&lt;p&gt;発表時点で、Shoryuken gemはアーカイブされていたのですが、発表時に「Shoryukenアーカイブされちゃったの！？」という声をたくさんいただき、gem作者の方に直接コンタクトを取ってみました。その結果、アーカイブが解除され、現在は開発が再開されています！&lt;/p&gt;

&lt;p&gt;私自身もcontributorとして開発に参加させていただき、テストの改善のためにlocalstackを導入するなど、日々改善を進めています。&lt;/p&gt;

&lt;p&gt;動画変換システムを作ってみて、RubyとAWSを組み合わせると複雑な機能もスムーズに実装できることを実感しました。また、これまでgemを使う側だった自分が、開発する側としても関われるようになったのは大きな成長につながったと感じています。&lt;/p&gt;

&lt;p&gt;これからも、minneの動画機能の改善と、Shoryukenの開発の両面でRubyコミュニティに貢献していけたらと思います。&lt;/p&gt;

&lt;h2 id="buty4649-mrubyでワンバイナリなテキストフィルタツールを使った"&gt;@buty4649 mrubyでワンバイナリなテキストフィルタツールを使った&lt;/h2&gt;

&lt;p&gt;本発表では、mrubyでワンバイナリなCLIツールを作るということをメインテーマに実例と開発手法について紹介しました。
実例においては、私がOSSとして開発しているテキストフィルタツールの&lt;a href="https://github.com/buty4649/rf/"&gt;rfコマンド&lt;/a&gt;を紹介しました。rfコマンドはgrepやsedやawk、jqやyqといったツールと同等の処理を、Rubyで書けてそして少ないタイピング数で実現することを目標に開発しています。もし本発表で気になったらぜひインストールしフィードバックをいただけたら幸いです。&lt;/p&gt;

&lt;p&gt;開発手法の紹介は、rfコマンドの開発で得られた知見をもとにmrubyを使ったCLIツール開発のいろはについて解説しました。具体的には、mrubyを使った開発の始め方や、CLIツールを作るためのノウハウやバイナリのマルチプラットフォーム対応、そしてGitHub Actionsを使ったCI環境の構築手法やVSCodeのおすすめ設定といった内容でした。
本発表を通じて、mrubyへの関心やCLIツール作成の魅力を感じていただけたら幸いです。&lt;/p&gt;

&lt;h2 id="regionalrb-and-the-tokyo-metropolis"&gt;Regional.rb and the Tokyo Metropolis&lt;/h2&gt;

&lt;p&gt;Shibuya.rbを代表して登壇した&lt;a href="https://x.com/kenchan"&gt;@kenchan&lt;/a&gt;です。本セッションは、合計16個のRubyコミュニティの代表が登壇し、それぞれのコミュニティの成り立ちや、印象に残っている出来事などを話し、その後会場からの質問に答えるという流れで進んでいきました。&lt;/p&gt;

&lt;p&gt;各コミュニティからの発表で一番興味深かったのは、Tokyu.rbとAsakusa.rbという2つのコミュニティについてです。日本でSeattle.rbのようなコミュニティを作りたいと立ち上がった2つのコミュニティが、今はまったく別のものになっているということと、その理由としてTokyu.rbはみんなに求めらていることを探していった結果であるという点はとてもおもしろかったです。コミュニティとしてマーケットインを徹底した結果とも言えるのではないでしょうか。&lt;/p&gt;

&lt;p&gt;さて、今回は時間の関係もあって、Shibuya.rb担当として会場からの質問に答えることができなかったので、この場を借りて回答できそうなものに勝手に回答しようと思います。&lt;/p&gt;

&lt;h3 id="q-コミュニティを長く続けるコツは"&gt;Q. コミュニティを長く続けるコツは？&lt;/h3&gt;

&lt;p&gt;自分は「長く続けている」と言えるほど続けられていませんが、Shibuya.rb自体は「代替り」が何度か行なわれているコミュニティです。会場での回答でも「無理をしない」というお話がありましたが、オーガナイザーのエネルギーも無限ではないですし、休みたくなることもあると思います。オーガナイザーは困っていたら困っていると言う、コミュニティが続いて欲しい人はオーガナイザーに突撃する、そういう意識や行動がコミュニティが長く続くことに繋がるのではないかと思います。&lt;/p&gt;

&lt;h3 id="q-コミュニティを立ち上げたいと思っている人は何からするといい"&gt;Q. コミュニティを立ち上げたいと思っている人は何からするといい？&lt;/h3&gt;

&lt;p&gt;運営を一緒にできる仲間を募りましょう。一人ではじめるよりも仲間で始めたほうが、運営そのものも楽める可能性が高いと思います。また、既にあるコミュニティに参加して、オーガナイザーや運営の仲間を作るのもオススメです。&lt;/p&gt;

&lt;h2 id="おわりに"&gt;おわりに&lt;/h2&gt;

&lt;p&gt;発表を聞いてくださった皆さん、東京Ruby会議12の運営の皆さん、本当にありがとうございました。これからも、様々な関わりを通じてRubyコミュニティを盛り上げていきたいと思います。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>BuriKaigiにtesuwo、donokun、ugo、doskoiが登壇します！</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/01/31/burikaigi2025-entry/"/>
    <id>https://tech.pepabo.com/2025/01/31/burikaigi2025-entry/</id>
    <published>2025-01-30T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>ugo</name>
    </author>
    <content type="html">&lt;p&gt;2025年2月1日（土）に開催される&lt;a href="https://burikaigi.dev/"&gt;Burikaigi2025&lt;/a&gt;にGMOペパボからは&lt;a href="https://x.com/tetsuwo0717"&gt;@てつを。&lt;/a&gt;、&lt;a href="https://x.com/furudono2"&gt;@どのくん&lt;/a&gt;、&lt;a href="https://x.com/yukyu30"&gt;@ugo&lt;/a&gt;、&lt;a href="https://twitter.com/doskoi64"&gt;@どすこい&lt;/a&gt;が登壇します！
去年のBurikaigiに、参加したパートナーがとても良かったと言っていたので、プロポーザルを提出しました！
どのメンバーも30分のセッションが初めてなので緊張していますが、精一杯準備するので、ぜひ足を運んでみてください！&lt;/p&gt;

&lt;h3 id="てつを-あなたの配信ワイワイたりていますか配信を盛り上げるaiwaiwai-aiを作った話"&gt;@てつを。 あなたの配信ワイワイたりていますか？？　配信を盛り上げるAI「waiwai-ai」を作った話&lt;/h3&gt;

&lt;p&gt;新規配信者の課題である「コメントの少なさ」に対し、配信の盛り上げ役となるAI「waiwai-ai」を開発しました。本トークでは、waiwai-aiが視聴者のコメントを生成・投稿する仕組みを支える技術スタックについて解説します。具体的には、Pythonライブラリを用いた音声認識と仮想オーディオデバイスによるリアルタイム文字起こしから、その文字をDifyを活用して視聴者のようなコメントを生成するAI、そしてそのコメントを見える形で出力するために工夫した点を紹介します！！&lt;/p&gt;

&lt;h3 id="donokun-cliツール開発をprotocol-buffers-スキーマで駆動する"&gt;@donokun CLIツール開発をProtocol Buffers スキーマで駆動する&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://htdp.org/"&gt;How to Design Programs&lt;/a&gt;を引用して、ぼくが思う上手で楽しいプログラミングとは何かを主張します。&lt;/p&gt;

&lt;p&gt;次にWeb APIの開発にもこの手法は適用できると考え、スキーマ駆動開発でどのようにその考え方を適用できるかを紹介します。そのためにProtocol Buffersを用いる例を説明します。&lt;/p&gt;

&lt;p&gt;さらにCLI開発にもこの方法を広げるために作成したツールを紹介します。&lt;/p&gt;

&lt;h3 id="ugo-3dモデル作成販売を行うwebアプリケーションの裏側"&gt;@ugo 3Dモデル作成、販売を行うWebアプリケーションの裏側&lt;/h3&gt;

&lt;p&gt;SUZURIにて画像から3Dモデルを作成する「&lt;a href="https://lp.suzuri.jp/3d-t-shirt"&gt;3Dグッズ作成機能&lt;/a&gt;」が公開されました。
この機能は画像をアップロードすることで、3Dモデルの生成、販売をシームレスに行うことができる機能です。
本発表では3Dモデルの生成手法と、生成された3Dモデルをデジタルコンテンツとしての出品するための方法を、実例を交えて機能の裏側を解説します！&lt;/p&gt;

&lt;h3 id="どすこい-データサイエンスをするつもりがkpi数値算出がなーんできてないぜ新卒1年目が配属1ヶ月で挑んだサブスクサービスのkpi数値算出タスク"&gt;@どすこい データサイエンスをするつもりが、KPI数値算出がなーんできてないぜ！新卒1年目が配属1ヶ月で挑んだサブスクサービスのKPI数値算出タスク&lt;/h3&gt;

&lt;p&gt;研修が終わって事業部に配属されてから今までで挑んだタスクの中で、最も大変だったタスクの話です！
サブスクサービスのKPI数値は、新規契約数、更新契約数、解約数、有効契約数、などがあります。
これらの算出は、ECサービスの売上高と違い、契約のイベントを追跡して状態を管理する必要があります。
また、契約のイベントと状態の種類は多岐にわたるため、テストケースも多くなりますし、テストケースが十分であることを担保するのも難しいです。
これらに対して、どのように対処したのかをお話しします。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>2つの決裁書承認システムとSlackを連携させて効率化した話</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/01/29/cn-xpoint/"/>
    <id>https://tech.pepabo.com/2025/01/29/cn-xpoint/</id>
    <published>2025-01-28T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>よしだ</name>
    </author>
    <content type="html">&lt;p&gt;こんにちは！
GMO ペパボのグループ会社である GMO クリエイターズネットワークの&lt;a href="https://twitter.com/theyoshida3"&gt;よしだ&lt;/a&gt;です。&lt;/p&gt;

&lt;p&gt;今回は、社内で使われている 2 つの決裁書承認システムと Slack を連携させて効率化した話をします。&lt;/p&gt;

&lt;h1 id="以前の状態"&gt;以前の状態&lt;/h1&gt;

&lt;p&gt;フリーナンスでは、ユーザー様が登録した請求書の審査など、サービス運営業務に利用する管理画面が存在します。
サービス運営業務の中でも、管理画面へのアカウント追加といった上長の承認を必要とするものがあり、管理画面上で承認を行います。&lt;/p&gt;

&lt;p&gt;また、サービス運営以外の決裁は X-point&lt;sup id="fnref:1" role="doc-noteref"&gt;&lt;a href="#fn:1" class="footnote" rel="footnote"&gt;1&lt;/a&gt;&lt;/sup&gt;という承認システムを導入していました。&lt;/p&gt;

&lt;h2 id="問題点"&gt;問題点&lt;/h2&gt;

&lt;p&gt;以前の状態では下記の問題点がありました。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;アカウントの二重管理&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;承認を扱うシステムが 2 つ存在することにより、それぞれのシステムにログインして承認する必要があります。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;承認者の二重管理&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;承認を扱うシステムが 2 つ存在することにより、承認フローもそれぞれ管理する必要があります。
承認者の異動の際には、それぞれのシステムで反映する必要があります。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;承認作業時間&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;また、管理画面では一件ずつの決裁書作成や決裁書承認しかできず、承認件数が増えてくると承認に時間がかかっていました。&lt;/p&gt;

&lt;h1 id="現在の状態"&gt;現在の状態&lt;/h1&gt;

&lt;p&gt;現在の状態をフロー図にまとめました。
&lt;img src="/blog/2025/01/29/cn_xpoint/images/mermaid.png" alt="現在のフロー" /&gt;&lt;/p&gt;

&lt;p&gt;申請者は決裁書を提出する人です。
以後は、フローの流れを説明していきます。&lt;/p&gt;

&lt;h2 id="決裁書作成--決裁書提出"&gt;決裁書作成 ~ 決裁書提出&lt;/h2&gt;

&lt;p&gt;フリーナンス管理画面から、 X-point の API を実行し、承認を取りたい内容の決裁書を下書き書類として作成します。&lt;/p&gt;

&lt;p&gt;下書き書類作成後は、新しいタブで X-point の決裁書編集画面を開き、申請者は内容の確認と提出を行います。&lt;/p&gt;

&lt;h2 id="承認依頼-webhook--承認依頼の送信"&gt;承認依頼 Webhook ~ 承認依頼の送信&lt;/h2&gt;

&lt;p&gt;決裁書提出時に X-point からフリーナンスへ承認依頼が送信されます。フリーナンスは、現在の X-point の承認フローから承認者を判断し、承認者毎の専用 Slack チャンネルに承認依頼を送信します。&lt;/p&gt;

&lt;h2 id="承認操作--承認実施"&gt;承認操作 ~ 承認実施&lt;/h2&gt;

&lt;p&gt;承認依頼で送信された Slack は下記となります。
&lt;img src="/blog/2025/01/29/cn_xpoint/images/slack.png" alt="承認依頼" /&gt;&lt;/p&gt;

&lt;p&gt;「承認」ボタンを押下することで、フリーナンス側の承認操作が実行されます。
承認操作では、承認をした Slack ユーザーから X-point ユーザーを判断し、 X-point の承認 API を実行します。&lt;/p&gt;

&lt;p&gt;「却下」ボタン却下の場合、決議書は却下として、フリーナンスから X-point へ API を実行します。&lt;/p&gt;

&lt;h2 id="承認完了-webhook"&gt;承認完了 Webhook&lt;/h2&gt;

&lt;p&gt;承認操作が実行された際は、Webhook のステータスで承認フローが完了しているか判断できます。
承認フローが完了している場合、後続の処理を実施します。
承認フローがまだ残っている場合には、次の承認者の専用 Slack チャンネルへ承認依頼を送信します。&lt;/p&gt;

&lt;h1 id="改善された点"&gt;改善された点&lt;/h1&gt;

&lt;p&gt;以前の状態で挙げてた問題点は、2 つの決裁書承認システムと Slack を連携することで改善されました。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;アカウントの二重管理&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;決裁書承認は X-point の責務とすることで、承認者は X-point だけ確認すればよくなりました。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;承認者の二重管理&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;承認フローも X-point の責務とすることで、承認者の異動の際には、X-point のみ反映すればよくなりました。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;承認作業時間&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Slack 上での一覧表示から決裁書承認ができ、承認件数が増えた場合にも時間がかかりにくくなりました。&lt;/p&gt;

&lt;h1 id="考慮した点"&gt;考慮した点&lt;/h1&gt;

&lt;p&gt;連携の仲介役をフリーナンスの管理ユーザーに担わせました。&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;X-point API を利用するために、フリーナンスの管理ユーザーと X-point ユーザーの紐づけ(X-point トークン保持)&lt;/li&gt;
  &lt;li&gt;Slack から承認操作をするために、フリーナンスの管理ユーザーと Slack ユーザーの紐づけ(Slack ユーザー ID 保持)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Slack から X-point 上の決裁書を操作する際に、フリーナンスを経由することで「Slack ユーザー ID → フリーナンス管理ユーザー ID → X-point トークン」と X-point へのアクセスが可能になります。&lt;/p&gt;

&lt;h1 id="最後に"&gt;最後に&lt;/h1&gt;

&lt;p&gt;承認フローを X-point の責務にすることで、承認者の変更に強いと述べました。
では、承認フローの階層が増えた場合、どうなるのでしょうか。&lt;/p&gt;

&lt;p&gt;次回は、決裁書承認フローの階層が増えた話をします。&lt;/p&gt;

&lt;h2 id="gmo-クリエイターズネットワークではプロダクト開発職種の採用をおこなっています"&gt;GMO クリエイターズネットワークでは、プロダクト開発職種の採用をおこなっています！&lt;/h2&gt;

&lt;p&gt;フリーナンスでは今、プロダクト開発組織を立ち上げていこうとしている最中です。&lt;/p&gt;

&lt;p&gt;ソフトウェアエンジニアとして面白い部分は、フロントエンド〜バックエンド〜インフラを横断的に触る開発スタイルで開発している点です。
Go のコードを書いたり、Terraform を書いたりしながら開発を進めていることが多いです。&lt;/p&gt;

&lt;p&gt;現在は Go や React を中心としたシステムへのリアーキテクチャを検討しています。
バックエンドアーキテクチャの設計やフレームワークの選定、検証とやれることは非常に多いです。&lt;/p&gt;

&lt;p&gt;そんな技術課題の解消やユーザに価値を提供出来る仕組みづくりを私達と一緒に進めていってくださる方々を募集中です！以下の職種を積極採用しています！&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href="https://open.talentio.com/r/1/c/gmo-cn/pages/78518"&gt;ソフトウェアエンジニア（バックエンド）&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;また、&lt;a href="https://open.talentio.com/r/1/c/gmo-cn/pages/78856"&gt;カジュアル面談&lt;/a&gt;も大歓迎ですのでお気軽に申し込んでいただけると嬉しいです！&lt;/p&gt;
&lt;div class="footnotes" role="doc-endnotes"&gt;
  &lt;ol&gt;
    &lt;li id="fn:1" role="doc-endnote"&gt;
      &lt;p&gt;https://www.atled.jp/xpoint_cloud/ &lt;a href="#fnref:1" class="reversefootnote" role="doc-backlink"&gt;&amp;#8617;&lt;/a&gt;&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
</content>
  </entry>
  <entry>
    <title>視聴者と同様に配信をコメントで盛り上げるwaiwai-aiを作った話</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/01/17/waiwai-ai/"/>
    <id>https://tech.pepabo.com/2025/01/17/waiwai-ai/</id>
    <published>2025-01-16T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>どすこい</name>
    </author>
    <content type="html">&lt;ol id="markdown-toc"&gt;
  &lt;li&gt;&lt;a href="#はじめに" id="markdown-toc-はじめに"&gt;はじめに&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#技術選定" id="markdown-toc-技術選定"&gt;技術選定&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#任意の音声映像から文字起こしをする技術-てつを" id="markdown-toc-任意の音声映像から文字起こしをする技術-てつを"&gt;任意の音声/映像から文字起こしをする技術 @てつを。&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#音声入力部分" id="markdown-toc-音声入力部分"&gt;音声入力部分&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#映像入力部分" id="markdown-toc-映像入力部分"&gt;映像入力部分&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#わいわいをaiで生成する部分-どすこい" id="markdown-toc-わいわいをaiで生成する部分-どすこい"&gt;わいわいをAIで生成する部分 @どすこい&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#生成aiアプリ開発基盤について" id="markdown-toc-生成aiアプリ開発基盤について"&gt;生成AIアプリ開発基盤について&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#入力部分とのインターフェースについて" id="markdown-toc-入力部分とのインターフェースについて"&gt;入力部分とのインターフェースについて&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#コメント生成部分のllmアプリケーションについて" id="markdown-toc-コメント生成部分のllmアプリケーションについて"&gt;コメント生成部分のLLMアプリケーションについて&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#コメント生成部分のハイパーパラメータのチューニングについて" id="markdown-toc-コメント生成部分のハイパーパラメータのチューニングについて"&gt;コメント生成部分のハイパーパラメータのチューニングについて&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#生成した内容の出力部分-はるおつ" id="markdown-toc-生成した内容の出力部分-はるおつ"&gt;生成した内容の出力部分 @はるおつ&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#実装の手順" id="markdown-toc-実装の手順"&gt;実装の手順&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#コンソールへの出力" id="markdown-toc-コンソールへの出力"&gt;コンソールへの出力&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#slackの特定のチャンネルにそのまま出力する" id="markdown-toc-slackの特定のチャンネルにそのまま出力する"&gt;Slackの特定のチャンネルにそのまま出力する&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#slackの特定のメッセージに対してスレッドで出力する" id="markdown-toc-slackの特定のメッセージに対してスレッドで出力する"&gt;Slackの特定のメッセージに対してスレッドで出力する&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#結果" id="markdown-toc-結果"&gt;結果&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#感想" id="markdown-toc-感想"&gt;感想&lt;/a&gt;    &lt;ol&gt;
      &lt;li&gt;&lt;a href="#どすこい" id="markdown-toc-どすこい"&gt;どすこい&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#はるおつ" id="markdown-toc-はるおつ"&gt;はるおつ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#てつを" id="markdown-toc-てつを"&gt;てつを&lt;/a&gt;&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id="はじめに"&gt;はじめに&lt;/h2&gt;

&lt;p&gt;こんにちは。2024年度新卒エンジニアの&lt;a href="https://x.com/hrt_ykym"&gt;はるおつ&lt;/a&gt;、&lt;a href="https://x.com/tetsuwo0717"&gt;てつを&lt;/a&gt;、&lt;a href="https://x.com/doskoi64"&gt;どすこい&lt;/a&gt;です。普段の事業部の開発から離れて、事業部や職種を跨いでチームを組んで、2日間かけてプロダクトを作るイベントである、&lt;a href="https://hr.pepabo.com/report/2023/04/06/8730"&gt;お産合宿&lt;/a&gt;(こちらは2023年のものです)で開発したプロダクトについてブログを書きます！&lt;/p&gt;

&lt;p&gt;今回のテーマは"配信"で、昨今伸びている配信業界にアプローチしたプロダクトを各々開発しました。&lt;/p&gt;

&lt;p&gt;上記テーマのもとで私たちが開発したプロダクトを&lt;strong&gt;waiwai-ai&lt;/strong&gt;と名付けました。視聴者と同様にコメント投稿することで配信を盛り上げるAI botです。新規の配信者は視聴者が少なく、配信が寂しくなってしまうという課題があります。waiwai-aiが配信を盛り上げることで、新規配信者でも配信を楽しめるようにすることが目的です。&lt;/p&gt;

&lt;h2 id="技術選定"&gt;技術選定&lt;/h2&gt;

&lt;p&gt;本アプリケーションは以下のような技術を用いて実現しました。&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;入力部分&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;pyaudio&lt;/li&gt;
  &lt;li&gt;speech_recognition&lt;/li&gt;
  &lt;li&gt;VB-Cable&lt;/li&gt;
  &lt;li&gt;OBS の仮想カメラ機能&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;わいわいをAIで生成する部分&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Dify&lt;/li&gt;
  &lt;li&gt;LLMマルチエージェントモデル&lt;/li&gt;
  &lt;li&gt;ハイパーパラメータのチューニング&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;生成した内容の出力部分&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Slack API&lt;/li&gt;
  &lt;li&gt;正規表現 (Python)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src="/blog/2025/01/17/waiwai-ai/images/waiwai-ai-image.png" alt="waiwai-aiのアーキテクチャ図" /&gt;&lt;/p&gt;

&lt;p&gt;以降ではそれぞれが担当した、各コンポーネントの詳細を説明します。&lt;/p&gt;

&lt;h2 id="任意の音声映像から文字起こしをする技術-てつを"&gt;任意の音声/映像から文字起こしをする技術 @てつを。&lt;/h2&gt;
&lt;p&gt;こんにちは！入力部分を担当した&lt;a href="https://x.com/tetsuwo0717"&gt;てつを&lt;/a&gt;です！！&lt;/p&gt;

&lt;p&gt;はじめに、私が担当した &lt;strong&gt;waiwai-ai&lt;/strong&gt; の「入力部分」の実装について、音声入力と映像キャプチャ機能を中心に解説します。特に、リアルタイムの音声からテキストの生成、そして映像のキャプチャ方法に至るまでのライブラリの選定理由と工夫点について触れていきます。&lt;/p&gt;

&lt;p&gt;配信中は雑音やBGM、効果音などさまざまな音声が混在する環境であり、精度の高い文字起こしを実現するために&lt;strong&gt;pyaudio&lt;/strong&gt;、&lt;strong&gt;speech_recognition&lt;/strong&gt;、そして仮想オーディオデバイスとしての &lt;strong&gt;VB-Cable&lt;/strong&gt; を組み合わせ、マルチデバイス対応とノイズの多い環境でも安定した文字起こしを目指しました。
これによってOBSからの音声をリアルタイムで取得し、音声データを統合的に扱うことができます。また配信者自体は話していなくても、流れている音楽やゲーム音に対してもコメントを返してくれるようになります。
また、今回採用したwaiwai-aiのLLMは動画を入力することができなかったためOBSのモニターを画像としてキャプチャすることでLLMに読み込ませました。画像をLLMに入力することでLLMはより的確なコメントを返してくれます。キャプチャをするためのライブラリには &lt;strong&gt;cv2&lt;/strong&gt; を採用しました。&lt;/p&gt;

&lt;h3 id="音声入力部分"&gt;音声入力部分&lt;/h3&gt;
&lt;p&gt;音声入力部分の目的は、配信者の音声やゲーム音をリアルタイムで取り込み、それをテキスト化することです。以下のツール、ライブラリを用いて実装し、以下の順で処理していきます。&lt;/p&gt;

&lt;h4 id="音声の取得"&gt;音声の取得&lt;/h4&gt;
&lt;p&gt;配信者が使用するマイクやOBSからの音声出力を取得します。これは &lt;a href="https://pypi.org/project/PyAudio/"&gt;pyaudio&lt;/a&gt;  を使用して任意のマイクデバイスを選択し、音声を録音することで実現します。&lt;/p&gt;

&lt;h4 id="obsとの連携"&gt;OBSとの連携&lt;/h4&gt;
&lt;p&gt;OBSの音声出力（配信者の声、ゲーム音、BGM）を仮想オーディオデバイスとしてPythonに取り込むために &lt;a href="https://vb-audio.com/Cable/"&gt;VB-Cable&lt;/a&gt; を使用します。&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;使用ツール: VB-Cable（仮想オーディオケーブル）&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id="音声の文字起こし"&gt;音声の文字起こし&lt;/h4&gt;
&lt;p&gt;取り込んだ音声を &lt;a href="https://pypi.org/project/SpeechRecognition/"&gt;speech_recognition&lt;/a&gt; を使ってリアルタイムで文字起こしします。Google Speech Recognition APIを活用し、日本語に対応しています。
以下はspeech_recognitionを使用した文字起こしのコード例です。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# 音声ファイルを文字起こしする関数
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;transcribe_audio&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;file_path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;recognizer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;sr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Recognizer&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;sr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;AudioFile&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;file_path&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;source&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;audio&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;recognizer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;record&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;source&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;recognizer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;recognize_google&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;audio&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;language&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"ja-JP"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;
    &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="n"&gt;sr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;UnknownValueError&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="n"&gt;AudioError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Google Speech Recognition could not understand audio"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="n"&gt;sr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;RequestError&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="n"&gt;AudioError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Could not request results from Google Speech Recognition service"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;音声入力部分の処理は「音声/映像の取得 → 文字起こし → わいわいをAIで生成する部分へ渡す」のループを30秒単位で繰り返しています。&lt;/p&gt;

&lt;h3 id="映像入力部分"&gt;映像入力部分&lt;/h3&gt;
&lt;p&gt;映像入力部分の目的は、配信映像をキャプチャしてフレーム単位で保存することです。これにより実況中の特定のシーンを自動的に記録できます。&lt;/p&gt;

&lt;h4 id="obsとの連携-1"&gt;OBSとの連携&lt;/h4&gt;
&lt;p&gt;OBSの映像を仮想カメラ機能を使ってPythonに入力します。この仮想カメラ機能により、配信者が意図した画面レイアウトをそのまま処理可能です。&lt;/p&gt;

&lt;h4 id="フレームのキャプチャと保存"&gt;フレームのキャプチャと保存&lt;/h4&gt;
&lt;p&gt;&lt;a href="https://pypi.org/project/opencv-python/"&gt;cv2&lt;/a&gt;  を使用してフレームをキャプチャし、任意のタイミングで画像として保存します。30秒間隔でのキャプチャを設定しています。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;cv2&lt;/span&gt;

&lt;span class="n"&gt;cap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;cv2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;VideoCapture&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# フレームをキャプチャ
&lt;/span&gt;&lt;span class="n"&gt;ret&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;frame&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;cap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;read&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;ret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="c1"&gt;# スクリーンショットを保存
&lt;/span&gt;    &lt;span class="n"&gt;cv2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;imwrite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'screenshot.png'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;frame&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;else&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="k"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"フレームの取得に失敗しました"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;cap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;release&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id="わいわいをaiで生成する部分-どすこい"&gt;わいわいをAIで生成する部分 @どすこい&lt;/h2&gt;
&lt;p&gt;こんにちは！AIが好き好き人間の&lt;a href="https://x.com/doskoi64"&gt;どすこい&lt;/a&gt;です！私はわいわいを生成する部分を担当しました。ここでいう”わいわい”とは、配信を盛り上げるコメントのことです。わいわい生成部は、入力部分で受け取った配信の情報を、LLM(大規模言語モデル)アプリケーションの入力として用いて”わいわい”を生成させ、出力部に渡すことが責務となっています。&lt;/p&gt;

&lt;p&gt;ここでは、そのLLMアプリケーションの構成について説明します。&lt;/p&gt;

&lt;h3 id="生成aiアプリ開発基盤について"&gt;生成AIアプリ開発基盤について&lt;/h3&gt;
&lt;p&gt;配信を盛り上げる”わいわい”を生み出すために、LLMを用いることにしました。そこで、当時少しずつ盛り上がり始めていたDifyを用いてLLMアプリを開発することにしました。&lt;a href="https://dify.ai/jp"&gt;Dify&lt;/a&gt;はオープンソースのLLMアプリ開発プラットフォームで、LLMの設定や処理、ハイパーパラメータ設定をGUI上で簡単に操作することができます。&lt;/p&gt;

&lt;p&gt;今回の話とは別に、DifyとSlackbotの連携についてはこのブログでまとめて書いたので、ぜひみてください。
https://zenn.dev/ctk64/articles/f7e6cf44bf4be7&lt;/p&gt;

&lt;h3 id="入力部分とのインターフェースについて"&gt;入力部分とのインターフェースについて&lt;/h3&gt;

&lt;p&gt;入力部分から受け取るデータは、&lt;strong&gt;配信者の発言内容を抽出したテキストデータ&lt;/strong&gt;を、用いることにしました。具体的には、配信者の発言やそれに関連する情報をテキスト形式で受け取ることを想定しています。この仕様を早い段階で定義したことで、わいわい生成部ではダミーデータを用いた開発が可能となり、チームメンバーが独立かつ並列して作業を進められる体制が構築できました。&lt;/p&gt;

&lt;p&gt;また、このテキストデータはノイズ処理などをせずにそのまま用いることにしました。この判断の理由として、以下の点が挙げられます：&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;入力部分で取得されるテキストデータの精度が実証済みで十分高いこと。&lt;/li&gt;
  &lt;li&gt;使用するLLMアプリケーションが、ある程度のノイズを処理できる性能を有していること。&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;このため、入力部分から受け取ったテキストデータをそのままLLMに渡して処理する設計としました。&lt;/p&gt;

&lt;p&gt;なお、将来的に以下の状況が生じた場合には、入力部分とわいわい生成部分の間にデータの前処理を行う仕組みが必要になると考えられます：&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;入力部分から送られるデータにノイズが多く含まれる場合。&lt;/li&gt;
  &lt;li&gt;使用するLLMアプリケーションがノイズに対して脆弱な場合。&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;出力部分とのインターフェースに関しては、別途「出力部分の仕様」で詳述します。&lt;/p&gt;

&lt;h3 id="コメント生成部分のllmアプリケーションについて"&gt;コメント生成部分のLLMアプリケーションについて&lt;/h3&gt;

&lt;p&gt;LLMのユーモアに関する研究はいくつかあり、その中で手軽で効果の高そうな手法を応用することにしました。それは、異なる人格のLLMをいくつか用意して、ランダムなLLMにユーモアを生成させるものです。&lt;/p&gt;

&lt;p&gt;今回の開発では、3種類の異なるキャラクターを持つLLMを用意しました。それぞれ、
①視聴者を積極的に褒めてくれるLLM
②状況を整理して褒めるLLM
③自分のことを面白いと思っている少し自信過剰なLLM
という特徴を持たせています。&lt;/p&gt;

&lt;p&gt;また、複数のLLMモデルを用いたマルチエージェントモデルを用いることで、単一のLLMを使うよりも人間に近いコメントを出せるように工夫しました。&lt;/p&gt;

&lt;h3 id="コメント生成部分のハイパーパラメータのチューニングについて"&gt;コメント生成部分のハイパーパラメータのチューニングについて&lt;/h3&gt;

&lt;p&gt;さらに、LLMのハイパーパラメータを調整して、発言にランダムさを加え、配信ごとに異なるリアクションを楽しめるようにしました。これにより、視聴者が配信に参加するたびに新しい体験ができるようになっています。
LLMのハイパーパラメータは以下のような値です。詳しくは&lt;a href="https://platform.openai.com/docs/api-reference/completions/create"&gt;OpenAIのドキュメント&lt;/a&gt;も参考にみてください！&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;Temperature&lt;br /&gt;
応答のランダム性やクリエイティビティを制御する。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Top P&lt;br /&gt;
上位P％の確率のトークンを選択する。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Presence Penalty&lt;br /&gt;
応答内で既に使用されたトークンの再利用を抑制する。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Frequency Penalty&lt;br /&gt;
応答内で同じトークンが繰り返される頻度を抑える。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Max Tokens&lt;br /&gt;
応答に含められるトークン（単語や記号など）の最大数を指定する。&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Seed&lt;br /&gt;
ランダム性の再現性を確保するためのシード値。実験のために主に利用する。&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Difyでは、LLMのプロンプティングやハイパーパラメータを変えて試行錯誤する実験が非常にやりやすかったです。ChatGPTのAPIを用いた場合と比較すると、Difyでは下記の画像のように、プロンプトやハイパーパラメータのチューニングの検証が非常にやりやすく、短時間で多くの検証を行うことができました。&lt;/p&gt;

&lt;p&gt;&lt;img src="/blog/2025/01/17/waiwai-ai/images/dify-tuning.png" alt="Difyのチューニング" /&gt;&lt;/p&gt;

&lt;h2 id="生成した内容の出力部分-はるおつ"&gt;生成した内容の出力部分 @はるおつ&lt;/h2&gt;
&lt;p&gt;こんにちは。waiwai-aiの生成した内容の出力部分を担当したはるおつです。&lt;/p&gt;

&lt;p&gt;今回は、AIコメントで配信を盛り上げる「waiwai-ai」の開発において、出力部分をどのように実装し、Slack APIとの繋ぎ込み、そして今後の拡張についてどのように取り組んだかをご紹介します。&lt;/p&gt;

&lt;h3 id="実装の手順"&gt;実装の手順&lt;/h3&gt;
&lt;p&gt;waiwai-aiの生成した内容の出力部分を実装するにあたり、以下の3つのステップに分けて開発を行いました。&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;基本的な動作確認とデバッグを容易に行える環境を整えるため、コンソールへの出力を実装する。&lt;/li&gt;
  &lt;li&gt;Slack APIの仕様を把握し、実際のユーザー環境での動作を確認するために、特定のチャンネルに出力する。&lt;/li&gt;
  &lt;li&gt;ユーザーとの自然なインタラクションを実現するため、スレッドのリンクを指定して返信できる機能を実装する。&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;このように、段階的にタスクを分解することで、開発の進捗を管理しつつ、それぞれのステップで直面する課題を明確にしながら作業を進めました。&lt;/p&gt;

&lt;p&gt;それでは、実際の開発について述べていきたいと思います。&lt;/p&gt;

&lt;h3 id="コンソールへの出力"&gt;コンソールへの出力&lt;/h3&gt;

&lt;p&gt;まず最初に、waiwai-aiの基本となる&lt;strong&gt;コンソールへの出力&lt;/strong&gt;と、&lt;strong&gt;AIから出力されたコメントの受け渡し形式&lt;/strong&gt;を検討しました。特に、チーム開発における連携のしやすさと、将来の拡張性を考慮した設計を心がけました。&lt;/p&gt;

&lt;h4 id="実装内容"&gt;実装内容&lt;/h4&gt;

&lt;p&gt;以下のようなシンプルなクラスを作成し、&lt;code&gt;answers&lt;/code&gt; リストに含まれるコメントをコンソールに出力するメソッドを実装しました。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Outputs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;__init__&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;answers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;answers&lt;/span&gt;

    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;outputConsole&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;answer&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;answer&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id="データ形式の設計と選択"&gt;データ形式の設計と選択&lt;/h4&gt;
&lt;p&gt;コメントの受け渡しには様々な方法がありますが、わいわいをAIで生成するチームと密に連携し、以下のような配列（リスト）形式での渡し方を採用しました。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;answers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="s"&gt;"ピザと寿司と肉が好きなところ、もう最高ですね！ #食べ物仲間"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;"自己紹介してくれて嬉しいです！音声合成技術、すごく興味深いですね😊"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="s"&gt;"草"&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;この配列を用いて、各コメントを順にコンソールへ出力するようにしました。この形式を選んだ理由は主に以下の3点です。&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;複数行コメントや順序付きの発言を扱いやすい&lt;/li&gt;
  &lt;li&gt;チーム間でのデータ受け渡しがシンプル&lt;/li&gt;
  &lt;li&gt;SlackやYouTubeなど、異なる出力先への拡張が容易&lt;/li&gt;
&lt;/ol&gt;

&lt;h3 id="slackの特定のチャンネルにそのまま出力する"&gt;Slackの特定のチャンネルにそのまま出力する&lt;/h3&gt;

&lt;p&gt;次に、&lt;strong&gt;Slackの特定のチャンネルに直接出力する機能&lt;/strong&gt;を実装しました。これは、実際のユーザー環境でコメントがどのように表示されるかを確認するための重要なプロセスです。&lt;/p&gt;

&lt;h4 id="実装内容-1"&gt;実装内容&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;Outputs&lt;/code&gt; クラスに &lt;code&gt;outputSlack&lt;/code&gt; メソッドを追加し、Slack APIを利用して指定したチャンネルにメッセージを投稿できるようにしました。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;outputSlack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;os&lt;/span&gt;
    &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;requests&lt;/span&gt;
    &lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;dotenv&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;load_dotenv&lt;/span&gt;

    &lt;span class="n"&gt;load_dotenv&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="n"&gt;TOKEN&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;getenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"SLACK_OAUTH_TOKEN_FOR_TEST"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;CHANNEL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;'HOGEHOGE'&lt;/span&gt;  &lt;span class="c1"&gt;# チャンネルIDを指定
&lt;/span&gt;
    &lt;span class="n"&gt;headers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="s"&gt;"Authorization"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="s"&gt;"Bearer &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;TOKEN&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;answer&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"https://slack.com/api/chat.postMessage"&lt;/span&gt;
        &lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="s"&gt;'channel'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;CHANNEL&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="s"&gt;'text'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;answer&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;headers&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"chat.postMessage response:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id="slack-apiの設定"&gt;Slack APIの設定&lt;/h4&gt;

&lt;p&gt;Slack APIを利用するために、以下のOAuthスコープを設定しました。(2024/5/30時点の設定)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bot Token Scopes:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;channels&lt;/strong&gt;
    &lt;ul&gt;
      &lt;li&gt;@waiwai-aiが追加されたパブリックチャンネル内のメッセージやその他のコンテンツを閲覧するための権限です。スレッドの存在確認やメッセージの取得のために設定しました。&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;chat&lt;/strong&gt;
    &lt;ul&gt;
      &lt;li&gt;@waiwai-aiとしてチャンネルにメッセージを送信するための権限です。&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;chat.customize&lt;/strong&gt;
    &lt;ul&gt;
      &lt;li&gt;@waiwai-aiとして、カスタマイズされたユーザー名やアバターでメッセージを送信するための権限です。waiwai-aiの見た目を変えることを想定して、設定しました。&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;User Token Scopes:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;chat&lt;/strong&gt;
    &lt;ul&gt;
      &lt;li&gt;ユーザーに代わってメッセージを送信するための権限です。現在はbotとして表示されますが、今後ユーザーの代わりになってユーザー権限でメッセージを送信する際に使用します。&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id="実際にslackに出力した様子"&gt;実際にSlackに出力した様子&lt;/h4&gt;
&lt;p&gt;実際にSlackに出力した様子は以下の通りです。配列で区切ったテスト用に作成したコメントが、そのままSlackに出力されていることがわかります。
&lt;img src="/blog/2025/01/17/waiwai-ai/images/output1.png" alt="実際にSlackに出力した様子" /&gt;&lt;/p&gt;

&lt;h3 id="slackの特定のメッセージに対してスレッドで出力する"&gt;Slackの特定のメッセージに対してスレッドで出力する&lt;/h3&gt;

&lt;p&gt;Slackのスレッドをリンクで指定できるように機能を拡張しました。&lt;/p&gt;

&lt;p&gt;これにより、ユーザーはスレッドのURLを直接指定するだけで、そのスレッドに対してAIコメントを投稿できるようになりました。&lt;/p&gt;

&lt;h4 id="実装の背景と工夫点"&gt;実装の背景と工夫点&lt;/h4&gt;

&lt;p&gt;これまでの実装では、SlackのチャンネルIDとメッセージのタイムスタンプ（&lt;code&gt;thread_ts&lt;/code&gt;）を個別に指定する必要がありました。しかし、ユーザーがこれらの情報を手動で取得して指定するのは手間がかかり、UXの観点から改善の余地がありました。&lt;/p&gt;

&lt;p&gt;そこで着目したのが、SlackのスレッドURLに含まれる情報です。実は、SlackのスレッドURLの末尾には、そのスレッドのタイムスタンプが含まれており、この点を活用することでユーザーの利便性を向上させることができました。&lt;/p&gt;

&lt;h4 id="urlから情報を抽出する方法"&gt;URLから情報を抽出する方法&lt;/h4&gt;

&lt;p&gt;SlackのスレッドURLは以下のような形式になっています。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://&amp;lt;workspace&amp;gt;.slack.com/archives/&amp;lt;channel_id&amp;gt;/p&amp;lt;timestamp&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;ここで、&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code&gt;&amp;lt;workspace&amp;gt;&lt;/code&gt; はワークスペースの名前&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;&amp;lt;channel_id&amp;gt;&lt;/code&gt; はチャンネルのID&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;&amp;lt;timestamp&amp;gt;&lt;/code&gt; はスレッドのタイムスタンプ（小数点が省略された形式）&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;例:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;タイムスタンプが &lt;code&gt;1622547803.000200&lt;/code&gt; の場合、URLの末尾は &lt;code&gt;p1622547803000200&lt;/code&gt; となります。&lt;/p&gt;

&lt;p&gt;このURLから以下の情報を抽出します。&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;&lt;strong&gt;チャンネルID&lt;/strong&gt;: &lt;code&gt;&amp;lt;channel_id&amp;gt;&lt;/code&gt;&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;タイムスタンプ&lt;/strong&gt;: &lt;code&gt;&amp;lt;timestamp&amp;gt;&lt;/code&gt; を小数点を挿入して元の形式に戻す&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id="実装内容-2"&gt;実装内容&lt;/h4&gt;

&lt;h4 id="正規表現による情報抽出"&gt;正規表現による情報抽出&lt;/h4&gt;

&lt;p&gt;URLからチャンネルIDとタイムスタンプを抽出するために、正規表現を使用しました。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;extract_slack_info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;re&lt;/span&gt;
    &lt;span class="c1"&gt;# 正規表現パターンを定義
&lt;/span&gt;    &lt;span class="n"&gt;pattern&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;r&lt;/span&gt;&lt;span class="s"&gt;'https://[^/]+/archives/([A-Z0-9]+)/p(\d{16})'&lt;/span&gt;
    &lt;span class="n"&gt;match&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;re&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;pattern&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nb"&gt;ValueError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"URLの形式が正しくありません。"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;channel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;group&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;raw_ts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;group&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# タイムスタンプの形式を修正（小数点を挿入）
&lt;/span&gt;    &lt;span class="n"&gt;thread_ts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;raw_ts&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="si"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;.&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;raw_ts&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="si"&gt;:&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;thread_ts&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;工夫点:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;正規表現パターンの設計&lt;/strong&gt;: ワークスペース名やドメイン部分を一般化し、どのSlackワークスペースでも対応できるようにしました。&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;タイムスタンプの復元&lt;/strong&gt;: URL中のタイムスタンプは小数点が除かれているため、適切な位置に小数点を挿入して元の形式に戻す必要があります。
    &lt;ul&gt;
      &lt;li&gt;具体的には、16桁の数字のうち、最初の10桁が秒、残りの6桁がマイクロ秒を表しているため、&lt;code&gt;raw_ts[:10] + '.' + raw_ts[10:]&lt;/code&gt; の形で復元します。&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id="outputslack-メソッドの修正"&gt;&lt;code&gt;outputSlack&lt;/code&gt; メソッドの修正&lt;/h4&gt;

&lt;p&gt;抽出したチャンネルIDとタイムスタンプを用いて、指定したスレッドにメッセージを投稿します。&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;outputSlack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;thread_ts&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;extract_slack_info&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;TOKEN&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;getenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"SLACK_OAUTH_TOKEN"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;headers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="s"&gt;"Authorization"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="s"&gt;"Bearer &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;TOKEN&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;answer&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="bp"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="s"&gt;"channel"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="s"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;answer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="s"&gt;"thread_ts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;thread_ts&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;requests&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"https://slack.com/api/chat.postMessage"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;headers&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Response:"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h4 id="使用例"&gt;使用例&lt;/h4&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;answers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s"&gt;"素晴らしいアイデアですね！"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"その点については賛成です！"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;h&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Outputs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;answers&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;outputSlack&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'https://yourworkspace.slack.com/archives/C01ABCDEF/p1622547803000200'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;このように、スレッドのURLを引数として渡すだけで、該当するスレッドに対してメッセージを投稿できるようになりました。&lt;/p&gt;

&lt;h4 id="まとめ"&gt;まとめ&lt;/h4&gt;

&lt;p&gt;以上が、waiwai-aiが生成した内容の出力部分を実装する際の各ステップとその背景、具体的な実装内容になります。段階的に機能を拡張することで、開発効率を高めつつ、ユーザー体験の向上を図ることができました。&lt;/p&gt;

&lt;h2 id="結果"&gt;結果&lt;/h2&gt;
&lt;p&gt;waiwai-aiを導入した結果、Slackのやり取りは大いに盛り上がりを見せました！画像にあるように、AIが生成したコメントが、視聴者のリアクションを引き出し、自然な会話の流れを作り出しています。例えば「なるほどw」や「AIっぽいwww」といったリアクションが飛び交い、AIがまるで本当の参加者のように受け入れられている様子が伺えます。&lt;/p&gt;

&lt;p&gt;「人間もコメントしないとって気持ちになってくるな」という声が示すように、AIが視聴者のコミュニケーションを自然に促し、会話に活気を与えていることが大きな成果です。結果的に、わいわいAIは新規配信者でも視聴者とのやり取りが弾む楽しい配信空間を作り出すことができました。&lt;/p&gt;

&lt;p&gt;&lt;img src="/blog/2025/01/17/waiwai-ai/images/output2.png" alt="Slackのやり取りがwaiwai-aiのおかげで大いに盛り上がっている図" /&gt;&lt;/p&gt;

&lt;h2 id="感想"&gt;感想&lt;/h2&gt;
&lt;h3 id="どすこい"&gt;どすこい&lt;/h3&gt;
&lt;p&gt;自分たちがおもしろいと思えるプロダクトを開発できたこと、チームでわいわいかつ本気で開発できたこと、先輩エンジニアのすごさを目の当たりに体験できたことがとても勉強になりました！来年がすでに楽しみです！&lt;/p&gt;

&lt;h3 id="はるおつ"&gt;はるおつ&lt;/h3&gt;
&lt;p&gt;それぞれが、それぞれの得意を活かして開発できたことがとても良い体験でした。チーム開発ならではの速度感や意見のぶつけ合いを研修の一環で経験できたことは大きな糧となりました。現時点で来年は何をつくろうかな。こんなのが面白いかな。のようなことを考えていて、次のお産合宿がとても楽しみです。&lt;/p&gt;

&lt;h3 id="てつを"&gt;てつを&lt;/h3&gt;
&lt;p&gt;誰かと一緒にゲームがしたい、コメントを盛り上げてほしい。普段ゲームをしながら考えていたことを形にしました。やっぱりチーム開発、かつ0からプロダクトを作るのは本当に楽しいなと改めて感じ、各々の強みを活かして最高のものができました。業務でも、お産合宿のような熱量とこの楽しさを常に持って取り組みたいなと思いました！&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>東京Ruby会議12にbuty4649、yumu、kenchanが登壇します！</title>
    <link rel="alternate" href="https://tech.pepabo.com/2025/01/16/tokyorubykaigi-entry/"/>
    <id>https://tech.pepabo.com/2025/01/16/tokyorubykaigi-entry/</id>
    <published>2025-01-15T15:00:00+00:00</published>
    <updated>2025-02-14T00:04:44+00:00</updated>
    <author>
      <name>yumu</name>
    </author>
    <content type="html">&lt;p&gt;2025年1月18日（土）に開催される&lt;a href="https://regional.rubykaigi.org/tokyo12/"&gt;東京Ruby会議12&lt;/a&gt;にGMOペパボからは&lt;a href="https://x.com/buty4649"&gt;@buty4649&lt;/a&gt;、&lt;a href="https://x.com/myumura3"&gt;@yumu&lt;/a&gt;、&lt;a href="https://x.com/kenchan"&gt;@kenchan&lt;/a&gt;が登壇します！&lt;/p&gt;

&lt;h3 id="buty4649-mrubyでワンバイナリーなテキストフィルタツールを作った"&gt;@buty4649 mrubyでワンバイナリーなテキストフィルタツールを作った&lt;/h3&gt;

&lt;p&gt;mrubyを用いたワンバイナリーアプリケーションの実装手法に焦点を当て、テキスト処理ツールの開発を例に、シンプルなアプリケーションの作成方法について解説します。一般的なRubyアプリケーションはスクリプト言語としての性質からRubyの実行環境が必要ですが、mrubyを活用することで単体で実行できるバイナリ形式のツールを実現できます。&lt;/p&gt;

&lt;p&gt;今回の発表では、実際に私がOSSとして公開しているテキストフィルタツールを題材に、mrubyによるビルドプロセス、ワンバイナリー化における設計上の工夫や実装手法、クロスプラットフォーム対応や配布手順の最適化について紹介します。&lt;/p&gt;

&lt;h3 id="yumu-rubyawsで作る動画変換システム"&gt;@yumu Ruby×AWSで作る動画変換システム&lt;/h3&gt;

&lt;p&gt;動画変換システムというと、既存のSaaSを使うか、低レイヤーな実装に踏み込むかの二択と思われがちです。しかし、RubyのエコシステムとAWSの各種サービスを活用することで、より手軽に独自の動画変換システムを構築できます。&lt;/p&gt;

&lt;p&gt;今回のセッションでは、ハンドメイドECサービス「minne」における動画変換システムの実装方法をご紹介します。&lt;/p&gt;

&lt;p&gt;動画変換の核となるFFmpegをRubyから扱う方法、変換処理を担うShoryuken workerの実装、そして実運用に耐えうる設計の作り方まで、具体的なコードを交えながら解説します。開発環境はDockerで簡単に構築でき、ローカルでの開発から本番展開まで、スムーズに進められる構成をお見せします。&lt;/p&gt;

&lt;h3 id="kenchan-regionalrb-and-the-tokyo-metropolis"&gt;@kenchan Regional.rb and the Tokyo Metropolis&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://shibuyarb.connpass.com/"&gt;Shibuya.rb&lt;/a&gt;を代表して、「Regional.rb and the Tokyo Metropolis」のセッションに登壇します。東京における地域Rubyコミュニティの活動と展望についてお話しします。&lt;/p&gt;
</content>
  </entry>
</feed>