はてなブックマーク

こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記事では、デザイン要素のうち、カラーに焦点を絞りご紹介させて頂きます。 デザイントークンとは？ なぜデザイントークンは必要なのか 今回デザイントークンを定義する上で意識したこと カラーのデザイントークンを定義してみる デザイントークンの手法 今回のお題に沿ってデザイントークンを定義してみる プリミティブトークン セマンティックトークン Figmaで実装する マークアップで使用できるように環境を整備する おまけ：カラー定義で参考になるサイト Tailwind CSS Color Generator Primer Prism さいごに デザイントークンとは？

はじめに エキサイト株式会社 バックエンドエンジニアの山縣（@zsp2088dev）です。 新卒入社から早いもので2年が経過しました。 最近、エキサイトブログの大規模なメンテナンスが完了し、無事にクラウドとデータベースの移行が終わりました。 クラウドはAzureからAWSへ、データベースはSQL ServerからPostgreSQLへと移行しました。 staff.exblog.jp このプロジェクトでは、私を含む3名で取り組み、2年間の努力の末に移行作業を達成できました。 チーム全員が一丸となって取り組んだ結果、このような大きなプロジェクトを成功させることができたことを嬉しく思います。 本記事ではエキサイトブログの2年間の移行作業を振り返り、移行のためにチームで取り組んできたことについて紹介します。 はじめに エキサイトブログとは エキサイトブログのリビルド経緯 リビルドするために取り組ん

こんにちは。 エキサイト株式会社の三浦です。 Javaアプリケーションをコンテナとして動かしたいとき、jibを使うのは大きな選択肢の1つです。 jibを使えば非常に簡単にJavaアプリケーションをコンテナ化することが出来ますが、一方でカスタマイズしたい場合に少し困ってしまう場合もあるのではないでしょうか。 今回はその一例として、jibでコンテナ化するJavaアプリケーションでSIGTERMを無視させる方法を紹介します。 jibとは jibでコンテナ化するJavaアプリケーションでSIGTERMを無視する方法 jib使用時に、dumb-initをDockerfile内でダウンロード・インストールする DockerfileのENTRYPOINTを書き換える 最後に jibとは jibは、Javaアプリケーションを簡単にコンテナ化してくれるライブラリです。 MavenやGradleでプラグインと

はじめに XTechグループ Advent Calendar 2021の16日目は、iXIT株式会社 エンジニアの蝦名がお送りします。 最近ハマっているものは音楽系Vtuberです。VIRTUAFREAK良かった…。 qiita.com 本題 ツールなどを導入しなくてもSlowQueryを解析できる機能がMySQLには存在するので、今回はその一部を紹介します。 ちなみに私が開発しているサービスのMySQLバージョンは5.6です。 1. mysqldumpslow 一言で言うとスロークエリーログファイルを解析して内容のサマリーを出力してくれる機能です。 前提としてスロークエリーログを出力している必要があります。 使い方 コマンド ※合計実行時間が長い順に10件のSQLを出力する mysqldumpslow -s at -t 10 /opt/fio1/slog/sp-prd-db1-slow.

こんにちは、エンジニアの岩藤です。 今回はVisual Studio CodeでのSSH接続が原因で、接続先EC2サーバーが高負荷になってしまった現象と対策についてお話しします。 あるEC2サーバーで数人で開発していると、サーバーが急に重くなりssh接続すらできなくなる現象が定期的に発生しました。 ↓topコマンドで確認した結果 top - 14:21:29 up 5:20, 1 user, load average: 4.58, 2.01, 0.86 Tasks: 192 total, 3 running, 189 sleeping, 0 stopped, 0 zombie %Cpu0 : 10.1 us, 3.0 sy, 0.0 ni, 0.0 id, 86.9 wa, 0.0 hi, 0.0 si, 0.0 st %Cpu1 : 9.5 us, 2.4 sy, 0.0 ni, 0.0

