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

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

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

# 最新記事

# カレンダー

05 | 2017/06 | 07
- - - - 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 -

# スポンサードリンク

テキスト内指定文字列 CSS クラス名一括指定ツール作成しました。

css の解説サイトを覗いてたら、新しい発見がっ!( ゚д゚)ハッ!
現在、公開している fc2 ブログテンプレート [ wi-blue-b ],[ wi-round-a ] では、
右メニュー( カラム )の表示、非表示を、 javascript で css を操作することによって動作させている。

こちらのサイトのサンプルをの覗いていると。。。コレって css だけで動作させる事が出来るんじゃ...。
と思い、作成してみた。

以下、 javascrit を使用せず css だけで右カラム ( メニュー ) が表示、非表示されるサンプルとソースコード。


header

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet"  href="style.css">
        <script type="text/javascript" src="column.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <header>
            </header>
            <section id="left_content">
            main_content
            </section><!--/left_content-->
            <section id="right_content">
            <!--
                <div id="menu" style="width:100%;height:500px;background-color:green">
                </div>
            -->
                <div id="recommend_box">
                    <div id="recommend">
                        <ul>
                            <li>menu-a</li>
                            <li>menu-b</li>
                            <li>menu-c</li>
                        </ul>
                    </div><!--/recommend-->
                </div><!--/recommend_box-->
            </section><!--/right_content-->
            <footer>
            footer
            </footer>
        </div>
     </body>
</html>
                      
  • menu-a
  • menu-b
  • menu-c




<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>

        *{
            padding:0;
            margin:0;
        }
        body{
        }
        #wrapper{
            width:80%;
            height:auto;
            padding:5px 0px;
            margin:auto;
        }
        header,footer{
            width:80%;
            height:auto;
            color:white;
            text-align:center;
            padding:40px 0px;
            margin:auto;
            background-color:black;
        }
        #content_box{
            width:80%;
            height:auto;
            white-space:nowrap;
            margin:auto;
            position:relative;
            overflow:hidden;
            background-color:dimgray;
        }
        #left_content *:not(pre):not(code),#right_content *:not(pre):not(code){
            white-space:normal;
        }
        #content_box > #toggle,#content_box > #toggle_skin{
            display:none;
        }
        #content_box > label{
            width:30px;
            height:30px;
            cursor:pointer;
            position:absolute;
            z-index:100;
            right:0px;
        }
        #left_content{
            width:75%;
            height:auto;;
            display:inline-block !important;
            background-color:gray;
        }
        #right_content{
            width:25%;
            height:auto;
            display:inline-block !important;
            opacity:1;
            background-color:darkgray;
            vertical-align:top;
        }
        #right_content > div > ul{
            padding:0px;
            margin:0px;
        }
        #right_content > div > ul > li{
            list-style-position:inside;
        }
        #left_content > div,#right_content > div{
            width:98%;
            height:auto;
            padding:10px;
            margin:auto;
            box-sizing: border-box;
            background-color:lightgray;
        }
        #toggle:checked ~ #left_content{
            width:100%;
        }
        #toggle:checked ~ #right_content{
            opacity:0;
        }
        #left_content,#right_content{
            transition:all .4s ease-in-out 0s;
            /*transition: all 1s ease;*/
        }
        #toggle_box{
            width:30px;
            height:30px;
            position:absolute;
            z-index:1;
            cursor:pointer;
        }
        #toggle_box:before{
            content:"";
            width:30px;
            height:30px;
            background-color:black;
            position:absolute;
            opacity:.8;
            border-radius:5px;
        }
        #toggle_box span{
            width:20px;
            height:4px;
            display:block;
            background-color:white;
            position:absolute;
            left:5px;
            -ms-transition:all 0.4s;
            -moz-transition:all 0.4s;
            -webkit-transition:all 0.4s;
            transition:all 0.4s;
        }
        #toggle_box span:first-child{
            top:7px;
            -ms-transform:translateX(0.5px) translateY(6px) rotate(45deg);
            -moz-transform:translateX(0.5px) translateY(6px) rotate(45deg);
            -webkit-transform:translateX(0.5px) translateY(6px) rotate(45deg);
            transform:translateX(0.5px) translateY(6px) rotate(45deg);
        }
        #toggle_box span:nth-child(2){
            margin-top:-2px;
            top:50%;
            opacity:0;
        }
        #toggle_box span:last-child{
            bottom:7px;
            -ms-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
            -moz-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
            -webkit-transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
            transform:translateX(0.5px) translateY(-6px) rotate(-45deg);
        }
        #toggle:checked ~ label > span:first-child{
            top:7px;
            -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
            -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
            -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
            transform:translateX(0px) translateY(0px) rotate(0deg);
        }
        #toggle:checked ~ label > span:nth-child(2){
            margin-top:-2px;
            top:50%;
            opacity:1;
        }
        #toggle:checked ~ label > span:last-child{
            bottom:7px;
            -ms-transform:translateX(0px) translateY(0px) rotate(0deg);
            -moz-transform:translateX(0px) translateY(0px) rotate(0deg);
            -webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
            transform:translateX(0px) translateY(0px) rotate(0deg);
        }
        pre,code{
            overflow:auto;
        }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                header
            </header>
            <div id="content_box">
              <input type="checkbox" id="toggle" name="tg1">
              <!--<input type="checkbox" id="toggle_skin" name="tg1">-->
              <label for="toggle" id="toggle_box">
                    <span> </span>
                    <span> </span>
                    <span> </span>
              </label>
              <section id="left_content">
                      <pre><code>

        *{
            padding:0;
            margin:0;
        }
        body{
        }
        #wrapper{
            width:80%;
            height:auto;
            padding:5px 0px;
            margin:auto;
        }
        header,footer{
            width:80%;
            height:auto;
            color:white;
            text-align:center;
            padding:40px 0px;
            margin:auto;
            background-color:black;
        }
        #content_box{
            width:80%;
            height:auto;
            white-space:nowrap;
            margin:auto;
            position:relative;
            overflow:hidden;
            background-color:dimgray;
        }

                      </code></pre>
              </section><section id="right_content">
                  <div>
                    <ul>
                        <li>menu-a</li>
                        <li>menu-b</li>
                        <li>menu-c</li>
                        <li>menu-d</li>
                        <li>menu-e</li>
                        <li>menu-f</li>
                        <li>menu-g</li>
                        <li>menu-h</li>
                        <li>menu-i</li>
                        <li>menu-j</li>
                    </ul>
                  </div>
              </section>
            </div>
            <footer>
                footer
            </footer>
        </div>
    </body>
</html>


こちらのサイト様のサンプルを参考にさせて頂きました。 → css だけで作る フォトギャラリー・スライドショー


以前作成した 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> & へ再変換して出力するという。。。

# QRコード

QR

I use Vivaldi.

Download Vivaldi Web Browser Today!

# スポンサードリンク