はてなブックマーク

ブラウザを用いたリスク検出ツールchromepatrolの紹介とChrome DevTools Protocolの話 山田快 こんにちは。RECRUIT Job for Student 2020（通称、夏バイト）に参加していた、山田快（Twitter: @gpioblink）と申します！この記事では、期間中に作成したサイトの問題を検出するツールや、開発中に学んだChrome DevTools Protocol（以下、CDP）の話をしていきます。 デモ動画 TL;DR 近年、ブラウザの仕様変更など外部の要因による問題や障害が起きやすくなった CDPを使えばブラウザから詳細な情報が取れる CDPから取れる情報をもとにブラウザのリスク検証をするツール「chromepatrol」を作成した 自己紹介 じぶりん（@gpioblink）と申します。最近は低レイヤーに興味を持ち、低レイヤー寄りのリバース

こんにちは、スタディサプリ ENGLISH SRE グループの巻田です。 現在リクルートの夏アルバイトとしてこのチームに所属しています。 この記事では EC2 上に構築された EKS クラスタの CronJob のみを Fargate 上で実行できるようにするための方法を紹介します。 はじめに スタディサプリ ENGLISH ではインフラに EKS を採用しています。Kubernetes には CronJob1)https://kubernetes.io/docs/concepts/workloads/controllers/cron-jobs/ と呼ばれる機能があり、ジョブを定期的に実行することができます。スタディサプリ ENGLISH ではこの機能を使って様々なバッチ処理を実行しています。 Fargate を導入したい背景 スタディサプリ ENGLISH で使用している EKS は元々

初めまして。リクルート新卒一年目の大塚悠貴、佐藤万莉、河内友佑です！ 新卒研修で、「異なるユーザ層に特化した複数のアプリを、最大限コードを共通モジュール化することで実現する」という課題に取り組んだので、その内容について紹介します。 コードを共有して複数アプリを作成するには大きく以下のような方法が挙げられます。 単一のXcodeプロジェクトでビルドTARGETを複数作成する 複数のXcodeプロジェクトを作成する 今回はビルドTARGETを複数作成する方法を検証したので、本ブログではこの方法を採用するにあたり発生した問題とその解決策、およびメンテナンス性を意識した実装について紹介します。 複数TARGETを作成・管理する 複数TAEGETの問題点 複数のTARGETでアプリを作る際は通常大まかに以下のような手順で行います。 ビルドTARGETを複製する 各ファイルにTARGETを設定する ま

はじめまして、ホットペッパービューティーコスメ(以下 HPBC) の Web フロントエンドエンジニアとして学生アルバイトをしている三島です。3 ヶ月間のアルバイト期間で、案件に関わる機能開発や SEO 施策の検討と実装、パフォーマンス改善など様々な業務に取り組ませていただきました。本記事ではその中でも、私が取り組んだ HPBC におけるパフォーマンス改善について紹介します。 目次 1.　はじめに 2.　想定読者 3.　AMP とは 4.　パフォーマンス改善の前提知識 5.　現状計測 6.　問題特定 7.　問題解決 8.　今後 9.　まとめ はじめに HPBC の開発プロジェクトでは、Web ページを閲覧してくれるユーザーにとってページが完全に表示されるまでのスピード、つまり「パフォーマンスが大事である」という認識をチーム全体で共有しています。Web サービスのプロダクトは、機能の追加・改

こんにちは！ リクルートテクノロジーズでセキュリティエンジニアとして活動している、藤原 巧です。 毎年恒例となっており、大きな反響をいただいている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートテクノロジーズでは、新卒採用の新人向けに３ヶ月間の技術研修を行っています。この技術研修では大きく分けて２つのコースが設けられています。 1. プログラミングやWebサービスの構造の基礎を体系的に学び、その後一人につき、ひとつのスマホサイトを企画からリリースまで行うコース 2. 一定以上のプログラミングスキルと開発系経験がある新人に向けた、実際の開発で必要となる様々な技術要素をより深く学び、その後実際のサービスでチーム開発にてOJTを行うコース 今回公開するのは 2. で使用した資料です。 この技術研修は、そのほとんどの部分を内製で実施しています。 この研修の最大の

