SQLの窓

2016年11月26日


Google Chrome のコンソールが、『いらすとや』のイラストでいっぱいになった日

Google Plus でデベロッパーツールを開けてコンソールを見たら、大きな文字が色つきで表示されていたので、console.log で css が使えると解りました。

で、画像を使えるならサイトのメッセージとして強力だなぁと思い試してみると・・・

かなり強力です。

最大表示 

console.log("%c%s",
"background: url('https://lh3.googleusercontent.com/-lpfmi9vuwOg/WDVegEds_SI/AAAAAAAAhxc/0DzXoBQQlJw_L7KXSIi2UY0hEJwjiNcHwCHM/s128/internet_kanki_woman1.png'); font-size: 1240px;"," ")
※ 表示エリアを確保するのに、漢字スペース使ってます。半角スペースだと、思ったようになりませんでした。

一夜あけて、さらに調べてみると

Facebook の出力方法だけ特殊だったので、JavaScript のコードを拾ってみると、通常では右上に実行したスクリプトと行が出るようになってるのですが、それを消す実行方法が以下になります
setTimeout(console.log.bind(console,"%c%s",
"background: url('https://lh3.googleusercontent.com/-lpfmi9vuwOg/WDVegEds_SI/AAAAAAAAhxc/0DzXoBQQlJw_L7KXSIi2UY0hEJwjiNcHwCHM/s128/internet_kanki_woman1.png'); font-size: 1240px;"," "))

このコードが入っていたのが以下になります
'Chromedome',
['fbt'],
(function a(b, c, d, e, f, g, h) {
    if (c.__markCompiled) c.__markCompiled();
    g.start = function(i) {
        if (i.off || top !== window || !/(^|\.)facebook\.(com|sg)$/.test(document.domain)) return;
        var j = i.stop || h._("STOP\uff01"),
        k = i.text || h._("\u3053\u308c\u306f\u958b\u767a\u8005\u5411\u3051\u306e\u30d6\u30e9\u30a6\u30b6\u6a5f\u80fd\u3067\u3059\u3002Facebook\u6a5f\u80fd\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u307e\u305f\u306f\u8ab0\u304b\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u30cf\u30c3\u30ad\u30f3\u30b0\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u3053\u306b\u4f55\u304b\u3092\u30b3\u30d4\u30fc\u30fb\u8cbc\u308a\u4ed8\u3051\u3059\u308b\u3088\u3046\u306b\u8a00\u308f\u308c\u305f\u5834\u5408\u3001\u305d\u308c\u306f\u7b2c\u4e09\u8005\u304c\u3042\u306a\u305f\u306eFacebook\u30a2\u30ab\u30a6\u30f3\u30c8\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u5f97\u308b\u305f\u3081\u306e\u8a50\u6b3a\u30fb\u4e0d\u6b63\u884c\u70ba\u3067\u3059\u3002"),
        l = i.more || h._("\u8a73\u7d30\u306f{url}\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002", [h.param('url', 'https://www.facebook.com/selfxss')]);
        if ((window.chrome || window.safari) && !i.textonly) {
            var m = 'font-family:helvetica; font-size:20px; '; [[j, i.c1 || m + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'], [k, i.c2 || m], [l, i.c3 || m], ['', '']].map(function(s) {
                setTimeout(console.log.bind(console, '\n%c' + s[0], s[1]));
            });
        } else {
            var n = ['', ' .d8888b.  888                       888', 'd88P  Y88b 888                       888', 'Y88b.      888                       888', ' "Y888b.   888888  .d88b.  88888b.   888', '    "Y88b. 888    d88""88b 888 "88b  888', '      "888 888    888  888 888  888  Y8P', 'Y88b  d88P Y88b.  Y88..88P 888 d88P', ' "Y8888P"   "Y888  "Y88P"  88888P"   888', '                           888', '                           888', '                           888'],
            o = ('' + k).match(/.{35}.+?\s+|.+$/g),
            p = Math.floor(Math.max(0, (n.length - o.length) / 2));
            for (var q = 0; q < n.length || q < o.length; q++) {
                var r = n[q];
                n[q] = r + new Array(45 - r.length).join(' ') + (o[q - p] || '');
            }
            console.log('\n\n\n' + n.join('\n') + '\n\n' + l + '\n');
            return;
        }
    };
})
※ 後半の 8 が並んでる文字列は、Chrome と Safari 以外で使用されます。(要するにアスキーアートですね。)

IE は無視されてました。Firefox は、出てます。



※ Google Chrome で表示中ならば、F12 で見てみて下さい。出してみました

posted by lightbox at 2016-11-26 12:08 | Comment(0) | Google Chrome | このブログの読者になる | 更新情報をチェックする

2016年09月16日


Google Chrome で IFRAME を display:none で消してから表示すると、スクロールバーが消える。仕方ないので、visibility:hidden で代替



Google Chrome は、現在 53.0.2785.116 m です。Google Chrome は時々こういうバグが出ますが、そのうち修正されると思います。

webkit 的な css で 対処方法をいろいろ探ったのですが対応できなかったので、visibility:hidden で代替し、visibility:hidden だとその場所のスペースがそのままになるので、position:absolute を併用しました。

※ 他のブラウザでは display:none は 正しく動作します



上の IFRAME は 再表示するとスクロールバーが消えてしまいます(Google Chrome 53.0.2785.116 m)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="button" id="hide" value="display:none">
<input type="button" id="show" value="display:"><br>
<iframe
	id="iframe_target"
	src="about:blank"
	name="myframe"
	width="400"
	height="200"
	style='border:solid #000000 1px;'
></iframe>
<br>
<input type="button" id="hide2" value="visibility:hidden">
<input type="button" id="show2" value="visibility:visible"><br>
<div style='position:relative'>
<iframe
	id="iframe_target2"
	src="about:blank"
	name="myframe"
	width="400"
	height="200"
	style='border:solid #000000 1px;'
></iframe>
</div>
上の IFRAME は 再表示するとスクロールバーが消えてしまいます(Google Chrome 53.0.2785.116 m)
<script>
str="";
str+="<img src=\"https://lh3.googleusercontent.com/-c4ugzdOcnSU/VRt3mbqzu0I/AAAAAAAAZXU/41DpjImnF7ILujQmvRRRcok0rgIaYCptACHM/s400/b17brandon016.jpg\"> ";

$("#iframe_target").get(0).contentWindow.document.write(str);
$("#iframe_target").get(0).contentWindow.document.close();
$("#iframe_target2").get(0).contentWindow.document.write(str);
$("#iframe_target2").get(0).contentWindow.document.close();

$("#hide").on("click", function(){
	$("#iframe_target").css("display", "none");	
});
$("#show").on("click", function(){
	$("#iframe_target").css("display", "");	
});

$("#hide2").on("click", function(){
	$("#iframe_target2").css({"visibility": "hidden","position":"absolute"});	
});
$("#show2").on("click", function(){
	$("#iframe_target2").css({"visibility": "visible","position":"static"});	
});

</script>


IFRAME 内のコンテンツを document.write で作成すると、同一ドメインとして IFRAME 内を参照できます



posted by lightbox at 2016-09-16 04:33 | Comment(0) | Google Chrome | このブログの読者になる | 更新情報をチェックする

2015年09月17日


Google Chrome 45.0.2454.93m コンボボックスのバグ( リストボックスでは起こりません )

いずれ改善されるのでしょうが、非常に発見しづらいバグではあります。optgroup に背景色を設定すると、その中の option の背景も同じ色になるので、option に #ffffff を設定しようとすると、反映されないというバグです。しかも、このバグは、size 属性を指定した『リストボックス』では起こらないです。


▼ 以下は画像ですが、左側がバグが発生している状態です
このバグの対症療法は、#ffffff の代りに #fffffe を使います

<style>
.mttl1 {
	background-color: #e0e0e0;
}
.mttl1 option {
	background-color: #fffffe;
}

.mttl2 {
	background-color: #ffe4c4;
}
.mttl2 option {
	background-color: #ffffff;
}
</style>
<select>
<option value="jiyunotsubasa" selected>自由の翼フォント</option>

<optgroup label="よく飛ばない鳥" class="mttl1">
<option value="cp_font" >チェックポイントフォント</option>
<option value="jiyucho" >じゆうちょうフォント</option>
</optgroup>

<optgroup label="ふぉんときゅーとがーる" class="mttl2">
<option value="jkg-l_2" >JKゴシック</option>
<option value="jkgm3" >JKゴシック M</option>
</optgroup>
</select>



posted by lightbox at 2015-09-17 21:12 | Comment(0) | Google Chrome | このブログの読者になる | 更新情報をチェックする

2015年03月14日


Google Chrome のカラーピッカーを使用して、#RGB 形式の色コードを取得する方法

デベロッパーツールの Elements



とにかく、色の設定が右サイドに存在しないと、カラーピッカーを使え無いので、先頭にある『element.style』に適当に color 属性を設定します。

色部分をクリックしてカラーピッカーを開始



ページ部分にマウスカーソルを移動すると、拡大鏡が表示されるので、その中央の1点で目的の色を選択してクリックします

SHIFT キーを押しながらクリック

rgb(n,n,n) で表示されている場合は、SHIFT キーを押しながら色部分をクリックするとフォーマットが変更されます。好きなフォーマットに変更してコード部分をクリックすると入力可能なので、クリップボードにコピーします。








posted by lightbox at 2015-03-14 17:37 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年09月27日


Google Chrome デベロッパーツールの Tips And Tricks

リロードボタン長押しでオプションメニュー



デベロッパーツールが開いている状態でのみ、メニューが表示されてリロード方法を選択できるようになります。特に、最後の『キャッシュの消去とハード再読み込み』は、ショートカットキーが無いのでこのメニューからのみ利用できます。

ドラッグ & ドロップで要素を移動



ドラッグで top_1 の div を移動中です。ドロップすると移動され、CTRL+Z で元に戻ります

CSS のカラーフォーマットをその場で変更表示

カラー部分を、SHIFT を押しながらクリックすると、フォーマットが切り替わって循環します。

複数の JavaScript ソースより文字列検索



JavaScript の整形



ソースのスペースの表示



▼ スペース


▼ タブ


コンソールから関数のブレイクポイント作成

debug( 関数名 )

インスペクト直後のオブジェクト参照

$0

dir( $0 )

表示された内容を右クリックして表示されるメニューから、要素タブの該当部分へ戻れます

console.log では、以下のフォーマット文字列が使えます

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); のように複数も可
Format SpecifierDescription
%sFormats the value as a string.
%d or %iFormats the value as an integer.
%fFormats the value as a floating point value.
%oFormats the value as an expandable DOM element (as in the Elements panel).
%OFormats the value as an expandable JavaScript object.
%cFormats the output string according to CSS styles you provide.
コンソールで IFRAME を選択

デフォルトでは、トップフレームなので IFRAME の中で作業したい場合に選択します



モバイルモード『Mobile emulation』で左上にフィットする



その他

コンソールでは、SHIFT+Enter で複数行可

copy コマンド( コンソールのみ ) でクリップボードへコピー

table コマンドと、console.table メソッド




タグ:Google Chrome
posted by lightbox at 2014-09-27 18:09 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年08月27日


Google Chrome の「デベロッパーツール」で、実行済みのページのソースをクリップボードにコピーする

F12 でデベロッパーツール を開いてコンソールタブをクリックして以下のコマンドを実行します


copy(document.getElementsByTagName("HTML")[0].outerHTML)
これで取得できるソースは、JavaScript が実行された後のリアルなソースコードとなります。CTRL+U で表示されるソースコードは、WEB から送られて来たそのままのソースコードです。

関連する記事

Google Chrome の「デベロッパーツール」の基本路線
IE 限定 : 実行済みのページのソースをクリップボードにコピーする
Firefox の Firebug で、実行済みのページのソースをクリップボードにコピーする




