はじめまして、テック人材向けの情報共有コミュニティYardの公式アカウントです。

本日、4/1よりクローズドβ版を公開します。

参加いただけるかたは <a href="http://hi@yard.technology">hi@yard.technology</a>&nbsp;にご連絡ください。

テック人材はもちろん、テック人材に相談したい企業の方も募集しております。

テック業界のさらなる発展を目指し、より良いコミュニティを作りましょう！

Yardのクローズドβ版公開

Yard公式

最近、話題になっているカジュアル面談。

フレーズだけがひとり歩きし、解釈や期待値が人それぞれにあり衝突が起きているように見えます。

カジュアル面談にのぞむ際、相手の企業、サービス、個人について事前に調査すべきかについて賛否あるようです。

それに関して、これこそがカジュアル面談の本来の定義であると言い切るのも微妙な気もしますので、いったんは当事者同士の認識がすりあっていれば良いかなと思います。

では、僕はカジュアル面談に何を期待してのぞんでいるか？

僕は、これまでエンジニ組織のマネージャーとして、カジュアル面談はトータル50件くらいはやったと思います。

また、採用の（予備）候補者としても、合計10件はやっていると思います。

そんな僕が、カジュアル面談をどう捉えているかについて経験をまじえて整理したいと思います。

まず、本音としてカジュアル面談をする際に、相手が自社のことや自社のサービスについて知っていてくれることは、とても嬉しいことです。

自分がコミュ力に自信があるわけではないので、相手が「御社のサービス使っています」何気ないコメントで歩み寄りを見せてくれると助かります。

多くの場合、カジュアル面談は初対面でオンラインでのぞむことになるので、最初の5分くらいはどういうトーンで話していくか特に神経を使います。

コロナ以前は、自社のオフィスで面談することもあったので、軽くオフィスの案内をするなどして打ち解けた後に面談できたりもしましたが、リモートでの面談はそうはいきません。

そのため、相手からも会話のキッカケを作ってくれることは、カジュアル面談を双方にとって有益な時間にするうえで、良いアプローチだと思います。

ただ、いっぽうで自社サービスについて知らなかった場合、落胆するかで言うとそうでもありません。

カジュアル面談の場合、自社サービスを知っているか以前に、そもそも転職意思に濃淡があるからです。

自分の所属組織では、採用チーム経由の事前アンケートで

と言う温度感がある程度わかった状態で候補者のレジュメがまわってきました。

そのため、みんながみんな自社に興味がある状態ではなく、情報収集の一環としてカジュアル面談にのぞむ方がいるという認識が事前にあったのは、自分として大きかったと思います。

現状、自社に対して興味がない候補者でも、興味を持っていただき、選考フローのファネルの次のステップにあるエントリーに進んでもらえるよう努力します。

また、直近すぐに転職を検討していない候補者に対しても同じで、数年後に改めて検討する際に、選択肢に入れてもらうようにアピールすることに努めました。

さらに、エンジニアの有効求人倍率は年々高まっていますので、そのくらいの努力をしないと優秀な方には来てもらえないと言う実情もあったと思います。

ただ、この辺りのカジュアル面談に対するスタンスは、自分のマインドセットが優れていたと言うよりは、所属していた組織の採用チームの仕組みが優れていたと言うのが大きいと思います。

改めて、当時の採用チームに感謝ですね。

個人的に転職を検討する際に、<a href="https://pitta.me/">Pitta（旧Meety）</a>や<a href="https://page.yenta-app.com/">Yenta</a>でマッチした方とカジュアルにお話しする機会はありました。

結果的に、自分で起業する道を選んだのでカジュアル面談経由で転職に至ったことはないのですが、面談がキッカケでサービスのファンになり、業務委託としてお手伝いをさせていただいたことはありました。

また、カジュアル面談をきっかけに知り合った方と仕事に関係なく交流できる間柄になったケースもありました。

いっぽうで、カジュアル面談で一度だけ酷く詰められたことがあります。

（だいぶ要約すると）相手いわく、

「私がこの面談にわざわざ時間を割いているのに、その対価としてあなたは私に何の価値も与えられていないのでは？」

って趣旨のことを言われたことがあります。

その際は、私の方から相手にコンタクトして面談をセットした経緯もあったので相手との期待値調整ができなかった自分のミスでもあったと思います。が、正直すごくモヤモヤした思い出です。

とはいえ、相手が自分に何を期待しているかを見定めることの重要性を痛感したキッカケではありました。（ただし、相手にそのような過度な期待をすると、かえって自分にとって機会損失になる気もするので、そういう振る舞いはしないかなぁともいまだに思いますが...）

カジュアル面談について、自分なりの経験や考えを、取り止めもなくまとめてみました。

カジュアル面談は、自分のコミュニケーション力 や人間としての魅力を鍛える成長機会と捉えて、今後も定期的にやっていこうと思います。

今後、カジュアル面談の文化が、より一層盛り上がることを期待しています！

エンジニアマネージャーの僕にとってのカジュアル面談

toitech

<a href="https://amzn.to/4dVQCaK">スモールビジネス起業の教科書_Webサービス事業編: 卓越した開発スキルなしでもWeb事業を立ち上げるための成功法則</a>

今後、Yardをグロースさせていく上で、参考になる知見が多かったので、軽い要約と感想をまとめようと思います。

本書は、前半の世界のスモールビジネスの事例を後半はそこから抽出した成功法則を紹介しています。

前半では、以下の5サービスの具体的な事例を紹介しています。

<a href="https://www.projectionhub.com/">ProjectionHub</a>

<a href="https://afluencer.com/">Afluencer</a>

<a href="https://noteforms.com/">NotionForms</a>

<a href="https://scrapingant.com/">ScrapingAnt</a>

<a href="https://metroretro.io/">Metro Retro</a>

後半では、以下の5つの成功法則を紹介しています。

チャンスに気づける人間であること

小さく素早く試す方法を知っていること

お客様と直接対話し、望みを知ること

利益を生み出すことから逃げない

と、スモールビジネスに限らず、<a href="https://amzn.to/4bWXHGv">起業の科学</a>などにも紹介されている一般的な事業開発のアプローチが多いのでコンセプト自体は新しくはないですが、ユニコーン企業などではなくスモールビジネスの事例が紹介されているので身近で参考にしやすいように整理されています。

特に資金力やコネクションがない事業立ち上げ期を想定してTipsを紹介しているため、同じフェーズの開発者にとって読みやすく実践しやすい内容になっています。

Yardは、ほぼ個人開発なので、事業を立ち上げる上での潤沢な資金やコネクションがあるわけではありません。

また、アドバイザーと相談者のマッチングビジネスであるため、双方の集客が不可欠です。

本書の中では、企業とインフルエンサーをマッチングさせるAluencerにおいて、最終的には双方の集客が必要なサービスであるが、初手としてインフルエンサーの集客に集中した事例が紹介されています。 本来、このおようなマッチングサービスにおいては、企業を集めるためにはインフルエンサーを、インフルエンサーを集めるためには企業を集める必要があるためデッドロックが生じます。 しかし、このような複雑に絡み合った問題を分解し、シンプルにすることが重要だと述べています。 具体的には、インフルエンサーにとってAluencer上で掲載してもらうことが知名度UPのメリットがあるようサービス設計し、インフルエンサーが十分集まってから企業の集客をしたそうです。

ここに Yard を含むマッチングサービスのグロース戦略のヒントがあると興味深く読みました。

他にも「カラーバス効果」や「準備を完璧にして事業を作るなんて不可能」といったスタンス面のキーワードも印象に残るものでした。

個人的には、今の事業フェーズ的にとてもしっくりくる本だったのでオススメです！

【要約・感想】スモールビジネス起業の教科書_Webサービス事業編

弊社(<a href="https://yard.technology/">株式会社ヤード</a>)では、<a href="https://yard.tips/">Yard</a>の開発とは別で、他社のシステム開発・運用支援の業務も行なっています。

そんな中、以前、業務委託契約の開始予定日の1週間前に案件がドタキャンされたことがありました。

この案件では、稼働開始予定の3週間ほど前に「口頭」で時間単価・稼働時間などの条件面も含めた業務委託締結の合意はしていました。

また、稼働開始日の具体的な作業（PCのセットアップの方法など）の指示などもうけており、着々と準備を進めていました。

ところが、稼働開始日が近づいても契約書は一向に送られてこず、こちらから早めに出すように再三お願いはしていましたが、「現在、調整中」という返答が来るばかりでした。

そして、結局、土壇場で「単価の条件が合わない」という理由で見送りにさせて欲しいという連絡がきました。

こちらとしては、約束が反故された形になるので先方に抗議もしましたが、「稟議が降りなかったため見送りにさせて欲しい。申し訳ない。」という回答があっただけで、それ以上は取り合ってくれませんでした。

弊社としては、案件がキャンセルになること自体は、そこまで問題ではないのですが、稼働開始予定の1週間前というタイミングが問題でした。

その案件の稼働時間が割と多かった（かつ「長期で案件に入って欲しい」という打診もあった）ため、翌月以降は他の仕事はセーブしていたのでキャンセルになった分の稼働が空いてしまう状況になりました。

その後、程なくツテを辿って別の案件に入ることができましたが、翌月の途中からの稼働になり月の前半の稼働は空いてしまう形になりました。

弊社としては、当然、固定費が発生しているので、収入が減ってしまうことは、それなりのリスクでした。

この件において、経営者として信頼できる取引先を見定める能力が不足していた自分の未熟さによるところは大きいと認識しています。

いっぽうで、収入のポートフォリオを設計しておく必要性も感じました。

一社からの収入に依存する形は避け、複数の取引先と信頼関係を構築しておくべきだと改めて痛感しました。

セーフティネットの1つにスポット相談

さて、弊社のような小規模事業者やフリーランスにとって、急に稼働が空いたタイミングに働けるサービスがあれば良いのでは？と思い検討したのがスポット相談という形です。

一般的な定型業務においてキマバイト（e.g. タイミー、メルカリハロ）があるように、テック領域にもそのようなスキマ時間に働けるサービスがあれば良いのではという動機で、Yardを開発しました。

ただ、定型業務と違いテック領域のスポット相談においては、アドバイザーの専門性に対するスキルレベルが重要で、そこでミスマッチが起こる可能性があります。そこで、事前に「記事」を書いてもらうという制約をつけスキルレベルを可視化できる設計にしました。

いわば、小規模事業社やフリーランスのセーフティネットとしてYardのスポット相談が機能すると良いと考えています。

これが世の中的にどう受け止められるか、楽しみではあるので、より多くの方に参加してもらえるとありがたいです。

フリーランス/小規模事業者のセーフティネットとしてのスポット相談

Yardは、日本最大級のクラウドファンディングサービスCAMPFIREにおいて「テック人材向け情報共有コミュニティYard」の開発を応援いただくプロジェクトを2024年5月28日から2024年6月24日まで行いました。

結果として、支援者18人より合計183,000円のご支援をいただき目標額の183%で達成しました！

ご支援いただいた皆様、心より御礼申し上げます！

いただいたご支援は、Yardのシステムの開発費に充てる予定です。

引き続きよろしくお願いいたします！

Yardのクラファン・プロジェクト、目標額の183%で達成

ユーザーごとの実行クエリ数とスキャン量

過去 <a href="https://cloud.google.com/bigquery/docs/information-schema-jobs?hl=ja#data_retention">180日間</a>の結果。

リソースを消費しているユーザーの検知などに使えます。

データセット内の全テーブルの容量を足し合わせてGBで出力

データセット内のstorageタイプの内訳

BigQueryのstorageには、<code class="inline-code">LONG_TERM</code> と <code class="inline-code">ACTIVE</code> がありますが、その内訳を確認できます。

本日（JST）更新されたテーブルと最終更新時間

BigQueryの使用状況の確認のSQLレシピ

データ基盤の運用において、データウェアハウスのデータを外部のストレージにバックアップすることは重要な業務の一つです。

オペミスでデータを削除してしまった時に復旧する※

利用頻度の低いデータを外部ストレージに退避させコスト削減する

他のデータウェアハウスにデータを移行する

などのユースケースで、有用なアプローチです。

今回、Google Cloud(GCP) のBigQueryから Google Cloud Storage(以下 GCS) にデータをバックアップする方法を紹介します。

※ BigQueryには、<a href="https://cloud.google.com/bigquery/docs/time-travel?hl=ja">タイムトラベルとフェイルセーフ</a>により削除後、最大14日間復元ができます。

bqコマンドで実行する例を記載します。

コマンドの実行者は、以下の権限が必要になります。

terraformでroleを管理している場合は、<code class="inline-code">google_project_iam_member</code>&nbsp;のリソースに適宜、権限を追加してください。

以下のコマンドを実行すると、BigQueryからGCSにデータがエクスポートされます。

destination_format: parquet形式がおすすめです。csv形式ですと、ArrayなどのNest形式の変換ができず失敗することがあります。例えば、Google Analytics(GA4)のデータをBigQueryにエクスポートしている際は、ネストされているデータが含まれます。

GCSのファイル名には、アスタリスクを含めることもおすすめです。1ファイルあたりの上限が1GBですが、アスタリスクをつけると適宜分割されます。サフィックスに&nbsp;<code class="inline-code">000000000000</code> のから始まる連番が振り分けられます。

また、BigQueryテーブルのスキーマ情報もダンプしておくこともおすすめです。

バックアップ時の権限に加え、BigQueryにデータを書く必要があるので、

の権限が必要になります。（roles/bigquery.dataEditorを付与した場合、roles/bigquery.dataViewerは無くして問題なです）

以下のコマンドを実行すると、GCSにバックアップしたデータをBigQueryにリストアできます。

bq loadする際に、スキーマ情報が必要になるので、先ほどダンプしたschema.jsonを使います。

今回は、コンソール上で、手軽にBigQueryデータをバックアップ/リストアする方法をまとめました。

BigQueryやGCSの操作は、Pythonクライアントを利用しても簡単に行えます。Cloud Schedulerなどを組み合わせてhttp経由でCloud Run / Cloud Functionsを実行しバックアップを定期実行するなども有用です。

BigQueryのテーブルデータをCloud Storageにバックアップする

Yardでは、検索機能を<a href="https://www.algolia.com/ja-JP/">Algolia</a>で実装しています。

筆者は、これまで 検索サービスとして <a href="https://www.elastic.co/jp/cloud">Elastic Cloud</a> や <a href="https://aws.amazon.com/jp/what-is/opensearch/">AWS OpenSearch</a> などの経験はありましたが、

Yardが動いているGCPからAPIが呼び出しやすい

無料枠があり、気軽に始められる

ダッシュボードがリッチで検索クエリの分析が容易

と言った点からAlgoliaを採用してみました。

また、検索フォームをサイト内に埋め込むだけで、簡単な検索機能を実現できます。

さらに、Algoliaはレコメンド機能も提供しており、データサイエンスの知見がなくても簡単にデータプロダクトを導入ができます。

今回、バックエンドで node.js クライアントからサービスの利用方法を紹介します。

サイドメニューの「Setting」→「Applications」→右上の「Application Create」から作成できます。

regionを選ぶ際、Japanも選択肢にありますが、<code class="inline-code">you'll need to Talk to an Algolia expert.</code> と表示され、問い合わせが必要だと言われます（2024年3月時点）。US(West)などだとすぐ使えます。

その後、最初のIndex（DBでいうテーブルのようなもの）を作るように促されます。今回は、<code class="inline-code">article</code> とします。

アプリケーションのトップから、 「API Keys」から <code class="inline-code">Application ID</code> と <code class="inline-code">Admin API Key</code> を取得しておく。

記事データをIndexに入れる際は、以下のように実行します。

登録するObject（DBでいうレコードのようなもの）には、一意の文字列のobjectIDを指定する必要があります（integerを入れても文字列にキャストされた値で登録されます）。

今回は、<code class="inline-code">replaceAllObjects</code>メソッドで全件をリプレイスしてみます。<code class="inline-code">replaceAllObjects</code>&nbsp;を <code class="inline-code">saveObjects</code> にすると、対象のobjectIDがもともとある場合はupdate、ない場合はinsertになります。

Object ないの<code class="inline-code">attribute</code> が対応する<a href="https://www.algolia.com/doc/guides/sending-and-managing-data/prepare-your-data/in-depth/what-is-in-a-record/">データ型</a>は、

になります。例に示した、publishedAtのような日時は unixtime のようにintegerにして入れる必要があります。

"title" を含む object を publishedAtの降順（articleの新着順）で検索したい場合は、以下のようなコードになります。

一般的な検索サービスと同様、 "title" を "Title" などにしても同様な結果が得られ、多少の表現の揺らぎにも対応できます。

今回は、Node.jsのクライアント経由で、Algoliaを扱うコードを紹介しました。

Algoliaは、1ヶ月で1万リクエストまでだと無料で使えるため、MVPの開発などには非常に便利です。

筆者もドキュメントを読んで、数時間で基本操作は実装することができました。（ソートする操作が若干わかりにくかったですが。。）

自分の周りでも、よりAlgoliaのユーザーが増えてくれれば良いと思います。

全文検索サービスAlgoliaをNode.jsで使ってみる

<a href="https://yard.tips">Yard</a>&nbsp;というデジタル領域に特化した情報コミュニティを作りました。

有識者は、デジタル領域の知見を記事として公開し、読者はより詳しい内容をスポットコンサルという形で相談できます。

このページでは、Yardを支えている技術やサービスを紹介します。

フロントエンド＆サーバーサイドに、Next.js（TypeScript）を使っています。

なお、バージョンは13系を使っていますが、App Routerは使っていません。最初は12系を使っていたのですが、開発中に13系が公開されバージョンだけあげて、Page Routerからファイルを書き換えるのが面倒だったので、そのままになっています。

プライマリーキーは、cuidを使っている。

GraphQLサーバー&amp;クライアント。

UIコンポーネントライブラリ。

利用経験があったため、Cloud Runを選定。

Cloud Build：Cloud RunへのデプロイまわりのCI/CD

Cloud Storage：ユーザーが投稿した画像の管理

その他に利用しているサービスなど

今後、開発をしていく中で変更があれば、追記or書き直そうと思います。

Yard を支える技術とサービス構成

HubSpotは、グローバルで支持されているCRM（顧客関係管理）プラットフォームです。

マーケティング、営業、カスタマーサービス、オペレーション、コンテンツ管理など多岐に渡る機能が提供されており、小規模から大規模なビジネスまで幅広いユースケースをカバーできます。

今回は、営業/マーケ用途でのリードの獲得のために設置したフォーム経由の問い合わせデータを取得する処理をPythonで書いてみます。

フォーム一覧を取得（<a href="https://legacydocs.hubspot.com/docs/methods/forms/v2/get_forms">参考</a>）

フォームの詳細情報を取得（<a href="https://legacydocs.hubspot.com/docs/methods/forms/get-submissions-for-a-form">参考</a>）

まずは、APIで使うアクセストークンを取得します。

