プロダクト開発本部 開発2部 フロントエンドグループ マネージャーのこん(@k0n_karin)です！ 今回はタイトルの通り、ヤプリのWebフロントエンドが現在どんな状態か、どんな課題があるのかなどを整理してみました。本記事を通して、ヤプリのWebフロントエンド…

はじめに フロントエンドエンジニアの @aose_developer です。 自分がプログラミングにハマったきっかけでもありますが、「いかに構造化された可読性の高いコードが書けるか」を意識して「ああでもないこうでもない」と模索するのが専ら趣味です。 直近でも…

この記事は Yappli Advent Calendar 2024 の13日目の記事です。 Nuxtを採用した理由 当時のアーキテクチャの方針 現在の課題 1. アプリケーション全体がVuexと密結合になっている コード例 2. Vuexの移行コストが高い 3. グローバルで使わない状態もVuexに存…

複数のフローティングパネルを表示する例フロントエンドエンジニアのゆう（@aose_developer）です。 ヤプリのCMSにはBlock UIという、直感的かつフレキシブルにアプリを制作できる基盤があります。 Yappliの新基盤「Block UI」 のご紹介 個人的にはノーコー…

※2024-10-11追記 @sentry/nuxt 8.32.0 のリリースにより本ブログの内容は発生しなくなりました。 Nuxt3で@sentry/vueを使っている場合は、@sentry/nuxtの利用をおすすめします。 www.npmjs.com フロントエンドエンジニアのこん(@k0n_karin)です！今回はNuxt3…

サーバーサイドエンジニアの田実です。 顧客管理サービスである Yappli CRM の社内用管理画面ではjQueryが使われています。jQueryは簡易的なDOM操作やインタラクティブなデザイン、アニメーションを実装するには便利なツールである一方で、要件が複雑になる…

こんにちは！株式会社Yappli CorporateITの辻村です。 こちらは2023年度のYappliアドベントカレンダー2枚目の12/24の記事でもあります なんとアドベントカレンダー1枚目が全部埋まって、2枚目に突入です オリジナルBINGO 今年のYappliの納会の二次会で、ビン…

こんにちは！ サポート・アプリ申請チームのあきなです。 アプリ申請チームとは、クライアントから申請依頼があったアプリを、AppleやGoogleに審査提出する業務を主に行なっているチームです。 審査提出の他にも業務が多岐に渡り、業務の効率化を常に行なっ…

フロントエンドエンジニアのこん(@k0n_karin)です！ ヤプリでは毎四半期の末頃になると、各自が期初に立てた目標を達成するべく大量の記事が投稿されます！私ももれなくそのうちの一人です！ WAI-ARIA、Roleとは 十分調べて記事執筆しておりますが、もし間違…

フロントエンドエンジニアのこん(@k0n_karin)です！ 今回は昨今のVueに欠かせない2つの便利なコンポーネントを組み合わせて使う際のお作法を書いていきます。 VueのSuspense Vue3からはcomposition APIでsetup()や<script setup>を使う事が増えたと思います。 setup内で非…

フロントエンドエンジニアのこん(@k0n_karin)です！ 今回は昨年末に書いたウェブストーリー関連のお話となります。 tech.yappli.io HLSでm3u8を再生する HLS用のcomposableを実装 composableを利用するVueコンポーネントを実装する おわりに HLSでm3u8を再生…

フロントエンドエンジニアのこん(@k0n_karin)です！今回は9割おふざけ、1割真面目なブログです。 TL;DR とにかく花火を打ち上げよう fireworks-jsとVue.jsでブラウザ上で花火を打ち上げる VSCode拡張機能で開発中もエディタ上で花火を打ち上げる エンジニア…

こんにちは サーバーサイドエンジニアの武井です。 今回はYappliの電子書籍機能でPDF対応をしたときに経験したこと苦労した点などをご紹介します。 電子書籍機能へのPDF対応は少し前の2021年3月にリリースされました。それまでYappliの電子書籍機能では画像…

npm v7へのマイグレーション直後、`sudo npm run script`が期待通りの動作をしませんでした。そこで、各種パッケージのコードリーディングをして、原因を突き止めました。

サーバーサイドエンジニアの田実です！ ヤプリのフロントエンドの開発では、huskyを使ってコミット前にlint-stagedを実行し、eslintやprettierでフォーマットしています。 huskyがどのようにして動いているのか興味があったので調べてみました。確認したhusk…