SentryのUnity SDKの始め方 – その1
ユーザー体験とパフォーマンスは、どんなゲームでも最も重要な2つの指標です。どのようなプラットフォームでも、可能な限り最適な状態で動作するようにする必要があります。 理想を言えば、プレイヤーから「動かない」「壊れている」と怒られるのは避けたいところです。また、ゲーム内で発生した問題が、その関連情報とともに通知されることが求められます。 そこで、Sentryの出番です。 Sentryは、開発者がアプリケーションを監視して、重大なエラーやパフォーマンスの問題について把握するのに役立ちます。さらに、ゲーム内のエラーを追跡する重要なコンテキスト情報を提供するため、迅速に修正することができ、プレイヤーに満足してもらいやすくなります。 また、Unityと統合したSDKを提供することで、開発者がゲームを監視することを容易にしてくれます。 このシリーズでは、SentryのUnity SDKをセットアップして、ゲームのエラーやパフォーマンスの問題を監視する方法について説明します。 入門編 前提条件 はじめに、以下のものがインストールされていることを確認してください。 Unity Hub Unity Package Manager – Unity Hubをインストールした場合、Unity Package Managerもインストールされているはずです。 Sentryのアカウントを作成する すでにSentryのアカウントをお持ちの場合は、このステップをスキップすることができます。お持ちでない場合は、Sentryに移動し、無料のアカウントを作成してください。 アカウント作成後、このような画面が表示されます。 「Install Sentry」をクリックして進むと、新しい画面に遷移します。そこで、監視するプラットフォームとしてUnityを選択します。 最後に、「Create Project」をクリックして、Sentryプロジェクトを作成します。 Sentry SDKの設定 Sentry SDKは、Unityエディタ内で直接インストール、設定することができます。 Sentry SDKのインストール ここでは、Unity Package Manager経由でSDKをインストールすることをお勧めします。 プラスアイコンをクリックすると、パッケージマネージャがパッケージを取得するためのGitHubリポジトリURLを指定するオプションが表示されます。 https://github.com/getsentry/unity.git#0.27.0 インストールが完了すると、以下のようなアウトプットが表示されるはずです。 いくつかのバグをトリガーに、ゲームをクラッシュさせるデモシーンを含むサンプルがあり、オプションでインポートすることができます。 そして、SDKがイベントの送信先と関連するプロジェクトを知るためには、SentryプロジェクトのDSN（データソース名）を追加する必要があります。これは、[ツール] -> [Sentry]に移動して設定することができます。 [Sentry]をクリックすると、以下のようなセットアッププロンプトが表示されるはずです。 「Start Wizard」をクリックし、ウィザードを初期化します。すると、Sentryは自動的にブラウザタブを立ち上げ、既存のプロジェクトをエディタにインポートします。 もしプロジェクトが1つしかない場合、設定ウィザードは終了します。複数ある場合、Unityのゲームと関連づけるプロジェクトを選ぶプロンプトが表示されます。 最後に、同梱のサンプルを使用するか、次のようなスニペットで独自の例外を投げることで、Sentryが期待通りに動作しているかを確認することができます。 上図は、スニペットで発生した例外のエラーイベントを示しています。 SDKはこれを自動的にキャッチアップし、Sentryに送信し、issueとしてリストアップしてくれます。 最新リリースでの新機能 エラーのキャプチャーは、Sentryの多くの機能の1つに過ぎません。Sentryの最新版では、Unityのエラー診断と修正に役立つ多くのユーティリティが追加されました。 iOS、WebGLなどでもUnityをサポートするようになり、開発者はデスクトップアプリケーションの監視サポートも可能になりました。しかし、Sentryはそれだけにとどまりません。次のような機能も追加されました。 すべての対応プラットフォームに対応したシンボルの自動アップロード 以前は、画面のフリーズを検出する方法がありませんでしたが、メインスレッドが5秒以上フリーズした場合に、自動的にイベントを作成するようになりました。 […]
アプリ開発時のReact Nativeのデバッグとエラートラッキングについて
優れたソフトウェア開発者は、コードをデバッグする方法を知っています。 実際、ほとんどのソフトウェア開発者は新しいコードを書くことよりも、既存のコードをデバッグすることがほとんどです。ネイティブアプリの開発に関しては、開発中のデバッグとエラーの追跡は手間のかかる面倒な作業として有名です。 そこで今回は、React Nativeアプリケーションをデバッグし、実際にエラーを追跡する方法をご紹介していきます。 また、React Native Debuggerというツールを使ったエラー追跡についても触れていきたいと思います。 React Nativeにおけるデバッグの攻略法 開発中のコードを効率的にデバッグするためのデバッグ手法を知っておくと便利です。場合によっては、専用のデバッグツールを使用する方が効率的かもしれません。 まず、React Nativeアプリでコードをデバッグするために使用できる一般的なテクニックをご紹介します。 今回の記事を通して使用する、新しいExpoベースのReact Nativeプロジェクトを作成しました。次のコマンドを実行すると作成できます。 ここでは、簡単なReact Nativeのコードを紹介します。 これはボタンをレンダリングして関数を起動し、コンソールに文字列を表示する簡単なアプリケーションです。 デバッグ用端末を使う 新しいExpoプロジェクトを起動したり、React Nativeアプリを実行したりすると、開発モード中に操作した全てのログがターミナルに表示されます。 これは、expo startコマンドを実行する別のターミナルでも、IDEに統合されたターミナルでもかまいません。 例えば、VS Codeを使用した場合、ターミナルにはアプリで行ったすべてのログが表示されます。 これは、ローカルでアプリケーションを実行する方法と似ています。 ReactやReact Nativeなどのフレームワークを使ったクライアントサイドの開発では、このターミナルでクライアントサイドのログを取得し、開発モードのアプリのデバッグに利用でき、どんな操作をしたときにどんなエラーが起きたのか手軽に確認できます。 さて、それではわざと構文エラーを起こしてみましょう。 上記のセクションのレイアウト定義において、最後にセミコロンを追加してみます。するとターミナルには、このようなエラーが表示されます。 何のファイルで、どんなエラーが、どこの行で起きたのか……エラーメッセージとともに表示されていますね。 Expoターミナルは、すべてのログが最初に表示される場所です。 そのため、アプリをデバッグしているときはいつでも、そのターミナルを最初に見ることができます。 エキスポデバッガー Expo を React Native で使用する場合、ビルトイン（備え付け）のデバッガーを入手することができます。 このデバッガーは、エラーメッセージを表示し、エラーが表示されたコードの部分を明示し、コード内のエラー部分をマークしてくれます。 React Nativeプロジェクトを物理デバイスで実行している場合、アプリのコードを実行しているExpoアプリでエラーがどのように表示されるかは次のとおりです。 エラーを確認し、コードを簡単にデバッグすることができますが、この場合、スタックトレースはあまり役に立ちません。なぜなら、エミュレータでExpoを使っているのであれば、ログの方が綺麗に整形されているためです。 スタックトレースはありませんが、こちらの方が簡潔で必要な情報だけが表示されていますね。これで混乱を減らし、より早くエラーにたどり着くことができます。 ブラウザで見るReact開発ツール 先ほどはネイティブアプリでした。 続いては、Web上でフロントエンドアプリケーションをデバッグしてみましょう。 ブラウザを開くだけで、コンソールのログやエラー、レンダリングされたUI要素、関連するスタックトレースなど、あらゆるものが表示されます。 ありがたいことに、React NativeやExpoベースのプロジェクトでも同じことができます。React Developer Tools Chrome拡張をインストールするか、次のコマンドを使用してシステムにグローバルインストールするだけで導入可能です。 Expoアプリの端末で、「w」を押せばWeb上でアプリが開きます。 エラー情報が表示され、Webアプリと同じようにデバッグすることができます。 これは、先ほどデバッグターミナルで見たのと同じエラーで、Expoアプリとエミュレーター上でも同じですね。 […]
コマンド1つでSentryをインストールする方法
今回は、Sentryのインストールと初期設定を簡単に行う方法を共有いたします。 Next.jsを使用し、ターミナル（コマンドプロンプト）でコマンドを1つ実行するだけで、新しいSentryアカウントの設定や新しいSentry Next.jsプロジェクトの作成ができるようになります。 始めるのはとても簡単です。 sentry.io/signupにアクセスしてアカウントを作成したり、アプリ内からプロジェクトを作成したりすることももちろん可能です。 しかし現在は、面倒なクリック作業なども省略し、自分のリポジトリに移動してこのコマンドを実行するだけで必要な設定は完了します。 スクリプトが起動すると、ブラウザのタブを開いてサインアップフォームを表示します。 必要な情報を入力してターミナル（コマンドプロンプト）に戻ると、インストールが完了した旨の文言が表示されます。 この新しい方法では、next.config.jsファイルにSentry固有の要件が自動的に追加され、例外や遅延の問題の追跡を開始するために必要なファイルが作成されます。その内容を確認したい場合は『git status』を実行してご確認ください。 Sentryが無事導入できているか確認する場合は、ローカルでエラーをトリガーするか、変更をデプロイして例外や遅いトランザクションを実際に実行する必要があります。 それもSentry for Next.jsで、たった1つのコマンド（npx @sentry/wizard -s -i nextjs）で完了します。詳しくは、GitHub、Twitter、またはDiscordでご意見をお聞かせください。 Sentryは、アプリケーションコードの健全性を監視するために不可欠です。 エラートラッキングからパフォーマンスモニタリングまで、開発者はフロントエンドからバックエンドまで、アプリケーションをより明確に把握し、より迅速に解決し、継続的に学習することができます。 Sentryは、350万人以上の開発者と世界中の85,000以上の組織に愛され、Disney、Peloton、Cloudflare、Eventbrite、Slack、Supercell、Rockstar Gamesといった世界的有名企業の多くにコードレベルの監視機能を提供しています。 毎月、世界中で人気のサービスやアプリケーションから、数十億件の例外を処理し続けています。 IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
Next.jsのよくあるエラーとその解決方法
バグは、ソフトウェア開発において最も厄介なものの1つです。ほとんどの場合、すぐに解決することができますが、中には修正に数時間から数日かかるような恐ろしいバグもあります。 Next.jsは、現在の世界で最も人気のあるWeb開発フレームワークの1つですが、バグから逃れることはできません。 そこで、この記事では、さまざまなプラットフォームの開発者から報告された、最も一般的なNext.jsのエラーをいくつか紹介します。 なぜこのようなバグが発生するのか、そしてどのように解決するのかについて説明します。 ドキュメント/ウィンドウオブジェクトエラー Next.jsでよくあるエラーのひとつに、「document/windowが定義されていない」というエラーがあります。なぜ起こるのでしょうか？このエラーは、通常、インストールされたパッケージが、ページコンポーネントの中でブラウザのウィンドウオブジェクトに直接アクセスしようとしたときに発生します。 例えば、Next.jsアプリケーションにindex.jsのサンプルページがあり、以下のようにブラウザのlocalStorageにアクセスしようとすると、「document/windowが定義されていない」というエラーが発生します。 解決方法 このエラーを解決するにはいくつも方法があります。 ひとつは、ブラウザのウィンドウオブジェクトを必要とするコードブロックを実行するためにreactのuseEffect()フックを使用し、ページコンポーネントがマウントされているときにのみコードを実行するようにすることです。 もうひとつの方法は、ブラウザのウィンドウを必要とするコードを独立したコンポーネントに変換し、Next.jsの動的インポート機能を使ってページコンポーネントにインポートすることです。 Nextの動的インポートは、必要に応じてコンポーネントを遅延ロードまたは動的にロードするために使用される機能です。 さらに、ssrオプションを追加することで、使用時にサーバーレンダリングの有効・無効を設定することができます。※ちなみに「ssr」は、サーバーサイドレンダリングの意味があります。 ssrの値をfalseに設定するだけで、ブラウザのウィンドウやドキュメントに依存するコンポーネントや外部パッケージを読み込むことができるようになります。 下図のようにすることで、ページ内で動的に読み込むようになります。 ミドルウェアエラー ミドルウェアは、リクエストの完了前にコードが実行され、受信したリクエストに基づいて、ユーザーに送信するレスポンスを書き換え、リダイレクトしたり、ヘッダーを追加したりすることができます。 次の例は、Next.jsでミドルウェアを扱うときに遭遇する可能性のあるエラーの1つです。 Next.jsをカスタムサーバーで使用しており、設定でサーバーホストのURLを明示的に指定していない場合に発生するエラーです。 また、Nxのようなモノレポビルドシステムを使用している場合、このようなツールがバックグランドでカスタムサーバーを作成するため、このエラーが発生します。 ※「モノレポ」とは、複数のプロジェクトやアプリケーションのソースコード を一元管理することです。 解決方法 このエラーは、サーバー設定ファイルでホスト名を指定することで簡単に修正することができます。 Nxを使用している場合は、プロジェクト設定ファイル（project.js）のserveオプションを修正することで対応できます。つまり、プロジェクト設定ファイル（project.js）を次のように修正します。 ミドルウェアがトリガーされない まれにミドルウェアのコードが全くトリガーされない場合がありますが、それはミドルウェアのファイルが正しく配置されていない可能性があります。 解決方法 Next.jsの古いバージョンでは、ミドルウェアのファイルは/pagesディレクトリに_middleware.jsとして作成していました。 しかし、Next.jsの最新版では、このファイルをルートフォルダ、つまり/pagesディレクトリと同じ階層にmiddleware.jsとして保存する必要があります。 そのため、ファイル構造は次のようになります。 API/スラッグエラー Next.jsには、データ取得のためのAPIとしてgetStaticPathsとgetServerSidePropsがありますが、これらの使い方を誤るとエラーが発生することがあります。 そのうちのgetStaticProps APIでのエラーは、以下の通りです。 このエラーは、next.jsのSSG（Static Site Generation）機能を使ってサーバーサイドで動的ページをレンダリングしているときに、ページのコンポーネントにgetStaticPaths関数が定義されていない場合に発生します。 動的経路を使用するサーバーサイドレンダリング（SSR）または静的生成（SSG）ページを構築するためには、getStaticPaths関数を追加する必要があります。 解決方法 例えば、/pageName/[slug]がブログ記事に関する情報を表示するページとした場合、getStaticPaths関数でデータベースから利用可能なすべてのブログ記事のスラッグのリストを取得し、[slug]パラメータの値としてそれらを戻り値として返す必要があります。 また、Next.jsのデータ取得APIは、すべてページコンポーネントの内部でのみ使用でき、通常のコンポーネントの外部では動作しないことも特筆すべき点です。 モジュールエラー また、Next.jsでよくあるエラーは、次のような「モジュールが見つかりませんでした。’moduleName’を解決できない」というエラーです。 このエラーは、Next.jsではアクセスできないモジュールをインポートしているときに発生します。 例えば、fsモジュールのように、クライアント側で利用できないモジュールを、あなたやサードパーティのパッケージがアクセスしようすると発生します。 解決方法 このエラーを解決するには、Node.jsまたはサーバー関連のコードをすべてNext.jsのデータ取得API（getServerSideProps、getStaticPaths、getStaticProps）の内部に置くようにしてください。 Node.jsモジュールに明示的にアクセスしようとしているのではなく、インポートしたパッケージが原因でエラーが発生した場合は、Next.jsの設定ファイル（next.config.js）に、次のようにwebpackのエントリを追加する必要があります。 このコードでは、optionsオブジェクトのisServerプロパティをチェックして、現在のビルドがサーバーサイド用かクライアントサイド用かを判断しています。 ビルドがサーバーサイド用でない場合（つまりisServerがfalseの場合）、fsモジュールはwebpack設定のresolveセクションでフォールバックリストに追加されます。 これは、webpackがfsモジュールのimportに遭遇したとき、importを解決しようとせず、fsモジュールがアプリケーションにバンドルされないことを意味します。 もし、Node.jsのモジュールを使っていないのに「モジュールが見つかりません」というエラーが発生する場合は、モジュールが正しくインストールされ、インポートされていることを確認してください。 または、ファイル名やモジュール名が間違っている可能性もあるため、そちらについても確認するようにしましょう。 クロスオリジンエラー（Next […]
Jetpack Composeのはじめかた
先日、宣言型UIへの移行方法に関する記事を書きました。 Androidアプリ開発も、「Jetpack Compose」で最近のトレンドである宣言的実装に加わりつつあります。 Androidスマホで動作するアプリを、ネイティブAndroidアプリと呼びます。 これを制作する際に、もっと効率化しようと生み出されたのが「Jetpack Compose」です。 Googleによって制作されたこの新しい宣言型UIツールキットが、急速に普及しています。 実際、昨年の「Android Dev Summit」で発表されたように、Androidアプリで人気上位1,000のアプリのうち、160が既にJetpack Composeを使用しています。 従来のXML Viewとは対照的に、Jetpack Composeでは、UIがどのように見え、どのように振る舞うべきかを記述する「Composable Function」を使用して、UIを構築できることが特徴です。 Jetpack Composeを使用する主な利点は、より簡潔で理解しやすいUIコードを書くことができることです。 これは、保守性の向上と開発期間の短縮につながります。 Jetpack Composeを使用する主なデメリットは、まだ生まれて間もない新しいライブラリであるため、使用できるエコシステム（OSバージョン）が限られていることです。 つまり、従来のXML Viewによる開発で使えていたライブラリやツール、リソースの数が、Jetpack Composeだと比較的少ないということです。 それでも、Jetpack Composeを学ぶことは、大きな意味を持ち、挑戦に値すると私たちは信じています。 ここでは、あなたが始めるにあたり、私たちが役に立つと思ったいくつかのヒントを紹介します。 Jetpack Composeの使用開始方法 Jetpack Composeで作業するための推奨IDEは、Android Studioです。 Android Studioをダウンロードしインストールすると、新しいプロジェクトを作成するオプションが表示されます。 新しいJetpack Composeアプリケーションを作成するには、空のComposeアクティビティ（Material v2を使用）、または空のComposeアクティビティ（Material3）（昨年の時点でバージョン1.0であるMaterial v3を使用）のいずれかを選択する必要があります。 このスクリーンショットの右上に、両方のオプションが表示されています。 これは、最も手軽にJetpack Composeを始める方法であるといえます。少し試したいという場合におすすめです。 既存のAndroidアプリケーションにJetpack Composeを有効にしたい場合は、次のように修正を行いましょう。 1. アプリのbuild.gradleファイルに、以下のビルド設定を追加します。 2. Compose BOM（部品表）とComposeの依存関係のサブセットを依存関係に追加します。 Jetpack ComposeのUIはどのように構築されているのでしょうか？ Jetpack Composeでは、ビュー（レイアウト要素）の階層を定義するためにComposablesを使用しています。 そして追加されたComposablesに視覚的な外観や動作の変更を適用するためにmodifierを使用します。 コンポーザブルファンクション Composable関数（または単にComposableといいます）は、「@Composable」でアノテーションするだけで、Composable関数の中に入れ子構造でUIを定義することができます。 UIを定義するために、Composableの階層を返す普通のKotlin関数でもあります。 […]