★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

【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
    }
    ]
    }
  • @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環境で起動できました!
    詳細な説明と回答の対応ありがとうございます。
コメントするにはサインインまたは登録して下さい。