エキサイト株式会社メディアプラットフォーム事業部エンジニア佐々木です。SpringBootのデファクトのテンプレートエンジンはThymeleafだと思いますが、JTEというテンプレートエンジンもここ最近Spring Initilizrで選べるようになりました。 プリコンパイルできることなどで、Thymeleafより10倍以上パフォーマンスがでるようです。トラフィックが多いサービスを多く抱えているので、試してみます。 jte.gg ディレクトリ構成 build.gradleの設定 application.properties Javaコード部分 テンプレート レイアウトファイル レイアウトファイ…

はじめに こんにちは、新卒2年目の岡崎です。今回はhx-triggerを使ってinfinitScrollを実装する方法を紹介します。 環境 gradle ------------------------------------------------------------ Gradle 8.5 ------------------------------------------------------------ Build time: 2023-11-29 14:08:57 UTC Revision: 28aca86a7180baa17117e0e5ba01d8ea9feca598 Kot…

こんにちは、エキサイトでエンジニアをしている吉川です。 先日3/14（金）に社内イベントの「テクデザBeer Bash」を開催したので、運営視点でレポートを書いていきます。 テクデザBeer Bashとは Beer Bashとはbeer（ビール）＋ bash（にぎやかなパーティー）を合わせた造語で、真面目な部分を残しつつ、カジュアルな雰囲気で交流を行うイベントです。 年に3、4回社内カフェスペースで開催しており、同じチーム内の人はもちろん、業務ではあまり関わることがない他部署の人たちとも繋がる場になっています。 当日のコンテンツ 前半は以下2つのメインコンテンツを発表し、後半はフリートークの時…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法をご紹介します。 実現したいこと background-sizeとbackground-positionの両方を任意の値で設定する方法 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSでは、background-sizeとbackground-positionを指定する場合は、どちらもbg-で始まるユーティリティクラスを使用します。 <!-- backgroun…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 今回は、Flutterプロジェクトで環境ごとに設定を分けて開発・ビルドしたい場合に便利なツール、flutter_flavorizrを用いた環境構築方法を紹介したいと思います。 本記事では、開発（dev）、ステージング（stg）、本番（prod）の3環境を想定し、flutter_flavorizrを使ってiOSとAndroid両方の設定を自動で生成する方法を解説していきます。 使ってみた感想としては、yamlファイルを書くだけで環境分けができ、IDEの環境設定も自動で行ってくれるのでとても便利だと感じました。 flutter_flav…

はじめに こんにちは、新卒2年目の岡崎です。今回は、htmxを使ってbuttonを押した際に別のページを表示する方法を紹介します。 環境 gradle ------------------------------------------------------------ Gradle 8.5 ------------------------------------------------------------ Build time: 2023-11-29 14:08:57 UTC Revision: 28aca86a7180baa17117e0e5ba01d8ea9feca598 Kotl…

PHPで特殊文字をエスケープする方法 なぜ特殊文字をエスケープする必要があるのか PHPで特殊文字をエスケープする方法 コードの解説 最後に PHPで特殊文字をエスケープする方法 初めまして、新卒2年目の岡崎です。今回は、PHPでHTMLタグなどに使われる特殊文字をエスケープする方法を紹介します。 なぜ特殊文字をエスケープする必要があるのか プログラミングでは、特定の文字（<、>、&、"、'等）が特別な意味を持つため、そのまま使用すると問題が発生する可能性があります。 例えば、HTMLやSQLでは"や'はデータの境界を示し、<script>はブラウザで実行されるコードとして解釈される可能性があ…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。今回は業務でChopperというライブラリを使用したので、Chopperの基礎を説明しながら、GitHubのAPIで検索結果を取得するまでを記事にしていこうと思います。GitHubのAPIの仕様については省略します。 Chopperとは 環境 APIサービスを定義する @ChopperApi(baseUrl: '/search/repositories') @GET()アノテーション クエリパラメータの設定 APIクライアントの初期化 baseUrlについて services: [GithubService.create()]について…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSに標準搭載されているリセットCSSを無効にする方法をご紹介します。 実現したいこと Preflightを無効にする方法 独自のリセットCSSを設定する まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSではリセットCSSとして、Preflightが標準搭載されています。 tailwindcss.com Preflightは@import "tailwindcss";に含まれ、baseレイヤーに組み込まれるようになっています。 なお、Tailwind CSSのクラス…

