新しいLive2D公式コミュニティ(日本向け)が公開されました!
ぜひご利用ください!
Live2D公式コミュニティ

■このコミュニティの今後について
このコミュニティ(forum.live2d.com)につきましては、しばらくの間新コミュニティと並行して運営しますが、2022年内を目処に閉鎖する予定です。
閉鎖時期や内容については決定次第お知らせいたします。
海外向けコミュニティについては変更ございません。
Live2Dに関するユーザーのみなさま同士の交流・ご質問・不具合の報告・提案・要望などについて是非お寄せください。
※Live2D公式スタッフからの発言や回答については確約できないことを予めご了承ください。

Live2D ヘルプ

Cubism Editorダウンロード / 動作環境
Cubism SDKダウンロード / 対応表
Cubism 製品利用ライセンス(SDK含)

Cubism 製品のライセンスについてのお問い合わせはこちら
nizima 及び nizima 製品についてのお問い合わせはこちら
【各最新OSの対応状況について】
Cubism Editorは 4.1.02 正式版以降でWindows 11 及び macOS Monterey に対応しております。ぜひ最新版をご利用ください。
※macOSをお使いの方でOSアップデートする際は必ずCubism Editorのライセンスを解除してください。
Cubism EditorをインストールしているmacOSをアップグレードしたい
Cubism SDKについては各SDKのREADMEまたはNOTICEをご確認ください。

【Mac各機種への対応状況について】
現在、Cubism EditorはApple M1チップ搭載機種には対応しておりません。
詳細は 動作環境 をご参照ください。
関連するお問い合わせへの対応はこの文章をもって代えさせていただきます。
Cubism 製品のマニュアル・チュートリアルはこちら
 
Cubism Editorマニュアル    Cubism Editorチュートリアル    Cubism SDKマニュアル    Cubism 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
    }
    ]
    }
  • @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環境で起動できました!
    詳細な説明と回答の対応ありがとうございます。
コメントするにはサインインまたは登録して下さい。