数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

03 | 2015/04 | 05
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

# スポンサードリンク

{ <pre></pre> タグ版のテキストエディタ作成しました }

ウィンドウがリサイズされた場合、
画像幅を親要素の幅に合わせて表示させる javascript

例えば、画像の 幅:500 高さ:250 の場合
ウィンドウの表示域( img タグの親要素)の幅が 500px 以下になると
表示域(親要素)のサイズに合わせて画像が縮小される。

プログラムの流れ
ページ読み込み時とページリサイズ時
1) img タグの親要素の表示域の幅を調べる。
2) img タグの幅を初期値に。
3) 親要素の表示域より画像が大きい場合画像を縮小する。

テスト

画像サイズ 500 x 250

テスト画像1

画像サイズ 400 x 250

テスト画像2

画像を親要素にフィットさせる(テスト1)

<!DOCTYPE html>
<html lang="ja">
	<head>
	<meta charset="utf-8">
		<title>画像を親要素にフィットさせる</title>
		<style>
			.content{
				width:50%;
				height:auto;
				overflow:auto;
				padding:10px;
				margin:0px auto;
				background-color:#eee;
			}
			.content > img{
				border:double 3px #000;
			}
		</style>
		<script>
		function addEvent(tar,evt,fnc){ if(document.addEventListener){ tar.addEventListener(evt,fnc,false); }else if(document.attachEvent){ tar.attachEvent("on"+evt,fnc); }else{;} }
		function $(id){ return document.getElementById(id); }
		var resizeImage=function()
		{
			var img_box=document.getElementsByClassName("content");
			var v_wid=img_box[0].offsetWidth-26;/* 20 は左右の padding, img の border 値を足したもの */
			for(i=0;i<img_box.length;i++)
			{
				var img=img_box[i].getElementsByTagName("img");
				for(j=0;j<img.length;j++)
				{
					img[j].style.width="";
					img[j].style.height="";
					if(parseInt(img[j].width)>v_wid)
					{
						img[j].style.width=90+"%";
						img[j].style.height="auto";
					}
				}
			}
		}
		addEvent(window,"resize",resizeImage);
		addEvent(window,"load",resizeImage);
		</script>
	</head>
	<body>
	<div class="content">
		<h3>画像サイズ 500 x 250</h3>
		<img src="20150417a.png" width="500" height="250" alt="">
		<br>
		<h3>画像サイズ 400 x 250</h3>
		<img src="20150417b.png" width="400" height="250" alt="">
	
	</div>
</html>

*) ポイント
ページ(親要素)がリサイズされた時、
イメージ(画像)の幅と高さのスタイル ( css ) に空の値を指定する。
すると、画像の幅と高さが初期化される。
その後の処理は親要素の表示域と初期化された画像の幅を比較して、
画像の幅が親要素の表示域より大きい場合、
画像を縮小表示する。

前回作成した HTML に表示されているソースコードを
flash の "クリップボードへのコピー機能" を利用して格納するプログラムを修正。

前回作成したプログラムの流れ。
flash 出力
1) javascript で flash 出力。
2) flash 出力時、 flashvars にソースコードを格納。

イベント発生時
1) flash 上でイベント発生。
2) flashvars に格納されているソースコードをクリップボードへコピーする。
3) flash 側から javascrpt の関数を呼び出し"クリップボードへコピー完了"を通知する。

今回作成したプログラムの流れ。
flash 出力
1) javascript で flash 出力。

イベント発生時
1) flash 上でイベント発生。
2) flash 側から javascript の関数を呼び出しソースコードを格納する。
3) javascript で 格納したソースコードを flash 側へ渡す。( falsh 関数の呼び出し。)
4) 受け取ったソースコードをクリップボードへコピーする。
5) flash 側から javascrpt の関数を呼び出し"クリップボードへコピー完了"を通知する。

前回のプログラムと今回のプログラムの違いは
javascript 側から flash 側の関数を呼び出しているとこ。

javascript 側から flash 側の関数を呼び出すには、
制限があり、 初期値を設定している場合、
ファイルがサーバー上にあり、HTML 文書と Flash が、
同じドメイン下に格納されていなければ動作しないらしい。

Flash と JavaScript の連携についてはこちらのサイトを参考にさせて頂きました。→  Flashゲームプログラミング講座 for ActionScript3.0

FC2 ブロクでは HTML 文書とその他のファイルを格納しているドメインが違うので、
今回作成したプログラムは動作させることが出来なかった。

なので、ファイルを同じドメイン上に配置したサイトを iframe タグを使って表示しています。


以前作成した HTML ソースコードをクリップボードにコピーする flash。
javascript で flash を書き出す際に不具合があったので訂正。

修正前のプログラムの流れ。
準備
1)javascript で flash のソースコードを出力する。
2)書き出す際、 flashvars の値にコピーするソースコードを格納。

イベント発生時
1) flash 上で click イベントが起こる。
2) flashvars に格納されている値を読み込み、クリップボードへコピーする。
3) flash 側から javascript の関数を呼び出し、"クリップボードへのコピー完了" を通知する。

不具合(欠陥)は準備 2) の HTML ソースコードの格納方法。
flashvars では & が区切り文字になっているらしく、
param タグの flashvars の value の値を設定する場合、

例):param タグ内 name="flashvars"

value="code=hogehoge&param_a=aaaaa&param_b=bbbbb"


と値を設定すると、
actionscript 側で、

var code=flashVars["code"];
var param_a=flashVars["param_a"];
var param_b=flashVars["param_b"];


として、HTML 側から flash 側へと値の受け渡しができる。?

なので、ソースコード内に & が含まれている場合、
全てのコードをクリップボードにコピー出来ないという欠陥があった。

応急処置(確認できた範囲で)として javascript と actionscript を
それぞれ修正。

修正したjavascript


function copy(args){alert(args);}

addEvent(window,"load",function()
{
var code_block=document.getElementsByTagName("code");
	for(i=0;i<code_block.length;i++)
	{
	var par=code_block[i].parentNode.parentNode;
	var btn_box=document.createElement("div");
		btn_box.style.textAlign="right";
	var btn=document.createElement("img");
		btn.setAttribute("src","http://blog-imgs-75.fc2.com/n/e/g/negotoy/20150329b.png");
		btn.style.border=0+"px";
		btn.style.cursor="pointer";
		btn.style.display="inline-block";
		btn.style.marginRight=5+"px";
		btn.textarea=null;
		btn.btn_box=btn_box;
		btn.num=i;
		btn_box.appendChild(btn);
		par.insertBefore(btn_box,code_block[i].parentNode);
		addEvent(btn,"click",function()
		{
			if(!this.textarea)
			{
			var textarea=this.textarea=document.createElement("textarea");;
			var code_block=this.parentNode.nextSibling.getElementsByTagName("code")[0];
				textarea.value=code_block.firstChild.data;
				textarea.style.position="absolute";
				textarea.style.fontSize=11+"px";
				textarea.style.top=0+"px";
				textarea.style.left=50+"px";
				textarea.style.width=90+"%";
				textarea.style.height=90+"%";
			var code=code_block.firstChild.data.split(/\r\n|\r|\n/);
			var div=document.createElement("div");
				div.style.overflow="auto";
				div.style.position="relative";
			var ol=document.createElement("ol");
				ol.style.marginLeft=50+"px";
				
				for(i=0;i<code.length;i++)
				{
					//if(code[j]==""){ continue; }
				var li=document.createElement("li");
				var data=document.createTextNode(code[i].replace(/\t/g,"    "));
					li.appendChild(data);
				var col=(i%2==1)? "#f0f0f0" : "#f8f8f8";
					li.style.listStylePosition="outside";
					li.style.whiteSpace="pre";
					li.style.backgroundColor=col;
					li.style.fontSize=12+"px";
					li.style.fontFamily="Consolas";
					li.style.color="#000";
					ol.appendChild(li);
				}
				div.appendChild(ol);
				div.appendChild(this.textarea);
				this.parentNode.parentNode.insertBefore(div,this.parentNode.nextSibling);
				this.parentNode.nextSibling.nextSibling.style.display="none";
				
				flash=document.createElement("object");
				flash.style.display="inline-block";
				flash.setAttribute("data","http://blog-imgs-75.fc2.com/n/e/g/negotoy/Clipboard20150408d.swf")
				//flash.setAttribute("data","Clipboard20150331a.swf")
				flash.setAttribute("id","Clipboard");
				flash.setAttribute("type","application/x-shockwave-flash");
				flash.setAttribute("height","16px");
				flash.setAttribute("width","15px");

				obj=document.createElement("param");
				obj.setAttribute("value","false");
				obj.setAttribute("name","menu");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","noScale");
				obj.setAttribute("name","scale");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","false");
				obj.setAttribute("name","allowFullscreen");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","always");
				obj.setAttribute("name","allowScriptAccess");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","#000");
				obj.setAttribute("name","bgcolor");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","transparent");
				obj.setAttribute("name","wmode");
				flash.appendChild(obj);

				obj=document.createElement("param");
				obj.setAttribute("value","code="+code_block.firstChild.data.replace(/&/g,"<and>"));
				obj.setAttribute("name","flashvars");
				flash.appendChild(obj);
				this.btn_box.appendChild(flash);
				
				//textarea.focus();
				textarea.select();
			}
			else
			{
			var flg=this.textarea.style.display=="none" ? "block" : "none";
				this.textarea.style.display=flg;
				if(flg=="block")
				{
					this.textarea.focus();
					this.textarea.select();
				}
			}
		});
	}
});

修正したactionscript

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.system.System;
	import flash.external.ExternalInterface;

	public class Main extends Sprite 
	{
		public function Main() 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		public function init(e:Event = null):void 
		{
		var loader:Loader = new Loader();
		var url:String = "http://blog-imgs-75.fc2.com/n/e/g/negotoy/2015040523233445b.png";
		var urlReq:URLRequest = new URLRequest(url);
			loader.load(urlReq);
			addChild(loader);
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
		var flashVars:Object = this.loaderInfo.parameters;
		var spr:Sprite = new Sprite();
		var g:Graphics = spr.graphics;
			g.beginFill (0xFF0000, 0);
			g.drawRect  ( 0, 0 , 15 , 16);
			spr.buttonMode = true;
			spr.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void 
			{
				if (flashVars["code"])
				{
					System.setClipboard(flashVars["code"].replace(/<and>/g, "&"));
					if (ExternalInterface.available)
					{
						ExternalInterface.call("copy","クリップボードにコピーしました。");
					}
				}
			}); 
			addChild(spr);
		}
	}
}

受け渡す際にソースコードにある & を一度 javascript で <and> に置き換えて、
受け取った flash 側で <and> & へ再変換して出力するという。。。

以前作成したソースコードを行番号付きで表示する javascript で
クリップボードへコピーするために使用していた flash の swf ファイル。

今回は、この swf ファイルの軽量化に挑戦。
今までのファイルは、
actionscript のサイズが 1.35K バイト
埋め込みに使用した画像のサイズが 456 バイト
画像を埋め込んで出力した swf のサイズが 10.3K となっていた。

この埋め込んでいた画像をリンク配置にして swf ファイルを作成してみた。
その結果、
actionscript のサイズが 1.18K バイト
リンク配置に使用した画像のサイズは変わらす 456 バイト
画像をリンク配置にして出力した swf のサイズは 1.55K となって、
swf のファイルサイズが 9K バイトほど軽量化された。

で、
実行完了までの時間短縮を期待して swf ファイルを
差し替えてみた。

が、
実行終了までに要する時間は体感的には以前と変わらず。(T_T)

ActionScript3.0 : Loaderクラスを利用した画像ファイルのリンク配置

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.system.System;
	import flash.external.ExternalInterface;

	public class Main extends Sprite 
	{
		public function Main() 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		public function init(e:Event = null):void 
		{
		var loader:Loader = new Loader();
		var url:String = "http://blog-imgs-75.fc2.com/n/e/g/negotoy/2015040523233445b.png";
		var urlReq:URLRequest = new URLRequest(url);
			loader.load(urlReq);
			addChild(loader);
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
		var flashVars:Object = this.loaderInfo.parameters;
		var spr:Sprite = new Sprite();
		var g:Graphics = spr.graphics;
			g.beginFill (0xFF0000, 0);
			g.drawRect  ( 0, 0 , 15 , 16);
			spr.buttonMode = true;
			spr.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void 
			{
				if (flashVars["code"])
				{
					System.setClipboard(flashVars["code"]);
					if (ExternalInterface.available)
					{
						ExternalInterface.call("copy","クリップボードにコピーしました。");
					}
				}
			}); 
			addChild(spr);
		}
	}
}

前回の記事では、Web ブラウザ上でクリップボードの機能を実装するため、
Flash Develop をインストールして swf ファイル作成に挑戦しました。
開発環境構築、プログラム作成、実行にあたりエラー(警告)がいくつか出たので、
分かる範囲で、その対処方法をめも。

1)コンパイラの設定をして下さい。
コンパイラーの設定)

ステータスバー → ツール → ソフトウェアをインストールから
コンパイラをダウンロード。
Win8.1の環境で Flex SDK と Apach Flex SDK(*注) をダウンロードしました。

ダウンロード後、
ステータスバー → ツール → 環境設定 → AS3Context → Installed Flex SDKs から
SDK の Path を指定。

ステップ:1
環境設定からflex sdk のpathを指定。手順(1)

ステップ:2
環境設定からflex sdk のpathを指定。手順(2)

ステップ:3
環境設定からflex sdk のpathを指定。手順(3)

(*注)
Apach Flex SDK を Flex SDK と*同じフォルダ(...FlashDevelop\Apps)に配置すると
ツール → ソフトウェアをインストールを選択するとエラー(警告)が出て
ソフトウェアをインストールすることが出来なくなる症状が発症しました。
*同じフォルダ
C:\Users\******\AppData\Local\FlashDevelop\Apps

警告(エラー)表示
ソフトウェアをインストールをクリックすると警告が表示された。警告(1)

ソフトウェアをインストールをクリックすると警告が表示された。警告(2)

対処方法として、 Apach Flex SDK を別のフォルダに配置することで警告(エラー)が表示されなくなりました。


2)デバックを実行すると出力される警告(エラー)
Error:unable to open 'libs/player/17.0/playerglobal.swc'
!65 Error:unable to open 'libs/player/17.0/playerglobal.swc'
この警告は、バージョン:17.0 の playerglobal.swc のファイルが
ダウンロードした SDK には入っていないから?

*対処方法
Flex SDK の場合は、FlashDevelop\Apps\flexsdk\4.6.0\frameworks\libs\player 内にある
最新?のファイル 16.0 をコピーして貼り付け、フォルダ名を 17.0 に変更することで、
この警告表示は無くなった。

Apach Flex SDK の場合は、SDKを配置したフォルダ内\frameworks\libs\playe

最新のファイルをコピーして名前を変更する

3)swf ファイルの関連付けを設定する。
コントロール パネル → すべてのコントロール パネル項目 → 既定のプログラム → 関連付けを設定する、から
swf ファイルを IE, Firefox, Chrome 等のブラウザに関連付ける。

swf ファイルを IE, Firefox, Chrome 等のブラウザに関連付け


# スポンサードリンク