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日


IE の全く役に立たない『閉じたタブをもう一度開く』

そもそも、『どこなあるの?』的なもので、実は『新しいタブ』の中にあります



そして、何故『役に立たない』かと言いますと、同様の機能を Google Chrome や Firefox で実行すると、『入力したデータも復帰してくれる』からです。

そうです。IE は、そのページが表示されるだけで、他は何もしません・・・・。

関連する記事

Google Chrome の『最近閉じたタブ』ってのはこう使うのか・・・。助かった。ブログで入力していた内容を復帰してくれる!!



posted by lightbox at 2014-01-24 15:24 | IE | このブログの読者になる | 更新情報をチェックする

『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 | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり