<p>こんにちは。田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。</p>
<p>私の所属するクラッソーネ プロダクト開発部では <strong>週に1回のLT会（ライトニングトーク会）</strong> を1年半ほど実施しています。<br />
どんな会なのか、ご紹介します。</p>
<h2 id="lt%E4%BC%9A%E3%81%A8%E3%81%AF"><a class="header-anchor-link" href="#lt%E4%BC%9A%E3%81%A8%E3%81%AF" aria-hidden="true"></a> LT会とは</h2>
<p>"LT" は "Lightning Talk" の略で、短いプレゼンテーションのことです。<br />
週に1回、挙手制で発表したい人が自由に発表しています。発表時間は5分です。</p>
<p>LT会の主な目的は、<strong>チーム内のナレッジ共有</strong>です。<br />
日々の業務中に発見したこと、頑張ったことなどを発表することで部全体に共有しています。</p>
<p>また、ときには自分の趣味について発表したり、トレンドの技術についての発表もあり、<strong>部内のコミュニケーション促進</strong>にも寄与しています。</p>
<p>LT会での発表を受けて新しいツールの導入が決まるなど、実際の業務に直接役立ったケースもあります。</p>
<h2 id="%E7%99%BA%E8%A1%A8%E5%86%85%E5%AE%B9%E7%B4%B9%E4%BB%8B"><a class="header-anchor-link" href="#%E7%99%BA%E8%A1%A8%E5%86%85%E5%AE%B9%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 発表内容紹介</h2>
<p>それでは、実際にどんな発表があったか、これまでの発表の中からピックアップしてご紹介します。</p>
<h3 id="%E3%80%8Cgithub-actions%E3%81%A7er%E5%9B%B3%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%80%81pr%E3%81%AB%E5%90%AB%E3%82%81%E3%82%8B%E3%80%8D%EF%BC%88%E5%AE%AE%E5%8E%9F%E3%81%95%E3%82%93%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8Cgithub-actions%E3%81%A7er%E5%9B%B3%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%80%81pr%E3%81%AB%E5%90%AB%E3%82%81%E3%82%8B%E3%80%8D%EF%BC%88%E5%AE%AE%E5%8E%9F%E3%81%95%E3%82%93%EF%BC%89" aria-hidden="true"></a> 「GitHub ActionsでER図を更新し、PRに含める」（宮原さん）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-1.png" alt="LT会1" /></p>
<p>Railsのdb/migrate配下に変更があるときにER図を自動作成する方法について。実際にこの仕組みが活躍してくれています。</p>
<h3 id="%E3%80%8Cka%E6%B3%95%E3%81%AE%E5%AE%9F%E8%B7%B5%E3%80%8D%EF%BC%88%E5%B1%B1%E4%B9%8B%E5%86%85%E3%81%95%E3%82%93%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8Cka%E6%B3%95%E3%81%AE%E5%AE%9F%E8%B7%B5%E3%80%8D%EF%BC%88%E5%B1%B1%E4%B9%8B%E5%86%85%E3%81%95%E3%82%93%EF%BC%89" aria-hidden="true"></a> 「KA法の実践」（山之内さん）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-3.png" alt="LT会3" /></p>
<p>ユーザー調査での定性情報から本質的なニーズを分析するKA法について。プロダクト改善に役立ちました。</p>
<h3 id="%E3%80%8C%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%93%E3%81%9Dmake%E3%82%92%E4%BD%BF%E3%81%86%E3%81%B9%E3%81%8D%E3%80%8D%EF%BC%88%E7%94%B0%E5%8E%9F%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8C%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%93%E3%81%9Dmake%E3%82%92%E4%BD%BF%E3%81%86%E3%81%B9%E3%81%8D%E3%80%8D%EF%BC%88%E7%94%B0%E5%8E%9F%EF%BC%89" aria-hidden="true"></a> 「エンジニアこそMakeを使うべき」（田原）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-2.png" alt="LT会2" /></p>
<p>エンジニアは自分でコードを書きたくなりますが、iPaaSを使うのも便利だよという紹介。発表後、Makeを使った自動化が増えました。</p>
<h3 id="%E3%80%8Cit%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E6%AD%A3%E3%81%97%E3%81%84%E6%89%8B%E6%96%A7%E3%81%AE%E6%8A%95%E3%81%92%E3%81%8B%E3%81%9F%E3%80%8D%EF%BC%88%E3%83%9E%E3%83%84%E3%83%A2%E3%83%88%E3%81%95%E3%82%93%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8Cit%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E6%AD%A3%E3%81%97%E3%81%84%E6%89%8B%E6%96%A7%E3%81%AE%E6%8A%95%E3%81%92%E3%81%8B%E3%81%9F%E3%80%8D%EF%BC%88%E3%83%9E%E3%83%84%E3%83%A2%E3%83%88%E3%81%95%E3%82%93%EF%BC%89" aria-hidden="true"></a> 「ITエンジニアのための正しい手斧の投げかた」（マツモトさん）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-4.png" alt="LT会4" /></p>
<p>エンジニア界隈では「まさかりを投げる」という言葉を使いますが、慣用表現ではなくリアルな斧の投げ方についてのレクチャーをしてくれました。社内の斧投げ経験者がじわじわ増えています。</p>
<h3 id="%E3%80%8C%E4%BD%8E%E3%82%AB%E3%83%AD%E3%83%AA%E3%83%BC%E9%A3%B2%E6%96%99%E3%81%AE%E4%B8%96%E7%95%8C%E3%80%8D%EF%BC%88%E6%B0%B8%E5%85%83%E3%81%95%E3%82%93%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8C%E4%BD%8E%E3%82%AB%E3%83%AD%E3%83%AA%E3%83%BC%E9%A3%B2%E6%96%99%E3%81%AE%E4%B8%96%E7%95%8C%E3%80%8D%EF%BC%88%E6%B0%B8%E5%85%83%E3%81%95%E3%82%93%EF%BC%89" aria-hidden="true"></a> 「低カロリー飲料の世界」（永元さん）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-5.png" alt="LT会5" /></p>
<p>市販の低カロリー飲料は種類が少なくて飽きてしまう。だから自分で作ってしまおう！というお話。普段の飲み物の話題で盛り上がりました。</p>
<h3 id="%E3%80%8C%E3%83%9B%E3%83%AC%E3%82%B9%E3%83%AF%E3%83%93%E3%82%A8%E3%83%84%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%8D%EF%BC%88%E6%9C%8D%E9%83%A8%E3%81%95%E3%82%93%EF%BC%89"><a class="header-anchor-link" href="#%E3%80%8C%E3%83%9B%E3%83%AC%E3%82%B9%E3%83%AF%E3%83%93%E3%82%A8%E3%83%84%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%8D%EF%BC%88%E6%9C%8D%E9%83%A8%E3%81%95%E3%82%93%EF%BC%89" aria-hidden="true"></a> 「ホレスワビエツに行ってきました」（服部さん）</h3>
<p><img src="/images/posts/lightning-talk/lightning-talk-6.png" alt="LT会6" /></p>
<p>ポーランド陶器を求めてポーランドの工房に見学に行ってきたお話。実際に手に入れた陶器もとても綺麗でした。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>クラッソーネに少しでも興味を持っていただけたら、気軽にご連絡ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f852cc343f15" src="https://embed.zenn.studio/card#zenn-embedded__f852cc343f15" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。田原（@shogocat）です。

私の所属するクラッソーネ プロダクト開発部では 週に1回のLT会（ライトニングトーク会） を1年半ほど実施しています。
どんな会なのか、ご紹介します。

LT会とは

"LT" は "Lightning Talk" の略で、短いプレゼンテーションのことです。
週に1回、挙手制で発表したい人が自由に発表しています。発表時間は5分です。

LT会の主な目的は、チーム内のナレッジ共有です。
日々の業務中に発見したこと、頑張ったことなどを発表することで部全体に共有しています。

また、ときには自分の趣味について発表したり、トレンドの技術についての発表もあり、部内のコミュニケーション促進にも寄与しています。

LT会での発表を受けて新しいツールの導入が決まるなど、実際の業務に直接役立ったケースもあります。

発表内容紹介

それでは、実際にどんな発表があったか、これまでの発表の中からピックアップしてご紹介します。

「GitHub ActionsでER図を更新し、PRに含める」（宮原さん）

LT会1

Railsのdb/migrate配下に変更があるときにER図を自動作成する方法について。実際にこの仕組みが活躍してくれています。

「KA法の実践」（山之内さん）

LT会3

ユーザー調査での定性情報から本質的なニーズを分析するKA法について。プロダクト改善に役立ちました。

「エンジニアこそMakeを使うべき」（田原）

LT会2

エンジニアは自分でコードを書きたくなりますが、iPaaSを使うのも便利だよという紹介。発表後、Makeを使った自動化が増えました。

「ITエンジニアのための正しい手斧の投げかた」（マツモトさん）

LT会4

エンジニア界隈では「まさかりを投げる」という言葉を使いますが、慣用表現ではなくリアルな斧の投げ方についてのレクチャーをしてくれました。社内の斧投げ経験者がじわじわ増えています。

「低カロリー飲料の世界」（永元さん）

LT会5

市販の低カロリー飲料は種類が少なくて飽きてしまう。だから自分で作ってしまおう！というお話。普段の飲み物の話題で盛り上がりました。

「ホレスワビエツに行ってきました」（服部さん）

LT会6

ポーランド陶器を求めてポーランドの工房に見学に行ってきたお話。実際に手に入れた陶器もとても綺麗でした。

最後に

クラッソーネに少しでも興味を持っていただけたら、気軽にご連絡ください。

https://www.crassone.co.jp/recruit/engineer/

LT会（ライトニングトーク会）の紹介

<p>こんにちは。田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。</p>
<p>今年、第一子の女の子が誕生し、3ヶ月間の育児休業をいただいておりました。<br />
育休に向けて会社としてもチームとしても全面的にサポートいただき、とても感謝しています。</p>
<p>育休中にどんなことをしていたのか、どんな学びがあったのかを書き連ねてみようと思います。</p>
<h2 id="%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E5%8F%96%E5%BE%97%E3%81%AE%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91"><a class="header-anchor-link" href="#%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E5%8F%96%E5%BE%97%E3%81%AE%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91" aria-hidden="true"></a> 育児休業取得のきっかけ</h2>
<p>子どもが産まれた直後の大切な時期にしっかりと子育てに関わりたいと思ったのがきっかけでした。<br />
第一子ということもあり、子育てのスキルや知識を身につけるための時間が必要だと感じ、育児休業を取得することを決意しました。</p>
<p><a href="https://tech.crassone.jp/posts/childcare-leave" target="_blank" rel="nofollow noopener noreferrer">同じ開発部内に育休取得者がいた</a>こともあり、心理的なハードルはありませんでした。<br />
部内で業務の引き継ぎをさせていただき、安心して育休に入ることができました。</p>
<h2 id="%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E4%B8%AD%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%80%81%E5%BF%83%E6%8E%9B%E3%81%91%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E4%B8%AD%E3%81%AB%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8%E3%80%81%E5%BF%83%E6%8E%9B%E3%81%91%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 育児休業中にやったこと、心掛けたこと</h2>
<h3 id="%E4%BE%BF%E5%88%A9%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E5%88%A9%E7%94%A8"><a class="header-anchor-link" href="#%E4%BE%BF%E5%88%A9%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E5%88%A9%E7%94%A8" aria-hidden="true"></a> 便利サービスの利用</h3>
<p>子育てに便利なサービスを使い始めました。</p>
<ul>
<li><a href="https://www.piyolog.com/" target="_blank" rel="nofollow noopener noreferrer">ぴよログ</a>：言わずと知れた育児記録アプリ</li>
<li>ウォーターサーバー：すぐにミルクを作れる</li>
<li><a href="https://nosh.jp/" target="_blank" rel="nofollow noopener noreferrer">nosh</a>：ご飯を作る手間が省けるし美味しい</li>
<li><a href="https://toysub.net/" target="_blank" rel="nofollow noopener noreferrer">トイサブ！</a>：新しいおもちゃと出会えて便利</li>
<li><a href="https://mitene.us/" target="_blank" rel="nofollow noopener noreferrer">みてね</a>：両親へ写真・動画をサッと共有</li>
</ul>
<h3 id="%E7%AF%80%E7%B4%84"><a class="header-anchor-link" href="#%E7%AF%80%E7%B4%84" aria-hidden="true"></a> 節約</h3>
<p>節約も意識するようになりました。</p>
<ul>
<li>夫婦揃ってスマホを格安SIMに切り替えた</li>
<li>Xプレミアム（Twitter Blue）解約</li>
<li>Apple Music解約</li>
<li>保険の見直し</li>
<li>お店のポイントが貯まるアプリを大量にインストール（薬局、電器屋、…）</li>
</ul>
<h3 id="%E5%A4%AB%E5%A9%A6%E9%96%93%E3%81%AE%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E6%94%B9%E5%96%84"><a class="header-anchor-link" href="#%E5%A4%AB%E5%A9%A6%E9%96%93%E3%81%AE%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E6%94%B9%E5%96%84" aria-hidden="true"></a> 夫婦間のコミュニケーション改善</h3>
<p>夫婦で「良いチーム」として子育てをするために、夫婦間のコミュニケーションが重要だと強く感じました。<br />
開発チームで実践しているスクラムの要素も少し参考にしながら、コミュニケーションを促進するためにいくつかの工夫をしてきました。</p>
<p>Notionを使って夫婦のWikiページを作り、あらゆる情報を1箇所にまとめるようにしました。</p>
<p><img src="/images/posts/childcare-leave-tahara/childcare-leave-tahara-1.png" alt="夫婦Wiki" /></p>
<p>タスク管理ボードを作り、子育ての中で欲しいものややりたいことを書き出すようにしました。</p>
<p><img src="/images/posts/childcare-leave-tahara/childcare-leave-tahara-2.png" alt="夫婦のタスク管理ボード" /></p>
<p>名前決め、保育園探し等の大きなタスクはデータベースを作って乗り切っています。</p>
<p><img src="/images/posts/childcare-leave-tahara/childcare-leave-tahara-3.png" alt="名前決め" /></p>
<p>週に1回情報共有会の時間を設けて、今週のできごとや議論したいトピックについて話し合うようにしています。</p>
<p><img src="/images/posts/childcare-leave-tahara/childcare-leave-tahara-4.png" alt="夫婦の情報共有会" /></p>
<h2 id="%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 育児休業を取得して良かったこと</h2>
<p>育児にじっくりと向き合う時間をいただいたことで、多少の苦労はありながらも、心穏やかに過ごすことができました。<br />
子どもの初めての瞬間や成長を間近で見ることができて良かったです。</p>
<p>また、子育てのリアルな苦労や課題を体験することで、仕事や社会に対する視点が広がったと感じています。<br />
世の中のニュースや商品に対して「自分ごと」として捉える幅も広がりました。</p>
<h2 id="%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E3%81%AE%E5%8F%96%E5%BE%97%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E6%96%B9%E3%81%B8"><a class="header-anchor-link" href="#%E8%82%B2%E5%85%90%E4%BC%91%E6%A5%AD%E3%81%AE%E5%8F%96%E5%BE%97%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E6%96%B9%E3%81%B8" aria-hidden="true"></a> 育児休業の取得を考えている方へ</h2>
<p>育児休業は、家族との貴重な時間を持てるだけでなく、自身の成長の機会でもあると思いました。<br />
腰を据えて育児に向き合った人にだけ見えてくる世界があるように感じました。</p>
<p>育休取得にあたっては、早めの計画とコミュニケーションを心がけることで、周囲との認識を合わせやすくなります。<br />
また、可能であれば育休中も会社の状況や業界の動向を追っておくと、復職後がスムーズになると思います。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>クラッソーネに少しでも興味を持っていただけたら、気軽にご連絡ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__24632a5a4801c" src="https://embed.zenn.studio/card#zenn-embedded__24632a5a4801c" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。田原（@shogocat）です。

今年、第一子の女の子が誕生し、3ヶ月間の育児休業をいただいておりました。
育休に向けて会社としてもチームとしても全面的にサポートいただき、とても感謝しています。

育休中にどんなことをしていたのか、どんな学びがあったのかを書き連ねてみようと思います。

育児休業取得のきっかけ

子どもが産まれた直後の大切な時期にしっかりと子育てに関わりたいと思ったのがきっかけでした。
第一子ということもあり、子育てのスキルや知識を身につけるための時間が必要だと感じ、育児休業を取得することを決意しました。

同じ開発部内に育休取得者がいたこともあり、心理的なハードルはありませんでした。
部内で業務の引き継ぎをさせていただき、安心して育休に入ることができました。

育児休業中にやったこと、心掛けたこと

便利サービスの利用

子育てに便利なサービスを使い始めました。

ぴよログ：言わずと知れた育児記録アプリ
ウォーターサーバー：すぐにミルクを作れる
nosh：ご飯を作る手間が省けるし美味しい
トイサブ！：新しいおもちゃと出会えて便利
みてね：両親へ写真・動画をサッと共有

節約

節約も意識するようになりました。

夫婦揃ってスマホを格安SIMに切り替えた
Xプレミアム（Twitter Blue）解約
Apple Music解約
保険の見直し
お店のポイントが貯まるアプリを大量にインストール（薬局、電器屋、…）

夫婦間のコミュニケーション改善

夫婦で「良いチーム」として子育てをするために、夫婦間のコミュニケーションが重要だと強く感じました。
開発チームで実践しているスクラムの要素も少し参考にしながら、コミュニケーションを促進するためにいくつかの工夫をしてきました。

Notionを使って夫婦のWikiページを作り、あらゆる情報を1箇所にまとめるようにしました。

夫婦Wiki

タスク管理ボードを作り、子育ての中で欲しいものややりたいことを書き出すようにしました。

夫婦のタスク管理ボード

名前決め、保育園探し等の大きなタスクはデータベースを作って乗り切っています。

名前決め

週に1回情報共有会の時間を設けて、今週のできごとや議論したいトピックについて話し合うようにしています。

夫婦の情報共有会

育児休業を取得して良かったこと

育児にじっくりと向き合う時間をいただいたことで、多少の苦労はありながらも、心穏やかに過ごすことができました。
子どもの初めての瞬間や成長を間近で見ることができて良かったです。

また、子育てのリアルな苦労や課題を体験することで、仕事や社会に対する視点が広がったと感じています。
世の中のニュースや商品に対して「自分ごと」として捉える幅も広がりました。

育児休業の取得を考えている方へ

育児休業は、家族との貴重な時間を持てるだけでなく、自身の成長の機会でもあると思いました。
腰を据えて育児に向き合った人にだけ見えてくる世界があるように感じました。

育休取得にあたっては、早めの計画とコミュニケーションを心がけることで、周囲との認識を合わせやすくなります。
また、可能であれば育休中も会社の状況や業界の動向を追っておくと、復職後がスムーズになると思います。

最後に

クラッソーネに少しでも興味を持っていただけたら、気軽にご連絡ください。

https://www.crassone.co.jp/recruit/engineer/

3ヶ月間の育児休業をいただきました

<p>こんにちは。田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。</p>
<p>クラッソーネではChatGPTを使える環境が用意されています。<br />
SREチームがChatGPTの利用環境やガイドラインを迅速に用意してくれました。大感謝。</p>
<p>Chrome拡張機能を作りたいシーンがあったのですが、ChatGPT（GPT-4）に相談してみたら1時間で作れちゃいました。</p>
<p>ちなみに、作ったのはNotionのCSSをカスタマイズするChrome拡張機能です。</p>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%ABchatgpt%E3%81%AB%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%A3%E3%81%9F%E6%A7%98%E5%AD%90"><a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%ABchatgpt%E3%81%AB%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%A3%E3%81%9F%E6%A7%98%E5%AD%90" aria-hidden="true"></a> 実際にChatGPTに教えてもらった様子</h2>
<p>私はChrome拡張機能の開発について何の知識も持っていない素人でした。<br />
そこで、ChatGPTに一から十まで質問して答えてもらいました。</p>
<h3 id="chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%82%92%E5%88%9D%E3%82%81%E3%81%8B%E3%82%89%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86"><a class="header-anchor-link" href="#chrome%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%82%92%E5%88%9D%E3%82%81%E3%81%8B%E3%82%89%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> Chrome拡張機能の作り方を初めから教えてもらう</h3>
<p>「何もわからないのでどうすればいいか教えてください。」と聞いたら手順を教えてくれました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-1.png" alt /></p>
<h3 id="%E8%A8%80%E3%82%8F%E3%82%8C%E3%81%9F%E9%80%9A%E3%82%8A%E3%81%AB%E3%82%84%E3%81%A3%E3%81%A6%E3%82%82%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7%E8%A7%A3%E6%B1%BA%E7%AD%96%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86"><a class="header-anchor-link" href="#%E8%A8%80%E3%82%8F%E3%82%8C%E3%81%9F%E9%80%9A%E3%82%8A%E3%81%AB%E3%82%84%E3%81%A3%E3%81%A6%E3%82%82%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7%E8%A7%A3%E6%B1%BA%E7%AD%96%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> 言われた通りにやっても動かなかったので解決策を教えてもらう</h3>
<p>試しにChatGPTに教わった通りにやってみたのですが、上手く動きませんでした。<br />
<code>manifest_version 3</code>でソースコードを作り直してもらいました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-2.png" alt /></p>
<p>文字化けも直してもらいました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-3.png" alt /></p>
<p>その後、上手く動かない→ログを仕込む→上手く動かない…を30分ほど繰り返して、作り方を変えてもらって無事解決しました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-4.png" alt /></p>
<h3 id="%E4%B8%AD%E8%BA%AB%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86"><a class="header-anchor-link" href="#%E4%B8%AD%E8%BA%AB%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> 中身のカスタマイズ方法を教えてもらう</h3>
<p>CSSは外部ファイルにまとめたいなぁと思ったので、直してもらいました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-5.png" alt /></p>
<p>独自CSSを常時適用するのではなく、スイッチがONになっているときのみ適用するように直してもらいました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-6.png" alt /></p>
<h3 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%90%8D%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86"><a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%90%8D%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> プロジェクト名を考えてもらう</h3>
<p>プロジェクト名を考えるのも面倒だったのでChatGPTに依頼しました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-7.png" alt /></p>
<h3 id="%E3%82%B9%E3%83%88%E3%82%A2%E5%85%AC%E9%96%8B%E6%99%82%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%88%E3%82%A2%E5%85%AC%E9%96%8B%E6%99%82%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> ストア公開時の設定を教えてもらう</h3>
<p>Chrome拡張機能を社内の人にだけ公開できるかわからなかったので、教えてもらいました。</p>
<p><img src="/images/posts/create-chrome-plugin-with-chatgpt/create-chrome-plugin-with-chatgpt-8.png" alt /></p>
<h2 id="%E7%B5%90%E8%AB%96"><a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h2>
<p>1時間でChrome拡張機能を作ることができました。<br />
一発で完璧なものができあがる！というわけではありませんでしたが、こちらが依頼するとすぐにその通りに直してくれて、ChatGPTは本当に優秀だなぁと実感しました。</p>
<p>今までやったことがない開発でも、ChatGPTに教わりながらならできる気がしました。心強い存在です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__762fb51b318b3" src="https://embed.zenn.studio/tweet#zenn-embedded__762fb51b318b3" data-content="https%3A%2F%2Ftwitter.com%2Fshogocat%2Fstatus%2F1646149008190996480" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/shogocat/status/1646149008190996480" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/shogocat/status/1646149008190996480</a></p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>ChatGPTを使い倒したい方、ぜひクラッソーネで一緒に働きませんか。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dae9f7ced17eb" src="https://embed.zenn.studio/card#zenn-embedded__dae9f7ced17eb" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。田原（@shogocat）です。

クラッソーネではChatGPTを使える環境が用意されています。
SREチームがChatGPTの利用環境やガイドラインを迅速に用意してくれました。大感謝。

Chrome拡張機能を作りたいシーンがあったのですが、ChatGPT（GPT-4）に相談してみたら1時間で作れちゃいました。

ちなみに、作ったのはNotionのCSSをカスタマイズするChrome拡張機能です。

実際にChatGPTに教えてもらった様子

私はChrome拡張機能の開発について何の知識も持っていない素人でした。
そこで、ChatGPTに一から十まで質問して答えてもらいました。

Chrome拡張機能の作り方を初めから教えてもらう

「何もわからないのでどうすればいいか教えてください。」と聞いたら手順を教えてくれました。

言われた通りにやっても動かなかったので解決策を教えてもらう

試しにChatGPTに教わった通りにやってみたのですが、上手く動きませんでした。
manifest_version 3でソースコードを作り直してもらいました。

文字化けも直してもらいました。

その後、上手く動かない→ログを仕込む→上手く動かない…を30分ほど繰り返して、作り方を変えてもらって無事解決しました。

中身のカスタマイズ方法を教えてもらう

CSSは外部ファイルにまとめたいなぁと思ったので、直してもらいました。

独自CSSを常時適用するのではなく、スイッチがONになっているときのみ適用するように直してもらいました。

プロジェクト名を考えてもらう

プロジェクト名を考えるのも面倒だったのでChatGPTに依頼しました。

ストア公開時の設定を教えてもらう

Chrome拡張機能を社内の人にだけ公開できるかわからなかったので、教えてもらいました。

結論

1時間でChrome拡張機能を作ることができました。
一発で完璧なものができあがる！というわけではありませんでしたが、こちらが依頼するとすぐにその通りに直してくれて、ChatGPTは本当に優秀だなぁと実感しました。

今までやったことがない開発でも、ChatGPTに教わりながらならできる気がしました。心強い存在です。

https://twitter.com/shogocat/status/1646149008190996480

最後に

ChatGPTを使い倒したい方、ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/

ChatGPTに教えてもらいながら素人が1時間でChrome拡張機能を作った話

<p>こんにちは。田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。<br />
クラッソーネでは議事録をNotionに蓄積する文化が定着してきています。自分が参加していない会議の様子がわかり、とても便利です。</p>
<p>私のチームでは<strong>毎週金曜日に定例ミーティング</strong>があります。<br />
事前にアジェンダの記入等をするために、当日ではなく<strong>前日の木曜日に議事録ページを自動生成したい</strong>というニーズがありました。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-8.png" alt="翌営業日の議事録を自動生成したい" /></p>
<p>残念ながら、Notionの標準機能だけでは「翌営業日の議事録ページ」を自動生成することはできません。<br />
そこで今回は、<strong>NotionとMakeを組み合わせて「翌営業日の議事録ページ」を作る方法</strong>をご紹介します。</p>
<h2 id="%E7%BF%8C%E5%96%B6%E6%A5%AD%E6%97%A5%E3%81%AE%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%87%AA%E5%8B%95%E3%81%A7%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95"><a class="header-anchor-link" href="#%E7%BF%8C%E5%96%B6%E6%A5%AD%E6%97%A5%E3%81%AE%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%87%AA%E5%8B%95%E3%81%A7%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 翌営業日の議事録ページを自動で作る方法</h2>
<h3 id="%E5%85%A8%E4%BD%93%E5%83%8F"><a class="header-anchor-link" href="#%E5%85%A8%E4%BD%93%E5%83%8F" aria-hidden="true"></a> 全体像</h3>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-9.png" alt="翌営業日の議事録ページを自動で作る方法" /></p>
<ul>
<li>手順1. Notionの繰り返し設定で毎日議事録ページを作成する</li>
<li>手順2. 日付未設定の議事録ページにMakeで「翌営業日」の日付を入れる</li>
</ul>
<p>Makeで議事録ページの新規作成もできますが、Notion API経由だとデータベースのテンプレートを利用できないため、手順1ではNotionの繰り返し設定を使って議事録ページを作るようにしています。</p>
<p>「翌営業日」は月曜日〜木曜日の間は「次の日」、金曜日は「3日後」です。</p>
<h3 id="%E6%89%8B%E9%A0%861.-notion%E3%81%AE%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E8%A8%AD%E5%AE%9A%E3%81%A7%E6%AF%8E%E6%97%A5%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B"><a class="header-anchor-link" href="#%E6%89%8B%E9%A0%861.-notion%E3%81%AE%E7%B9%B0%E3%82%8A%E8%BF%94%E3%81%97%E8%A8%AD%E5%AE%9A%E3%81%A7%E6%AF%8E%E6%97%A5%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 手順1. Notionの繰り返し設定で毎日議事録ページを作成する</h3>
<p>Notionの議事録データベースの右上の▼を押すとテンプレート一覧が表示されます。<br />
定例ミーティングのテンプレートの•••を押し、繰り返しの設定をします。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-1.png" alt="議事録ページの繰り返し設定" /></p>
<p>ここでは、ミーティングが開催される1営業日前に議事録ページが自動作成されるようにします。<br />
したがって、毎週木曜日に議事録ページが作られるようにします。<br />
時間は手順2の処理より前であれば大丈夫です。ここでは14:50に設定しています。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-2.png" alt="毎週木曜日14:50に議事録ページを自動生成する" /></p>
<h3 id="%E6%89%8B%E9%A0%862.-%E6%97%A5%E4%BB%98%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%ABmake%E3%81%A7%E3%80%8C%E7%BF%8C%E5%96%B6%E6%A5%AD%E6%97%A5%E3%80%8D%E3%81%AE%E6%97%A5%E4%BB%98%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B"><a class="header-anchor-link" href="#%E6%89%8B%E9%A0%862.-%E6%97%A5%E4%BB%98%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E8%AD%B0%E4%BA%8B%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%ABmake%E3%81%A7%E3%80%8C%E7%BF%8C%E5%96%B6%E6%A5%AD%E6%97%A5%E3%80%8D%E3%81%AE%E6%97%A5%E4%BB%98%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B" aria-hidden="true"></a> 手順2. 日付未設定の議事録ページにMakeで「翌営業日」の日付を入れる</h3>
<p>次に、手順1で毎週木曜日に自動生成される議事録ページに対して、Makeを使って日付プロパティを設定します。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-3.png" alt="Makeのシナリオの全体像" /></p>
<p>まず、1つ目のモジュールで日付が空の議事録ページを探します。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-4.png" alt="1つ目のモジュールの設定" /></p>
<p>そして、2つ目のモジュールで翌営業日の日付を登録します。<br />
今日が金曜日の場合は3日後、それ以外の場合は1日後が翌営業日です。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-5.png" alt="2つ目のモジュールの設定" /></p>
<p>1つ目のモジュールで該当の議事録ページが存在しない場合には2つ目のモジュールを実行しないように、フィルターを設定します。</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-6.png" alt="フィルター設定" /></p>
<p>最後に、このシナリオを毎週月曜〜金曜の15:00に実行されるように設定します。<br />
（金曜の定例ミーティングだけに適用するのであれば、実行は木曜15:00のみでも大丈夫です。）</p>
<p><img src="/images/posts/automatic-generation-of-minutes-page/automatic-generation-of-minutes-page-7.png" alt="シナリオのスケジュール設定" /></p>
<p>以上で、毎週金曜日の定例ミーティングの議事録が毎週木曜日に作られるようになりました。</p>
<h3 id="%E4%BB%8A%E5%BE%8C%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> 今後やりたいこと</h3>
<p>現状の仕組みだと祝日にも議事録ページが作られてしまうため、祝日を除外する設定を加えようと思っています。</p>
<p>また、議事録ページが作られたことをSlack通知してあげると便利ですね。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>Notionを使い倒したい方、自動化による業務効率改善が好きな方、ぜひクラッソーネで一緒に働きませんか。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__47c2d30869187" src="https://embed.zenn.studio/card#zenn-embedded__47c2d30869187" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。田原（@shogocat）です。
クラッソーネでは議事録をNotionに蓄積する文化が定着してきています。自分が参加していない会議の様子がわかり、とても便利です。

私のチームでは毎週金曜日に定例ミーティングがあります。
事前にアジェンダの記入等をするために、当日ではなく前日の木曜日に議事録ページを自動生成したいというニーズがありました。

翌営業日の議事録を自動生成したい

残念ながら、Notionの標準機能だけでは「翌営業日の議事録ページ」を自動生成することはできません。
そこで今回は、NotionとMakeを組み合わせて「翌営業日の議事録ページ」を作る方法をご紹介します。

翌営業日の議事録ページを自動で作る方法

全体像

翌営業日の議事録ページを自動で作る方法

手順1. Notionの繰り返し設定で毎日議事録ページを作成する
手順2. 日付未設定の議事録ページにMakeで「翌営業日」の日付を入れる

Makeで議事録ページの新規作成もできますが、Notion API経由だとデータベースのテンプレートを利用できないため、手順1ではNotionの繰り返し設定を使って議事録ページを作るようにしています。

「翌営業日」は月曜日〜木曜日の間は「次の日」、金曜日は「3日後」です。

手順1. Notionの繰り返し設定で毎日議事録ページを作成する

Notionの議事録データベースの右上の▼を押すとテンプレート一覧が表示されます。
定例ミーティングのテンプレートの•••を押し、繰り返しの設定をします。

議事録ページの繰り返し設定

ここでは、ミーティングが開催される1営業日前に議事録ページが自動作成されるようにします。
したがって、毎週木曜日に議事録ページが作られるようにします。
時間は手順2の処理より前であれば大丈夫です。ここでは14:50に設定しています。

毎週木曜日14:50に議事録ページを自動生成する

手順2. 日付未設定の議事録ページにMakeで「翌営業日」の日付を入れる

次に、手順1で毎週木曜日に自動生成される議事録ページに対して、Makeを使って日付プロパティを設定します。

Makeのシナリオの全体像

まず、1つ目のモジュールで日付が空の議事録ページを探します。

1つ目のモジュールの設定

そして、2つ目のモジュールで翌営業日の日付を登録します。
今日が金曜日の場合は3日後、それ以外の場合は1日後が翌営業日です。

2つ目のモジュールの設定

1つ目のモジュールで該当の議事録ページが存在しない場合には2つ目のモジュールを実行しないように、フィルターを設定します。

フィルター設定

最後に、このシナリオを毎週月曜〜金曜の15:00に実行されるように設定します。
（金曜の定例ミーティングだけに適用するのであれば、実行は木曜15:00のみでも大丈夫です。）

シナリオのスケジュール設定

以上で、毎週金曜日の定例ミーティングの議事録が毎週木曜日に作られるようになりました。

今後やりたいこと

現状の仕組みだと祝日にも議事録ページが作られてしまうため、祝日を除外する設定を加えようと思っています。

また、議事録ページが作られたことをSlack通知してあげると便利ですね。

最後に

Notionを使い倒したい方、自動化による業務効率改善が好きな方、ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/

Notionで翌営業日の議事録ページを自動生成する方法

<p>こんにちは。クラッソーネの田原です。<br />
最近自宅で猫を飼い始めて、毎日癒されながらリモートワークに勤しんでいます。</p>
<p><img src="/images/posts/about-tally/about-tally-1.png" alt="我が家の猫" /><br />
<em>我が家の猫</em></p>
<p><strong>申し込み受付やアンケート回収のためのフォーム</strong>が必要になったとき、皆さんはどのように作りますか？</p>
<p>あまりフォームにこだわる必要がない場合やスピード優先の場合には、<strong>フォーム作成サービス</strong>を利用することもよくあるかと思います。<br />
有名なフォーム作成サービスとして、Googleフォームなどがありますね。</p>
<p>そんなフォーム作成サービスの中で、今個人的にイチオシなのが<strong>Tally</strong>です。<br />
今回は、Tallyの素晴らしさについてご紹介します。</p>
<h2 id="tally%E3%81%AE%E6%A6%82%E8%A6%81"><a class="header-anchor-link" href="#tally%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> Tallyの概要</h2>
<p>Tally公式サイト: <a href="https://tally.so/" target="_blank" rel="nofollow noopener noreferrer">https://tally.so/</a></p>
<p><img src="/images/posts/about-tally/about-tally-2.png" alt="Tallyトップページ" /><br />
<em>Tallyトップページ</em></p>
<p>Tallyは<strong>NotionのようなUIでフォームを作成できるサービス</strong>です。<br />
テキスト入力、選択式、チェックボックス、ファイルアップロードなど、一般的なフォームに必要な機能がひととおり揃っています。</p>
<p><img src="/images/posts/about-tally/about-tally-3.png" alt="TallyはNotionのようなUIでフォームを作成できる" /><br />
<em>TallyはNotionのようなUIでフォームを作成できる</em></p>
<p>Notionと同じく半角スラッシュ <code>/</code> を入力するとメニューが表示されます。<br />
また、設問の入れ替えもドラッグ&amp;ドロップで直感的に行うことができます。とても操作しやすいです。</p>
<p><img src="/images/posts/about-tally/about-tally-4.png" alt="Tallyのフォーム作成画面" /><br />
<em>Tallyのフォーム作成画面</em></p>
<p>さらに、細かな設定を簡単に変更できます。<br />
設問ごとの必須化、フォームの初期値、サンクスページなど、あらゆる設定を手軽に行うことができます。</p>
<p><img src="/images/posts/about-tally/about-tally-5.png" alt="あらゆる設定を手軽に行える" /><br />
<em>あらゆる設定を手軽に行える</em></p>
<h2 id="google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84"><a class="header-anchor-link" href="#google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> Googleフォームとの違い</h2>
<p><strong>TallyとGoogleフォームの違い</strong>について解説します。</p>
<p>1つ目は、<strong>Tallyなら見た目の調整を細かく行うことができます</strong>。<br />
テキストの文字色や背景色を変えたり、画像を挿入したり、横並びのレイアウトを使ってオシャレにできます。</p>
<p><img src="/images/posts/about-tally/about-tally-6.png" alt="見た目の調整を行う" /><br />
<em>見た目の調整を行う</em></p>
<p>2つ目は、<strong>Tallyなら条件分岐など複雑な仕組みを作ることができます</strong>。<br />
「この設問で"いいえ"と答えたら特別な設問を表示する」<br />
「入力された金額に消費税分を足してテキスト表示する」<br />
このような仕組みを手軽に実現できます。</p>
<p><img src="/images/posts/about-tally/about-tally-7.png" alt="複雑な仕組みを作れる" /><br />
<em>複雑な仕組みを作れる</em></p>
<p>3つ目は、<strong>TallyならNotionなどの外部ツールと連携できます</strong>。<br />
フォームの回答内容をNotion、Slack、Googleスプレッドシートなどの外部ツールに自動連携できます。</p>
<p><img src="/images/posts/about-tally/about-tally-8.png" alt="外部ツールと連携できる" /><br />
<em>外部ツールと連携できる</em></p>
<p>4つ目は、<strong>Tallyならサンクスページをカスタマイズして作ることができます</strong>。<br />
サンクスページも自由なレイアウトで作り込めます。<br />
回答内容をもとにサンクスページの内容を書き換えることも可能です。</p>
<p><img src="/images/posts/about-tally/about-tally-9.png" alt="サンクスページをカスタマイズできる" /><br />
<em>サンクスページをカスタマイズできる</em></p>
<p>5つ目は、<strong>Tallyならフォーム回答者がアカウントログイン無しでファイルアップロードできます</strong>。<br />
Googleフォームの場合は基本的にはフォーム回答者はアカウントログイン無しで回答できるのですが、ファイルアップロードを伴う設問がある場合にはGoogleアカウントでのログインを求められる仕様になっています。<br />
Tallyなら回答者に面倒なログイン作業を行なっていただく必要はありません。</p>
<p><img src="/images/posts/about-tally/about-tally-10.png" alt="回答者はログイン不要でファイルアップロード可能" /><br />
<em>回答者はログイン不要でファイルアップロード可能</em></p>
<p>6つ目は、<strong>Tallyならフォームの終了期限や申し込み数の上限を設定できます</strong>。<br />
フォーム回答の定員数が決まっている場合に重宝する機能です。</p>
<p><img src="/images/posts/about-tally/about-tally-11.png" alt="終了期限や申込数上限の設定" /><br />
<em>終了期限や申込数上限の設定</em></p>
<p>7つ目は、<strong>Tallyならポップアップ形式のフォームを作ることができます</strong>。<br />
ページ丸ごとフォーム（フルページ）、ページの中にフォームを埋め込む（スタンダード）に加えて、ポップアップ形式でフォームを表示させることができます。</p>
<p><img src="/images/posts/about-tally/about-tally-12.png" alt="色々なフォーム形式" /><br />
<em>色々なフォーム形式</em></p>
<p>ここまで何でもできて、無料で使えるなんて本当にありがたいです。</p>
<h2 id="tally-pro%E3%83%97%E3%83%A9%E3%83%B3%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#tally-pro%E3%83%97%E3%83%A9%E3%83%B3%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> Tally Proプランでできること</h2>
<p>Tallyには<strong>Proプラン</strong>という有料プランがもあります。年払いだと290ドル/年、月払いだと29ドル/月です。<br />
Proプランに登録すると、以下の機能を利用できるようになります。</p>
<ul>
<li>複数人で共同作業できる<strong>ワークスペース機能</strong></li>
<li><strong>独自ドメイン</strong>を設定する</li>
<li><strong>カスタムJavaScript/CSS</strong>を設定する</li>
<li><strong>回答途中の情報</strong>を保存する</li>
<li>Tallyの<strong>ロゴマークを非表示</strong>にする</li>
<li>ファイルアップロードの<strong>容量制限無し</strong>（無料プランの場合は10MBまで）</li>
<li>フォーム送信時に<strong>回答者へメールを自動送付</strong></li>
</ul>
<p><img src="/images/posts/about-tally/about-tally-13.png" alt="Tally Proプランにできること" /><br />
<em>Tally Proプランにできること</em></p>
<p>詳しくは公式サイトをご確認ください。 <a href="https://tally.so/pricing" target="_blank" rel="nofollow noopener noreferrer">https://tally.so/pricing</a></p>
<h2 id="%E6%B3%A8%E6%84%8F%E7%82%B9%EF%BC%86%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D"><a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9%EF%BC%86%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D" aria-hidden="true"></a> 注意点＆ハマりどころ</h2>
<p>Tallyの管理画面や説明ページはすべて<strong>英語</strong>です。日本語の説明をお望みの方には不向きです。</p>
<p>また、Notionのインテグレーション設定をAさんとBさんの2人が順番に行った場合、<strong>後から設定したBさんのインテグレーションのみが有効になるような挙動</strong>が発生しました。<br />
その結果、先に設定したAさんのインテグレーションが使われず、フォームの回答内容がNotionに送信されない問題が発生しました。<br />
複数人で操作する際には注意しましょう。<br />
（弊社では標準のNotion連携機能の利用を止めました。自動化ツールMakeとWebhook連携し、Make内でNotionへの連携処理を作るようにしました。）</p>
<p>あと、今となっては過去の話ですが、Tallyで作成したフォームは<strong>Internet Explorerで正常に動作しない問題</strong>がありました。<br />
Internet Explorerからのアクセスの場合のみCode injection設定で警告を表示する対応を行なっていました。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>いかがでしたか。Tallyはまだまだ日本での知名度は低いですが、とても便利なフォーム作成サービスです。</p>
<p>さまざまなツールを活用しながら良いサービス作りをしてみたい方。<br />
ぜひクラッソーネで一緒に働きませんか。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d3e5a5cdb05d1" src="https://embed.zenn.studio/card#zenn-embedded__d3e5a5cdb05d1" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。クラッソーネの田原です。
最近自宅で猫を飼い始めて、毎日癒されながらリモートワークに勤しんでいます。

