質問は基本的に1スレッドにつき1つの内容でお願いします。

お問い合わせの際は下記の情報を明記をお願いいたします。

▼ソフトウェアに関するご質問の場合

・【問題が発生したソフトウェア名とバージョン】(例:Cubism Editor 3.1.02、Euclid Editor 1.2.0 など)
・【ご利用のPC環境】例:Windows10、macOS HighSierra など
・【グラフィックボード】例:GeForce GTX 950M など
・【メモリ】例:8GB
・【原画(イラスト)を制作したソフトウェア】例:Photoshop , CLIP STUDIO , SAI など
・【問い合わせ内容がわかるスクリーンショットまたは動画】

---------------------------

▼SDKに関するご質問の場合

・現象の再現を行い検証させていただきますので、再現する最小のプロジェクトのご提供か、再現するまでの手順
・使用したSDKのバージョン

【Javascript】chrome環境でサンプルファイル実行時、エラーが表示され実行できない

VisualStudioCodeを用いてゲームを作成しています。
VisualStudioCodeにて、cubism 3.0 sdkのサンプルファイルをchrome環境で実行したのですが、
表記のエラーが表示され実行できませんでした。
※Firefoxでは実行できました。

調査中ですが、何かご助言等頂けましたら幸いです。
よろしくお願いします。

[参考]
・VisualStudioCodeでのlaunch.json

{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
"runtimeArgs": [
"--allow-file-access-from-files",
"--remote-debugging-port=9222",
"--user-data-dir=/tmp"
]
}
]
}

・デバッグコンソールの出力
TypeError: Cannot read property '_ptr' of null
live2dcubismcore.min.js:1
at new Model (https://s3-ap-northeast-1.amazonaws.com/cubism3.live2d.com/sdk/js_eap/live2dcubismcore.min.js:1:153296)
at Function.Model.fromMoc (https://s3-ap-northeast-1.amazonaws.com/cubism3.live2d.com/sdk/js_eap/live2dcubismcore.min.js:1:153518)
at ModelBuilder.build (file:///G:/Game_illust/01_Live2d/Cubism3.0/CubismJsComponents-master/example/wwwroot/js/live2dcubismpixi.js:367:52)
at file:///G:/Game_illust/01_Live2d/Cubism3.0/CubismJsComponents-master/example/wwwroot/js/pixiKoharu.js:16:14
at t.value (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:8:29897)
at e.t._onComplete (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:12816)
at https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:13309
at s (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:24311)
at e. (https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:19:23843)
at https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js:9:13007

コメント

  • @slip
    お世話になっております。Live2Dスタッフです。
    ご報告いただいた件につきまして、当方でも同様の事象が発生することを確認しました。

    ■環境
    OS: Windows10 64bit
    Chrome v64.0
    Visual Studio Code: v1.19.3
     アドオン:
     ・Debugger for Chrome v4.1.0 (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
     ・Debugger for Firefox v1.1.0 (https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)

    ■確認した事象
     ・Debugger for Chromeでサンプルを実行 ⇒ 同様のエラーログを出力
     ・Debugger for Firefoxでサンプルを実行 ⇒ 正常に実行(Webサーバ経由の読み込みと同様の挙動)

    ※Launch.jsonにChrome起動時に以下の引数を渡してテスト
    "runtimeArgs": [
    "--allow-file-access-from-files",
    "--remote-debugging-port=9222",
    "--user-data-dir=/tmp"
    ]

    当方の環境でも、@slip 様と同様の事象が発生すること、またFirefoxでは正常に実行できるのに対してChromeでは正常に実行できていないことから、Chrome側の挙動に原因があることが想定されます。ですので、現状以上の解析となりますと、Chrome自体の実装がどのようになっているかを調査・解析する必要があるかと思われます。

    ■暫定の対処方法
    さて、上記事情を踏まえまして、Visual Studio CodeとLive Serverアドオンを利用したデバッグ実行の方法を提案させて頂きます。
    @slip 様がお試しになられた方法を完全に置き換えできるほどのものではないかもしれませんが、ご参考いただければと思います。
    ・Live Server (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

    ▼Live Server を利用したデバッグ実行の手順
    1. Live Serverアドオンをインストール


    2. wwwroot/index.html をLive Serverアドオンで開く


    3. Launch.jsonに以下を記述(ご参考)
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch Live Server website",
    "type": "chrome",
    "request": "launch",
    "url": "http://127.0.0.1:5500/(index.htmlまでのディレクトリ)/index.html",
    "webRoot": "${workspaceRoot}/",
    "sourceMaps": false
    }
    ]
    }

    4. Visual Studio Codeのデバッガで上記"Launch Live Server website"を実行


    5. Chromeが起動する
    JavaScriptのコードに貼ったブレークポイントで止まることも確認しております。


    [参考情報] Visual Studio Codeを使いこなせ! Chromeと接続してJSをデバッグする方法 (https://ics.media/entry/11356)
  • shio_tatsu (Staff) さん
    回答ありがとうございます!
    試してみたのですが、”Cannot GET /G:/wwwroot/index.html”と表示され、デバッグできませんでした。

    Launch.jsonは以下になります。
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch Live Server website",
    "type": "chrome",
    "request": "launch",
    "url": "http://127.0.0.1:5500/G:/wwwroot/index.html",
    "webRoot": "${workspaceRoot}/",
    "sourceMaps": false
    }
    ]
    }
  • edited 02/06
    @slip
    お試しいただきありがとうございます。
    一部説明不足のところがあり、申し訳ございませんでした。
    Launch.json の "url" の値ですが、こちらは、【ローカルホストのURL】+【Visual Studio Codeで開いているフォルダを基準とするindex.htmlまでのパス】を与えてください。その値を確認する方法として、以下に幾つかのケースでの具体的な例を示します。

    -----------------------------------------------------------------------------------------------------------------

    ■ケース1: Visual Studio Codeで【wwwroot】フォルダを開いている場合

    1. index.html を右クリック → [Open with Live Server]をクリック


    2. ブラウザが起動する


    3. ブラウザのURLを確認する



    4. この時のブラウザのURLを Launch.json の "url" の値に入力する
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch Live Server website",
    "type": "chrome",
    "request": "launch",
    "url": "http://127.0.0.1:5500/index.html",
    "webRoot": "${workspaceRoot}/",
    "sourceMaps": false
    }
    ]
    }

    -----------------------------------------------------------------------------------------------------------------

    ■ケース2:Visual Studio Codeで【CubismJsComponents-master】フォルダを開いている場合

    1. example/wwwroot/index.html を右クリック → [Open with Live Server]をクリック


    2. ブラウザが起動する


    3. ブラウザのURLを確認する



    4. この時のブラウザのURLを Launch.json の "url" の値に入力する
    {
    "version": "0.2.0",
    "configurations": [
    {
    "name": "Launch Live Server website",
    "type": "chrome",
    "request": "launch",
    "url": "http://127.0.0.1:5500/example/wwwroot/index.html",
    "webRoot": "${workspaceRoot}/",
    "sourceMaps": false
    }
    ]
    }

    -----------------------------------------------------------------------------------------------------------------
    以上、具体例を示しておりますが、"url"の値につきましてはVisual Studio Codeでどこのフォルダを開いているかによって異なりますので、@slip 様のご環境と、Live Serverの挙動をご確認いただきながらお試しいただければと思います。
  • shio_tatsu (Staff) さん
    urlを修正したところ、chrome環境で起動できました!
    詳細な説明と回答の対応ありがとうございます。
Sign In or Register to comment.