SQLの窓

2014年10月31日


PHP : 既存 GD 関連ライブラリで、背景をグラデーション(2)






開始  終了 
タイプ 
ステップ  


ライブラリ関連のソースコードは、『PHP : 既存 GD 関連ライブラリで、背景をグラデーション』を参照して下さい。グラデーションクラスと、GD 基本クラスを紹介しています。

それらのクラスを使用して実行していますが、PHP 自体を画像としてブラウザに返すコードなので、ここでの実行は、IMG 要素の SRC 属性に QueryString を引き渡して随時実行しています。

※ 今回は、コードの中に他のサイトから実行した場合に以下の画像が表示されるようにするコードを付加しています。

( ▲ クリックすると、フリーフォントで簡単ロゴ作成に移動します )

example_02.php(UTF-8N)
<?php
// ***********************************************
//
//  プログラム名 : グラデーションサンプル(2)
//  作   成   者 : lightbox
//  作   成   日 : 2014/10/31
//
//  概要 : 
//  背景画像としてのグラデーション
//
// ***********************************************
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

require_once('gd_lightbox.php');
require_once('gradient.php');

// ステップの範囲を限定
if ( $_GET['step']+0 > 20 ) {
	$_GET['step'] = 20;
}
if ( $_GET['step']+0 < 0 ) {
	$_GET['step'] = 0;
}
if ( $_GET['type'] == '' ) {
	$_GET['type'] = "horizontal";
}
if ( $_GET['sc'] == '' ) {
	$_GET['sc'] = "#000000";
}
if ( $_GET['ec'] == '' ) {
	$_GET['ec'] = "#ffffff";
}

// グラデーションキャンバスの作成
$gradient = new gd_gradient_fill(400,200,$_GET['type'],$_GET['sc'],$_GET['ec'],$_GET['step']+0);
// サイズ 400x200
$image = $gradient->image;

// GD インスタンス作成
$gd = new GD();

// PNG として設定
$gd->type = "PNG";
// グラデーションを設定
$gd->im = $image;

$site = false;
$target_sites = array("http://toolbox.winofsql.jp/","http://logicalerror.seesaa.net/");
foreach( $target_sites as $target ) {
	$len = strlen( $target );
	$ref = substr( $_SERVER['HTTP_REFERER'], 0, $len );
	if ( $target == $ref ) {
		$site = true;
		break;
	}
}

if ( $site ) {
	// ブラウザへ出力
	$gd->Response();
}
else {
	// ブラウザへ出力
	$gd->LoadPng("site_warning.png");
	$gd->Response();
}
?>


▼ このブログでの実装コード
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src="http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js"></"+"script>");
}
</script>
<script type="text/javascript">
$(function(){
	$(".color_field").modcoder_excolor();
});

function set_gradient() {
	var src = "http://toolbox.winofsql.jp/gradient/example_02.php?step=" + $("#step").val();
	src += "&sc=" + encodeURIComponent($("#sc").val());
	src += "&ec=" + encodeURIComponent($("#ec").val());
	src += "&type=" + $("#gtype").val();
	$("#gradient").prop("src",src);
}
</script>

<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<pre class=w6>
開始 <input id="sc" class="color_field" type="text" readonly value="#000000"> 終了 <input id="ec" class="color_field" type="text" readonly value="#ffffff">
タイプ <select id="gtype">
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="ellipse">ellipse</option>
<option value="ellipse2">ellipse2</option>
<option value="circle">circle</option>
<option value="circle2">circle2</option>
<option value="square">square</option>
<option value="diamond">diamond</option>
</select>
ステップ <input id="step" type="number" max="20" min="0" value="0"> <input type="button" value="グラデーション" onclick='set_gradient()'>
<img id="gradient" src="https://lh3.googleusercontent.com/-vhWb-RDtIR8/VFNVjqUJ8mI/AAAAAAAAXVU/7wyCb2JipJM/s400/gradient.png" style='border:solid 1px #000000;' onclick='set_gradient()'>
IE がまだ type="color" に対応していないので、カラーピッカーは jQuery のプラグインを使用しています


posted by lightbox at 2014-10-31 21:14 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

PHP : 既存 GD 関連ライブラリで、背景をグラデーション

画像そのものを php で作成しています。クリックすると、img 要素の中の src の URLに渡す step パラメータが変化します。

▼ クリックするとグラデーションをテストできます。
ステップ  

( せっかくなので、step の入力は HTML5 の type="number" を使用してます / max="20" )

この間作成した、GD を使用した画像の縮小ライブラリと、『PHP and GD : Emulate Gradient Fill』からダウンロードできるグラデーション用ライブラリを使用して GD の背景としてグラデーションを設置するサンプルです。

Emulate Gradient Fill は、そのままでは使え無いので、74行目をコメントにする必要があります。また、テストしやすいようにコンストラクタの引数に全てデフォルトを設定しています。

※ このライブラリは、英語しか使われていないので、そのままで結構ですが、画像の縮小ライブラリと実行サンプルは、UTF-8N で保存しています。

gd_gradient_fill
<?php
/*
Script Name: GD Gradient Fill
Script URI: http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/
Description: Creates a gradient fill of any shape (rectangle, ellipse, vertical, horizontal, diamond)
Author: Ozh
Version: 1.1
Author URI: http://planetozh.com/
*/

/* Release history :
 * 1.1
 *		- changed : more nicely packaged as a class
 *		- fixed : not displaying proper gradient colors with image dimension greater than 255 (because of a limitation in imagecolorallocate)
 *		- added : optional parameter 'step', more options for 'direction'
 * 1.0
 *		- initial release
 */

/* Usage :
 *
 * require_once('/path/to/gd-gradient-fill.php');
 * $image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);
 *
 * Parameters :
 *		- width and height : integers, dimesions of your image.
 *		- direction : string, shape of the gradient.
 *		  Can be : vertical, horizontal, rectangle (or square), ellipse, ellipse2, circle, circle2, diamond.
 *		- startcolor : string, start color in 3 or 6 digits hexadecimal.
 *		- endcolor : string, end color in 3 or 6 digits hexadecimal.
 *		- step : integer, optional, default to 0. Step that breaks the smooth blending effect.
 * Returns a resource identifier.
 *
 * Examples :
 *
 * 1.
 * require_once('/home/ozh/www/includes/gd-gradient-fill.php');
 * $image = new gd_gradient_fill(200,200,'horizontal','#fff','#f00');
 *
 * 2.
 * require_once('c:/iis/inet/include/gd-gradient-fill.php');
 * $myimg = new gd_gradient_fill(80,20,'diamond','#ff0010','#303060');
 *
 */


// Test it :
// $image = new gd_gradient_fill(400,200,'ellipse','#f00','#000',0);

class gd_gradient_fill {
	
	// Constructor. Creates, fills and returns an image
	function gd_gradient_fill($w=400,$h=200,$d="horizontal",$s="#000000",$e="#FFFFFF",$step=0) {
		$this->width = $w;
		$this->height = $h;
		$this->direction = $d;
		$this->startcolor = $s;
		$this->endcolor = $e;
		$this->step = intval(abs($step));

		// Attempt to create a blank image in true colors, or a new palette based image if this fails
		if (function_exists('imagecreatetruecolor')) {
			$this->image = imagecreatetruecolor($this->width,$this->height);
		} elseif (function_exists('imagecreate')) {
			$this->image = imagecreate($this->width,$this->height);
		} else {
			die('Unable to create an image');
		}
		
		// Fill it
		$this->fill($this->image,$this->direction,$this->startcolor,$this->endcolor);
		
		// Show it		
//		$this->display($this->image);
		
		// Return it
		return $this->image;
	}
	
	
	// Displays the image with a portable function that works with any file type
	// depending on your server software configuration
	function display ($im) {
		if (function_exists("imagepng")) {
			header("Content-type: image/png");
			imagepng($im);
		}
		elseif (function_exists("imagegif")) {
			header("Content-type: image/gif");
			imagegif($im);
		}
		elseif (function_exists("imagejpeg")) {
			header("Content-type: image/jpeg");
			imagejpeg($im, "", 0.5);
		}
		elseif (function_exists("imagewbmp")) {
			header("Content-type: image/vnd.wap.wbmp");
			imagewbmp($im);
		} else {
			die("Doh ! No graphical functions on this server ?");
		}
		return true;
	}
	
	
	// The main function that draws the gradient
	function fill($im,$direction,$start,$end) {
		
		switch($direction) {
			case 'horizontal':
				$line_numbers = imagesx($im);
				$line_width = imagesy($im);
				list($r1,$g1,$b1) = $this->hex2rgb($start);
				list($r2,$g2,$b2) = $this->hex2rgb($end);
				break;
			case 'vertical':
				$line_numbers = imagesy($im);
				$line_width = imagesx($im);
				list($r1,$g1,$b1) = $this->hex2rgb($start);
				list($r2,$g2,$b2) = $this->hex2rgb($end);
				break;
			case 'ellipse':
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = min($width,$height);
				$center_x = $width/2;
				$center_y = $height/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
				break;
			case 'ellipse2':
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = sqrt(pow($width,2)+pow($height,2));
				$center_x = $width/2;
				$center_y = $height/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'circle':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = sqrt(pow($width,2)+pow($height,2));
				$center_x = $width/2;
				$center_y = $height/2;
				$rh = $rw = 1;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'circle2':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = min($width,$height);
				$center_x = $width/2;
				$center_y = $height/2;
				$rh = $rw = 1;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				imagefill($im, 0, 0, imagecolorallocate( $im, $r1, $g1, $b1 ));
				break;
			case 'square':
			case 'rectangle':
				$width = imagesx($im);
				$height = imagesy($im);
				$line_numbers = max($width,$height)/2;
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				break;
			case 'diamond':
				list($r1,$g1,$b1) = $this->hex2rgb($end);
				list($r2,$g2,$b2) = $this->hex2rgb($start);
				$width = imagesx($im);
				$height = imagesy($im);
				$rh=$height>$width?1:$width/$height;
				$rw=$width>$height?1:$height/$width;
				$line_numbers = min($width,$height);
				break;
			default:
		}
		
		for ( $i = 0; $i < $line_numbers; $i=$i+1+$this->step ) {
			// old values :
			$old_r=$r;
			$old_g=$g;
			$old_b=$b;
			// new values :
			$r = ( $r2 - $r1 != 0 ) ? intval( $r1 + ( $r2 - $r1 ) * ( $i / $line_numbers ) ): $r1;
			$g = ( $g2 - $g1 != 0 ) ? intval( $g1 + ( $g2 - $g1 ) * ( $i / $line_numbers ) ): $g1;
			$b = ( $b2 - $b1 != 0 ) ? intval( $b1 + ( $b2 - $b1 ) * ( $i / $line_numbers ) ): $b1;
			// if new values are really new ones, allocate a new color, otherwise reuse previous color.
			// There's a "feature" in imagecolorallocate that makes this function
			// always returns '-1' after 255 colors have been allocated in an image that was created with
			// imagecreate (everything works fine with imagecreatetruecolor)
			if ( "$old_r,$old_g,$old_b" != "$r,$g,$b") 
				$fill = imagecolorallocate( $im, $r, $g, $b );
			switch($direction) {
				case 'vertical':
					imagefilledrectangle($im, 0, $i, $line_width, $i+$this->step, $fill);
					break;
				case 'horizontal':
					imagefilledrectangle( $im, $i, 0, $i+$this->step, $line_width, $fill );
					break;
				case 'ellipse':
				case 'ellipse2':
				case 'circle':
				case 'circle2':
					imagefilledellipse ($im,$center_x, $center_y, ($line_numbers-$i)*$rh, ($line_numbers-$i)*$rw,$fill);
					break;
				case 'square':
				case 'rectangle':
					imagefilledrectangle ($im,$i*$width/$height,$i*$height/$width,$width-($i*$width/$height), $height-($i*$height/$width),$fill);
					break;
				case 'diamond':
					imagefilledpolygon($im, array (
						$width/2, $i*$rw-0.5*$height,
						$i*$rh-0.5*$width, $height/2,
						$width/2,1.5*$height-$i*$rw,
						1.5*$width-$i*$rh, $height/2 ), 4, $fill);
					break;
				default:	
			}		
		}
	}
	
	// #ff00ff -> array(255,0,255) or #f0f -> array(255,0,255)
	function hex2rgb($color) {
		$color = str_replace('#','',$color);
		$s = strlen($color) / 3;
		$rgb[]=hexdec(str_repeat(substr($color,0,$s),2/$s));
		$rgb[]=hexdec(str_repeat(substr($color,$s,$s),2/$s));
		$rgb[]=hexdec(str_repeat(substr($color,2*$s,$s),2/$s));
		return $rgb;
	}
}
?>

今回のサンプルでは、step だけを変更できるようにしました。step は、デフォルトでは 0 を使用してなめらかなグラデーションになりますが、大きくする事によって、縦の縞模様の幅が広くなっていきます。( 特別なデザインで必要な場合以外使用する事は無いと思います )

example_01.php
<?php
// ***********************************************
//
//  プログラム名 : グラデーションサンプル(1)
//  作   成   者 : lightbox
//  作   成   日 : 2014/10/31
//
//  概要 : 
//  背景画像としてのグラデーション
//
// ***********************************************
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

require_once('gd_lightbox.php');
require_once('gradient.php');

// ステップの範囲を限定
if ( $_GET['step']+0 > 20 ) {
	$_GET['step'] = 20;
}
if ( $_GET['step']+0 < 0 ) {
	$_GET['step'] = 0;
}

// グラデーションキャンバスの作成
$gradient = new gd_gradient_fill(400,200,"horizontal","#000000","#FFFFFF",$_GET['step']+0);
// 1) 400x200
// 2) horizontal
// 3) 黒から白へ
$image = $gradient->image;

// GD インスタンス作成
$gd = new GD();

// PNG として設定
$gd->type = "PNG";
// グラデーションを設定
$gd->im = $image;
// PNGファイルとして出力
//$gd->SavePng("example_01.png");
// JPEGファイルとして出力( 第二引数を省略すると 75 )
//$gd->SavePng("example_01.jpg",90);

// ブラウザへ出力
$gd->Response();
?>

※ 画像として保存する処理をコメントにしています

gd_lightbox.php
<?php
# ***********************
# クラス
# ***********************
class GD {

	var $im;
	var $type;

# ***********************
# コンストラクタ
# ***********************
	function GD( ) {
	}

# ***********************
# キャンバス作成
# ***********************
	function CreateCanvas( $Width, $Height, $Type="PNG" ) {
		$this->type = $Type;
		$this->im = imagecreatetruecolor($Width, $Height);
	}

# ***********************
# PNG ロード
# ***********************
	function LoadPng( $Target ) {
		$this->type = "PNG";
		$this->im = ImageCreateFromPng($Target);
	}
 
# ***********************
# JPEG ロード
# ***********************
	function LoadJpeg( $Target ) {
		$this->type = "JPEG";
		$this->im = ImageCreateFromJpeg($Target);
	}

# ***********************
# 色リソース作成
# ***********************
	function CreateColor( $Red, $Green, $Blue ) {
		$ret = ImageColorAllocate (
			$this->im,
			$Red, $Green, $Blue );
		return $ret;
	}

# ***********************
# 線幅設定
# ***********************
	function SetLineWidth( $Width ) {
		ImageSetThickness( $this->im, $Width );
	}

# ***********************
# 直線の描画
# ***********************
	function Line( $x1, $y1, $x2, $y2, $Option ) {
		if ( is_array( $Option ) ) {
			ImageSetStyle( $this->im, $Option );
			ImageLine(
				$this->im, $x1, $y1, $x2, $y2, IMG_COLOR_STYLED );
		}
		else {
			ImageLine(
				$this->im, $x1, $y1, $x2, $y2, $Option );
		}
	}

# ***********************
# 矩形の描画
# ***********************
	function Box( $x, $y, $w, $h, $Color, $fill=FALSE ) {
		if ( $fill ) {
			imageFilledRectAngle(
				$this->im, $x, $y, $x+$w, $y+$h, $Color );
		}
		else {
			ImageRectAngle(
				$this->im, $x, $y, $x+$w, $y+$h, $Color );
		}
	}

# ***********************
# 楕円の描画
# ***********************
	function Arc( $x, $y, $w, $h, $Color ) {
		ImageArc( $this->im, $x, $y, $w, $h, 0, 359, $Color );
	}

# ***********************
# ブラウザへ出力
# ***********************
	function Response( ) {
		switch( $this->type ) {
			case "PNG":
				header('Content-Type: image/png');
				ImagePng( $this->im );
				break;
			case "JPEG":
				header('Content-Type: image/jpeg');
				ImageJpeg( $this->im );
				break;
		}
	}

# ***********************
# PNG 保存
# ***********************
	function SavePng( $FilePath ) {
		ImagePng( $this->im, $FilePath );
	}

# ***********************
# JPEG 保存
# ***********************
	function SaveJpeg( $FilePath, $Quality=75 ) {
		ImageJpeg( $this->im, $FilePath, $Quality );
	}

# ***********************
# 色リソース開放
# ***********************
	function DestroyColor( $Color ) {
		ImageColorDeallocate( $this->im, $Color );
	}

# ***********************
# イメージの破棄
# ***********************
	function Destroy( ) {
		ImageDestroy ( $this->im );
	}

# ***********************
# 伸縮された新しいイメージの作成
# ***********************
	function Copy( &$New, $rate ) {
		$w = ImageSx( $this->im );
		$h = ImageSy( $this->im );
		$New = new GD();
		$New->im = ImageCreateTrueColor( $w * $rate, $h * $rate );
		$w2 = ImageSx( $New->im );
		$h2 = ImageSy( $New->im );
		ImageCopyResampled(
			$New->im,
			$this->im,
			0,0,0,0,
			$w2, $h2,
			$w, $h
		);
		$New->type = $this->type;
	}

	function CopyW( &$New, $w_new ) {
		$w = ImageSx( $this->im );
		$rate = $w_new / $w;
		$h = ImageSy( $this->im );
		$New = new GD();
		$New->im = ImageCreateTrueColor( $w_new, $h * $rate );
		$w2 = ImageSx( $New->im );
		$h2 = ImageSy( $New->im );
		ImageCopyResampled(
			$New->im,
			$this->im,
			0,0,0,0,
			$w2, $h2,
			$w, $h
		);
		$New->type = $this->type;
	}

	function CopyH( &$New, $h_new ) {
		$w = ImageSx( $this->im );
		$h = ImageSy( $this->im );
		$rate = $h_new / $h;
		$New = new GD();
		$New->im = ImageCreateTrueColor( $w * $rate, $h_new );
		$w2 = ImageSx( $New->im );
		$h2 = ImageSy( $New->im );
		ImageCopyResampled(
			$New->im,
			$this->im,
			0,0,0,0,
			$w2, $h2,
			$w, $h
		);
		$New->type = $this->type;
	}

	function CopyWH( &$New, $w_new, $h_new ) {
		$w = ImageSx( $this->im );
		$h = ImageSy( $this->im );
		$New = new GD();
		$New->im = ImageCreateTrueColor( $w_new, $h_new );
		$w2 = ImageSx( $New->im );
		$h2 = ImageSy( $New->im );
		ImageCopyResampled(
			$New->im,
			$this->im,
			0,0,0,0,
			$w2, $h2,
			$w, $h
		);
		$New->type = $this->type;
	}
}
?>




posted by lightbox at 2014-10-31 19:24 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

Google のカスタム検索の結果と、通常の site: 検索の結果が同じにならないので、後者でしばらく様子を見る事に

どうも最近微妙に『バグじゃないの?』と感じるような細かい現象の変化があるのですが、Google の事なのでジタバタしても仕方無いので様子を見る事にしました。
<script type="text/javascript">
function callSearch() {

	var query = document.getElementById("q").value;
	query = encodeURIComponent(query);
	query = query.replace("%20", "+");

	target = "https://www.google.co.jp/#q=" + query + "+site:logicalerror.seesaa.net";
	window.open(target);

}
</script>
<input type="text"
	id="q"
	size="31"
	maxlength="255"
	value=""
	style='font-size:16px;'>
<input type="button"
	value="検索"
	onclick="callSearch();"
	style='font-size:16px;'>
Google のカススタム検索は、複数のサイトをグループとして検索できるので、その場合は選択肢はありませんが、一つのサイトならば site: で検索するのは簡単です。

現象としては、キーワードでサイト内検索すると、タイトルにヒットして思った記事がトップに出て来るのですが、カスタム検索ですとどうも優先順位が違うらしく、(タイトル内のキーワードより既存の優先順位の中のページにそのキーワードがあるほうが優先されている)全く表示されない事が最近多発しました。せっかくサイト内を検索したいのに、全く役に立たないという状況です。

余談ですが、Google WEBマスターツールがリンクをチェックする際、JavaScript の結果も対象としているのですが、その結果がありえない結果だったり( URL を replace して加工しているのですが、勝手に2回実行して URL が無いとか言われています・・・ )



posted by lightbox at 2014-10-31 01:29 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2014年10月30日


自分の著作では無い写真を、Twitter 経由でブログに埋め込む時の一考。Google+ も使ってみると、元記事消えても画像は残るかもしれない・・・


Twitter のオリジナル


Googlg+ に Twitter のリンクを貼り付けたもの

Twitter の埋め込みについては、『埋め込みツイート』として公式な解説 があります。
埋め込みツイートを使うと、自分の記事やウェブサイトのコンテンツにツイートを埋め込むことができます。
システム的に、他人のツイートを埋め込めるようになっており、『自分のツイートを埋め込むことができます』とは書かれていません。そもそも、英文側では『any Tweet』と記述されていますし。( 英文側では、Here’s an example: として、オバマ大統領のツイートを使ってます ) ただ、そのまま Twitter で埋め込む場合、元ツイートが削除されると当然画像も消えてしまいます。なので、一旦 Google+ に参照させて元記事を削除してみたのですが、とりあえずすぐに消える事が無いのは確認しました。 画像は、googleusercontent.com ドメインのサブドメイン の proxy フォルダに保存されていました。この画像が一時的なものか、永続的なものなのかは調べても確認できませんでしたが、選択肢としては『あり』なんだろうなぁと思いました。 Google+ 投稿の埋め込みについて こちらも公式の解説があります。
自分のサイトやブログの記事に(自分や他のユーザーが書いた)Google+ の投稿を挿入したい場合は、投稿を埋め込む機能を使います。

● Google+ の気になるユーザーやブランドを記事の中で引用する
● Google+ ブランドの枠内に Google+ の投稿を表示する(コンテンツ ソースを記載する)
投稿の作成者が投稿を編集すると、埋め込んだ投稿も更新されます。

あなたのサイトで埋め込まれた Google+ 投稿を目にした訪問者は、あなたのサイトから移動しなくても +1 したり、コメントを書き込んだり、投稿者をフォローしたりすることができます。
こちらは、もっと明確に他のユーザの記事を埋め込むという事を示唆しています。 しかし、冒頭の画像を見ても解る通り、Google+ 側では必ずしも画像が正しく表示されるとは限らないのが注意事項ではあります。
posted by lightbox at 2014-10-30 13:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする

Google WEBマスターツールで、Seesaa のブログが『アクセスが拒否されました』とか言われるのでよくよく見ると、全て携帯ページからのコメントページでした



Seesaa のブログでは、コメントは広告目的の迷惑コメントしか来ないので、基本的には『コメントなし』という状態でそもそもコメント用のリンクすら無いはずなのです。



ですが、長い間に一部『承認制』というのが残っていて、このような事になってるみたいなんですが、なんで携帯ページ(PCからの携帯ページと、携帯からのアクセス)なのか良く解りませんし、なんで最近発生し始めたのかも良く解りません。

とにかく全てのコメントを無しにして、更新して Google WEBマスターツール側でも『修正済みとしました』

▼ 一括


▼ 個別


関連する記事

Seesaa の『コメント/トラックバック/アフィリエイト または カテゴリ』を一括変更するブックマークレット


アクセス拒否のエラーとは

これは、Google WEBマスターツール側の解説ですが、3つあります。
● サイトのコンテンツの全部または一部の閲覧にユーザーのログインが必要となっているため、Googlebot がサイトの URL にアクセスできなかった。

● サイトの robots.txt ファイルによって、Google のクローラによるサイト全体または個々の URL やディレクトリへのアクセスがブロックされている。

● サーバーからプロキシを使用したユーザー認証を求められるか、ホスティング プロバイダの方で Google のクローラによるサイトへのアクセスがブロックされている。
どう考えても、robots.txt によるブロックとしか考えられないのですが、そもそもブログの問題なので、コメントを不可にするしか方法はありません。要するに Seesaa のバグか、Google のバグだと思われますが、携帯ページ限定なので Seesaa が怪しいです。 一応、ブログドメインのルートにある robots.txt の内容を見てみると以下のようでした。
User-agent: bingbot
Crawl-delay: 30

User-agent: MSNBOT
Crawl-delay: 30
あまり関係なさそうです。さて・・・原因は不明です。



posted by lightbox at 2014-10-30 12:05 | WEBサービス | このブログの読者になる | 更新情報をチェックする

IEの設定 : 混在したコンテンツ(HTTPS ページに HTTP の IFRAME や スクリプト)を表示すると、『このページにはセキュリティで保護されているコンテンツのみ表示されます』とブラウザ下部に表示されます


( クリックすると大きく表示します )

簡単に試すには、Google ドライブにWEBページを作ってその中で IFRAME で http ページを表示するか、http で参照する JavaScript を記述します。
<html>
<body>
<script src="http://winofsql.jp/jquery/jquery-1.9.1.min.js"></script>
<img src="http://winofsql.jp/image/winofsql.png" style="border: solid 0px #000000">
<br>
<iframe
    src="http://winofsql.jp/info.php"
	name="myframe"
	frameborder="1"
	scrolling="yes"
	width="1024"
	height="800"
></iframe>

</body>
</html>


右端のボタン(全てのコンテンツを表示)をクリックすると表示されますが、常に表示可能にしたい場合は IE の設定で以下を変更します。



有効にすると表示されるようになります。


関連する 記事

フォルダオプションに Windows のレジストリ設定を追加する

( クリックすると大きく表示します )

関連する Microsoft ドキュメント

Internet Explorer のセキュリティ ゾーン関連のレジストリ エントリについて


posted by lightbox at 2014-10-30 03:23 | IE | このブログの読者になる | 更新情報をチェックする

2014年10月29日


MySQL : 引数の無い LAST_INSERT_ID() と 引数のある LAST_INSERT_ID( n ) の使用方法

引数の無い使用方法
select LAST_INSERT_ID()
MySQL の LAST_INSERT_ID 関数は、select LAST_INSERT_ID() として同一接続内で、最後に更新された AUTO_INCREMENT オプションを持つ列に対する最後の更新結果の値を戻します。

返される値は、同一接続内でひとつなので、直前に更新された表が保持していた値に依存します。

但し、単一の INSERT 文を使用して複数の行をインサートする場合、LAST_INSERT_ID() は、最初の インサートされた行のみに対して生成された値を戻します。これは、他のサーバに対して同じ INSERT 文を簡単に再現できるようにするためです。
引数のある使用方法
update コントロールマスタ
   set 売上伝票 = LAST_INSERT_ID( 売上伝票+1 )
where キー = '1'
update 文で LAST_INSERT_ID( 列名+1 ) を使って、整数型の列をカウントアップします。これによって、現在の『整数型の列の値』を取得する事ができます。( select LAST_INSERT_ID() で取得します )

これらは、更新と取得が同時にシステム側で行われる事になるので、テーブルをロックして更新と取得とロック開放という通常の処理の代替として簡単に処理ができます。

関連する記事

MySQL における AUTO_INCREMENT 列の設定および詳細


posted by lightbox at 2014-10-29 15:41 | MySQL | このブログの読者になる | 更新情報をチェックする

MySQL における AUTO_INCREMENT 列の設定および詳細

以下は一般的なテーブル作成で、列のオプションとして AUTO_INCREMENT を指定し、表のオプションとして AUTO_INCREMENT の初期値を設定しています。
CREATE TABLE `自動主キー` (
	`コード` INT AUTO_INCREMENT
	,`メッセージ` VARCHAR(100)
	,PRIMARY KEY(`コード`)
) AUTO_INCREMENT = 1000

● AUTO_INCREMENT は整数タイプにのみ対応します
● インデックスされた AUTO_INCREMENT カラムに NULL (推奨) か 0 の値を挿入すると、カラムは次のシーケンス値に設定されます
● 行の挿入後に AUTO_INCREMENT 値を取得するには、 LAST_INSERT_ID() SQL 機能を使用します
● 各テーブルに AUTO_INCREMENT カラムは1つだけ存在する事ができます
● インデックスされる必要があります
● DEFAULT 値を持つ事はできません
● AUTO_INCREMENT カラムは正数のみを含んでいる時だけ正しく機能します
● SERIAL 属性は BIGINT UNSIGNED NOT NULL AUTO_INCREMENT UNIQUE のエイリアスです
● AUTO_INCREMENT 値をリセットする為に ALTER TABLE tbl_name AUTO_INCREMENT = n を実行しますが、その値は、現在カラム内にある最大値よりも小さく設定する事はできません
● AUTO_INCREMENT カラムを追加する為には、以下のような SQL を実行します
ALTER TABLE テーブル名
	ADD 列名 INT UNSIGNED NOT NULL AUTO_INCREMENT
	,ADD PRIMARY KEY( 列名 )
● 他の属性列を変更する事もできます
ALTER TABLE テーブル名
	CHANGE COLUMN 列名
	列名 INT UNSIGNED NOT NULL AUTO_INCREMENT
	,ADD INDEX ( 列名 )


posted by lightbox at 2014-10-29 13:24 | MySQL | このブログの読者になる | 更新情報をチェックする

2014年10月28日


IEによる JavaScriptのセキュリティ上の制限とその解除

この Seesaa でも、投稿用のテキストから文字列を選択して URL ボタンを押すとダイアログが表示されて、URL を入力するようになっており、これはごく普通の処理です。



しかし、IE では昔デフォルトでこの処理が制限されていた事(たぶん2009年のIE7)がありました。それは当時以下の設定を『有効』にすると制限が解除されて正しく使えるようになっていたのですが、現在ではどちらの設定にしても正しく動作するようです。IE の黒い歴史の残骸なのかどうかは解りませんが、Microsoft で関係文書をみつける事はできませんでした。



▼ 当時、こんなダイアログが出て、情報バーをクリックしてから許可してもう一度同じ作業をする必要がありました。



そして、もう一つスクリプトにクリップボードへのコピーを許可する設定があります。



これは今でも健在で、デフォルトではダイアログボックスが表示されて、貼り付けても良いか(またはコピーしても良いか)確認を要求されます。

IEの clipboardData object で、コピーと貼り付けと両方向可能です



これは、知識のあるユーザが利用する場合は有効にしても「実害」は発生しません。まれに、ユーザがコピーした内容をすり替えて悪意のあるサイトに誘導する可能性があったので、問題になって世の中全てがこのようになった経緯があり、Flash でも同様の対応を当時せまられました。実際使うとすれば、IE 限定なのでイントラネット等の閉じたネットワークで使われる事が一般的で、業務処理を行っていた人達には迷惑な話でした。

現在、どうしても必要なユーザは『信頼済みサイト』に対象ページのドメインを登録して、『信頼済みサイト』の設定を変更するといいと思います。

JavaScript を無効にする

現在そのような事は現実的ではありませんが、設定としてはこちらです。IE では、『アクティブスクリプト』と呼ばれており、たぶん昔は JavaScript の替わりに VBScript が使えていたのでそのような呼び名になったのだと思います。



これと同じような設定は、他のブラウザでも存在します。これらは、JavaScript でどのような画面表示がなされているかと言うような、ページの検査に使う事はあります。

XSS フィルターは有効にします



これは純粋なセキュリティ対策です。どのような悪意を持った使われ方をするか想像付かない為、デフォルトで有効で正解です。ただ、自分自身や社内の便利ツールとして、入力した JavaScript で動的に JavaScript の結果が欲しいような場合は、この設定を『信頼済みサイト』に対象ドメインまたは PC 名を登録してこの設定を無効にするといいと思います。


Java は、Java そのものをコントロールパネルから無効に

Java に関しては、セキュリティ上の問題が過去に多くあり、WEB 上で使う事は信頼できないので、ブラウザで利用できないように大元を断つ必要があると思います


関連する記事 IEの設定 : このページにはセキュリティで保護されている項目と保護されていない項目が含まれています IEの設定 : 信頼済みサイトに移動する時にダイアログを表示しないようにする フォルダオプションに Windos のレジストリ設定を追加する 関連する Microsoft ドキュメント IE のセキュリティ ゾーン関連のレジストリ エントリについて ※ 初回投稿 : 2009-07-29
posted by lightbox at 2014-10-28 22:41 | IE | このブログの読者になる | 更新情報をチェックする

2014年10月27日


IEの設定 : 信頼済みサイトに移動する時にダイアログを表示しないようにする

IEでリンクをクリックすると、以下のようなダイアログが出る場合があります。
( 過去に、このような設定に最初からなっている時期がありました )


( Google で自分のサイトを検索して表示させました )

もしこのようなダイアログが表示される場合は「インターネット」では無く「信頼済みサイト」の設定を変更します。



通常は『有効』になっており、自由に移動できるはずですが、『ダイアログを表示する』となっていると、冒頭のダイアログが表示されてしまいます。

信頼済みサイトとは

通常アクセスするサイトは、誰が運営しているか解りませんのでセキュリティはある程度高く設定されています。しかし、WEB上で作業する場合、セキュリティを低く設定したほうが便利な事はたくさんあり、例えば自分が運営しているサイトにアクセスするならば、疑う必要は無いわけですから、「信頼済みサイト」に登録して、セキュリティの設定を変更して運用する場合もあります。




関連する記事

フォルダオプションに Windos のレジストリ設定を追加する
IEの設定 : 混在したコンテンツの表示
IEによるスクリプトの制限の解除

関連するMicrosoft のドキュメント

IE のセキュリティ ゾーン関連のレジストリ エントリについて


初回投稿 : 2009-08-09


posted by lightbox at 2014-10-27 23:46 | IE | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり