…プ EM のこん(@k0n_karin)です。 今回は、@nuxtjs/storybook を使用している際に、バンドルサイズをコントロールする方法についてお話します。 storybook.nuxtjs.org TL;DR pages や plugins などを使わない場合は、別名のディレクトリに一時的に変更してからビルドすると、バンドルサイズを削減できる。.nuxtignoreでもいいし、適当なshellを書いてもいい。 バンドルサイズの劇的ビフォーアフター。24.5MB …

…ム EM のこん(@k0n_karin)です！今回はazukiazusa さんの記事で Vercel AI SDK を使った MCP クライアントの実装が紹介されていたので、Nuxt で同じようなものを実装してみました！ 元記事は Next.js で実装されていましたが、普段 Nuxt を使っている身としては「Nuxt でもできるのかな？」と気になったので実際に試してみました。 azukiazusa.dev Vercel AI SDK は@ai-sdk/vue を提供しており…

…ネージャーのこん(@k0n_karin)です！ 最近プロダクト開発本部でAI活用の推進を目的としたAI委員会を新たに設立しました。今回は、なぜこの委員会を立ち上げたのか、現在の取り組み、そして今後の展望について紹介していきます。 ヤプリにおけるAI活用の現状 委員会設立の背景として、まずはヤプリで現在どのようにAIを活用しているかをお話しします。全社的に導入しているのは、Google WorkspaceのGeminiです。また、NotebookLMを使った資料の要約や分析、G…

…ネージャーのこん(@k0n_karin)です！ 今回はタイトルの通り、ヤプリのWebフロントエンドが現在どんな状態か、どんな課題があるのかなどを整理してみました。本記事を通して、ヤプリのWebフロントエンドに興味を持っていただけたら何よりです。 ヤプリのプロダクト状況 今のチーム規模や開発の体制 YappliのWebフロントエンドの面白さ 大規模な開発と事業の中核となる開発ができる 管理画面とヤプリの営業生産性への影響 動的で複雑なUI・データの実装 約4000万MAUのネイ…

はじめに フロントエンドエンジニアの @aose_developer です。 自分がプログラミングにハマったきっかけでもありますが、「いかに構造化された可読性の高いコードが書けるか」を意識して「ああでもないこうでもない」と模索するのが専ら趣味です。 直近でも、開発業務を通じてAPI通信周りの実装とコードの構造化について模索していたので、今回はその備忘録的な記事を残したいと思います。 この記事は Yappli Advent Calendar 2024（2枚目） の12/12の記…

…エンジニアのこん(@k0n_karin)です！ Yappliでは、ネイティブアプリをブラウザ上でノーコードで開発・運用・分析するためのCMSを創業当初から開発しています。 このCMSのフロントエンドは当初PHPとjQueryで作られていましたが、2019年に現在のNuxt製のCMSにリニューアルされました。リニューアル5年という節目で、誕生から現在までを振り返ってみます。 ログイン直後のYappliのCMS Nuxtを採用した理由 新しいCMSの実装にあたり、フロントエンドフ…

…ちましたが、こん(@k0n_karin)目線でVue Fes Japan 2024について振り返ってみます。 セッションの資料 speakerdeck.com LTの資料 こん(@k0n_karin)の分 speakerdeck.com @aose_developerの分 speakerdeck.com CfP応募から準備開始まで 今年のVue FesのセッションCfPに応募したのは7月頃。8月初めに採択のメールが届いたときは、嬉しさ半分、不安半分でした。 そこから、内容をの…

…エンジニアのこん(@k0n_karin)です！今回はNuxt3でSentryを扱ったときに遭遇した事象について投稿します。 ※NuxtとSentryそのものの説明は割愛します。 ※本記事執筆時点のバージョンは以下のとおりです。 nuxt: 3.12.2 @sentry/vue: 8.13.0 解決策 先に解決策です。事象の解説も見たい方は次の章以降を参考にしてください。 Nuxt3で@sentry/vueを使う際、エラー発生時に500エラーの画面を表示したくない場合は、Sen…

…エンドエンジニアの@k0n_karinです！今回は業務で利用中のNuxt BridgeにissueとPRを出す機会があったので、その体験記を書いていきます。 github.com きっかけ YappliのCMSでは、現在Nuxt2を使っています。Nuxt2のEOLが来年6月末のため、Nuxt3を目指して絶賛バージョンアップ作業を進行しています。 Nuxt3へのバージョンアップ作業にはNuxt Bridgeという、Nuxt2向けにNuxt3の機能をバックポートしてくれる便利なO…

…エンジニアのこん(@k0n_karin)です！ ヤプリでは毎四半期の末頃になると、各自が期初に立てた目標を達成するべく大量の記事が投稿されます！私ももれなくそのうちの一人です！ WAI-ARIA、Roleとは 十分調べて記事執筆しておりますが、もし間違いなどあればぜひ指摘いただけると助かります。 今回はアクセシビリティのお話です。冒頭からもしかしたら馴染みのない言葉が登場したかもしれません。 早速WAI-ARIAについて調べましょう。W3CにWAI-ARIAの概要があります。…

…エンジニアのこん(@k0n_karin)です！ 今回は昨今のVueに欠かせない2つの便利なコンポーネントを組み合わせて使う際のお作法を書いていきます。 VueのSuspense Vue3からはcomposition APIでsetup()や<script setup>を使う事が増えたと思います。 setup内で非同期な処理を実行することも日常茶飯事だと思いますが、そのまま実装してしまうと、以下のような警告が出て正しくコンポーネントが表示されません。 [Vue warn]: C…

…エンジニアのこん(@k0n_karin)です！ 今回は昨年末に書いたウェブストーリー関連のお話となります。 tech.yappli.io HLSでm3u8を再生する HLS用のcomposableを実装 composableを利用するVueコンポーネントを実装する おわりに HLSでm3u8を再生する 前回、動画はmp4を表示していましたが、モバイル端末のWebViewで再生することを考えて、HTTP Live Streaming（HLS）を使った動画再生に対応します。HLS…

…エンジニアのこん(@k0n_karin)です！今回は、Vueを使ってWebストーリーっぽいコンポーネントを実装してみましたので、その簡単な解説記事です。 Webストーリーとは 作った経緯 できたもの 作る過程 準備 コンポーネント設計 ストーリーの表示 ストーリーのコントロール おわりに Webストーリーとは ウェブストーリーは、動画、音声、画像、アニメーション、テキストを融合して 動的な消費体験を創造する、一般的な「ストーリー」形式のウェブ バージョンです。 develop…

…エンジニアのこん(@k0n_karin)です！今回は9割おふざけ、1割真面目なブログです。 TL;DR とにかく花火を打ち上げよう fireworks-jsとVue.jsでブラウザ上で花火を打ち上げる VSCode拡張機能で開発中もエディタ上で花火を打ち上げる エンジニアの遊び心をプロダクトに反映しよう TL;DR 思いついた経緯 とにかく花火を打(ぶ)ち上げる 開発中も花火を打(ぶ)ち上げる ブラウザで花火を打(ぶ)ち上げる どこで花火を打(ぶ)ち上げるか いざ実装 真面目…

…エンジニアのこん(@k0n_karin)です🦊 2021年の12月に入社して早々に、Discordというアプリを社内のコミュニケーションツールとして試す提案をしました。 試験的に導入して半年ほど経ったので、弊社でどのように運用しているか、使ってみて良かった点などをまとめようと思います。 Discordとは？ discord.com Discordは、コミュニティや友達と集う居場所をつくれる空間。 筆者の印象では、ゲームなどのボイスチャットでよく使われている（使ってる）ツールで…