ねごとめも背景

ねごとめも

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


作成したプログラムは、こちらでも公開しています。
よかったら覗いてみてください。_( _´ω`)_
→ javascript,SVG で作成したプログラム置き場

ソースコードを行番号付きで出力する(3)(javascript)

前回までの記事で作成したソースコードビューはソースコードに行番号を振り、
行をハイライトして、ソースコードを見やすく表示する。(1)
その javascript にソースコードコピーが簡単に出来るように
テキストエリアを表示させる機能を追加したもの。(2)

今回(3)は、それにクリップボードへコピーする機能を追加した。
最初、"クリップボードへのコピー"は javascript で簡単に実装できると思っていた。
軽い気持ちで作業に取りかかったけど結構、大変な作業だった。

まず、 javascript ではセキュリティー上の問題かなんなのかは知らないけど、
クリップボードへのコピーが出来ないらしい。

で、どんな方法でクリップボードにコピーしているの?を調べてみると、
flash の"クリップボード"の機能を利用できる事が分かった。

フリーソフトで flash の開発環境を構築する事が出来るか調べてみると、
なんとか行けそうな雰囲気がしたので挑戦。

ダウンロードしたソフトは以下の4つ。
FlashDevelop, java, flax, flashPlayer

Java は以前、少しだけかじった事があったけど HDD を SSD に換装した時にアンインストールしてた。

プログラムの流れは、
フラッシュ上でイベントが発火 →  HTML にアクセス → クリップボードにコピー → 
flash から javascript の関数を呼び出し、クリップボードにコピーの通知。

以下、今回作成したクリップボードに文字列を格納するソースコード。

今回作成した actionscript

package
{
	import flash.display.*;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.Graphics;
	import flash.system.System;
	import flash.external.ExternalInterface;

	public class Main extends Sprite 
	{
		[Embed(source = "copy.png", mimeType="image/png")]
		private var ImageClass:Class;
		[SWF(width = "15px", height = "16px", backgroundColor = "0xffffff", frameRate = "16")]
		public function Main() 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		public function init(e:Event = null):void 
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
		var flashVars:Object = this.loaderInfo.parameters;
		var spr:Sprite = new Sprite();
		var g:Graphics = spr.graphics;
			g.lineStyle (1, 0x000000, 0);
			g.beginFill (0xFF0000, 0);
			g.drawRect  ( 0, 0 , 15 , 16);
		var bitmap:Bitmap = new ImageClass() as Bitmap;
			spr.addChild(bitmap);
			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);
		}
	}
}


今回作成した 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 code=code_block[i].firstChild.data.split(/\r\n|\r|\n/);
	var div=document.createElement("div");
		div.style.overflow="auto";
		div.style.position="relative";
	var icon_box=document.createElement("div");
		icon_box.style.position="absolute";
		icon_box.style.top=10+"px";
		icon_box.style.right=10+"px";
		//icon_box.style.backgroundColor="red";
	var text=document.createElement("img");
		text.src="text.png";
		text.style.border=0+"px";
		text.style.marginRight=8+"px";
		text.style.cursor="pointer";
		text.parent=div;
		text.text=code_block[i].firstChild.data;
		text.flg="hide";
		text.tarea=null;
		
		addEvent(text,"click",function()
		{
			if(!this.tarea)
			{
			var tarea=this.tarea=document.createElement("textarea");
				tarea.style.width=90+"%";
				tarea.style.height=90+"%";
				tarea.style.fontSize=10+"px";
				tarea.style.fontFamily="Consolas";
				tarea.style.border="solid 3px #aaa";
				tarea.style.display="block";
				tarea.style.position="absolute";
				tarea.style.top=5+"%";
				tarea.style.left=6+"%";
				tarea.value=this.text;
				this.parent.appendChild(tarea);
				//tarea.focus();
				tarea.select();
			}
			else
			{
			var display=(this.tarea.style.display=="none")? "block" : "none";
				this.tarea.style.display=display;
				if(display=="block")
				{
					this.tarea.focus();
					this.tarea.select();
				}
			}
		});
	var flash=document.createElement("object");
		flash.style.display="inline-block";
		flash.setAttribute("data","Clipboard20150331f.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","direct");
		obj.setAttribute("name","wmode");
		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[i].firstChild.data);
		obj.setAttribute("name","flashvars");
		flash.appendChild(obj);
		
		icon_box.appendChild(text);
		icon_box.appendChild(flash);
		div.appendChild(icon_box);
	var ol=document.createElement("ol");
		ol.style.marginLeft=50+"px";
		div.appendChild(ol);
		for(j=0;j<code.length;j++)
		{
			//if(code[j]==""){ continue; }
		var li=document.createElement("li");
		var pre=document.createElement("pre");
		var data=document.createTextNode(code[j].replace(/\t/g,"    "));
			pre.appendChild(data);
			li.appendChild(pre);
		var col=(j%2==1)? "#f0f0f0" : "#f8f8f8";
			li.style.backgroundColor=col;
			li.style.fontSize=12+"px";
			pre.style.fontFamily="Consolas";
			ol.appendChild(li);
		}
	var par=code_block[i].parentNode.parentNode;
		par.insertBefore(div,code_block[i].parentNode);
		code_block[i].parentNode.style.display="none";
	}
});


確認できた範囲では、上記のコードで、"クリップボードにコピーする" を
実装(最新のブラウザのIE,Firefox,Chrome)することはできたけど、すごく動作が重い。
2015/03/31 [23:56]

ソースコードの行を行番号付き、ハイライトで出力する(javascript) ( 仮2 )

前回作成したページ上のソースコードの行に行番号とハイライトをつけて
ソースコードを見やすく表示する javascript (ソースコードビュー)に
ソースコードをコピーしやすくする為の機能を追加した。

追加した機能はソースコードの右上にあるアイコンをクリックすると
テキストエリアが出現し、そのテキストエリア内にあるソースコードを
選択した状態で表示させるもの。

■ ソースコード表示、非表示切り替えボタン
ソースコード表示、非表示切り替えボタン

ソースコードが選択した状態で表示されるので右クリックからのコピーがやりやすくなっていると思う。

ソースコード上の右上にあるアイコンクリックでソースコードの表示、非表示の切り替えが出来ます。


addEvent(window,"load",function()
{
var code_block=document.getElementsByTagName("code");
	for(i=0;i<code_block.length;i++)
	{
	var code=code_block[i].firstChild.data.split(/\r\n|\r|\n/);
	var div=document.createElement("div");
		div.style.overflow="auto";
		div.style.position="relative";
	var icon=document.createElement("img");
		icon.src="text.png";
		icon.style.border=0+"px";
		icon.style.position="absolute";
		icon.style.top=10+"px";
		icon.style.right=10+"px";
		icon.style.cursor="pointer";
		icon.parent=div;
		icon.text=code_block[i].firstChild.data;
		icon.flg="hide";
		icon.tarea=null;
		
		addEvent(icon,"click",function()
		{
			if(!this.tarea)
			{
			var tarea=this.tarea=document.createElement("textarea");
				tarea.style.width=90+"%";
				tarea.style.height=90+"%";
				tarea.style.fontSize=11+"px";
				tarea.style.fontFamily="Consolas";
				tarea.style.border="solid 3px #aaa";
				tarea.style.display="block";
				tarea.style.position="absolute";
				tarea.style.top=5+"%";
				tarea.style.left=6+"%";
				tarea.value=this.text;
				this.parent.appendChild(tarea);
				//tarea.focus();
				tarea.select();
			}
			else
			{
			var display=(this.tarea.style.display=="none")? "block" : "none";
				this.tarea.style.display=display;
				if(display=="block")
				{
					//this.tarea.focus();
					this.tarea.select();
				}
			}
		});
		div.appendChild(icon);
	var ol=document.createElement("ol");
		ol.style.marginLeft=50+"px";
		div.appendChild(ol);
		for(j=0;j<code.length;j++)
		{
			//if(code[j]==""){ continue; }
		var li=document.createElement("li");
		var pre=document.createElement("pre");
		var data=document.createTextNode(code[j].replace(/\t/g,"    "));
			pre.appendChild(data);
			li.appendChild(pre);
		var col=(j%2==1)? "#f0f0f0" : "#f8f8f8";
			li.style.backgroundColor=col;
			li.style.fontSize=12+"px";
			pre.style.fontFamily="Consolas";
			ol.appendChild(li);
		}
	var par=code_block[i].parentNode.parentNode;
		par.insertBefore(div,code_block[i].parentNode);
		code_block[i].parentNode.style.display="none";
	}
});

2015/03/29 [22:49]

カウンター

プロフィール

negotoy

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

最新記事

カテゴリ

カレンダー

02 | 2015/03 | 04
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 31 - - - -


PAGE TOP
広告: