SQLの窓

2018年01月14日


Google Chrome のみ動作する Data URLs を使用した『HTML/テキスト』変換アプリ

あれです。data:text/html,文字列 という形式でアプリケーションを書いてみようと思ったんですが、結局 Google Chroem でしか動かなかったという残念なアプリです。ですが、将来何かする時の参考データにはなるだろうと思って記録します。

使用する場合は、コピーしてアドレスバーに貼り付けるだけです。
data:text/html,<label for="check">div/textarea toggle</label> <input id="check" type="checkbox" onchange="if(this.checked){document.getElementById('edit').style.display='block';document.getElementById('div').style.display='none';document.getElementById('edit').value=document.getElementById('div').innerHTML;}else{document.getElementById('edit').style.display='none';document.getElementById('div').style.display='block';document.getElementById('div').innerHTML=document.getElementById('edit').value;}"><div id="div" contenteditable style="border:1px solid #ccc;height:calc(100% - 50px)"></div><textarea id="edit" style="display:none;width:100%;height:calc(100% - 50px);background-color:#f0f0f0"></textarea>

常に使用したい場合は、ブークマークバーにドラッグして名称を変更すれば良いです。

contenteditable 属性を div に適用しているので、他でコピーした HTML がそのままリアルに再現され、toggle すると、textarea に切り替わって転送されます。textarea で記述した内容はそのまま DIV 側にも反映されます。整形はできないので、オンラインツール等を使用するといいと思います。

サイズを calc 使って常に画面に収まるようにしているので、プロジェクタとかで Chrome 内のページとして拡大するといろんな使い方があると思います

▼ DIV に貼り付けて


▼ 切り替えると HTML




タグ:CHROME
posted by lightbox at 2018-01-14 00:49 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2018年01月11日


Google Chrome のエディタ機能を使用してローカルにある HTML と JavaScript のソースでブレークポイントを使用したデバッグを行う手順

フォルダとファイルを作成



ファイルの作成や内容の保存も Google Chrome からできます(右クリックで表示されるポップアップメニューにあります)が、まずはエクスプローラでデバッグ実行に必要なファイルを用意します。

この際、フォルダ名はスペースや日本語は使ってはいけません(動作しませんでした/また親フォルダも同様だとは思われますが、そこまで確認はしていません)。そして、ファイル内のキャラクタセットは UTF-8 限定です。

test.html と test.js
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Chrome エディタ</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">

<script src="test.js"></script>

</head>
<body>

<ol>
	<li><a href="https://www.google.co.jp/" target="_blank">Google</a></li>
	<li><a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a></li>
	<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
</ol>

</body>
</html>


$(function(){

	$("a").each(function(){
		console.log($(this).prop("href"));
	});

});


フォルダを Chrome に登録する



ドラッグ&ドロップするか、Add folder to workspace で表示されるフォルダ選択ダイアログで選択します。



アクセスを許可する



Chrome の Filesystem タブに登録されます

ファイルを選択してタブを開く



この時点で普通のエディタです。バイナリファイルでも普通にそのまま開くので、ファイルの先頭部分の文字列ででファイルの種類を確認する事もできます。

HTML ファイル以外だとブレークポイントを使用できませんが、JavaScript のテキストがファイル内にあれば、その部分を選択して、CTRL+SHIFT+E(右クリックからのメニューでも実行機能があります/Evaluate in console) でその場で実行できます。

その方法だと、F12 で console で実行のように、現在開いているページの環境下で JavaScript を実行する事ができます。

ただ、ここではブラウザに実際に表示できる HTML 環境を基盤としてブレークポイントを使用しながら実行する手順を提示しています。

エディタで表示している HTML をブラウザで表示する



アドレスをクリップボードにコピーして、アドレスバーに貼り付けて表示すると、ファイルのアイコンの右下に緑色のマークが表示され、同期された事が確認されます



PAUSE アイコンをクリックする



押せる状態になっているのでクリックすると、灰色になります。この状態でページを再表示します。



そうすると、最初のスクリプト位置で停止します(この場合は jQuery の中です)。ここであわてずに、test.js のタブを表示してブレークポイントを設定します。



デバッグを開始する



ここからは、通常通りです。一番重要なのは、ページをロードしてPAUSE アイコンをクリックしてからブレークポイントを設定するという手順です。





通常コンソール用メモがわりに使う

無理にブレークポイントにこだわらなくても、選択した部分を実行する事ができるので、ファイルも普通のテキストファイルで問題ないし、Chrome から新規でファイルも作成できます。キャラクタセットが UTF-8 であれば、拡張子がなんであっても問題無いてすし、http(s) で表示したページの環境でをその選択した文字列を実行する事ができます。

もちろん通常のエディタとして行番号も表示されて、CTRL+G  で行ジャンプ用のウインドウも表示されます。左下の {} アイコンで拡張子に見合った整形も行いますし、タブキーも行を複数選択して機能します。



同じ選択で CTRL+SHIFT+E で繰り返し実行したい場合は、開いているファイルのタブをクリックしてからキー入力します。

右クリックからの実行でもかまいません






posted by lightbox at 2018-01-11 21:35 | Google Chrome | このブログの読者になる | 更新情報をチェックする

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 | 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 %>
この記述は、以下の場所で使用します
container 終わり

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

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