logical　error :アーカイブ

Google

<< 2014年04月 | TOP | 2014年06月 >>

- 1 2 3 4 >>

2014年05月29日

ドロップシャドウ / フリーフォントで簡単ロゴ作成

フリーフォントで簡単ロゴ作成に、ドロップシャドウ関連の機能補強を行いました。

以前までのドロップシャドウ





テキスト全体を少し薄く表現していましたが、他の機能との連携に必要なので、100% の濃さでテキストを表示するようにしました。

テキストが 100% の濃さのドロップシャドウ





さらに、今まではドロップシャドウの色をテキスト色に合わせていましたが、オプションとして常に黒くできるようにしました。

シャドウ色を常に黒くする





また、文字枠を使いながら、影を付加させる為に影の位置を補正できるようにしました

シャドウの位置を補正する





文字枠の補正にマイナスを指定できるようにしたので、文字をもう一つ複製したような表現が可能になりました。

三重シャドウ





フリーフォントで簡単ロゴ作成で上の画像を再現する

文字枠と背景色を同じにして、ドロップシャドウを調整すると以下のような表現も可能になりました

タグ：フリーフォント

posted by lightbox at 2014-05-29 23:59 | WEBサービス |

2014年05月27日

PHP : PDO のエラー処理

概要

PDO エラー処理には3通りあります。

(1) DO::ERRMODE_SILENT
最初はその名の通り、エラーが起きてもなにも起こりません。そのまま実行されますが、エラー情報は設定されていますし、戻り値も正しく返ります。一番簡単でバグさえなければ問題は発生しにくいですが、複雑な問題を確認する為には戻り値とメッセージを常に確認して正しいエラー処理を行う必要があります

(2) PDO::ERRMODE_WARNING
二つ目は、さらにPHPの通常のエラーメッセージを出力させるようにしたバージョンです。初期段階のデバッグに有効です

(3) PDO::ERRMODE_EXCEPTION
三つ目は、try ～ catch を使うようにしたものですが、慣れていないと扱いは少し難しくなります。しかし、例外によりスクリプトが終了した際には、トランザクションは自動的に ロールバックされるそうです。

前者でどうなるかは未確認ですが、業務アプリケーションならばこちらを選択したほうが良いでしょう。個人の一般の WEB アプリならばそこまで神経質になる必要は無いと思いますので、デフォルトの ERRMODE_SILENT で良いと思います

<?php
$strDriver = "{SQL Native Client}";
$strTarget = "NIGHT_TCP";	// 別名
$strDB = "lightbox";
$strUser = "sa";
$strPass = "passwordpassword";

// **********************************************************
// 接続
// **********************************************************
$Cn = new PDO(
	"odbc:Driver=$strDriver;Server=$strTarget;" .
	"Database=$strDB;Uid=$strUser;Pwd=$strPass;");

	// デフォルトエラーモード
	$Cn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_SILENT );

	// 存在しない列を更新
	$Query = "update [社員マスタ] set [生年月] = '2005/01/01'";
	$Query .= " where [社員コード] = '0001'";
	$ret = $Cn->exec( $Query );
	if ($ret===false) {
		print_r( $Cn->errorInfo() );
	}


	// エラー表示( デバッグに有効 )
	// 抑制する場合は、@$Cn->exec( $Query );
	$Cn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );

	// 存在しない列を更新
	$Query = "update [社員マスタ] set [生年月] = '2005/01/01'";
	$Query .= " where [社員コード] = '0001'";
	$ret = $Cn->exec( $Query );
	if ($ret===false) {
		print_r( $Cn->errorInfo() );
	}

	// try catch 用
	$Cn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

	// 存在しない列を更新
	$Query = "update [社員マスタ] set [生年月] = '2005/01/01'";
	$Query .= " where [社員コード] = '0001'";
	try {
		$ret = $Cn->exec( $Query );
	}
	catch( PDOException $e ) {
		print $e->getMessage();
	}

$Cn = null;

?>

タグ：PHP PDO

posted by lightbox at 2014-05-27 17:25 | PHP + データベース |

2014年05月23日

TCPDF で非埋め込み型として『メイリオ』を使う手順

1) コマンドブロンプトで、C:\Windows\Fonts に入る


2) COPY コマンドで、meiryo.ttc を適当な場所へコピーする


3) UniteTTC をダウンロードして、UniteTTC.exe meiryo.ttc を実行する


4) 4つに分解されますが、meiryo001.TTF が通常の メイリオなので meiryo001.ttf に変更( 全て小文字 )
5) TCPDF の tools フォルダに meiryo001.ttf を移動

6) c:\php\php.exe tcpdf_addfont.php -t CID0JP -i meiryo001.ttf を実行
( c:\php\php.exe は 通常の Windows 用 コマンドプロンプト用 PHP )

7) "インストールフォルダ\tcpdf_6_0_080\tcpdf\fonts\meiryo001.php" が作成される
( ここでのテストは tcpdf_6_0_080 )
8) サンプルの example_038.php の $pdf->SetFont('cid0jp', '', 40); を $pdf->SetFont('meiryo001', '', 40); に変更
9) 実行


※ Excel で表示して書体を比較しています

meiryo001.php の先頭は以下のようにっていて、書体名は Meiryo となっています

<?php
// TCPDF FONT FILE DESCRIPTION
$type='cidfont0';
$name='Meiryo';
$up=-100;
$ut=50;
$dw=1000;
$diff='';
$originalsize=8594960;
// Japanese
$enc='UniJIS-UTF16-H';
$cidinfo=array('Registry'=>'Adobe', 'Ordering'=>'Japan1','Supplement'=>5);
include(dirname(__FILE__).'/uni2cid_aj16.php');



関連する記事

タグ：PDF TCPDF PHP フォント

posted by lightbox at 2014-05-23 03:02 | PHP + PDF |

2014年05月22日

Eclipse+WindowBuilder : DBアプリケーション(社員マスタメンテ)の更新(データ修正)処理

入力チェックが正しく完了した後に、画面データから UPDATE 構文によって SQL の 更新処理を作成して実行します。UPDATE 構文で更新される行は 1 行のみであり、主キーでその行が限定されます

社員マスタ

№	列名	型名	最大桁	主キー	型説明
1	社員コード	VARCHAR	4	1	Null で終了する Unicode 文字列
2	氏名	VARCHAR	50		Null で終了する Unicode 文字列
3	フリガナ	VARCHAR	50		Null で終了する Unicode 文字列
4	所属	VARCHAR	4		Null で終了する Unicode 文字列
5	性別	INT			4 バイトの符号付き整数
6	作成日	DATETIME			日付値
7	更新日	DATETIME			日付値
8	給与	INT			4 バイトの符号付き整数
9	手当	INT			4 バイトの符号付き整数
10	管理者	VARCHAR	4		Null で終了する Unicode 文字列
11	生年月日	DATETIME			日付値

更新処理を実行する為に入力をチェックを行っていますが、かならず更新前には操作しているユーザに確認を求める必要があります。それがなければ、意図せぬ更新処理作業を行ってしまう事が十分に考えられます。更新処理はシステムによって重大な処理であり、入力者の不注意で問題が起きるような可能性は最大限排除する必要があります。

			// ここに更新処理を記述する
			int result = JOptionPane.showConfirmDialog(contentPane, "更新してよろしいですか?", "更新確認", JOptionPane.OK_CANCEL_OPTION);
			if ( result == JOptionPane.CANCEL_OPTION) {
				rdbms.close();
				return;
			}

			try {
				
				String scode = syainCode.getText();
				String sname = syainName.getText();
				String ssyozoku = syainSyozoku.getText();
				int ssex = syainSex.getSelectedIndex();
				String skyuyo = syainKyuyo.getText();
				String steate = syainTeate.getText();
				String skanri = syainKanri.getText();
				String sbirth = syainBirth.getText();
						
				String sql = "";
				sql += "update 社員マスタ set";
				sql += " 氏名 = '" + sname + "',";
				sql += " 所属 = '" + ssyozoku + "',";
				sql += " 性別 = " + ssex + ",";
				sql += " 給与 = " + skyuyo + ",";
				if ( steate.trim().equals("") ) {
					sql += " 手当 = NULL,";
				}
				else {
					sql += " 手当 = " + steate + ",";
				}
				if ( skanri.trim().equals("") ) {
					sql += " 管理者 = NULL,";
				}
				else {
					sql += " 管理者 = '" + skanri + "',";
				}
				if ( sbirth.trim().equals("") ) {
					sql += " 生年月日 = NULL,";
				}
				else {
					sql += " 生年月日 = '" + sbirth + "',";
				}
				sql += " 更新日 = now()";
				sql += " where 社員コード = '" + scode + "'";
				System.out.println(sql);
				result = rdbms.stmt.executeUpdate(sql);
				System.out.println("更新件数 : " + result);
				JOptionPane.showMessageDialog(contentPane, "更新処理が実行されました");

				passControl.clearDetailes();			
				passControl.pass1Enable();			
				
				
			} catch (Exception ex) {
				ex.printStackTrace();
			}
			
			
			rdbms.close();

このコード上に、データベースへの接続処理が見えていませんが、直前に他のテーブルの行データの参照の為、既に接続済みです。また、SQLを作成する為に、入力フィールドの状況をチェックしていますが、本来の更新前のチェックで、全ての問題点が排除されているという前提でのコードとなっています。( 例 : 入力フィールドに数値以外の値や漢字スペースは含まれていない )

ここでは、SQL 文を文字列連結で作成していますが、これでは後からのメンテナンス性が悪いので、ベースとなる一文としての SQL 文をテキストで外部に作成して、データ部分を入力値で置き換えるようなクラスまたはメソッドを作成する必要があります。

関連する記事

タグ：データーベース DB WindowBuilder Eclipse java

posted by lightbox at 2014-05-22 23:53 | Java |

jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示

Three.js のネタ元は、canvas_geometry_birds です。あちらは鳥オブジェクトですが、少し変更して平面の画像を使えるように改造しています 

2014/05/22 : 画像のカスタマイズ方法です

結局、open_three.js は、ただ jQuery のプラグインとして IFRAME の中身を作っているだけなので、を外部にする必要は特にありません。以下のように実装すれば、背景画像は簡単に変更する事ができます。

とりあえず画像を変えてみたい場合は、こちらに 3D イラストのフリー素材があるので、画像をクリックして大きく表示して、大きな画像を右クリックして URL を取得して使ってみて下さい。( 下にあるソースでは、15行目で指定しています )

蝶の画像は、背景透過の PNG の必要があるので、フリーフォントで簡単ロゴ作成で作成して、Google のギャラリーにアップロードして使用していただくといいと思います。( 下にあるソースでは、12行目で指定しています )

※ ここでは、jQuery を 1.11.0 にしていますが(4行目)、古い IE だと動作しないかもしれないので、古いバージョンを使用しています。

<script>
// このページに jQuery が無い場合にロード
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></"+"script>");
}
// ▼ 以下は Shadowbox と Three.js のコードロードします
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript">
// jQuery でボタンのイベントを取得して、好きな画像を飛ばします
$(function(){
	$("#start_button").openThree("http://winofsql.jp/image/s60_2.png");
});
// ここで背景画像を指定します
var img_url = "https://lh4.googleusercontent.com/-n2hqoMHMJfk/U2JsTXjEtbI/AAAAAAAATV0/hQZ5Oc_RIqA/s1200/uf3_001.jpg";
$.fn.extend({
	openThree: function(openThree_Param) {
		$(this).bind('click', function() {

			Shadowbox.open({ 
				player: 'iframe', 
				content: 'about:blank', 
				options: { 
					onFinish: function() {
						setTimeout(  function() {
							var doc = document.getElementById("sb-player").contentWindow.document;
							doc.write("<"+"style> body { background:url("+img_url+"); } </"+"style>");

							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
							doc.write("<"+"script type=\"text/javascript\">image_url='" + openThree_Param + "';</"+"script>");
							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
							doc.close();
						},100 );
					}
				} 
	
			}); 

		});
		return this;
	}
});
</script>

<button id="start_button">開始</button>

※ このコードをオンラインでテストしたい場合は、こちらから実行できます。このソースコードの右上ツールバーの中の左から２番目のアイコンでクリップボードにコピーされますので、リンク先で貼り付けて『新しく開く』ボタンをクリックしていただくとデモ画面が表示されます


以下は元々の記事です

※ 実行のクリックは、ページが完全にロードしてからでないと動作しないので注意して下さい。

