こんにちは、Mackerel チーム SRE の id:heleeen です。 この記事は、はてなの SRE が毎月交代で書いている SRE 連載の4月号で、先月分は id:taxintt さんのサービスの一般公開前からSLI/SLOと向き合うです。 今回は、先日 Mackerel チームで行った障害対応演習で実施した内容と、どのような学びを得たかについて紹介します。 本番障害はできればなくしたいものですが、すべての障害を完全になくし可用性を100%にするのはとても困難です。そのため、障害が発生したときの影響範囲を小さくする仕組みを導入したり、ロールバックを素早く行えるようにしておくなど、影響を抑えるための取り組みが必要になります。 Mackerel では、その一環として、障害対応時のオペレーションの確認やバックアップからの復旧が行えるかの検証などの起きてしまった障害を素早く収束させたり、

2023年6月のWWDC（World Wide Developers Conference）23で発表され、2024年2月に米国で販売が開始されたApple Vision Proを、はてなのエンジニア5人が入手しました。 ということで、3月初旬に5人がApple Vision Proをつけて、オンライン座談会を行いました。その様子をお伝えします。 Google Meetで座談会をしています 本記事中のApple Vision Proは、使用者がそれぞれ「技適未取得機器を用いた実験等の特例制度」に基づく届出を行い、適切な管理の下に使用しています。 この無線設備は、電波法に定める技術基準への適合が確認されておらず、法に定める特別な条件の下でのみ使用が認められています。この条件に違反して無線設備を使用することは、法に定める罰則その他の措置の対象となります。 座談会の模様はYouTubeでも公開し

ハッピーホリデー！id:cockscombです。この記事ははてなエンジニアAdvent Calendarの8日目のエントリです。 今年1月、はてなスターのリニューアルを行いました。リニューアルの内容は告知をご参照ください。 はてなスターのリニューアルでは、クロスオリジンの問題を解決するために特別な実装をしています。今回は、ホリデーシーズンをお祝いして、そのひみつを詳 (つまび)らかにします。 はてなスターとクロスオリジン はてなスターは、はてなブログなどに埋め込んで利用されます。はてなブログは hatenablog.com や hatenadiary.jp などのサブドメインを利用しており、さらにはてなブログProでは独自のドメインを設定できます。 はてなスターは複数の異なるドメイン名のサイトから利用される、ということです。 要するにはてなスターはクロスオリジンで利用されます。一方ではてな

こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応

こんばんは、id:kouki_dan です。突然ですが、現在は2021年ですね。あるいは令和3年です。今年が有効期限の免許証には平成33年と書かれているかもしれません。また、神武天皇即位の年を元年と定めた皇紀では2681年になります。 同じ年を表しているはずなのですが、暦によって何年なのかは違います。実はiOSは複数の暦に対応していて、日本で使われている和暦にも対応しています*1。令和元年5月にリリースされたiOS 12.3のリリースノートには、令和に対応したことが示されています。 暦を選択するのはiOSを使っているユーザーなので、iOSアプリでは端末によって複数の暦が存在しています。この記事では暦の取り扱いが不適切で実際に起きたバグとその原因、また、一般的にどのように日付を扱うべきかについて説明します。 突然、APIレスポンスのパースに失敗する 原因判明！ APIのレスポンスが閏日だった

こんにちは。id:nanimono_demonaiです。はてなブログMediaのWebアプリケーションエンジニアをしています。2カ月ほど前になりますが、はてなブログで、はてなフォトライフの画像を貼り付けたときの表示方法が変わりました。 今回は、私がこの変更に加えた改善の内容を、故郷の両親にも伝えられるようにまとめてみました。 見た目は変わらないのに何が良くなったのか？ imgタグに画像の縦横長を追加した 表示のズレの改善を指標で表す CLSとは何か？ はてなブログでCLSがどのくらい向上したか？ SEOにおける改善も 遅延読み込みによって閲覧も軽快に おわりに 参考文献 見た目は変わらないのに何が良くなったのか？ 今回の変更では、はてなのWebアルバムサービスであるはてなフォトライフに保管した画像を、はてなブログに表示する方法を改善しました。と言っても、これによって画像の見た目が変わったワ

こんにちは。MackerelチームにおいてCRE（Customer Reliability Engineer）をしているid:syou6162です。主にカスタマーサクセスを支えるデータ基盤の構築や、データ分析を担当しています。 今回は、壊れにくいデータ基盤を構築するため、Mackerelチームで実践していることを紹介します。 なぜ壊れにくいデータ基盤を構築するのか データ基盤が“壊れている”とはどういうことか 壊れてないだけでなく、壊れたら気付ける 前提とするシステム構成 壊れたことに気付けるよう監視する 1. バッチジョブが失敗したことに気付く 2. 投入されたデータの性質を監視する 3. ビューが壊れてないかを監視する 4. 利用状況を監視する そもそも壊れてない状態を保つ 1. データリネージを元に修正できるようにする 2. 使われていないテーブルやビューは定期的に掃除 おわりに 参

こんにちは〜。チーフエンジニアのid:cockscombです。 最近、同僚のid:yashigani_wとともに、はてなのコーポレートサイトを静的サイトとして再構築しました。ちょっとした仕事ではありますが、経験によって得られた暗黙知を形式知へ昇華するため、ここに紹介します。 はてなのコーポレートサイトとは サイトを静的化するメリット どのようにサイトの静的化を進めたか 1. 静的ファイルをNext.jsで生成 2. 運用を自動化したい 3. ホスティングサービスを選択する 4. 動的なコンテンツを表示する リリースと振り返り ホスティングサービスに関する補足 はてなのコーポレートサイトとは 弊社のコーポレートサイトは一般的なそれと同様に、株式会社としての「はてな」に関心を持っていただいた方々とコミュニケーションするための窓口です。会社情報を提供したり、あるいはプレスリリースなどの情報を公開

こんにちは、id:hitode909です。前回のCRE編にひきつづき、同じくMackerelチームのSREとして働かれている、id:hayajo_77さんにお話を伺います。 エンジニアHubのコンテナ技術入門記事やコンテナエージェントの開発など、専門性を生かして活躍されてるのでお話を聞ければと考えています。 id:hayajo_77にアンケート はてなidとその由来を教えてください いつどんなきっかけで入社されましたか? 現在の仕事を教えてください チーム内の立ち位置を教えてください 今日一日の流れを教えてください 最近うまくいったことは何ですか? 最近うまくいってないことは何ですか? ふだん大切にしていることは何ですか? はてなはどんな会社ですか? おわりに id:hayajo_77にアンケート はてなidとその由来を教えてください 以前に勤めていた会社の同僚の間で、自分の名前の末尾を"

こんにちは、id:aerealです。普段はいま皆さんがご覧になっているHatena Developer Blogをホストしているはてなブログというサービスの開発に携わっております。 本日はそのはてなブログのコードで使われているオシャレなサーバ起動コードについてご紹介します。 はてなブログのローカル開発用のサーバ起動スクリプトは、タイトルにあるように“just epic”というコードを実行しています。 どうしてそんなことができるのでしょうか? それでは実際にはてなブログの起動コードの一部をご覧ください: just epic. 2011-2018; まるで自然文のようですが歴としたPerlのコードです。 はてなブログはこのコードを実行するとローカルで起動するようになっています *1。 このコードをdeparseしてみます: ✘╹◡╹✘ < cat epicup just epic. 2011-

こんにちは、id:hitode909です。今日から、はてなで働くエンジニアの生態を紹介する新シリーズを始めてみることにしました。 初回は、私も所属するマンガチームのテックリードのid:KGAにお話を聞いてみます。 前職でも現職でもBtoBでクライアントのいるアプリケーションを作られていて、そのこだわりなどを聞ければと思います。 id:KGAにアンケート はてなidとその由来を教えてください いつどんなきっかけで入社されましたか? 現在の仕事を教えてください チーム内の立ち位置を教えてください 今日一日の流れを教えてください 最近うまくいったことは何ですか? 最近うまくいってないことは何ですか? ふだん大切にしていることは何ですか? はてなはどんな会社ですか? おわりに id:KGAにアンケート はてなidとその由来を教えてください こんにちは id:KGA です。はてなidを取得した当時応

デザイン 縦組みのデザイン - Hatena Design Group 縦組みを実現しましょうとなったときに、本文のみを単純に縦にすれば良いのかというと、そうではないと思いました。 （略） そこで、UIを含めた本文以外の要素もすべて縦にするのはどうか、というのがカクヨムの小説ビューワーにおける提案でした。 縦組みとCSS html.writingDirection-vertical { writing-mode: vertical-rl; } 縦中横にする部分はJSでspan要素を挿入 .tatechuyoko1, .tetechuyoko2 { text-combine-upright: all; } <span class="tatechuyoko1">W</span><span class="tatechuyoko1">e</span><span class="tatechuyoko

こんにちは、マンガチームアプリケーションエンジニアのすてにゃん ( id:stefafafan ) です。マンガチーム以前はMackerelチームに所属していて、その時の仕事については以下の記事を参照ください。 developer.hatenastaff.com 「はてなではどういうものを開発しているのだろう？」「あの方はどういう仕事をしていて、どういう事を意識しているのだろう？」など、気になっている人もいると思うので、今回ははてなのマンガチームでの仕事を紹介したいと思います。 はてなのマンガチームとは？ はじめてのチーム異動 GigaViewerに関わり始める GigaViewer採用3例目「マガポケ」 GigaViewerについての解説記事を社内向けに書いた GigaViewer採用4例目「コミックDAYS」 GigaViewer採用5例目「くらげバンチ」 振り返り はてなのマンガチー

最近はSwiftのコード生成に興味のあるスマートフォンアプリケーションエンジニアの id:yutailang0119 です！ さて目前に迫った WWDC18 ！！！何が発表されるのか楽しみですね！ はてなからは id:ikesyo とid:yutailang0119 のSwift大好きコンビで参加します！！！ 私は昨年抽選に破れ、悔しい思いをしてから、念願叶っての初WWDCのため、準備の段階からワクワクしています！ 今年はいったい何が飛び出すのか！ 噂のUIフレームワーク Marzipan 次OS目玉の新機能はいったい何になるのか そろそろ公式CI出ないかな One more thing... 個人的な興味としても Marzipan への期待度はとても高いです！ iOSアプリとmacOSアプリの融合、読者のみなさまの関心も高いのではないでしょうか。 id:cockscomb の Marzi

こんにちは、はてなブログユーザーチームのアプリケーションエンジニア・テックリードのid:aerealです。 京都では例年より早咲きの桜が見頃を迎え散りはじめた4月、今年も新卒をはじめとする新メンバーを迎え、心機一転より一層サービス開発に邁進していく心を新たにしました。 そんな中、新体制でやっていく上で昔から馴染のメンバーもそうでないメンバーも、今一度お互いのことを深く知ることが必要ではないかと考え、チームビルディングのためにドラッカー風エクササイズを実践してみました。 ドラッカー風エクササイズとは何か、実践してみてどんなものが得られたかを紹介します。 ドラッカー風エクササイズの紹介 ドラッカー風エクササイズとは『アジャルサムライ』のコラムで紹介されている、チームメンバーが4つの質問に答えるチームビルディングのためのエクササイズです。 プロジェクトを始めるときに、次の4つの質問をチームで共有

はじめに はてなサマーインターン2017の大規模システムコースの成果報告をします。 今年の大規模システムコースではメンターのid:masayoshiさんとid:y_uukiさんの下、自律分散監視システムとそれを利用したネットワークグラフの可視化に取り組みました。自律分散監視システムでは単純なクラスタリングによる死活状況の確認だけではなくアプリケーションレベルの疎通確認を行えるものを実現しました。またどのようにしてクラスタを形成するかという問題に取り組む内に、サービス間のネットワーク上のつながりを取得できるようになり、その情報でサーバー間の関係性の可視化を行いました。この記事では、それらの詳細を説明します。 はじめに 自律監視システムの実現 中央サーバー型の監視システム 自律分散監視システム アプリケーションレベルの相互監視 どうやってクラスタを形成するか？ 実験 ネットワークグラフの可視化

こんにちは！エンジニアの id:amagitakayosi です。 来る7月12日(水)、はてな東京オフィスにて 「Hatena Engineer Seminar #8」を開催します！ connpass.com Hatena Engineer Seminarは、はてなのサービスを開発する上で、エンジニアがどのような事を考えているのか、どのような働き方をしているのかを語るイベントです。 過去にもインフラ技術やスマートフォンアプリ開発など、様々なテーマで開催されてきました。 Hatena Engineer Seminar - connpass 今回のテーマはフロントエンドです。 はてなのサービスのフロントエンドはどのように開発されているのか、 ユーザー体験を良くするためにどのようなことを行なったのか、 長く続くサービスのフロントエンド開発はどのように維持されているのか、といった内容で、はてなの

Xcode 9 betaがリリースされ、Swift 4（とSwift 3.2）の足音が聞こえてくる。このタイミングで、今こそSwiftを学ぼうと考えるのは、なんら不思議なことではない。しかしながら、いざSwiftを学ぼうとしても、どうするのがよいのか、最初は見当もつかないことだろう。ではプロフェッショナルとしてSwiftを利用しているプログラマーたちは、どのようにして学んできたのだろう。 学び方は人それぞれであり、正解はないと考えている。 私の場合は、最初にざっくりと学び、手を動かして慣れ、ようやっと体系的に学ぶという手順を踏むことが多い。 最初のフェーズでは、何が出来るか自分の道具箱には何が追加されるのかと知るためであり、次のフェーズは実際に道具を使ってみて使い方を覚えるフェーズと言える。 そうして道具箱全体が見渡せるようになってきたところで、体系的に学ぶことで効率良く学ぶことが出来ると

こんにちは。アプリケーションエンジニアの id:itchynyです。 今回は、コードレビューを会話しながら行う取り組みについて紹介します。 コードレビューは大事なコミュニケーションの場です。 コードレビューの効用としては、単純なミスがあるコードをリリースしない・プロダクトのコードの品質をよりよくしていく、あるいはその方策を模索するといったことが挙げられます。 こういったことは当然のことですが、なによりもまず、レビューというのは一緒にプロダクトを作っている仲間とのコミュニケーションの場だと思います。 多くの人は、プロダクトのコードをよくしていきたい、読みやすいコードを書きたい、分かりやすいコードで目的の機能を作りたいといった共通の思いを持っていることでしょう。 コードを書いた人の思いを汲み取りながら、共感したり、譲歩したりしながら、よりよい方法を提示していきます。 それでも時には、どういうコ

こんにちは。ウェブアプリケーションエンジニアの id:t_kyt です。 初夏と言えば京都、京都と言えばGoということで、4月29日(土)に「そうだ Go、京都。」と題しましてGo言語の勉強会を開催することになりました！ 初回ということもあり特にテーマは絞っていませんのでGo言語に興味ある方は皆さんお越しください！発表会後には交流会も開催予定です。 また、LT枠も募集しているのでちょっと発表したいという方のご参加もお待ちしております。 京都 ✕ Go言語で最高のゴールデンウィーク初日を過ごしませんか？ イベント日程と会場 イベント名: 「そうだ Go、京都。」 日時: 4月29日(土) 15:00〜 参加費: 無料 定員 参加枠: 30 LT枠: 4 会場: 株式会社はてな 京都オフィス 8F 所在地: 京都府京都市中京区高宮町御池ビル8F 注意: 当日は正面玄関が閉まっているので裏口へお