エキサイト株式会社エンジニアの佐々木です。SpringBootのBeanスコープのデフォルトはSingletonですが、@Scopeを利用して使い分けていこうと思います。 Beanスコープとは？ singleton request session prototype singletonスコープ、prototypeスコープの違い singletonスコープ requestスコープ prototypeスコープ 補足:ApplicationContextについて まとめ Beanスコープとは？ SpringBootはDIコンテナを保有していて、起動時に多くのBeanを生成します。そのBeanがどのよ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Google Ad Managerでサードパーティクリエイティブのクリック数が取得できない場合の対処法をご紹介します。 前提 実現したいこと クリックをトランキングするにはマクロの挿入が必要 クリックがトラッキングできているかチェックする まとめ 参考文献 前提 冒頭、前提を整理します。 Google Ad Manager（以下、GAM）は、サイトに対して広告の配信をしたり収益の管理ができるツールです。 GAMでは配信する広告の内容、例えばリンク付きのバナーなどは「クリエイティブ」と呼ばれます。 クリエイティブの種類の一つである「…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 今回は、Google AdMobのネイティブ広告のバリデーターについて、環境別に表示非表示を切り替える方法を共有したいと思います。 本記事では環境設定に、Android は productFlavors を使用し、iOS は xcconfig を用いる場合 の設定方法を紹介していきます。 Google AdMobのネイティブ広告バリデーターについて Androidで表示・非表示を切り替える app/build.gradle に設定を追加 AndroidManifest.xmlに設定を追加 iOSで表示・非表示を切り替える xccon…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでHTML属性に対する疑似要素のスタイリングをする方法をご紹介します。 実現したいこと Tailwind CSSで擬似クラスを指定する方法 注意点 CSS Tailwind CSS まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 HTMLの各タグには属性が用意されていることがあり、要素の動作を制御することができます。 inputタグのdisabled属性などがこれにあたります。 CSSではHTML属性に対して疑似クラスが存在し、{タグ}:{属性名}の様式でスタイリングすることができます…

こんにちは！エキサイトお悩み相談室でデザイナーをしているサヅカです。 サイトをもっと使いやすくするべく日々UI改修を行っているのですが、今回アイコンの選定に非常に悩みましたのでその時のお話をしようと思います。 アイコンの意味を他のデザイナーと考えてみた アコーディオン＝クリックするとビヨーンとさらに内容が表示されるアレなのですが、ページ改修をしていてアコーディオンのデザインガイドラインはまだ設定していないことに気付きました。 こちらは「エキサイトお悩み相談室」のコイン購入ページの一部になります。 今回アコーディオン化することになったので、シェブロン下、シェブロン右、プラスマイナスの3種類を提案…

はじめに こんにちは、メディアプラットフォーム事業部エンジニアの岡崎です。最近、ローカルキャッシュの導入を行いました。今回はその時のことを備忘録としてブログに残します。 前提 今回の要件として一番大切なことは、できるだけユーザーがページを見ることができる状態にすることでした。 これを前提として、今までの実装を見ていきましょう。 最初、キャッシュはRedisに保存するような構成になっていました。 この場合、もしDBに障害が起きたとしても、Redisに保存しているデータがあった場合は、そこから取得することができます。 しかし、Redisに障害が起きてしまったら、データが取得できなくなり、クライアン…

はじめに こんにちは、新卒2年目の岡崎です。今回は、DockerでPostgreSQLを起動する方法を紹介します。 はじめに 環境 ディレクトリ構成 docker-compose-postgres.yml name service image container_name environment ports volumes init.sql コマンド 最後に 環境 $ docker version Client: Cloud integration: v1.0.31 Version: 23.0.5 API version: 1.42 Built: Wed Apr 26 16:12:52 202…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxで要素がビューポートにスクロールされた場合にAJAXリクエストを発行する方法をご紹介します。 実現したいこと hx-targetの設定で実現可能 検証してみる overflowプロパティが適用された要素内で使用する場合は注意 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 htmxではHTMLタグに専用の属性を記述することで、AJAXリクエストを発行できます。 htmx.org <!-- クリックするとPOSTリクエストが発行される --> <button hx-post="/path/to/dir"…

エキサイト株式会社エンジニアの佐々木です。SpringBoot x MyBatis でDBのReader/Writerの接続設定をご紹介します。 application.ymlの設定 Reader/Writerの設定 トランザクションまわりの全体コード ReplicationResolver, DataSourceType ReplicationResolverのBean化 DataSource PlatformTransactionManager SqlSessionFactory SqlSessionTemplate まとめ application.ymlの設定 application.y…

はじめに 環境 準備 @ModelAttributeについて @ModelAttributeを引数につける @ModelAttributeをメソッドにつける 最後に はじめに こんにちは、新卒2年目の岡崎です。今回は@ModelAttributeの使い方を紹介します。 環境 Gradleのバージョン ------------------------------------------------------------ Gradle 8.11.1 ------------------------------------------------------------ Build time: 2…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSで子孫要素にアクセスする方法をご紹介します。 なぜ子孫要素にアクセスしたいか Tailwind CSSでどう実現するか 対象の小孫要素を限定したい場合 まとめ 参考文献 なぜ子孫要素にアクセスしたいか 冒頭、なぜ子孫要素にアクセスしたいか、その動機について整理します。 例えば、以下のようなUIをTailwind CSSを用いてスタイリングするとします。 スタイリングしたいUIの例 この場合、HTMLの構造は次の通りになります。 <div> <img alt="..." src="..." /> <img al…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。今回はFirebase Cloud Messaging(FCM)の通知について共有していこうと思います。FCMの通知には「通知メッセージ(Notification Message)」と「データメッセージ(Data Message)」の２種類があります。 今回開発において、アプリで独自UIの通知を表示することを検討しました。そのときに通知メッセージとデータメッセージの違いについて理解する必要があったので、調査したことについてまとめます。 通知メッセージについて 通知メッセージの形式 動作 データメッセージについて データメッセージの形式…

