PCには大きな画像を配信し、携帯には幅 240ピクセルの jpg 画像を配信する

  IMG 要素の記述方法の仕様

以下のように定めます

  
<img src="http://ドメイン/phpを登録するパス/img.php?img=画像番号" />
  

関連する記事

PHP : Seesaa の携帯のページを参考にした、最小限の画像を一つ表示するコード


ソースコード
  
<?
$mobile_flg = true;
$target = $_SERVER["HTTP_USER_AGENT"] . "DoCoMoSoftBankKDDI";

while(true) {

	$mobile_chk = strpos( $target, "DoCoMo" );
	if ( $mobile_chk == 0 ) {
		break;
	}
	$mobile_chk = strpos( $target, "SoftBank" );
	if ( $mobile_chk == 0 ) {
		break;
	}
	$mobile_chk = strpos( $target, "KDDI" );
	if ( $mobile_chk == 0 ) {
		break;
	}

	$mobile_flg = false;
	break;
}

if ( $_GET['img'] == '' ) {
	header( "Content-Type: text/html; Charset=shift_jis" ); 
}
else {
	$fname = explode( ".", $_GET['img'] );
	$ext = $fname[count($fname)-1];
	if ( strtoupper( $ext ) == "PNG" ) {
		header( "Content-Type: image/png" ); 
		responseImg($_GET['img']);
	}
	else if ( strtoupper( $ext ) == "JPG" || strtoupper( $ext ) == "JPEG" ) {
		header( "Content-Type: image/jpg" ); 
		responseImg($_GET['img']);
	}
	else {
		if ( $mobile_flg ) {
			header( "Content-Type: image/jpg" ); 
			responseImg($_GET['img'].".jpg");
		}
		else {
			header( "Content-Type: image/png" ); 
			responseImg($_GET['img'].".png");
		}
	}
	exit();
}
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" ); 

$sub_domain = 'teblo';
$root_url = "http://$sub_domain.seesaa.net/pages/user/m/index";

if ( $_SERVER["HTTP_REFERER"] == '' ) {
	$_SERVER["HTTP_REFERER"] = $root_url;
}

if ( !$mobile_flg ) {
	header( "Location: $root_url" );
	exit();
}

function responseImg( $path ) {

	$fp = fopen( $path, 'rb' );

	if ( $fp ) {

		while( TRUE ) {
			if ( feof( $fp ) ) {
				break;
			}
			$ret = fread( $fp, 1024 );
			print $ret;
		}

		fclose( $fp );
	}

}

?>
<html>
<body>
<?php

require_once("ad.php");

?>
<hr>
<img src="<?= $_GET['id'] ?>">
<hr>
(*)<a href="<?= $_SERVER["HTTP_REFERER"] ?>" accesskey="*">戻る</a><br>
(0)<a href="<?= $root_url ?>" accesskey="0">このﾌﾞﾛｸﾞのﾄｯﾌﾟ</a><br>
</body>
</html>
  

このコードで、img パラメータが無く、id パラメータが渡された場合、カレントにあるその番号
をファイル名を持つ画像ファイルを表示する、Seesaa 用の携帯ページのサンプルになります。
( その場合、携帯からでないと画像表示ページは表示されません : よって、幅は 240ピクセル固定です )

http://lightbox.on.coocan.jp/image/mobile/img.php?id=1250192693819290.jpg

Mobile_1

例
  
http://ドメイン/phpを登録するパス/img.php?id=画像番号
  


  必要な画像を自分の手書きブログから収集する

必要な画像を表示する為に、大きな画像とサムネイル画像は手書きブログに元々あるので
取り込んで、携帯用の幅 240ピクセルの画像を GD で作成します。

IE用ボタンはクリップボードにあるデータを貼り付ける為にあります。
クリップボード内の文字列の仕様は以下のようになります

タイトル + 0x1a + 画像URL

Mobile_2

ソースコード
  
<?
header( "Content-Type: text/html; Charset=shift_jis" ); 
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" ); 

$sub_domain = 'teblo';
$root_url = "http://$sub_domain.seesaa.net/pages/user/m/index";

if ( $_SERVER["HTTP_REFERER"] == '' ) {
	$_SERVER["HTTP_REFERER"] = $root_url;
}

