Forge アプリ開発をする上では、基本中の基本ですが、今日は Web ブラウザで利用出来るデベロッパーツール/開発者ツールについて、改めてご紹介しておきたいと思います。
Web ブラウザで表示、実行されるコードはまる見え
Forge が提供する API で Web ブラウザ内で実行されるのは、Forge Viewer として提供される Viewer JavaScript API のみです。Model Derivative API や Data Management API などの他の API は、Forge サーバー（クラウド）とのコミュニケーションで使われる RESTful API なので、Web ブラウザ側（クライアント側）ではなく、Forge アプリを配信することになる Web サーバーとして利用、実装するのが一般的です。
よくある質問に、「Forge OAuth API（Authentication API）をクライアント側の JavaScript で呼び出すと CORS エラーとなり、Access Token を取得することは出来ない」、というものがあります。これはセキュリティ上の制限、ある意味、仕様（Access-Control-Allow-Origin: * などを返さない）なのですが、デスクトップ製品のアドイン/プラグイン開発の方には「可能なはずなのに、なぜ、Web ブラウザ側（クライアント側）で OAuth API（Authentication API）の呼び出しが出来ないのか」、と不思議に感じる方もいらっしゃるようです。
このシナリオでは、最も理解し易い懸念点があります。Forge アプリ開発者の視点では、Access Token の取得には Client ID と Client Secret が必要になるのは周知のとおりです。両者は、クラウド サービスへのサインイン時に利用する、他人に知られないようにすべき、ユーザ名とパスワードに相当するものと捉えることが出来ます。そして、この Access Token がないと Forge クラウド上のリソースへのアクセスが却下されてしまう訳です。もし、Web ブラウザ側（クライアント側）で両者を記述して Access Token を取得するようなコードを書いてしまうと、秘匿すべき Client ID と Client Secret をわざわざ第 3 者に教えてしまうのと変わらない結果になってしまいます。
なぜ、そんなことが言えるのか？
Web ブラウザで任意のページを表示して F12 キーを押してみてください。ブラウザによりますが、画面下側や右側に複数のタブを持った画面が表示されるはずです。例えば、Google Chrome でオートデスクの HP https://www.autodesk.co.jp/ を表示して、F12 キーを押すと、次のように表示されます。ここで表示されているのが デベロッパー ツール、あるいは、開発ツール と呼ばれる Web ブラウザ組み込みの画面です。
Web ブラウザによって名称が異なりますが、デベロッパーツールに複数あるタブの中から、[Sources] や [デバッガー] をアクティブにすると、表示中のページを定義する HTML コードや、HTML が参照、実行する JavaScript コードを直接見ることが出来るはずです。
つまり、Web ブラウザ側（クライアント側）で実行されることになる JavaScript コードに Client ID と Client Secret を記述していまうと、誰でも、その値を把握することが出来てしまうことになります。この 2 つさえ分かってしまえば、然るべき手順で Access Token を取得出来てしまうため、偽装アプリなどからストレージの内容が余も取られてしまい、大切なデータが漏洩してしまう結果にもつながります。このように、Web ブラウザ側（クライアント側）の HTML や JavaScript はまる見えなので、実装内容が推測されてしまうようなコメント行も含め、不用意な記述は避けるべきなのです。
便利な開発者用のデバッグ ツール
前置きが長くなってしまいましたが、このデベロッパーツール/開発者ツールは、その名の通り、Web ブラウザ側（クライアント側）の HTML や JavaScript をデバッグする開発者用のツールで、さまざまな機能を持っています。おおまかには、次のようなものがあります。
コンソールによるメッセージ表示と確認
HTML ページの表示時（ロード時）や JavaScript の実行時に問題が発生した際、原因追及の最初の手がかりとなる のエラーや警告を表示します。JavaScript 実装で colsole.log() 関数を使って出力したメッセージを表示させることも出来ます。Forge Viewer バージョン指定のもう1つの方法 でご紹介した Forge Viewer のバージョンについては、バージョン番号が格納されているグローバル変数 LMV_VIEWER_VERSION をこの方法で表示させれば確認することが出来ます。
Web ページ リソースやネットワーク情報の表示
Web ページのロード時に参照、使用している画像やフォント、JavaScript ライブラリ（CDN）、CSS などのリソースのツリー構造やロード速度や、HTTP プロトコルで送受信された RESTful API の内容など、ネットワークの使用状況を表示します。
HTML、JapaScript ビューアとデバッグ
表示中の Web ページについて、HTML コードと DOM 情報、付随する JavaScript コードを表示することが出来ます、JavaScript では、ブレークポイントを置いてステップ実行したり、変数の内容を参照するシンボリック デバッグ機能を利用することも可能です。PC やスマートフォンなどのデバイスに表示を切り替えることも可能です。
セキュリティのチェック
Web サイトにアクセスした際の接続がセキュアかを評価します。TLS 1.0/1.1 の Forge サポート中止の延期処置について でご案内した TLS バージョンなども表示されます。
Forge Viewer を使った HTML ページが正しく表示されない場合など、このツールを利用することで、どこで処理が止まってしまうのか、どのようなエラーが発生しているのか、などを把握するのに役立つはずです。
Web ブラウザによって少しづつ異なるデベロッパーツール/開発者ツールですが、詳細は各ブラウザ毎にオンラインヘルプやブログ記事で数多く紹介されていますので、お使いのブラウザに合わせて内容を確認してみてください。
Google Chrome
Mozilla Firefox
https://developer.mozilla.org/ja/docs/Tools/Web_Console
Microsoft Internet Explorer
https://html5experts.jp/osamum_ms/1928/
Microsoft Edge
https://docs.microsoft.com/ja-jp/microsoft-edge/devtools-guide?source=f12help
Apple Safari
https://support.apple.com/ja-jp/guide/safari/sfri20948/mac
さまざまな Web ブラウザですが、視点を変えて HTML レンダリングエンジンと見ることが出来ます。デベロッパーツール/開発者ツールは実装もまちまちですが、HTML レンダリングエンジンの由来からか、Web 開発で必要とされる機能が集約した結果からか、どれも似たような機能や操作感になっているようです。
以前、AutoCAD 内で Web ページを表示 でも触れましたが、AutoCAD には Webkit が組み込まれているので、ここでご紹介した内容でデバッグすることも可能です。
もし、Forge を使った開発で問題があった場合など、デベロッパーツール/開発者ツールでの検証、デバッグをお勧めします。
By Toshiaki Isezaki
Subscribe
コメント