SQLの窓

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>



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 のチェックで動作し、カーソルがタッチ専用に変化します

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

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








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 | 記録 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり