はてなブックマーク

はてなのシステムプラットフォームチームで SRE として働いている id:masayoshi です。 この記事は、はてなの SRE が毎月交代で書いているSRE連載の 6 月号です。5 月号の記事は id:KashEightさんの DMARC レポートを Mackerel + OpenTelemetry でいい感じに可視化する - 実装と躓き - Hatena Developer Blog でした。 さて今回の記事ですが、NotebookLMに公開されている自社の技術ブログ(例えば本記事のSRE連載など) や自分の登壇資料や文章を学習させて、新しく入社したSREのオンボーディングへの利用やSREがいない開発チームで活用できるのではないかと思い、ひとまず試してみたというゆるふわ記事になります。 実際に行っているオンボーディングは、2024年のSRE連載記事に詳細があるのですが、AWSやTer

こんにちは、エンジニアリングマネージャー の id:onk です。 Hatena Developer Blogの連載企画「卒業生訪問インタビュー」では、創業からはてなの開発に関わってきた取締役の id:onishi、CTOの id:motemen、エンジニアリングマネージャーの id:onkが、いま会いたい元はてなスタッフを訪問してお話を伺っていきます。 id:onk が担当する第15回のゲストは、教育プラットフォームを提供するClassi株式会社でエンジニアとして活躍しているid:aereal さんこと、中澤亮太さんです。 aerealさんは、2012年にはてな入社後、「はてなブログ」のHTTPS化などの大きなプロジェクトや「はてなブログ タグ」の開発、課金システムのAWS移行やお客様サービスの開発協力など、幅広くご活躍いただきました。 現在は、Classi株式会社でチームやサービスの技

こんにちは。マンガアプリチームでデザイナーをしている id:gano-k です。 GigaViewer for Apps(以下、GigaApps)は、マンガアプリに必要な「ビューワ」「作品詳細」「マイページ」などの基本機能を共通モジュール化し、複数のサービスで再利用できる仕組みを提供しています。 各サービスごとにカスタマイズされたUIを提供しつつも、裏側では共通の基盤が動いているのが特徴です。 このような構造の中でデザインを行う際には、「各サービスへの最適化」と「再利用性を担保する共通設計」の両立が求められます。 『Inside GigaViewer for Apps』連載10回目は、GigaAppsにおけるマルチテナント対応のデザインコンポーネント設計と、その実践的な工夫についてご紹介します。 デザイン時にマルチテナントで気をつけていること Figmaを利用したコンポーネント管理 複雑な

2014年9月に創刊された「少年ジャンプ＋（以下「ジャンプ＋」）」。『SPY×FAMILY』、『怪獣8号』、『ダンダダン』、『ふつうの軽音部』など多数のヒット作が同サービスから生まれており、デジタルマンガ雑誌サービスを牽引する存在として知られるようになりました。 そんな「ジャンプ＋」の成長を支えてきたのが、誰でも自由にマンガを投稿できる「ジャンプルーキー！」です。ジャンプルーキー！の投稿システムははてなが開発しており、さらにジャンプ＋にははてなが開発した「GigaViewer」が採用されるなど、サービス開始から現在に至るまで、株式会社集英社とはてなは緊密なパートナーシップを築いてきました。 今回、Hatena Developer Blogでは、「ジャンプ＋」10周年という節目の年に、編集長を務める籾山悠太さん（@momiyama2019）と、はてな執行役員・石田樹生（id:jusei）の対

こんにちは。Webアプリケーションエンジニアの id:handat です。 この記事は『Inside GigaViewer for Apps』連載9回目の記事です。 今回は「GigaViewer for Apps」のバックエンドも担う 「GigaViewer for Web」(以下 GigaViewer) のサーバサイドでのテストの対する取り組みについて紹介します。 GigaViewerでは、Flaky Testが発生が課題となっていました。 Flaky Testとはアプリケーションの実装やテストコードを変更していないにも関わらず、実行するごとに結果が変わり、一定の確率で失敗してしまうテストのことを指します。 GigaViewerのリポジトリは大規模なモノレポで構成されており、並列実行するジョブの実行時間を合計するとバックエンドのテストだけでも1回のCI実行に延べ1時間以上を要します。 開

はてなサマーインターンシップ2025 実行委員長のid:daiksyです！ いよいよ、今年のはてなサマーインターンシップの募集締切が迫ってきました。 今回は、今年のはてなサマーインターンシップの見どころを一巡りしてみようと思います。 hatena.co.jp 京都で過ごす講義パートと実際のチームで働く実践パート 前半パートの講義予定をご紹介 後半実践パートの配属予定チーム インターン参加者がもれなく貰えるグッズ！ はてなサマーインターンシップ2025参加のための審査のポイント はてなのインターンでEXPO級の夏を体験しましょう！応募締め切りは 2025年6月9日（月）12:00（日本標準時）！！ 京都で過ごす講義パートと実際のチームで働く実践パート はてなサマーインターンシップ2025は、前半の1週間の講義パートと、後半2週間の実践パートの計3週間のカリキュラムです。 前半は、はてな京都オ

はてなのシステムプラットフォームチームで SRE として働いている id:KashEight です。 この記事は、はてなの SRE が毎月交代で書いているSRE連載の 5 月号です。今回の記事は前回の 4 月号の記事 DMARC レポートを Mackerel + OpenTelemetry でいい感じに可視化する - 作成に至るまでの続きとなります。 前回: developer.hatenastaff.com Mackerel へ投稿 (前段階) 投稿する要素を選ぶ SPF Alignment, DKIM Alignment, DMARC Passage Published Policies (as reported) Alignment Details DMARC Forensic Reporting Organisations parsedmarc で使用できる出力方法 構成 Mack

こんにちは、Android アプリエンジニアの id:kk__777 です。『Inside GigaViewer for Apps』連載8回目は、出版社向けマンガビューワのアプリ版である「GigaViewer for Apps」（以下 GigaApps）のVRTから静的解析まで、Androidのテストについてお話しします。 GigaApps UnitTestの歴史と現在 概要 アーキテクチャとUnitTestの基本方針 使用しているツール モッキングライブラリ コルーチンディスパッチャの差し替え アサーション（Truth + Expect） テストツールの変遷 UIテストの取り組み VRT（Visual Regression Testing）の導入と運用 概要 Compose Preview を使った VRT GigaApps特有の難しさ UIプラグインによるPreviewの難しさ どう対

はてなで働くエンジニアにアンケートシリーズ第29回は、技術グループのマネージャー、id:daiksyに話を聞きました。 EMConfで登壇するdaiksy アルムナイ入社第1号 アルムナイ入社第1号 職種組織の専任マネージャ 目先のわかりやすい成果に囚われず取り組んでいく 多様な構造の組織をマネジメントしていく ── Q. はてなidとその由来を教えてください はてなidは daiksy です。 本名の粕谷大輔をもじっています。 Daisuke Kasuya -> Daisuke Kasuya -> DaiKsy -> daiksy です。 インターネットでハンドルネームを使う際はだいたいこれを使っています。 “だいくしー”と読んでほしいのですが、daiskyと誤読されて”だいすきー”さんと呼ばれることも多く、その場合ちょっと恥ずかしい気持ちになります。 とある技術カンファレンスのパネルデ

2025年５月23日-5月24日にベルサール神田でTSKaigi 2025が開催されます！ 2025.tskaigi.org はてなはブロンズスポンサーとして協賛しています。また、id:cateiruがスタッフとして関わっています。 さらに、エンジニア2名のプロポーザルが採択され、id:mizdraとid:susisuが登壇します！！ 登壇内容を以下に簡単にご紹介します。 また、イベントスタッフとして参加しているid:cateiruからのコメントもご紹介します。 id:mizdra フロントエンドエキスパートの id:mizdra です。私は2日目に「TypeScript Language Service Plugin で CSS Modules の開発体験を改善する」というタイトルで発表します。 CSS Modules はコンポーネントに CSS を当てる手法の1つです。広く使われている

iOS アプリエンジニアの id:maiyama4 です。『Inside GigaViewer for Apps』連載7回目は、出版社向けマンガビューワのアプリ版である「GigaViewer for Apps」（以下 GigaApps）の iOS アプリのテストについて、Visual Regression Testing（以下 VRT）に重点を置いて紹介します。 VRT VRT の導入経緯 VRT のツール VRT 対象の選定 VRT を実行するデバイス メディアごとの設定を反映するためのモジュール構成 VRT の実装 参照画像の作成・更新 参照画像の置き場所 VRT の運用フロー ユニットテスト どの部分にユニットテストを書いているか モノレポでの CI 実行 終わりに VRT VRT は、アプリケーションのコードを変更した際に UI の差分を検知することで、意図しない表示くずれが発生し

こんにちは、マンガアプリチームのエンジニアで『Inside GigaViewer for Apps』編集部の id:kouki_dan です！ マンガアプリチームでは『Inside GigaViewer for Apps』と題して、チームのメンバーがGigaViewer for Appsについて代わる代わる書いていく連載をHatena Developer Blogで掲載中です。 developer.hatenastaff.com 連載は今年の2月から始めていて、まだまだ続きます。GigaViewer for Appsは、マルチテナントアプリとして提供されていて、設計上の工夫がたくさんあります。これまでのトピックは、iOS/Android/バックエンドそれぞれの工夫や、個別の機能であるイベント計測についてやデータ移行についてです。 さて、先日Googleが提供しているAIベースのドキュメント

技術グループマネージャー の id:daiksy です。このたび、はてなサマーインターンシップ2025の募集を開始しました。2025/8/18（月）～2025/9/5（金）に開催する3週間にわたるインターンシップとなります。エンジニアを目指す学生の皆さん、奮ってご応募ください。 「はてなサマーインターンシップ2025」は、1週間の京都オフィスと、2週間のリモートを組み合わせたハイブリッドなインターンシップです。 Webサービス開発の技術を学ぶ前半パートと、開発チームに配属されてサービス開発を実践する後半パートで構成されます。 前半日程は、Webサービスの開発・運用について、講義と課題による集中的なトレーニングを行います。アプリケーションコードを書くことだけではなく、インフラやデザインなどの講義を通じてWebサービスをつくることを多角的に学びます。今年は新しい試みとして、この前半パートのみ参

はてなのシステムプラットフォームチーム (以下シスプラ) で SRE として働いている id:KashEight です。社会人 2 年目です。 この記事は、はてなの SRE が毎月交代で書いているSRE連載の 4 月号です。3 月の記事は id:onk さんのはてなの「PWG」という取り組みを builderscon 2024 で話してきましたです。 この記事では DMARC レポートを自社サービスである Mackerel、オブザーバビリティデータをいい感じに扱うためのプロジェクトである OpenTelemetry を用いて可視化した話の導入編となります。 文量の都合上、実際の実装やサービス提供の話は次の SRE 連載に回します。 DMARC、DMARC レポート 今までの運用 問題点 Mackerel 化するに至るまで とある改善要望 使用用途のヒアリング ニーズから考えてみる Open

こんにちは、GigaViewer for Webの開発・運用を担当している id:masawada です。今回は『Inside GigaViewer for Apps』連載の6回目として、運用中のマンガサービスにGigaViewer for Appsを導入する際のデータ移行事例についてご紹介します。 GigaViewerはビューワという名前を冠していますが、単なるマンガの閲覧機能だけでなく、入稿や作品管理・販売システムなど様々な機能をパッケージにして出版社様向けにご提供しているシステムです。また、新規サービスの立ち上げだけでなく既に運用されているサービスを受け入れることもあり、エンドユーザ様の商品購入データなど引き継ぎが必要なデータを元サービスからGigaViewerに移行する対応を行っています。この記事では、2024年3月に実施した少年ジャンプ＋アプリ版のシステム移管(GigaViewe

こんにちは。マンガアプリチームで iOS エンジニアをしています id:aryzae です。 2025 年 4 月 9 日から 11 日にかけて立川ステージガーデンにて try! Swift Tokyo 2025が開催されます。 はてなは、今年もシルバースポンサーとして協賛させていただいております。 昨年の参加ブログ: try! Swift Tokyo 2024 にスポンサーとして参加しました - Hatena Developer Blog はてなからの参加者 気になるセッション try! Swift Tokyo 2025 で会いましょう はてなからの参加者 はてなからは、Organizer の id:yutailang0119 が主催しており、スポンサーとして id:aryzae と id:tokizuoh が参加します。 進化し続けている Swift 言語で、今年はどんな内容のセッショ

こんにちは、Androidエンジニアのid:r4wxiiです。『Inside GigaViewer for Apps』連載5回目は、メディア共通機能の1つであるイベント送信機能を、GigaViewer for Apps(以下、GigaApps)の標準機能として実現するための設計について紹介します。 イベント送信機能とは GigaAppsのイベント送信機能が複雑となってしまう理由 メディアによって異なる計測プラットフォーム メディアによって異なるイベント GigaAppsにおけるイベント送信機能を噛み砕いた設計 メディアによって異なる計測プラットフォーム メディアによって異なるパラメータ イベントを適切に振り分けて送信する 実装 イベントを送信する メディアによって異なる計測プラットフォームを扱う メディアによって異なるパラメータを扱う イベントを適切に振り分けて送信する 終わりに イベント

こんにちは、id:onk です。 この記事は、はてなのSREが毎月交代で書いているSRE連載の3月号です。2月の記事はid:s-shiroさんの既存のDeploy Preview環境をmirage-ecsに移行する - 実装編です。 2024 年 8 月 10 日に開催された builderscon 2024 で「すこやかなサービス運営のための PWG」というタイトルで登壇してきました。 speakerdeck.com YouTube にも上がっています www.youtube.com この記事では、その発表内容をざっくり紹介しつつ、ふりかえりを書いてみようと思います。 PWG とは Performance Working Group の略で、はてな社内で 10 年以上続いている取り組みです。一言で言うと「サービスの運用状況をチームで見直す月次定例会」です。 プロダクト開発チームとインフラ

こんにちは、CTO の id:motemen です。 Hatena Developer Blogの連載企画「卒業生訪問インタビュー」では、創業からはてなの開発に関わってきた取締役の id:onishi、CTOの id:motemen、エンジニアリングマネージャーの id:onkが、いま会いたい元はてなスタッフを訪問してお話を伺っていきます。 id:motemen が担当する第14回のゲストは、ポーランドを拠点とするソフトウェア開発およびコンサルティング企業であるVirtusLabで、Scalaのコンパイラエンジニアとして活躍しているid:tanishiking24 さんこと、谷口力斗さんです。 id:tanishiking24 さんは、京都大学工学部の学生時代からはてなにアルバイトとして所属。その後、2017年に新卒で入社し、「はてなブックマーク」をScalaとDDDで完全リライトする大規

こんにちは。はてな技術グループマネージャーの id:daiksy です。 今年も昨年に引き続き、8月後半〜9月前半にかけて3週間程度のプログラムを企画しています。リモートとオフィスの両方を活用したハイブリッドの開催を検討しています。 昨年の様子はこちらをご覧ください。 はてなサマーインターンシップ2024 レポートサイト はてなサマーインターンシップの特徴は、前半は講義、後半は実践と、「学び、そして作る」両方を体験してもらえることです。今回も、最高の夏を過ごしていただけるカリキュラムを準備中です。 前半はWebアプリケーション開発の講義と課題に取り組んでもらい、はてなのエンジニアスタッフによるコードレビューや面談でフィードバックを行います。最新の技術トピックに加え、エンジニアリング以外の領域（デザインなど）にも踏み込んだ、プロダクト開発全般について学んでいただける、はてなならではの充実した

こんにちは、はてなで GigaViewer for Web とバックエンドを開発している id:cateiru です。 この記事は『Inside GigaViewer for Apps』連載の第4回目です。ここまではアプリを中心に連載していましたが、今回は Web とアプリの両方で使用しているバックエンドについて、複数サービスとアプリを支えるしくみを紹介していきます。 GigaViewer のバックエンド構成 マルチテナントにする理由とメリット課題 アクセス数のピークはサービスによって分散する 機能を横展開しやすい システム障害が発生すると全サービスに影響しうるという課題 サービスごとにある固有機能と出し分け Feature を使用して機能を出し分けるさまざまな方法 開発環境でのみ Feature を有効化する WIP Feature 終わりに GigaViewer のバックエンド構成 G

こんにちは、2025/02からAndroidエンジニアとして入社したid:matsudamperです。 GitHub Actionsで外部のactionを使用する時に、どのようにバージョンを指定していますか？ バージョンの指定方法とメリット、デメリット よく使われるactions/checkoutのREADMEのUsageでは以下のように書かれています。これでv4のタグが使用され、最新のv4.x.xに入った改善が使用側のコードの更新なしに使用する事ができます。 - uses: actions/checkout@v4 この書き方のメリットとデメリットは以下です。 メリット v4の間は勝手に更新され、新しいバージョンに書き換える手間が無い デメリット ビルドに再現性が無くなる 不具合が混入した場合、突然動かなくなる。後でRe-Runすると直っている。 actions/checkoutでもこれが

こんにちは、Android アプリエンジニアの id:mangano-ito です。『Inside GigaViewer for Apps』連載3回目は、iOS/Android エンジニアの id:kouki_dan と一緒に出版社向けマンガビューワのアプリ版である「GigaViewer for Apps」（以下 GigaApps）のAndroidアプリを実現するしくみについて紹介します。 GigaAppsとは アーキテクチャ GigaAppsでマルチテナントを実現する方法 モジュールのconfig リソースの差し替え UIプラグイン その他 実例紹介 実例1: ポイントのアイコン・文言 実例2: マイページヘッダー 実例3: 作品詳細ヘッダー 実例4: 購入ダイアログの上部 終わりに GigaAppsとは 前回の記事でも紹介したように、GigaAppsはビューワだけでなく、作品詳細やマイ

こんにちは。iOS アプリエンジニアの id:gurrium です。『Inside GigaViewer for Apps』連載2回目は、同じく iOS エンジニアの id:fxwx23 と一緒に出版社向けマンガビューワのアプリ版である「GigaViewer for Apps」（以下 GigaApps）の iOS アプリを実現するしくみについて紹介します。 GigaApps とは アーキテクチャ (id:fxwx23) マルチモジュール 画面構築と遷移 アプリに合わせたカスタマイズ (id:gurrium) ローカライズインジェクション アセットインジェクション パラメータでの DI Needle での DI 終わりに ※ 見出しの ID は執筆担当 GigaApps とは 前回の記事でも紹介しましたが、GigaApps はビューワだけでなく、作品詳細やマイページなどのマンガアプリの基本的

先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試したかった 2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要でエンジニアが自由に試せる環境が用意されています。もちろん費用は会社が出してくれて、常識的な範囲で使ってねということになっています。2年くらい前にCloudflareも追加してもらい、社内で自由にCl

皆様こんにちは。 Hatena Developer Blogはじめまして。 マンガアプリチームのディレクター id:tanaka-a 、プロダクトマネージャー id:s-takanori の共著でお送りします。 マンガアプリチームでは『GigaViewer for Apps』の開発をしています。 今日は、過去記事でも何度か取り上げているこの『GigaViewer for Apps』について、改めてご紹介をしたいと思います。 はてなが提供しているマンガビューワ GigaViewer ですが、2017年にWebマンガサービス向けビューワ『GigaViewer for Web』の提供を開始しました。 マンガサービスを提供する出版社様へ採用していただき、2025年1月現在で17社・25サービスを提供しています。 hatena.co.jp それに続く形で2021年にアプリ向けビューワ『GigaVie