こんにちは羽山です。 現代の Webシステム界隈は昔よりもはるかに洗練され、初心者からでも簡単に開発方法を学び作れる時代になっています。その反面で例えば Python なら WSGI や gunicorn、Waitress、uWSGI などが何のために存在しているのかが分かりにくいと思ったことはありませんか？Ruby の Rack、unicorn、puma だったり FastCGI など、いずれも Webシステムの構成要素として重要な一方で役割を理解しにくいのは事実です。 そこで今回は Webシステムが現代の形にたどり着くまでの先人達の葛藤の歴史を解説します。歴史を知ればこれらの仕様やプロダクトが何の役になっているかが分かるはずです。 前提 動的な Webサイト（＝Webシステム）を作りたいニーズはインターネット黎明期からありますが、ブラウザからのアクセスを適切に処理するには HTTPサー

こんにちは、羽山です。 今回は先日開催した弊社主催の技術イベント「Raccoon Tech Connect #1 レガシーシステムに立ち向かう技術」で登壇した内容を当ブログで公開します。 イベントのテーマは「レガシーシステムに立ち向かう」ということで、システムを長らく運用していくと自然と溜まっていく 技術的負債 との付き合い方に着目しました。 技術的負債に対する理解を深め、技術的負債を可視化することによって自然と対処される状態を作る方法を解説します。 アーカイブ映像（YouTube） スライド（Speaker Deck） 戦略シミュレーションゲームで例える 今回の主題は「技術的負債」ですが、最初はたとえ話から始めます。 みなさんは戦略シミュレーションゲームをプレイした経験がありますか？ 次のスライドは戦略シミュレーションゲームによくありがちなユニット生産画面を表しています。 そして、多くの

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンスJavaScriptHTMLフロントエンドdomcssomGoogle AnalyticsタグマネージャGoogle Analytics 4 こんにちは、羽山です。 今回は私自身が半年にわたって弊社の運営する仕入れのECサイトスーパーデリバリーで利用している各種Web広告サービスの仕組みを調査・理解して、手段を考えて、そして改善を行った成果とそのノウハウを共有します。 まず何が問題だったかというと、Web広告サービスにはGoogle広告・Facebook広告・Yahoo広告など広告サービスは多数ありますが、それらを有効に活用するには各サービスが提供している専用タグをサイトの全ページに埋め込む必要があります。 察しの良い方はすでに感づいているかと

こんにちは。 「もう大丈夫！何故って？私が部長に就任した！」 ということで、最近ヒロアカのアニメを1～6期まで一気に見た影響が色濃く出ております。齋藤です。 （元が大丈夫じゃなかったわけではないですよ） 部内では、「さい」とう「こう」へいで、「さいこう」さんなんて呼ばれてたりします。 タイトルの通り2023年5月より技術戦略部部長に就任しました。 よろしくお願いします。 就任早々色々なことに手を付け始めてバタバタしていましたが、「一旦落ち着こう、ブログ書こう」ということで、こちらを書かせていただいております。 所信表明や目標などをお話していきます。 経歴 2017/3 受託開発系企業からWebエンジニアとしてラクーンに中途入社 2020/5 URIHO開発ユニット ユニットセンター就任 2021/5 開発第4チーム チームリーダー就任 2022/5 技術戦略部 副部長就任 2023/5 技

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 アジャイル開発スクラムアジャイルコーチスクラムマスター開発体制 こんにちは、たむらです。 突然ですが、皆さんの組織ではアジャイル開発を行っていますか？　恐らく程度の差はあれど、かなり多くの会社でアジャイル開発を少なからず取り入れた開発を行っているのではないかと思います。 でも・・・・、それ本当にアジャイル開発になっていますか？　こんな?感想が出てくる「なんちゃってアジャイル」になってしまっていませんか？ 「アジャイル開発は 納期を定めないから or 最初に要件を全て決めなくて済むから 楽だと思っている」 「アジャイル開発ではPM（プロジェクトマネージャ）をPO（プロダクトオーナー）という別称で呼ぶものだと思ってる」 「スクラムの５つのイベントをやったりやらな

目標設定KPIKGIMBOOKRアジャイルSMARTの法則 こんにちは、たむらです。今回は、目標設定に関するお話です。 皆さんの会社では「目標設定」がありますか？また、それにどの様に取り組んでいますか？評価に係わるから頑張ろうと思う人もいれば、毎年目標設定を憂鬱に感じる人もいるのではないでしょうか。 今回は、会社の目標そのものを分解しつつ、会社の目標や自身の目標にどの様に取り組んでいけば良いのかを考えてみたいと思います。 会社でよくある目標設定 デファクトスタンダードなMBO さて、企業の目標設定というと、MBO（Management by Objectives）がまず真っ先に出てくるかと思います。P・ドラッガーが提唱した手法で、「マネジメント層からの指示ではなく、自己管理によるマネジメント」により業務の効率化・利益の向上といった会社のニーズ達成と、従業員の能力・モチベーションの向上の両取

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 インフラLinux勉強会SQLiteNFS こんにちは、羽山です。 今回は社内で実施した勉強会をほぼそのままブログ記事にしています。 ITエンジニアたるものドキュメントを残したり勉強会を実施したり分かりやすい設計にリファクタリングしたりなど、日々 知見の伝達 を意識していると思います。主要な知見はたいていそれらの方法で満たせるのですが、しかし残念ながら中には画一的な方法では伝えにくいものもあったりします。 ところで伝統芸能や工芸の世界では技術の継承において 背中を見て学ぶ という方法が用いられることがあるようです。 これと似た手法はITエンジニアの世界にもあって、先輩エンジニアとペアプログラミングをすることで文書では伝わりにくい技術や考え方・テクニックを学ぶ

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 bashパフォーマンスMySQLInnoDBDB設計インデックス こんにちは、羽山です。 今回は MySQL のプライマリキーに UUID を採用する場合に起きるパフォーマンスの問題を仕組みから解説します。 MySQL(InnoDB) & UUID のパフォーマンスについては各所でさんざん議論・検証されていますが、論理的に解説した記事が少なかったり一部には誤解を招くようなものもあるため、しっかりと理由から理解するための情報として役立つことができればと思っています。 UUID と比較される古き良き昇順/降順のプライマリキーはというと、 MySQL の InnoDB において良いパフォーマンスを出すために縁の下の力持ちのような働きをしてくれているケースが実は少な

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 bashインフラLinuxプロセス置換シェルスクリプト非同期処理 こんにちは、羽山です。 みなさん元気にシェルスクリプトを書いていますか？ 今回は bash で任意のコマンドを非同期実行しつつ、その実行結果を手軽に受け取る方法を紹介します。 よく利用される bash の非同期実行は & をコマンドの最後に付けてバックグランドで実行する方法ですが、以下のような制限や面倒くささがありがちです。 実行結果として簡単に受け取れるのは終了ステータスだけ 実行結果を得たい場合は一時ファイルへのリダイレクトや名前付きパイプを利用する 終了後に生成したファイルのクリーンナップ処理が必要 重複の回避などファイル名の生成に気を遣う必要がある 非同期処理の終了を wait で待機

パフォーマンス勉強会OracleデータベースDB設計ガイドラインインデックス こんにちは、羽山です。 今回は社内向けに用意していたOracleにおけるインデックスのキー圧縮（接頭辞圧縮）機能の利用ガイドラインに解説を加えて外部公開します。 この機能はインデックスのパフォーマンス改善に対して効果的な一方でガイドラインがないと適切な利用が難しくもあります。そういった場合はぜひこのガイドラインをそのまま活用していただけたらと思います。 また本稿はインデックス設計についても多分に触れているので、キー圧縮機能を学んでいたつもりがインデックス設計にも詳しくなれるというお得な仕様になっています。 キー圧縮（接頭辞圧縮）とは キー圧縮はインデックス作成時に compress を付与することで利用可能です。 create index インデックス名 on テーブル名 (カラム1, カラム2 ...) com

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 マネジメント要求定義教訓ごんおま現象依存関係ツリー思考法カオスエンジニアリングフェイルファスト技術的負債 こんにちは、羽山です。 昔話には生きる上での数多くの教訓が込められています。今回は ごんぎつね からシステム設計・開発について考えてみましょう。 ごんぎつねの話はみなさんもご存じの通り、いたずらを悔いたごんぎつねが人知れず兵十という青年に贈り物を届けるも最後まで気づかれないまま火縄銃で撃たれてしまい、最後に「ごん、お前だったのか」となる話です。 さて、 達人プログラマー という書籍には 契約による設計(Design by Contract) という考え方が解説されています。 メソッドを契約として、 要求された以上のことも以下のことも行わない という考え方

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 インフラAWS CloudFormation入門 – ハマリポイント・注意点 AWSCloudFormation こんにちは。インフラ担当のいせです。 弊社が運用しているサービスのなかのいくつかはAWS上で動いています。 当初はWebコンソールでリソースの作成や設定変更を行っていたのですが、だんだん規模が大きくなるなかで手作業での設定には限界を感じ、CloudFormation(以下CFN)を利用することにしました。 今回はCFNの社内向け勉強会の資料をブログとしてまとめてみます。 CFNとは CFNはyamlなどでAWSの設定内容を記述したテンプレートを元に、リソース構築や設定変更を行ってくれるサービスです。 ざっくりした使い方 新規作成 テンプレートを作

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 パフォーマンス勉強会OracleデータベースMySQLInnoDB こんにちは、羽山です。今回はOracleデータベースのチューニングで少し踏み込んだ内容です。途中で比較対象としてMySQLも登場します。 日頃からSQLチューニングの機会があってそれなりに得意としているのに、それでもなぜかパフォーマンスがでないSQLに悩んだ経験はありませんか？ 謎の遅い現象は特に大規模データベースになってくると発生しがちなのですが、速い場合も遅い場合も必ず理由があります。そこで本記事ではデータベースのチューニングにおいて意外と見落とされがちなローレベルな部分に着目して、さらに一歩上のパフォーマンスチューニングに必要な知識を解説します。 この記事を書くきっかけとなったのは私た

したがってSameSite=Lax化の影響を調べるには、「アンカータグとGETのfrom以外で、異なるRegistrable Domainから生成されたリクエストでCookieを使用していないか」ということを確認する必要があります。 しかしこれを漏れなく確認していくことは、なかなか骨の折れる作業ではないでしょうか。 アクセスログのRefererヘッダを見れば、異なるRegistrable Domainから送られてきたリクエストかどうか、ある程度わかりそうな気もしますが、Refererヘッダは送られないケースが多々あったり、そもそもリクエスト生成元のタグ名を判別できなかったりと完璧ではありません。 Fetch Metadataリクエストヘッダとは Fetch Metadataリクエストヘッダとは、一言で言うと「リクエストが生成されたコンテキストをサーバ側に通知するためのヘッダ」です。 ざっく

開発合宿おんやど恵モブプログラミングモブプロ温泉ミッション開発 こんにちは、たむらです。 今回は「ラクーンでも開発合宿をやってみよう！」というノリと勢いで開発合宿に行ってきたことのレポートになります。 開発合宿の目的 ”ノリと勢い”とはいえ、勿論目的はあります。決して温泉に浸かりたいとか、美味しいものが食べたいとか、たまには旅行したいよねとかそんなことだけ思ってるわけではありません！ 1. いつもと違う環境で思う存分目的の開発に打ち込む 弊社はサービスの保守をしつつ新規機能や新規サービスの企画や開発を行っています。そのため状況にもよりますが急ぎの依頼や調査で割込みが入ることもしばしば。 そんな時に環境的に隔離された場所で一つの開発に集中して専念できることはフラストレーションを感じず高い生産性で開発できることが期待できます。 2. まさにプロジェクト！高いミッション性のある状況での開発体験

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 JavaScriptSEOWebGoogleGooglebotE-A-TYMYLSearch Consolerobots.txtクロールバジェットsitemap.xml こんにちは、羽山です。 ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう？と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方 のような話題が中心です。前半は歴史の振り返りから将来の動きなどを考えて、後半

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 スキルマップ行動経済学UXUIデザイン思考ユーザーリサーチVPoDマネジメントアクセシビリティデザインシンキングノンデザイナーエンジニアが知るべきデザイン業務 こんにちは、たむらです。 今回は元々はエンジニア出身者の私が、デザイナー部署のマネジメントをするようになったことで得たことをまとめてみたいと思います。 私は元々は運用周りなどを好んで担当するエンジニアをしていましたが、ここ最近のキャリアでは開発チームのマネージャ、いわゆるVPoE的な役割を担当してきました。ところがちょっとした大人の事情から２年程前よりデザインチームのマネジメントも担うことになりました。私はデザインという業務に関しては全くの素人です。そこで、実業務は基本的に現場のデザイナーに任せ、私は

インフラパフォーマンスJavaScript勉強会LT大会社外活動CDN こんにちは　なべです。 弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会社の泰さん、株式会社ラクーンホールディングス羽山 イベントの様子 『WSOの最新事情と高速化のすすめかた』スパイスファクトリー株式会社の泰さん 『CDNを用いたWeb高速化とバックエンド技術の重要性』合同会社レッドボックスの小川さん 『ブラウザの制約条件から考えるフロントエンドのリソース設計』弊社テクニカルディ

デザインデザイナー心理学行動経済学UXUIジョージ・ミラーマズロー こんにちは、たむらです。元々はエンジニア側の世界にいましたが、今はデザイン戦略部のマネジメントも行っています。 デザインやUXを学んでいる過程で、Joe Leech著の「Psycology For Designers」という本のことを知る機会があったのですが、日本語訳が無かったので自分で使うための翻訳を試みてみました。ここではその要旨を紹介してみます。 ざっくりしたまとめ 心理学（やそれに類する学問）はUXやデザインに大きな効果を与える。正しく使おう デザイナーは心理学を学ぶことでユーザーにデザインがどの様に作用するかという予見を得ることができる。 デザイナーが心理学を用いる為の手引きとして心理学の紹介、心理学関連の読むべき本の紹介、デザインの根拠を得る為の普遍的な方法などを紹介している 心理学の分野・学派 認知心理学：精

デザインHowtoIllustrator3Dインフォグラフィック こんにちは。デザイン戦略部のコバヤシです。 Webデザイナーですが、たまにイラストを描いたりします。 少し前にラクーンが運営する越境ECサイト「SD export」3周年を記念するインフォグラフィックを作成しました。 このイラストは「Isometric（アイソメトリック）」と言われる技法で、Illustratorを使って作成しています。 アイソメトリックとは交差した三軸が同じ角度で交わる立体的な俯瞰図のことです。 この中で使われている立体的なアイテムのほどんどは平面のイラストから生成されました。 今回はその作成方法をご紹介します。 作り方まとめ 1.平面のイラストに3D効果を適用 2.アウトライン化して面ごとに着色 2ステップだけです。パスを使って色々描写する必要はありません。 以下、詳細を説明します。 まずは立体化の基礎と