こんにちは。エキサイトでアプリエンジニアをしている岡島です。 最近、FlutterアプリでDeepLinkをカスタムURLスキームで実装する機会がありました。そのとき、動作確認のデバッグ用コマンドではカスタムURLスキームからアプリが起動するのですが、TestFlightで配布したアプリではカスタムURLスキームが無効な状態になっていました。その原因について共有します。 結論 起こった事象 原因の調査 解決策 まとめ 参考 結論 アプリ側でカスタムURLスキームを指定する時に、大文字を含んだスキームで定義してたことが原因でアプリが起動しませんでした。 スキーム名をすべて小文字にすると解決しまし…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、textarea要素のサイズ変更を提供する方向を制御する方法をご紹介します。 実現したいこと CSSプロパティのresizeで制御が可能 注意点 Tailwind CSSの場合 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 texarea要素は、要素右下のつまみをドラッグすることでサイズ変更が可能です。 CodePenを用意しましたので体験してみてください。 See the Pen サイズ変更が可能なtextarea要素 by AyumuSaito (@ayumusaito-excite) on CodeP…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでAJAXリクエスト時に送信されるパラメータをフィルタリングする方法をご紹介します。 なお、本稿の内容は v2.0.4（2025年4月28日時点の最新版）のhtmxを前提とします。 htmxとは 実現したいこと hx-paramsで実現可能 まとめ 参考文献 htmxとは 冒頭、簡単にhtmxについてご説明します。 htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org <!-- クリックするとPOSTリクエストが発行される -->…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介します。 なお、本稿ではv4.1（2025年4月21日時点の最新版）のTailwind CSSを前提とします。 実現したいこと Tailwind CSSでlinear-gradientを実現する方法 まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 CSSでは要素の背景色をグラデーションにすることもできます。 通常のCSSではlinear-gradient()関数を使用します。 例えば、「上方向に赤から青」というグラデーションを表現する場…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 今回はFlutterでRiverpodを利用する時に扱うAsyncValueの3つのプロパティ AsyncValue.value AsyncValue.valueOrNull AsyncValue.requireValue について、それぞれの違いや特徴をまとめていこうと思います。AsyncValueにはさまざまなプロパティが用意されていますが、この記事ではvalue, valueOrNull, requireValueについて見ていきます。 環境 AsyncValueとは？ value, valueOrNull, requireV…

エキサイト株式会社メディアプラットフォーム事業エンジニアの佐々木です。 Javaのenumは大変便利でかなり活用していますが、SpringBootなどのDIコンテナと絡めたときに、enumはDIできないのでapplication.ymlなどの環境ごとの動的データが使用できないことがあります。今回はその1つの解決方法についてご紹介します。 application.yml 下記のようなapplication.ymlがあるとします。 app: type: one: 壱 two: 弐 Javaコード 結論は下記のようなコードになります。 import jakarta.annotation.PostCo…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法をご紹介します。 なお、本稿ではv4.1（2025年4月14日時点の最新版）のTailwind CSSを前提とします。 実現したいこと スペーシングのベースサイズをカスタマイズする方法 仕組み まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSでは、スペーシングのベースサイズは0.25rem（4px相当）とデフォルトで設定されています。 例えば、paddingはp-<number>の形式のユーティリティクラスでスタ…

エキサイト株式会社メディアプラットフォーム事業部エンジニアの佐々木です。テンプレートエンジンの関数のみだと足りないのでSpringBootの@Componentを使用して拡張します。 コード まとめ コード 現在時刻を返すだけの簡単なヘルパー関数を作ってみます。コードはJavaで書きます。SpringBootのDIコンテナは、@Componentがつけられたクラス名のlowerCamelで、DIコンテナに格納する暗黙のルールがあります。なので、@Componentの宣言時に命名もセットにすると視認性が高くなるかなと思います。 @Component("dateTimeComponent") pu…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Alpine.jsでページ内で一意になる文字列を生成する方法をご紹介します。 実現したいこと Alpine.jsの$idマジックが便利 x-id属性と組み合わせるとグルーピングができる まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 以下のようなHTMLがあるとします。 <div>要素1</div> <div>要素2</div> 次のように、それぞれのdivに対して一意なidが設定されるようにしたいです。 <div id="element-1">要素1</div> <div id="element-2">要素…

エキサイト株式会社メディアプラットフォーム事業部エンジニア佐々木です。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の通知を表示することを検討しました。そのときに通知メッセージとデータメッセージの違いについて理解する必要があったので、調査したことについてまとめます。 通知メッセージについて 通知メッセージの形式 動作 データメッセージについて データメッセージの形式…