我が家の猫
我が家の猫

申し込み受付やアンケート回収のためのフォームが必要になったとき、皆さんはどのように作りますか？

あまりフォームにこだわる必要がない場合やスピード優先の場合には、フォーム作成サービスを利用することもよくあるかと思います。
有名なフォーム作成サービスとして、Googleフォームなどがありますね。

そんなフォーム作成サービスの中で、今個人的にイチオシなのがTallyです。
今回は、Tallyの素晴らしさについてご紹介します。

Tallyの概要

Tally公式サイト: https://tally.so/

Tallyトップページ
Tallyトップページ

TallyはNotionのようなUIでフォームを作成できるサービスです。
テキスト入力、選択式、チェックボックス、ファイルアップロードなど、一般的なフォームに必要な機能がひととおり揃っています。

TallyはNotionのようなUIでフォームを作成できる
TallyはNotionのようなUIでフォームを作成できる

Notionと同じく半角スラッシュ / を入力するとメニューが表示されます。
また、設問の入れ替えもドラッグ&ドロップで直感的に行うことができます。とても操作しやすいです。

Tallyのフォーム作成画面
Tallyのフォーム作成画面

さらに、細かな設定を簡単に変更できます。
設問ごとの必須化、フォームの初期値、サンクスページなど、あらゆる設定を手軽に行うことができます。

あらゆる設定を手軽に行える
あらゆる設定を手軽に行える

Googleフォームとの違い

TallyとGoogleフォームの違いについて解説します。

1つ目は、Tallyなら見た目の調整を細かく行うことができます。
テキストの文字色や背景色を変えたり、画像を挿入したり、横並びのレイアウトを使ってオシャレにできます。

見た目の調整を行う
見た目の調整を行う

2つ目は、Tallyなら条件分岐など複雑な仕組みを作ることができます。
「この設問で"いいえ"と答えたら特別な設問を表示する」
「入力された金額に消費税分を足してテキスト表示する」
このような仕組みを手軽に実現できます。

複雑な仕組みを作れる
複雑な仕組みを作れる

3つ目は、TallyならNotionなどの外部ツールと連携できます。
フォームの回答内容をNotion、Slack、Googleスプレッドシートなどの外部ツールに自動連携できます。

外部ツールと連携できる
外部ツールと連携できる

4つ目は、Tallyならサンクスページをカスタマイズして作ることができます。
サンクスページも自由なレイアウトで作り込めます。
回答内容をもとにサンクスページの内容を書き換えることも可能です。

サンクスページをカスタマイズできる
サンクスページをカスタマイズできる

5つ目は、Tallyならフォーム回答者がアカウントログイン無しでファイルアップロードできます。
Googleフォームの場合は基本的にはフォーム回答者はアカウントログイン無しで回答できるのですが、ファイルアップロードを伴う設問がある場合にはGoogleアカウントでのログインを求められる仕様になっています。
Tallyなら回答者に面倒なログイン作業を行なっていただく必要はありません。

回答者はログイン不要でファイルアップロード可能
回答者はログイン不要でファイルアップロード可能

6つ目は、Tallyならフォームの終了期限や申し込み数の上限を設定できます。
フォーム回答の定員数が決まっている場合に重宝する機能です。

終了期限や申込数上限の設定
終了期限や申込数上限の設定

7つ目は、Tallyならポップアップ形式のフォームを作ることができます。
ページ丸ごとフォーム（フルページ）、ページの中にフォームを埋め込む（スタンダード）に加えて、ポップアップ形式でフォームを表示させることができます。

色々なフォーム形式
色々なフォーム形式

ここまで何でもできて、無料で使えるなんて本当にありがたいです。

Tally Proプランでできること

TallyにはProプランという有料プランがもあります。年払いだと290ドル/年、月払いだと29ドル/月です。
Proプランに登録すると、以下の機能を利用できるようになります。

複数人で共同作業できるワークスペース機能
独自ドメインを設定する
カスタムJavaScript/CSSを設定する
回答途中の情報を保存する
Tallyのロゴマークを非表示にする
ファイルアップロードの容量制限無し（無料プランの場合は10MBまで）
フォーム送信時に回答者へメールを自動送付

Tally Proプランにできること
Tally Proプランにできること

詳しくは公式サイトをご確認ください。 https://tally.so/pricing

注意点＆ハマりどころ

Tallyの管理画面や説明ページはすべて英語です。日本語の説明をお望みの方には不向きです。

また、Notionのインテグレーション設定をAさんとBさんの2人が順番に行った場合、後から設定したBさんのインテグレーションのみが有効になるような挙動が発生しました。
その結果、先に設定したAさんのインテグレーションが使われず、フォームの回答内容がNotionに送信されない問題が発生しました。
複数人で操作する際には注意しましょう。
（弊社では標準のNotion連携機能の利用を止めました。自動化ツールMakeとWebhook連携し、Make内でNotionへの連携処理を作るようにしました。）

あと、今となっては過去の話ですが、Tallyで作成したフォームはInternet Explorerで正常に動作しない問題がありました。
Internet Explorerからのアクセスの場合のみCode injection設定で警告を表示する対応を行なっていました。

最後に

いかがでしたか。Tallyはまだまだ日本での知名度は低いですが、とても便利なフォーム作成サービスです。

さまざまなツールを活用しながら良いサービス作りをしてみたい方。
ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/

Notion風UIでサクサクフォームを作れるTallyがすごい！Googleフォームと比較してみました。

<p>こんにちは。プロダクトマネージャーの田原です。<br />
社内のSlackに社員の誕生日と入社記念日を通知する仕組みを作ったところ、各方面から割と好評なようで嬉しいです。<br style="display:none" />
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__6273fb3166f23" src="https://embed.zenn.studio/tweet#zenn-embedded__6273fb3166f23" data-content="https%3A%2F%2Ftwitter.com%2Fshogocat%2Fstatus%2F1485925356070924288" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/shogocat/status/1485925356070924288" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/shogocat/status/1485925356070924288</a></p>
<p>この度、話題の『チームトポロジー 価値あるソフトウェアをすばやく届ける適応型組織設計』を読みました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eee880b341c7c" src="https://embed.zenn.studio/card#zenn-embedded__eee880b341c7c" data-content="https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4820729632%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.amazon.co.jp/dp/4820729632/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.amazon.co.jp/dp/4820729632/</a></p>
<p>（アトラクタ様の<a href="https://www.attractor.co.jp/news/team-topology/" target="_blank" rel="nofollow noopener noreferrer">プレゼント企画</a>にて御本をいただきました。ありがとうございます！）</p>
<h2 id="%E3%80%8E%E3%83%81%E3%83%BC%E3%83%A0%E3%83%88%E3%83%9D%E3%83%AD%E3%82%B8%E3%83%BC%E3%80%8F%E3%81%AE%E7%B4%B9%E4%BB%8B"><a class="header-anchor-link" href="#%E3%80%8E%E3%83%81%E3%83%BC%E3%83%A0%E3%83%88%E3%83%9D%E3%83%AD%E3%82%B8%E3%83%BC%E3%80%8F%E3%81%AE%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 『チームトポロジー』の紹介</h2>
<p>チームトポロジーについては本書訳者の吉羽さんの<a href="https://www.ryuzee.com/contents/blog/14566" target="_blank" rel="nofollow noopener noreferrer">【資料公開】30分で分かった気になるチームトポロジー</a>や<a href="https://www.youtube.com/watch?v=uJL3M7R8MLc" target="_blank" rel="nofollow noopener noreferrer">その講演の様子</a>を見ていただくと概要をすぐに掴めるのでおすすめです。変化が激しく正解の見えないソフトウェア開発において、チームが適切に機能するためのモデルを示しています。</p>
<p>本書で語られている4つのチームタイプと3つのインタラクションモードは、今後組織設計を語る上での共通言語として覚えておくとよいでしょう。</p>
<p><img src="/images/posts/team-topologies-impression/team-topologies-impression-0.png" alt="4つのチームタイプと3つのインタラクションモード" /></p>
<h3 id="4%E3%81%A4%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%82%BF%E3%82%A4%E3%83%97"><a class="header-anchor-link" href="#4%E3%81%A4%E3%81%AE%E3%83%81%E3%83%BC%E3%83%A0%E3%82%BF%E3%82%A4%E3%83%97" aria-hidden="true"></a> 4つのチームタイプ</h3>
<p>ソフトウェアシステムの開発と運用に必要なのは次の4つのチームタイプのみ。</p>
<ul>
<li><strong>ストリームアラインドチーム</strong>：ビジネスの主な変更フローに沿って配置されるチーム。</li>
<li><strong>プラットフォームチーム</strong>：下位のプラットフォームを扱うチームで、ストリームアラインドチームのデリバリーを助ける。</li>
<li><strong>イネイブリングチーム</strong>：転換期や学習期に、他のチームがソフトウェアを導入したり変更したりするのを助ける。</li>
<li><strong>コンプリケイテッド・サブシステムチーム</strong>：ストリームアラインドチームやプラットフォームチームが扱うには複雑すぎるサブシステムを扱うためのチーム。</li>
</ul>
<p>これらに該当しないチームタイプは不要である、と述べられています。</p>
<h3 id="3%E3%81%A4%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A2%E3%83%BC%E3%83%89"><a class="header-anchor-link" href="#3%E3%81%A4%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A2%E3%83%BC%E3%83%89" aria-hidden="true"></a> 3つのインタラクションモード</h3>
<p>チーム間のインタラクションモードは以下の3種類のみ。</p>
<ul>
<li><strong>コラボレーションモード</strong>：特に新しい技術やアプローチを探索している間、2つのチームがゴールを共有して一緒に働く。</li>
<li><strong>X-as-a-Serviceモード</strong>：あるチームが、別のチームが提供する何かを利用する（API、ツール、ソフトウェア製品全体など）。コラボレーションは最小限。</li>
<li><strong>ファシリテーションモード</strong>：あるチーム（通常はイネイブリングチーム）が、新しいアプローチの学習と適用を促すため、他のチームをファシリテーションする。</li>
</ul>
<p>インタラクションモードもまた、上記に該当しない場合は無駄であり、チームの責任境界や目的が適切に割り当てられていないことを意味すると述べられています。</p>
<h2 id="%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AE%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E7%B5%84%E7%B9%94%E4%BD%93%E5%88%B6%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96"><a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%83%83%E3%82%BD%E3%83%BC%E3%83%8D%E3%81%AE%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E7%B5%84%E7%B9%94%E4%BD%93%E5%88%B6%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96" aria-hidden="true"></a> クラッソーネのソフトウェア開発組織体制の可視化</h2>
<p>チームトポロジーの用語を使ってクラッソーネのソフトウェア開発組織体制を可視化してみました。</p>
<p><img src="/images/posts/team-topologies-impression/team-topologies-impression-1.png" alt="2021年1月時点の組織体制" /><br />
2021年1月時点ではストリームアラインドチーム1チームとコンプリケイテッド・サブシステムチーム1チームの構成でした。</p>
<p>機械学習を使ったAI予想金額について別チームに切り出して動いていて、かつX-as-a-Serviceモードの関係性になっていたおかげで認知負荷の軽減に寄与していました。<br />
ただ、人手不足もありWebアプリケーション開発もインフラ周りもすべて1チームでこなしていたのはかなり負担になっていました。</p>
<p><img src="/images/posts/team-topologies-impression/team-topologies-impression-2.png" alt="2022年1月時点の組織体制" /><br />
その1年後の様子は上の図の通りです。<br />
<a href="https://tech.crassone.jp/posts/entry-miyahara" target="_blank" rel="nofollow noopener noreferrer">新たにSREチームが発足しました</a>。発足当初はコラボレーションモードで密に連携しながら協働していましたが、その後は徐々に仕組みが整うにつれてX-as-a-Serviceモードへと移行していきました。おかげでWebアプリケーション開発を担当するメンバーの認知負荷が大幅に軽減されました。</p>
<h2 id="%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%B2%E9%A1%8C%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%81%9F%E7%90%86%E6%83%B3%E3%81%AE%E7%B5%84%E7%B9%94%E4%BD%93%E5%88%B6%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8"><a class="header-anchor-link" href="#%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%B2%E9%A1%8C%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%81%9F%E7%90%86%E6%83%B3%E3%81%AE%E7%B5%84%E7%B9%94%E4%BD%93%E5%88%B6%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 現状の課題から考えた理想の組織体制イメージ</h2>
<p>チームトポロジーを読む中で、現状の組織体制には大きく2つの課題があるのではと感じました。</p>
<p>1つ目の課題は、まだまだ認知負荷が高い点です。<br />
ストリームアラインドチームにおいて、申し込み完了時点を節理面として2つに分けるとさらにチームが動きやすくなりそうです。<br />
また、マッチングロジックは位置情報や希望条件など複雑な仕様となっているため、コンプリケイテッド・サブシステムチームとして1チーム作った方が良さそうです。</p>
<p>図に反映すると次のとおりです。<br />
<img src="/images/posts/team-topologies-impression/team-topologies-impression-3.png" alt="組織体制の理想型" /></p>
<p>2つ目の課題は、ストリームアラインドチームとプラットフォームチームの線引きが曖昧な点です。<br />
組織が成果を出すために、どのチームがどこまで責任を持って動くかは明確にすべきです。<br />
線引きが決まるまではコラボレーションモードで連携する必要があるのかもしれないと思いました。</p>
<h2 id="%E4%BB%8A%E5%BE%8C%E3%81%AB%E5%90%91%E3%81%91%E3%81%A6"><a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AB%E5%90%91%E3%81%91%E3%81%A6" aria-hidden="true"></a> 今後に向けて</h2>
<p>まずはチームトポロジーの内容をチーム内でシェアし、組織の形について議論していくべきだと感じました。<br />
現状はコンパクトな組織体制でなんとか回っている部分も、今後プロダクトや組織がスケールしたときを見据えてチームファーストで考えるべきですね。</p>
<p>そして、チームの認知負荷を下げる取り組みとして、コードもアーキテクチャも整理していく必要があると感じました。<br />
リファクタリングはどうしても後回しになりがちですが、チームとして安心して手を加えていくために必要だと再認識しました。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>組織論についてもっと学んでいきたいと考えさせられる一冊でした。<br />
組織設計に興味がある方、ぜひクラッソーネで一緒に働きませんか。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__836b8a1fe16fd" src="https://embed.zenn.studio/card#zenn-embedded__836b8a1fe16fd" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。プロダクトマネージャーの田原です。
社内のSlackに社員の誕生日と入社記念日を通知する仕組みを作ったところ、各方面から割と好評なようで嬉しいです。
https://twitter.com/shogocat/status/1485925356070924288

この度、話題の『チームトポロジー 価値あるソフトウェアをすばやく届ける適応型組織設計』を読みました。

https://www.amazon.co.jp/dp/4820729632/

（アトラクタ様のプレゼント企画にて御本をいただきました。ありがとうございます！）

『チームトポロジー』の紹介

チームトポロジーについては本書訳者の吉羽さんの【資料公開】30分で分かった気になるチームトポロジーやその講演の様子を見ていただくと概要をすぐに掴めるのでおすすめです。変化が激しく正解の見えないソフトウェア開発において、チームが適切に機能するためのモデルを示しています。

本書で語られている4つのチームタイプと3つのインタラクションモードは、今後組織設計を語る上での共通言語として覚えておくとよいでしょう。

4つのチームタイプと3つのインタラクションモード

4つのチームタイプ

ソフトウェアシステムの開発と運用に必要なのは次の4つのチームタイプのみ。

ストリームアラインドチーム：ビジネスの主な変更フローに沿って配置されるチーム。
プラットフォームチーム：下位のプラットフォームを扱うチームで、ストリームアラインドチームのデリバリーを助ける。
イネイブリングチーム：転換期や学習期に、他のチームがソフトウェアを導入したり変更したりするのを助ける。
コンプリケイテッド・サブシステムチーム：ストリームアラインドチームやプラットフォームチームが扱うには複雑すぎるサブシステムを扱うためのチーム。

これらに該当しないチームタイプは不要である、と述べられています。

3つのインタラクションモード

チーム間のインタラクションモードは以下の3種類のみ。

コラボレーションモード：特に新しい技術やアプローチを探索している間、2つのチームがゴールを共有して一緒に働く。
X-as-a-Serviceモード：あるチームが、別のチームが提供する何かを利用する（API、ツール、ソフトウェア製品全体など）。コラボレーションは最小限。
ファシリテーションモード：あるチーム（通常はイネイブリングチーム）が、新しいアプローチの学習と適用を促すため、他のチームをファシリテーションする。

インタラクションモードもまた、上記に該当しない場合は無駄であり、チームの責任境界や目的が適切に割り当てられていないことを意味すると述べられています。

クラッソーネのソフトウェア開発組織体制の可視化

チームトポロジーの用語を使ってクラッソーネのソフトウェア開発組織体制を可視化してみました。

2021年1月時点の組織体制
2021年1月時点ではストリームアラインドチーム1チームとコンプリケイテッド・サブシステムチーム1チームの構成でした。

機械学習を使ったAI予想金額について別チームに切り出して動いていて、かつX-as-a-Serviceモードの関係性になっていたおかげで認知負荷の軽減に寄与していました。
ただ、人手不足もありWebアプリケーション開発もインフラ周りもすべて1チームでこなしていたのはかなり負担になっていました。

2022年1月時点の組織体制
その1年後の様子は上の図の通りです。
新たにSREチームが発足しました。発足当初はコラボレーションモードで密に連携しながら協働していましたが、その後は徐々に仕組みが整うにつれてX-as-a-Serviceモードへと移行していきました。おかげでWebアプリケーション開発を担当するメンバーの認知負荷が大幅に軽減されました。

現状の課題から考えた理想の組織体制イメージ

チームトポロジーを読む中で、現状の組織体制には大きく2つの課題があるのではと感じました。

1つ目の課題は、まだまだ認知負荷が高い点です。
ストリームアラインドチームにおいて、申し込み完了時点を節理面として2つに分けるとさらにチームが動きやすくなりそうです。
また、マッチングロジックは位置情報や希望条件など複雑な仕様となっているため、コンプリケイテッド・サブシステムチームとして1チーム作った方が良さそうです。

図に反映すると次のとおりです。
組織体制の理想型

2つ目の課題は、ストリームアラインドチームとプラットフォームチームの線引きが曖昧な点です。
組織が成果を出すために、どのチームがどこまで責任を持って動くかは明確にすべきです。
線引きが決まるまではコラボレーションモードで連携する必要があるのかもしれないと思いました。

今後に向けて
まずはチームトポロジーの内容をチーム内でシェアし、組織の形について議論していくべきだと感じました。
現状はコンパクトな組織体制でなんとか回っている部分も、今後プロダクトや組織がスケールしたときを見据えてチームファーストで考えるべきですね。

そして、チームの認知負荷を下げる取り組みとして、コードもアーキテクチャも整理していく必要があると感じました。
リファクタリングはどうしても後回しになりがちですが、チームとして安心して手を加えていくために必要だと再認識しました。

最後に

組織論についてもっと学んでいきたいと考えさせられる一冊でした。
組織設計に興味がある方、ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/


『チームトポロジー』から学んだ組織設計 #ちいとぽ

<p>こんにちは。クラッソーネでプロダクトマネージャーをしている田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。<br />
最近猫を飼い始めました。可愛すぎて毎日癒されています。</p>
<p>今回はランチャーツールのRaycastからNotionのデータベースにページを追加する方法についてご紹介します。</p>
<h2 id="notion%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%89%8B%E9%96%93"><a class="header-anchor-link" href="#notion%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%89%8B%E9%96%93" aria-hidden="true"></a> Notionのデータベースにページを追加する手間</h2>
<p>私は日々の業務の中でNotionのさまざまなデータベースにページを追加しています。</p>
<ul>
<li>プロダクトのタスク管理</li>
<li>個人のタスク管理</li>
<li>チームの振り返り　などなど…</li>
</ul>
<p>ページを追加するまでに以下の作業を行う必要があり、少し手間がかかってしまいます。</p>
<p>手順1. Notionを開く<br />
手順2. データベースを探す<br />
手順3. 新規ページを作成<br />
手順4. プロパティを設定</p>
<p><img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-0.png" alt="Notionのデータベースにページを追加する方法" /></p>
<p>手順1〜4を1日に何度も繰り返すうちに、もっと手軽にやりたいと思うようになりました。</p>
<h2 id="%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%9F%E5%B7%A5%E5%A4%AB"><a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%9F%E5%B7%A5%E5%A4%AB" aria-hidden="true"></a> これまでに試した工夫</h2>
<p>データベースのページ追加を手軽に行う方法を模索してきました。</p>
<p><a href="https://www.alfredapp.com/" target="_blank" rel="nofollow noopener noreferrer">Alfred</a>を使ってお目当てのデータベースを一発で開けるワークフローを自作したり、Notion API経由で特定のデータベースにページを追加するスクリプトを自作したりしました。<br />
幾分かは楽になりましたが、上記手順4のプロパティ設定を柔軟に行うことができなかったり、自分の中で満足のいく仕組みではありませんでした。</p>
<p>そんな中、Raycastと出会いました。</p>
<h2 id="raycast%E3%81%AE%E3%81%94%E7%B4%B9%E4%BB%8B"><a class="header-anchor-link" href="#raycast%E3%81%AE%E3%81%94%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> Raycastのご紹介</h2>
<p>RaycastはMac専用のランチャーツールです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__bf92b1bc68c6f" src="https://embed.zenn.studio/card#zenn-embedded__bf92b1bc68c6f" data-content="https%3A%2F%2Fwww.raycast.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.raycast.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.raycast.com/</a><br style="display:none" />
<img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-1.png" alt="Raycast" /></p>
<p>"モダンなAlfred"という印象で、高機能で動作もサクサク、UIもオシャレです。個人利用なら無料で使えます。Reactで拡張機能を作ることもできます。</p>
<h2 id="raycast%E3%81%8B%E3%82%89notion%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95"><a class="header-anchor-link" href="#raycast%E3%81%8B%E3%82%89notion%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> RaycastからNotionに接続する方法</h2>
<h3 id="1.-notion%E3%81%AEintegration%E4%BD%9C%E6%88%90"><a class="header-anchor-link" href="#1.-notion%E3%81%AEintegration%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 1. NotionのIntegration作成</h3>
<p><a href="https://www.notion.so/my-integrations" target="_blank" rel="nofollow noopener noreferrer">https://www.notion.so/my-integrations</a> にアクセスし、Notionの新しいIntegrationを作成します。<br />
<img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-2.png" alt="NotionのIntegration一覧ページ" /><br />
<img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-3.png" alt="NotionのIntegration作成" /></p>
<p>Integrationを作成したら、トークンをメモしておきます。</p>
<h3 id="2.-notion%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%ABintegration%E3%82%92%E6%8B%9B%E5%BE%85"><a class="header-anchor-link" href="#2.-notion%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%ABintegration%E3%82%92%E6%8B%9B%E5%BE%85" aria-hidden="true"></a> 2. NotionのデータベースにIntegrationを招待</h3>
<p>Notionのデータベースにさきほど作成したIntegrationを招待します。</p>
<p><img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-4.png" alt="NotionのデータベースにIntegrationを招待する" /></p>
<p>これで、Notion側の準備は完了です。</p>
<h3 id="3.-raycast%E3%81%ABnotion-extension%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB"><a class="header-anchor-link" href="#3.-raycast%E3%81%ABnotion-extension%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 3. RaycastにNotion Extensionをインストール</h3>
<p>次に、Raycast側の設定を行います。ExtensionのStoreからNotion Extensionを探します。</p>
<p><img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-5.png" alt="RaycastにNotion Extensionをインストール" /></p>
<p>画像の通り2種類見つかりますが、今回は <code>Notion</code> という名前のExtensionをインストールします。</p>
<h3 id="4.-%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E5%85%A5%E5%8A%9B"><a class="header-anchor-link" href="#4.-%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E5%85%A5%E5%8A%9B" aria-hidden="true"></a> 4. トークン入力</h3>
<p>Raycastで <code>Notion</code> と入力するとさきほどインストールしたExtensionのメニューが表示されます。<br />
<img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-6.png" alt="RaycastのNotion Extensionを動かす" /></p>
<p>メニューのどちらかを選択すると、初回実行時にはトークンの入力が求められます。さきほど取得したトークンを入力します。<br />
<img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-7.png" alt="トークンを入力する" /></p>
<p>以上で、RaycastからNotionのデータベースにページを作成するための準備がすべて完了です。</p>
<h2 id="%E3%83%87%E3%83%A2"><a class="header-anchor-link" href="#%E3%83%87%E3%83%A2" aria-hidden="true"></a> デモ</h2>
<p>Raycastから個人タスクと振り返りの2つを登録してみました。</p>
<p><img src="/images/posts/create-page-from-raycast-to-notion/demo.gif" alt="登録の様子" /></p>
<p>データベースのプロパティに合わせて自動的にフォームが切り替わります。</p>
<p><img src="/images/posts/create-page-from-raycast-to-notion/demo2.gif" alt="フォームが切り替わる様子" /></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81"><a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p><img src="/images/posts/create-page-from-raycast-to-notion/raycast-notion-8.png" alt="Notion + Raycast で手軽にデータ登録" /></p>
<p>RaycastからNotionにとても手軽にデータ登録できるようになりました。<br />
今後接続先のデータベースを増やしたいときはIntegrationの招待を行うだけでよいため、とても楽に拡張できます。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>Notionを使い倒したい方、ぜひクラッソーネで一緒に働きませんか。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__34d657cbbc794" src="https://embed.zenn.studio/card#zenn-embedded__34d657cbbc794" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは。クラッソーネでプロダクトマネージャーをしている田原（@shogocat）です。
最近猫を飼い始めました。可愛すぎて毎日癒されています。

今回はランチャーツールのRaycastからNotionのデータベースにページを追加する方法についてご紹介します。

Notionのデータベースにページを追加する手間

私は日々の業務の中でNotionのさまざまなデータベースにページを追加しています。

プロダクトのタスク管理
個人のタスク管理
チームの振り返り　などなど…

ページを追加するまでに以下の作業を行う必要があり、少し手間がかかってしまいます。

手順1. Notionを開く
手順2. データベースを探す
手順3. 新規ページを作成
手順4. プロパティを設定

Notionのデータベースにページを追加する方法

手順1〜4を1日に何度も繰り返すうちに、もっと手軽にやりたいと思うようになりました。

これまでに試した工夫

データベースのページ追加を手軽に行う方法を模索してきました。

Alfredを使ってお目当てのデータベースを一発で開けるワークフローを自作したり、Notion API経由で特定のデータベースにページを追加するスクリプトを自作したりしました。
幾分かは楽になりましたが、上記手順4のプロパティ設定を柔軟に行うことができなかったり、自分の中で満足のいく仕組みではありませんでした。

そんな中、Raycastと出会いました。

Raycastのご紹介

RaycastはMac専用のランチャーツールです。

https://www.raycast.com/
Raycast

"モダンなAlfred"という印象で、高機能で動作もサクサク、UIもオシャレです。個人利用なら無料で使えます。Reactで拡張機能を作ることもできます。

RaycastからNotionに接続する方法

1. NotionのIntegration作成

https://www.notion.so/my-integrations にアクセスし、Notionの新しいIntegrationを作成します。
NotionのIntegration一覧ページ
NotionのIntegration作成

Integrationを作成したら、トークンをメモしておきます。

2. NotionのデータベースにIntegrationを招待

Notionのデータベースにさきほど作成したIntegrationを招待します。

NotionのデータベースにIntegrationを招待する

これで、Notion側の準備は完了です。

3. RaycastにNotion Extensionをインストール

次に、Raycast側の設定を行います。ExtensionのStoreからNotion Extensionを探します。

RaycastにNotion Extensionをインストール

画像の通り2種類見つかりますが、今回は Notion という名前のExtensionをインストールします。

4. トークン入力

Raycastで Notion と入力するとさきほどインストールしたExtensionのメニューが表示されます。
RaycastのNotion Extensionを動かす

メニューのどちらかを選択すると、初回実行時にはトークンの入力が求められます。さきほど取得したトークンを入力します。
トークンを入力する

以上で、RaycastからNotionのデータベースにページを作成するための準備がすべて完了です。

デモ

Raycastから個人タスクと振り返りの2つを登録してみました。

登録の様子

データベースのプロパティに合わせて自動的にフォームが切り替わります。

フォームが切り替わる様子

まとめ

Notion + Raycast で手軽にデータ登録

RaycastからNotionにとても手軽にデータ登録できるようになりました。
今後接続先のデータベースを増やしたいときはIntegrationの招待を行うだけでよいため、とても楽に拡張できます。

最後に

Notionを使い倒したい方、ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/


RaycastからNotionのデータベースに手軽にページを追加する方法

<p>こんにちは、クラッソーネでプロジェクトマネージャーをしている田原（<a href="https://twitter.com/shogocat" target="_blank" rel="nofollow noopener noreferrer">@shogocat</a>）です。<br />
オリンピック卓球混合ダブルスの金メダル獲得に大興奮していました。決勝もさることながら、準々決勝の大逆転も感動的でした。</p>
<p>クラッソーネでは、安定したサービス運用を目指してインフラ改善に注力しています。<br />
今回は、今年のはじめに行ったインフラ移行＆デプロイ改善についてお話しします。</p>
<h2 id="%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E7%A7%BB%E8%A1%8C%E5%89%8D%E3%81%AE%E5%95%8F%E9%A1%8C"><a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E7%A7%BB%E8%A1%8C%E5%89%8D%E3%81%AE%E5%95%8F%E9%A1%8C" aria-hidden="true"></a> インフラ移行前の問題</h2>
<p>インフラ移行前のクラッソーネでは以下のような問題を抱えていました。</p>
<ul>
<li>ローカル開発環境、ステージング環境、本番環境が大きく異なる
<ul>
<li>コンテナ化されている環境、されていない環境</li>
<li>ミドルウェアのバージョンや管理方法がバラバラ</li>
</ul>
</li>
<li>デプロイが属人的で、１人のメンバーしかデプロイが行えない</li>
<li>デプロイ時に、サーバーメンテナンス期間を設ける必要がある</li>
<li>サーバが冗長化されていない</li>
</ul>
<p>さらっと書いていますが、本当に本当に大きな問題でした。</p>
<h2 id="%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E7%A7%BB%E8%A1%8C%E5%BE%8C"><a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E7%A7%BB%E8%A1%8C%E5%BE%8C" aria-hidden="true"></a> インフラ移行後</h2>
<p>今回のインフラ移行、デプロイ改善の施策により、現状では以下のようになりました！</p>
<table>
<thead>
<tr>
<th>移行前</th>
<th>移行後</th>
</tr>
</thead>
<tbody>
<tr>
<td>ローカル開発環境、ステージング環境、本番環境が異なっている</td>
<td>構成含め、ほぼ同一に！</td>
</tr>
<tr>
<td>デプロイが属人的で、１人のメンバーしかデプロイが行えない</td>
<td>開発者は全員デプロイができるように！</td>
</tr>
<tr>
<td>デプロイ時に、サーバーメンテナンス期間を設ける必要がある</td>
<td>ダウンタイムゼロに！</td>
</tr>
<tr>
<td>サーバが冗長化されていない</td>
<td>冗長構成に！</td>
</tr>
<tr>
<td>デプロイは週２度程度</td>
<td>日に３〜５度行うようになった！</td>
</tr>
</tbody>
</table>
<h2 id="%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8"><a class="header-anchor-link" href="#%E3%82%84%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> やったこと</h2>
<ul>
<li>EC2 → ECS(on EC2)への移行</li>
<li>CapistranoからCodePipelineへの移行</li>
<li>CronからSheduled Tasksへの移行</li>
</ul>
<h2 id="ec2-%E2%86%92-ecs(on-ec2)%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C"><a class="header-anchor-link" href="#ec2-%E2%86%92-ecs(on-ec2)%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C" aria-hidden="true"></a> EC2 → ECS(on EC2)への移行</h2>
<h3 id="%E6%A4%9C%E8%A8%8E%E4%BA%8B%E9%A0%85"><a class="header-anchor-link" href="#%E6%A4%9C%E8%A8%8E%E4%BA%8B%E9%A0%85" aria-hidden="true"></a> 検討事項</h3>
<p>fargate? on EC2? どっちにするの？<br />
→現状ではまだ不具合調査やスクリプト実行でインスタンスにSSHする必要があることがあり、on EC2を選択いたしました。</p>
<p>ローリングアップデート？ブルーグリーンデプロイ？<br />
→開発環境とSTG環境はローリングアップデートにし、本番をブルーグリーンデプロイとしました。</p>
<h3 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99"><a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h3>
<p>すべての環境をDocker化しました。</p>
<p>実はローカルの開発環境はすでにDockerを利用していたため、STGとPRDでも使えるように変更を行いました。<br />
ビルドしたイメージの時点ではローカル環境、STG環境、PRD環境で差異はなく、起動時の環境変数のみで切り替える形としました。</p>
<h3 id="%E4%BD%9C%E6%A5%AD%E5%B7%A5%E7%A8%8B"><a class="header-anchor-link" href="#%E4%BD%9C%E6%A5%AD%E5%B7%A5%E7%A8%8B" aria-hidden="true"></a> 作業工程</h3>
<ul>
<li>ALBの作成</li>
<li>イメージのビルド</li>
<li>イメージのPush</li>
<li>タスク定義の作成</li>
<li>クラスタの作成</li>
<li>サービスの作成</li>
</ul>
<h3 id="%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D%E3%80%81%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D"><a class="header-anchor-link" href="#%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D%E3%80%81%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> ハマりどころ、工夫したところ</h3>
<p>awsvpcを利用する際に、単一のインスタンスに付与できるIPの数に制限があり複数のコンテナを起動することができませんでした。<br />
これはVPC Trunkingをオンにすることで、制限を緩和することができるようになります。</p>
<h2 id="capistrano%E3%81%8B%E3%82%89codepipeline%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C"><a class="header-anchor-link" href="#capistrano%E3%81%8B%E3%82%89codepipeline%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C" aria-hidden="true"></a> CapistranoからCodePipelineへの移行</h2>
<p>Codepipeline(Codebuild+CodeDeploy)を利用することで、比較的容易にブルーグリーンデプロイが実現できました。<br />
仕組みとしては、ECSデプロイ後に、CodeDeployによってALBのターゲットグループのルールが自動的に書き換えられます。</p>
<h3 id="%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D%E3%80%81%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D-1"><a class="header-anchor-link" href="#%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D%E3%80%81%E5%B7%A5%E5%A4%AB%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D-1" aria-hidden="true"></a> ハマりどころ、工夫したところ</h3>
<ul>
<li>ビルド時の利用するDockerのイメージのアーキテクチャとEC2インスタンスのCPUアーキテクチャが異なっている場合、コンテナが正常に起動しないところがありました。これはインスタンス選択時または、ビルド環境選択時にきちんと同じものを選ぶようにすれば問題ありません。</li>
<li>アセットをCloudFrontから配信するように変更したのですが、ビルドするイメージに埋め込みたくなかったため、ビルドしたイメージを利用してコンパイルを行い、manifestのみ起動時にS3から取得しています。HASH値を付与しておくことにより、ロールバック等を行った際に、どのコンテナがどのマニュフェストを取りに行くべきかを間違えないようにしています。</li>
</ul>
<h3 id="commit_hash%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF"><a class="header-anchor-link" href="#commit_hash%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF" aria-hidden="true"></a> COMMIT_HASHを埋め込み</h3>
<div class="code-block-container"><pre><code>FROM ruby:2.7.3-alpine3.12

ARG COMMIT_HASH
ENV COMMIT_HASH=${COMMIT_HASH}
</code></pre></div><h3 id="%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%9F%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB"><a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E3%81%97%E3%81%9F%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB" aria-hidden="true"></a> ビルドしたイメージを利用して、コンパイル</h3>
<div class="code-block-container"><pre><code>env:
  variables:
    RAILS_ENV: "production"
phases:
  pre_build:
    commands:
      - docker pull ${REPOSITORY_WEB_URI}:latest || true
      - IMAGE_TAG=$CODEBUILD_RESOLVED_SOURCE_VERSION
  build:
    commands:
      - COMMIT_HASH=`echo ${IMAGE_TAG} | cut -c -32`
      - |
        docker build --cache-from ${REPOSITORY_WEB_URI}:latest \
        -t web \
        -f docker/rails/Dockerfile \
        --build-arg COMMIT_HASH=${COMMIT_HASH} \
        .
      - |
        docker run -t --rm \
        -e RAILS_ENV=${RAILS_ENV} \
        web compile.sh
</code></pre></div><h3 id="%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E5%BE%8C%E3%81%ABmanifest%E3%81%ABcommit_hash%E3%82%92%E4%BB%98%E4%B8%8E%E3%81%97%E3%81%A6%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89"><a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E5%BE%8C%E3%81%ABmanifest%E3%81%ABcommit_hash%E3%82%92%E4%BB%98%E4%B8%8E%E3%81%97%E3%81%A6%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> コンパイル後にmanifestにCOMMIT_HASHを付与してアップロード</h3>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">compile.sh</span></div><pre class="language-shell"><code class="language-shell"><span class="token shebang important">#!/bin/bash</span>
<span class="token builtin class-name">set</span> <span class="token parameter variable">-e</span>

bundle <span class="token builtin class-name">exec</span> rails assets:precompile <span class="token parameter variable">--trace</span>

<span class="token function">find</span> ./public/assets/ <span class="token parameter variable">-type</span> f <span class="token parameter variable">-name</span> <span class="token string">".sprockets-manifest-*"</span> <span class="token operator">|</span> <span class="token function">head</span> <span class="token parameter variable">-1</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token parameter variable">-i</span> <span class="token function">cp</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> ./public/assets/.sprockets-manifest-<span class="token variable">${COMMIT_HASH}</span>.json

aws s3 <span class="token function">cp</span> /opt/web/public/assets/.sprockets-manifest-<span class="token variable">${COMMIT_HASH}</span>.json s3://<span class="token variable">${FOG_DIRECTORY}</span>/assets/
aws s3 <span class="token function">cp</span> /opt/web/public/packs/manifest.json s3://<span class="token variable">${FOG_DIRECTORY}</span>/packs/
</code></pre></div><h3 id="%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%ABmanifest%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89"><a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%ABmanifest%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> コンテナ起動時にmanifestをダウンロード</h3>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">entrypoint.sh</span></div><pre class="language-shell"><code class="language-shell"><span class="token shebang important">#!/bin/bash</span>
<span class="token builtin class-name">set</span> <span class="token parameter variable">-e</span>

<span class="token keyword">if</span> <span class="token punctuation">[</span> <span class="token variable">$RAILS_ENV</span> <span class="token operator">=</span> <span class="token string">"production"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">then</span>
  aws s3 <span class="token function">cp</span> s3://<span class="token variable">${FOG_DIRECTORY}</span>/assets/.sprockets-manifest-<span class="token variable">${COMMIT_HASH}</span>.json /opt/web/public/assets/
  aws s3 <span class="token function">cp</span> s3://<span class="token variable">${FOG_DIRECTORY}</span>/packs/manifest.json /opt/crs/public/packs/
<span class="token keyword">fi</span>

<span class="token builtin class-name">exec</span> <span class="token string">"<span class="token variable">$@</span>"</span>
</code></pre></div><h2 id="cron%E3%81%8B%E3%82%89scheduled-tasks%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C"><a class="header-anchor-link" href="#cron%E3%81%8B%E3%82%89scheduled-tasks%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C" aria-hidden="true"></a> CronからScheduled Tasksへの移行</h2>
<p><a href="https://github.com/javan/whenever" target="_blank" rel="nofollow noopener noreferrer">Whenever</a> から ECS Scheduled Tasksへ移行を行いました。<br />
Scheduled Tasksの設定に必要なものは何を（ECSタスク定義)、どのタイミングでという項目のみです。<br />
今回は実際にバックエンドで動かしているDockerイメージをそのまま流用することにしました。</p>
<h2 id="%E3%81%9D%E3%81%AE%E4%BB%96"><a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96" aria-hidden="true"></a> その他</h2>
<p>環境変数はすべてコード管理(taskdef.json, buildspec.yml)しています。シークレット情報はパラメータストアを利用しています。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81"><a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>CodepipelineやECSの仕様理解に時間がかかり移行は大変でしたが、かけたリソース以上の見返りはありました。<br />
ぜひまだ試せていない方はお試しいただけると良いと思います！</p>
<p>実際に環境を構築していく際には、今考えられる限り最新で最強の完璧な構成を揃えることがベストではないことは多く、<br />
むしろ、速度感であったり、チームの力量に合わせたその瞬間でのベターな選択肢しかないことが多いです。<br />
そういったなかで、ではどのタイミングでリファクタリング等改善を行うかというは判断が非常に難しいです。<br />
今回の場合、デプロイ頻度があがらないと事業上の数字にも十分影響があることをステークホルダーの方々へ納得させることができたため実現できました。<br />
みなさんもステークホルダーの方々とバチバチ意見交換して、エンジニアがより住みやすい世界を作れたら良いのかなと思います。</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p>クラッソーネではエンジニアを積極採用中です！<br />
Railsが大好きなエンジニアの皆さんもそこそこ好きな皆さんも、興味を持っていただけたらお気軽にご連絡ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b6dcdcabea19" src="https://embed.zenn.studio/card#zenn-embedded__b6dcdcabea19" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a></p>



こんにちは、クラッソーネでプロジェクトマネージャーをしている田原（@shogocat）です。
オリンピック卓球混合ダブルスの金メダル獲得に大興奮していました。決勝もさることながら、準々決勝の大逆転も感動的でした。

クラッソーネでは、安定したサービス運用を目指してインフラ改善に注力しています。
今回は、今年のはじめに行ったインフラ移行＆デプロイ改善についてお話しします。

インフラ移行前の問題

インフラ移行前のクラッソーネでは以下のような問題を抱えていました。

ローカル開発環境、ステージング環境、本番環境が大きく異なる
  コンテナ化されている環境、されていない環境
  ミドルウェアのバージョンや管理方法がバラバラ
デプロイが属人的で、１人のメンバーしかデプロイが行えない
デプロイ時に、サーバーメンテナンス期間を設ける必要がある
サーバが冗長化されていない

さらっと書いていますが、本当に本当に大きな問題でした。

インフラ移行後

今回のインフラ移行、デプロイ改善の施策により、現状では以下のようになりました！

| 移行前 | 移行後 |
| --- | --- |
| ローカル開発環境、ステージング環境、本番環境が異なっている | 構成含め、ほぼ同一に！ |
| デプロイが属人的で、１人のメンバーしかデプロイが行えない | 開発者は全員デプロイができるように！ |
| デプロイ時に、サーバーメンテナンス期間を設ける必要がある | ダウンタイムゼロに！ |
| サーバが冗長化されていない | 冗長構成に！ |
| デプロイは週２度程度 | 日に３〜５度行うようになった！ |

やったこと

EC2 → ECS(on EC2)への移行
CapistranoからCodePipelineへの移行
CronからSheduled Tasksへの移行

EC2 → ECS(on EC2)への移行

検討事項

fargate? on EC2? どっちにするの？
→現状ではまだ不具合調査やスクリプト実行でインスタンスにSSHする必要があることがあり、on EC2を選択いたしました。

ローリングアップデート？ブルーグリーンデプロイ？
→開発環境とSTG環境はローリングアップデートにし、本番をブルーグリーンデプロイとしました。
事前準備

すべての環境をDocker化しました。

実はローカルの開発環境はすでにDockerを利用していたため、STGとPRDでも使えるように変更を行いました。
ビルドしたイメージの時点ではローカル環境、STG環境、PRD環境で差異はなく、起動時の環境変数のみで切り替える形としました。
作業工程

ALBの作成
イメージのビルド
イメージのPush
タスク定義の作成
クラスタの作成
サービスの作成
ハマりどころ、工夫したところ

awsvpcを利用する際に、単一のインスタンスに付与できるIPの数に制限があり複数のコンテナを起動することができませんでした。
これはVPC Trunkingをオンにすることで、制限を緩和することができるようになります。

CapistranoからCodePipelineへの移行

Codepipeline(Codebuild+CodeDeploy)を利用することで、比較的容易にブルーグリーンデプロイが実現できました。
仕組みとしては、ECSデプロイ後に、CodeDeployによってALBのターゲットグループのルールが自動的に書き換えられます。

ハマりどころ、工夫したところ

ビルド時の利用するDockerのイメージのアーキテクチャとEC2インスタンスのCPUアーキテクチャが異なっている場合、コンテナが正常に起動しないところがありました。これはインスタンス選択時または、ビルド環境選択時にきちんと同じものを選ぶようにすれば問題ありません。
アセットをCloudFrontから配信するように変更したのですが、ビルドするイメージに埋め込みたくなかったため、ビルドしたイメージを利用してコンパイルを行い、manifestのみ起動時にS3から取得しています。HASH値を付与しておくことにより、ロールバック等を行った際に、どのコンテナがどのマニュフェストを取りに行くべきかを間違えないようにしています。

COMMIT_HASHを埋め込み

FROM ruby:2.7.3-alpine3.12

ARG COMMIT_HASH
ENV COMMITHASH=${COMMITHASH}

ビルドしたイメージを利用して、コンパイル

env:
  variables:
    RAILS_ENV: "production"
phases:
  pre_build:
    commands:
      docker pull ${REPOSITORYWEBURI}:latest || true
      IMAGETAG=$CODEBUILDRESOLVEDSOURCEVERSION
  build:
    commands:
      COMMITHASH=echo ${IMAGETAG} | cut -c -32
      |
        docker build --cache-from ${REPOSITORYWEBURI}:latest \
        -t web \
        -f docker/rails/Dockerfile \
        --build-arg COMMITHASH=${COMMITHASH} \
        .
      |
        docker run -t --rm \
        -e RAILSENV=${RAILSENV} \
        web compile.sh

コンパイル後にmanifestにCOMMIT_HASHを付与してアップロード

#!/bin/bash
set -e

bundle exec rails assets:precompile --trace

find ./public/assets/ -type f -name ".sprockets-manifest-*" | head -1 | xargs -i cp {} ./public/assets/.sprockets-manifest-${COMMIT_HASH}.json

aws s3 cp /opt/web/public/assets/.sprockets-manifest-${COMMITHASH}.json s3://${FOGDIRECTORY}/assets/
aws s3 cp /opt/web/public/packs/manifest.json s3://${FOG_DIRECTORY}/packs/

コンテナ起動時にmanifestをダウンロード

#!/bin/bash
set -e

if [ $RAILS_ENV = "production" ]; then
  aws s3 cp s3://${FOGDIRECTORY}/assets/.sprockets-manifest-${COMMITHASH}.json /opt/web/public/assets/
  aws s3 cp s3://${FOG_DIRECTORY}/packs/manifest.json /opt/crs/public/packs/
fi

exec "$@"

CronからScheduled Tasksへの移行

Whenever から ECS Scheduled Tasksへ移行を行いました。
Scheduled Tasksの設定に必要なものは何を（ECSタスク定義)、どのタイミングでという項目のみです。
今回は実際にバックエンドで動かしているDockerイメージをそのまま流用することにしました。

その他

環境変数はすべてコード管理(taskdef.json, buildspec.yml)しています。シークレット情報はパラメータストアを利用しています。

まとめ
CodepipelineやECSの仕様理解に時間がかかり移行は大変でしたが、かけたリソース以上の見返りはありました。
ぜひまだ試せていない方はお試しいただけると良いと思います！

実際に環境を構築していく際には、今考えられる限り最新で最強の完璧な構成を揃えることがベストではないことは多く、
むしろ、速度感であったり、チームの力量に合わせたその瞬間でのベターな選択肢しかないことが多いです。
そういったなかで、ではどのタイミングでリファクタリング等改善を行うかというは判断が非常に難しいです。
今回の場合、デプロイ頻度があがらないと事業上の数字にも十分影響があることをステークホルダーの方々へ納得させることができたため実現できました。
みなさんもステークホルダーの方々とバチバチ意見交換して、エンジニアがより住みやすい世界を作れたら良いのかなと思います。

最後に
クラッソーネではエンジニアを積極採用中です！
Railsが大好きなエンジニアの皆さんもそこそこ好きな皆さんも、興味を持っていただけたらお気軽にご連絡ください。

https://www.crassone.co.jp/recruit/engineer/


インフラ改善しました！第一弾！


こんにちは。クラッソーネでプロジェクトマネージャーをしている田原（@shogocat）です。
最近ケーブル配線トレーやケーブルホルダーを購入し、机周りの配線をスッキリできたので気分が上がっています。

皆さま、今話題のNotionというツールをご存知でしょうか。

https://www.notion.so/

Notion

ドキュメント管理やタスク管理など、あらゆることを1つのアプリで行える夢のようなツールです。
利用者は世界で1,000万人を超えていて、日本でも続々と企業で導入されています。
（参考: Notion ユーザー事例）

2021年、Notionは2つの大きなアップデートが予定されています。API公開と日本語化です。
先月5月、待望のNotionのAPIが公開されました。

そこで今回は、NotionのAPIを実際に触ってみて、SlackとNotionを連携する仕組みを作ってみました。

NotionのAPI

NotionのAPI公式情報はこちらに載っています。

https://developers.notion.com/

Notion API

APIを通してページの追加やデータベースのコンテンツ追加などができるようになります。

ナレッジマネジメント

API活用の話に入る前に、ナレッジマネジメントについても少しお話しします。

企業の生産性を高める手法として、ナレッジマネジメントはとても重要です。

> ナレッジマネジメント（英語: knowledge management）とは、企業が保持している情報・知識と、個人が持っているノウハウや経験などの知的資産を共有して、創造的な仕事につなげることを目指す経営管理手法。 Wikipedia

個人の持つ暗黙知を形式知に変換することで業務の属人化を防いだり、ナレッジを共有することで業務の効率化に繋がるといったメリットがあります。
昨今のリモートワーク環境において、ナレッジマネジメントの重要性はますます高まっていると言われています。

フロー情報とストック情報

ナレッジマネジメントに関連して、「フロー情報」「ストック情報」というキーワードにも触れておきます。

フロー情報：流れ去ってしまう情報
ストック情報：蓄積される情報

例えば、業務の中でわからないことに遭遇した場合、Slackで誰かに聞いて解決することがよくあるかと思います。
Slack上のやり取りはフロー情報のため、情報が流れていってしまいます。
情報が流れてしまった結果、時間が経ってから再度同じ問題に遭遇してわからなくなったり、別の人が同じ質問をしてしまうことはあるあるだと思います。
そうならないために、知見を適切にストック情報へと変換させることが重要です。

https://twitter.com/shogocat/status/1372466683453997058

Slack上のフロー情報をNotionにストックする仕組みを作る

さて、ここからが本題です。
今回、Slack上でやり取りした情報（フロー情報）をNotionの社内FAQ（ストック情報）に蓄積するための仕組みを作ります。

全体像

[手順1] NotionにFAQデータベース作成

Notion上でFAQのデータベースを作成します。
プロパティとしてQuestion, Answerを含めておきます。

社内FAQ

後で必要になるので、データベースのIDを確認しておきましょう。
データベースの右上メニューからCopy linkを押します。

データベースのURLをコピー

取得したURLの内、notion.so/と?v=の間の文字列がこのデータベースのIDとなります。

データベースのIDを確認

[手順2] NotionのIntegration作成

NotionのSettings & Membersを開き、左下のIntegrationsメニューからDevelop your own integrationsを押します。

設定画面

ブラウザでIntegration管理画面が開かれたら、New integrationから新規作成します。

Integration新規作成

NameにIntegrationの名前（今回は「StockKnowledge」としました）を入れ、Logoに画像をアップしてから画面右下のSubmitを押します。

Integration作成

これでIntegrationの作成が完了です。
画面に表示されるトークンは後ほど使用します。

トークン

[手順3] Integrationの権限設定

Integration経由で更新したいページ（今回は「社内FAQ」ページ）の画面右上にあるShareボタンを押し、Inviteボタンを押します。

シェア

手順2で作成したIntegrationを選択し、Inviteボタンを押します。

招待

Share対象にIntegrationが含まれていたら、権限設定完了です。

シェア完了

[手順4] Googleスプレッドシートを用意

SlackとNotionの中継地点として、スプレッドシートを用意します。
1行目にquestion, answerという見出しを付けておきます。

Googleスプレッドシートを用意

[手順5] Slackワークフローを作成

Slackワークフローを作成し、スタンプが押されたら情報をスプレッドシートに情報を溜めるようにします。

ワークフロービルダーを作成します。

ワークフロービルダーを開く
ワークフロー作成
ワークフローに名前を付ける

ワークフローを開始する方法を選択します。今回は絵文字リアクションをトリガーにします。

ワークフローを開始する方法を選択
絵文字リアクションを設定

ワークフローにその後のステップを追加していきます。
スレッドにカスタムフォーム送信、スプレッドシートに行を追加、スレッドにメッセージを投稿という流れにします。

スレッドにカスタムフォーム送信
スプレッドシートに行を追加
スレッドにメッセージを投稿

最終的に、このようなワークフローが出来上がります。

ワークフロー完成

[手順6] Google Apps Scriptを作成

手順4で作成したGoogleスプレッドシートに新しい行が追加されたらNotionのデータベースにデータを登録するGoogle Apps Scriptを作成します。

Google Apps Scriptを作成

function myOnEdit(e) {
  const mySheet = SpreadsheetApp.getActiveSheet();
  const latestEntryRow = mySheet.getLastRow();
  const question = mySheet.getRange(latestEntryRow, 1).getValue();
  const answer = mySheet.getRange(latestEntryRow, 2).getValue();

  const payload = createFaq(question, answer);
  postNotion(payload);
}

function postNotion(payload){
  const MYNOTIONTOKEN = "手順2で取得したNotionのInternal Integration Tokenを入れる";
  const url = "https://api.notion.com/v1/pages";
  const options = {
    "method" : "POST",
    "headers": {
      "Content-type": "application/json",
      "Authorization": "Bearer " + MYNOTIONTOKEN,
      "Notion-Version": "2021-05-13",
    },
    "payload" : JSON.stringify(payload)
  };
  UrlFetchApp.fetch(url, options);
}

function createFaq(question, answer) {
  const DATABASE_ID = "手順1で取得したFAQのデータベースIDを入れる";

  payload = {
    "parent": {
      "databaseid": DATABASEID
    },
    "properties": {
      "Question": {
        "title": [
          {
            "text": {
              "content": question
            }
          }
        ]
      },
      "Answer": {
        "rich_text": [
          {
            "text": {
              "content": answer
            }
          }
        ]
      }
    }
  }
  return payload;
}

スクリプトが完成したらトリガーを設定します。

Google Apps Scriptのトリガー設定

これで全ての準備が完了です。

デモ

デモ

まとめ

NotionのAPIを活用して、Slack上でのフロー情報をNotionの社内FAQにストックする仕組みを作ることができました。
Slackで会話した内容をその場でNotionに蓄積することができるようになりました。

NotionのAPIを活用してどんなこと実現できるのか、今後もアイデアを膨らませて楽しみたいと思います。

最後に

Notionを使い倒したい方、ナレッジマネジメントが大切だと感じる方、ぜひクラッソーネで一緒に働きませんか。

https://www.crassone.co.jp/recruit/engineer/


NotionのAPIを使ってSlack上のフロー情報をストックする仕組みを作ってみた

こんにちは。クラッソーネでプロジェクトマネージャーをしている田原（@shogocat）です。
来年2022年に発売予定のスプラトゥーン3が楽しみすぎて、日々ワクワクした気持ちで過ごしている今日この頃です。

昨今、リモートワークを導入する企業が増えていますね。
日本CTO協会が発行しているDX Criteriaでも、リモートワークを活用する考え方が浸透してきていると述べられています。

クラッソーネでは2020年3月からリモートワークが導入され、1年が経過しました。
開発チームのすべての業務をリモートで行っているため、まだ実際に会ったことがないメンバーもたくさんいます。

今回、開発チームのメンバーがどのような環境でリモートワークをしているのか、インタビューしてみました！
1人目: 仕事のお供にモンスターエナジー

市川さん_デスク

1人目は、今月ジョインしてくれた市川さん。
2週間前までは前職の会社に毎日出社していたため、突然のフルリモートに若干戸惑っている様子もありましたが、気分転換に散歩するなど試行錯誤中とのことでした。

こだわりポイント
「ドラえもん500円玉貯金がこだわりです。」

イチオシアイテム
「モンスターが美味しくて、癖になります。」
リモートワークについて思うこと
「起きてすぐ仕事できるのが嬉しいです。」

今後自宅環境をこうしたい
「座り心地が良い椅子が欲しいです。」

2人目: カービィでラバーダッキング

五十嵐さん_デスク

2人目は、クラッソーネ開発チームの歴が一番長い五十嵐さん。
カービィのぬいぐるみがかわいいです。

イチオシアイテム
「カービィのぬいぐるみ。ラバーダックに最適です！」
※ラバーダック・デバッグとは、ゴム製のアヒルの人形（ラバーダック）に話しかけるように、今やっていることを言葉にして口にすることで問題の本質に気付きやすくするデバッグ手法です。参照: Wikipedia

リモートワークについて思うこと
「イヤホンをずっとつけながら作業をしているので耳が痛くなりがち。
生活音が気にならない独立した部屋で作業したい。」

今後自宅環境をこうしたい
「配線が汚すぎるのでいつか整理したいです(いつか)。」

3人目: スマホを視界に入れないように工夫

山口さん_デスク
山口さん_椅子

3人目は、アメフトも開発も全力投球の山口さん（@yamat47 ）。
部屋がとても綺麗で、性格が表れていますね。

こだわりポイント
山口さん_こだわり
「集中を切らさないために、私物のスマホは視界に入れないようにパソコンの裏に置いています。
視界に入るだけで気になって仕方なくなる、みたいな話を『スマホ脳』という本で読んで以降実践しています。
仕事中はスマホをスピーカーに直接繋いで、音楽をかけるためだけに使っています。」

イチオシアイテム
山口さん_イチオシ
「このマイクです。
単一指向性のマイク & いい感じのスピーカーという構成にすると、直接会って話しているのとだいぶ感じが近づいてくるので快適です。

音質は聴いている側になったことがないのでわかりませんが、同僚の話を聞くと問題ないとのことでした。」

リモートワークについて思うこと

「自分好みの環境に整えられるというのは大きなメリットだと思いますが、一方で環境を整える責任が自分に100%かかってくるのはデメリットでしょうか。
例えば複数の機材を買ってどれがいいか試す、みたいな最適化は個人では（お金・時間の両方の面で）しづらいと思っていて、そういう意味でここまで準備するのは大変でした。

ずっと自宅で仕事をするのは閉塞感がすごいので、雑談する時間を増やしたり意識的に外に出かけたり、たまには外出して自宅ではないところで仕事をするみたいなことをして日常にスパイスを効かせなくちゃかなとは思ってます。」

今後自宅環境をこうしたい
「ちゃんとした分離キーボードを買いたいなと思ってます。

1DKに住んでいますが部屋のインテリアを仕事環境に全振りしているので、人を招いてもてなすのが全然できない状態です。
次に引っ越すときは仕事部屋っぽいところを作れるといいなと思っています。」

4人目: モバイルモニターでコワーキングスペースでも快適作業

永元さん_デスク

4人目は、クラッソーネ開発社員第一号の永元さん。
子育てしながら開発業務をこなされていて、自宅とコワーキングスペースを上手く使い分けているとのことです。

イチオシアイテム
永元さん_イチオシ
「モバイルモニターです。
バックに入れて持ち歩けるので、コワーキングスペースでもデュアルディスプレイ環境で作業できる。値段もお手頃。」

リモートワークについて思うこと
「育児面ではメリットが大きいが、セルフマネジメントが難しい。」

今後自宅環境をこうしたい
「腰に優しい環境を作りたい。」

5人目: ゲルクッションで体の負担を軽減

菅野さん_デスク

5人目は、豊富な知識と経験でマルチに活躍している菅野さん。
本棚の中身もとても気になります。

こだわりポイント
「MacBookスタンドを使っているので、ジュースがこぼれても大丈夫。」

イチオシアイテム
「普通のクッションの下にゲルクッションを敷いて使っているのですが、長時間座ってても本当にお尻が楽になります。」

リモートワークについて思うこと
「夕食を家族で食べれたり、作業に集中できたりとメリットが圧倒的に大きいので、ぜひ今後も続けたいです。
私の場合は通勤がなくなったことで文庫本や新書などのコンパクトな本を読む時間が減ったので、そこはデメリットかも。」

今後自宅環境をこうしたい
「デスクの幅や奥行きがボトルネックなので大きなデスクに買い換える予定。
ただ、そうなると部屋の広さが…。」

6人目: カーテンの開閉まで自動化

石原さん_デスク

6人目は、Railsをバージョン1.1の頃から使いこなしている石原さん（@jishiha ）。
1つ1つのアイテムにこだわりが見られます。

こだわりポイント
石原さん_こだわり
「一時期首が慢性的に痛かった時期があったため、ディスプレイの高さをMac miniなどで調整し、マイクロソフトのErgonomicキーボードを使い、IKEAで購入した昇降式のデスクでスタンディングで作業していました。
デスクの上げ下げが手動で面倒になり、今は専ら座って作業しています。首はすっかり良くなったので、キーボードを他に変える勇気はありません。
首、足腰、手首、指はエンジニアにとって大事です。

Zoom、Discord主体の開発作業なので、骨伝導イヤフォンのAfterShokz OpenCommは重宝しています。
長時間使っているとすこしこめかみが気になるのでAirPods Proと併用しています。」

イチオシアイテム
石原さん_イチオシ
「Switch Bot カーテンです。
エンジニアは自動化命。Switch Bot カーテンのスケジュール機能を使って、デスクのすぐ横の窓のカーテンを自動で開け閉めするようにしました。
昨年買ったものの中でこれが一番良かったものです。
カーテンを明け閉めする時間 x 365日 x ?年 得しました。」

リモートワークについて思うこと
「移動時間がないのがメリット。

デメリットは、それにより運動不足になること。
Miバンドというスマートバンドで歩数を計測し、毎日少なくとも8000歩は歩くようにするなど、意識して注意するようにしています。

トータルでは快適なのでずっと続けたい。」

今後自宅環境をこうしたい
「あらゆるものを自動化したい。
エアコンのオンオフの自動化、電気料金を考慮して強弱を自動調整、できれば、CO2センサーで二酸化炭素濃度を計測して窓の開け閉めも自動でおこないたい。」

7人目: オンライン会議を少しでも快適に

田原さん_デスク
田原さん_椅子

最後7人目は、私の作業環境です。

こだわりポイント
田原さん_こだわり
オンライン会議を毎日するため、少しでも会議参加者のストレスを軽減したいなと思ってWebカメラとマイクを導入しました。

1年間のリモートワーク生活の中で色々と試してきました。
Webカメラは安価な製品をいくつか試した後、今のカメラにたどり着きました。
マイクもAirPods Proやダイナミックマイクを試した後、今はコンデンサーマイク+ノイズキャンセリングアプリケーションKrispを使っています。Krispは家の前を走る救急車のサイレンまでかき消してくれるので、とても重宝しています。

イチオシアイテム
田原さん_イチオシ
写真の黒いパームレスト、HyperX Wrist Restです。
元々キーボードサイズのパームレストは使用していましたが、トラックパッド操作時も手首の支えが欲しいなぁと思って長めのパームレストを導入しました。
柔らかい素材なので手首が楽です。キーボード-トラックパッド間の手の移動も、手を横に滑らせる感覚で楽に移動できます。

リモートワークについて思うこと
自宅大好き人間なので、外に出なくて良いというのが何よりも快適です。
オンライン会議では、画面共有機能を使うことでむしろオフラインよりも会議の質が上がったように思います。紙や遠くのモニターを眺めながら参加するよりも深い議論ができていると思っています。

今後自宅環境をこうしたい
今はリビングに机を置いて作業していますが、理想としては自宅にヤマハの防音室が欲しいです（半分冗談です）。
ウルトラワイドモニターも気になっています。

まとめ
リモートワーク環境から、1人1人の個性とこだわりが見えてきました。
カービィでラバーダッキング、カーテンの開閉まで自動化など、ぜひ真似してみたいなと思いました。

今回は、開発チームに絞ってお伝えしました。
開発チーム以外では、
バランスボールに乗って仕事している
加湿器にヒノキのアロマを入れている
など、各自が快適に仕事に取り組める環境づくりにこだわっているようです。
開発チーム以外の様子は全社ブログで紹介されるかもしれません。乞うご期待です。

最後に
リモートワーク環境にこだわっている方、
あるいはこれからリモートワークを始めてみたいという方、
ぜひクラッソーネで一緒に開発しませんか。

https://www.crassone.co.jp/recruit/engineer/


クラッソーネ開発者ブログ

田原聖悟が執筆した記事

LT会（ライトニングトーク会）の紹介

3ヶ月間の育児休業をいただきました

ChatGPTに教えてもらいながら素人が1時間でChrome拡張機能を作った話

Notionで翌営業日の議事録ページを自動生成する方法

Notion風UIでサクサクフォームを作れるTallyがすごい！Googleフォームと比較してみました。

『チームトポロジー』から学んだ組織設計 #ちいとぽ

RaycastからNotionのデータベースに手軽にページを追加する方法

インフラ改善しました！第一弾！

NotionのAPIを使ってSlack上のフロー情報をストックする仕組みを作ってみた

みんなのリモートワーク環境

田原 聖悟が執筆した記事

LT会（ライトニングトーク会）の紹介

3ヶ月間の育児休業をいただきました

ChatGPTに教えてもらいながら素人が1時間でChrome拡張機能を作った話

Notionで翌営業日の議事録ページを自動生成する方法

Notion風UIでサクサクフォームを作れるTallyがすごい！Googleフォームと比較してみました。

『チームトポロジー』から学んだ組織設計 #ちいとぽ

RaycastからNotionのデータベースに手軽にページを追加する方法

インフラ改善しました！第一弾！

NotionのAPIを使ってSlack上のフロー情報をストックする仕組みを作ってみた

みんなのリモートワーク環境

田原聖悟が執筆した記事