ヘッダーの「設定アイコン⚙️」→サイドバーの「連携」の「非公開アプリ」でアプリを作成→「認証」タブの「アクセストークン」を取得します。（<a href="https://knowledge.hubspot.com/ja/integrations/how-do-i-get-my-hubspot-api-key">参考</a>）

<code class="inline-code">HUBSPOT_ACCESS_TOKEN</code> と言う環境変数にセットしておきましょう。

以下のように <code class="inline-code">requests</code> モジュールを使い、APIを順次コールしていく流れです。

なお、HubSpotのAPIには、10秒あたり/1日あたりのレート制限があります。データ量が多い場合は、適宜、時間をおいて実行するなどしましょう。詳しくは<a href="https://developers.hubspot.jp/docs/api/usage-details">こちら</a>。

今回は、HubSpotのREST APIをPython経由で呼び出し、フォームデータを取得する実装を紹介しました。

hubspotでは、<a href="https://pypi.org/project/hubspot-api-client/">hubspot-api-client</a> も用意されていますが、細かい処理がカバーされていない部分もありREST APIを直接呼び出す方が利便性が高かったので、pythonクライアントを使いませんでした。

HubSpotのフォームデータをAPI経由で取得する

Accordionを閉じたときに一緒に親子関係のNodeも一緒にHiddenにしたかった

全く同じものではないですがもちろん自分で実装することもできます。大雑把には以下のような方法で実現できます。

Material UIなどのAccordion ComponentでNodeを囲う

紐づくNodeのparent-idに1で作成したNodeIdをいれる

AccordionのonClick Eventで子Nodeのhidden attributeを更新する

Clickされたときにhiddenにする関数

すべてのNodeからparentIdがClickされたNodeのIdと一致したもののhiddenプロパティをtrueにする

React FlowのonNodeClick Event Handlerに↑の関数を設定する

（Accordionの場合にはAccordion componentのonClick Event）

Accordion Component + NodeのHidden属性を変更することでReact FlowのNodeExpandとCollapseを実装できる

かっこいいやつを簡単に使いたい &amp; お金払える場合にはProを使いましょう

ReactFlowでClickしたNodeの子Nodeに影響を与える

2or3

React Nativeで開発されたAndroidアプリでは、キーボードが表示される際に背景が一瞬フラッシュして白くなるという問題がしばしば発生します。特にダークモードを使用している時や、アプリに特定の背景色を設定している場合、この白いフラッシュは非常に目立ち、ユーザー体験に悪影響を与えます。

この問題の原因は、キーボード表示時のデフォルトのウィンドウ調整動作にあります。React Nativeでは、キーボードが表示されると画面のレイアウトが自動的に調整され、このプロセス中に背景が一瞬白くなることがあります。

この問題に対処するための解決策はシンプルです。アプリの設定に応じて、適切なウィンドウ調整モードを指定することで、キーボード表示時のフラッシュを防ぐことができます。

Expoを使用している場合、<code>app.json</code>ファイルに次の設定を追加します：

Expoを使用していないネイティブのReact Nativeプロジェクトの場合、<code>AndroidManifest.xml</code>に以下の属性をアプリの<code>&lt;activity&gt;</code>タグに追加します：

&lt;code&gt;AndroidManifest.xml&lt;/code&gt;

React Nativeで開発したAndroidアプリのキーボード表示時に背景がフラッシュして白くなる問題は、簡単な設定変更で解決可能です。Expoを使用しているかどうかに応じて、<code>app.json</code>または<code>AndroidManifest.xml</code>に適切な設定を追加することで、スムーズで快適なユーザー体験を提供できます。

React NativeでAndroidアプリのキーボード表示時のフラッシュ問題を解決する方法

だいやん

<a href="https://yard.technology/">弊社のHP</a>は、Next.js on Cloud Runで動いている（コスパが良いので）。

しかし、ずっとファビコンが、Next.jsのデフォルトの黒丸の中に白三角のマークのアレだった。

流石にそろそろなおしたいなと。

yard.svgのファイルは、publicディレクトリ以下においておく。