”終了していない文字列型の定数です”、３D年賀状がうまく機能しないです。[JavaScript]

前提・実現したいこと

javascriptの超初心者です。
”テキストを読んでばかりではだめだ、手を動かしてみよう”と考え、３D年賀状を作ってみたいなと思い以下のサイトのコードをひとまずコピペして動かしてみようかと思ったところ、以下のようなエラーが出てきてしまいました。

発生している問題・エラーメッセージ

終了していない文字列型の定数です

該当のソースコード

javascript
1// forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト（サンタバージョン）" http://jsdo.it/cx20/5gmA
2// forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト" http://jsdo.it/cx20/8ReN
3// forked from cx20's "Three.js + Oimo.js でドット絵を落下させるテスト" http://jsdo.it/cx20/voHQ
4// forked from Lo-Th's "oimo basic" http://jsdo.it/Lo-Th/frXo
5
6var DOT_SIZE = 16;
7
8// □□□■□□□□□□□□□□□□
9// □■■■■■■□□■□□□■□□
10// □□□■□□□□□■□■■■■■
11// □□□■□□□□□■□□□■□□
12// □□■■■■■□□■□□□■□□
13// □■□■□■□■□■□□□■□□
14// □■□□■□□■□■□□□■□□
15// □□■■□□■□□■□□■□□□
16// □□□□□□□□□□□□□□□□
17// □□□■□□■□□□□□□□□□
18// □■■■■■□■□□■□□■□□
19// □□□■□□□□□□■■■■■□
20// □■■■■■■□□■□■□■□■
21// ■□□■□□□■□■□■□■□■
22// ■□□■□□□■□■□□■□□■
23// □■■□□□■□□□■■□□■□
24var dataSet = [
25    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
26    "赤","白","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
27    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","白","白","白","白","白",
28    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","赤","赤","白","赤","赤",
29    "赤","赤","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
30    "赤","白","赤","白","赤","白","赤","白","赤","白","赤","赤","赤","白","赤","赤",
31    "赤","白","赤","赤","白","赤","赤","白","赤","白","赤","赤","赤","白","赤","赤",
32    "赤","赤","白","白","赤","赤","白","赤","赤","白","赤","赤","白","赤","赤","赤",
33    "赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
34    "赤","赤","赤","白","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤",
35    "赤","白","白","白","白","白","赤","白","赤","赤","白","赤","赤","白","赤","赤",
36    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","白","白","白","白","白","赤",
37    "赤","白","白","白","白","白","白","赤","赤","白","赤","白","赤","白","赤","白",
38    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","白","赤","白","赤","白",
39    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","赤","白","赤","赤","白",
40    "赤","白","白","赤","赤","赤","白","赤","赤","赤","白","白","赤","赤","白","赤"
41];
42
43function getRgbColor( c )
44{
45    var colorHash = {
46        "黒":0x000000,
47        "白":0xffffff,
48        "肌":0xffcccc,
49        "茶":0x800000,
50        "赤":0xff0000,
51        "黄":0xffff00,
52        "緑":0x00ff00,
53        "水":0x00ffff,
54        "青":0x0000ff,
55        "紫":0x800080
56    };
57    return colorHash[ c ];
58}
59
60// Three.js 用変数
61var camera, scene, light, renderer, container, center;
62var meshs = [];
63var geoBox;
64
65// Oimo.js 用変数
66var world;
67var bodys = [];
68
69init();
70animate();
71
72function init() {
73    // カメラを作成する
74    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
75    camera.position.set(0, 150, 300);
76    center = new THREE.Vector3();
77    camera.lookAt(center);
78
79    // シーンを作成する
80    scene = new THREE.Scene();
81
82    // 物理演算の準備
83    world = new OIMO.World();
84
85    // 床を作成する
86    createGround();
87    
88    // ドミノを作成する
89    createDomino();
90    
91    // ドミノ碑を倒す為の立方体を配置する
92    createCube();
93
94    // ライトを作成する
95    light = new THREE.DirectionalLight(0xffffff, 1.3);
96    light.position.set(0.3, 1, 0.5);
97    scene.add(light);
98
99    // レンダラーを作成する
100    renderer = new THREE.WebGLRenderer();
101    renderer.setClearColor(0x0000000);
102    renderer.setSize(window.innerWidth, window.innerHeight);
103
104    // レンダラーのサイズを指定する
105    renderer.setSize(window.innerWidth, window.innerHeight);
106
107    // HTML との紐づけを行う
108    container = document.getElementById("container");
109    container.appendChild(renderer.domElement);
110}
111
112function createGround() {
113    // 床の物理演算の設定
114    var ground = new OIMO.Body({
115        size: [400, 40, 400],
116        pos: [0, -50, 0],
117        world: world
118    });
119    
120    // 床表示用の設定
121    var material = new THREE.MeshLambertMaterial({
122        color: 0x202020
123    });
124    var geometry = new THREE.BoxGeometry(400, 40, 400);
125    var mesh = new THREE.Mesh(geometry, material);
126    mesh.position.y = -50;
127    scene.add(mesh);
128}
129
130function createDomino() {
131    // ドミノ碑のサイズ
132    var w = DOT_SIZE * 0.2;
133    var h = DOT_SIZE * 1.5;
134    var d = DOT_SIZE;
135
136    // ドミノ碑のベースとなる箱を作成する
137    geoBox = new THREE.BoxGeometry(1, 1, 1);
138
139    var color;
140    var i;
141    // ドミノ碑を16x16個、整列させる
142    for (var x = 0; x < 16; x++) {
143        for (var z = 0; z < 16; z++) {
144            i = x + (z) * 16;
145            y = 0;
146            // 物理演算用のオブジェクトを設定
147            bodys[i] = new OIMO.Body({
148                type: 'box',
149                size: [w, h, d],
150                pos: [-120 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
151                move: true,
152                world: world
153            });
154            // ドミノ碑の色を設定（ドット絵になるよう色を変更）
155            color = getRgbColor(dataSet[i]);
156            var material = new THREE.MeshLambertMaterial({
157                color: color
158            });
159            // 表示用のオブジェクトを設定
160            meshs[i] = new THREE.Mesh(geoBox, material);
161            meshs[i].scale.set(w, h, d);
162            scene.add(meshs[i]);
163        }
164    }
165}
166
167function createCube() {
168    // 立方体のサイズ
169    var w = DOT_SIZE;
170    var h = DOT_SIZE;
171    var d = DOT_SIZE;
172    // ドミノ碑を倒す為に、赤色の立方体×16個、配置する。
173    var size = bodys.length;
174    for (var i = 0; i < 16; i++) {
175        var x = 0;
176        var y = 2;
177        var z = i;
178        // 物理演算用のオブジェクトを設定
179        bodys[size + i] = new OIMO.Body({
180            type: 'box',
181            size: [w, h, d],
182            pos: [-125 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
183            move: true,
184            world: world
185        });
186        // 立方体の色を設定（赤色）
187        var material = new THREE.MeshLambertMaterial({
188            color: "#f00"
189        });
190        // 表示用のオブジェクトを設定
191        meshs[size + i] = new THREE.Mesh(geoBox, material);
192        meshs[size + i].scale.set(w, h, d);
193        scene.add(meshs[size + i]);
194    }
195}
196
197function animate() {
198    requestAnimationFrame(animate);
199    render();
200}
201
202function render() {
203    // 物理演算の世界の時間を進める
204    world.step();
205
206    var p, r, m, x, y, z;
207    var mtx = new THREE.Matrix4();
208    var i = bodys.length;
209    var mesh;
210
211    // ドミノ碑の物理演算を行い位置の算出を行う
212    while (i--) {
213        var body = bodys[i].body;
214        mesh = meshs[i];
215        m = body.getMatrix();
216        mtx.fromArray(m);
217        mesh.position.setFromMatrixPosition(mtx);
218        mesh.rotation.setFromRotationMatrix(mtx);
219    }
220
221    // 表示を更新する
222    renderer.render(scene, camera);
223}
224

試したこと

エラー１のように表示されていたので該当箇所の黒色の部分、0xFF000000の前後に引用符””(https://gyazo.com/26d4bd50653633099303004e9a1aeaf6)を付けてみたら[エラー２](https://gyazo.com/26d4bd50653633099303004e9a1aeaf6)のようになりました。

いや、、、コロンはあるよなあ、、、と思いこれ以降は何をしたらいいのかわからず
手詰まりです。

補足情報（FW/ツールのバージョンなど）

・このコードをコピペしました
３D年賀状コード

・このサイトから引っ張ってきました。
引用サイト

今日中にいろいろと試してみたいのにここで手詰まりでとても困っています。よろしくお願いします。

m.ts10806

2018/12/28 07:31

「初心者アイコン」を利用してください。

m.ts10806

2018/12/28 07:31

また、画像は外部サービスではなくteratail内の画像添付機能を利用してください。

m.ts10806

2018/12/28 07:33

コードはこのコードだけでは再現できません。他人が再現確認できるようになるべく全体的にコードを提示してください。

dice142

2018/12/28 07:33

コードはコピペしただけですか？コピペした後にどこか変更したとかはありませんか？

yoorwm

2018/12/28 07:36

アルファチャンネルが入っているのかと思ったけど、桁数が違うのでは？

risushi

2018/12/28 07:37

全体のコードを載せました。ほんとにコピペしただけなのでどこもいじっていません。

risushi

2018/12/28 07:39

桁数というのはどこの部分でしょうか、、、？

m.ts10806

2018/12/28 07:40

これHTMLも必要ですね。このコードだけだとthree.js読み込むように怒られるだけ。

m.ts10806

2018/12/28 07:43

htmlから所定の手続きを経て呼び出せばきちんと実行されますね。既についた回答にある通りです

risushi

2018/12/28 07:45

mts10806さんそういう怒られ方だったんですね。教えてくれてありがとうございました。とても助かります。

m.ts10806

2018/12/28 07:47

実行の仕方もふくめて書かれないと正しく再現確認できませんので。特に初心者の方ですとこちらが当然と思っているのとはあらぬやり方を平気でします。 (初心者でなくても質問するときには情報は多ければ多いほどいいですね)

risushi

2018/12/28 07:49

なるほど、、、どの情報が必要なのかの基準がよくわからないのでとにかく情報はたくさん載せておいたほうがいいのですね。勉強になります。

m.ts10806

2018/12/28 07:53

そうですね。ありすぎて困ることはないですし、回答者は回答に必要な情報のみ取捨選択するので。 (質問テンプレート文言が残ってたり要件と無関係な個人の主張があればそれは「不要」ですが)

risushi

2018/12/28 08:24

わかりました！ありがとうございます！！

行動規範の内容に同意します

回答1件

ベストアンサー

jsファイル直接実行したらそういうエラー出ました・・・のでhtmlファイルを開くべきですね

html
1<!doctype html>
2<html lang="ja">
3<head>
4<!-- three.min.js -->
5<script src="http://lo-th.github.io/root/build/three.min.js"></script>
6<script src="http://lo-th.github.io/root/build/oimo.min.js"></script>
7</head>
8<body>
9<div id='container'></div>
10</body>
11<script>
12// forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト（サンタバージョン）" http://jsdo.it/cx20/5gmA
13// forked from cx20's "Three.js + Oimo.js でドミノっぽくドット絵を作るテスト" http://jsdo.it/cx20/8ReN
14// forked from cx20's "Three.js + Oimo.js でドット絵を落下させるテスト" http://jsdo.it/cx20/voHQ
15// forked from Lo-Th's "oimo basic" http://jsdo.it/Lo-Th/frXo
16
17var DOT_SIZE = 16;
18
19// □□□■□□□□□□□□□□□□
20// □■■■■■■□□■□□□■□□
21// □□□■□□□□□■□■■■■■
22// □□□■□□□□□■□□□■□□
23// □□■■■■■□□■□□□■□□
24// □■□■□■□■□■□□□■□□
25// □■□□■□□■□■□□□■□□
26// □□■■□□■□□■□□■□□□
27// □□□□□□□□□□□□□□□□
28// □□□■□□■□□□□□□□□□
29// □■■■■■□■□□■□□■□□
30// □□□■□□□□□□■■■■■□
31// □■■■■■■□□■□■□■□■
32// ■□□■□□□■□■□■□■□■
33// ■□□■□□□■□■□□■□□■
34// □■■□□□■□□□■■□□■□
35var dataSet = [
36    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
37    "赤","白","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
38    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","白","白","白","白","白",
39    "赤","赤","赤","白","赤","赤","赤","赤","赤","白","赤","赤","赤","白","赤","赤",
40    "赤","赤","白","白","白","白","白","赤","赤","白","赤","赤","赤","白","赤","赤",
41    "赤","白","赤","白","赤","白","赤","白","赤","白","赤","赤","赤","白","赤","赤",
42    "赤","白","赤","赤","白","赤","赤","白","赤","白","赤","赤","赤","白","赤","赤",
43    "赤","赤","白","白","赤","赤","白","赤","赤","白","赤","赤","白","赤","赤","赤",
44    "赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤","赤",
45    "赤","赤","赤","白","赤","赤","白","赤","赤","赤","赤","赤","赤","赤","赤","赤",
46    "赤","白","白","白","白","白","赤","白","赤","赤","白","赤","赤","白","赤","赤",
47    "赤","赤","赤","白","赤","赤","赤","赤","赤","赤","白","白","白","白","白","赤",
48    "赤","白","白","白","白","白","白","赤","赤","白","赤","白","赤","白","赤","白",
49    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","白","赤","白","赤","白",
50    "白","赤","赤","白","赤","赤","赤","白","赤","白","赤","赤","白","赤","赤","白",
51    "赤","白","白","赤","赤","赤","白","赤","赤","赤","白","白","赤","赤","白","赤"
52];
53
54function getRgbColor( c )
55{
56    var colorHash = {
57        "黒":0xFF000000,
58        "白":0xffffff,
59        "肌":0xffcccc,
60        "茶":0x800000,
61        "赤":0xff0000,
62        "黄":0xffff00,
63        "緑":0x00ff00,
64        "水":0x00ffff,
65        "青":0x0000ff,
66        "紫":0x800080
67    };
68    return colorHash[ c ];
69}
70
71// Three.js 用変数
72var camera, scene, light, renderer, container, center;
73var meshs = [];
74var geoBox;
75
76// Oimo.js 用変数
77var world;
78var bodys = [];
79
80init();
81animate();
82
83function init() {
84    // カメラを作成する
85    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
86    camera.position.set(0, 150, 300);
87    center = new THREE.Vector3();
88    camera.lookAt(center);
89
90    // シーンを作成する
91    scene = new THREE.Scene();
92
93    // 物理演算の準備
94    world = new OIMO.World();
95
96    // 床を作成する
97    createGround();
98    
99    // ドミノを作成する
100    createDomino();
101    
102    // ドミノ碑を倒す為の立方体を配置する
103    createCube();
104
105    // ライトを作成する
106    light = new THREE.DirectionalLight(0xffffff, 1.3);
107    light.position.set(0.3, 1, 0.5);
108    scene.add(light);
109
110    // レンダラーを作成する
111    renderer = new THREE.WebGLRenderer();
112    renderer.setClearColor(0x0000000);
113    renderer.setSize(window.innerWidth, window.innerHeight);
114
115    // レンダラーのサイズを指定する
116    renderer.setSize(window.innerWidth, window.innerHeight);
117
118    // HTML との紐づけを行う
119    container = document.getElementById("container");
120    container.appendChild(renderer.domElement);
121}
122
123function createGround() {
124    // 床の物理演算の設定
125    var ground = new OIMO.Body({
126        size: [400, 40, 400],
127        pos: [0, -50, 0],
128        world: world
129    });
130    
131    // 床表示用の設定
132    var material = new THREE.MeshLambertMaterial({
133        color: 0x202020
134    });
135    var geometry = new THREE.BoxGeometry(400, 40, 400);
136    var mesh = new THREE.Mesh(geometry, material);
137    mesh.position.y = -50;
138    scene.add(mesh);
139}
140
141function createDomino() {
142    // ドミノ碑のサイズ
143    var w = DOT_SIZE * 0.2;
144    var h = DOT_SIZE * 1.5;
145    var d = DOT_SIZE;
146
147    // ドミノ碑のベースとなる箱を作成する
148    geoBox = new THREE.BoxGeometry(1, 1, 1);
149
150    var color;
151    var i;
152    // ドミノ碑を16x16個、整列させる
153    for (var x = 0; x < 16; x++) {
154        for (var z = 0; z < 16; z++) {
155            i = x + (z) * 16;
156            y = 0;
157            // 物理演算用のオブジェクトを設定
158            bodys[i] = new OIMO.Body({
159                type: 'box',
160                size: [w, h, d],
161                pos: [-120 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
162                move: true,
163                world: world
164            });
165            // ドミノ碑の色を設定（ドット絵になるよう色を変更）
166            color = getRgbColor(dataSet[i]);
167            var material = new THREE.MeshLambertMaterial({
168                color: color
169            });
170            // 表示用のオブジェクトを設定
171            meshs[i] = new THREE.Mesh(geoBox, material);
172            meshs[i].scale.set(w, h, d);
173            scene.add(meshs[i]);
174        }
175    }
176}
177
178function createCube() {
179    // 立方体のサイズ
180    var w = DOT_SIZE;
181    var h = DOT_SIZE;
182    var d = DOT_SIZE;
183    // ドミノ碑を倒す為に、赤色の立方体×16個、配置する。
184    var size = bodys.length;
185    for (var i = 0; i < 16; i++) {
186        var x = 0;
187        var y = 2;
188        var z = i;
189        // 物理演算用のオブジェクトを設定
190        bodys[size + i] = new OIMO.Body({
191            type: 'box',
192            size: [w, h, d],
193            pos: [-125 + x * DOT_SIZE, y * DOT_SIZE, -120 + z * DOT_SIZE * 1.2],
194            move: true,
195            world: world
196        });
197        // 立方体の色を設定（赤色）
198        var material = new THREE.MeshLambertMaterial({
199            color: "#f00"
200        });
201        // 表示用のオブジェクトを設定
202        meshs[size + i] = new THREE.Mesh(geoBox, material);
203        meshs[size + i].scale.set(w, h, d);
204        scene.add(meshs[size + i]);
205    }
206}
207
208function animate() {
209    requestAnimationFrame(animate);
210    render();
211}
212
213function render() {
214    // 物理演算の世界の時間を進める
215    world.step();
216
217    var p, r, m, x, y, z;
218    var mtx = new THREE.Matrix4();
219    var i = bodys.length;
220    var mesh;
221
222    // ドミノ碑の物理演算を行い位置の算出を行う
223    while (i--) {
224        var body = bodys[i].body;
225        mesh = meshs[i];
226        m = body.getMatrix();
227        mtx.fromArray(m);
228        mesh.position.setFromMatrixPosition(mtx);
229        mesh.rotation.setFromRotationMatrix(mtx);
230    }
231
232    // 表示を更新する
233    renderer.render(scene, camera);
234}
235</script>
236</html>

これでとりあえず動くはずなので試してみればいかがでしょう(ファイルは拡張子htmlのUTF-8で保存して、ブラウザで開く)

投稿2018/12/28 07:40

rururu3

総合スコア5545

risushi

2018/12/28 07:48

rururu3さんありがとうございます！動きました！ htmlの中に書かなければいけなかったのですね。

rururu3

2018/12/28 07:50 編集

いや、外部に書いていいですが、JSファイルをダブルクリックで実行してはいけない・・・・っていうのが正確ですね(なのでhtmlでscript srcでjsファイル指定してhtmlをブラウザで開くのはOKです)

risushi

2018/12/28 08:00

index.htmlにこんな感じで書いて保存して開いてみたのですが真っ白です。書く場所が間違っているのでしょうか？ <!DOCTYPE html> <meta charset="utf-8"> <title>Happy New Year 2015</title> <script src="index.js"></script>  <script src="http://lo-th.github.io/root/build/three.min.js"></script>  <script src="http://lo-th.github.io/root/build/oimo.min.js"></script> <div id='container'></div>

rururu3

2018/12/28 08:06 編集

risushi

2018/12/28 08:24

なるほど。<div id='container'></div>以降に書いたら確かに動きました。（読み込み順を一切気にせずテキトーに貼ってしまっていました、、、。）ひとまず悩みはすべて解決されました！ありがとうございました！！

rururu3

2018/12/28 08:30

一応、今後触っていく上でアドバイスをロード後にjsファイルの処理実行する方法もあるんですが、それはおいおい勉強していってください！(ヒントとしては、onload) あと、今後いじっていって動かないときはF12でコンソールを見るようにしましょう。 (Chromeでいうhromeデベロッパー・ツール、IEでいうF12開発者ツール・・っていうらしい)

risushi

2018/12/28 13:58

(返信遅くなってすみません) デベロッパーツールですか！確認してみます！本当にいろいろとありがとうございます！！！

行動規範の内容に同意します