はじめにAI と一緒にアプリを作る人が増え、「できたけど、どこで公開しよう？」と悩む人も多いと思います。この記事では、その公開先として Cloudflare Workers への載せ方を、アプリの種類別にまとめます。SPA や主要なフレームワークなら、npx wrangler deploy を1回実行するだけ で公開できます。!2026年10月15日時点の情報で、アプリの載せ方は実際にデプロイして確認しています。動作確認環境: Node.js 24 / Wrangler 4.151.0 / create-cloudflare 2.74.0 / vinext 1.2.0 / c...

はじめにオライリーの本は、技術書として信頼できるので、これまでも必要なものを買って読んでいました。自分は紙の本のほうが読みやすいタイプです。ただ、オライリーの本は分厚いものが多く、持ち歩くと重いのが難点でした。そんなとき、オライリーの本がオンラインのサブスクで読み放題になると知って、魅力を感じました。1冊数千円すると、気になっても買うまでには至らない本がけっこうあります。そういう本も気軽に開けるなら、お得に入れる方法があるなら入ってもいいかな、と考えました。そこで、まずは10日間の無料トライアルを始めました。もう一つ気になっていたのが、O'Reillyが公式のMCPサーバーを...

はじめに2025年12月に、社内のデザイン標準化プロジェクトの振り返りと今後の展望をまとめました。https://zenn.dev/sonicmoov/articles/design-standardization-project-look-back-2025前回の記事では、今後の方向性として下記の4つを挙げていました。問い合わせの対応フローの自動化デザインデータの品質基準の策定デザインレビューの観点の整理、フローの整備デザイントークンやライブラリの活用促進今回はその続きとして、各項目の進捗と、デザイナーとの協働を通じて見えてきた難しさ、これからの課題をまとめます...

はじめに株式会社ソニックムーブのエンジニアのnoheです。ここ半年ほどで、実装はほぼAIに任せるようになりました。VS Codeは開いているものの、画面はほぼターミナルで占められ、エディタはプロンプトの下書きにしか使っていませんでした。その中で実装とレビューなどを並行で行なっていると、実装中のブランチが切り替わってしまったり、事故が時々起きる状況でした。そこで1ヶ月ほど前から、エージェントに任せる前提で作られたOrcaに乗り換えてみたのでそちらの紹介をしたいと思います。先に結論です。エディタ中心の環境から乗り換えても、違和感なく使えました。worktreeの作成からセッ...

最近NixOSを触っていたのですが、設定記述をするうち、既存のdotfiles管理との衝突にあいました。既存ではMakefile + symlinkによる簡易な管理を行っていました。実際のところ、この管理をそのまま適用することも可能ではあるのですが、 プラットフォーム別の分岐などの課題があり、どうせならnixベースの管理を試してみようと思い立ちました。Nixのエコシステムにはhome-managerというホームディレクトリの環境設定を行うためのツールがあり、マルチプラットフォームに対応しています。こちらを使って、今までの自分のdotfiles管理の置き換えを考えてみます。 動機...

はじめにフロントエンドはjQueryで時が止まっているバックエンドエンジニアが、Claude CodeとFigma MCPを使ってWebサイトのフロントエンドを実装しました。先に結論を書きます。Figma MCPにページ全体のリンクを渡すだけでは、見た目は40点でしたスクショ・アイコンのSVG・インタラクションの指示を足して、やっと70点でした最後にページ全体を読み込み直して余白を合わせ、85点くらいまで上がりました残り15点は人の目で確認して直しました。これに1日2時間×1週間ほどかかっていますMCPは「読み込ませる」だけでは足りません。読み込ませたうえで、何を実装...

はじめにmargin-inline-startとmargin-left、なんとなく使い分けていないだろうか？自分はそうだった。padding-block-startのようなプロパティを、雰囲気で書いていた。「この方向に余白を足す」という感覚で手が動くだけで、なぜ物理プロパティではなく論理プロパティを選んだのか、聞かれたら答えられなかった。動くコードは書けても、選んだ理由を説明できない。これはまずいと思い、ちゃんと調べてみることにした。まだ実務経験も浅く、ベテランエンジニアからすれば当たり前の話かもしれない。それでも、同じように「なんとなく」で書いてしまっている人の参考にな...