if ( $_GET['send'] == '実行' ) {
	$fname2 = explode( "/", $_GET['url'] );
	$fname2 = $fname2[count($fname2)-1];
	$fname = explode( ".", $fname2 );

//	$chk = file_exists( $fname2 );
	file_put_contents( "{$fname[0]}.png", file_get_contents($_GET['url']) );
	file_put_contents( "{$fname[0]}_120.jpg", file_get_contents($_GET['url'] . "_S.jpg") );
	file_put_contents( "{$fname[0]}.txt", $_GET['ttl'] );
	$ret = ImageConvert( $fname[0], 240, 60 );

}

function ImageConvert( $filename, $size, $q ) {

	global $err_message;

	# ファイルの属性等を取得
	$target	= getimagesize( "$filename.png" );
 
	# 現在のサイズ
	$width	= $target[0];
	$height	= $target[1];

	$width_new	= $size;	// 幅固定
	$height_new = (int)( ($height/$width)*$width_new );
 
	$jpeg		= @imagecreatefrompng ( "$filename.png" );
	if ( $jpeg === false ) {
		return false;
	}
	# 新しいイメージ
	$jpeg_new	= @imagecreatetruecolor( $width_new, $height_new );
	if ( $jpeg_new === false ) {
		return false;
	}

	# サイズ変更して新しいイメージへ転送
	$ret = @imagecopyresampled(
		$jpeg_new,
		$jpeg,
		0,
		0,
		0,
		0,
		$width_new,
		$height_new,
		$width,
		$height
	);

	if ( !$ret ) {
		return false;
	}

	# JPEG ファイルとして、出力
	$ret = @imagejpeg ( $jpeg_new, "$filename.jpg", $q );
	if ( !$ret ) {
		return false;
	}

	return true;
}

?>
<html>
<head>
<script type="text/javascript">
function setData() {
	var str = clipboardData.getData("Text")
	reg = new RegExp(String.fromCharCode(160),"g");
	var aData = str.split(String.fromCharCode(0x1a));

	document.getElementsByName("ttl")[0].value = aData[0];
	if ( aData.length == 2 ) {
		document.getElementsByName("url")[0].value = aData[1];
	}
}
</script>
</head>
<body>
<form>
タイトル:<br>
<input type="text" name="ttl" style='width:250px' value="<?= $_GET['ttl'] ?>">
<input type="button" value="IE用セット" onClick='setData()'>
<br>
ＵＲＬ:<br>
<input type="text" name="url" style='width:500px' value="<?= $_GET['url'] ?>">
<br>
<input type="submit" name="send" value="実行">
</form>
<hr>
<img src="<?= ( $fname[0] . ".jpg" ) ?>">
<hr>
<img src="<?= ( $fname[0] . "_120.jpg" ) ?>">
<hr>
<img src="<?= ( $fname[0] . ".png" ) ?>">
<hr>
(*)<a href="<?= $_SERVER["HTTP_REFERER"] ?>" accesskey="*">戻る</a><br>
(0)<a href="<?= $root_url ?>" accesskey="0">このﾌﾞﾛｸﾞのﾄｯﾌﾟ</a><br>
</body>
</html>
  

  登録用のクリップボードデータを作成する IE 拡張

右クリックで表示されるポッフアップメニューに登録して、手書きブログの大きい画像
を表示する画面で画像上を右クリックして取得します。また、SHIFT キーを押しながら
実行すると、仕様どおりのIMG 要素を使った貼り付けコードが取得されます

30行目の以下の部分を変更する必要があります
strInstall = "http://ドメイン/phpを登録するパス"

SHIFT キーを押しながら取得すると以下のようになります

  
<img src="http://ドメイン/phpを登録するパス/img.php?img=画像番号" style='border:solid 1px #000000'  alt="タイトル" />
  

ie_tebloimg.wsf
  
<JOB>
<COMMENT>
************************************************************
IE 拡張メニューインストーラ

■手書きブログのページ上の画像からタイトルとURLを取得

■著作権その他

このプログラムはフリーです。どうぞ自由に御使用ください。
著作権は作者である私(lightbox)が保有しています。
また、本ソフトを運用した結果については、作者は一切責任を
負えせんのでご了承ください。
************************************************************
</COMMENT>

<SCRIPT
	language="VBScript"
	src="http://homepage2.nifty.com/lightbox/laylaClass.vbs">
</SCRIPT>

<SCRIPT language=VBScript>
' ***********************************************************
' 処理開始
' ***********************************************************
Call laylaFunctionTarget( "http://homepage2.nifty.com/lightbox/" )
Call laylaLoadFunction( "baseFunction.vbs" )

' img.php がある URL
strInstall = "http://ドメイン/phpを登録するパス"

' //////////////////////////////////////////////////////////
' インストール時の表示名
strProgName	= "手書きブログの画像情報"
' インストールファイル名( 拡張子は .htm となる )
strProgFile	= "img_tebroibfo"
' メニューとウインドウのタイトルに表示する文字列
' レジストリに登録するのでユニークである必要があります
strRegName	= "−◎手書きブログの画像情報"
' 対象となるコンンテンツ
nTargetType 	= &H2
' &H3F : UNKNOWNを除く全て
' &H1  : DEFAULT
' &H2  : IMAGE
' &H4  : CONTROL
' &H8  : TABLE
' &H10 : TEXTSELECT
' &H20 : ANCHOR
' &H40 : UNKNOWN

' 画面ありかどうか
bIsGUI = False
' //////////////////////////////////////////////////////////



' Csript.exe で実行を強制
' Crun

print strProgName & " をインストールします"
if not OkCancel( "インストールしてもよろしいですか?" ) then
	Wscript.Quit
end if

' ファイルシステムオブジェクト作成
GetFso

' 問題をできるだけ避ける為にc ドライブ固定(必要ならばここを変更)
strInstallPath1 = "c:\laylaClass"
strInstallPath2 = "c:\laylaClass\menuex"
strInstallPath3 = "c:\laylaClass\menuex\" & strProgFile & ".htm"
on error resume next
if not Fso.FolderExists( strInstallPath1 ) then
	Call Fso.CreateFolder( strInstallPath1 )
	if Err.Number <> 0 then
		ErrorFlg = True
	end if
end if
if not Fso.FolderExists( strInstallPath2 ) then
	Call Fso.CreateFolder( strInstallPath2 )
	if Err.Number <> 0 then
		ErrorFlg = True
	end if
end if
on error goto 0

strText = Replace(GetInline("MenuExt"),"$REGNAME", strRegName )
strText = REplace( strText, "$TARGET", strInstall )

Call PutTextFile( strInstallPath3, strText )_

' レジストリ処理用オブジェクト作成
GetWshShell

on error resume next
WshShell.RegWrite _
	"HKCU\Software\Microsoft\Internet Explorer\MenuExt\"&strRegName&"\", _
	strInstallPath3, _
	"REG_SZ"
WshShell.RegWrite _
	"HKCU\Software\Microsoft\Internet Explorer\MenuExt\"&strRegName&"\Contexts", _
	nTargetType, _
	"REG_DWORD"
WshShell.RegWrite _
	"HKCU\Software\Microsoft\Internet Explorer\MenuExt\"&strRegName&"\Html", _
	"<img src=""$URL"" galleryimg=""no"" style='border-style:solid;border-width:1px;border-color:#000000' $ALT $TITLE />", _
	"REG_SZ"

if bIsGUI then
	' この定義があると、画面あり
	WshShell.RegWrite _
		"HKCU\Software\Microsoft\Internet Explorer\MenuExt\"&strRegName&"\Flags", _
		&H1, _
		"REG_DWORD"
end if
on error goto 0

print "処理が終了しました"

Wscript.Quit

</SCRIPT>

<COMMENT>
******** ●ここを変更● ********
</COMMENT>
<RESOURCE id="MenuExt">
<![CDATA[
<meta http-equiv="content-type" content="text/html; charset=SHIFT_JIS">
<SCRIPT language="VBScript">

	Dim WshShell,RegName,strLocation,obj,doc

	Set WshShell = CreateObject("WScript.Shell")
	RegName = "$REGNAME"

	' *************************************************
	' ウインドウサイズ
	' *************************************************
'	window.dialogWidth = "900px"
'	window.dialogHeight = "610px"

'	window.dialogTop = "100px"
'	window.dialogLeft = (window.screen.width/2)&"px"

	strLocation = external.menuArguments.location

	on error resume next
	ExecuteGlobal "function dummy(): end function"
	on error goto 0

	' SHIFTとCTRL用変数
	Dim keyflg1,keyflg2
	keyflg1 = False
	keyflg2 = False

Function setObj( src )
	Set obj = src
End Function
</SCRIPT>

<SCRIPT language="JavaScript">
setObj(external.menuArguments.event.srcElement);
</SCRIPT>
<html>
<head>
<title>$REGNAME</title>
<base target="_self">
</head>
<BODY>
<!--SHIFTとCTRLがおされているかどうかを取得するボタン-->
<INPUT id="btn" type=button onClick='keyflg1=window.event.shiftKey:keyflg2=window.event.ctrlKey'>
</BODY>
</html>
<SCRIPT language="VBScript">

	' ボタンの呼び出し
	document.getElementById("btn").click()

	on error resume next
	' *************************************************
	' 画像専用処理( レジストリ 0x2 )
	' *************************************************
	str = obj.src
	if Err.Number <> 0 then
		str = "URL を取得できませんでした"
	else
		txt = obj.alt
		txt = Trim( txt )
		if txt = "" then
			txt = obj.title
		end if

		if keyflg1 then
			aFn = Split( str, "/" )
			fn1 = aFn(Ubound(aFn))
			aFn = Split( fn1, "." )
			fn2 = "$TARGET/img.php?img=" & aFn(0)

			strText = "<img src=""" & _
				fn2 & _
				""" style='border:solid 1px #000000' " & _
				" alt="""& txt &""" />"
			strText2 = strText
		else
			txt = obj.alt
			txt = Trim( txt )
			if txt <> "" then
				strText = txt
			else
				strText = obj.title
			end if

			strText2 = txt & vbCrLf & str
			strText = txt & Chr(&H1A) & str
		end if

		' 取得できたらクリップボードにセット
		Call window.clipboardData.setData("Text",strText)

	end if
	on error goto 0

	alert(strText2)


</SCRIPT>
]]>
</RESOURCE>

</JOB>
  

  Seesaa の携帯ページに設置する外部画像を表示させるコード

Seesaa の仕様だと思いますが、外部の画像を貼り付けると画像がそのまま表示されないので
スクリプトで変更しています。実際のモバイル環境では確認できていませんが、i モード HTML
ブラウザでは正しく表示されています。

  
<script type="text/javascript"><!--
try {
	len = document.getElementsByTagName("img").length;
	for( content_idx = (len-1); content_idx >= 0; content_idx-- ) {
		if ( document.getElementsByTagName("img")[content_idx].getAttribute("alt") == 'カメラ' ) {
			document.getElementsByTagName("img")[content_idx]
			.parentNode.removeChild(document.getElementsByTagName("img")[content_idx]);
		}
	}
}
catch(e){}

try {
	len = document.getElementsByTagName("A").length;
	for( content_idx = 0; content_idx < len; content_idx++ ) {
		if ( document.getElementsByTagName("A")[content_idx].firstChild.nodeValue == '画像' ) {
			document.getElementsByTagName("A")[content_idx]
			.removeChild(document.getElementsByTagName("A")[content_idx].firstChild);
			var imgUrl = document.getElementsByTagName("A")[content_idx].getAttribute("href");
			var brContent = document.createElement("br");
			document.getElementsByTagName("A")[content_idx].appendChild(brContent);
			var imgContent = document.createElement("img");
			var lens = imgUrl.length;
			if ( imgUrl.substr( lens - 5, 5 ) == "S.jpg" ) {
				imgContent.setAttribute("width","60");
				imgContent.style.width = "60px";
			}
			imgContent.setAttribute("src",imgUrl);
			imgContent.style.borderWidth = "0px";
			document.getElementsByTagName("A")[content_idx].appendChild(imgContent);
		}
	}

}
catch(e){}

//-->
</script>
  










   SQLの窓    create:2010/03/21  update:2014/09/07   管理者用(要ログイン)



SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 

フリーフォントWEBサービス
フリーフォントで簡単ロゴ作成
アイコン・はんこ画像作成
フリーフォントでボタン素材作成
フリーフォントで横書きロゴ作成
フリーフォントで縦書きロゴ作成
カナ・かなページ
書体見本
キーボード画像作成
フリーフォント ギャラリー
フリーイラスト素材ダウンロード
UTF-8文字Tool

SQLの窓WEBサービス
SyntaxHighlighter
リアルタイムHTML
テキスト変換
Shadowbox 埋め込みコード作成

SQLの窓フリーソフト
SQLの窓 Build C++
販売管理B
「送る」に入れる簡易ダンプ
WMI Query
コンピュータアイコンメニュー
ドメイン内検索

写真素材
足成
Image * After

一般WEBツールリンク
HTML整形ツール
JSONLint
ttf to woff converter
Exploring the Twitter API
Pixlr Editor
Pixlr Express
Google URL Shortener

SQLの窓
logical　error
GINPRO
WAHA land
職人的フリーソフトの使い方
WEB 職人
ソース掲示板

フリーソフト
Classic Shell
7-Zip
FileZilla
PrimoPDF(英語版)

JSライブラリ
jQuery
Three.js
Lightbox
Shadowbox.js
Google Maps API
The Google Hosted Libraries