Google Chrome + Windows10 + PDF ビューア + 非埋込みフォント で正しいフォントが表示されない

Windows7 の Google Chrome では正しく表示される事を確認したのですが、一般的( Windows10 ) には、非埋込みフォントの場合 Google Chrome が勝手にフォントを選択するという現象が一年前くらいに散見されます。結局その回避方法としては、HTML5 で表示しなおすという拡張機能で対応していました。(MS 明朝指定してゴシックになったので気が付きました / TCPDF で出力して Acrobat Reader や Edge では正しく表示されました)

PDF Viewer

確かに、GET メソッド( 通常のリンク )で表示すると、Google Chrome 拡張の URL にリダイレクトされて正しく表示されるのですが、POST メソッドでは対応していませんでした。また、デフォルトでは制限があるので『詳細』のページで『シークレット モードでの実行を許可する』と『ファイルの URL へのアクセスを許可する』を ON にする必要があります

注意 : 印刷が PDF 経由では無いので厳密には正しく印刷されませんでした( 線が重なった部分でPDF は同じ場所なら単純に一本ですが、HTML5 では重なった部分が微妙で、文字も若干アンチエイリアスされているようで小さい文字だとボケていました )






拡張機能そのもののオプション

タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する

背景がスクロール

寒くなって来たら
背景がスクロール

クリスマスも近いですね


▼ 背景画像 : 幅 378, 高さ 223


概要

⭐ 画像はシームレスです。斜めの角度は画像サイズに依存します。
⭐ 100% の値をマイナスにすれば舞い上がります。
⭐ 本体の position: relative; は、after で postion:absolute を設定するのに必要です。
      ( div を一つ外側に追加してそこに設定してもいいとは思います )
⭐ keyframes の終了(100%) は、画像のサイズである必要があります。
⭐ 速さは、8s の 8 を変更します。
⭐ after の横の位置合わせは、本体基準で right です。

<style>
.scroll_background {
	margin-top: 50px;
	padding: 10px;
	width:400px;
	background: url("https://lh3.googleusercontent.com/-GU0B2rJdhwU/W_dvZv5LSgI/AAAAAAAAtgM/7n7s1T6JVPkX-BaEKhui0ORu49bLivmxQCHMYBhgL/s378/pat2.jpg");
	animation: scroll_snow 8s linear infinite;
	position: relative;	/* after 用 */
}
@keyframes scroll_snow {
	0% { background-position: 0px 0px; }
	100% { background-position: 378px 223px; }
}

.scroll_background::after {
	background: url(https://pro-300.sakura.ne.jp/white/wp-content/themes/pro-1/cr2.png) left center no-repeat;
	background-size: 150px auto;
	content: '';
	position: absolute;
	right:0px;
	top: -40px;
	width: 150px;
	height: 70px;
}
</style>

<pre>
<div class="scroll_background">背景がスクロール</div>

寒くなって来たら
<div class="scroll_background">背景がスクロール</div>

クリスマスも近いですね
</pre>

Excel でガントチャートを作成するテンプレート : 開始日と日数(工数)を入力

ダウンロード
(マクロ使用分:スケジュール_ガントチャート_カレンダー.xlsm と 非使用分:スケジュール_ガントチャート.xlsx)

WBSガントチャートをExcelで作ってみた というページからダウンロードできる Excel はとても使いやすく( 2か月の表示  )単純にできていました。( 2013年08月30日 で更新が止まっています )

さっそく使ってみましたが、少し問題点があったので『修正』と『追加仕様』を行いました。

1) Workday 関数の使い方が、金曜で日数が終わった場合に土日を含んだ完了日になっていたので修正
2) 日付の入力が、手入力なので VBA の Form + DTPicker でカレンダー入力を可能にした



1) の修正は以下のページを参考にしました
Excel2010：土日なら前の平日を返す（WORKDAY関数・WEEKDAY関数 ）

2) の追加仕様は、Form と DTPicker を使用しましたが、VBA におけるイベント処理を詳細にコントロールする術が無く、Form で何をしても選択されている日付をセルに転送するようになっています。

ただ、対象列以外でカレンダーボタンをクリックした場合はエラーにしています。

また、Formを開いた時に DTPicker を開かせる為に SendKeys を使用しているのですが、Numlock が OFF になるバグがあったので、以下のページのコードを利用して対処しました。
VBAの「Sendkeys」についての質問です。


UserForm1

Private Sub DTPicker1_CloseUp()

    ActiveCell.Value = DTPicker1.Value
    
    Unload UserForm1

End Sub

Private Sub UserForm_Initialize()
    
    Call saveNumLock
    
    SendKeys ("%{DOWN}")
    
    Call numLockCheck

End Sub

Module1

Private Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, _
ByVal bScan As Byte, _
ByVal dwFlags As Long, _
ByVal dwExtraInfo As Long)

Private Declare Function GetKeyboardState Lib "user32" _
(pbKeyState As Byte) As Long

Const VK_NUMLOCK = &H90 '「NumLock」キー
Const KEYEVENTF_EXTENDEDKEY = &H1 'キーを押す
Const KEYEVENTF_KEYUP = &H2 'キーを放す

Dim NumLockState As Boolean
Dim keys(0 To 255) As Byte

Sub カレンダー参照_Click()

    Dim no
    
    no = ActiveCell.Column
    If no <> 5 Then
    
        MsgBox ("開始日のセルを選択してください")
        Exit Sub
    End If


    UserForm1.Show
    
End Sub

Sub saveNumLock()
    
    GetKeyboardState keys(0)
    NumLockState = keys(VK_NUMLOCK)

End Sub

Sub numLockCheck()

  '「NumLock」キーがオンだった場合はオンにする。
  If NumLockState Then
    'キーを押す
    keybd_event VK_NUMLOCK, &H45, KEYEVENTF_EXTENDEDKEY Or 0, 0
    'キーを放す
    keybd_event VK_NUMLOCK, &H45, KEYEVENTF_EXTENDEDKEY Or KEYEVENTF_KEYUP, 0
  End If
End Sub

使用方法
開始と休日設定に、開始日と休日を設定します(土曜と日曜は休日なのでそれ以外の非稼働日です)

ガントチャートの開始日に日付を入力して、工数に日数を入力します

日付は、月から入力すると現在の年になります

現在以外の年を使用する場合は、18/12/1 のように年の下２桁を最初に入力します

カレンダーボタンで日付を参照できます

カレンダーはただ閉じても日付は選択されます

WebRTC による WEBカメラ表示( 2018/11/15 ) : iPhone + Safari は iOS11 のみで確認

過去何度も繰り返して来た『WebRTC による WEBカメラ表示』ですが、いろいろ変遷ありつつこのような形で現在動作確認しています。Chrome と Edge で確認したところによると、旧 API でも動作しています。

デモページ

▼ MDN 資料
MediaDevices - Web API インターフェイス | MDN
Taking still photos with WebRTC - Web APIs | MDN

今回、iPhone の iOS11 で 動作確認したところ、旧 API 側で動作したようです。しかし、iOS12 では Safari 側でカメラとマイクを利用すると設定した上で、実行時に許可する必要があるのですが( iOS11 未確認 : PCでは基本的に皆そうです )、うまく動作せず検証は保留となっています( デバイス所持者が自分以外なので )

※ 共通事項 : インターネット上では SSL である事
※ WebRTC が使えない場合は動画で代替え

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="UTF-8">
<link rel="shortcut icon" href="https://winofsql.jp/WinOfSql.ico">

<title>WEBカメラの表示</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<style>
@media screen and ( min-width:480px ) {
	#content {
		padding: 20px;
	}
	#camera {
		width: 480px;
		height: 360px;
	}
}
@media screen and ( max-width:479px ) {
	#content {
		padding: 0px;
	}
	#camera {
		width: 100%;
	}
}

</style>
</head>
<body>
<div id="content">

	<video id="camera" autoplay></video>
	<a class="btn btn-secondary btn-sm float-right ml-4"
		href=".">フォルダ</a>

	<a class="btn btn-secondary btn-sm float-right ml-4"
		onclick="$('#camera').css({'width':'100%', 'height':'100%'})"
		href="#">100%</a>

	<a class="btn btn-secondary btn-sm float-right"
		onclick="$('#camera').css({'width':'auto', 'height':'auto'})"
		href="#">auto</a>

</div>

<script>
// *************************************
// 簡易スマホチェック
// *************************************
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options={"closeButton":false,"debug":false,"newestOnTop":false,"progressBar":false,"positionClass":"toast-bottom-center","preventDuplicates":false,"onclick":null,"showDuration":"300","hideDuration":"1000","timeOut":"3000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"};
if ( !$.isMobile ) {
	toastr.options.positionClass = "toast-top-center";
}

// *************************************
// localhost 以外では SSL で処理する
// *************************************
if ( location.host != "localhost" ) {
	if ( location.protocol == "http:" ) {
		location.protocol = "https:"
	}
}

// *************************************
// カメラ参照
// *************************************
// カメラ用 video 要素(DOM オブジェクト)
var camera;
camera = $("#camera").get(0);

// *************************************
// 最新 API
// *************************************
if ( navigator.mediaDevices ) {

	// カメラ表示
	navigator.mediaDevices.getUserMedia({video: true})
	.then(function(stream){
		// カメラのストリームを表示
		camera.srcObject = stream;
	})
	.catch(function(err){
		// ブラウザで使用を拒否した場合等( 動画で代替 )
		errorVideo();
	});
}
// *************************************
// 旧 API
// *************************************
else {
	// 旧 WebRTCチェック用
	var api = [
		"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
	]
	$.each(api,function(idx){
		if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
			return false;
		}
	});
	// WebRTC 使用可能
	if ( navigator.getUserMedia ) {
		// スマホでは、幅いっぱいに使う
		if ( $.isMobile ) {
			$("#camera").css("width","100%");
		}
		// カメラの表示
		navigator.getUserMedia({video: true}, 
			function(stream) {
				// カメラのストリームを表示
				camera.srcObject = stream;
				// ▼ 旧実装
				// camera.src = window.URL.createObjectURL(stream);
			},
			function(err){
				// ブラウザで使用を拒否した場合等( 動画で代替 )
				errorVideo();
			}
		);	
	}
	else {
		// 動画で代替
		errorVideo();
	}
}

// *************************************
// 動画で代替
// *************************************
function errorVideo() {

	toastr.error( "WebRTC を使用できません");

	$("#camera")
	.prop({ 
		"loop" : true, "muted" : true, "controls" : true,
		"src" : "TriggerRally.mp4"
	})
	.css({"border": "solid 1px #000"});

}
</script>

</body>
</html>

参考

Apple Safari の WebRTC について
WebRTC で URL.createObjectURLはまもなく使えなくなる