はじめに株式会社ソニックムーブでフロントエンドエンジニアをしている Ishiguro006 です。この記事で伝えたいことは、HTMLの入れ子を、そのままBEMの命名やSCSSの階層に写す必要はないということです。Elementは基本的に1階層で命名するハイフンを含むElement名は、SCSSで分割せずに書くネストを見直すときは、生成されるCSSも確認する実務のPRレビューで、クラス名やSCSSの階層を深くしすぎていることを指摘されることがあります。 実務で迷っていたこと自分の実装を振り返ると、次のような原因がありそうです。見た目の区切りごとに階層を増やして...

はじめにこんにちは。株式会社ソニックムーブでフロントエンドを担当しているy.morimotoです。AIに既存の実装からテストを書かせてみると、大変よくできたテストを生成してくれるようになりました。しかし、後々しっかりレビューしてみると、本来の品質として何を保証しているのかが分からないテストが至るところに散見されました。単に実装からテストを生成させるだけでは、品質を担保できているとは言い難い結果となりました。今年はQAやテスト自動化に関する勉強会に何度か参加し、各社のQAの取り組みやAI活用の取り組みを聞きました。そこでは、各社「テストにおいてどのように品質を担保しながらAIを活...

定点撮影ができるiOSアプリを試作しました。スマホのカメラを使って同じ風景をできるだけ同じ位置・向きで撮影するのは意外と難しいですよね。それを支援する機能を持ったカメラアプリです。次の画像のような精度で定点撮影できます。このアプリをTestFlightからインストールし、お試しいただくことができます。https://testflight.apple.com/join/mtGMNZZq※注：TestFlightでの配布のため、試用以外でのご利用はご遠慮ください。予告なく配布を終了する場合があります。 使い方 新しい地点を登録する一覧画面右上の「＋」から撮影を開始しま...

HTTP/3 というものがあるらしい恥ずかしながら、つい最近 HTTP/3 という存在を知りました。HTTP/2 までは何となく理解しているつもりでしたが、HTTP/3 は「速いらしい」以上のことを何も知らない状態でした。調べてみると、HTTP/3 は HTTP のバージョンアップというより、Web を30年以上支えてきた TCP を捨てて、QUIC という別のプロトコルに土台を載せ替えたものでした。そこまでのことをするには、TCP のままではどうしても解決できない問題があったはずです。この記事では、その「なぜ」から始めて、HTTP/3 がどう解決したのかを追い、最後に Doc...

はじめに私たちはLINE公式アカウントを使った顧客育成SaaSを開発・運用しています。1年ほど前から、社内の問い合わせ対応・調査・資料作成・コードレビューといった業務に、Claudeベースの常駐AIエージェントを複数体入れて回してきました。正直に言うと、最初の半年で分かったのは「LLMは頼めば答える。でも答えの質は、必要な文脈をAIが検索で引き当てられたかどうかの運に依る」ということでした。ナレッジは数千本たまり、ツール接続（Slack・Notion・Jira・メール・本番データ）も揃った。それでも「今回はうまく見つけた」「今回は見つけられなかった」がずっと続く。この記事は、そ...

はじめにこんにちは。株式会社ソニックムーブでフロントエンドを担当しているy.morimotoです。フロントエンドにおいて、E2Eテストは必要不可欠なテスト手法ですが、運用を続けていくほど、テストケース作成・テスト実装・テスト修正にかかる工数が増え続け、次第に私たちの作業を圧迫していきます。また、AIを使って開発が高速になった今、E2Eテストは大きなボトルネックになると思います。そこで、ノーコードでAIが自律的にテストを実行する仕組みがあれば運用が楽になるのではないかと思いました。 概要本記事では、自然言語で書かれたテストケースをAIに読み込ませ、自律的にテストを実行する取...

はじめにiOS アプリのマルチモジュール構成で、テストカバレッジを計測して自動表示する仕組みをCIに組み込みました。要件はシンプルです。サードパーティのカバレッジツールに依存したくない（メンテコスト・供給リスクを避けたい）計測対象を「見たいコード」に絞りたい（ViewModel やロジック層など）CI で自動計測し、結果を README に反映したい結論としては、Apple 標準の xcodebuild + xccov だけでカバレッジを取り、集計は jq + awk の軽量スクリプト、実行は GitHub Actions、という構成に落ち着きました。ただ、ここに至る...

2026年8月26日、LINEミニアプリの「チャネル同意の簡略化」に関する認可フローが変更されました。これまでは、チャネル同意の簡略化が有効なLINEミニアプリへ初めてアクセスした際に「簡略化同意画面」または「読み込み画面」が表示されていました。今回の変更でこれらの画面も表示されなくなり、ユーザーはより直接的にLINEミニアプリを起動できるようになっています。参考：LINE Developers ニュースhttps://developers.line.biz/ja/news/1/一見すると「同意画面がなくなって便利になった」だけの変更に見えますが、実装側では openid /...

はじめにフロントエンドエンジニアをしているRyogaです。今回は、Webページの見出しなどでよく使われる大文字の英字を使った表現の最適解を教わったので、私と同じ初学者の方々や、ご存じでない方々に向けてまとめていこうと思います。 大文字の英字を使った表現とは執筆のために気取った言い方をしていますが、大文字の英字を使った表現とは、簡単なものです。例として以下の画像をご覧ください。こちらは弊社のコーポレートサイトから引用したものですが、トップページの見出しに「OUR BUSINESS」という文言が使用されています。この見出しを実装しようと思った時、あなたならどのように実装...

はじめにとある日の定例MTG中カスタマーサクセス(CS)から管理画面の顧客一覧が開けませんと報告……なんだと思ってる間に顧客問い合わせあり。やばい！全体影響だ！AWSｷｮﾛｷｮﾛしたら、OpenSearchが真っ赤っ赤🟥どうにかせねば、ということで何をしたかの備忘録!ESで実行したコマンドの解説です。ESそのものや、用語の解説は行いません。 本題端的にまとめると、サービスがスケールしたことによるデータ量の増加が原因でした。シャードの分割数が少なく、1シャードあたりのデータ量が増えたことでヒープ使用率が高騰していました。障害については、OpenSearchの...

はじめにこんにちは。株式会社ソニックムーブでバックエンドエンジニアをしているmugiです。最近はバックエンドからインフラ、WordPress、さらには先輩のコードをテストで突っつきまくったりと、とてもたのしいエンジニアライフを送っています。突然ですが、みなさん普段ニュースって読んでますか？昔は「朝起きたらテレビでなんとなく流れてくる」が普通でしたが、今はSNSやネットニュースなど、自分から情報を取りに行かないと辿り着けない時代 になりましたよね。で、生粋の面倒くさがりな私は思うわけです。「あ〜あ、毎朝勝手に自分に必要なニュースが降ってこないかな〜〜〜」と。そこで「そう...

Android skillsの開発がかなり活発に動いており、リリース直後の2026/4の記事を書いたことにはなかった新しいskillsが追加されている。今回は新しく追加されたのを中心に整理する。 追加されたスキルの詳細 1. Jetpack Navigation 3 の導入・移行用 (navigation-3)用途Jetpack Navigation 3 への導入・移行支援deep link、複数 back stack、Dialog / BottomSheet / List-Detail / Two-pane / Supporting pane などの実装支援条件分岐...

はじめにStacked PRsは複数の変更を小さなPull Request（PR）に分けて、前のPRに続く形で積み上げることで、レビューしやすい単位で開発を進められますこの記事では、Stacked PRsの作成・並べ替え・公開を少し楽にするVS Code拡張機能のRestackを紹介します RestackとはRestackは、GitHubのStacked PRsをVS Code上で操作できる拡張機能です内部ではGitHub CLIの拡張機能である gh-stack を利用し、Restackはその状態を操作するUIとして動作しますhttps://marketpla...