はじめに エキサイト株式会社 バックエンドエンジニアの山縣（@zsp2088dev）です。 エキサイトホールディングス Advent Calendar 2022の25日目を担当します✍️ 本記事では、SpringBootを使用したアプリケーションで、突然CPUがスパイクしてしまう事象に遭遇したことと、それを解決するために行ったことについて紹介します。 また、今回の事象を解決するにあたり、以下の記事を参考に調査を行いました。 blog.fastthread.io はじめに システム概要 実行環境 今回起きた事象 解決手順 起動中のコンテナに入る 起動中のJavaのプロセスID(PID)を取得する CPU使用率を調査する スレッドダンプを取得する スレッドダンプを解析する 原因箇所を特定する その後 振り返り スレッドダンプからPIDを取得する spring-boot-actuatorを使用し

エキサイトの武藤です。 GitHubのプルリクエスト（PR）のマージ機能の一つである Squash and mergeの使い方と注意点について紹介します。 マージの種類 PRのマージには3つの種類があります。 Create a merge commit Squash and merge Rebase and merge デフォルトでは Create a merge commit になっており、マージコミットを作成して、マージします。 マージコミットとは、gitが差分を探す際に基点となるコミットです。 Squash and merge は、PRに含まれるコミットを1つにまとめます。その後、そのコミットをマージ先のbaseブランチへマージします。 Rebase and merge は、PRに含まれるコミットをマージ先ブランチに追加します。このとき、マージコミットは作られず、コミットが個々に追加

こんにちは、エキサイト株式会社デザイナー2年目の山﨑です！ クリエイティブ就業型インターンBooost!!!の開催をきっかけに、インターンの方々におすすめフォントなどのTipsをFigma上に共有しておりました。 今回の記事ではインターンの方におすすめしていたフォントを6つ紹介していきたいと思います👏(前回のおすすめフォントはこちら) Figmaでまとめていたおすすめフォント 和文フォント編 まずは「ヒラギノUD Sans」を紹介します！ ヒラギノ角ゴはAppleのMacOSやiOSに標準搭載されており、アプリでもよく使われている有名なフォントだと思います。 柔らかい印象にデザインされているので、プレゼン資料・文書などにとても使いやすいです。 続いては今年フォントワークスからリリースされたばかりの「筑紫AMゴシック」。 ヒラギノUDのように長文で使うのは少し難しいのですが、Futuraと

こんばんは、エキサイト株式会社の中尾です。 今回は表題の通り、redisで一度に保存するキャッシュサイズ(value)は100kb以下が良い点について説明します。 っと言っても、memcacheでも同じです。 詳しく説明はこちらのリンクを参考にしてください。 docs.microsoft.com 簡単に説明するとシングルスレッドでインメモリデータストアであるため、そんな複雑なデータの取り扱いやサイズの大きいvalueを取り扱うとサーバーの負荷が上がります。 負荷が上がると当然他のアクセスもできなくなります。結果、アプリケーション全体に影響が出てしまいます。 そうならないために、100kb以下にキャッシュサイズ(value)を抑えるようにしましょう。 当然ながら画像データをキャッシュするなど、redisにとってよくないのでやめましょう。 どうしてもシステムの都合上、どうしようもない時がありま

はじめに エキサイト株式会社 バックエンドエンジニアの山縣（@zsp2088dev）です。 先日、私の携わるサービスでAzureのVM環境からAzure Container Appsに移行しました。 本記事では、Container Appsに切り替えた経緯やContainer Appsのことについて紹介します。 Container Appsの導入を検討している方や、VM環境を脱却しようとしている方の参考になる記事です。 はじめに 移行前の構成 現状の課題点 課題解決のためにやったこと アプリケーションをコンテナ化する GitHub Actionsを使用してデプロイする スケーリングルールを設定する 環境をコード化する Container Appsの構成 Container Appsの料金体系 VM → Container Appsの切り替え おわりに 採用アナウンス 移行前の構成 移行前の

こんにちは。 エキサイト株式会社の三浦です。 AWSにはECSという、コンテナをデプロイ・運用できるサービスがあります。 このECSにはALBを接続することもでき、それによってURLからのアクセスをECSのコンテナに流すことができます。 今回は、一度ECSにALBを接続するよう設定した後、その設定を更新する方法について説明します。 Amazon ECS CLI経由でALB設定を更新する 最後に Amazon ECS ECSはAWSのサービスで、コンテナをデプロイ・運用できるサービスです。 公式には以下のように説明されています。 aws.amazon.com Amazon ECS は、フルマネージドコンテナオーケストレーションサービスであり、コンテナ化されたアプリケーションを簡単にデプロイ、管理、およびスケーリングできます。 このECSにはALB（厳密にはターゲットグループ）を接続する事がで

