常連

## まずは
Create-react-appを用いてlocalでWebページを製作しています。
React-router-domを用いてルーティング設定をしましたが、画面が真っ白になって作ったページが表示されません。

このコマンドを打ってreact-router-domのv6をインストールしました。
```Bash
$ npm install react-router-dom@6
```
## ルーティング設定したApp.jsとindex.js
```javaScript:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);
```
```javaScript:App.js
import React from 'react';
import Top from './Top';
import Work from './Work';
import NotFound from './NotFound';
import './App.css';
import {Route, Routes } from 'react-router-dom';

class App extends React.Component {
  render(){
    return (
      <Routes>
        <Route path="/" element={<Top />}/>
        <Route path="/Work" element={<Work/>}/>
        <Route path="*" element={<NotFound />}/>
      </Routes>
    );
  }
}

export default App;
```
試しに最初に表示されるページ（"/"で<Top/>が表示される）所を新たにAbout.jsに設定しました。するとAbout.jsによって"About"がブラウザに表示されました。
<参考にしたサイト>
https://reffect.co.jp/react/react-router-6#i-4
```javaScript:App.js
<Route path="/" element={<Top />}/>
　　　　　　　　　↓
<Route path="/" element={<About />}/>
```


```javaScript:Top.js
import React from 'react';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';


class Top extends React.Component{
    render(){
        return(
            <div className="Top">
                <Header/>
                <Main/>
                <Footer/>
            </div>
        );
    }
}
export default Top;
```
```javaScript:About.js
function About(){
    return <h2>About</h2>
}
export default About;
```
About.jsは表示されますが、Top.jsは表示されません。なぜなのか調べてもわからず質問させていただきました。よろしくお願いします。

Reactのルーティング設定で真っ白な画面しか表示されない原因

### ejsでindex.ejsだけでなく、ディレクトリ内のabc.ejsなどもコンパイルしたい

gulp watch と ブラウザシンクで、
簡易的なsass と　ejsの機能を作りました。
index.ejs は ちゃんと コンパイルされるのですが、
同じ階層に作ったディレクトリ内のejsは変換されず困っています。
```
index.ejs
   -  test（ディレクトリ）
       -  test.ejs ← これをコンパイルしたい
```

# 実際のソース
```
  "scripts": {
    "compile:sass": "node-sass sass/main.scss dest/assets/css/style.css -w",
    "ejs": "ejs-cli --base-dir ejs/ '*.ejs' --out dest/",
    "watch": "chokidar \"ejs/\" -c \"npm run ejs\" --initial",
    "browser-sync": "browser-sync start --server --files * "
  },

// 監視ファイル
const watchFiles = (done) => {
    // gulp.watch(["./src/*.ejs", "!./src/_*.ejs"], EJScompile);
    // gulp.watch("./src/*.scss", SassCompile);
    gulp.watch("./dest/*.html", reloadBrowser);
    gulp.watch("./dest/assets/css/*.css", reloadBrowser);

    done();
};

```



ejsでディレクトリ内のejsが変換されない

###前提・実現したいこと
JavaScriptで、
(1) サーバ上の画像ファイルを読み込み、
(2) DataURLに変換して、
(3) createjs.Bitmapクラスとして操作したい。

###発生している問題・エラーメッセージ
Bitmapオブジェクトに画像の幅と高さが入っている時と入っていない時がある。

###該当のソースコード
```JavaScript
function () {

	var file = "sample.png"
	var image = new Image();

	image.onload = function() {
		// (2) canvas の toDataURL メソッドを使って画像ファイルを DataURL に変換
		var canvas      = document.createElement("canvas");
		canvas.width    = this.naturalWidth;
		canvas.height   = this.naturalHeight;
		canvas.getContext('2d').drawImage(this, 0, 0);

		var bitmap      = new createjs.Bitmap(canvas.toDataURL('image/png'));

		var w   = bitmap.image.naturalWidth;		// 値が入っていない事がある
		var h   = bitmap.image.naturalHeight;		// 値が入っていない事がある
		var w2  = bitmap.image.width;				// 値が入っていない事がある
		var h2  = bitmap.image.height;				// 値が入っていない事がある
	};

	// (1) Image クラスでサーバ上のファイルを読み込む
	image.src   = file;
}
```

###試したこと
ネットで類似ケースを検索したところ、preloadjsを使って
事前にファイルをロードしておいた方がいいという意見があったので、
preloadjsのLoadQueueでファイルを読み込むパターンも
試したのですが、やはり時々値が入っていない時があります。

###補足情報(言語/FW/ツール等のバージョンなど)
サーバはFreeBSD 8.4、クライアントはWindows 7 64bit を使っています。
ブラウザはIE 11やChrome 51では起きず、Firefox 47のみで現象を
確認しております。

CreateJSのBitmapオブジェクトに、画像の幅や高さが入っていない時がある

### 前提・実現したいこと

AnimateCCで作成したcanvasアニメーションを1枚のHTMLに複数配置しています。
これを対象のcanvasが画面内に入ったタイミングでそれぞれスタートさせたいです。
配置されるcanvasの数や位置はページによって異なりますが、
できれば配置されるcanvas数に関係なく一括でコントロールできるようにしたいです。

### 発生している問題・エラーメッセージ

1枚のHTMLに複数のcanvasを配置することはできたのですが、
全てロードのタイミングで同時にスタートしてしまいます。

### 該当のソースコード

```HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>sample</title>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="assetsratio_pc.js"></script>
<script src="assetsratio_sp.js"></script>
<script src="measuresratio.js"></script>
<script src="top.js"></script>
<script src="common.js"></script>

</head>
<body>

		<div id="animation_container0">
			<canvas id="canvas0" width="260" height="260"></canvas>
			<div id="dom_overlay_container0"></div>
		</div>
		
		
		<div style="height: 1000px">他のコンテンツ</div>
		
		<div id="animation_container1">
			<canvas id="canvas1" width="844" height="460"></canvas>
			<div id="dom_overlay_container1"></div>
		</div>
		
		<div style="height: 1000px">他のコンテンツ</div>
		
		<div id="animation_container2">
			<canvas id="canvas2" width="345" height="397"></canvas>
			<div id="dom_overlay_container2"></div>
		</div>
	
</body>
</html>
```
▼top.js
```JavaScript
    
var stage;
var canvas0, stage0, exportRoot0, anim_container0, dom_overlay_container0, fnStartAnimation0;
var canvas1, stage1, exportRoot1, anim_container1, dom_overlay_container1, fnStartAnimation1;
var canvas2, stage2, exportRoot2, anim_container2, dom_overlay_container2, fnStartAnimation2;
 
function init0() {
	canvas0 = document.getElementById("canvas0");
	anim_container0 = document.getElementById("animation_container0");
	dom_overlay_container0 = document.getElementById("dom_overlay_container0");
	var comp=AdobeAn.getComposition("F0BA06869C574E0F86857DBBA02CE764");
	var lib0=comp.getLibrary();
	handleComplete0({},comp);
}

function init1() {
	canvas1 = document.getElementById("canvas1");
	anim_container1 = document.getElementById("animation_container1");
	dom_overlay_container1 = document.getElementById("dom_overlay_container1");
	var comp1=AdobeAn.getComposition("3F7DA3D3BA86453D9104575D4B4ABC7E");
	var lib1=comp1.getLibrary();
	handleComplete1({},comp1);
}

function init2() {
	canvas2 = document.getElementById("canvas2");
	anim_container2 = document.getElementById("animation_container2");
	dom_overlay_container2 = document.getElementById("dom_overlay_container2");
	var comp2=AdobeAn.getComposition("32FC0171A22445EC84C8E9BEBB26ED91");
	var lib2=comp2.getLibrary();
	handleComplete2({},comp2);
}

function handleComplete0(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib0=comp.getLibrary();
	var ss0=comp.getSpriteSheet();
	exportRoot0 = new lib0.measuresratio();
	stage = new lib0.Stage(canvas0);	
	stage.addChild(exportRoot0);
	//Registers the "tick" event listener.
	fnStartAnimation0 = function() {
		createjs.Ticker.setFPS(lib0.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas0,anim_container0,dom_overlay_container0]);	
	AdobeAn.compositionLoaded(lib0.properties.id);
	fnStartAnimation0();
}

function handleComplete1(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib1=comp.getLibrary();
	var ss1=comp.getSpriteSheet();
	exportRoot1 = new lib1.assetsratio_pc();
	stage1 = new lib1.Stage(canvas1);	
	stage1.addChild(exportRoot1);
	//Registers the "tick" event listener.
	fnStartAnimation1 = function() {
		createjs.Ticker.setFPS(lib1.properties.fps);
		createjs.Ticker.addEventListener("tick", stage1);
	}	    
	//Code to support hidpi screens anwd responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas1,anim_container1,dom_overlay_container1]);	
	AdobeAn.compositionLoaded(lib1.properties.id);
	fnStartAnimation1();
}

function handleComplete2(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib2=comp.getLibrary();
	var ss2=comp.getSpriteSheet();
	exportRoot2 = new lib2.assetsratio_sp();
	stage2 = new lib2.Stage(canvas2);	
	stage2.addChild(exportRoot2);
	//Registers the "tick" event listener.
	fnStartAnimation2 = function() {
		createjs.Ticker.setFPS(lib2.properties.fps);
		createjs.Ticker.addEventListener("tick", stage2);
	}	    
	//Code to support hidpi screens anwd responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas2,anim_container2,dom_overlay_container2]);	
	AdobeAn.compositionLoaded(lib2.properties.id);
	fnStartAnimation2();
} 
```
▼common.js
```JavaScript
$(function(){
	scrollAnimation();
	var $win = $(window);
	$win.on("load", function() {
		init0();
		init1();
		init2();
	});
});

/* ==========================================================
!Scroll Animation
========================================================== */
function scrollAnimation(){
	var AnimTrigger = $('[data-timing="scroll"]'); //アニメーショントリガー
	var windowHeight = $(window).height(); //ウインドウの高さ

	// ロードした際に可視範囲に入っていたら実行される
	$(window).on('load',function(){
		AnimTrigger.each(function(){
			var imgPos = $(this).offset().top; //「AnimTrigger」の位置

			if (imgPos < windowHeight){
				$(this).addClass("aniOn");
			}
		});
	});

	// スクロールした際に「AnimTrigger」ごとに、以下に記述する内容が実行される
	$(window).scroll(function (){
		var scroll = $(window).scrollTop(); //スクロールした量

		AnimTrigger.each(function(){
			var imgPos = $(this).offset().top; //「AnimTrigger」の位置

			//アニメーションする条件＝「画面の下から1/5まできた時点でアニメーション」
			//if (scroll > imgPos - windowHeight + windowHeight/5){
				if (scroll > imgPos - windowHeight/2){
				$(this).addClass("aniOn");
			}
		});
	});
}
```

### 試したこと

canvasの他にcss animationで特定要素が画面に入ったらアニメーション効果をつけて出現する
ギミックを実装しており、そのために特定要素が画面に入ったら特定のclassを付与する関数`scrollAnimation()`は用意してあります。
その関数の中でclass付与するところに単純に init0(); init1(); init2(); を入れてみたりもしましたが、
loadのタイミングの方では発火せず、scrollのところではスクロール中何度も呼び出されてしまって大変なことになってしまいました。。


### 補足情報（FW/ツールのバージョンなど）

<script src="assetsratio_pc.js"></script>
<script src="assetsratio_sp.js"></script>
<script src="measuresratio.js"></script>

こちらはAnimateCCが書き出したcanvasアニメーション本体のJSをそのまま読み込んでいるだけになります。


AnimateCC、CreateJS、Canvasともにこれまで全く経験ありません。今回始めて扱うものになりますので
初歩的なことが分かってないと思いますが、どなたかご教授いただけますと助かります。。。

複数のcanvasアニメーションを画面内に入ったタイミングでスタートさせたい

### 実現したいこと

Adobe Animate CCのHTML5 Canvasでインタラクティブな作品を制作しています。
メニュー画面となる画面の各ボタンをムービークリップで作っており、マウスオーバーしたときに特定のムービークリップシンボルを再生するようにしたいです。

### 発生している問題・エラーメッセージ

メインタイムラインの25フレーム目（Actions:25）に以下のように書いてみたのですが機能していないように見えます。コードスニペットにある「マウスオーバーイベント」と「ムービークリップを再生」を組み合わせただけなのですが、サンプルコードであるアラートは機能しましたがそれ以外のコードはプレビュー時に反応していないように思います。エラーは出ていません。同じ要領でクリックイベントを作成したときは機能しましたが、クリックには別の機能をつけたいのです。


### 該当のソースコード

```js
this.stop();


/* マウスオーバーイベント*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.BTodekake.addEventListener("mouseover", fl_MouseOverHandler_4);

function fl_MouseOverHandler_4()
{
	// カスタムコードを開始
	// このコード例では、出力パネルに "マウスオーバー" という用語が表示されます。
	//alert("マウスオーバー");
	this.BTodekake.play();
	// カスタムコードを終了
}

```

### 補足情報（FW/ツールのバージョンなど）

Adobe Animate CC　var.21.0.1
HTML5 Canvas

マウスオーバーイベントでムービークリップを再生したい

createjsでcanvasに画像を表示させたいのですが、なかなか上手くいきません。
画像はimgurというサイトに上げて、urlを取得し、そのurlで指定しています。
コードは下記のようなものです。コンソールにエラーは出ず、ただ画面が真っ白なままです。

window.onload = function(){

    // Stageオブジェクトを作成
    // ※canvasタグのid名を引数に指定
    var stage = new createjs.Stage('myCanvas');

    // Bitmapオブジェクトを作成
    // ※画像ファイルパスを引数に指定
    var bitmap = new createjs.Bitmap('https://imgur.com/a/NLz01vH');

    // stageにBitmapオブジェクトを配置
    stage.addChild(bitmap);

    // canvasの描画設定
    createjs.Ticker.addEventListener('tick', function(){
        stage.update();
    });

}

何が間違っているのでしょうか？

createjsで画像を表示させたい

### 前提・実現したいこと

javascriptのcreatejsにて、ボタンの作成でつまずきました。
var変数にコンテナを保存してそのコンテナに画像２つをaddchild、
addchildした画像の片方だけを非表示にしたいが、方法が分からず難儀している状態。
そもそもそういった非表示の指定は出来ないのか・・
ご存知の方がいらっしゃいましたらどうかご教授ください。

### 発生している問題・エラーメッセージ

```
firefox 61.0.2　のウェブ開発→デバッガ→コンソールには特にエラー表示無し
```

### 該当のソースコード

```javascript
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title></title>
  <script type="text/javascript" src="js/createjs.min.js"></script>
  <script type="text/javascript">
    window.addEventListener("load", main);
    //処理
    function main() {
      var stage = new createjs.Stage("myCanvas");
      var test_btn1 = createButton("btn1");
      //var test_btn2 = createButton("btn2");
      test_btn1.x = 100;
      test_btn1.y = 100;
      stage.addChild(test_btn1);
      init();
      
      //初期化
      function init(){
        //ここでtest_btn1のbgUp(もしくはbgOut)のvisibleを非表示にしたいが指定方法が分からない
        //test_btn1.button.bgUp.visible = false;　では動作しなかった
        //test_btn1.visible = false; だとbgUpとbgOut両方とも消えてしまう
        //任意のタイミングで非表示にしたいので説明用にここを使用しています
      }
      
      //ボタン生成
      function createButton(btnid) {
        var button = new createjs.Container();
        button.name = btnid;

        //アップ
        var bgUp = new createjs.Bitmap("test_btn_up.png");
        bgUp.visible = false;
        button.addChild(bgUp);
        button.addEventListener("click", handleMouseUp);
        
        //アウト
        var bgOut = new createjs.Bitmap("test_btn_out.png");
        button.addChild(bgOut);
        bgOut.visible = true;
        
        //イベント
        function handleMouseUp(event) {
          pushitem = button.name;
          /*
          switch(pushitem){
            //ボタン名でそれぞれ処理
          }
          */
          //トグル
          if(bgOut.visible){
            bgOut.visible = false;
            bgUp.visible = true;
          }
          else if(bgUp.visible){
            bgOut.visible = true;
            bgUp.visible = false;
          }
        }
        return button;
      }
      //フレーム
      createjs.Ticker.on("tick", function () {
        stage.update();
      });
    }
  </script>
</head>
<body>
  <canvas id="myCanvas" width="2048" height="1536" style="width: 1024px; height: 768px"></canvas>
</body>
</html>
```

### 試したこと
test_btn1.button.bgUp.visible = false;
test_btn1["button"]["bgUp"].visible = false;
など

### 補足情報（FW/ツールのバージョンなど）
createjsはhttps://createjs.com/よりダウンロード(2018.08)

javascriptのcreatejsでのコンテナ内オブジェクトの指定方法について

###reactでcreatejsが使えない
タイトル通りです。reactでcreatejsを使う方法が、調べてもよくわからず、とりあえずCDNでcreatejsをロードしました。
```
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>

```
そしてテストがてらcss修飾を施したcanvas、`CustomCanvas`のidをとりstageを作ろうとしました。
しかし`'createjs' is not defined  no-undef`とエラーが出てしまいました。
```html
export function Town() {
    useEffect(() => {
        var stage = new createjs.Stage("myCanvas");//エラー
    }, []);
    return (
        <CustomCanvas id="myCanvas"></CustomCanvas>
    );
}
```

これはなぜでしょう？普通のhtmlファイルとjavascriptならcdnで問題ないのですが・・・エラーの原因がわかりません。
reactでcreatejsを使うにはどうすればいいのでしょうか？

---
追記
こんな感じでエラーがでました。
![イメージ説明](c977b7f17ae0061f4813642968bc8bad.png)