ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    ソースコードを行番号付きで出力する(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
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    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
    広告: