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月13日


jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック

このサンプルは、css 用ですが、script でも同じです。bootstrap を組み込むと、たいていなんらかの変化が出るので確認に使用してます。

特定の要素の下に追加、削除を想定しているので id を持つ要素だともっと簡単ですが、ここではそのページの最後の link 要素を使用しています > 『$("link").eq($("link").length-1)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function(){

	// Bootstrap 削除
	$("#btn-remove").on("click", function(){

		if ( $("#bootstrap").length != 0 ) {
			$("#bootstrap").remove();
		}

	});

	// Bootstrap 適用
	$("#btn-apply").on("click", function(){

		if ( $("#bootstrap").length == 0 ) {

			var link = $("<link id='bootstrap'>");
			link.prop({
				"rel": "stylesheet",
				"href": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"
			});

			// 最後の link の後に追加
			var target = $("link").eq($("link").length-1);
			link.insertAfter(target);
		}

	});

});
</script>

<div>
	<p>
		<input type="button" id="btn-remove" value="Bootstrap 削除">
		<input type="button" id="btn-apply" value="Bootstrap 適用">
	</p>
</div>


タグ:jquery
posted by lightbox at 2018-01-13 22:46 | jQuery | このブログの読者になる | 更新情報をチェックする

Windows のエクスプローラのオプションダイアログを表示する rundll32.exe の引数

もともと Windows7 で使ってましたが、Windows10 のほうが表示するのが面倒なので、表示できるかを確認してみました

rundll32 shell32.dll,Options_RunDLL 0


以下が一番大事ですが、最初に一回設定すればその後使う事は殆ど無いと思います。

rundll32 shell32.dll,Options_RunDLL 7


一番重要なのは以下の3つの設定。要するに、『そこにある情報は全て表示する』事が基本ですね

(非一般向け)
このスクロール全体の画像は、Screenpresso で作成しています。
( インストールせずに実行できます )

rundll32 shell32.dll,Options_RunDLL 2
posted by lightbox at 2018-01-13 21:00 | Windows | このブログの読者になる | 更新情報をチェックする

『Windows 10、バージョン 1709 の機能更新プログラム』の記録

普段は Windows7 をメインに仕事しているもので、最新の状況の確認や Windows10 にしかインストールしていない使用頻度の低いソフトを使う時だけ立ち上げるので、この更新が遅くなったのは仕方無いのですが、自分の中ではトラブルだと思ってます。> 『Windows 10、バージョン 1709 の機能更新』

結構不愉快です。

最終的にはこんな置き土産置いていってくれましたし

この内容は、SystemPropertiesAdvanced.exe を実行して『起動と回復』です。


真ん中は当然動かないです。削除方法はあるはずですが、Microsoft 信用できないので当分放置します。

更新に、ディスク容量と時間がかかる


ファイル名を指定して実行から ms-settings:windowsupdate-history で上記画面が表示されます
( ショートカットに登録してもいいです )

参考記事

Windows 10のショートカット「ms-settings:URI」は使い始めると止められない

ちなみに、Windows7 では 『control.exe /name Microsoft.WindowsUpdate /page pageUpdateHistory
ここに来るまで長かったです。最初えらい長い時間をかけてダウンロードしてました。あっという間に10G ほど無くなって、他への影響が心配なのでさっさと済まして先を急ごうと思ったら、再起動後が相当長かったので一度強制終了しました。とにかく何が起こってるのかとても解りにくい印象で、一晩放置するのが一番確実のような気がします。 しかし、この更新の本来の時期では、それぞれの環境によってはこの更新も失敗するような記事がありました。 これらはウイルス対策ソフトが原因のようでしたが、あまりいい気がしない。とにかく勝手にディスク容量を10G 以上持っていかないでもらいたい。
Windows7 では、Windowsキー + E で PC 選択になって開いたんですが、Windows10 では エクスプローラが開くだけなので、PC を選択して開きたい場合は

Explorer /e,/select,PC
または
explorer /n,::{20D04FE0-3AEA-1069-A2D8-08002B30309D}

なので、ショートカット作成して Ctrl + Shift + E で登録すればいいと思います
これは更新完了した状態ですが、状況はこんな感じです
Windows Update 関連を削除したい場合は、管理者権限で最初から起動したほうが速いので、検索で clean と入れて CTRL+SHIFT+Enter
参考記事 Windows 10のディスク容量肥大を招く「Windows.old」はすぐ削除すべき? しかも、Windows7 メインのデュアルブートだったのに、Windows10 優先になって、選択するリストが表示される時間が 0 に変更されて放置されました。再起動した後確実に Windows10 にしたいという意図は解りますが、ユーザにその旨を伝えないのは最近の Microsoft のやり方というか... そして、ディスク クリーンアップした結果が以下です。やっと元に近い状態になりましたが、1日潰れました。 もし、このまま容量が復帰しなかった場合は、C:\Windows\SoftwareDistribution\Download 内のデータを削除する覚悟はできていたのですが、151M 程度しか残っていませんでした。 この、Download フォルダ内の削除は、公式には何の保証もありませんが、システム的に言えばどこかにログがあって、本体をある一定のルールで保持しているものだと思われます。なので、最後の手段としては有効だとは考えています。 ただ、その場合は Download フォルダそのものを削除するのは無理がありますので注意して下さい、そして、実際問題 Windows Update サービスを止めた状態で削除するという方法が必要です(あちらこちらで散見されました) 以下は、Google 翻訳経由のサイトですが、Windows Update そのものに問題が出た場合のリセット方法が書かれています。その中でサービスの停止と再起動に触れられているので参考になると思います。 Windows 10で 'SoftwareDistribution'フォルダをクリアして、アップデートをもう一度行う方法 コマンドプロンプトの管理者権限での起動について 上記参考サイト内で、『検索』からコマンドプロンプト とありますが、翻訳前は Search for Command Prompt です。いずれにしても cmd と入力すれば事足ります。そのうえで右クリックすればいいでしょう。 なんですが、cmd と入力後に CTRL+SHIFT+Enter でもいいのは有名ですね。後、普通のコマンドプロンプトを実行後、タスクバーのコマンドプロンプトを CTRL+SHIFT キー押しながらクリックでもいいですね。
タグ:windows10
posted by lightbox at 2018-01-13 19:11 | Windows | このブログの読者になる | 更新情報をチェックする

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

2018年01月09日


ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)

このブログにも設置しました。スクロールすると、文字部分が白く、影の付いた ▲ ボタンがページの右下に表示されます。

『ページの先頭から 200px までは、スクロールボタンを表示しない』という処理の部分にのみ jQuery を使用しています。常に表示しておくのならば CSS のみで問題ありません( その場合は、A 要素に display:none は必要ありません )

CSS
#scroll_top {
	position: fixed;
	text-decoration: none;
	font-size: 40px;
	color: rgba(255,255,255,0.85);
	text-shadow: 1px 1px 2px #656a6f;
	right: 0.5%;
	bottom: 5rem;

}


A 要素

これは、</body> の直前に記述しています。
<a href="javascript:void(0);" id="scroll_top" onclick="window.scroll(0,0);" style="display:none;">▲</a>
※ CSS の記述を A 要素に全てインラインスタイルとして記述してもいいです。

jQuery 部分
$(function(){

	$(window).on("scroll",function(){
		var scroll = $("html").scrollTop();
		if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
			$("#scroll_top").css("display","none");
		}
		if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
			$("#scroll_top").css("display","inline");
		}
	});

});

この jQuery では、A 要素のインラインスタイルである、display プロパティをフラグとして使用し、表示したり消したりするのは最低限の回数になるようにしています。なので、display:none は必ず インラインスタイル側で指定する必要があります。


posted by lightbox at 2018-01-09 20:19 | jQuery | このブログの読者になる | 更新情報をチェックする
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 終わり