SQLの窓

2018年11月30日


TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定


2018/11/30 時点で 6.2.26
2016/01/13 時点で 6_2_12
2014/05/22 時点で 6_0_080
さくらサーバでは、php.ini で memory_limit = 256M で動作しています(日本語フォントが大きくなっていました )
2013/09/11 時点で 6_0_025

実際に一番面倒なのはフォントの用意ですが、とにかく動かない事には話にならないので。

テスト環境

❶ Windows10 64ビット + AN HTTPDTCPDF

テスト内容
TCPDF-master.zip を解凍すると、TCPDF-master\examples というフォルダがあり、そこにサンプルが沢山ありますが、それを他のフォルダでも同様に動作させます。
手順 ❶ example フォルダを全て 任意のフォルダにコピー( アプリの実行環境になります ) ❷ そのフォルダを AN HTTPD で、PHP が動作するようにする ( テストした php は、PHP 5.6.35 ) ❸ tcpdf_include.php を以下のように書き換える ( ダウンロードして解凍してそのまま使っています )
<?php
$path = "C:\\Users\\lightbox\\Downloads\\TCPDF-master";
set_include_path(get_include_path() . PATH_SEPARATOR . $path);
require_once('config/tcpdf_config_alt.php');
require_once('tcpdf.php');
?>


フォントの追加は、tcpdf_addfont.php で作成したフォントファイルを fonts フォルダにコピーします。
tcpdf.php は、TCPDF のコアファイルなので、解凍したフォルダの中にある必要があります

補足事項

そのまま『さくらインターネット』にアップロードして、パス(C:\\Users\\lightbox\\Downloads\\TCPDF-master)を /home からのパスに変更したら動作しました。
インターネットでテストすると重いので Windows でテストしてからアップロードします。
また、フォントも大きいのでローカルでテストすべきです。
TCPDF で使用されるフォントは(通常)埋め込みフォントになるので、出来上がった PDF も大きくなります。
埋め込みフォントは環境に依存せず文字が正しく表示されます
TCPDF内より使用可能な非埋め込みフォントは、cid0jp 内のフォント名を変更して使用可能です(ツールを使って作成すると半角の文字ピッチ等が正確に反映されます)。また、そのフォントは PC(Windows) にインストールされている必要があります。
フリーフォントを埋め込みするには、ツールで個別に専用データを作成する必要があります。


関連する記事

タグ:PHP PDF TCPDF
posted by lightbox at 2018-11-30 16:34 | PHP + PDF | このブログの読者になる | 更新情報をチェックする

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 では重なった部分が微妙で、文字も若干アンチエイリアスされているようで小さい文字だとボケていました )






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





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

2018年11月23日


タイトルの背景画像を 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>




posted by lightbox at 2018-11-23 12:47 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2018年11月21日


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 のように年の下2桁を最初に入力します

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

カレンダーはただ閉じても日付は選択されます
posted by lightbox at 2018-11-21 15:16 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2018年11月15日


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はまもなく使えなくなる




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