Pepabo Tech Portal
https://tech.pepabo.com/
GMOペパボのエンジニア・デザイナーによる技術情報のポータルサイト
フィード

Cloud Native Days Summer 2025 プレイベントにてKarpenterの運用ノウハウを発表しました
Pepabo Tech Portal
こんにちは。shibatchといいます。少し前になりますが、4月28日に、Cloud Native Days Summer 2025 プレイベントに登壇しました。進化するK8s運用:KarpenterによるCluster Autoscalerからの脱却、運用ノウハウ完全公開と題しまして、KarpenterというKubernetes上で動作するソフトウェアについて紹介しました。#CNDS2025 続いてのセッションは、@hokatabiによる、「進化するK8s運用:KarpenterによるCluster Autoscalerからの脱却、運用ノウハウ完全公開」です!YouTubeの視聴はこちらから!https://t.co/eV9VMbAMUH pic.twitter.com/C051sCVa3p— CloudNative Days (@cloudnativedays) April 22, 202530分の登壇で、時間を余すことなくKarpenterについて自分の知見を一から十まで共有したので、この記事ではスマートフォンでも読みやすいように内容をかいつまんでご紹介します。なお、内容の詳細は以下の登壇資料をご覧ください。1. はじめに1.1 自己紹介技術部 技術基盤グループに所属し、複数のKubernetesクラスタの設計、構築、運用、セキュリティ対策などを担当しています。特にAWSでのプラットフォーム基盤の設計、構築に強みを持っています。1.2 GMOペパボのマルチブランド戦略とKubernetesGMOペパボでは、複数のサービスをマルチブランド戦略で展開しています。Kubernetesもさまざまなサービスで導入されていますが、本日はそのうちの2つのサービス(SUZURIとminne)でのKubernetesクラスタについての話になります。1.3 アジェンダKarpenter入門編インストール編運用編2. Karpenter入門編2.1 Karpenterとは私がKarpenterを知ったのはCloud Native Days Tokyo 2023です(この時の参加レポートはこちら - CloudNative Days Tokyo 2023に参加しました)。Karpenterは、Kubernetesクラスタ用のノードの動的なスケールアウトとスケールインを自動化するノード
20時間前

「刺さる」展示はまず差をつくる。でもちゃんと馴染ませる──RubyKaigi 2025でのブース設計戦略
3

Pepabo Tech Portal
GMOペパボの事業開発部で(自称)デザインエンジニアをやっている gyugyu です。好きな豆腐は島豆腐です。この記事は、RubyKaigi 2025の展示ブースで「VTuber配信体験」という異質な企画を持ち込んだ背景と設計意図を、技術者文化との接続という観点から振り返るものです。きっかけは「違和感から始まる体験」今回のブースは、VTuberとして配信を体験できるコーナーを提供し、そこに弊社が開発するサービスである Alive Studio を使って画面上に素材を配置できるというものでした。VTuberとして配信するための準備は全てそろった状態にしておき、ブースに来訪された方は一切の準備が不要で、すぐに配信を始めていただけるという環境を作りました。RubyKaigiのような技術カンファレンスにおいて、こうした体験は明らかに異質であり、来場者にとっては「何これ?」と足を止める導線になります。技術カンファレンスのブース展示といえばエンジニア向けプロダクトやプロダクトの実装技術という観点になりがちですが、明確に異なる切り口を提示することで差異化を図ることができました。技術カンファレンスという場で展示が担う最初の役割は、“伝える”ことよりも“立ち止まらせる”ことです。あえて文脈上の違和感を設計に織り込み、そのあとで「実はこういうことだった」と気づける構造にすることで、技術者の好奇心と接続するきっかけをつくろうとしました。好奇心にどう届かせるか私はこのブースを設計するにあたって、RubyKaigiに来場するエンジニアの多くが“好奇心ドリブン”で動くことを好むと捉えていました。専門領域外の技術や見慣れない体験に対しても、「ちょっと試してみたい」と思う傾向が強い──そうした人物像を仮定しながら、体験設計の構造を考えました。アバターが参加者の身ぶり手ぶりに反応して動く光景や、配信体験という非日常的な入口は、好奇心を持ったエンジニアをひきつけるのに有効な構成でした。ブースに来訪くださった方の中には、配信ツールの詳細な構成についてご質問いただき、VTuberとして手元で環境を整える方法に興味を持った方もいたようでした。文脈への接続──ruby.wasmという装置展示で使用したAlive Studio自体は、実はRubyでは作られていません。この点は、RubyKaigiのブースとして展
4日前