posted by lightbox at 2014-08-27 23:03 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年08月22日


Auto-Translate(Chrome 拡張) が、Chromeウェブストアから削除されていました

Auto-Translateが、Chromeウェブストアから削除されていました
※ 以下を参照して、代替にinstant translate が使えると思います。
Auto-Translateがウェブストアから削除。代替にinstant translate - NAVER まとめ

オプションの最後に、『統計情報を収集する事に同意する』というような事が書かれているので、気になるのであれば disable にするといいと思います。


▼ 以下は以前の記事内容
(Auto-Translateのオプションについて)

たいした実害はありませんが、良く解らない広告のようなものが、画像の下に表示される事があります。



オプションで、このチェックを外して下さい。

これは、Superfish と言って、海外対象の画像から価格を比較する機能らしいのですが、日本では全く意味がありません。無意味に画像の下に現れる事が多いです。これは、自分のブラウザだけがなるものですが、うっかりそのサイトの新しい広告だと思ってしまう場合があります。

インストール時に以下のような表示がされたはずです。





posted by lightbox at 2014-08-22 15:09 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年06月28日


Google Chrome : デベロッパーツールの table コマンドで、オプジェクトのプロパティをテーブル表示して Excel に貼り付ける

デベロッパーツールのコンソールだけで動く Command Line API というものがあります。

※ table コマンドは、console.table メソッドとしても利用できるので、ページ内からも実行できます
※ ここで使用する処理は、Firebug では動作しました。


(注意) ページに同名のメソッドがあると、そちらが優先されます。jQuery があると、$ は使用できないので注意して下さい。( 逆にその場合は jQuery を使えばいいのですが )

$0 - $4 は、Elemnts タブで選択したオブジェクトを履歴として記憶しています。( $0 が最新 )
$_ は、直前の処理結果の内容が記憶されています。
  1. $_
  2. $0 - $4
  3. $(selector)
  4. $$(selector)
  5. $x(path)
  6. clear()
  7. copy(object)
  8. debug(function)
  9. dir(object)
  10. dirxml(object)
  11. inspect(object/function)
  12. getEventListeners(object)
  13. keys(object)
  14. monitor(function)
  15. monitorEvents(object[, events])
  16. profile([name])
  17. profileEnd([name])
  18. table(data[, columns])
  19. undebug(function)
  20. unmonitor(function)
  21. unmonitorEvents(object[, events])
  22. values(object)
このコマンドは、オブジェクトのプロパティの一覧を縦の左端に置いて、列の内容は全てのプロバティにある全てのプロパティになるので、名前が同じプロバティは同じ列に表示されますが、無い部分は未定義として表示されるため、表示前に適当な構造にしておく必要があります。

▼ 単にオブジェクトのコレクションだと収拾がつかない



そこで、以下のようにコマンドラインで実行すると、意図した一覧を取得する事ができます。
var a = {};var b = $$("img"); for( i=0; i< b.length; i++ ){ a[i] = {}; a[i]["src"] = b[i].src; };table(a)
このコマンドをフリーの画像素材を提供している『足成』で実行してみました。



この結果をブラウザでドラッグして選択してコピーして Excel にテーブル形式で貼り付ける事ができます。



※ 列は、必要に応じて増やす事が可能です。



一行で記述しなくても、普通に以下のように記述して貼り付けて実行する事もできます。
var a = {};
var b = $$("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
}
table(a)

$$ は、document.querySelectorAll() と同じであり、jQuery にも無いので使用しています。for の 一般的なループを使用しているのは、for in だとプロパティの一覧になる為、length 等のコレクションそのもののプロパティも対象になるので使用していません。

jQuery が使えるのであれば、以下のようにも記述できます
var a = {};
$("img").each( function(idx){
	a[idx] = {};
	a[idx]["src"] = this.src;
	a[idx]["幅"] = this.width;
});
table(a);

コンソール側では無く、デバッグの為にページのスクリプトとして記述する場合は以下のようになります。
(画像の場合は全て読み込まれていない場合は正しいサイズは取得できていない場合があります)
var a = {};
var b = document.querySelectorAll("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
	a[i]["高さ"] = b[i].height;
}
console.table(a)




posted by lightbox at 2014-06-28 13:44 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年02月02日


Google Chrome と Firefox : JavaScript : Pointer Lock API


詳細は、developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock( 但し、これは Firefox 用のドキュメントで、フルスクリーン API と同時に使用しています )

単に実行したいだけなら、以下のようなコードだけです。
<script type="text/javascript">
function pointerLock() {
document.body.requestPointerLock
	= document.body.requestPointerLock
	|| document.body.mozRequestPointerLock
	|| document.body.webkitRequestPointerLock;
	document.body.requestPointerLock();
}
</script>
<input type="button" value="実行" onclick='pointerLock()'>
関連する記事

IE11 : 画像のフルスクリーン API



posted by lightbox at 2014-02-02 18:48 | Google Chrome | このブログの読者になる | 更新情報をチェックする

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月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 | このブログの読者になる | 更新情報をチェックする

2013年09月02日


今、Google Chrome で WEBアプリをテストするには、デベロッパーツールを開いておいてキャッシュを無効にする必要があるのをご存知ですか?

つい最近までこんな必要は無かったのですが・・・



▼ デベロッパーツールの右下隅から開きます


どうも、最近の更新で変わったような気がします( そういえば、alert や ログイン用のメッセージボックスがページの先頭で固定位置に表示されています )

キャッシュ関連の http ヘッダをきちんと送っていても、どんなアルゴリズムなのかキャッシュをクリアしないとうまくいかないです。



posted by lightbox at 2013-09-02 20:17 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2013年07月24日


Google Chrome を強制終了すると、後で『開いていたページを復元』できますが、ログイン状態も復元してしまいます。



しごく当たり前の事ですが、自宅以外のコンピュータでどこかのサービースへログインしたままシャットダウンまたはログオフしてしまうと、次に Google Chrome を実行した人がそのサービスへのログイン状態のまま作業ができてしまいます。



posted by lightbox at 2013-07-24 09:10 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2013年07月12日


Google Chrome 拡張の『instant translate』という翻訳機能の翻訳ウインドウを大きくする

バグもある上に、元々の大きさが小さすぎて長い文章の翻訳結果がとても読みにくいので CSS を変更して大きくしました。

instant translate



▼ 対象ファイル
C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions\ihmgiclibbndffejedjimfjmfoabpcke\1.8.1_0\resources\styles\ui_components\tooltip\helpSelected.css
/* Local ID ? mndocdiojkckhpnhpeminpalidafeink */
/* Web Store ID ? ihmgiclibbndffejedjimfjmfoabpcke */

.TnITTtw-help-selected-wrap {
  border: 1px solid #C7C6C2;
  box-shadow: 0 0 10px rgba(43, 43, 43, 0.325);
  border-radius: 4px;
  width: 431px
}

  .TnITTtw-help-inside-layout {
    height: 433px;
    background: #F5F5F5;
    border-radius: 3px
  }

    .TnITTtw-left-particle {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      box-shadow: inset 0 1px 0 white;
      color: #4E4E4E;
      text-shadow: 0 1px 0 white;
      width: 394px;
      display: inline-block;
      border-right: 1px solid #D9D9D9
    }

      .TnITTtw-content-layout {
        text-align: left;
        margin: 10px 15px
      }

        .TnITTtw-variant-bunch-wrap {

        }

          .TnITTtw-variant-bunch-wrap .inside-layout {

          }

            .TnITTtw-main-variant-wrap {

            }

              .TnITTtw-main-variant {
                font-weight: 700;
                font-size: 15px;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.775);
                display: inline-block;
                vertical-align: top;
                color: #2B2B2B
              }

            .TnITTtw-variants-by-pos {
              
            }

              .TnITTtw-TnITTtw-variant-row {
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.775)
              }

                .TnITTtw-v-pos {
                  font-weight: 700;
                  margin-top: 10px;
                  font-size: 12px;
                  color: #545454
                }

                  .TnITTtw-v-pos:first-child {
                    margin-top: 8px
                  }

                .TnITTtw-v-closest-wrap {
                  font-size: 13px;
                  color: #4E4E4E
                }

                  .TnITTtw-v-item {
                    display: inline-block
                  }

        .TnITTtw-listen-disabled {
          opacity: 0.475;
          cursor: default
        }

    .TnITTtw-right-particle {
      background: rgba(255, 255, 255, 0.125);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      display: inline-block;
      width: 36px;
      height: 433px;
      vertical-align: top;
      box-shadow: inset 1px 0 3px rgba(43, 43, 43, 0.05), inset 0 1px 0 #F5F5F5
    }

      .TnITTtw-sidebar {

      }

        .TnITTtw-sbutton {
          position: absolute;
          -webkit-user-select: none;
          cursor: pointer
        }

        .TnITTtw-listen-button {
          width: 16px;
          height: 17px;
          background: url(chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/resources/images/sprites/sprite.png);
          background-position: -54px 153px;
          margin: 10px 0 0 10px
        }

          .TnITTtw-listen-button:active, .TnITTtw-listen-disabled {
            background-position: -54px 136px
          }

/* ========== */
/* Scrollbars */

#TnITTtw-trVisibleLayout {
  position: relative !important;
  overflow: hidden;
  height: 433px;
  width: 100%
}

#TnITTtw-tr-scrollbar {
  position: absolute;
  display: block;
  width: 9px; 
  height: 435px; 
  font-size: 1px
}

#TnITTtw-track { 
  position: absolute;
  left: 385px;
  top: -434px;
  width: 11px;
  height: 429px;
  background: transparent
}

#TnITTtw-dragBar {
  position: absolute; 
  left: 1px;
  top: 1px;
  width: 5px; 
  height: 10px;
  background: rgba(43, 43, 43, 0.475);
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 1px 0 #FFF
}

  #TnITTtw-dragBar:hover, #TnITTtw-dragBar:active {
    background: rgba(43, 43, 43, 0.775)
  } 

#TnITTtw-scrollbar, #TnITTtw-track, #TnITTtw-dragBar {
  -webkit-user-select: none
}

.TnITTtw-arrow {
  display: none;
  width: 12px;
  height: 6px;
  background: url(chrome-extension://ihmgiclibbndffejedjimfjmfoabpcke/resources/images/sprites/sprite.png);
  position: relative
}

.TnITTtw-top-arrow {
  background-position: -108px 148px;
  bottom: -1px
}

.TnITTtw-bottom-arrow {
  background-position: -108px 154px;
  top: -1px
}


posted by lightbox at 2013-07-12 00:10 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2013年02月15日


Chrome リモート デスクトップ。出先から自宅、出先から仕事場へのアクセスする為の環境と注意事項( 出先は拡張のみ )

『Chrome リモート デスクトップ』は、インターネットを使って PC に対してリモートアクセスするという、とんでも無いものですが、インストールした人のアカウントと、PIN の設定による専用パスワードで二重に守られます。

性能は思った以上にすぐれていました。十分に実用に耐えるので、今までこのようなアプリケーションを知らない人でもストレス無く自然に使えます。

ただ、設定というかインストール時に誤解を生みそうな手順があるので、以降の内容でそれを明確にします。解らない人は全部インストールしてしまえば良いのですが、常駐のプログラムが増えてしまいますし、知らずに出先で他人の PC にインストールしてしまったらえらい事です。

インストール

Chrome リモート デスクトップ


拡張として追加した時点では、クライアント側のソフトウェア( 操作する側 )のみのインストールとなります。


( 新しいタブを表示するとこのような表示になります )

【重要】
設定で、 PC をリモートでアクセスするようにした時にのみ サーバーアプリケーションが≪別途≫インストールされます。

▼ 最初の起動時


▼ 拡張アプリの承認


既に【他の PC】にサーバーアプリまでをインストール済であれば以下のように表示されます。



つまり、全ての PC にサーバー側のアプリをインストールする必要は無く、以降の処理は必要ありません。( 必要なのは、操作される側のみです )

▼ サーバーアプリのインストール画面


▼ サーバーアプリのインストール実行


この後、『リモート接続を有効にする』をクリックすると、PIN の入力になって、6ケタ以上の数字を入力するとインストール開始されてサービスに登録されて以降ずっとそのサービスは動き続けます。


▼ 『プログラムと機能』の Chrome リモート デスクトップ


このソフトウェア(サーバーアプリ)は、『プログラムと機能』からアンスンストールする事のできる一般的なソフトウェアです。しかし、一旦インストールすると『サービス』として常時実行されるので注意して下さい。たとえ、Google Chrome の拡張を削除しても『サービス』はそのまま実行し続けます。

必要無いと思った場合は、『プログラムと機能』からアンインストールする必要があります。

▼ サービスで実行中の Chrome リモート デスクトップ


▼ プロセスで実行中の Chrome リモート デスクトップ

( 二つのプロセスが存在します )


リモート処理

操作するだけなら、UltraVNC や Windows のリモートデスクトップと比べて遜色ありません。同じ部屋にある WindowsXP にサーバー側のアプリもインストールして ADSL で操作してみましたが、10年前の RealVNC より高速で綺麗に表示されます。当然インターネットのトラフィックに依存して固まったようになる事はありますが、画面が乱れるような事はありません。

※ サーバー側の PC が XP なのか、ドラッグ時のカーソルが黒い四角になりましたが・・・

WindowsXP をリモートで操作した画面


下部に表示されている Disconnect ボタンは、サーバー側で表示されているものです。こちら側からの特殊な操作は、上部にメニューがあり、『Ctrl + Alt + Del』『PrintScreen』があります。
( こちら側からのリモートに対するクリップボードへの転送操作は普通に動作しますが、あちらからこちらへのクリップボード転送はできないようです )

また、表示は基本は Google Chrome 内なので、Chrome を小さくすれば小さくなります。さらに、Chrome は最大化機能があるので、メニューより最大化が可能になっています。


注意事項

日本語の入力の変換キーが、スペースのみとなっています( 変換キーは動作しません )
日本語入力は、一般的な操作は特に問題無く動くようですが、Windows としての特殊なキー操作は動作しない事が多いと思います。

データ交換をしたい場合は、現状では SkyDrive のリモートドライブを使うか Google を含むオンラインストレージの共有機能を使うといいでしょう。

ごく自然に簡単に、自宅のHDにアクセスする SkyDrive

Google の正式ヘルプ

Chrome リモート デスクトップ アプリ - Chrome ヘルプ

解りづらい記述ではありますが、一通りの解説がされています。

▼ 報告されている問題( HELP より )
❶ 共有しているパソコンに、指定されたアクセス コードを使って接続できず、長時間にわたって [アクセス コードを確認しています] というメッセージが表示される。

❷ リモート共有セッション中に速度が低下するか、パフォーマンスが安定しない。

❸ 共有しているパソコンの音声が聞こえない。

❹ Mac OS X 10.5(Leopard)、Linux、または Chrome OS を搭載したパソコンでリモート アクセスを設定できない。

❺ Chrome リモート デスクトップをホストからアンインストールしたが、その後もホストのリストでオフラインとして表示される。

❻ Google アカウントのパスワードを変更したら、リモートのパソコンにアクセスできなくなった。

❼ リモートのパソコンに接続しているときに、特定のキーボード ショートカット(Ctrl+W、Ctrl+N など)を使用できない。

❽ 認証プロキシを利用している場合に、リモート接続用にパソコンを設定できない。

❾ Windows パソコンでリモート接続を有効にしようとすると、「リモート アクセス サービスを開始できませんでした」というエラー メッセージが表示される。
対応状況については、HELP をご覧下さい
posted by lightbox at 2013-02-15 22:21 | Google Chrome | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり