JAVA,CSS の覚え書き

        
１．ChromeのCSP（コンテンツセキュリティポリシー）
	１）リソースの読込元をマニフェストファイルに明示する。
	２）外部から渡されたコードを実行する様な記述をしない
	３）インラインでJavaScriptを記述しない

	特に3番めは今まで通常使っていたし、ネットのサンプルでも
	普通に使っている例はたくさんある。
	Localhostでインラインで記述しても動作するが、サーバーに
	アップすると動かなくなった。

	で、全て外部ファイルとして記述する。

２．JavaScriptの動作タイミング
	JavaScriptの記述位置をBodyの最後にしてページの表示
	null読込エラーの回避をする様な情報があったが、Bodyの
	最後に記述してもnullでエラーになるため、ロード完了を
	待つように変更。

document.addEventListener("DOMContentLoaded",function(){
	//ここに動作コードを記述する
});

３．CSSアニメーション
	CSSのアニメーションはこれだけでかなりのことが出来るが
	任意のタイミングで動作させるには一工夫必要になる
	
	【Javascriptのテスト】で使った例
	CSSコード
.rightpgmov{
	animation-name: anime1;		/*アニメーション名を指定*/
	animation-duration: 5s;		/*アニメーション1回分の時間*/
	animation-timing-function: ease-in-out;	/*進行割合を指定*/
	position: absolute;	/*表示位置の指定*/
	z-index: 1;				/*表示の重なり位置の指定*/
	transform-origin: left;	/*アニメーションの原点指定*/
	}

@keyframes anime1{
	0%{transform : scalex(1);}
	100%{transform: scaleX(0);}
}

.leftpvmov{		//内容はrightpgmovと同じ
	animation-name: anime2;
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	position: absolute;
	z-index: 1;
	transform-roigin: firht;
}

@keyframes anime2{
	0%{transform: scaleX(0);}
	100%{transform: scaleX(1);}
}
	amimation-iteration-count: infinite;を指定
	していないので繰り返し処理はしない。
	一度実行した時点で停止状態になる。

	JavaScriptコード
	JavaScriptでimg要素のアニメーションするクラスを書き換え
	任意のタイミングでアニメーションを動作させる。
var elri=document.getElementById('rightpg');//右のimgの要素格納
var elle=document.getElementById('leftpg'); //左のimgの要素格納

movright();                                 //右のアニメーション開始

elri.addEventListener('animationend',function(){//右のアニメーション完了を待つ
	elri.src=rightimg[count];                //右の画像を変更
	elle.src=leftimg[coung];                 //左の画像を変更
	if(count>0)elleb.src=leftimg[count-1];   //右の固定画像を変更
	else elleb.src=leftimg[MaxPg-1];         //一週した時の画像変更

	elri.className="";           //右のアニメーションclassを削除
	movleft();                   //左のアニメーション開始
});

elle.addEventListener('animationend',function(){//左のアニメーション完了を待つ
	if(count !==MaxPg-1)elrib.src=rightimg[count+1];//右の固定画像を変更
	else elrib.src=rightimg[0];              //一週した時の画像変更

	elle.className="";           //左のアニメーションclassを削除
	count++;                     //画像切替えカウントを進める
	if(count===MaxPg) count=0;

	moveright();                 //右のアニメーション開始
});

function movright(){  //右のimg要素にアニメーションclassを生成してアニメーションを開始
	document.getElementById('rightpg').className='rightpgmov';
}

function movleft(){   //左のimg要素にアニメーションclassを生成してアニメーションを開始
document.getElementById('leftpg').className='leftpgmov';
}
HTMLコード（img）の部分のみ
imgに表示するjpg画像は一枚の画像を右用、左用に2分割して右、左に
別々に表示します。
<img src='albimg/P11.jpg' alt="" id="rightpg">
<img src='albimg/P12.jpg' alt="" id="leftpg">