logical　error :アーカイブ

Google

<< 2013年12月 | TOP | 2014年02月 >>

- 1 2 3 >>

2014年01月25日

List of Chrome URLs( chrome://chrome-urls/ ) / Chrome の内部ページの一覧



アドレスバーに chrome://chrome-urls と入力すると、Google Chrome の内部用のページの一覧が表示されます。いくつかは、メニューから実行できるので、知っているものも多いですが、全く日本語化されていないものが多く、そもそもどう使うか全く解らないページが殆どです。

以下は、比較的ポピュラーになもの
chrome://apps
chrome://bookmarks
chrome://downloads
chrome://extensions
chrome://flags
chrome://help
chrome://history
chrome://memory
▼ 新しいタブを開く
chrome://newtab
chrome://plugins
▼ このままでは使えません
chrome://print
chrome://settings
chrome://terms
▼ 詳細なバージョン情報
chrome://version


以下は拡張機能のデバッグ用だと思います
chrome://crash


chrome://kill


chrome://hang
完全なハングアップ( ずっと返って来ません )

chrome://shorthang
少しハングアップ( このウェブページにアクセスできません』となります )

chrome://gpuclean
chrome://gpucrash
chrome://gpuhang
chrome://ppapiflashcrash
chrome://ppapiflashhang
chrome://restart/
再起動します


※ 開発版の 34.0.1803.2 canary ではもう既にいくつか増えています

chrome://chrome-signin
Chrome へのログインが WEB では無く内部に画面を設けています

chrome://quit 
デバッグ部分( 終了 )


以降は補足資料です
▼ キャッシュ削除等
chrome://settings/clearBrowserData

▼ 起動ページ設定
chrome://settings/startup

▼ ホームボタンの場所設定
chrome://settings/homePageOverlay

▼ 自動入力設定の管理
chrome://settings/autofill

▼ 保存したパスワードの管理
chrome://settings/passwords

posted by lightbox at 2014-01-25 20:32 | Google Chrome |

2014年01月24日

『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

3D Bouncing Ball with CSS3 と言う、アニメーションでバウンドしつづけるデモがあるんですが、そのボール部分のデータを取り出すと以下のようになります。

<style type="text/css">
#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	position: absolute;
	top: 0;	
	z-index: 11;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),inset -2px -1px 40px rgba(0,0,0,0.7),0 0 1px #000;	
}
#ball::after {
	content: "";
	width: 80px; 
	height: 40px;
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10; 
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	border-radius: 40px / 20px;	
}
</style>

このデータの background 部分は、svg で書かれており、BASE64 でデコードすると、以下のようなデータになります。

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#bbbbbb" stop-opacity="1"/>
    <stop offset="99%" stop-color="#777777" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

これを変更して色を変えて、いろいろサイズ変更すると以下のようなボタンを作成する事ができます。
( BASE64 エンコード / BASE64 デコード )

ボタン

<style type="text/css">
#btn {
	overflow:hidden;
	cursor: pointer;
	width: 140px;
	height: 50px;
	border-radius: 10px;
	position: absolute;
	top: 0;	
	left: 0;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1NTU1NSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICA8L2xpbmVhckdyYWRpZW50Pg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPg0KPC9zdmc+
);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),inset -2px -1px 40px rgba(0,0,0,0.7),0 0 1px #000;	
}
#btn::after {
	content: "";
	width: 160px; 
	height: 40px;
	position: absolute;
	left: -10px;
	top: -10px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	border-radius: 40px / 20px;	
}
#btn div {
	margin-left: 20px;
	margin-top: 17px;
	font-weight: bold;
	color: #ffffff;
}
</style>
<div id="btn"><div>ボタン</div></div>

要素が position:absolute なので、コンテンツとして配置するには、position:relative 内に置く必要があります。

BASE64 部分の確認は、url() の内容を Google Chrome のアドレスバーにセットすると確認できます。

関連する記事

IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol

posted by lightbox at 2014-01-24 00:37 | CSS3 |

2014年01月23日

フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

以下の画像は、『自由の翼フォント』を使って背景を透過にして、CSS で枠線を付加しています。画像はフリーフォントで簡単ロゴ作成(横書きページ)で簡単に作成できます



この画像に CSS を適用して、以下のようにごく自然に影付きグラデーションボタンを調整する事ができます。

<style>
#img1 {
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<img id="img1" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">

これだけでもいろいろ他にも試したくなりますが、使い勝手を増やすためにここからさらにこれを吹き出しに変更したいと思います。

その為には、さすがに画像だけでは無理なので、画像を DIV で挟んで :after と :before を使用して三角形の吹き出し口を作成します。

DIV をベースとして位置指定する為、DIV には position:relative を指定し、内部では position:absolute を指定して、上からの位置で位置調整をします。

:after 三角形は、画像の上にのって、色をグラデーションの開始色にする事によってつなぎ目を無くしています。
:before 三角形はその後ろに隠れて少し下にずれて枠線を作成しています。

<style>
#box {
	position: relative;
	height: 80px;
}

/* 下向き三角用(手前側) */
#box:after {
	content: '';
	position: absolute;
	/* border の端の特性を生かして三角を作成 */
	border-top: 16px solid #808080;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 29px;	/* 増やして下へ移動 */
	left: 15px;	/* 下向き三角の左からの位置 */
}
/* 下向き三角ボーダー用(後ろ側) */
#box:before {
	content: '';
	position: absolute;
	border-top: 16px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 31px;	/* 増やして下へ移動させて、ボーダーとして使用 */
	left: 15px;	/* :after と一致させる */
}

#img2 {
	margin: 0!important;
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<div id="box">
<img id="img2" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">
</div>

フリーフォントで簡単ロゴ作成(横書きページ)から、リアルタイムにCSSを調整テストする事が可能です。

三角形の原理は以下のような感じです。

<style type="text/css">
#test1 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px #00ffff;
}
#test2 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px transparent;
}
#test3 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px transparent;
	border-left:solid 25px transparent;
}
</style>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

posted by lightbox at 2014-01-23 22:38 | CSS3 |

JavaScript : Global な undefined 変数に絡むいろいろ

undefined プロパティ

上のリンクは、Microsoft のドキュメントですが、undefined という変数が最初から定義されていて、undefined という特殊な値が入っている事を意味します。

但し、この変数は内容を変更できてしまいますので、確実な値は void( 0 ) を使います。また、ブラウザでは Global オブジェクトと window オブジェクトは同じものであるという事も以下の例で確かめる事ができます。

さらに、定義済の変数は、直接 undefined という値で比較できまかすが、未定義の値は typeof(未定義変数) == 'undefined' という比較方法になります。

<script type="text/javascript">
// テスト用の alert
function alertx(message) {
	console.log(message);
//	alert(message);
}

try {
	// 定義済なので実行可能です
	alertx("定義した未設定の変数の中身 = " + undefined);
	// 未定義なのでエラーになります
	alertx(un_defined);
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

(function(){
	// 中身を書き換える事ができます
	// ※ ローカルからグローバルにアクセスしています
	window.undefined = "undefined 変数の書き換え";
	// un_defined を定義して、undefined 値をセット
	window.un_defined = void(0);
})();

// ローカルからセットした値が有効です
alertx("undefined の内容 = "+undefined);
alertx("un_defined の内容 = "+un_defined);

var x;
if ( x === un_defined ) {
	alertx("未設定の変数の中身は、void(0)の結果と同じ(定義済の変数とは比較可能)");
}

try {
	if ( y === un_defined ) {
		alertx("if で 未定義の y を参照してエラーになり、ここは実行されません");
	}
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

if ( typeof(y) == 'undefined' ) {
	alertx("未定義変数かどうかのチェックです");
}




</script>

タグ：javascript undefined

posted by lightbox at 2014-01-23 02:43 | JavaScript |

2014年01月22日

Google Chrome デベロッパーツールの新しい『Mobile emulation』という機能

Mobile emulation


日本語ではありませんが・・・

Google Chrome 32.0.1700.76 で正式にお目見えしました。現在、Settings　の Overrides で Show 'Emulation' view in console drawer をチェックする必要がありますが、開発版の 34.0.1794.5 canary では、Overrides そのものが無くなっており、新たにレンダリング関連のタブも追加されています。


( Chrome Canary has received a number of improved mobile emulation tools which can be accessed by enabling the Emulation panel through the Settings panel. To enable: )

ぱっと見解りにくいです( 3 ) の処理

1) Device 選択
2) Emulate ボタンクリック
3) Screen 部分をクリック


( User Agent と Sensors もクリックできるようになっており、設定画面が変わります )

Emulate screen のチェックがあるかどうかで、Mobile emulation の有無が即座に切り替わって、Shrink to fit のチェックで、表示されている大きさにフィットとして縮小表示されます。

タッチスクリーンのエミュレート

この機能によって、かなりリアルにスマホの検証が可能になります。



Sensors の Emulate touch screen のチェックで動作し、カーソルがタッチ専用に変化します

前からありますが、右サイドに表示

以下のアイコンを長押しして右サイド用のアイコンを表示させてクリックします。以降は、下と右を簡単に切り替えれるようになります。

タグ：Google Chrome デベロッパーツールブラウザスマホ

posted by lightbox at 2014-01-22 11:11 | Google Chrome |

2014年01月21日

Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできないのは、Windows7 のエアロ系で起きるようです。

Windows7 の個人設定で、クラシックまたは、ハイコントラストではこの問題が起きませんでした。(Windows7 ベーシックでは起こります)そこで、Windows8 で確認してみると、どのタイプでも起こりませんでした。Windows8 では、エアロを使用していないので同様に起こるかどうかは検証していませんが、とにかく Windows7 では起こる可能性が高いので、その場合は、

Windows クラシックに変更してしばらく様子を見る

というのが良いと思います


関連する記事

Google Chrome 32.0.1700.76 のコンボボックススクロールバーがドラッグできない問題が、開発版(34.0.1794.5 canary) で修正されたそうです

Google Chrome 32.0.1700.76 の具体的な問題点

posted by lightbox at 2014-01-21 10:34 | 記録 |