こんにちは！SREチームの宮原（@TakashiMiyahara）です🙋本日は、「解体工事現場を遠隔で施工管理できる仕組みを構築した」というお話を紹介します。> 国交省が公募した「令和5年度 空き家対策モデル事業」において、当社が提案した「IoTカメラと画像認識AIを用いた空き家解体の施工管理システム」の開発が採択されました。この記事では、その成果を広く一般に公表します。はじめに本日は、「解体工事現場を遠隔で施工管理できる仕組みを構築した」というお話を紹介します。国交省が公募した「令和5年度 空き家対策モデル事業」において、当社が提案した「IoTカメラと画像認識AIを用いた空き家解体の施工管理システム」の開発が採択されました。この記事では、その成果を広く一般に公表します。IoTカメラによる工事現場の様子を定点撮影し、画像データを収集収集した画像データをニアリアルタイムで表示し、モニタリング収集した画像に「不安全な行動」が見つかった場合に、主任技術者に通知モニタリングシステムの画面システム全体の構成は以下の通りです実際の仕組みについては、以下で詳しく紹介します。課題多くの工事を受注するようになったものの、工区ごとの進捗を確認するために、主任技術者のクルーが県内や県境を跨いで移動していました。移動費はもちろん、クルー自身の長時間運転による身体的な疲労も問題となっていました。1級施工管理技師などの高い専門性を持つクルーを、本来の業務ではない移動などの作業に割り当てることは、効率的な業務遂行には逆行していました。仮説と進め方この課題を解決するために、我々SREチームが立ち上がりました。既存の業務フローの問題点を把握し、「工事現場の様子を遠隔で確認できれば、主任技術者のクルーの負担を軽減し、コストも削減できるのではないか？」という仮説を立てました。その下で以下の小仮説を設定し、1週間のスプリントで検証と開発を進めました。IoTカメラが工事現場で一定期間稼働できるかIoTカメラの画像から現場の状況を確認できるか工区ごとの様子を一覧できると便利か「不安全行動」を自動検出し通知することが有効かIoTカメラが有効に機能すれば、主任技術者が現場に足を運ぶ頻度を減らすことが可能です。さらに、オフィスや出張先などから、担当している工区の進捗を確認できれば、現場で作業している職人さんに施工...

自作アプリ作る作る詐欺をしている永元です。Herokuの無料枠が廃止されてから1年以上たちました。今更ながら「とりあえずRailsアプリをデプロイするためのプラットフォームを試そう」と思い立ったので、実際に手を動かしていくつかのプラットフォームを試してみました。選定基準次の前提をもとにプラットフォームを選びました。https://github.com/rails/docked で構築した簡単なRailsアプリをデプロイするリポジトリはGitHubで管理し、そこから容易にデプロイできると望ましい東京（あるいはアジア・オセアニア）に利用可能なリージョンがあるデプロイを試したアプリは下記に公開しています。https://github.com/nagamoto/weblog候補プラットフォーム今回デプロイまで行ったのは次の3つです。RailwayKoyebRender他にはFly.ioも有名で評判が良いようです。デプロイの準備公開しているこのアプリはhttps://github.com/rails/dockedにサンプルとして記載されているアプリを同じ手順で作成しました。docked rails new weblogcd weblogdocked rails generate scaffold post title:string body:textdocked rails db:migratedocked rails serverこれでlocal環境での起動が確認できます。作成したアプリをGitHub上にリポジトリにpushして準備完了です。プラットフォームごとのデプロイRailway公式サイトにチュートリアルまで整備されています。https://docs.railway.app/tutorials/getting-startedCLIでの操作にも対応していますが、今回はWEBアプリのUIからデプロイを試してみました。https://railway.app/newからデプロイ設定ができます。おおまかな手順は次のとおりです。デプロイ方法を選ぶデプロイするリポジトリを選ぶ環境変数設定を行う(スキップ可能ですが、環境変数RAILSMASTERKEYの設定は必要です)環境変数設定画面Railwayにはシンガポールリージョンがあるようです。https://docs.railway.a

こんにちは。田原（@shogocat）です。私の所属するクラッソーネ プロダクト開発部では 週に1回のLT会（ライトニングトーク会） を1年半ほど実施しています。どんな会なのか、ご紹介します。LT会とは"LT" は "Lightning Talk" の略で、短いプレゼンテーションのことです。週に1回、挙手制で発表したい人が自由に発表しています。発表時間は5分です。LT会の主な目的は、チーム内のナレッジ共有です。日々の業務中に発見したこと、頑張ったことなどを発表することで部全体に共有しています。また、ときには自分の趣味について発表したり、トレンドの技術についての発表もあり、部内のコミュニケーション促進にも寄与しています。LT会での発表を受けて新しいツールの導入が決まるなど、実際の業務に直接役立ったケースもあります。発表内容紹介それでは、実際にどんな発表があったか、これまでの発表の中からピックアップしてご紹介します。「GitHub ActionsでER図を更新し、PRに含める」（宮原さん）LT会1Railsのdb/migrate配下に変更があるときにER図を自動作成する方法について。実際にこの仕組みが活躍してくれています。「KA法の実践」（山之内さん）LT会3ユーザー調査での定性情報から本質的なニーズを分析するKA法について。プロダクト改善に役立ちました。「エンジニアこそMakeを使うべき」（田原）LT会2エンジニアは自分でコードを書きたくなりますが、iPaaSを使うのも便利だよという紹介。発表後、Makeを使った自動化が増えました。「ITエンジニアのための正しい手斧の投げかた」（マツモトさん）LT会4エンジニア界隈では「まさかりを投げる」という言葉を使いますが、慣用表現ではなくリアルな斧の投げ方についてのレクチャーをしてくれました。社内の斧投げ経験者がじわじわ増えています。「低カロリー飲料の世界」（永元さん）LT会5市販の低カロリー飲料は種類が少なくて飽きてしまう。だから自分で作ってしまおう！というお話。普段の飲み物の話題で盛り上がりました。「ホレスワビエツに行ってきました」（服部さん）LT会6ポーランド陶器を求めてポーランドの工房に見学に行ってきたお話。実際に手に入れた陶器もとても綺麗でした。最後にクラッソーネに少しでも興味を持っていただけたら、気軽にご連絡ください

こんにちは、20年ぶりの完全新作となった「劇場版 機動戦士ガンダムSEED FREEDOM」を初日に見に行き、テンションが爆上がりしている、SREチームの宮原（@TakashiMiyahara）です。はじめに今回は、Windowsユーザーに特に役立つ情報を共有したいと思います。Windows向けのパッケージマネージャーであるwingetを利用して、「業務に必要なアプリケーションを自動でインストールし受け入れ作業を効率化する」話を紹介したいと思います。wingetとはMicrosoftが開発しているWindows向けのパッケージマネージャーです。wingetはWindows11と最新バージョンのWindows10にバンドルされており、Windowsユーザーであれば、特別な準備は不要ですぐに利用できます。https://learn.microsoft.com/ja-jp/windows/package-manager/winget/サードパーティ製のパッケージマネージャーには、ChocolateyやScoopといったツールもあります。クラッソーネでは、wingetを活用してWindows PCのセットアップを簡易に行っています。wingetを使ってみようwingetコマンドのインストールコマンドプロンプトなどを起動し、下記このコマンドを実行します。winget -vwingetコマンドが見つからない場合は、Microsoft Storeからアプリ インストーラーをダウンロードしインストールします。アプリ インストーラー導入後に、再度winget -vコマンドを実行してバージョン番号を取得できるか試してください。アプリケーションの検索例えばSlackのアプリケーションを探してみましょう。検索する際はsearch コマンドを利用します。以下のようなコマンドを実行し、インストールしたいアプリケーションが存在するか検索できます。winget search "slack"アプリケーションのインストールアプリケーションをインストールする場合はinstall コマンドを利用します。winget install "Slack"複数のアプリケーションを一括でインストールするwingetを利用して任意のアプリケーションをインストールできることがわかりました。PCの交換時などでは、複数のアプ

こんにちは、SREチームの宮原（@TakashiMiyahara）です。最近、山岡家によく通っています🙋今回は、「schemaの変更をトリガーにしてER図を自動で更新する仕組み」について紹介したいと思いますはじめにリレーショナル・データベースを利用したWebアプリケーションを開発していると、ER図が欲しくなりますよね。ER図があることでデータベースの構造を視覚的に把握しやすくなる一方で、人の手で継続的にメンテナンスするのは少々手間かと思います。データベースの構造などに変更があった際に、自動的にER図を更新してくれれば便利なのでは？と考え、クラッソーネで導入してみました。準備今回はRailsアプリケーションを対象としてお話ししたいと思います。トリガーについてデータベースの定義に変化がある場合、Active Recordは db/schema.rb ファイルを更新します。db/schema.rb に変更があるときは即ち、データベースの定義に変化があった時だと判断できます。トリガーは、 db/schema.rb に変化が生じた時とします。ER図の作図についてRubyの世界には、 Rails ERD というパワフルなGemが存在します。https://github.com/voormedia/rails-erdActive Record の組み込みリフレクション機能を使用して、モデルがどのように関連付けられているかを把握してくれます。導入はとても簡単で、Gemfileに以下の内容を追加し、bundle install を行います。gem 'rails-erd'Rails ERD は graphviz を利用しますので、お使いのディストリビューションに合わせてインストールをしてください。apt-get install -y graphviz準備が整ったら下記のコマンドを実行してER図を出力します。ただし、テーブルなどが1つも存在しない場合には出力されません。bundle exec erdGitHub Actionsの作成Rails ERD を利用することでER図が作図できることがわかりました。このままでは、人の手でER図を都度都度更新する必要があります。それですと少し手間がかかりますので、GitHub Actionsを利用して自動化します。ワークフローの作成以下に今回作成し...

Rails7.1アプリを爆速でECSにデプロイするぞ！こんにちは。プロダクト開発部の小木です。今期のイチオシ特撮はウルトラマンブレーザーです。（個人的に冷めがちだった）近年のヒーロー特撮によくあるコレクションアイテム商法を廃した骨太な作品で毎週楽しみに観ています。ところで、去る2023年10月5日にRails7.1がリリースされましたね。7.1からは rails new をするとDockerfileがデフォルトで生成されるようになりました。そこで今回はこれを使ってRailsアプリをAWS Fargateにデプロイしていこうと思います。検証目的なのでデータベースはデフォルトSQLiteで。コンテナもrailsコンテナひとつのみ起動する単純な構成でいきます。RailsアプリについてRailsアプリは docked を使ってセットアップしました。dockedを使うと手元の開発環境にRubyやRailsをインストールせずにRailsアプリを立ち上げることができます。docked rails new myappdocked rails serverアプリケーションが起動できたのを確認後、以下の変更をしました。docked rails g scaffold post title:string contents:text author:stringdocked rails db:migrateRails.application.routes.draw do resources :postsDefine your application routes per the DSL in https://guides.rubyonrails.org/routing.htmlReveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.Can be used by load balancers and uptime monitors to verify that the app is live. get "up" => "rails/health#show", as: :railshealthcheckDefines the root path route ("/

こんにちは。田原（@shogocat）です。今年、第一子の女の子が誕生し、3ヶ月間の育児休業をいただいておりました。育休に向けて会社としてもチームとしても全面的にサポートいただき、とても感謝しています。育休中にどんなことをしていたのか、どんな学びがあったのかを書き連ねてみようと思います。育児休業取得のきっかけ子どもが産まれた直後の大切な時期にしっかりと子育てに関わりたいと思ったのがきっかけでした。第一子ということもあり、子育てのスキルや知識を身につけるための時間が必要だと感じ、育児休業を取得することを決意しました。同じ開発部内に育休取得者がいたこともあり、心理的なハードルはありませんでした。部内で業務の引き継ぎをさせていただき、安心して育休に入ることができました。育児休業中にやったこと、心掛けたこと便利サービスの利用子育てに便利なサービスを使い始めました。ぴよログ：言わずと知れた育児記録アプリウォーターサーバー：すぐにミルクを作れるnosh：ご飯を作る手間が省けるし美味しいトイサブ！：新しいおもちゃと出会えて便利みてね：両親へ写真・動画をサッと共有節約節約も意識するようになりました。夫婦揃ってスマホを格安SIMに切り替えたXプレミアム（Twitter Blue）解約Apple Music解約保険の見直しお店のポイントが貯まるアプリを大量にインストール（薬局、電器屋、…）夫婦間のコミュニケーション改善夫婦で「良いチーム」として子育てをするために、夫婦間のコミュニケーションが重要だと強く感じました。開発チームで実践しているスクラムの要素も少し参考にしながら、コミュニケーションを促進するためにいくつかの工夫をしてきました。Notionを使って夫婦のWikiページを作り、あらゆる情報を1箇所にまとめるようにしました。夫婦Wikiタスク管理ボードを作り、子育ての中で欲しいものややりたいことを書き出すようにしました。夫婦のタスク管理ボード名前決め、保育園探し等の大きなタスクはデータベースを作って乗り切っています。名前決め週に1回情報共有会の時間を設けて、今週のできごとや議論したいトピックについて話し合うようにしています。夫婦の情報共有会育児休業を取得して良かったこと育児にじっくりと向き合う時間をいただいたことで、多少の苦労はありながらも、心穏やかに過ごすことができました。子ども

こんにちは！プロダクト開発部の服部です。最近、実家の近所にお気に入りのパン屋を見つけて足繁く通っています。ハード系のパンも美味しいですが、モッチモチのパンも美味しいですよね。からし明太子を使った“自家製明太子バター”と、クリームチーズをソフトフランス生地で包んでいる「明太フォンデュ」が美味しすぎて病みつきになっています。コンテナクエリとは？CSS のコンテナクエリ（@container）は指定したコンテナサイズに合わせてブレイクポイントを切り替えられる機能です。2023 年 2 月、Firefox がコンテナクエリに対応したことにより、全ブラウザにてコンテナクエリが利用できるようになりました！コンテナクエリ vs メディアクエリコンテナクエリ vs メディアクエリコンテナクエリコンテナクエリは、その要素自体の幅や高さに基づいてスタイルを適用するため、同じページ内の異なるコンテナで異なるスタイルを適用することが可能になります。各コンポーネントが自身のレイアウトを制御できるため、コンポーネントを異なるコンテキストで再利用する場合に非常に便利であり、デザインの柔軟性が大幅に向上します。コンテナクエリ※ ↑ 要素の親コンテナのサイズに応じてスタイルを適用した例。同じページ内でも、container-typeで指定したコンテナサイズ合わせてブレイクポイントを切り替えられている。メディアクエリメディアクエリ（@media）は、全体のビューポート（ブラウザウィンドウ）サイズ基づいてスタイルを適用します。ページ全体で一貫したスタイルを適用するのは容易ですが、個々の要素やコンポーネントに対して異なるスタイルを適用するのは困難です。メディアクエリ※ ↑ viewport のサイズに応じてスタイルを適用した例。同じページ内なので、同じ viewport サイズを参照している。コンテナクエリと React の相性が良いワケコンポーネントベースのライブラリであり、再利用可能な部品として設計されていること： コンテナクエリもまたそれぞれのコンポーネントが自身のレイアウトを管理することを可能にするため、この設計思想に非常に相性が良いです。再利用性が高いこと： React コンポーネントは再利用可能であるため、異なる親要素（コンテナ）に対して異なるスタイルを適用したい場合が多々あります。コンテナク

子供の成長に喜びつつも、自分は成長しているのか？と焦りも覚えながら育児をしている永元です。2022年のほとんどを育児休業するという珍しい経験をしたため、記事に残しておきます。まえがきこれは1年間育児休業をしたエンジニアの所感記事です育児休業中ごりごりにスキルアップ！自作アプリをリリース！のような鉄人の話はありません子供2人の核家族で近隣に親戚なし育児休業開始前出来事・やったこと安定期を過ぎ、出産予定3ヶ月前には会社に連絡・申請を始める。プライベートなことであり、場合によってはセンシティブなことでもあると思い、自分が考える必要な範囲の同僚に伝える。ほぼすべての人に伝えたのはおよそ1ヶ月前。所感事前に連絡したものの、思っていたより伝えるべき関係者が多く、報連相の下手さが出てしまった。育児休業を取得することは本人としてはセンシティブな内容でないので、早い段階でどんどん伝えて、やるべきことをあぶり出した方がもっとよかった。安定期を過ぎたら、変に気を遣わず、仕事で会う人全員に伝えておくくらいで良さそう。育児休業中予想正直少し舐めていた。子供1人の大変さが1なら子供2人なら1.5とか1.7くらいだろうと思っていた。出来事・やったこと感染症の流行で上の子が保育園に満足に通えない時期が2ヶ月程度発生した。上の子と妻は感染。下の子と私が家庭内隔離で感染をなんとか回避できた。感染症が流行している状況では、復職してもろくに働けないだろうことから、育児休業を大きく延長する決断をし、手続きをした。※育児休業の延長終了日の繰下げ(延長)は通常1回に限られており、様子を見ながら少しずつ延長することはできないため。https://elaws.e-gov.go.jp/document?lawid=403AC0000000076分かってはいたものの、子供が0ヶ月〜12ヶ月の間で育児の負担は大きな波があった。授乳頻度が高い時期夜泣き・寝かしつけの負担が大きい時期母乳による免疫が切れてよく病気になる時期はいはいや歩けるようになったばかりで全く目が離せない時期これらの時期は負担が大きく、それらの間に比較的楽な時期があった。楽な時期には自粛中でもできる趣味を楽しんだり、少しはソフトウェアエンジニアリングの勉強をした。HugoやNext.jsで静的サイトを作ってみたり、結局Railsに戻ってきたり、技術のつまみ

こんにちは。田原（@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を使い倒したい方、ぜひクラッソーネで一緒に働きま

こんにちは。田原（@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つ目

こんにちは！SREチームの宮原（@TakashiMiyahara）です🙋本日は、GitHub Actionsのワークフローのトリガーとして、issue_comment を利用したときにハマった話をしたいと思います。きっかけpull requestに「deploy-qa」などのコメントを行った時に、GitHub Actionsのワークフローを実行させ、検証環境の構築を行っていました。（pull request単位の検証環境を構築するお話は、また別の記事で😁）この時に何度コメントを行ってもワークフローが動かず、半日近い時間を溶かしました💦サンプルコードpull requestで、コメントを行った時にPRの番号をechoで出力するワークフローです。on: issue_commentjobs: pr_commented: name: PR comment if: ${{ github.event.issue.pull_request }} runs-on: ubuntu-latest steps: run: | echo A comment on PR "$NUMBER" env: NUMBER: ${{ github.event.issue.number }}pull requestのコメントが作成、編集、または削除されたときにワークフローを実行する場合は、issue_commentを利用します。https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows#pullrequestcomment-issue_comment-%E3%82%92%E4%BD%BF%E7%94%A8github.event.issue.pull_requestの値を利用して、pull requestのコメントかissueのコメントかを判定しています。原因ワークフローをトリガーするイベントがissue_commentのワークフローファイルが、デフォルトブランチに存在しないことが原因でした。解決一縷の望みにすがってTwitterを検索したところ、神速さんのツイートを見つけ、助けられました。大変感謝しています！https://twitter.com/sinsoku_listy/status/134...

こんにちは！SREチームの宮原（@TakashiMiyahara）です🙋本日は、AWS LambdaをTerraformを利用して管理するよ！というお話しです。💡 きっかけクラッソーネのAWS上のリソースは、Terraformを利用してコード化されています。しかしながら、既存のLambda関数は、AWS サーバーレスアプリケーションモデル (SAM、Serverless Application Model)を利用して、開発・運用されています。新しいLambda関数を作成するときに、SAMを利用するか、Terraformを利用するかで悩みました。Terraformを利用して、Lambda関数を開発・運用する知見を得たので、紹介してみたいと思います。Lambda関数で実行する関数の作成> 今回は、Pythonを利用したいと思います。Pipfileの作成Pipenvを利用して関数を作っていきます。Pipenvを利用することで、プロジェクトや関数ごとの依存関係を、仮想環境に閉じ込めることができ、ローカルの開発環境を汚さずに開発が行え、とても開発体験が良いです✨Pipfileに、pytestなど利用するパッケージや、テストやフォーマット用のスクリプトを記述します。[[source]]url = "https://pypi.org/simple"verify_ssl = truename = "pypi"[packages][dev-packages]pytest = "*"pytest-cov = "*"pytest-mock = "*"moto = "*"autopep8 = "*"[requires]python_version = "3.10"[scripts]test = "bash -c \"PYTHONPATH=src python -m pytest --cov --cov-branch --cov-report=html -v\""format = "autopep8 -ivr ."下記コマンドを利用して、必要なパッケージをインストールし、Pipfile.lockファイルを作成します。pipenv install -dLambda関数で実行したい関数の作成次に lambda_handler関数を作成します。今回は、sampleという文字列を返すだけにしてみ...

こんにちは！プロダクト開発部の町田です！私事ですが、沖縄から東京への引っ越しが完了してやっと一息つきました。デスク周りを整理するいい機会なので、新居では FlexiSpot のスタンディングデスクを新調し、4K の縦画面モニターも新しく配置しました。ほんの少しでも開発がしやすくなるといいな〜と思ってる今日この頃です。foreword今回の記事ですが、フロントエンドフレームワークの Sapper(Svelte)で pathpida を使ってみた話をしていきたいと思います。pathpida とはpathpida は Next.js や Nuxt.js や Sapper の内部リンクを取得するためのライブラリです。概要各フレームワークのディレクトリによるルーティング規約に最適化されており、型安全に内部リンクを取得することができます。pathpida を Sapper で使ってみる前述にもある通り、今回は Sapper(Svelte)で pathpida を使っていきたいと思います。Sapper(Svelte)は既にインストール済みの前提で進めます。下記が、執筆時点でのバージョンです。svelte: 0.28.0pathpida: 0.17.0インストールnpm-run-all もインストールします。npm-run-all を導入することで、シンプルな記述で npm-scripts を順次・並列実行できます。特に依存してるわけではないのですが、入れておくと便利です。npmnpm install pathpida npm-run-all --save-devyarnyarn add pathpida npm-run-all --dev開発時に pathpida が動くように設定します{ "scripts": { "dev": "run-p dev:*", "dev:sapper": "sapper dev", "dev:path": "pathpida --ignorePath .gitignore --watch", "build": "pathpida --ignorePath .gitignore && sapper build --legacy", "export": "pathpida --ignorePath .gitignore && sapper export

こんにちは。お盆休みは子ども経由で手足口病にかかり、両手足の指全体に水疱ができて2日ほど寝たきり生活を送っていた小木です。おかげでウォッチリストの消化が捗りました。この歳まで風邪すらまともにかかったことのないのが自慢だったのですが、寄る年波には勝てないのか、それとも保育園経由でかかる病気が強力なのか。。・・・・と、夏の終わりに書いた記事を放置していて今になってやっと整備しました。はじめにさて、前回はAmplifyのマニュアルビルドの方法について調べました。これはAmplifyを既存のCodePipelineに組み込むためでしたが、ではCodePipelineにどうやって組み込めばいいのか。CodePipelineに新たなデプロイアクションを追加し、そこで実行するCodeBuildにてReactアプリケーションをビルドしてあげればなんとかなりそうです。最終的にビルドした生成物をS3にアップロードできさえすればあとは前回の仕組みによってデプロイが完了しますね。CodeBuildとは？AWSの提供するフルマネージドなビルドサービスです。動作環境にDockerイメージを用いることでどんなアプリケーションでもビルドすることが可能です。https://aws.amazon.com/jp/codebuild/ローカルでCodeBuildを試す実運用中の環境でいきなり CodeBuildのリソースを作成するのは気がひけます。なので、ローカル環境でCodeBuildが動くようにして、その中でビルド内容を定義した buildspec.yml の中身を作り込んでいこうと思います。以下のドキュメントを参考にCodeBuildローカルの実行環境を整えます。AWS CodeBuild エージェントを使用してビルドをローカルで実行https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/use-codebuild-agent.htmlReactアプリをビルドしたいので、ドキュメントに記載されているイメージではなくNode.jsのイメージで行いました。https://gallery.ecr.aws/docker/library/nodeビルドに使用するイメージを変えた以外は基本的にドキュメントに記載されている通りの操作です。ビルドに使

こんにちは！SREチームの宮原（@TakashiMiyahara）です🙋本日は、開発環境として、GitHub Codespaces を利用してみたよ！というお話しです。💡 きっかけ先日の「GitHub Universe 2022」の基調講演にて「GitHub Codespaces」が、無料プランの個人ユーザーにも毎月60時間まで無料で提供することが発表されました。これを受けて、「良い機会だし、GitHub Codespacesを会社でも開発環境としてトライアルしてみようか」という話になり、着手しました。https://twitter.com/github/status/1590403103014420481🔍 GitHub Codespacesとは？Codespacesは、GitHubの機能として利用できるWeb IDEおよび仮想マシンです。GitHubのWebページからワンクリックで開発環境を構築し、コードの編集やデバッグなどが簡単に行えます。> https://docs.github.com/ja/codespaces/overview#what-is-a-codespace🏗️ 準備> 💡 Limit spending や idle timeout などは、使用状況に応じて適宜修正してみてください。Limit spendingの設定Unlimited spendingも選択できますが、際限なく料金が発生することを抑制したいので、Limit spendingを選択しています。> ここでは、仮に$5を設定しています。まずは、小さめの金額から始めてみるのが良さそうです。Organization > Settings > Access > Billing and plans > Manage spending limit の中に、Codespacesの項目があります。Limit spendingで設定した金額分利用すると、以下のようなメールが届きます。継続して利用したい場合は、Limit spendingの値を大きくしてみてください。Codespaces Generalの設定Organization > Settings > Code, planning, and automation > Codespaces > General から、Codespaces...

こんにちは！SREチームの宮原（@TakashiMiyahara）です🙋本日は、Classi株式会社さん や メドピア株式会社さん で取り組まれている「整地部」が、クラッソーネにも誕生したよ！というお話しです。🔍 整地部とは？プロダクト開発部の有志が毎週金曜日に集合し、モブプロ形式で以下のような取り組みを実施する活動になります。肥大化したクラスやモデル・コントローラーをキレイに整える業務サポート・効率改善ツールの作成新しくリリースされたSaaSの機能を試してみるこちらの活動は 業務時間中 に実施しています。💡 きっかけ各チームとディスカッションすると、「肥大化したクラス等の見通しが悪く、意図せず破壊的な変更が入りそうで怖い」や「新しい技術を皆で共有したい」など、様々なコメントをいただいたことが、きっかけです。議論しながらコードを修正し、少しずつ僕らのプロダクトをより良いものにできる活動として、晴れて「整地部」爆誕したのであります。🏗️ 進め方クラッソーネでは、以下のよう形で開催しています。開催の通知とお題の募集を行う活動記録用のNotionのページを作成するDiscordに集合実施するお題を決めるドライバーとナビゲーターをアサインするドライバーがエディターを共有開発開始成果物を作成（Pull Requestやドキュメントなど）レビュワーをアサイン振り返りを実施し、活動記録を記入プロダクト開発部へ活動記録を共有解散※ 朝会で①②番を実施し、夕方に③から実施するようにしています。※ ドライバーは挙手制にしています。✏️ 方針成果物を作成するNext Actionを決める上記の2点は、活動記録に記録するようにしています。🗣️ 参加者の声参加した開発チームメンバーから、感想をいただきました。> クラスやメソッドの実装方法で自分の中で特に理由なくNGにしていた書き方が普通にアリなんだということがわかって良かった。他言語版もやってみたい。> 「ここまではベストプラクティス、ここからは好みも入る」みたいなボーダーを参加者で確認し合える点はよいなと感じました。あと楽しかった。> 「私ならこう書きます」的な知見が知れてよかった。JavaScript版もやってみたい。> シンプルに楽しかったですね。コードレビューだと伝えづらい「僕ならこう書く」を伝えあえて、相互理解とか違った...

こんにちは、山口拓弥（@yamat47）です。最近、いまさらながら Netflix の梨泰院クラス にハマっています。勧善懲悪なストーリーはわかりやすく面白いし、見れば見るほどチャミスルが飲みたくなりますね 🍻https://twitter.com/yamat47/status/1586206595842646016さて本日は、最近業務で書いた ActiveRecord の scope の実装の話をします。危うく重大な不具合を含んだままアプリをリリースしそうになったので... 自戒も込めて記事にします...！不具合を含んでいたコードを早速紹介しますサンプルで扱うモデルの説明業務のコードをそのまま公開するのは文脈を伝えづらく難しかったので、この記事ではシンプルなまったく別の状況を扱います。大まかな説明ですが、こんな感じの状況を想定してください：不特定多数とオンライン対戦ができるような SNS アプリ。 ユーザーはギルドに所属することができ、このギルド同士で対戦をする。ユーザーは年齢を登録する必要がある。 また 18 歳未満のユーザーは保護者による同意を必要とする。登場するモデル同士の関連付けはこうなっています：guild has many users.user has many parentalconsentlogs.意図しない挙動の自動テストでの再現を含めて、サンプルコードは公開してあります。参考にしてください：https://github.com/yamat47/activerecord-or-merge-sample問題を含んでいたスコープの実装アプリを利用できるユーザーのリスト、すなわち「年齢が 18 歳以上」もしくは「保護者が同意済み」なユーザーのリストを取得したいとします。いろいろなところで再利用しそうだったため、モデルに scope として実装しました。class User puts User.adultorparentalconsented.tosqlSELECT "users".* FROM "users" LEFT OUTER JOIN "parentalconsentlogs" ON "parentalconsentlogs"."userid" = "users"."id" WHERE ("users"."age" >= 18 OR "pare...

こんにちは、プロダクトマネージャーの山口拓弥（@yamat47）です。しばらく記事を書かないうちに Rails エンジニアから役割が変わっていました。この辺りのことは誕生日に書いた記事に書いているので、よければお読みください：https://blog.yamat47.me/entry/2022/06/02/002443さて、この記事では Ruby 3 から本格的に導入された型解析の仕組みについて書いてみます。ただ 遠藤さんのまとめ記事 をはじめとして型解析自体について解説されたものはすでにありますので、実際に試してみた体験談をまとめてみます。Ruby での型解析って？Ruby は実行するまで型が決まらない、いわゆる動的型付け言語です。しかし TypeScript の流行や Python での型注釈記法の導入をはじめとして、動的型付け言語であっても型検査の仕組みを導入するような動きが活発です。そして Ruby においても、2020 年 12 月にリリースされた Ruby 3.0 にて静的型解析を行う仕組みが導入されました。Ruby の型解析には RBS Typeprof Steep Sorbet というツールが登場します。遠藤さんのまとめ記事からの引用ですが、それぞれの役割はこういったものです：> * RBS: Ruby 3 の型情報を扱う言語を始めとする基盤。Ruby 3 にバンドルされる。> * TypeProf: 型注釈のない Ruby コードを型解析するツール。Ruby 3 にバンドルされる。現状の主機能は Ruby コードからの RBS スタブ生成。> * Steep/Sorbet: Ruby の静的型検査器。型注釈を書く必要はあるが、Ruby で静的型の便利なプログラミング体験ができる。IDE での補完やドキュメント表示も。>> source: Ruby 3の静的解析機能のRBS、TypeProf、Steep、Sorbetの関係についてのノート - クックパッド開発者ブログ今回、自作の Gem について Steep を使った型検査の仕組みを導入してみました。「Ruby の型検査って聞いたことあるけど使ったことないな」という方に参考にしていただけると嬉しいです。自作の Gem に静的型検査の仕組みを導入してみた試してみたライブラリの紹介今回型解析を導入してみ

はじめにこんにちは。年に一度は必ず『惑星のさみだれ』を読み返してそのたびに感涙している小木（@jacoyutorius）です。私の所属する開発チームでは今後開発する施主さん向けの新機能について、Figmaでデザインされたコンポーネントとのシームレスな連携を重視して Reactで実装する方針となりました。そして、そのReactアプリケーションをデプロイするのには AWS Amplify を使うことを検討しています。AWS Amplifyとは？AWS版の NetlifyやVercel といえば早いでしょうか。フロントエンドWebアプリケーションを一撃でデプロイできる仕組みです。デプロイだけでなく、ファイルアップロード や ユーザー認証、地図など、AWSのサービスを簡単にアプリケーションへ組み込むためのライブラリが豊富に提供されています。Amplifyの手動デプロイについてAmplifyの一般的な設定では、Githubリポジトリと接続し、リポジトリへのpushをフックすることで AmplifyによるCI/CDを実行します。本番用ブランチにプルリクエストをマージすると本番環境が自動的に更新される、という感じですね。これ自体はとても便利な機能なのですが、私たちの場合、本番用ブランチをstaging 環境へデプロイし、その後に人手による承認ステージを経てから本番環境にデプロイする、というCodePipelineの仕組みが既に運用されているため、Amplifyのこの便利な機能が逆に邪魔になってしまうのでした。ということで、今回はAmplifyをGithubリポジトリと接続するのではなく、手動デプロイオプションを利用することで既存のデプロイパイプラインに組み込めないか？と思い立ち調査してみました。検証用のReactアプリをビルドまず検証用のアプリをビルドします。手元に AWSが先日公開したCloudscape (https://cloudscape.design/) をざっくり組み込んだだけの Reactアプリがあったのでそれを使っています。$ yarn buildyarn run v1.22.10$ react-scripts buildCreating an optimized production build...File sizes after gzip: 82.61 kB

こんにちは！最近、ランニングを始めた、SREチームの宮原（@TakashiMiyahara）です🙋クラッソーネのIAM周りを整理し シンプルかつセキュア な設計に変更しましたので、こちらをご紹介したいと思います。はじめに以前は環境ごとに開発者用のIAM Userが用意し、それぞれのIAM Userでサインインしていました。また、それぞれのIAM Userに強い権限が付与されていました。課題前述の構成には、以下のような課題があると考えました🙋IAM Userの数が多く、管理・運用が煩雑になりやすいIAM Userの権限が強力であり、秘匿情報が漏洩した場合のリスクが大きい利用者毎にアクセス境界・権限管理が存在せず、意図せず事故が発生するリスクが大きい上記の課題を解決するために、今回実施した変更内容は、主に以下の3点になります。サインイン・アカウントの切り替えを簡単にする必要な人に、必要なだけの権限を付与するIAM Userの数を必要最低限にする進め方IAM周りに大きな変更を入れるため、SREチーム内で設計するだけではなく、AWSのサポート・SAの方に設計や移行手順をレビューしていただき、安全に移行できるように進めました🙋SREチーム内でゴールとなるIAM構成と移行手順を設計AWSのサポート・SAの方に設計と移行手順をレビューレビュー結果を設計と移行手順にフィードバック移行手順に準じて、移行を実施スイッチロールの導入まず、スイッチロールを利用して、必要な環境の必要な権限を委任できるようにしました🙋今回は、読み取り専用・開発用・管理用の権限用のIAM Roleを新規作成しました。ロールの切り替え から利用したいロールへ変更できるようになります。この時に、表示名・色については、各自が自由に設定できます。僕の場合は、以下のように表示名と色を分けています。また、開発環境へサインインした後で、本番環境の必要な権限へスイッチロールも行えるようにしました。これにより、環境を切り替えるために一度サインアウトする必要なくなり、開発者体験が向上します🤩この状態では、誰でも強い権限を利用できてしまうため、権限管理の観点からは好ましくはありません。必要な人に、必要なだけの権限を付与する前述の通り、誰でも強い権限を利用できてしまうため、意図しない破壊的な操作が発生するリスクがあります。ク...

こんにちは。クラッソーネの田原です。最近自宅で猫を飼い始めて、毎日癒されながらリモートワークに勤しんでいます。我が家の猫我が家の猫申し込み受付やアンケート回収のためのフォームが必要になったとき、皆さんはどのように作りますか？あまりフォームにこだわる必要がない場合やスピード優先の場合には、フォーム作成サービスを利用することもよくあるかと思います。有名なフォーム作成サービスとして、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などの外部ツールと連携できます。フォーム

こんにちは、大胸筋の育成に励んでいる、SREチームの宮原（@TakashiMiyahara）です🙋今日は、GitHub Actionsによるtfsecの実行時間を大幅に改善できたTipsを紹介したいと思います。tfsecとは？tfsecは、Terraform向けの静的解析ツールです。実装内容がセキュリティ的にベストプラクティスに沿っているかなどを指摘してくれるため、Terraformでコードを書く方には強く導入をおすすめします。tfsecに関しては、@reireiasさんが詳しく紹介してくれていますので、下記の記事も併せて確認いただければと思います✨https://qiita.com/reireias/items/71671cc516424421f7f3CIで実行するにはtfsecを実行してくれるGitHub Actionsはいくつか公開されております。tfsec-actionsクラッソーネでは、terraform-security-scanを利用して、Pull Request作成時にtfsecを実行していました🙋現在は、tfsec-pr-commenter-actionを利用しています。terraform-security-scanを利用したワークフローの課題terraform-security-scanの実行に90~150秒ほど要していることが、ワークフローの課題になっていました。tfsec-slowワークフローの速度が改善できれば、Pull Requestのコードレビューまでに時間も短縮でき、より早く新しい機能などを開発チームやユーザー様に提供できます。このために、高速化する手がかりがないかActionの実装を調べていました。tfsec-pr-commenter-actionとの出会いふとterraform-security-scanのREADMEを確認すると、以下のようなインフォメーションを発見し、tfsec-pr-commenter-actionの存在を知りました。terraform-security-scan-readme-warningtfsec-pr-commenter-actionは、tfsecを開発・メンテナンスしている Aqua Security社が開発しているActionのようです。tfsecの開発元がリリースしているActionなら、も...

こんにちは、最近 リングフィットアドベンチャー で レベル100 になった、SREチームの宮原（@TakashiMiyahara）です🙋SREチームでは、Terraformによるインフラのコード化を進めています。既存のリソースをTerraform管理下に置く場合は、importコマンドを利用して、リソースの情報をterraform.stateに取り込むことが多いのではないでしょうか。先日、CloudWatch Dashboardのインポート作業中に、awscloudwatchdashboard のドキュメントに不備を見つけ、パッチを送ったところ、初めてマージされました🙌ここでは、パッチがマージされるまでの経緯をお伝えします。発見したドキュメントの不備> terraform import [options] ADDRESS IDimportコマンドは、上記のような構造になっているのですが、ドキュメントの例では ID に該当する箇所が表示されていませんでした。reportanissue報告方法不備を見つけたので、 HashiCorp AWS Provider team へ報告します。Terraformのドキュメントページには、Report an Issueというリンクが用意されています。（ドキュメントページから、Repositoryへの導線が分かりやすくて、とても良い開発者体験でした✨）reportanissue起票したissue実際に起票したissueはこちらになります。https://github.com/hashicorp/terraform-provider-aws/issues/24355New issue > Bug Report を選択して、issueを作りました🙋newissuesbug_reportissueのdescriptionに、本件を修正する場合のdiffを書いていたこともあり、DrFaust92さんから、「PR is appreciated!」というメンションを頂いたので、早速PR作成に取り掛かりました😁作成したパッチ修正対応のPRはこちらです。https://github.com/hashicorp/terraform-provider-aws/pull/24373DrFaust92さん、メンテナーのewbankkitさんにレビュー...

こんにちは、クラッソーネで Rails エンジニアをしている山口拓弥（@yamat47）です。最近 『だから僕たちは、組織を変えていける』 という本を読んだのですが、図表がわかりやすかったり体系化された情報が心地よくて一気に読破してしまいました。その結果チーム作りや個人の動機付けといったトピックへの関心が高まりまくっていて...感想のシェアとか対話とかとってもしたい気分です、「私も読んだよ」という方いればぜひお話しませんか...！https://twitter.com/yamat47/status/1515272560359149569さて今回は、わがままながら最近の私の嬉しかったできごとを共有させてください。2022年4月度の MVV アワード を受賞し、それに関して社内向けにプレゼンテーションをしたので、その辺りの話をお伝えします。「MVV アワード」ってなに？クラッソーネでは、四半期が始まるタイミングで方針を共有するための全社会議（通称クォーターミーティング、QMTG）を行なっています。コロナ禍の前までは全員が名古屋に集まっていたそうですが、最近では Zoom を利用したオンラインでの開催が中心です。この QMTG にて、直前の四半期に会社のミッション・ビジョン・バリューを特に体現していた社員を表彰する機会があります。これを MVV アワードといい、受賞者はその具体的な成果やノウハウを共有することで、他の社員にも知識が広がっていくことを期待しています。（この辺りの詳しいことは以前 Wantedly でまとめた記事がでていたので、よければご覧ください）https://www.wantedly.com/companies/crassone/post_articles/288756#h2-%E2%96%B6mvv%E3%82%A2%E3%83%AF%E3%83%BC%E3%83%89そしてこの度、この MVV アワードに 2022 年 1 月から 3 月の間の実績をもとに選出していただきました！個人で受賞するのは初めてだったので、素直に嬉しかったですね（とっても恥ずかしかったけど）授賞式の様子（授賞式の様子はこんな感じでした）どんなことを評価されたの？授賞式の様子には、私がいただいた表彰状も写っています。これをみると、このようなポイントで私のことを評価してくださって

こんにちは、プロダクト開発部の服部です。初夏を思わせるような陽気が続いていますが、まだまだスギ花粉は飛んでいるようです。今回は、MUI（Material UI v5）の Date Picker を使った日付選択範囲指定の小技を紹介します。やりたいこと実際に業務で「不規則に発生する契約日について、契約日以前の日付へ変更不可の Date Picker カレンダーを実装」というタスクが発生しました。受け取った日付以前が選択不可の Date Picker カレンダーを実装したいと思います。（この記事では、Date Picker API のうち、StaticDatePicker APIを利用しています。）本日が 4 月 18 日で、契約日を直前の金曜日 4 月 15 日であったと仮定すると、できあがったカレンダーのイメージは次の通りです。| 何もしない | 契約日を含めない | 契約日を含める || :---------------------------------------------------------------: | :--------------------------------------------------------------------------: | :---------------------------------------------------------------------: || 何もしない | 4月15日を含めない | 4月15日を含める |契約日を含めない場合（契約日前日までの日付が選択不可）Date Picker は日付ライブラリに依存しているので、今回は「date-fns」ライブラリを利用しました。LocalizationProvider コンポーネントでラップして、AdapterDateFns を設定します。参考：MUI：Date / Time pickersまずは date-fns のpreviousFriday()関数を利用して、契約日である「直前の金曜日」を取得します。previousFriday(new Date());参考：date-fns：previousFridayDate Picker の便利なプロパティー minDate に日付を設定するだけで、契約日前日までが選択不可になります。（本日が 4

まえせつこんにちは、クラッソーネ CTOのマツモトです。好きなザクはMS06R-2です。さて、弊社の開発チームには比較的キャリアの浅めなメンバもいます。そんな彼/彼女たちに読んでおいてもらえると嬉しいなあと思っている書籍を挙げてみようと思います。雑誌の4月号なんかでよくある新人特集みたいな感じですね。選書基準としては、今この瞬間の How to ではなく、知見の寿命が長そうなものとしています。これは余談なのですが、むかしよく勉強会とか読書会とかを主催していた時期があって、その時のコンセプトが「明日の仕事に役に立たない」でした。ベースとしては「仕事でいま必要なことは今すぐちゃんと調べればいいだろ、仕事なんだし」と思うところがあって、「今すぐに役には立たないかもしれないが、N年後にはきっといい影響が出ているはずであろうこと」をテーマに選んだりしていました。（極論すれば「大学の講義と教科書をちゃんと振り返ろう」 みたいになっちゃうんですが。）ので、今回もその傾向が強めです。いろんなほん1. ソフトウェア・ファースト あらゆるビジネスを一変させる最強戦略https://www.nikkeibp.co.jp/atclpubmkt/book/19/P89910/縦書きの本だし、ソフトウェアエンジニアじゃない人向けの一般書ではあるのですが、必要なことが過不足なく書かれておりとても便利です。また、ソフトウェアエンジニアじゃない人がどのような認識をしているかを把握することもできるので、それを勘案してよりわかりやすい伝え方なども考えていけるのではないでしょうか。なお、同書はクラッソーネ社内では、ソフトウェアエンジニア以外の新卒や若手メンバの課題図書的にも扱われています。狭義のコンピュータソフトウェアのみならず、「なにかを実現するためのしくみ」自体がソフトウェアであると言う観点から、「私たちは"顧客に価値を提供するしくみ"というソフトウェアを開発し続ける組織である」と認識しており、そのための理解のためにとても有用だからです。今年も新入社員研修で使ったりしました。https://twitter.com/crassone/status/1511593080595824641?s=202. アジャイルサムライ――達人開発者への道https://shop.ohmsha.co.jp/shopdet

こんにちは。プロダクトマネージャーの田原です。社内の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、ツール、ソフトウェア製品全体など）。コラボレーションは最小限。ファシリテーションモード：あるチーム（通常はイネイブリングチーム）

入社エントリこんにちは。2022年2月末にクラッソーネに入社しました小木と申します。入社してから一月ほど経過し、そろそろ入社エントリでも書き給えと天の声が聞こえてきたのでそろそろと筆を取った次第です。自己紹介など静岡県浜松市在住のアプリケーションデベロッパーです。主な開発言語はRubyとJavaScriptです。Webアプリケーション開発の仕事を初めてそろそろ10年経ちます。その前はSIerで生産管理システムの開発をしていました。プライベートの開発では Vue.js + AWS Amplifyという構成で開発をすることが多いですが、Reactにも少し興味があります。（先日Reactの勉強がてらこういうものを作りました。)https://monitorroom.jacoyutorius.net/正味1時間くらいしかかかっていませんがフッと思いついたアイデアをサクッと実装できると楽しいですね。サブモニターで開いてたまに眺めています。あと、AWS Solution Architect Associate資格を持っています（今年更新...）基本的に浜松市の自宅からリモートで作業をしています。リモートは前職に在籍していた2年ほど前からコロナ禍によって始まりました。通勤が無くなったのは楽なんですが全く家から出なくなってしまったので、週一日くらいはコワーキングスペースなどで仕事をしたいなぁとか考えています。個人的な活動についてHamamatsu.rb、JAWS-UG浜松というITコミュニティのコアメンバーとしてそれぞれ月一回程度の勉強会を開催しています。またシビックテックの活動として地元浜松市の職員の方と連携して浜松市のコロナ対策サイトを構築したりしています。シビックテック活動についてはNHKクローズアップ現代+に取材していただきました。https://www.nhk.or.jp/gendai/comment/0015/topic002.html開発環境について以前のクラッソーネ開発ブログで各メンバーの開発環境が載っていたので、自分の環境も紹介します。小木のデスク机は流行にのってFLEXISPOTです。お昼後の眠気がひどくなる時間帯にスタンディングにして作業をしたりします。キーボードは Keybordio Atreus を使っています。半年以上使っているのですが、キー配列が標準的

こんにちは。クラッソーネでプロダクトマネージャーをしている田原（@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のデータベースにさきほど作成したIntegratio

こんにちは、クラッソーネで Rails エンジニアをしている山口拓弥（@yamat47）です。今年のバレンダインデーは大量のチョコをおともに SUPER BOWL を楽しみました。しびれるシーソーゲームでしたね、とても楽しい試合でした！https://twitter.com/nfl/status/1493057660836462594?s=12さて今日は、私が最近作った Gem の紹介をします。日本の住所を解析していい感じに構造化してくれるライブラリ、JapaneseAddressParser です！https://github.com/yamat47/japaneseaddressparserそのライブラリを使うとどんなことができるの？住所の文字列を入力すると、「都道府県」「市区町村」「町域」の3つを抽出して構造化したデータを返してくれます。例えばこんな感じです：address = JapaneseAddressParser.call('東京都港区芝公園4-2-8')address.class #=> JapaneseAddressParser::Models::Addressprefecture = address.prefectureprefecture.attributes #=> {:code=>"13", :name=>"東京都", :namekana=>"トウキョウト", :nameromaji=>"TOKYO TO"}city = address.citycity.attributes #=> {:code=>"13103", :formattedcode=>"13103", :prefecturecode=>"13", :name=>"港区", :namekana=>"ミナトク", :nameromaji=>"MINATO KU"}town = address.towntown.attributes #=> {:name=>"芝公園四丁目", :namekana=>"シバコウエン 4", :nameromaji=>"SHIBAKOEN 4", :nickname=>nil, :latitude=>"35.656459", :longitude=>"139.74764"}都道府県や市区町村、町域のデータはふりがなの情報も持っています。そこで、こんな感

こんにちは、最近プロダクトマネージャーに入門している宮原です🙋2022年1月から株式会社クラッソーネ プロダクト開発部にJoinしました🙌本エントリでは、SREチーム立ち上げと、その中で大活躍しているGithub Projects（beta）を利用したタスク管理 についてご紹介します。これまで何をしてきたのか> - 学部〜修士：信号処理やComputer Visionを学び、Human Computer Interactionの研究に従事> - 1社目(新卒)：電機メーカー子会社の生産技術部門にて、画像検査やロボット制御などの開発を担当> - 2社目：ヘルステックベンチャーにて、Ruby on Rails で医師向けコミュニティサイトの開発ハードウェア制御やWebアプリケーション開発・インフラ構築などを行なってきました。どんなことをしているのか0→1でSREチームを立ち上げています🙋入社後に行ったこと既存のCI/CDやAWS等のリソースの把握SREチームの開発スプリント決めやカンバン作成SREチームのレビューフローの構築インシデントレベルやオンコール対応フローの検討IaCを実現するためのツール選定プロダクトごとのダッシュボードをDatadogに整備Github Projects (beta)を利用したタスク管理SREチームでは、Github Projects (beta)を利用してタスク管理を行なっています。以下のように、実際の開発ではGithubで完結しております。大枠のタスクをMilestoneに登録細かな粒度のタスクをIssuesに登録しMilestoneと紐付けProjectsにカンバンボードを作成しIssuesを管理Issueに対応するPull Requestを作成Github Projects では行えなかったストーリーポイントの設定や、イテレーションの管理などが行えるようになっており、より便利にGithub上でタスクの進捗管理が行えそうなため導入してみました🙌Field利用できるFieldは、LabelsやMilestoneだけじゃなく、独自のFieldを追加できます。Issueをいつ対応したのかを管理するために、Iteration Fieldを追加してみました。レイアウトをTableに変更ヘッダー右端の+アイコンを選択New fieldを選択...

こんにちは、バックエンドエンジニアの山口拓弥（@yamat47）です。東京をはじめとして、またコロナがどんどん悪い意味で盛り上がってしまっていますね...年末に友人からベンチプレスマシンなどウエイトトレーニング用のセットを手に入れた私には死角はありません、今日も充実したステイホームを満喫しています！自宅のトレーニングセットの写真（寂しい一人暮らしなのでトレーニングしている様子は撮れません、すみません...）さて本日は、昨年末に取り組んだサーバーのレスポンスタイム改善の取り組みについてお伝えします。ありがちな最適化からアプリ特有の事情へのアプローチなど赤裸々にまとめましたので、参考にしていただけると嬉しいです！最適化をおこなったアプリの技術的な前提今回対象にしたのは クラッソーネ というサービスで、Ruby on Rails 製のモノリシックなアプリケーションです。大まかにはこのような技術を組み合わせて動いています：Ruby は 2.7.5（最近 3.1.0 にあげました）。Ruby on Rails は 6.0.2.1。データベースは MySQL 8.0 系を Amazon RDS で利用している。アプリのインフラ基盤は AWS をフルに活用。本番サーバーは ECS と Fargate で運用している。Vue.js や React は利用しておらず、フロントエンドの実装にはせいぜい jQuery や Slim、SCSS を利用しているくらいです。Rails の敷くレールに沿った、昔ながらな構成のアプリケーションです。またアプリは大まかに分けて「施主様が利用する画面」「工事会社様が利用する画面」「運営メンバーが利用する画面」の三つに分かれています。しかしそのほかの機能も含めて、一つの Rails アプリで実装を完結させています。今回はそのうち「運営メンバーが利用する画面」に絞って最適化を行いました。何はともあれ、最適化はうまくいったの？結論、とてもうまくいきました！元々は「めっちゃ頑張って2倍くらい速くなればいいな」と考えて目標を立てていましたが、画面によってはその何倍も速くなるページも...アクセス頻度で重み付けした値を元に計算すると、最終的には 272% の改善ができました！最適化できる余地がたくさんあることはわかっていましたが、それにしてもここまでうまくいくとは

こんにちは！クラッソーネ 採用担当の伊藤です。こちらのブログでは初めまして！ですが、クラッソーネのコーポレートブログではちょこちょこ登場しています。興味ありましたら見てみてください。https://www.crassone.co.jp/blog/いきなり採用担当が登場してきて、何か固いことを書くのかというと、まったくそうではありません。2019年に開発チームが立ち上がり、この2年で10名以上のコアメンバーとなるエンジニアの採用が実現出来てきたのですが、決して採用担当だけで実現できたものではなく、社内エンジニアとタッグを組んで実現できたものでした。今日はその取組みを紹介したいと思います！自己紹介気づけば人事として10年位経験を積んできました。この10年、大手や中小、ベンチャー企業と呼ばれる企業に属し、採用、研修、総務、社内イベント企画等、比較的フットワーク軽く色々やってきました。その中でも得意な領域は採用で、営業、販売、管理部門系職種、クリエイティブ系職種等、一通り採用の経験は積んできた（つもり）です。ただ、エンジニア採用については、リファラルで自然に入社してもらったり、ポテンシャル採用でもOK！というフェーズに属していたため、がっつり開発経験のあるエンジニアを採用するぞ！というのは実ははじめて。私のエンジニアの皆さんに対する理解と言えば・・・エンジニアの人＝黒い画面に英語書いてる人。たまにピンクと青の文字発見。パソコンのこと聞けば比較的みんな答えてくれる。どうやら共通の”言語”があるらしい。色々種類あるけど、宝石の名前？（Ruby、Perlとかのこと）この状態でエンジニア採用担当なんて出来るのだろうか、、、とても不安…当時エンジニアについてあまり理解出来ていなかった私が、（まだまだ駆け出しですが）エンジニア採用担当です！と言えるようになるまで、こんなことをしてきました。これまで人事主体でやっていたエンジニア採用を社内エンジニアと一緒に進めることにした世の中のエンジニアの方が、自分の持ってるスキルを活かし、これから何を実現したいのか？その方の持つスキルや強みを理解し、クラッソーネならどうやって実現できるか、を伝えるにも人事だけでは熱量を持って伝えることが出来ませんし、その人のアウトプットから読み取れるものにも限界が出てきてしまいます。候補者の情報をしっかり読み取り、ク

こんにちは、プロダクト開発部の永元です。クラッソーネではCTIシステムとしてGenesysを利用しており、管理する顧客情報を連携するためにいくらかハマることがありました。将来の自分のためにも記事として残しておきます。CTIとはCTIは、Computer Telephony Integrationの略称です。ざっくり説明すると、所謂コールセンターの業務をサポートするシステムです。詳細に知りたい方はこちらをどうぞ。Genesysとは>従来のコールセンターを劇的に進化させる先進のCTIシステム。それが、ジェネシスのコンタクトセンター・ソリューションです。コンタクトセンター・コールセンターソリューション | オムニチャネル・カスタマーエクスペリエンス | ジェネシス よりGenesysはCTIシステム業界では大手で機能も充実しています。CTIシステムがB向けという性質を持ち、本社がアメリカのサービスなため、大手とは言え日本での認知度は高くなく、公式サイト以外の日本語情報も少ないです。連絡先の扱いGenesysでは「外部の連絡先」という名前で顧客情報を扱います。また、「外部の連絡先」には個人と組織が存在します。エンジニアとしてAPIを扱う都合上、日本語訳より英語で覚えることをおすすめします。外部の連絡先 → external contacts外部の連絡先(個人) → external contacts(contacts)外部の連絡先(組織) → external contacts(organizations): コールセンターのメンバーが内部。電話をかける・かけてくる相手が外部という扱いらしいです。ハマりポイント新しいサービスを利用開始するときは多少ハマるのは当たり前だと思います。ここでは私が特にハマったことを紹介します。公式ドキュメントページの閲覧に少し慣れが必要公式ドキュメントは充実しており、うまく検索できれば目的の情報は見つかります。ただ少し慣れが必要です。公式ドキュメントページはResource CenterとDeveloper Centerと大きく2つに分かれていますが、統一感のあるデザインのため、混同しないように注意しましょう。開発者向けの情報はDeveloper Centerを当たりましょう。Resource Centerの検索ボックスからはサンプルコードなどの

こんにちは、クラッソーネでアプリケーションエンジニアをしている菅野です。もう年末なので今年をふりかえってみると、世界最高の古楽アンサンブルグループであるタリススコラーズの東京公演が今年はスキップされてしまったことが地味に残念でした。隔年で毎回行っていたのですが、ここまでコロナウィルスの影響が続くとは思いもよりませんでした。2023には無事開催されることを願ってます。今回は全社的なデータの利活用の推進を目的に、知識ゼロから学んでいく初心者向けのSQL勉強会をやり始めた話について紹介していきたいと思います。当時の状況・背景弊社では、私がジョインする前から全社的にOSSのMetabaseがBIツールとして活用されていて、開発部門以外でもある程度SQLを使いこなせる方が存在している状態でした。(事業の本格的なデジタルシフトが直近2~3年程度であることを考えると、この点は非常に素晴らしいことだと入社時に感じていました)とはいえSQLを利用して自在にデータを参照できるメンバーは全体からすると非常に限定的で、その限られた方々に各部署からの取得依頼が集中しているという状況になっていました。また私が直近関わっている新規事業の立ち上げ、新規プロダクトの開発に関しては、セールスやCS部門をはじめいわゆる「プロダクトの開発」自体が初めてという方も多く、サービスを開発・改善していくというゴールに向かって諸々のコンテクストを揃えていく必要に駆られていました。SQL勉強会という取り組みの企画そんな状況の中、ひとりでも多くの方がデータに対する解像度を高めて、かつ実際に業務活用していけるように、知識ゼロからSQLを学んでいける場としてこの勉強会をスタートさせました。業務片手間の個人プロジェクトではありますが、以下その企図と経過を含めてあらましを記述していきます。目的当初から以下の3点を明確にゴールとして定めていました。1. セールスやカスタマーサクセスの人も、シンプルな内容であれば分析クエリを自弁できるようになるこちらが第一義的な目的で、クエリ依頼の偏在が解消されるとともに、全社の視点で見てもSQLを多少なりとも扱えるクルーが増えることはデータリテラシーの底上げに寄与しそうです。またこのゴールを念頭に、SQLの細かい構文やデータベースの仕組みなどにはあまり言及せず、あくまでデータの利用者として「大掴

こんにちは！プロダクト開発部の町田です！つい最近 34 インチのモニターや、初のメカニカルキーボードを導入したのですが、快適にレビューやコーディングができており、とても良い買い物をしたと感じてます。コードレビューにおいての運用上の課題突然ですが皆さんはどのようなルールでコードレビューしていますか？また、コードレビューでなにか課題を抱えていますか？私が現在携わってるプロダクトでは２名以上のレビュワーから承認をもらえるとマージできるというルールにしております。私も同僚のコードをレビューしたり、自分が書いたコードをレビューしてもらうことがありますが、レビュー依頼などコードレビューに関連する通知を稀に見落としてしまうことがありました。GitHub のデフォルトの通知であるメールの通知だと気づけずに、確認や返信が遅れて次のアクションに移るまでのタイムロスがあり、小さいですが課題を感じていました。クラッソーネでは、チャットの連携は主に Slack を利用しています。なので今回は、プルリクエスト関連のイベントがある際に Slack に通知することができる Scheduled reminders を利用してみることにしました。Scheduled reminders とはScheduled reminders は設定次第でプルリクエストに関する様々な通知をしてくれる機能です。リアルタイムでの通知に合わせて、プルリクエストのリマインドを複数の時間を指定して設定することができます。Scheduled reminders の使い方では実際に設定してみましょう。Scheduled reminders には２つの使い方があります。それぞれ公式が丁寧なドキュメントを用意しているので参考にしてください。Slack のチャンネルに通知をするhttps://docs.github.com/ja/organizations/managing-organization-settings/managing-scheduled-reminders-for-your-organizationSlack の DM に通知をするhttps://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-user-account

こんにちは、プロダクト開発部の服部です。もうすぐ12月、クリスマスまでのカウントダウンが始まりましたが、この時期の個人的恒例行事はクリスマスシュトーレンの仕込み作業です。8月から赤ワインと蜂蜜に漬けてあるフルーツミックスと自家製マスカットレーズン酵母で今年も美味しいシュトーレンを焼きます！さて、今回の記事ではMUI v5で追加された機能の一部を試すことを目的に、React Hook Formで簡単な商品金額フォームを作ってみたので紹介したいと思います。https://mui.com/完成イメージは次の通りです。商品金額計算フォームMUI v5を試してみたい私が現在開発に関わっているプロダクトではMaterial-UI v4を採用してスタイリングを行っていますが、そろそろMUI v5に移行したいと考えています。v4 -> v5への移行手順が公式サイトで紹介されていました。https://mui.com/guides/migration-v4/MUI v5での大きな変更点MUI v5へのバージョンアップによる大きな変更点のひとつに、v4で一般的だったmakeStylesを使ったスタイリング方法の基本的廃止（引き続き使えるが非推奨）があります。公式ブログ:Introducing MUI Core v5.0 の記事内でも紹介されていますが、styled()を使ったコンポーネントのカスタマイズ方法は引き続き残るようです。import { makeStyles } from '@material-ui/core';import { Box, Button } from '@material-ui/core';const useStyles = makeStyles({ boxStyle: { color: 'white', backgroundColor: 'blue' }});const StyledButton = styled(Button)({ color: 'white', backgroundColor: 'blue'});sx propsMUI v5で登場したsx propsを利用するとほとんどのMUIコンポーネントに直接スタイルを当てることが可能になり、単発で利用したいスタイルでもわざわざmakeStyles使ってスタイルを作る"あの手間"からも開放されそうです

この記事は Ruby on Rails Advent Calendar 2021 二日目の記事です。昨日は kakudaisuke さんの「I18nを使いながらPCでもスマホでも狙ったところでレスポンシブに改行する」でした！https://qiita.com/kakudaisuke/items/afc6e3f1544638812ec1この記事で話すことこの記事では、動画を再生するときの形式の一つである HLS（HTTP ライブストリーミング）について簡単にまとめつつ、Ruby on Rails 製のウェブサイトで実装をするための勘所をお伝えします。HLS って？何が嬉しいの？HLS とは Web 上で動画や音声のストリーミング配信・再生を行なうためのプロトコルの一つです。元は Apple が開発をした形式でしたが、現在は Apple 製品にとどまらずさまざまなデバイス・ブラウザにて利用することができます。HLS を利用した動画の再生は、大まかにはこのような仕組みになっています：配信側は、もとの動画を一定間隔で細かく分割した MPEG2-TS ファイル（.ts）と、その再生順などを記したインデックスファイル（.m3u8）を用意する。再生側はまず .m3u8 ファイルを受信し、その内容に従って順々に .ts ファイルを要求する。そして受信したものから順に再生する。例えばサイトのファーストビューのメインビジュアルとして動画を利用するとき、素朴に MP4 の動画を読み込ませようとするとどうしても FCP スコア が下がってしまいます。そのときに HLS を利用することで再生しながら動画の続きを読み込ませられるようになるため、ページの初期読み込み速度を抑えつつ動画を配信することができます。HLS について、詳しくはこちらのサイトをご覧ください。HTTPライブストリーミングとは？| HLSストリーミング | Cloudflareオンデマンド動画配信を支える技術 - わかる！HLS編 - QiitaFV動画をHLS形式で実装した時の備忘録 | COFUS技術ブログ:::messageこの記事ではいわゆるオンデマンドな動画の配信を対象にしています。ライブ配信は扱っていませんのでご了承ください。:::HLS ってどうやって実装できるの？HLS を使って動画の配信を実装するためには、大

初めまして！21 卒新卒採用でクラッソーネにジョインした山之内です。現在、UI デザイナーとしてプロダクト開発部に在籍しています。UI を取り扱うデザイナーなのでちゃんと実装の能力も身につけたいと思い、現在進行形で React の学習に励んでいます。そんな僕が、React 学習でつまづいた React Hooks を数回に渡って記事化していきたいと思います。今回は初回として React Hooks について解説します。参考教材React を学習するにあたって、教科書にしたのが「基礎から学ぶ React/React Hooks」です。こちら弊社エンジニアの服部麻子さんが著した本になります！基礎から学ぶ React/React Hookshttps://www.amazon.co.jp/dp/B09CP8T4TXReact HooksReact Hooks は React 16.8 で追加された機能になります。そもそも React にはコンポーネントを宣言する記述方法が２種類あります。① クラスコンポーネントclass Sample extends React.Component = () => { render(){ return クラスコンポーネント }}② 関数コンポーネントconst Sample = () => { return 関数コンポーネント}このように、クラスコンポーネントは関数コンポーネントよりもコードの記述量が増加します。また、クラスコンポーネントはthisやbindなどのコードを記述する必要があるので、複雑性も増します。しかし、以前はクラスコンポーネントが主流でした。というのも、クラスコンポーネントは state というものを取り扱うことができるのですが、従来の関数コンポーネントでは state を取り扱うことができなかったからです。しかし、React Hooks の登場により、React Hooks の一つである useState によって state の管理が関数コンポーネントでも実現可能となりました。state や useState は次回の記事で紹介していきたいと思いますので、少々お待ちください 🙇‍♂️Hooks は「〜に接続する、引き寄せる」などの意味を持つ hook in から来ています。つまり React Hooks は関数コン...

こんにちは！はじめまして、プロダクト開発部の町田です！前書きですが、そろそろ秋・冬に向けて衣替えの季節かと思います。沖縄在住の私は日々の気温が未だ 30 度を超えるので衣替えするのはまだまだ先になりそうです(早く冬服着たいな...)さて、今回は私がクラッソーネに入社に至るまでと、クラッソーネに入社して何をしているのかについて書いていきたいと思います！自己紹介まずは私のことを知ってもらいたいので、簡単に自己紹介をします> - 1999 年 9 月 13 日生まれ> - 中学を卒業後に建築業界で働いた後、エンジニアにキャリアチェンジ> - 受託会社を経てクラッソーネに入社クラッソーネに入社する前までは主にTypeScriptを使って Web アプリケーション開発をしてました。少数精鋭で開発をしており、バックエンドからフロントエンド、インフラなど色々な経験をさせていただきました。中卒で建築業界に入り、 IT 業界へキャリアチェンジしたことについては、我ながら珍しい経歴だと思い、面接ではあえて強みとして話題にしてました！エンジニアになる前は何をしていたかエンジニアとしての道をスタートする前は、建設現場で働いておりました。毎日朝 5 時に起きて現場に出発し、現場からの帰りは 21 時以降になることが多く、毎日汗水をたらして働いていたのを今でも鮮明に覚えています。4 年と半年ほど建設現場で働いており、現場での職長も務めるようになった頃に、エンジニアになるきっかけが訪れました。中卒、高卒向けのエンジニアインターンの存在を知人を通して知り、ハードなものづくりから、ソフトなものづくりへの興味が湧いてきたのがちょうどこのタイミングでした。このインターンへの参加が自分の人生の大きなターニングポイントなると感じました。悩んだ結果、建設業の仕事を辞めてインターンに参加すると決意しました。参加資格を得るために現場終わりに日々勉強していたのがとても懐かしく感じます。努力が実ったのか、インターンの参加枠に無事選んでいただき、私のエンジニア人生がスタートしました！クラッソーネに入社を決めたきっかけ入社を決めたきっかけには、大きく３つの理由がありました。１つ目は、自身の建築業界での知見が業務の中で活かせるのではないかと思ったこと解体業界といえど、工事現場で働く環境は変わりません。自身の建築業界での経験

こんにちは、バックエンドエンジニアの山口拓弥（@yamat47）です。ようやくコロナ禍もちょっとずつ落ち着いてきましたね！私は週末は Brandings というチームでアメフトをプレーしていますが、大会の開幕まで一ヶ月を切ってかなり緊張しています...。主将としてのファーストシーズン、なんならコロナが再燃するまでの束の間の期間かもしれないので、雨にも日焼けにも負けず思いっきり取り組んでいます！https://twitter.com/Brandings_team/status/1445237814581284865（写真は一昨年のものですが、寝っ転がっているのが私です）とっても便利な CLI ツール ghqさて、みなさんは ghq という CLI ツールを知っているでしょうか？clone してきたローカルのリポジトリをとってもいい感じに管理してくれるツールで、peco などのフィルターと組み合わせて使っている方も多いと思います。https://github.com/x-motemen/ghqRubyist の皆さんなら gem-src と組み合わせて、bundle install するたびに Gem のソースコードを全部 ghq の管理下に置いていますかね。ちょっとしたデバッグにとても強力なので、もしまだしていない方は gem-src の README や @koic さんのスライドを参考にぜひ一度試してみてください！https://github.com/amatsuda/gem-src@slideshareghq + Alfred = ∞そんな ghq ですが、ランチャーアプリの Alfred と組み合わせて使うとさらに強力なツールになります。Alfred の workflow 機能を使うと「Alfred 起動 → ghq xxx でリポジトリを選択する → すぐに Visual Studio Code で起動」という流れを滑らかに行うことができます。workflow を自前で作ってもいいのですが、私は alfred-workflow-ghq を使っています。最新リリースの ghq.alfredworkflow ファイルをダウンロードして開くだけで使える、とっても手軽なパッケージなのが好きな理由です。https://github.com/jackchuka/alfr

こんにちは、クラッソーネでアプリケーションエンジニアをしている菅野です。10月からワールドトリガー3期のアニメも始まったので充実した生活を送れそうな予感がしてます。さて、弊社もご多分にもれず多くのやりたいことに対してエンジニアのトリオンリソースが全然追いついていない比較的小さな規模の組織です。今回はそんな状況の中オペレーション変更を伴う短期的な仮説検証に早期に対応したという話題で、とある事情から開発なしでアドホックに新規施策のログ蓄積とモニタリングを実現した事例について具体的な手法を交えて紹介していきたいと思います。前提条件(当時の状況)まず前提としてざっと以下のような状況になってます。割とあるあるなんじゃないでしょうか。会社: アーリーステージのスタートアッププロダクト: ユーザーからの申し込みで始まるマッチングサービス注力領域: GMVを高めるための要因分析と仮説検証希望リードタイム: なる早(！)想定リードタイム: 不明 開発チームはスクラムでPBI(タスク)をさばいているため、他タスクの内容・状況によっては依頼したところで相対的に提供時期が遅くなる可能性があったデータ基盤: なし BIツールは全社的に導入しており、参照データはアプリケーションDBのレプリカとなっている私: 別事業の別プロダクトにて専任開発者 対象プロダクトは「自分の庭先」ではないため、知識・コンテクストの面で当然十分にキャッチアップできていない、かつ本件にかかる対応にリソースを割きづらい状態具体的にやりたい施策電話によるユーザーサポートで得られた新設ヒアリング項目をBIツール上でモニタリングして仮説検証を行いたい。つまり素直に要件を検討するとコアとなる申込の周辺データとしてイベントテーブルの新設とそのCRUD操作が必要な依頼であり、かつ短期的な仮説検証に対する開発要求です。したがって役目を果たしたら他の箇所へ影響を残さないように削除できるようにしておく必要もありそうです。先述の状況を踏まえるとこの開発自体のROIはキャッチアップコストも含めてあまり高いものにはならなそうですね。さて、どうやって実現させていくのがいいでしょうか。実際にやったこと今回のケース、結論から言うとサポート用の申込備考欄に所定のCSVフォーマットでテキスト行を入力してもらい、BIツールにてSQLを駆使して擬似的なイベント

※以下、2021 年 7 月時点の内容です。docusign-esign-ruby-client 最新バージョンでは ruby 3.0 で正常に動作します。こんにちは！アナログレコード集めが趣味で、週末は都内のレコード屋をいくつかグルグル徘徊したりするのですが、リモートワークの影響か、体力が極端に落ちてしまって、最近ではレコード屋の階段を登るだけで息切れしちゃいます。プロダクト開発部の市川（@shunta27）です。弊社プロダクトでは、施主と工事会社が契約を結ぶ際にDocuSignというサービスを利用し、電子契約を行なっております。DocuSign を ruby で扱うためのdocusign-esign-ruby-client (Gem)が公開されており、直近の開発で、この Gem を使う機会があり、今回はこの Gem を Rails で利用する際の注意点や工夫した点をお話ししたいと思います。今回docusign-esign-ruby-clientを導入した ruby、Rails のバージョンは以下になります。ruby 3.0.1Rails 6.1.2.1docusign-esign-ruby-client の導入方法そもそもdocusign-esign-ruby-clientはruby 3.0では正常に動作しません。理由は、URI:Moduleのencodeメソッドを内部で使用しているためです。このencodeメソッドなどは RFC に準拠していない動作をしていたためruby 3.0で削除されました。（ruby 2.7まではencodeメソッドをコールすると非推奨として warning が出ます）https://imaizumimr.hatenablog.com/entry/2021/01/01/141154https://github.com/ruby/uri/pull/9なので、削除されたencodeメソッドなどを利用している箇所にモンキーパッチを当てる必要があります。モンキーパッチを当てる方法はいくつかあると思いますが、今回は、以下のように適用しました。モンキーパッチを当てるためのinitializerを用意Rails 起動時にパッチファイル(lib/monkeypatches/docusignesign_ext.rb)を読み込むDir[Rails.root

こんにちは！ クラッソーネでエンジニアをしている深町です。今年もボジョレー・ヌーヴォーの予約が始まる時期になりました。個人的には日本人醸造家である仲田晃司さんのルー・デュモンが楽しみです。自然派のマルセル・ラピエールやフィリップ・パカレも捨てがたいですね。解禁日は11月の第3木曜日なので今年は11月18日です。お忘れなく！クラッソーネでは、「専門性を発揮しつつもお隣の領域についてもちゃんと知っておいた方がいいよね」ということで、あまり厳密にバックエンド、フロントエンドなどの担当エリアが分かれていません。デザイナーはフロントエンドの実装ができるといいし、フロントエンドエンジニアはデザインやバックエンドのこともわかった方がいい、ということです。さて、今年の４月から山之内君というデザイナーが新卒採用で我々のチームにジョインしてくれているのですが、彼は実装もできるデザイナーになりたい、ということでJavaScriptやReactの勉強を頑張ってくれています。でもプログラミングの勉強を完全に独学でやるのは大変です。そこでサポート活動の一環として７月から「朝練」という活動をしていて、今日はそれについてちょっと書きたいと思います。過去に新人エンジニアの教育みたいなことはちょっとやったことがあるのですが、今回はエンジニアではなくデザイナーという役割の人のトレーニングということで、僕自身も勉強になったことが多いと感じています。こんなことやりましたまずは、簡単にやったことの紹介です。週に１回、月曜日の朝に１時間ほど時間を確保して、その場でやることを決めます。あまり計画性はなくて、とりあえず時間を確保してるのでその時々でやることを考える、というスタンスでした。当然この短い時間でプログラミングの全てを教えるみたいなことは無理なので、自分で勉強してもらう前提で、それを補完するような位置付けです。7月基本的には本人の勉強のペースに合わせていきます。この時点ではドットインストールを使ってJavaScriptの勉強を大体終えて、そろそろReactを学びたいというタイミングでした。Reactへの導入として、ドットインストールで作ったプログラムのいくつかをReactに書き換えてみるということをやってみました。イベントの扱い(onChangeなど)と、Reactでのステート(useStateなど)の考え

こんにちは！はじめまして、プロダクト開発部の服部です。私は元々Webデザイナーとして制作会社やITベンチャー企業で働いてきましたが、数年前に業務でReactスキルが必要になったことをきっかけにフロントエンジニアを目指すようになりました。JavaScriptへの理解不足のままReactの学習を始めてしまったことで（とても！）苦労した経験を元に執筆した著書「基礎から学ぶ React/React Hooks」が発売されました(8/24)。少しでもReact習得に苦戦している人や後輩デザイナーの参考になればとJavaScriptやReactについて学んだことをQiita上で定期的にアウトプットを行っていたところ、出版社に声をかけて頂いたことが出版に至った経緯になります。クラッソーネに入社した今、フロントエンジニアとしてReact、TypeScript、GraphQLなどを利用したアプリケーションの開発に取り組んでいます。2021年6月1日に入社し約3ヶ月経過しました。入社後あっという間の3ヵ月間でしたが、ずいぶん前から在籍しているような気がします。入社を決めた理由さて、この記事では私がクラッソーネへと入社を決めた理由をお伝えしたいと思います。皆さんは増え続ける「空き家」問題をご存知でしょうか？クラッソーネが運営するサービスに「解体工事の一括見積もりWebサービス」があり、社会課題である空き家問題解決を目的としています。「空き家数及び空き家率の推移（総務省：平成30年住宅・土地統計調査）」によると、昭和63年〜平成30年までの過去30年間について空き家は毎年約15万戸ずつ増加しており、2040年には日本の空き家率は40%を超える言われています。住まいとしての役割を終えそのまま放置されてしまうことで、20年後には日本中は空き家だらけになってしまうと予想されています。空き家数及び空き家率の推移画像引用元：平成30年住宅・土地統計調査住宅数概数集計 結果の概要私は現在築15年ほどのマンションに住んでいます。10年先、20年先にこのマンションはどうなっているのだろうか、住人全員が管理費を払っている状態だろうかと心配になります。また離れて暮らす両親が住んでいる実家は間違いなく空き家になってしまうが処分はどうすれば良いのか、思い出のたくさん詰まった大切な家を処分することが出来るのだろうか

こんにちは、バックエンドエンジニアの山口拓弥（@yamat47）です。ここ最近は オクトパストラベラー というちょっと昔のゲームに思いっきりハマっていて、気付いたら100時間以上もやりこんでいました。しかしそれもついにお盆で完結してしまって、なんだか心にぽっかり穴が空いた日々を過ごしています...。https://twitter.com/yamat47/status/1425493827616342017さて今回は、くらそうね開発チームでのRuboCopに関する改善活動の様子をお伝えします。RuboCopの導入以来ずっと放置してしまっていた .rubocop_todo.yml をこの半年で（ほぼ）全て解消したのですが、そのために取り組んできたことをご紹介します！RuboCopと .rubocop_todo.yml のおさらいRuboCop とはいわゆるRubyのリンターです。一度CIに設定しておけば「インデントは揃えてね」といった瑣末なコードレビューをせずとも最低限の質が保たれていくため、Rubyを使っているプロジェクトなら大抵の場合は導入されているのではないでしょうか。RuboCopの便利さの紹介は今回の主題ではないので割愛するとして...RuboCopを導入・運用していく上で大切なファイルの一つが .rubocop_todo.yml です。.rubocop_todo.yml とはRuboCopにおける設定ファイルの一つで、現状のコードが違反してしまっているルール（cop）を無効にすることができます。ただしあくまでも「Todo」なので、ルール自体を利用しないというよりは「後で直すよ」というニュアンスを含んだ無効の設定です。RuboCopを導入するタイミングでいきなり全てのルール違反に対応するのはとても大変です。gem install rubocop をしたらまず最初に rubocop --auto-gen-config をして、現状の違反は全て無視する = 今後のファイル変更だけチェックさせるように設定することも多そうです。くらそうね開発チームとRuboCopの出会いくらそうね開発チームでは2019年12月20日にRuboCopを導入しました。rails new をしたのがその年の5月8日でしたので、半年以上経ってから使い始めたことになります。私が入社する前の話な

こんにちは、クラッソーネでプロジェクトマネージャーをしている田原（@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でも使えるように変更を

こんにちは！はじめまして、プロダクト開発部の市川です。2021 年 4 月にエンジニアとして入社し、約 3 ヶ月ほど経ちました。入社後、すごい勢いで月日が流れていることに驚いてます。業務内容が充実しているからだと思いますが！また、完全フルリモートで働くのは初めてでして、毎日楽しく開発してます。一緒に働いている開発メンバーのリモート環境が充実しててびっくりしました！弊社開発チームのリモート環境について詳しく知りたい方はこちら:https://tech.crassone.jp/posts/remote-work-styleさて、今日は入社エントリを少々勇気出して、書いてみたいと思います。どんなことしてきたの？エンジニアとして働き初めて 6 年ほどになります。大学院卒業後、新卒カードを捨て 2 年間ほど、音楽活動と称してフリーター活動などしてました。音楽だけでは生きていけないと感じ就職することを決意、システム受託開発会社に入社し、主に php を使って Web アプリケーション開発してました。0 からシステム開発する機会が多く、未経験ながらたくさんのことを学ぶことができました。その後、特に服とか好きでもないのですが、アパレル系 EC サイトを開発、運用する企業に転職しました。少数精鋭で開発を行っており、バックエンドからフロントエンド、インフラ、保守運用まで一通り経験してきた（つもり）です。クラッソーネ入社前の直近までは、医療系ベンチャー企業にて、外国のエンジニアとシステム開発行ったりしてました。なぜクラッソーネを選んだのか入社前のカジュアル面談、選考フローにて、何度かお話しした中、開発メンバーの雰囲気の良さ、解体工事会社向けといった他に類を見ないプロダクトやサービス、今しか味わえなさそうな成長ができそうと感じたからです。スタートアップとしては、平均年齢も高め？な感じで、ある程度落ち着いて開発に取り組める雰囲気もあります。また、成熟したメンバーが多く、色んなことへの挑戦を推奨する文化でもあり、提案した内容や、やりたいことに対して、頭ごなしに否定されるようなこともありません。「心理的安全性」の高い職場環境ではないかと思います。どんなことをしているのか工事会社向けの業務支援を行うためのサービスを開発をしてます。バックエンド(Ruby on Rails)、フロントエンド(Reac

こんにちは、クラッソーネでエンジニアをしている菅野です。ここ数日Kindleにて『鬼滅の刃』を一気読みしたので、これで世間の話題にもなんとかついていける気がしてます(遅)私はここ数ヶ月ほど新規プロダクトの開発に関わっているのですが、まっさらな開発プロジェクトということもあり、概ねゼロベースの技術選定を行なっていました。その過程で ADR という手法を用いて技術的な意思決定に関するドキュメントを残す取り組みを行なってきたので、本エントリでは弊社での事例を紹介できればと思います。ADR is 何？Architectural Decision Records の略で、アーキテクチャ上の意思決定についてその背景や・経緯も含めて書き記して言語化しておこうというドキュメントとその手法を指します。現時点でADR自体には明確にこれという形式・フォーマットが規定されているわけではないようですが、中でも Lightweight Architecture Decision Records というタイプが過去にTechnology Raderで Adopted になっていて、一定の権威付けがされているようです。Lightweight Architecture Decision Recordsについて以下の5つの項目で構成される軽量なADRフォーマットで、わたしたちのチームでもこちらを採用しています。title (タイトル)status (ステータス)context (コンテクスト)decision (決定)consequences (結果)参考Architectural Decision Records | adr.github.ioLightweight Architecture Decision Records | Technology Radar | ThoughtWorksDecision record template by Michael Nygard | Github弊プロジェクトでの事例さて、ここからは実際に試してみた経過を事例としてお伝えしていきたいと思います。位置付けとその狙いまず、当社におけるADRの運用ですが、「アーキテクチャ上の」要素に限らず、プロジェクトに関わるあらゆる技術的な意思決定や利用ツールの選定を対象としました。そのためリポジトリ内ではなく、全社で管理し

こんにちは、クラッソーネの深町です。春に仕込んだいちごウィスキーがいい感じに仕上がってきました。今年こそは梅酒にも挑戦しようと思っています。去年はコロナのゴタゴタですっかり忘れてしまっていたのですが、今年は 10 種類以上のスピリッツを用意して準備万端です！さてさて、クラッソーネでは現在、新しいプロダクトを開発中です。できるだけモダンな技術を活用してみようということで、React と GraphQL を使って開発を進めております。この記事では、GraphQL の fragment と自動生成された TypeScript の型を使って安全かつ便利に GraphQL アプリケーションを構築する方法をご紹介します。fragment と型GraphQL の fragment は、クエリのレスポンスに含めてほしいフィールドの集合を「再利用可能な部品」として指定できる機能です。「あるコンポーネントに関連するものは同じ場所に配置する」という colocation の考え方とも相性がよいですね。コンポーネントで参照したいフィールドだけを fragment に含め、他のフィールドはたとえ存在しても参照しないようにする、というのが基本戦略です。でも、fragment を使用したとしても、 JavaScript ではどんなフィールドにでもアクセス（しようと）することができてしまいます。そこで、TypeScript の登場です！TypeScript の静的型付けと fragment を組み合わせると、アクセスできるフィールドを厳密に限定することができます。TypeScript を使うことの利点はビルド時に多くのエラーを拾えること。静的型付けを賢く使うことによって実行時エラーを最小限に抑えることができます。また、graphql-codegen を使うと GraphQL スキーマから TypeScript の型を自動生成できます。codegen のおかげで、同じような型をいろんなところで定義しなくてはならなくなるという問題も解消します。それでは、TypeScript と codegen を活用して、安全に GraphQL のコーディングを楽しみましょう！使うものReact (今回は Create React App を使いました)TypeScriptApollo Clientgraphql-c

こんにちは、「くらそうね」開発チームでバックエンドエンジニアをしている山口拓弥（@yamat47）です。いきなりですが！Railsエンジニアのみなさん、config/routes.rb ってどう書いてますか？そもそもRailsはリソースベースのルーティング設定をとても簡単に書けますし、少し前に DHH流のルーティング設定が周知（？）されたりもしました。そのため、ルーティング設定ではあまり複雑なことをしていないアプリがほとんどなのではと想像しています。「くらそうね」でもこの考えに則り、新たに追加される設定はほぼ全てリソースフルなルーティングになっています。その上で最近、Constraintオブジェクトを使ったやや複雑なルーティング設定の実装をする機会があったのでその話をしてみようと思います。満たしたい要件「くらそうね」には、サービスを利用する際の参考にしていただくために、地域の解体費用の相場を表示しているページがあります。例えばこちらのページでは、東京都の解体工事費用の相場の情報を表示しています：https://www.crassone.jp/price/tokyoこうしたページは都道府県ごとに存在し、また相場情報などはリクエストがある度に動的に計算をしています。そのため静的なHTMLを返すわけにはいかず、RailsらしいMVCの仕組みを使ってレスポンスを返す必要があります。また都道府県以外のページは準備をしていないため、こちらが想定していないパスでリクエストがあったときは404 Not Foundを返したいです。例えば.../price/tokyo, /price/aichi ...想定しているパスであり、それぞれ東京都と愛知県の情報を返したい。/price/nihon, /price/musashi ...想定していないパスであり、404 Not Foundとして扱いたい。そして都道府県のデータはアプリのデータベース（prefecturesテーブル）で管理されています。これまでの実装方法ルーティング設定は素朴にシンプルにしようという考えのもと、パスの妥当性の検証も含めて具体的な処理はコントローラーに任せていました。GET /price/:prefecture_slug -> Price::PrefecturesController#showRails.applic

こんにちは。クラッソーネでプロジェクトマネージャーをしている田原（@shogocat）です。最近ケーブル配線トレーやケーブルホルダーを購入し、机周りの配線をスッキリできたので気分が上がっています。皆さま、今話題のNotionというツールをご存知でしょうか。https://www.notion.so/Notionドキュメント管理やタスク管理など、あらゆることを1つのアプリで行える夢のようなツールです。利用者は世界で1,000万人を超えていて、日本でも続々と企業で導入されています。（参考: Notion ユーザー事例）2021年、Notionは2つの大きなアップデートが予定されています。API公開と日本語化です。先月5月、待望のNotionのAPIが公開されました。そこで今回は、NotionのAPIを実際に触ってみて、SlackとNotionを連携する仕組みを作ってみました。NotionのAPINotionのAPI公式情報はこちらに載っています。https://developers.notion.com/Notion APIAPIを通してページの追加やデータベースのコンテンツ追加などができるようになります。ナレッジマネジメントAPI活用の話に入る前に、ナレッジマネジメントについても少しお話しします。企業の生産性を高める手法として、ナレッジマネジメントはとても重要です。> ナレッジマネジメント（英語: knowledge management）とは、企業が保持している情報・知識と、個人が持っているノウハウや経験などの知的資産を共有して、創造的な仕事につなげることを目指す経営管理手法。 Wikipedia個人の持つ暗黙知を形式知に変換することで業務の属人化を防いだり、ナレッジを共有することで業務の効率化に繋がるといったメリットがあります。昨今のリモートワーク環境において、ナレッジマネジメントの重要性はますます高まっていると言われています。フロー情報とストック情報ナレッジマネジメントに関連して、「フロー情報」「ストック情報」というキーワードにも触れておきます。フロー情報：流れ去ってしまう情報ストック情報：蓄積される情報例えば、業務の中でわからないことに遭遇した場合、Slackで誰かに聞いて解決することがよくあるかと思います。Slack上のやり取りはフロー情報のため、情報が流れ

こんにちは、バックエンドエンジニアの山口拓弥（@yamat47）です。夏にある友人の結婚式に向けて、最近ダイエットに勤しんでいます。消費するカロリーよりも摂取するカロリーを少なくすればいいだけなんですが、それが難しいんですよね...。さて、くらそうねは一部を除いてほとんどがRuby on Railsで作られています。自動テストのフレームワークはRSpecを採用しており、アプリのコードが増えるに従ってテストも段々と増えてきました。そんなRSpecですが、書き方を誤ると途端に 実行結果が不安定なテスト が爆誕します。この記事では、くらそうねにかつて存在したそんな不安定なテストとその解決方法をいくつかご紹介します！（サンプルコードは適宜一般的なテーマに変えています。）そもそも「不安定なテスト」って？この記事で扱う不安定なテストは、具体的には以下のようなものを指しています。実行するたびに成功したり失敗したりするテスト実行する日付や時間帯によって成功したり失敗したりするテストローカル開発環境では成功するがCI環境では失敗するテストまた不安定なテストというトピックはRSpecに限らず他のフレームワークでも起きうる一般的な話題です。今回はRSpecをサンプルコードとして利用しますが、普段RSpecを書かない人でも雰囲気くらいは読み取っていただけると嬉しいです！事例１：毎週日曜日と祝日に実行すると落ちるテスト例えばAppointmentという面談を表すクラスがあったとします。このクラスは#scheduled_dateという属性を持ち、そこには日曜日と祝日を登録できないという制約がかかっているとします。class Appointment { order(created_at: :desc) }endそして、この追加した.orderbycreated_atについてテストを追加しました。RSpec.describe Appointment do describe '.orderbycreated_at' do let!(:first_appointment) { Appointment.create } let!(:second_appointment) { Appointment.create } let!(:third_appointment) { Appointment.creat

こんにちは。クラッソーネでプロジェクトマネージャーをしている田原（@shogocat）です。来年2022年に発売予定のスプラトゥーン3が楽しみすぎて、日々ワクワクした気持ちで過ごしている今日この頃です。昨今、リモートワークを導入する企業が増えていますね。日本CTO協会が発行しているDX Criteriaでも、リモートワークを活用する考え方が浸透してきていると述べられています。クラッソーネでは2020年3月からリモートワークが導入され、1年が経過しました。開発チームのすべての業務をリモートで行っているため、まだ実際に会ったことがないメンバーもたくさんいます。今回、開発チームのメンバーがどのような環境でリモートワークをしているのか、インタビューしてみました！1人目: 仕事のお供にモンスターエナジー市川さん_デスク1人目は、今月ジョインしてくれた市川さん。2週間前までは前職の会社に毎日出社していたため、突然のフルリモートに若干戸惑っている様子もありましたが、気分転換に散歩するなど試行錯誤中とのことでした。こだわりポイント「ドラえもん500円玉貯金がこだわりです。」イチオシアイテム「モンスターが美味しくて、癖になります。」リモートワークについて思うこと「起きてすぐ仕事できるのが嬉しいです。」今後自宅環境をこうしたい「座り心地が良い椅子が欲しいです。」2人目: カービィでラバーダッキング五十嵐さん_デスク2人目は、クラッソーネ開発チームの歴が一番長い五十嵐さん。カービィのぬいぐるみがかわいいです。イチオシアイテム「カービィのぬいぐるみ。ラバーダックに最適です！」※ラバーダック・デバッグとは、ゴム製のアヒルの人形（ラバーダック）に話しかけるように、今やっていることを言葉にして口にすることで問題の本質に気付きやすくするデバッグ手法です。参照: Wikipediaリモートワークについて思うこと「イヤホンをずっとつけながら作業をしているので耳が痛くなりがち。生活音が気にならない独立した部屋で作業したい。」今後自宅環境をこうしたい「配線が汚すぎるのでいつか整理したいです(いつか)。」3人目: スマホを視界に入れないように工夫山口さん_デスク山口さん_椅子3人目は、アメフトも開発も全力投球の山口さん（@yamat47 ）。部屋がとても綺麗で、性格が表れていますね。こだわりポイント山口さん

こんにちは、バックエンドエンジニアの山口拓弥（@yamat47）です。普段はRailsを書いていることがほとんどなので、こちらのブログでもRailsの話題を中心に発信をしていきます。よろしくお願いします！結構かゆいところに手が届くRailsRuby on Railsはいわゆるフルスタックなアプリケーションフレームワークです。Active Record や Action Controller をはじめとする、色々なレイヤーの様々な機能を標準で提供しています。最近では特定の用途に限定したコア機能も増えてきました。受信メールを扱いやすくする Action Mailbox、リッチテキスト形式のデータを扱いやすくする Action Text などですね。またRubyのコア機能を拡張する Active Support の仕組みもとても強力で、Railsアプリ内ではRubyのコードを普段よりもさらに楽しく & 便利に書くことができます。#blank? や #present? はもちろん、#with_options やInflectionの仕組みなどは使っているエンジニアの皆さんも多いのではないでしょうか？アプリケーションの核となる機能とメソッドなどの細かい機能の両方で、かなり広い範囲を守っているのが今のRailsだと思っています。それでも手が届かない場面はあるそれでも実際にアプリを開発していると、Railsの挙動を変えたい場面が出てくるものです。そのときにRailsの文脈でいうと取ることのできる選択肢は次の二つです。モンキーパッチを当てるRailsプラグインを利用する = 今日の本題いずれもRailsのコア機能を拡張（変更）するものですが、実装の抽象化の度合いが異なります。| | どこに実装するの？ | 実装の例 || --- | --- | --- || モンキーパッチ | 開発しているアプリの中 | kaminari/kaminariにモンキーパッチを当てた例 || Railsプラグイン | Gemとしてインストール | yamat47/activerecordaccessiblejson |モンキーパッチは開発しているそのアプリの中に閉じた話ですが、Railsプラグインの場合は他アプリにも転用できるような仕組みです。この記事ではこれ以降、Railsプラグインを使ったRail

こんにちは、アプリケーションエンジニアの菅野です。入社以来リモートワークをエンジョイしていますが、通勤時間がなくなったことにより本を読む時間がめっきり減ってきたのが最近の悩みです。これは？このエントリではテストにおけるfakeデータの説明や背景を紹介した上で、RSpecでfakeデータ生成gemを導入・利用することを簡単に解説していきます。fakeデータって？ここではテストを実行する際に用意する、 サービスの利用実態に合わせて捏造された事前データ のことを指します。例えば 「ユーザーがログインできること」 をテストする場合、ログイン処理を実行させるために作られたユーザーアカウントのデータがそれに当たります。ダミーデータじゃないの？？両者よく似た語ではありますが、ことテストにおいては下記のように微妙にニュアンスが違ってくるんじゃないかと思います(たぶん)。ダミーデータ ・・・ 本物を模して作られたハリボテ(モノとしての機能の有無は問わない)フェイクデータ ・・・捏造されたもの(偽物ではあるが、モノとしての機能は保持している)家や建物で例えれば、ダミーの方は演劇の舞台装置などにあるような表層だけを模した単なる板切れであるのに対し、フェイクデータはモデルルームのような実際の生活空間を再現したもの、といったところでしょうか。テストでは現実の振る舞いをより忠実に再現した上で検証できた方が望ましく、その意味で語としてもフェイクの方がよりフィットしそうな感じがしますよね。rubyの faker gemがこういう名前をしているのもそんな背景があるんじゃないかと思います。知らんけど。で、なんで必要なの？ではなぜフェイクデータが必要になるのでしょうか。例えば以下のようなテストで考えてみましょう。FactoryBot.define do factory :user do name { 'テストユーザー' } email { 'user@example.com' } endendRSpec.describe User, type: :model do let(:user) { create(:user) } let(:sent_email) { ActionMailer::Base.deliveries.last } subject { user.sendwelcomemessage }

はじめにこんにちは、クラッソーネ CTOのマツモトです。開発チームでブログ書こうぜ！という感じになりました。チームメンバからの自発的な提案で始まった企画なので、積極的でいいなあと思いました。幾ばくかの準備期間を経て、今日から記事を投下していきます。（このあたりの経緯や自前サイト構築などの話はいずれ記事化されるものと期待しています！）ほうしん開発チーム紹介 | 株式会社クラッソーネ にあるメンバでいろいろ執筆していきます。だいたい月2本+随時みたいな感じで更新できると嬉しいなあという気持ちです。チーム内での技術的な話とか、開発プロセスやその他の取り組み等についていろいろ記事化できればいいかなあと思っています。なお、2021年3月現在としては AWS 上で稼働する Rails で構成されているの短期的にはその周辺が多くなりそうな気はしますが、現在もろもろ改修や新規開発が進んでいますのでいろいろお披露目できるとうれしいですね。またテクニカルなものだけではなく、チームのカルチャーや環境に関することや趣味的なことについてもご紹介していきたいところです。クラッソーネについてクラッソーネは、解体工事とエクステリア工事領域で、全国約2,800社の専門工事会社と施主をマッチングする一括見積もりWebサービス「くらそうね 」「くらそうねエクステリア」を開発、運営しています。また、解体工事業者さんを支援する業務支援系プロダクトも鋭意開発中です！さいごにクラッソーネでは一緒に開発してくれるメンバを求めています！少しでもご興味持っていただけたらお気軽にご連絡いただけると幸いです！https://www.crassone.co.jp/recruit/engineer/