ページ上のコンテンツに対して、jQueryのプラグインを作って、さらにそのプラグインでクリックイベントを登録して Three.js のデモ画面を Shadowbox.js が開いた IFRAME のウインドウに表示します

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/sbx33/loadShadowbox.js"></script>
<script type="text/javascript" src="https://lightbox.sakura.ne.jp/demo/three/open_three.js"></script>
<script type="text/javascript">
$(function(){
	$("#code140208003926").openThree($("#code140208003926").children("img").attr("src"));
	$("#code140208003927").openThree("http://winofsql.jp/image/s60_2.png");
	$("#code140208003928").openThree($("#code140208003928").attr("src"));
});
</script>

<button id="code140208003926"><img src="http://winofsql.jp/image/s60_1.png" /></button>
<button id="code140208003927"><img src="http://winofsql.jp/image/s60_2.png" /></button>
<input id="code140208003928" type="image" src="http://winofsql.jp/image/s60_3.png" style="border: solid 1px #000000;border-radius:10px;" />


loadShadowbox.js

if ( !window['lightboxTool'] ) {
	window.lightboxTool = {};
}
if ( !window.lightboxTool.initShadowbox ) {
	window.lightboxTool.initShadowbox = function ( ) {
		Shadowbox.init();
	}
}

(function() {
var str;
var userAgent = window.navigator.userAgent.toLowerCase();
if ( !window.Shadowbox ) {

	str="";
	str+="<link rel=\"stylesheet\" type=\"text/css\" href=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.css\"> \n";
	str+="<"+"script type=\"text/javascript\" src=\"http://lightbox.on.coocan.jp/sbx33/shadowbox.js\" charset=\"utf-8\"></"+"script> ";
	document.write(str);

	if (window.attachEvent){
		window.attachEvent('onload', lightboxTool.initShadowbox );
	}
	else {
		window.addEventListener('load', lightboxTool.initShadowbox, false);
	}

}
})();


open_three.js

$.fn.extend({
	openThree: function(openThree_Param) {
		$(this).bind('click', function() {

			Shadowbox.open({ 
				player: 'iframe', 
				content: 'about:blank', 
				options: { 
					onFinish: function() {
						setTimeout(  function() {
							var doc = document.getElementById("sb-player").contentWindow.document;
							doc.write("<"+"style> body { background-color:#fff; } </"+"style>");

							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/three.min57.js\"></"+"script>");
							doc.write("<"+"script type=\"text/javascript\">image_url='" + openThree_Param + "';</"+"script>");
							doc.write("<"+"script type=\"text/javascript\" src=\"https://lightbox.sakura.ne.jp/demo/three/birds.js\"></"+"script>");
							doc.close();
						},100 );
					}
				} 
	
			}); 

		});
		return this;
	}
});

見せたいのは、Three.js の 3D のデモ画面ですが、Three.js の実行はページの一部で実行するのはとても難しい問題があります。しかし、IFRAME 内に表示すればたいていの問題は解決します。



ただ、IFRAME を使う場合殆どの場合は、外部ドメインにページを作っておいて src 属性でその URL を指定するのが通常です。しかし、それではいろいろ管理が面倒で拡張性が無いので JavaScript の document.write で動的に書き出しています。この方法は昔から Google 等が行っていますし、完全なクロスブラウジングです。

書き出すものも、javascript のライブラリにまとめて SCRIPT 要素のまま書き出します。この際少しルールがあり、依存するライブラリは別々の SCRIPT 要素内から書き出す必要があります。それさえ守れば特に問題も無く動作するのですが、書き出す為の文字列を作るのが手作業では無理があるので自作のツールで行っています。

実装そのものは、jQuery のプラグインでまとめています。こうしておくと好きなコンテンツのクリックイベントとしてデモを表示する事ができます。画像は、プラグインの『openThree』の引数として渡すようになっています。

動作環境は、やはり Google Chrome 推奨です。

※ 背景は、ソースコードからは変えてあります

posted by lightbox at 2014-05-22 12:54 | Three.js & typeface |

2014年05月20日

立体文字枠サークルテキスト / フリーフォントで簡単ロゴ作成

ここ一ヶ月ほどで、
▼『画像合成機能』( 画像は変更ボタンをクリックすると表示されます )


▼『サークルテキスト機能』


▼『文字枠機能』を追加して来ましたが、


文字枠を付加する際に、上下左右いずれかに長さ調整をする事で影のようになり、立体的にみせれるようになりました。

▼ 以下に白舟シリーズでのサンプルの一覧のリンクを用意しました。

posted by lightbox at 2014-05-20 23:29 | WEBサービス |