フリーナンスにおけるフロントエンドでのファイルフォーマットチェック
Pepabo Tech Portal
こんにちは!GMO ペパボのグループ会社である GMO クリエイターズネットワークのよしだです。今回は、私達の代表的なサービスであるフリーナンスにおけるフロントエンドでのファイルフォーマットチェックについて紹介したいと思います。はじめにフリーナンスとは、「フリーランス・個人事業主を支えるお金と保険のサービス」のことです。フリーナンスで提供している請求書買取サービス「即日払い」では、請求書が実在することを証明する証憑(エビデンス)を提出していただいています。先月のアップデートで提出可能なファイル形式に動画が追加され、下記の通りとなりました。pdfjpegjpgpnggifmp4movファイルアップロード時のファイルフォーマットチェックはバックエンドで実施していますが、フロントエンドでも実施しています。フロントエンドでも実施することにより、ユーザー体験の強化やトラフィックの節約に繋がります。ファイルフォーマットチェックの仕方ファイルフォーマットチェックはマジックナンバー(フォーマット識別子)を使って実施しています。ファイルの先頭 1024 バイトを取得し、16 進数に変換して判定します。// ファイルのヘッダー1024バイトを取得(より正確な判定のため)const arr = (new Uint8Array((e.target as FileReader).result as ArrayBuffer)).subarray(0, 1024;let header = '';for (let i = 0; i < arr.length; i += 1) { header += arr[i].toString(16).padStart(2, '0');}画像であれば先頭 8 バイトで判定可能ですが、動画で厳密な判定を行うために 1024 バイト取得しています。また、拡張子とマジックナンバーの関係は下記の通りになります。拡張子 マジックナンバー(16 進数) PNG 89 50 4E 47 GIF 47 49 46 38 JPEG FF D8 FF + (E0/E1/E2/E3/E8) PDF 25 50 44 46 MP4 66 74 79 70 + (ブランド)6D 70 34 31 / 6D 70 34 32 / 69 73 6F 6D / 69 73 6F 32 MOV
12日前

デザイントークンが正しく利用できていることを開発サイクルで継続的に検査する
Pepabo Tech Portal
ウェブアプリケーションにおける一貫性のあるUIを提供し、結果として快適なUXを実現するために、昨年からエンジニアとデザイナーでペパボ共通基盤デザインシステムである「Inhouse」のアプリケーションへの導入を推進しています。この取り組みの中で、「デザイントークンがどの程度アプリケーションで活用されているか分からない」という課題が見えてきました。導入の対象となるアプリケーションはコードの規模も大きいことから、既存のスタイルを壊さないように徐々に進めていく必要があります。このため、日々の開発の中で置き換えを進めていくのですが、その速度を把握することは今後の導入の作戦を決定するためにも重要です。また、デザイントークンの存在を知らないフロントエンドエンジニアやデザイナーが利用する機会を逃したり、本来の意図とは異なる使い方をする可能性もあります。そこで、Stylelintを活用して、デザイントークンが正しく利用できていることをチェックするようにし始めました。この取り組みによって、ルール違反件数の総数から導入の進捗が分かるようになり、かつ日々の開発の中でデザイントークンの存在を知ることができるようになると期待しています。デザイントークンの利用をチェックするカスタムルールInhouseのデザイントークンはStyle Dictionaryで記述されています。今回対象となるアプリケーションはSassでスタイルを記述していますが、InhouseにはデザイントークンをSass Functionから取得する仕組みがあります。たとえば、フォントサイズのデザイントークンを参照するには、このようにコーディングします。@use "@pepabo-inhouse/adapter" as adapter;.foo { font-size: adapter.get-font-size(m);}一方で、次のように記述されていた場合には、本来デザイントークンから取得すべき値がハードコードされていることになります。.foo { font-size: 1.2rem;}つまり、あるSassのプロパティに対応する値をチェックし、デザイントークンを使うべき場面においてはルール違反であるというルールを記述すればよいことになります。これは、例えば以下のようなカスタムルールによって検査できます。import styleli
13日前

CSが優勝! 第一回 競技Vibe Codingを社内で行いました
Pepabo Tech Portal
サムネイルは競技Vibe Codingのイメージ図です。こんにちは。ペパボのVibe Coding大臣のyukyanです。日本初!?「Vibe Coding研修」を2025年新卒研修の目玉として実施しますをぜひご覧ください。競技Vibe Codingとは?「お題のものをVibe Codingを駆使して一番早く作った人が勝ち」というシンプルなルールの競技です。お題が与えられますそれをVibe Codingで作ってくださいコピペ以外なら道具は基本なんでもありです。要件の調べ物に使うのも良いでしょうCursor、ChatGPT、Anthropic、etc…可能な限りVibe Codingしてください「作った!!!!!」と宣言して、「要件を満たせたプロダクト」を見せれた人が勝ちです要件を満たせているか、客観的に判断できる材料があるとよいでしょう厳密なテストケースがあるわけではないので、司会の主観でできたかどうかを判断します、ご了承ください!大会の目的ペパボでは、日本初!?「Vibe Coding研修」を2025年新卒研修の目玉として実施します にも記載した「大量のコード生成に耐えうるエンジニアリング」を実現するため、Vibe Codingに関する様々な取り組みを進めています。以前、全社員向けにVibe Coding研修としてCursorやCopilotの機能をハンズオンで教える会を設けました。その中で、次のアクションとして「LLMの威力をより感じてもらうにはどうすれば良いか?」という課題がありました。そこで生まれたアイデアになります。大会概要今回は職種問わず参加者を5名募集し、Google Meet上で各々の画面を共有しながら行いました。また、その模様を限定公開のYouTube Liveで配信しました。Vibe Codingをしている様子を見てもらうことで、それぞれのやり方の気づきを得てもらったり、すごいスピードでプロダクトができるという部分に驚いてもらう、といった効果を狙っていました。また、職種を問わず参加してもらうことで、もはやコーディングは職業エンジニアでなくても現実的に可能になってきている、といったことを伝える目的がありました。大会の参加者今回は以下の5名に参加してもらいました。Ā−YA ロリポップ・ムームードメイン事業部 CSグループてつを。 新卒14期 事業開発
13日前

minne mobile合宿を実施しました
Pepabo Tech Portal
こんにちは。minne事業部プロダクト開発チームのkyuです。普段の業務ではなかなか時間が取れない「あれやこれ」。そんな課題にじっくり向き合うために、minneのモバイルエンジニアのパートナー(社員)たちと合宿を行ったため、その内容・様子についてご紹介いたします。ちなみに、昨年の合宿の様子もこちらからご覧いただけます。どんな合宿だったのか?合宿で得られたもの合宿を振り返って 良かった点反省点各パートナーの感想と取り組み tepikyuumatoshisattonまとめどんな合宿だったのか?今回の合宿では、「普段取り組めていない領域や技術に挑戦し、短時間でアウトプットする!」というテーマが掲げられていました。このテーマは、ペパボのビジョンである「もっとおもしろくできる」と「人類のアウトプットを増やす」に基づき、minneのアプリをもっと幅広いユーザー層に届けたい、という思いから始まった取り組みです。合宿といっても、形式としては“もくもく会”に近く、各自で持ち寄った、「普段なかなか取り組めていない課題」や「気になっている技術的なこと」に集中して取り組む、というスタイルで実施しました。昨年の合宿では、大まかな方向性はあるものの当日の進め方が曖昧だったため、議論が発散してしまい、実作業に入るまで時間がかかるという反省がありました。今回はその反省を活かし、日頃からNotionのデータベース上に「合宿でやると良さそうなこと」をリストアップしておき、その中から各自がテーマをピックアップして取り組む形式にしました。合宿で得られたもの以下のようなテーマで取り組みを進め、各自が実装・検証まで行い、動作を確認できるところまで進めることができました。iPad対応の検討とPoC:既存UIの対応状況の調査とレイアウトの調整AIを活用した文章校閲:送信するメッセージの自動チェックPoCRiveを用いたアニメーション処理の実装:RiveというアニメーションライブラリのPoCWidget表示:Androidのデバイスのホーム画面にminneの情報を表示するPoCどれもまだプロダクションコードに落とし込むには課題が残っていますが、PoCとしては良い手応えを得られ、「実現可能性がある」と確認できたのは大きな収穫です。今後は、他チームやデザイナーと連携しながら、本実装に向けた調整を進めていければよいなと考
19日前

Amazon RDSの監査ログを保全する信頼性の高いソフトウェアの設計と実装について
Pepabo Tech Portal
はじめに背景 信頼性監査プロセスコスト要件 機能要件非機能要件設計 システムの構成要素なぜECSを選んだのか監査ログ保全における適切なリソース管理私達のユースケースに合わせたオブジェクトキー実装と検証を繰り返しフィードバックループをまわす ログが途中で途切れる並行運用 転送量のコスト増加ECS Fargateのキャパシティ不足ログの整合性をチェックログローテーションサイズの変更オンコールドキュメントを作成成果Future Worksまとめ harukindrumatoはじめにこんにちは。技術部技術基盤グループのharukin,drumatoです。カラーミーでは従来Data Firehose(旧Kinesis Data Firehose)を用いて、Amazon RDSの監査ログをS3に保存する仕組みを運用していました。しかし、運用していく中で継続的に大きいコストがかかっていることがわかったため、それを改善する取り組みを行いました。本記事では、発見された課題と解決策、それによって得られたメリットについてご紹介します。以後、このプロジェクトを colorme-rds-audit-logs-s3 と呼称します。背景カラーミーショップは国内最大級のECサイト作成サービスです。現在の総流通額は3兆円、総導入店舗は22万件を超えており、多くのユーザの方々に使っていただいております。わたしたち技術基盤グループは事業横断的な組織であり、このカラーミーショップに対してもサービスの信頼性向上に責任を持って取り組んでいます。カラーミーショップでは主となるデータベースにAmazon RDS for MySQLを採用しています。このデータベースには、商品情報や受注管理情報など、膨大なデータ量を蓄積しています。参考: カラーミーショップDB構成このRDSインスタンスに対し、監査ログを有効にし、インシデント発生時や内部監査時に調査できるようにしていますが、日々大量のクエリが処理されるため、監査ログのデータは非常に大きくなっています。これまで監査ログはRDSの設定でCloudWatch Logsへのエクスポートを有効化し、Data Firehoseを通じてニアリアルタイムでS3に保存していました。しかし、「監査ログデータの調査」という目的に対し、この手法が適切であるかを再度検討した結果、以下の3つの
1ヶ月前

RubyKaigi 2025 に協賛するので内容を紹介します
Pepabo Tech Portal
EC事業部のakatsuuraです。インターネットでは@UVB_76として生きています。さて、今年のRubyKaigiの開催が近づいてまいりました。GMOペパボ株式会社は、RubyKaigi 2025に協賛することをお知らせします。そして、この記事ではGMOペパボが実施するRubyKaigi 2025に関する取り組みを紹介していきます。四国への旅をサポートRubyKaigi 2025の会場である愛媛県松山市へのアクセスをサポートするため、「Rubyist Bulk Load」と称して東京から四国の徳島までのフェリー片道の旅程を支援する企画を実施します。参加者の皆様には18時間かけて東京から四国への旅をお楽しみいただきます。この記事が公開される頃にはおそらく参加者の方々は乗船に向けて準備をしているか、あるいは船の上でしょうか。素敵な旅になることを願っております。イベントの概要についてはGMOインターネットグループのブログでも紹介されているので合わせてご覧ください。RubyKaigi 2025にFerry Sponserとして協賛いたします / 開発者向けブログ・イベント GMO DevelopersブースでのVTuber配信体験スポンサーブースでは、GMOペパボが提供する「Alive Studio」を使ったVTuber配信体験コーナーを用意しています。Alive StudioはOBS Studio と連携して利用でき、豊富な機能とプリセットにより配信の支援を行うソフトウェアです。配信を体験いただいた方にはトートバッグやペパボのオフィスがある九州銘菓のプレゼントもありますのでぜひお越しください。最終日にドリンクアップも実施しますイベント3日目の夜には、参加者の皆様との交流を深めるためのドリンクアップを開催いたします。こちらは、Platinum SponsorとなっているGMO Flatt Security株式会社との合同開催となっておりおかげさまで満員御礼となっております。終了直後の熱気をそのままに、みなさんで語らいましょう。GMO Internet Group Drinkup at RubyKaigi 2025 - connpass終了後もVideo SponsorとしてRubyKaigiのセッションのアーカイブはYouTubeのRubyKaigiチャンネルで公開され
1ヶ月前

UnleashとGA4でシンプルなABテストを実装する
Pepabo Tech Portal
背景SUZURI事業部Webアプリケーションエンジニアの@kromiiiです。SUZURIではUnleashを使った段階リリースの制御を行っています。https://tech.pepabo.com/2023/06/19/suzuri-uses-unleash/新機能をリリースする際、一度に全ユーザーに対して機能をリリースしてしまうと、不具合が見つかった場合の影響範囲も広くなります。ユーザーにリリースする前に社内で試すといったことも可能になるので、新機能開発においては必ずといっていいほど活用されています。このような運用を続ける中で、新機能を追加するにあたってA/Bテストを実施して施策の効果をみたいといったニーズも生まれてきました。A/Bテストというと有名どころではVWO, Optimizely, GrowthBookといった専用のツールが存在しますが、Webアプリケーションエンジニアが中心のチームだとこうした効果検証専用のツールを導入したとしても、担当者が固定されてしまい、結局限られた人しか使えないツールになりがちです。この記事では、UnleashとGA4を利用して、初心者でも簡単にA/Bテストを実装する方法を紹介します。方法UnleashとGA4を組み合わせたABテストの実装については実はUnleashの公式ドキュメントにも書かれています。https://docs.getunleash.io/feature-flag-tutorials/use-cases/a-b-testing基本的にはこれと同じように実装すれば問題ありませんが、比較対象がA/Bの2種類であればドキュメントに書かれているVariants機能を使わずとも実装可能です。また、Google Analyticsの設定についてもドキュメントではさらっと書かれているのですが、少々工夫が必要だったので上記2点について解説したいと思います。Unleashの設定まずはFeature Flagを作成します。Strategy は Gradual Rollout を選択します。公式ドキュメントだと、Rolloutを100%にしてVariantsにユーザーの割り付けを指定する方法が書かれています。A/Bテストの候補が3つ以上ある場合は、Variantsを使った方法を採用する必要があるのですが、候補が2つの場合は、Gradu
1ヶ月前

JetBrains AIを1週間使ってAndroid開発における使い勝手をGitHub Copilotと比較してみた!
Pepabo Tech Portal
minne事業部プロダクト開発チームでエンジニアリングリードをしているtepiです。先日JetBrains AIがAndroid Studioで使えるようになったという発表がありましたね!Android Studio上で製品コードに対して使えるAIコーディングツールとしては実質GitHub Copilotのみで、比較対象が無く悪くはないがGitHub Copilotしかないから使っている状態ではありました。そこに新たな選択肢が出てきましたので、移行の検討のためにもまずは1週間のトライアルを使ってプロダクトコードの開発を行ってみました。ご利用を検討している方の判断の参考になると幸いです。利用の開始にあたって 会社のポリシーやガイドラインへの準拠の確認開始手順使えるAIモデル変更した方が良い設定よかったところ コミットメッセージの出力クラスをインポートしてくれる補完する際に勝手に行末の括弧がなくならない補完候補の色がわかりやすい悪かったところ 補完はGitHub Copilotの方が優秀コミットメッセージの出力まとめ利用の開始にあたって会社のポリシーやガイドラインへの準拠の確認まず利用を開始する前に、ペパボのAIツールを利用する際のガイドラインにもある、生成に利用されるコードがAIモデルの学習に利用されるかを調査しました。ソースがモデルの学習に利用されるかは、JetBrains AIの利用規約に以下のように記載があり、利用されないことが明示されています。No Use of Your Inputs and Data for Training of Language Modelsまた、Use of Inputs and Your Data for Improvements of JetBrains AIという項目があり、入力したデータ等(Input)を利用することが書かれていますが、前提として「If You consent to detailed data collection」という記載があり、同意している場合のみのようです。こちらは以下のような設定があり、オフになっていれば問題ないと判断しました。加えて、恐らく関係はないかと思われますが、Android Studioの利用データの送信(Appearance & Behavior -> SystemSettings ->
1ヶ月前

日本初!?「Vibe Coding研修」を2025年新卒研修の目玉として実施します
Pepabo Tech Portal
こんにちは。研修担当のyukyanです。GMOペパボは2025も新卒研修をやっていきます。今年の目玉はVibe Coding研修です。この記事では、まずVibe Codingとは何か、そしてVibe Coding研修の目的と内容、最後にCTOのあんちぽからVibe Coding研修にかける思いをお話します。Vibe Codingとは?Vibe Codingは、「完全に雰囲気に身を任せて、コードの詳細に気を払わず、自然言語だけで指示をしてコーディングする」コーディングスタイルです。このスタイルは、OpenAIの共同創設者であり、TeslaのAIディレクターとしての経験があるAndrej Karpathy氏が2025年2月に提唱したものです。具体的に説明していきます。There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper…— Andrej Karpathy (@karpathy) February 2, 2025かつてのコーディングスタイルは、コードの詳細に気を払うことが当たり前でした。言語仕様やライブラリ仕様、formatting、テストについてなど、エンジニアは自分のさまざまな知識を、文字通り緻密なコードに落とし込む必要がありました。また、2021年6月にはGitHub Copilotのテクニカルプレビューが発表され、エンジニアが「何をプログラムしたいか」の要求を自然言語で出し、コードを出力してもらうことができるようになりました。コーディングはそれまでに比べはるかに簡単なものになりましたが、ハルシネーションなどの課題から完全にコーディングを任せることは難しく、Copilotはあくまで操縦士をサポートする副操縦士の立場に留まりました。しかし2025年現在、GPT-4oやG
2ヶ月前