こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介します。 なお、方向の内容は v.2.0.6 （2025年8月12日時点の最新版）のhtmxを前提としています。 htmxとは 実現したいこと レスポンス リクエスト元 metaタグを用いてセットできる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介します。 なお、本稿の内容は v4.1.11（2025年7月22日時点の最新版）のTailwind CSSを前提としています。 実現したいこと @source not()を使用すると除外設定ができる まとめ 参考文献 実現したいこと 冒頭、実現したいことを整理します。 Tailwind CSSでは、プロジェクト内で使用されているユーティリティクラスに応じて必要な分だけCSSを生成します。 v4以降のTailwind CSSでは…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでHTMLの制約検証APIを使用して検査合格後にリクエストを発行する方法をご紹介します。 なお、本稿の内容は v2.0.6（2025年7月14日時点の最新版）のhtmxを前提としています。 htmxとは 実現したいこと hx-varidate属性でHTMLの制約検証APIの検査を有効化できる 注意点 まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長のような感覚でAJAXリクエ…

こんにちは。エキサイトでエンジニアをしている吉川です。先日7/4(金)に社内イベントのテクデザBeerBashを開催したので、そのレポートを書いていきます。 BeerBashとは Beer Bashとはbeer（ビール）＋ bash（にぎやかなパーティー）を合わせた造語で、真面目な部分を残しつつ、カジュアルな雰囲気で交流を行うイベントです。 年に3、4回社内スペースで開催しており、同じチーム内の人はもちろん、業務ではあまり関わることがない他部署の人たちとも繋がる場になっています。 今回はオフィス移転後初のBeer Bashで、EXCITE HUBを使ったよりリッチな設備で開催することができまし…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでリクエスト発行してHTTPレスポンスエラーとなった場合に、任意のJavaScriptを実行する方法をご紹介します。 なお、本稿の内容は v2.0.6（2025年7月7日時点の最新版）のhtmxを前提とします。 htmxとは 実現したいこと htmx:responseErrorイベントとhx-on属性を組み合わせると実現できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。 ExciteHD TechConについて 発表内容 フロントエンドのややこしいところ フロントエンドの理想状態とは どうすれば理想状態に近づくのか どうやって実現するのか CSSはすべてstyle属性に記述する？ ユーティリティクラスだけでスタイリングするようにする？ JSはすべてインラインスクリプトにする？ 「ひとまとめ」を実現する…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxでリクエスト発行前にwindow.confirmを実行して、確認ダイアログが承認された場合にのみリクエストする方法をご紹介します。 なお、本稿の内容は v2.0.4（2025年6月16日時点の最新版）のhtmxを前提としています。 htmxとは 実現したいこと hx-confirm属性でwindow.confirmが実装できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org マークアップの延長…

はじめに こんにちは。エキサイトでエンジニアをしております、吉川です。 先日6/6（金）にエキサイトHD社内の技術カンファレンス「TechCon」を開催しました。本記事では、その様子をお伝えします。 昨年のTechCon運営の記事は以下からご覧いただけます。 tech.excite.co.jp TechConとは TechConは、エキサイトHDが毎年1回開催している技術カンファレンスです。主に2つの目的があります 社外に「エキサイト」の技術力や取り組みを発信し、採用活動に貢献すること 部署や職種を超えた社内交流を活性化させること テーマ：Hello World TechConでは毎年異なるテ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介します。 なお、本稿の内容は2025年6月9日時点のHTML Living Standardと各ブラウザの対応状況に準じています。 command属性とは 実現したいこと command属性を使用してダイアログ要素を制御してみる まとめ 参考文献 command属性とは command属性はbuttonタグの新しい属性の一つで、HTML Living Standardでも追加済みとなっています。 html.spec.wh…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、htmxのリクエストトリガーに別の要素のイベントを指定する方法をご紹介します。 htmxとは 実現したいこと hx-triggerのfrom:*で別の要素のイベントをトリガーに指定できる まとめ 参考文献 htmxとは htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。 htmx.org 以下のように、マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。 <!-- クリックするとPOSTリクエストが発行される --> <…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 最近、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では配信する広告の内容、例えばリンク付きのバナーなどは「クリエイティブ」と呼ばれます。 クリエイティブの種類の一つである「…