サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
tech.willgate.co.jp
ウィルゲートでTACT SEOを開発している水口です。 TACT SEOはサービス開始から7年が経過するプロダクトです。 今回は、TACT SEOの新しいUIを実現するため、サービス開始当初からほとんど更新されてなかった、フロントエンド開発の仕組みを見直し、デザインシステムの導入する取り組みについてご紹介いたします。 デザインシステム導入前に抱えていた課題 今回の取り組み前後の状況 取り組み前 取り組み後 デザインシステムとは デザインシステムの定義 デザインシステムの構成要素 今回の取り組み内容 新UI・基本概念の理解とドキュメントの作成 スタイルガイドの取説の作成 クラス設計&Sass導入 Storybook導入 ライブラリのパッケージ管理、アップデート 取り組み前の課題に対する効果 その他の効果 最後に デザインシステム導入前に抱えていた課題 1. デザインに統一感がない TACT
こんにちは!ウィルゲート SREチーム 4年目エンジニアのことみん(@kotomin_m)です ウィルゲートでは24新卒エンジニア 内定者向けに新卒研修を実施しました! この記事では、新卒研修の内容と、研修の中でも私が担当した「エンジニア基礎」の作成の裏側や資料を公開したいと思います! 作成した資料は、私の3年間の学びを凝縮したものであり、そのためかなりボリュームがあります。 しかし、今日から新卒エンジニアの皆さんだけでなく、先輩エンジニアの皆さんにも見て頂き、是非後輩エンジニアの教育の際に使ってもらえると嬉しいです!(頑張って作ったので何卒……!!) 新卒研修の内容 エンジニア基礎 資料公開 エンジニア基礎 作成の裏側 研修作成の背景 研修作成で苦労したところ おわりに 新卒研修の内容 今回は講師11名、全12項目の研修が実施されました! 過去の研修資料をブラッシュアップしたものもありま
この記事は「ウィルゲート Advent Calendar 2023」の 1 日目の記事です。 adventar.org こんにちは、ウィルゲート開発室の岡田/おかしょい(@okashoi)です。 ウィルゲートでは開発環境の構築に Docker と Docker Compose を使っています。 ホストマシンの影響を(あまり)受けることなく共通の開発環境を提供することができるのが便利ですね。 www.docker.com 本記事では、そんな Docker と Docker Compose を使った開発環境を構築してチームに提供する際に気をつけているちょっとしたポイントを挙げていきます。 docker-compose.yaml ではなく compose.yaml .env を使って公開ポート番号等をカスタマイズできるようにする プロジェクト名を指定する depends_on, healthch
弊社で利用しているMySQLのバージョンをMySQL5.7からMySQL8にアップグレードを行いました。その際に Blue/Green Deploymentsを使って実施する際にに調べた事をまとめて紹介したいと思います。 Blue/Green Deploymentsとは 制限事項 公式情報 検証した方々の情報 実際に検証をしてみてわかったこと 検証を踏まえて、実施する際にチェックする箇所 まとめ Blue/Green Deploymentsとは 現状の本番環境(Blue)を別に新しい本番環境(Green)を構築した上で接続先を切り替えるなどして新しい本番環境をリリースする運用方法です。 利点として システムのダウンタイムを短くできる ロールバックが容易 が挙げられます。 Amazon RDS Blue/Green Deploymentsの仕組みとしては、本稼働環境(以下Blue環境)と本稼
(注)記事タイトルの横についている「#」は PHPer トークンではございません。 本物のトークンは本記事の末尾に記載しています! こんにちは、ウィルゲートの開発室の田島です。 株式会社ウィルゲートは 3 月 23 ~ 25 日 に開催される「PHPerKaigi 2023」にシルバースポンサーとして協賛いたします。 phperkaigi.jp (以下、公式サイトより引用) PHPerKaigi(ペチパーカイギ)は、PHPer、つまり、現在PHPを使用している方、過去にPHPを使用していた方、これからPHPを使いたいと思っている方、そしてPHPが大好きな方たちが、技術的なノウハウとPHP愛を共有するためのイベントです。 今年の開催はオフライン会場を軸としたオフライン・オンラインハイブリッド開催です。みなさんのご都合に合う参加方法をお選び頂けます。 登壇情報 いろいろなフレームワークの仕組み
この記事は ウィルゲート Advent Calendar 2022 - Adventar の24日目の記事です。 こんにちは!ウィルゲート開発室 開発基盤ユニット マネージャー池添です。 私は、普段はプロダクトの開発チームに寄らないプロダクト横断での改善を行うインフラチーム、SRE(Site Reliability Engineering)チーム、CRE(Customer Reliability Engineering)チームを取りまとめています。 また、今年の4月から前任の横道から組織デザインチームのリーダーを引き継ぎ、開発室全体のスキルアップや教育について従事してきました。 私は、前任である横道がいたときから一緒に組織デザインチームに所属しており、組織の技術成長やメンバーひとりひとりのキャリアアップについて考え実践してきました。 この記事では、その中でメンバーの成長に対して組織としてエ
こんにちは、ウィルゲートで開発室開発基盤ユニットのマネージャーをしている池添(@for__3)です。 ウィルゲートでは2019年に監視システムをPrometheusに移行して運用して来ました。 tech.willgate.co.jp tech.willgate.co.jp ですが、社内のメンバーの入れ替わりとともにPrometheusの設定や運用を理解しているメンバーも減ってきていました。 そこで、改めてPrometheusのできることやPrometheusを使った監視の仕組みについての社内勉強会を行いました。 今回はその際の資料の一部をブログ用に修正しました。 監視システム全体の構成 Prometheus Exporter node_exporter blackbox_exporter nginx_vts_exporter proxy_exporter まとめ 監視システム全体の構成 『
こんにちは、開発室の林です。 今回はデータ可視化ツール「Grafana」を利用して、TACT SEOの問い合わせ業務や保守業務の一部を効率化した事例を紹介します。 本記事のスコープ Grafanaで利用した機能 効率化した事例 毎月の社内用レポートの自動化 保守業務の効率化 アプリのAlert通知 関連データの可視化 最後に 本記事のスコープ 本記事の想定読者は以下の通りです。 Grafanaは知っているけど、実際にどのように使えるか知りたい人 同じ保守業務を繰り返しており、効率化を図りたい人 データ可視化ツールを探している人 本記事では「Grafanaとは何なのか」、「Grafanaの詳細な使い方」に関しては記述しませんので、その点ご了承ください。 Grafanaで利用した機能 Grafanaは様々なDatasource(MySQLやAWSの各種サービス等)と連携ができ、それを可視化する
ノベルティのマスク こんにちは、ウィルゲートの開発室 新卒2年目エンジニアのことみん(@kotomin_m)です。 株式会社ウィルゲートは 4 月 9 ~ 11 日 に開催された「PHPerKaigi 2022」にゴールドスポンサーとして協賛しました。今回は会社制度の「5%ルール」の内容と、それを利用して当日参加したメンバーの感想をご紹介します。 tech.willgate.co.jp 5%ルールとは 参加メンバーの感想 田島 さん (オンライン参加) 松井 さん (オンライン参加) 岡田(@okashoi) さん (現地参加) 池添(@for__3) さん (現地参加) ことみん(@kotomin_m) さん (現地参加) さいごに 5%ルールとは 「5%ルール」とは、業務時間の5%を自己研鑽に充てられる制度です。最大3ヶ月分の5%(3日分)をまとめて取得でき、社外の勉強会に参加したり、
3 週連続テレワーク特集 ウィルゲートでは 2020 年 5 月よりテレワークを導入しています。 導入より 2 年が経過した中で、コミュニケーション課題への施策やメンバーそれぞれの工夫が随所に見受けられるようになりました。 今回は「テレワーク特集」と題して、そんなウィルゲート開発室の様子を 3 週連続でお届けしたいと思います。 テレワーク特集の全記事はこちらから。 こんにちは。ウィルゲート開発室の岡田(@okashoi)です。 本ブログでは、これまでにもテレワーク下におけるコミュニケーション課題への取り組みを紹介してきました。 tech.willgate.co.jp tech.willgate.co.jp 本記事もまた、テレワーク下の課題解決に向けた「開発室朝会」の取り組みについて紹介します。 3 週連続テレワーク特集 背景 「開発室朝会」の概要 過去の共有内容の例 実施してみての所感など
はじめに 今までの構成について ホスティング先の選定 ConoHa さくらのクラウド Oracle Cloud 構成の検討 サーバの構築 移行作業 移行作業を終えて おわりに はじめに こんにちは! インフラチームの高畑です。 最近のコロナ自粛で自宅にいることが多くなっている今日この頃、みなさまはいかがお過ごしでしょうか。 私は最近 DIY にハマっていて大きめの机を作ったりして割と楽しんでいたりします。 さて、今回は全ての主婦の味方で月間総 PV 4000 万を誇る「暮らしニスタ」の画像配信サーバを Oracle Cloud へ移行して 3 ヶ月ちょっとが経過したので、どのように移行したのかなどをご紹介しようと思います。 kurashinista.jp 今までの構成について 1 年ほど前、さくらのクラウドで稼働していた暮らしニスタのサーバ群を AWS へと移行し、各種画像は EC2 に構
課題 Lokiとはなにか? ログ転送の仕組み ログ可視化の仕組み 使ってみてわかってきたこと Grafanaでログをササっとみられるのは楽 『indexを作らない』の意味 ログから作成するメトリクスと統計情報 nginx-module-vts GrafanaのSlackが温かい 現在のLoki環境 VMの情報 コンテナの構成 負荷状況 今後 こんにちは!インフラユニットの小林です。 今回はログ監視ツール『Loki』の導入事例を紹介をします。 課題 これまでもログ可視化集約ツールを使っていたのですが、メモリ使用量の多さや気が付いたら落ちていたりして、VMのランニングコストや運用負荷が課題とされていました。 またUIが非常にリッチなツールだったんですが、我々のやる事と言えば『ApacheやNginxのログからステータスコードやリクエストタイムを可視化』したり、『アプリケーションでエラーが起きた
こんにちは開発室の三島です。 ウィルゲートでは業務時間の5%を自己研鑽に使うことができる「5%ルール」が存在します。 今回は5%ルールを使用して社内ISUCONを開催したので、その様子をこの記事に書いていきます。 ISUCON 開催の経緯 運営側でやったこと サーバーの準備 当日の流れ まとめ 当日のツイート ISUCON ISUCONは「いい感じスピードアップコンテスト」の略です。 サーバーのボトルネック解消を競い合うコンテストになります。 以下のページに詳細がありますので興味のある方は見てみて下さい。 isucon.net 開催の経緯 ウィルゲートではパフォーマンス・チューニングの知見が分散し、できる人とできない人に差がありました。 そのため、開発室としてメンバーにパフォーマンス・チューニングの知見を付けてもらいたいと思ったので開催しました。 運営側でやったこと サーバーの準備 サーバ
ウィルゲートのアーキテクト兼技術広報の岡田(@okashoi)です。 今からおよそ 1 年前に取り組んだ、社内システムをリニューアルによってサーバレス化した事例についての紹介と、1 年経過したところのふりかえりや所感を書きたいと思います。 システムリニューアルの背景 利用量の増加に対してスケールしにくい サーバリソースの利用効率が悪い エラーが発生した場合の原因究明が難しい リニューアルプロジェクト発足 目的は「スケーラビリティ向上」 「コスト削減」 「信頼性向上」 メンバー3 名でおよそ半年にわたるプロジェクト 目的へのアプローチ Amazon API Gateway + AWS Lambda によるサーバレスアーキテクチャの採用 Amazon Elasticsearch Service を用いたログの可視化と運用を考えたログ設計 プロジェクトでの取り組み 機能の洗い出し Go 言語 +
概要 弊社サービスではユーザが様々なファイルをアップロードし、アップロードされたファイルはAWS S3にて管理しています。 AWS S3にアップロードされるファイルに何らかの形でウィルスが混入した場合、ユーザに被害が出る可能性があるため、アップロード時にウィルススキャンすることになりました。 要件として 新規アップロードファイルに対するウィルスチェック 既存アップロードファイルに対するウィルスチェック があるので今回は 【新規アップロードファイルに対するウィルスチェック】 に関する事を書いていきます。 利用するアンチウイルスソフト ClamAV ClamAVとは LinuxやBSD、Mac OS Xなど各種UNIX系のシステムで動作するアンチウイルスソフト シグネチャによるパターンマッチング方式を採用約2万種類のウイルスに対応 GPLライセンスに従って利用することができるオープンソースのソ
はじめに これまでの構成 なぜ今の構成から変えるのか CloudFront + S3 配信の構成 移行に際して悩んだこと 社内に CloudFront のナレッジが全然ない メンテナンスの時どうやってメンテナンスモードにしよう 今後の展望(野望) おわりに はじめに こんにちは!インフラチームの若さ担当、高畑です。 最近はウィンタースポーツのやりすぎでブログ書くのをだいぶサボってしまったので気合い入れて思いの丈を綴っていこうと思います。 今回は、コンテンツ制作に特化したオンラインの編集チームを構築するサービスである「エディトル」のフロントエンド配信を AWS EC2 から CloudFront + S3 に切り替えた話をします! client.editoru.jp これまでの構成 今までのエディトルはざっくりこんな感じで、フロント(React + TypeScript)と API でインス
抱えていた課題 バッチシステムの可用性 EC2インスタンスの利用効率 検討した方法 サーバ多重化 コンテナ化 選ばれたのはコンテナ化でした メリット Fargate移行後の構成 デプロイ 監視 実行順序が重要なバッチ ハマりどころ debugしづらい スケジュール化したタスクの止め方にクセがある スケジュール実行した CloudWatch Event が複数起動する 今後 クラウドネイティブとは こんにちは!インフラユニットの小林です。 今回はバッチサーバで動いているバッチをECS(Fargate)に移行する話を書きます。 抱えていた課題 SEO分析ツール【TACT SEO】 はAWS上にシステムを構築しており、APサーバとバッチサーバはEC2インスタンスを使用しています。 今後のサービス拡大を見据えた場合に可用性と費用面において、バッチに以下の課題を抱えていました。 バッチシステムの可用
みなさんこんにちは。 リーン&グロースチームの石川です。 11 月から開発本部のチームが正式な組織として発足し、サグーワークスのチームと兼任でサービスのグロースを日々日々考えています。 今回はサグーワークスを通じて試みたこと、その手法と過程について紹介します。 サグーワークスとオンライン発注 グロースハックに向けた動き データ・ドリブン/デザインスタジオを取り入れた改善に向けた動き データ・ドリブンであること コラボレーティブ・デザイン(デザインスタジオ)とプロトタイピング 「いい兆しが見えてきた!」ところで 1 か月目が終了 サグーワークスとオンライン発注 今回グロースの対象となったのはサグーワークスのオンライン発注です。 2016 年 10 月に運用開始、2018 年 2 月にリニューアルの実施、今日に至るまで多くのお客様にご愛顧いただいております。 リニューアルに向けた動きに関しては
この記事は Willgate Advent Calendar(24日目)の記事です。 qiita.com どうも初めまして、ウィルゲートでゼネラルマネージャーをやっている鶴飼です。 今年の9月末で執行役員を向平に譲り、引継ぎと後進の育成とその他もろもろ動いています。 入社した2015年5月から振り返ってみると、激動の4年半でした。 エンジニアとしてサグーワークスの新規ドメインに躍起になっていた2015年 業務範囲拡大、開発室として新たな出発 採用戦略について 事業開発全体の戦略 開発室の戦略 2017年4月はミドル層の育成に注力 2018年4月から執行役員としての動き方・考え方 経営に関わるエンジニアのトップとして ディレクター推薦と役割変更 2019年4月から組織としての強さとは? エンジニアとしてサグーワークスの新規ドメインに躍起になっていた2015年 入社当初、開発は事業部付けという
初めて東京で冬を迎えております、キュアセブンこと新卒 1 年目の小笠原です。 ウィルゲートでは、バックエンドの開発とエンジニア新卒採用と開発組織活性の取り組みを行なっています。 ウィルゲートのオフィスがある渋谷の街は、植木や建物のクリスマス装飾でキラキラ輝いています。 この記事は Willgate Advent Calendar 2019 23 日目の記事です。 アドベントカレンダーも終盤になってきましたね。 今まで毎日投稿できたのは投稿してくれた一人ひとりのおかげです。 たくさんの社員に協力していただいたおかげで、個性豊かなアドベントカレンダーが完成しつつあり、ついに明日はクリスマスイブ、というところまでやってきました。 今日のエントリでは、このアドベントカレンダーが完成するまでの経緯についてお話します。 ウィルゲートのアドベントカレンダー キュアセブンとアドベントカレンダー アドベント
こんにちは、開発ディレクターの横内です、腹筋してください。社内でほそぼそとアクセシビリティの布教活動に勤しんでいます。ウィルゲート Advent Calendar 2019 の 16 日、始まります。 presentation ロールは ARIA で定義されているロールの一つです。要素のロールへ presentation ロールを指定することで、要素がもつネイティブセマンティクスロールを上書きして、特にセマンティクスを持たない要素としてブラウザや支援技術から扱われるようにできます。 元々筆者は presentation ロールについてなんとなくの理解はしておりました。ただ、aria-hidden ステートを利用しても同じようなことを実現できる気がしていたため、「どちらを使えばよいのだろう?」という疑問がありました。presentation ロールへの正しい理解なしにはその疑問は晴れないでし
こちらは「ウィルゲート Advent Calendar 2019」4 日目の記事です。 昨日は池添による「リーダー1年目の僕がチーム開発において気をつけてきたこと」でした。 tech.willgate.co.jp こんにちは。アーキテクト 兼 技術広報の岡田(@okashoi)です。 ウィルゲートでは中長期的なエンジニア採用強化を目的に今年の 4 月から「技術広報」という概念を取り入れています。 今回の記事では、技術広報のこれまでの活動を振り返ります。 「技術広報」という言葉を知ったきっかけ 「技術広報」としてはじめに決めたこと どのような状態を得たいのか 何を伝えたいのか どんなアプローチを取るのか 技術広報としての活動 半年間の活動を経て得た手ごたえ ウィルゲート技術広報のこれから 「技術広報」という言葉を知ったきっかけ 2019 年の活動を振り返る前に、私が「技術広報」という言葉を知
こんにちは!サグーワークスの開発リーダーをやっている池添(写真右奥)です! この記事は ウィルゲート Advent Calendar 2019 - Qiita の3日目の記事です。 昨日は @cocoeyes02 の PHPカンファレンス 2019 に、ウィルゲートのエンジニアが登壇しました! #phpcon でした。 ばりばりコードを書くエンジニアからマネジメント寄りなリーダーの役割に変わり1年ほど経ったので今までの学んできたことを元に今、僕が気をつけていることをまとめたいと思います。 少しでもエンジニアからマネジメント職を目指している人の助けになればと思います。 リーダー以前のバックグラウンド リーダーに対する想い 気をつけていること 1. 開発 原則自分の開発稼働は工数として勘定しない エンジニアとしてワクワクするか 2. 対事業・対プロダクト 同じ課題を解決する仲間になる 方法を知
この記事はウィルゲート Advent Calendar 2019 2日目の記事です。 新卒2年目エンジニアの大津です。 2019年12月01日(日)に開催された「 PHP カンファレンス2019」へスピーカーとして参加してきましたので、カンファレンスの様子をお伝えしたいと思います! phpcon.php.gr.jp PHP カンファレンス2019の様子 登壇「PHPer のためのテストコード入門」について 最後に PHP カンファレンス2019の様子 「 PHP カンファレンス2019」は去年開催した「 PHP カンファレンス2018」と同じく、 「大田区産業プラザ PiO」にて開催されました! 記念! #phpcon pic.twitter.com/2JZVCeZgRI— 02 (@cocoeyes02) 2019年12月1日 今年は来場者数1,400人を超える大盛況っぷりだったようです
アップデートの確認フロー npm-check-updatesを利用してアップデートを確認する アップデートの変更点をテンプレートに沿って記載する 終わりに こんにちは!ウィルゲートのフロントエンドエンジニア兼技術広報の小澤(@rikipedia_uw)です。 今回はフロントエンド開発に欠かせないnpm(Node Package Manager)ライブラリのアップデート確認方法をご紹介します。 アップデートの確認フロー 弊社で運用しているnpmライブラリにアップデートがあるかどうかの確認フローは大きく分けると以下の通りです。 npm-check-updatesを利用してアップデートを確認 アップデートの変更点をテンプレートに沿って記載 更新内容を確認しアップデートするかどうか議論 議論してアップデートする場合は対応 週次で実施してアップデートするかどうかを決定します。 npm-check-u
ウィルゲートのアーキテクト 兼 技術広報の岡田(@okashoi)です。 9月21日(土)に開催された「PHPカンファレンス北海道2019」にスピーカーとして参加してきましたので、カンファレンスの様子をお伝えしたいと思います。 phpcon.hokkaido.jp なお、ウィルゲートでは地方カンファレンスに参加する際に、一定条件を満たせば「出張」という扱いになり交通費・参加費・宿泊費が会社から支給されます。 過去にも福岡での登壇の際に出張費が支給されています。 tech.willgate.co.jp カンファレンスの様子 登壇内容・スライド おわりに カンファレンスの様子 「PHPカンファレンス北海道2019」は札幌市民交流プラザで開催されました。 札幌市民交流プラザは図書館やカフェも併設されているとても綺麗な会場でした。 きましたー。開会まで会場内をぶらぶら #phpcondo pic.
こんにちは! ウィルゲート2019年新卒エンジニアのつかぽん(@2kap0n )です! ウィルゲートの開発室ではHacker’s GATE LT会と称して公開イベントを開催したり、毎週木曜日にはオフィスでもくもく会を開催したり、エンジニアの「共有したい!」「みんなで集まりたい」を叶える数々の会を開催しています。 tech.willgate.co.jp willgate.connpass.com そんなウィルゲートで、エンジニアだけでなく全社を巻き込んでのLT会を開催したので、その学びと発見を共有します! 全社LT会の様子 全体はこんな雰囲気。たくさんの人が来て、盛り上がりを見せました。 ランチタイムにオフィスのフリースペースで開催し、カウンターで気軽に立ち聞きできる環境を作ってみたり 前方ではLTをしっかり聞けるスペースを用意してみたりしました。みんなが見入る、LT会らしい盛り上がりを見せ
「入門 監視」を読んだ フロントエンド監視 なぜフロントエンド監視が必要なのか どうやってフロントエンド監視をしているのか Runbookを作ろう なぜRunbookが必要なのか Runbookをどう使っていくか 監視の民主化 勉強会開催 今後 こんにちは!インフラチームの小林です。 今回はインフラチームが現在取り組んでいる、運用環境の改善施策を紹介します。 「入門 監視」を読んだ 2019年01月 に「入門 監視」という本が O'Reilly Japanから出版されました。 www.oreilly.co.jp 『システムをどう監視したらよいのか』『監視の仕組みをどう作ったらよいのか』について紹介している本です。 実践したい事、反省する事だらけですが、フロントエンド監視とRunbook作成から始めています。 フロントエンド監視 なぜフロントエンド監視が必要なのか Webサイトの表示スピード
開発室・技術広報の小澤です。 ウィルゲートでは4半期に一度、活躍した社員を表彰する制度があります。いくつかある賞の中で、もっとも功績をあげた開発室のメンバーに贈られるのが「エンジニアMVP」。 今回はそんな「エンジニアMVP」を受賞したソリューション開発チームの宮西に、受賞の理由や前期(14期1Q)の取り組みについてインタビューしました。 入社から現在に至るまで ──現在、担当している業務について教えてください。 はい。現在、2つのチームに所属しています。1つ目は、ソリューション開発チームです。ウィルゲートのSEO分析ツール TACT SEO の開発しています。2つ目は、セールスフォース開発チームでセールスフォースを基盤とした営業支援ツールを担当しています。 TACT SEO ──これまでにどのような経験をしてきましたか? 2016年に新卒で入社した当時は、社内で使っている営業向けツール全
次のページ
このページを最初にブックマークしてみませんか?
『WILLGATE tech blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く