はじめに こんにちは、新卒2年目の岡崎です。 今回は、Spring BootでBasic認証の設定をする方法を紹介します。 環境 Gradleのバージョン ------------------------------------------------------------ Gradle 8.11.1 ------------------------------------------------------------ Build time: 2024-11-20 16:56:46 UTC Revision: 481cb05a490e0ef9f8620f7873b83bd8a72e7c39…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxのhx-indicatorとTailwind CSSを組み合わせてスケルトンスクリーンを実現する方法をご紹介します。 スケルトンスクリーンとは Tailwind CSSでスケルトンスクリーンをスタイリングする htmxでリクエスト中のみ特定の要素を可視化するhx-indicator hx-indicatorの基本 Tailwind CSSと組み合わせる 注意点 完成形 さいごに スケルトンスクリーンとは スケルトンスクリーンは、読み込み中にコンテンツの代替となる図形を表示して、処理が実行中であることなどをユーザーに示すUX…

こんにちは。エキサイトでデザイナーをしている齋藤です。 2025年1月23日にTailwind CSSのv4の安定版がリリースされました。新機能の一つにコンテナークエリーのサポートがあります。 今回はTailwind CSSでコンテナークエリを使用する方法をご紹介します。 コンテナークエリーとは？ 簡単におさらい Tailwind CSSでスタイリングする 基準とする要素に@containerを追加 @{size}:*の形式でスタイリング 完成形 純粋なCSS Tailwind CSS さいごに 参考文献 コンテナークエリーとは？ コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基…

こんにちは。エキサイトでデザイナーをしている齋藤です。 Tailwind CSSのメンテナーの一人のAdam Wathan氏は、日本時間の1月16日に自身のXにおいて、「Tailwind CSS v4.0安定版は来週リリース予定」と発表しました。 Tailwind CSS v4.0 stable will be out next week 🤝🏻— Adam Wathan (@adamwathan) January 16, 2025 予定通りであれば、今週中にTailwind CSS v4が正式にリリースされるようです。 大きな変更点として、tailwind.config.jsが廃止され、CSS…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 今回はPangleのメディエーション時に起きたエラーと今回行った対処について共有していこうと思います。 環境 Flutter: 3.24.2 Dart: 3.5.2 CocoaPods: 1.15.2 gma_mediation_pangle: 1.1.0 発生した問題 Pangleのメディエーションを行い、pod installをすると下記エラーが出ました。 [!] The 'Pods-Runner' target has transitive dependencies that include statically linked…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 今回は、画像圧縮を行うライブラリであるflutter_image_compressの対応画像形式について調べたのでまとめていこうと思います。 環境 flutter_image_compress: 2.4.0 画像圧縮方法 flutter_image_compressを用いると下記コードのように、圧縮したい画像ファイルのpathと出力先のpathを指定し、画像品質をqualityで指定すると画像圧縮ができます。 final result = await FlutterImageCompress.compressAndGetFile( …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介します。 コンテナークエリーとは？ コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基づいたスタイリングを可能にする機能です。 メディアクエリーは画面サイズですが、コンテナークエリは特定の要素のサイズを基準とするため、より柔軟にレスポンシブ対応が可能です。 使い方 コンテナークエリを用いたスタイリングの例をお示しします。 HTML HTMLの構造は以下の通りです。 <div class="parent"> <div class="child…

はじめに こんにちは、エキサイト株式会社デザイナーの山﨑です。 エキサイトホールディングス Advent Calendar 2024 18日目は、山﨑が担当させていただきます。 qiita.com 今回は、VRoid Studio・copainter・CLIP STUDIO PAINTを用いてのコミック制作ついて、記して行きたいと思います。 AIを用いたコミック制作にチャレンジするまでの経緯 エキサイトでは、ウーマンエキサイトをはじめ、多くのコミックコンテンツを発信しています。 しかし、コミック制作には手作業が多く、時間やコストがかかるという課題がありました。 そこで、「AIツールを活用すれば…

はじめに こんにちは、新卒2年目の岡崎です。 エキサイトホールディングス Advent Calendar 2024の20日目を担当します。 他の記事はこちらから！ qiita.com 今回はSpring Bootにおいて、Controllerで全てのリクエストを受け取る方法を紹介します。 環境 gradle ------------------------------------------------------------ Gradle 8.11.1 ------------------------------------------------------------ Build tim…