web vitailsはchrome extentionを使って簡単に計測できます。 広告への影響 ・リスティング広告の表示順位、ROIに影響する(出典) －Googleのメディアには、「広告と速度は密接に関連しており、ランディングページが高速であるほど、ROIが向上します」と記載がある ・chrome83から重たいディスプレイ広告をブロックする(出典) －デバイスのリソースを過度に消費する広告は、バッテリーの消耗や帯域幅の許容量の消費など、UXに悪影響を及ぼします。そのため、いずれかを満たす広告はブロックされます。 －メインスレッドを合計60秒以上使用する －メインスレッドを30秒のウィンドウで15秒以上使用する －4メガバイト以上のネットワーク帯域幅を使用 このように、パフォーマンスが重要視される中で、SUUMOがどのように継続的なパフォーマンス維持・改善活動を行なっているのか紹介して

上位チーム間での順位争いは、最終的にかなり熾烈なものになりました。今回、運営チームでは、問題サーバと完全に同条件でのテストは事前に行わず、参加者チームと並行して検証作業を行っていたのですが、その中で判明した理論上の限界スコアは「約3100点」。上位入賞のチームは、いずれもそれに近いところまでチューニングできていたことになります。 優勝は、前夜の段階で「勝ちにいきます！」と力強く宣言していた「帰ってきた明智と愉快な仲間たち」チーム。見事、前回の雪辱を果たしました。 中には、最後に実施したベンチマークが通らずスコアが0点になったチーム、再起動テストに失敗したことで惜しくも入賞を逃したチームもありました。特に残念だったのが、優勝候補だった「ふんばり温泉チーム」。実は、運営による再起動後のテストでは「2801点」という、優勝チームを超えるスコアを出していたのですが、競技時間内で最後に行ったベンチマ

はじめに このエントリは全5回を予定する19卒新人ブログリレーの第4回目です。 はじめまして、リクルートテクノロジーズ新卒2年目の高橋 勇人です。 現在は不動産検索サービスSUUMOのフロントエンドエンジニアとして働いています。新卒入社してからの1年間、SUUMOの新機能開発に携わり、物件を地図から探す機能の開発を進めてきました。 SUUMOではこれまでJavaScript+jQueryで開発されてきましたが、SPサイト上で地図による物件探し機能を実現するために、React+Reduxという技術スタックが採用されました。 （※SP＝スマートフォン） 長期的な開発がされてきたプロダクトで、これまで使ってきていなかった技術スタックでの開発を推し進めるにあたり、継続的な保守性を向上するための取り組みの一環としてテストの整備が進められました。 本記事では、React+Reduxでの地図機能の開発に

はじめに このエントリは全5回を予定する19卒新人ブログリレーの第3回目です。 初めまして。 リクルートテクノロジーズ新卒2年目の山田 祥允です。 主にタウンワークの開発を担当しています。 今回は、タウンワークで用いている全文検索エンジン Solrにおいて、サーバの負荷分散を行なった実例について紹介したいと思います。 背景 タウンワークでは、年々増大していくSolrサーバへの負荷を軽減するため、サーバ数の増加で対応していました。 しかし、既存の構成ではサーバ数を増加することでオンラインアクセスの負荷は分散できても、データの登録処理 (インデクシング) による負荷は分散できませんでした。 これは、全てのサーバに対してデータの登録処理が実行されるため、追加したサーバに対しても結局インデクシングの処理が発生してしまうためです。 そこで、今回はSolrのレプリケーション機能を用いて、 インデクシン

こんにちは。スタディサプリ ENGLISH SREグループの木村です。 はじめに 障害調査などでALBのアクセスログを解析したいというときが皆あると思います。 私はあります。 今回はAthenaを使ってALBのログを解析する方法と新機能で発表されたPartition Projectionを利用するとどのようなメリットがあるのか説明したいと思います。 ALBのアクセスログ ALBには標準でアクセスログを出力する機能があり、有効化することで自動でS3にアクセスログを保存することができます。 しかし、標準でアクセスログはgz形式で出力されており、通常解析するにはS3からダウンロードをしてきて、その後にgzを解凍してから、別途ツールを使って分析するなどの面倒な作業が発生してしまいます。 また、アクセスログはデータが大量になることも多く、DLして利用する場合でも一度に多くの範囲を分析するのは困難です

はじめに このエントリは全5回を予定する19卒新人ブログリレーの第1回目です。 はじめまして、リクルートテクノロジーズ新卒二年目の藤原 巧と申します。 私は、競技プログラミングを強みとして入社し、現在はプラットフォームセキュリティグループという部署でセキュリティエンジニアとして活動しています。 競技プログラミングといえば、プログラムの高速化が得意といった、セキュリティとはあまり縁のないイメージを持つ方も多いと思います。 ここでは、そんな競技プログラマーの藤原がセキュリティエンジニアとして働く上で、競技プログラミングの経験がどう活きているのかについてご紹介したいと思います。 想定読者 この記事は、 競技プログラマーだけど将来のキャリアに悩んでいて、その一例を知りたい人 競技プログラマーがどんな人なのか、その一例を知りたい人 を対象に書いています。 そんな方々の参考になれば幸いです。 競技プロ

アドバンスドテクノロジーラボの塩澤繁です。 前回、「低コストで導入可能な最新リテールテック！（前半）」と題して、「顧客属性推定」と「視線検出」についてご紹介しましたが、今回は「動線分析」と「商品判別」への利用を想定した検証の取り組みをご紹介します。今回の取り組みも、Nvidia社のJetson Nano を利用し、弊社のオフィス内の環境を使用した検証となっています。 なお、Jetson Nanoに関しては、前回の記事でも紹介させていただいていますので、ご覧ください。 ■動線分析 動線分析とは、店舗等に来た顧客が、どのようなルートで店舗内を移動したかを分析するものです。この分析により、通路の混雑具合や流量、棚や商品陳列の前で立ち止まる滞留時間なども分析することができます。 今回は技術検証の観点から、詳細な分析よりも、Jetson Nanoのエッジ端末でどの程度まで検知できるのかに主眼を置いて

リクルートの新技術開拓部門「アドバンスドテクノロジーラボ」の塩澤です。 教育を巡るさまざまな課題をテクノロジーによって解決へとつなげる「EdTech（エドテック）」は、近年日本のテクノロジー業界でも注目が高まっています。また、教育現場でもプログラミング教育の必修化などを背景に「教育×テクノロジー」への関心が高まっており、今後の動向が注目されています。 また、昨今の新型コロナウィルスによる影響で、日本でもオンライン授業を本格的に開始している学校が出てきました。ここへきて、ITを活用した教育現場の改革を身近に感じている方が多いのではないかと推測します。 そうしたEdTechの世界最大級の国際コンベンションである「The Bett Show(以下、BETT SHOW)」が、今年1月にイギリス・ロンドンにて開催されました。私も視察の機会に恵まれたため、世界各国の企業・政府が推進しているEdTech

前回 ではベーシック認証とユーザーロールという二つの認証をご紹介しました。 今回はもう少し実務に寄り添ったお話ということで、よりプログラマブルな作りにする方法についてご紹介します。 シリーズ一覧 概要説明 と Hello World ベーシック認証とユーザーロール（アカウント認証） よりプログラマブルな作りにする 👈 この記事 関心の分離・メンテナブルなテストを書くためのベストプラクティス 環境変数を読み込む 例えば TestCafe を使ってベーシック認証（HTTP Authentication）が効いているサイトへアクセスする際は、 httpAuth メソッドを使って認証情報を宣言的に記述します。 fixture('My Fixture') .page('https://www.example.com') .httpAuth({ username: 'username', passw

HOT PEPPER Beauty EngineerLead 兼美容クリニック開発統括の岩永です。 先日 HOT PEPPER Beauty に新しく美容クリニックのカウンセリング 予約ができるサービス をリリースしました。 本記事では HOT PEPPER Beauty の美容クリニック（以下 美容クリニック）のアーキテクチャ & 技術スタック、開発体制など 美容クリニックのプロダクト開発の概要を紹介していきます。 アーキテクチャ & 技術スタック アプリケーションのアーキテクチャ 美容クリニックでは Web アプリケーションと Batch アプリケーションがありますが、Web アプリケーションは フロントアプリケーション、API アプリケーションの分離(以下 フロント/API 分離) 取り扱う業務ドメインごとの API 分離(以下 API ドメイン分離) を行っています。フロントアプリ

リクルートライフスタイルで「じゃらん」のアプリ開発を担当している桐山です。以前、FlutterのUI構築の仕組みについて記事を書きました。今回は既存のiOS/AndroidプロジェクトにFlutterプロジェクトを組み込む仕組みである、Add-to-appについて紹介いたします。 Add-to-app 既存のiOS/AndroidプロジェクトにFlutterを導入したい場合に、プロジェクト全体を書き換えることが容易ではない場合が存在します。その様な場合にFlutterは、Flutterプロジェクトを既存のiOS/Androidプロジェクトに組み込む仕組みを提供しています。その仕組みがAdd-to-appです。 Add-to-appのドキュメントでは、iOSプロジェクトとAndroidプロジェクトへのAdd-to-appの方法が紹介されています。iOSとAndroidのAdd-to-appの

HOT PEPPER Beautyのアプリ開発チームでTechLeadをしている中里です。 こちらのブログで告知させていただいた通り、3/20にリクルートリファクタリングコンテストを開催しました。今回は当日の様子を紹介したいと思います。 リクルートリファクタリングコンテストとは リクルートリファクタリングコンテストは、HOT PERPPER BeautyのAndroidアプリを題材としたソースコードを、チームでリファクタリングしていき制限時間内でなるべくキレイなコードに書き換えていくコンテストです。 今回用意したソースコードは、HOT PEPPER Beautyのアプリを題材としつつも、その全てのコードをリファクタリングしようとすると仕様理解だけで時間が終わってしまうため、「サロン検索」「サロン詳細の閲覧」「サロンのブックマーク」という3つの機能に絞ったものにしました。 また、HOT PE

新型コロナウィルスの影響によりリモートワークを導入、もしくは、導入検討する企業が急増しているなか、仮想空間でのイベント開催やアバターを用いたリモート会議などが注目を集めています。 リクルートテクノロジーズでも、Zoom.usやSlackなどの既存のミーティングツールを活用して、メンバーがそれぞれアバターとなり、打ち合わせや面談を行うチームも出てきました。 https://github.com/yoshidan/EasyVTuberRel リモート会議やアバター自体は以前からあったシステムですが、これまで利用していなかった人が利用し始めたことで、企業活動を支えるインフラのひとつとしての活躍が期待できそうだと考えています。 この流れを受けてリクルートテクノロジーズでは、仮想空間での新しい遠隔ユーザ体験を創造すべく、VRアプリケーションの検証を開始しています。 例えば社内のセキュリティルールなど

はじめに結論 自身やチームの取り組みをアピールする際、以下4つの観点 (Issue度・解の質・革新性・主体性) を意識すると、成果アピールの説得力を高めることができます。 成果 (創出した物事の価値・意義) Issue度: どういった／どのくらいの問題に取り組んだか？ (重要度・規模感・難易度) 解の質: やったこと／結果は、どういった／どのくらいの変化・貢献をもたらしたか？ (価値・意義) プロセス (成果を生み出した理由・背景) 革新性: アプローチ手法の着眼の良さ／工夫点はあるか？ (アプローチ方法) 主体性: アプローチをどのような立場で／どのくらい主体的に推進したか？ (進め方) これらの観点を意識して適切に成果アピールできるようになると、成果面談などの社内イベントのみならず、社内外のプレゼンや転職活動 (レジュメ作成・面接・交渉) など様々な場面で役に立ちます。 そもそもこれは

TestCafe で E2E テストを始めよう #2 - ベーシック認証とユーザーロール（アカウント認証） wakamsha 前回は TestCafe の大まかな概要と Getting Started をご紹介しました。 今回は ベーシック認証 と ユーザーロール という二つの認証についてご紹介します。 シリーズ一覧 概要説明 と Hello World ベーシック認証とユーザーロール（アカウント認証） 👈 この記事 よりプログラマブルな作りにする 関心の分離・メンテナブルなテストを書くためのベストプラクティス ベーシック認証が効いている環境にアクセスする 通常、ベーシック認証（HTTP Authentication）が効いているサイトへ（ curl といった）プログラムからアクセスする際は、下記の様に認証情報を URL に直接埋め込むことが多いかと思います。 # https://www

【密着取材】第12弾　プロダクト企画から営業の現場まで、幅広く染み出したUXデザイナーの想いとは 宮﨑萌子 早くも12回目となる、この「密着取材」シリーズ。今回は、サービスデザイン4部の 中山に密着です。 2016年、新卒でリクルートに入社した中山。1年目は、『スタディサプリ進路』（当時は『リクナビ進学』）、2年目からは『カーセンサー』のUXデザインを担当しています。そして現在はUXデザインを軸に、新商品開発や新規事業のプロダクト開発も担っています。 将来は自分で事業を作りたいと思っている彼にとって、リクルートのUXデザイナーはいわば「最高の環境」。プロダクトを成長させるため、UXデザインを軸にさまざまな領域まで染み出した背景とは、どのようなものだったのでしょうか。 中古車業界の「未来の当たり前」を作りたい ――「UXデザインを軸にさまざまな領域に染み出せる」とのことですが、実際にそう感じ

TestCafe とは？ TestCafe とは、Developer Express Inc. というアメリカのシステム開発会社が開発している E2E テストツールです。 A node.js tool to automate end-to-end web testing | TestCafe 同社はもともと TestCafe Studio という IDE（E2E テストケースオーサリングツール）を商用として提供していましたが、2016 年に TestCafe Studio のコア部分を OSS として提供するようになりました。今回ご紹介するのは、このコア部分についてです。 シリーズ一覧 概要説明 と Hello World 👈 この記事 ベーシック認証とユーザーロール（アカウント認証） よりプログラマブルな作りにする 関心の分離・メンテナブルなテストを書くためのベストプラクティス 大まか

はじめに エンジニアの @eiryu と申します。 突然ですが、皆さんは Groovy というプログラミング言語はご存じでしょうか？JVM言語の1つであり、Javaの豊富なライブラリが使え、動的言語でもあるためちょっとしたスクリプトやツールを作るには便利です。 この記事では、実際に私が業務で作ったGroovyスクリプトについて紹介していきたいと思います。 環境情報 この記事の内容は以下の環境にて確認しています。 $ groovy -v Groovy Version: 2.5.0 JVM: 1.8.0_181 Vendor: Azul Systems, Inc. OS: Mac OS X $ awslogs --version awslogs 0.10.0 業務で実際に使った例 awslogsを使ってCloudWatch Logsから並列でログを取得する @GrabConfig(system

はじめに リクルートテクノロジーズの 辻 健人です． GitHub では maxmellon で活動しています． 今回は，『Airシフト』における パフォーマンス改善とリファクタリングの事例を一つずつ紹介したいと思います． 『Airシフト』とは 『Airシフト』は，やりとりも作成も楽になるシフト管理サービスです． 直感的に操作できるシンプルな画面で，カンタンにシフト作成が行えます． 技術スタックとしては， React/Redux ，チャット機能に WebSocket， SSR やユーザ認証，ファイルダウンロードにBFFアーキテクチャを採用しています． 『Airシフト』はシフト表の作成や管理ができるだけでなく，大きな機能の一つとして 『シフトボード』を活用したチャットを行うことも可能です． 例えば，急用で別のスタッフにシフトを変わってもらうときや，シフトの希望を提出する締め切り前にチャットを

はじめに Swift はじめました。と聞くと、読者の方は「いまさら？遅すぎじゃない？」とか、「大切なのは何の言語で書くかよりも設計じゃないの？」などと思われるかもしれません。気持ちはわかります。 しかし実際、ゼクシィアプリのコードベースは今まで Objective-C 100% でした。そして、つい最近、はじめてプロダクションコードとして Swift のコードをリリースすることができました。本稿では、そこに至るまでに考えたことや、具体的なやり方を紹介できればと思います。 申し遅れましたが、この記事はゼクシィ iOS アプリの開発を担当している @tondol がお送りします。好きな結婚式ソングは lily white で「ふたりハピネス」です。1)ラブライブ！のキャラクターソングです。わざわざ脚注までお読みいただき、ありがとうございます。 背景 前述の通り、ゼクシィアプリはこれまで Obj

はじめに 今年度、新卒で入社した suke です。インターネットではよく omuomugin というアカウントを使っています。現在はゼクシィアプリの内製開発チームでソフトウェアエンジニアとスクラムマスターをしています。 ゼクシィのiOSアプリは2011年から開発されており、レガシーになっている部分も多くありました。本記事では、去年の5月に立ち上がったゼクシィアプリの内製開発チームで取り組んできたレガシーなソフトウェアに向き合うためにやってきたことを書いていきます。レガシーなソフトウェアの定義は様々ですが、レガシーソフトウェア改善ガイドによれば、優れたテストコードがなかったり、ソースコードが変更に対して柔軟でなかったり、いわゆる技術負債が溜まってしまっているソフトウェアのことを指します。 僕らのチームでは、改善の最初のステップとして大きく以下の3つのことをしてきました。 「レガシーソフトウェ