はじめに こんにちは、エキサイト株式会社デザイナーの山﨑です。 エキサイトホールディングス 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…

こんにちは！SaaS・DX事業部デザイナーの鍜治本です。 前回、ブランチ機能を駆使してUIファイル管理している記事を書きました。 tech.excite.co.jp 事業部デザインチームでのUI更新方法が型化され、日々の作業が少し楽になった一方で、新たな課題が見えてきました。 それはレビュー依頼のやりとりです。この記事では、スラックのワークフロー機能を活用し、レビュー依頼を効率化した方法をご紹介します。 背景：レビュー依頼の課題 チームでUI更新の作業が分担できるようになった中、作業内容をレビューしてもらうにあたり課題が浮かび上がりました。 メンバーそれぞれのレビュー依頼 アナウンス手段が統一…

こんにちは！SaaS事業部デザイナーの澤田です！ エキサイトホールディングス Advent Calendar 2024 の22日目を担当します。 エキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回しているので、ぜひ他の記事も覗いてみてください😊 qiita.com 今回は来年見逃さないために絶対に行きたい展示会をご紹介します...! デザインあ展neo 累計116万人を動員した「デザインあ展」が、装いも新たに「デザインあ展neo」として虎ノ門ヒルズ TOKYO NODEに登場します！ 2025年4月18日から9月23日まで、歴代最長の会期で開催され…

こんにちは、エキサイト株式会社の平石です。 エキサイトホールディングス Advent Calendar 2024のシリーズ2, 19日目を担当いたします。 今回はAWS上のECSコンテナとBedrockの間のPrivateLinkを確立する方法をご紹介します。 AWSリソースの作成にはTerraformを使います。 はじめに Amazon Bedrockとは Amazon Bedrockは、AWS上で生成AIを利用できるようにするフルマネージドサービスです。 既存のモデルを容易に利用することもできますし、用途やデータに合わせてカスタマイズすることも可能です。 aws.amazon.com Pr…

こんにちは！SaaS事業部デザイナーの澤田です！ エキサイトホールディングス Advent Calendar 2024 の最終日、25日目を担当します！ ここまでエキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回してきたので、ぜひ他の記事も覗いてみてください😊 qiita.com デザイナーにとって、新しいデザインに触れ、知識をアップデートしていくことは、表現の幅を広げる上で非常に大切です。そこで今回は、今後の情報収集に役立つ、おすすめのデザインインプット場所をまとめました！ デザイン全般 Pinterest Pinterest（ピンタレスト）は、…

こんにちは、エキサイトでアプリエンジニアをしている岡島です。エキサイトホールディングス Advent Calendar 2024の21日目を担当させていただきます。 今回はgo_routerを触ってみたので、go_routerについて共有していこうと思います。 環境 go_routerの特徴 go_routerの基本 準備 GoRouterの構成を宣言する MaterialApp.routerやCupertinoApp.routerを使用して準備をする 画面遷移の方法 名前付きルートを使用する OSごとにテーマを設定する方法 最後に 環境 dependencies: go_router: ^1…

はじめに こんにちは、エキサイト株式会社デザイナーの山﨑です。 エキサイトホールディングス Advent Calendar 2024の24日目を担当します。 qiita.com この記事では、「copainterを用いたコミック着彩」について取り組んだ内容をご紹介します。 copainterって何？ copainterは、ラフから線画の作成や下塗り・着彩を行うイラスト制作支援ツールです。 詳細はこちらからご確認ください： 公式サイト - copainter また、copainterはイラストの絵柄をAIで再現・量産するツール「mimic」を提供しているRADIUS 5によって運営されています。…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の23日目を担当します。 qiita.com 今回は、TailwindCSSで要素間の境界線をスタイリングするときはdivide-*が便利というお話をします。 実現したいこと 今回実現したいUIは、以下のように行内セル間の垂直な境界線が破線になっているテーブルです。 行内セル間の垂直な境界線が破線になっているテーブル HTML・CSS的に言い換えると、2つ目以降のtd要素の左側に破線の境界線を設けるということになります。 <table> ... <tbody>…

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

こんにちは！SaaS・DX事業部デザイナーの鍜治本です。エキサイトHDアドベントカレンダー シリーズ１の20日目を担当させていただきます！この記事では、Figmaのブランチ機能を活用して、UI管理をどのように効率化したかについて詳しくお話しします。

こんにちは！SaaS事業部デザイナーの澤田です！ エキサイトホールディングス Advent Calendar 2024 の19日目を担当します。 エキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回しているので、ぜひ他の記事も覗いてみてください😊 qiita.com 本日はもうすぐクリスマス🎄...ということで、Lottie（ロッティ）というサービスを利用してクリスマスにちなんだアニメーションを作成してみました！ この記事では、Lottie初心者向けに、同じくLottie初心者が実践したことの共有となります🔰 ぜひ「こんなこともできるよ...!」など…

はじめに こんにちは、新卒2年目の岡崎です。 まずは、次の画像を見てください。 ここから証明書の詳細をクリックすると、証明書に含まれていませんと出てきます。 この場合、SSL証明書を発行する必要があります。 今回はAWS上の環境で動いているサービスなので、AWSでSSL証明書を発行する方法を紹介します。 手順 AWSでSSL証明書を発行する手順を紹介します。 SSL証明書の作成 まず、AWSにログインをしたら、Private Certificate Authorityにアクセスします。 そこから、AWS Certificate Managerを選択します。 次に、リクエストをクリックします。 …

はじめに エキサイト株式会社 バックエンドエンジニアの山縣（@zsp2088dev）です。 エキサイトホールディングス - Qiita Advent Calendar 2024 - Qiita の18日目を担当します。 エキサイトブログの開発では、新機能の開発や既存機能の改修時に、データベースに新たなテーブルを作成し既存のデータを移行することがあります。 データ移行を何度か経験していく中で、より快適なデータ移行環境を目指し、AWS Copilot CLIのScheduled JobとSpring Shellを組み合わせたデータ移行環境を構築しました。 本記事では、このような環境を用意した背景や…

こんにちは、エキサイト株式会社の奥川です。 エキサイトホールディングス・アドベントカレンダー2024シリーズ2の17日目を担当します。 qiita.com 今回は、Next.jsでいい感じのモーダルを作成する方法をご紹介します。 完成形 コンポーネントと呼び出し側のコードは下記になります。スタイルは適当です。 モーダルコンポーネント // Modal.tsx import { FC, ReactNode, useRef, useEffect } from 'react' import { createPortal } from 'react-dom' type ModalProps = { i…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。エキサイトホールディングス Advent Calendar 2024の17日目を担当させていただきます。 最近Dart 3.6がリリースされたので、Dart 3.6について見ていきたいと思います。また、DartのCHANGELOGで、Dart 3.7.0で追加される言語機能が紹介されていたので、まとめていきたいと思います。 Dart 3.6の新機能 Pub workspaces機能 pub.devのダウンロード数表示 Digit Separators Dart 3.7で追加予定の機能 ワイルドカード変数 (Wildcard Varia…

こんにちは。エキサイトでエンジニアをしている奥川です。今回はGoogle Tag Managerでクリックイベントの計測を行う際のテクニックをご紹介します。 Google Tag でクリックイベントを計測する際は要素の指定をさまざま方法で行います。詳細はGoogleのドキュメントをご覧ください。 support.google.com 今回は組み込み変数 Click ID を用いて、クリックされた要素のIDが特定の値の場合にイベントを発火させる場合のテクニックを紹介します。IDを用いる場合は次のようにDOM要素にIDを指定することで、どの要素がクリックされたかを判別します。 <div id="t…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の7日目を担当します。 qiita.com 今回は、Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法をご紹介します。 理想状態 フォーカス時のスタイルを変えたいシーンとは どうやってスタイリングするか まとめ 理想状態 まずは理想状態をお示します。 Codepen内でtabキー（Safariではoption+ tab）を使用してボタンを選択しようとしてみてください。 See the Pen Tailwind CSSでfocus-vi…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の16日目を担当します。 qiita.com 今回は、htmxのhx-getでパーツ読み込みをした際に、読み込み元のtitleタグが置き換わってしまう現象を防ぐ方法をご紹介します。 hx-getでパーツ読み込み？ 発生する現象 index.html /parts/index.html index.htmlを表示したときのtitle どうやって解決するか index.html 結果 まとめ hx-getでパーツ読み込み？ htmxでは、テンプレートエンジンのよう…

こんにちは！エキサイトお悩み相談室でデザイナーをしているサヅカです。 エキサイトホールディングス Advent Calendar 2024 15日目は、サヅカが担当させていただきます。 qiita.com 12月に入り急に寒くなりました。おこたに入って猫を足に乗せて仕事がしたいものです。 この前ふと気付いたのですが、「あれ？最近私デザインしてない。計測ばかりしているな」と思いました。 macに向かい、真っ先に開くのはGoogle AnalyticsかtableauかKarte Blocksです。 ということで、今回はデザイナーの自分がよく使う計測系のツールを紹介させていただきます。 Googl…

こんにちは！エキサイト株式会社、SaaS・DX事業部エンジニアの岩田史門です！ エキサイトHDアドベントカレンダー14日目を担当させていただきます! はじめに RAG（Retrieval-Augmented Generation）は、外部データの情報を利用して、より正確で文脈に沿った応答を大規模言語モデル（LLM）に生成させる方法です！ 現在開発に携わっている、FanGrowthというプロダクトでも、「FanGrowth AI ウェビナー企画提案」という機能で活用しています！ www.fangrowth.biz この記事では、関連するキーワードとともに、RAGについて説明します！ はじめに R…

こんにちは、エキサイト株式会社の平石です。 エキサイトホールディングス Advent Calendar 2024のシリーズ2, 16日目を担当いたします。 今回は、Spring AIを利用してECS環境からAmazon Bedrockに接続する方法をご紹介します。 はじめに Spring AIとは Spring AIはSpringからAIモデルを利用するためのフレームワークです。 SpringがAIモデルを提供しているわけではなく、SpringアプリケーションからAIプロバイダーにリクエストを送り、レスポンスを受け取る部分をAPIとして提供してくれます。 今回紹介するAmazon Bedroc…

こんにちは、エキサイト株式会社の平石です。 エキサイトホールディングス Advent Calendar 2024の10日目を担当いたします。 Springdocライブラリを利用することで、簡単にOpenAPI仕様に則ったAPIドキュメントを自動生成することができます。 しかし、このライブラリを使って開発を行う中で、APIのパラメータをどのように認識しているのか少し気になったので、その調査をしてみました。 今回は、その内容をブログとして残したいと思います。 なお、今回紹介するのはspringdoc-openapi v2.7.0での動作であり、今後変更される可能性はありますのでご注意ください。 共…

はじめに こんにちは、エキサイト株式会社デザイナーの山﨑です。 エキサイトホールディングス Advent Calendar 2024 13日目は、山﨑が担当させていただきます。 qiita.com 今回は、Jenkinsで本番環境にリリースしたはずなのに、リリース内容が反映されなかった事件について紹介します。 トラブル発生 ウーマンエキサイトでは、一部のリポジトリにおいて、ステージング環境や本番環境へのリリースをJenkinsで行っています。 しかし、今回はそこでトラブルが発生しました。 最新コメントランキングという機能の本番リリースを行った後、cssのスタイルがまるまる適用されていないことが…

こんにちは。エキサイトでアプリエンジニアをしている岡島です。 エキサイトホールディングス Advent Calendar 2024の12日目を担当させていただきます。 tech.excite.co.jp 以前、上記の記事を書いたときにmapの内部処理で用いられているTやEの文字について、これは何かと気になったので調べたことについて共有していこうと思います。 ジェネリクス型とは なぜジェネリクスが必要なのか 型安全性の向上 ジェネリクス型を使わない場合 ジェネリクス型を使う場合 コードの再利用性を高める ジェネリクスを使わない場合 ジェネリクスを使う場合 ジェネリクス型で用いられる名前 まとめ …

こんにちは！SaaS・DX事業部デザイナーの鍜治本です！ 年末年始、イベントや休暇の思い出を形にするコンテンツを作る機会も増える時期。 今回はノンデザイナー向けツールとして人気の高い「Canva」と「Adobe Express」を使い、それぞれの特徴を比較してみました。 デザイナーでも迷う？動画加工ツール選び Canvaの特徴 テンプレートの素材を差し替えるだけで、プロ並みの仕上がり 動画の加工機能は最小限（トリミング、色調整、素材追加など）で手軽 Adobe Expressの特徴 クイック機能で本格派の仕上がり 字幕やキャラクターアニメーションを手軽に作成 まとめ：どちらを選ぶべき？ デザイ…

はじめに こんにちは、新卒2年目の岡崎です。エキサイトHDアドベントカレンダー2024の5日目を担当します。 今までの記事はこちらをご覧ください。 qiita.com さて。今回は、SpringBoot + Thymeleafで、JavaScriptに変数を埋め込む方法を紹介します。 環境 Java 試しに23を使っていますが、21でも問題ないです。 openjdk version "23.0.1" 2024-10-15 OpenJDK Runtime Environment Corretto-23.0.1.8.1 (build 23.0.1+8-FR) OpenJDK 64-Bit Serv…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の9日目を担当します。 qiita.com 今回はAlpine.jsでdialogタグを制御する方法をご紹介します。 dialogタグとは Alpine.jsで制御する コンテンツの外側を押下しても閉じられるようにする まとめ dialogタグとは dialogタグはHTML標準のダイアログボックス要素です。2022年3月にFirefoxでもサポートされ、広く使用できるようになりました。 HTML標準ということで、表示されたダイアログは自動的に最上位のレイヤー…

こんにちは。エキサイト株式会社でアプリエンジニアをしている岡島です。エキサイトホールディングス Advent Calendar 2024の6日目を担当させていただきます。 今回は、RaycastとScript Commandを用いて、Slackでのジョブカン勤怠打刻を自動化する方法をご紹介します。 なお、使用PCはMacOS、ブラウザはArcを用いています。MacOSでのGUIの操作が比較的簡単なAppleScriptを用いた方法となりますのでご注意ください。 ↓例 Slackを開き、メッセージ送信まで自動化 Raycastとは Raycastとは、アプリケーションの起動、ファイル検索、スクリ…

エキサイト株式会社メディア事業部エンジニア佐々木です。メディア事業部では、Docker Composeを使用して、ローカル環境での開発を行っております。SpringBoot3.1よりDocker Compose Supportがリリースされていますので、明日から使ってみましょう。 前提 下記、環境は必要になります。 Java 17以上 SpringBoot 3.1以上 Docker Compose CLI Gradle or Maven ディレクトリ構成 下記のようなディレクトリ構成になっています。 root階層にcompose.yamlがあり、SpringBootはこれを読み取ってDocke…