こんにちは。 いつものtaanatsuです。 今回は、自然言語処理で文章要約をしてみます。 それではやっていきましょうか。 ターゲット エキサイトニュースの記事 「カーシェアリング各社を比較 タイムズ、カレコ、オリックスの対抗にdカーシェア」 を要約してみます！ 。 （正しく要約できているかは、記事に飛んでチェックしてみてください！） バーチャルenv環境の準備 Python標準の venv を使っていこうと思います。 # バーチャルenvの作成 $ python3 -m venv venv # ターミナルにバーチャルenvを反映 $ source venv/bin/activate 必要モジュールのインストール $ pip install sumy $ pip install tinysegmenter $ pip install ginza ja-ginza 実行コード 「LexRan

エキサイトホールディングス Advent Calendar 2021の10日目は、 エキサイト株式会社 エンジニアのあはれんがお送りします。 DOM操作をするjQueryコードをJestでテストするために、勉強としてJestのサンプルコードを動かしてみました。 その際に学んだ点、サンプルコードの実行方法を共有したいと思います。 Jestについて Jestは、JavaScriptのコードの正しさを保証するために設計されたJavaScriptテスティングフレームワークです。 JavaScript単体で動作するのはもちろん、html要素を操作するものもテストすることができます。 jestjs.io Jestの導入 Jestを導入するにはnpmまたはyarnが必要ですので、準備をお願いします。 npmの場合は以下のように実行してください。 npm install --save-dev jest こ

こんにちは。 エキサイト株式会社の三浦です。 Spring BootのAPI等で空のクエリパラメータを受け取るとき、受け取り側の型や「空」の指定方法によって取得される値が違うことはご存知でしょうか？ 今回は、その違いについて紹介していきます。 Spring Bootとクエリパラメータ 通常URLでクエリパラメータをつける時は、以下のようにします。 https://sample/?query1=test これをSpring Bootで受け取る際は、 import lombok.Value; @Value public class SampleRequestModel { String query1; } import org.springframework.validation.annotation.Validated; import org.springframework.web.bind

ご無沙汰しております。 taanatsuです。 今回は珍しくPHPの記事を書いていこうと思います。 ExciteといえばPHPですからね！しらんけど。 形態素解析 皆さんは「形態素解析」という言葉を耳にしたことがありますでしょうか？ 機械学習だ！AIだ！と騒がれる昨今、文章の解析で使われる手法の一つがこの形態素解析です。 私は漢字が4つ以上並ぶと読めなくなるので、形態素解析という言葉が苦手ではあります。 形態素解析とは、文章を「形態素」、いわゆる名詞・動詞・形容詞・副詞のような、日本語の最小単位の単語に分割する処理のことを言います。 形態素解析器「MeCab」 形態素解析を行ってくれるツールです。 今回はよく使われる「MeCab」を利用していきたいと思います。 で、Windowsの方はすいません。。。 会社のPCがMacなので、この記事はMac用になります。 私個人はWindows機を利用

エキサイト株式会社メディア開発の佐々木です。 メディア開発では、github.comを使ってソースコード管理を行っています。人数やプロジェクトが多くなってくるとPullRequestのコメントの書き方がバラバラになってくるので、生産性を確保する為に下記のようなラベルっぽいものを書くことを推奨する方針としています。 [MUST]… (Must) 必ず直してほしいところをコメントで記載します。どう直してほしいのか具体例をつけて書くことを推奨します。メンテしづらくなったり、パフォーマンスが著しく悪かったり、色々な観点がありますが、その観点がコミュニケーションでは大事なので、その点を書くようにします。 (例) [MUST] この実装はパフォーマンスがよくないとおもうので、 `xxxx` を使った書き方になおしてほしいです GithubのSuggestion機能 明確な修正提案は、GithubのSu