SQLの窓

2014年06月29日


IE の占める割合の変遷と IE8 でないと動かないシステムの現実

元記事から3年弱経過しています。以下は最新ですが、IE の中ではいまだ IE8 が強いのが解ります。

以下は 2014/5 と 2014/6 の記事です。

双日システムズ、IE6互換ブラウザ「thinforie」がIE8にも対応
中京銀行、IE6互換ブラウザとThinAppを利用しWindows XPからの移行を実現

世の中の現実は、さすがに IE6 からは脱却はできそうな気がしますが、IE8 からの脱却はまだまだ先なのは間違い無いと思います。

2014/06
以下 2011/02 の記事
主に技術情報なので、一般のサイトとはそれぞれのブラウザの重みが違います。ただ、IE9 は 現実的には Windows7 用となるので、あまり伸びて来ないと思います。それで無くても IE6 と IE7 がこれだけ占有しているわけですし。

結局、アプリケーション作る立場からすると、また一つブラウザが増えただけの事で、IE6、IE7 の対応はしなくていいと思いますが、IE9 による動作確認は今後大きな課題となるような気がします。



posted by lightbox at 2014-06-29 11:45 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする

2014年06月28日


Google Chrome : デベロッパーツールの table コマンドで、オプジェクトのプロパティをテーブル表示して Excel に貼り付ける

デベロッパーツールのコンソールだけで動く Command Line API というものがあります。

※ table コマンドは、console.table メソッドとしても利用できるので、ページ内からも実行できます
※ ここで使用する処理は、Firebug では動作しました。


(注意) ページに同名のメソッドがあると、そちらが優先されます。jQuery があると、$ は使用できないので注意して下さい。( 逆にその場合は jQuery を使えばいいのですが )

$0 - $4 は、Elemnts タブで選択したオブジェクトを履歴として記憶しています。( $0 が最新 )
$_ は、直前の処理結果の内容が記憶されています。
  1. $_
  2. $0 - $4
  3. $(selector)
  4. $$(selector)
  5. $x(path)
  6. clear()
  7. copy(object)
  8. debug(function)
  9. dir(object)
  10. dirxml(object)
  11. inspect(object/function)
  12. getEventListeners(object)
  13. keys(object)
  14. monitor(function)
  15. monitorEvents(object[, events])
  16. profile([name])
  17. profileEnd([name])
  18. table(data[, columns])
  19. undebug(function)
  20. unmonitor(function)
  21. unmonitorEvents(object[, events])
  22. values(object)
このコマンドは、オブジェクトのプロパティの一覧を縦の左端に置いて、列の内容は全てのプロバティにある全てのプロパティになるので、名前が同じプロバティは同じ列に表示されますが、無い部分は未定義として表示されるため、表示前に適当な構造にしておく必要があります。

▼ 単にオブジェクトのコレクションだと収拾がつかない



そこで、以下のようにコマンドラインで実行すると、意図した一覧を取得する事ができます。
var a = {};var b = $$("img"); for( i=0; i< b.length; i++ ){ a[i] = {}; a[i]["src"] = b[i].src; };table(a)
このコマンドをフリーの画像素材を提供している『足成』で実行してみました。



この結果をブラウザでドラッグして選択してコピーして Excel にテーブル形式で貼り付ける事ができます。



※ 列は、必要に応じて増やす事が可能です。



一行で記述しなくても、普通に以下のように記述して貼り付けて実行する事もできます。
var a = {};
var b = $$("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
}
table(a)

$$ は、document.querySelectorAll() と同じであり、jQuery にも無いので使用しています。for の 一般的なループを使用しているのは、for in だとプロパティの一覧になる為、length 等のコレクションそのもののプロパティも対象になるので使用していません。

jQuery が使えるのであれば、以下のようにも記述できます
var a = {};
$("img").each( function(idx){
	a[idx] = {};
	a[idx]["src"] = this.src;
	a[idx]["幅"] = this.width;
});
table(a);

コンソール側では無く、デバッグの為にページのスクリプトとして記述する場合は以下のようになります。
(画像の場合は全て読み込まれていない場合は正しいサイズは取得できていない場合があります)
var a = {};
var b = document.querySelectorAll("img");
for( i=0; i< b.length; i++ ){
	a[i] = {};
	a[i]["src"] = b[i].src;
	a[i]["幅"] = b[i].width;
	a[i]["高さ"] = b[i].height;
}
console.table(a)




posted by lightbox at 2014-06-28 13:44 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年06月27日


jQuery/JavaScript : 暗転ボタン

WEB ページ全体を暗い DIV で覆って操作できないようにして、その上に DIV を乗せてコンテンツを表示します。確実に DIV でページを覆うために、サイズは2倍にしていますが、iPhone 等のスマホで向きを変える場合など、イベント対応しない場合に有効です。

※ 暗転後のコンテンツの位置は、暗転を行うコントロールを基準に表示するようにしています。

IE 用の処理の中で、jQuery を使っていない部分がありますが、元々 DOM でテスト済みなのを jQuery でテストする意味もあまりなかった(古いIE用なので)のでそのままにしています。

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// *********************************************************
// 暗転時に操作するウインドウの作成
// *********************************************************
$(function(){

	$("#win_base")
		.hide()
		.css({
			position: "absolute",
			color: "#000000",
			backgroundColor: "#E0E0E0",
			borderStyle: "solid",
			borderColor: "#303030",
			borderWidth: "1px",
			width: "0px",
			height: "0px",
			borderRadius: "6px",
			zIndex: 0x7fffffff
		});


	$("#win_base input")
		.attr("type", "image")
		.prop("src", "http://winofsql.jp/image/mcancel.png")
		.css("float", "right")
		.click(function(){
			$(this.parentNode).hide();
			$(window["dark_modal"]).remove();
		});
});

// *********************************************************
// 暗転時に操作するウインドウを target 基準の指定位置に表示
// *********************************************************
function setDark(target,x,y,w,h) {

	setDarkModal();

	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName.toUpperCase() == 'BODY' ) {
			break;
		}
	}
	$("#win_base").css( "top", (numY+y) + "px" );
	$("#win_base").css( "left", (numX+x) + "px" );
	$("#win_base").css( "width", w + "px" );
	$("#win_base").css( "height", h + "px" );
	$("#win_base").show();
}

// *********************************************************
// 暗転用の DIV を作成
// *********************************************************
function setDarkModal(){
	var dark_modal = document.createElement('div');
	$(dark_modal)
		.attr('id','dark_modal')
		.css( {
			position: "absolute",
			width: Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)*2+'px',
			height: Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)*2+'px',
			left: "0px",
			top:  "0px"
		});
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		$(dark_modal).hide();
		var appVersion = window.navigator.appVersion.toLowerCase();
		if (appVersion.indexOf("msie 10.0") > -1) {
			$(dark_modal).css({
				backgroundColor: "#000000",
				opacity: 0.5
			});
		}
		else {
			dark_modal.style.backgroundColor = '#000000';
			dark_modal.style.filter='alpha(opacity=50)';
		}
	}
	else {
		$(dark_modal).css({
			backgroundColor: "#000000",
			opacity: 0.5
		});
	}

	$("body").append(dark_modal);
	if (userAgent.indexOf("msie") > -1) {
		dark_modal.style.display = '';
	}

	window["dark_modal"] = dark_modal;
}
</script>

<input type="button" value="暗転ボタン" onclick='setDark(this,100,0,200,50);'>

<div id="win_base" style='display:none'><input>
<div id=win_box style='padding:2px;'>ここにコンテンツ</div>
</div>
関連する記事

JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く
JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )



タグ:javascript jquery
posted by lightbox at 2014-06-27 10:19 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年06月26日


jQuery/JavaScript : YouTube Player API を使って複数動画をループさせる

8秒と12秒の繰り返しです
ローディング中です

YouTube JavaScript Player API リファレンス 

クロムレス プレーヤーですが、コントロールを自分で作る必要があるのが難点です

jQuery バージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<!--埋め込み場所-->
<span id="mess">ローディング中です</span>
<div style='width:425px;height:356px;background-color:#E0E0E0;'>
<div id="ytapiplayer"></div>
</div>

<script type="text/javascript">
// JavaScript から SWF へアクセスする為に必要
var params = { allowScriptAccess: "always" };
// OBJECT 用の ID
var atts = { id: "object_id" };
// 埋め込み
// enablejsapi=1 で、JavaScript からアクセス
// playerapiid=ytplayer は、onYouTubePlayerReady イベントで
// オブジェクトを区別する為の文字列
swfobject.embedSWF(
	"http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
	"ytapiplayer", "425", "356", "8", null, null, params, atts
);

// プレイヤーが使えるようになると呼び出される
function onYouTubePlayerReady(playerId) {
	this_player = $("#object_id")[0];
	// 初回サムネイル
	this_player.cueVideoById("ci5tOkmr-xo");
	// 終了イベントを知る為のイベント登録
	this_player.addEventListener("onStateChange", "onytplayerStateChange");

	$("#start_btn")
		.attr("type","button")
		.val("複数動画ループ開始")
		.click(function(){
			$("#object_id")[0].loadVideoById("_Hb_PPGDBLc", 0);
		})
		.show();

	$("#end_btn")
		.attr("type","button")
		.val("複数動画ループ終了")
		.click(function(){
			$("#object_id")[0].stopVideo();
		})
		.show();


	$("#mess").hide();
}
var flg = 0;
function onytplayerStateChange(newState) {
	if ( newState == 0 ) {
		// 次のムービー
		if ( flg % 2 == 0 ) {
			$("#object_id")[0].loadVideoById("ci5tOkmr-xo", 0);
		}
		if ( flg % 2 == 1 ) {
			$("#object_id")[0].loadVideoById("_Hb_PPGDBLc", 0);
		}
		flg++;
	}
}
</script>
<br>
<input id="start_btn" style='display:none'>
<input id="end_btn" style='display:none'>

ノーマルバージョン
<pre>
<strong>8秒と12秒の繰り返しです</strong>
</pre>

<!--Google から swfobject を使う-->
<script
	src="http://www.google.com/jsapi"
	type="text/javascript"
	charset="utf-8"
></script>
<script type="text/javascript">
// Google から swfobject をロードする
google.load("swfobject", "2.1"); 
</script>

<!--埋め込み場所-->
<span id=mess>ローディング中です</span>
<div style='width:425px;height:356px;background-color:#E0E0E0;'>
<div id="ytapiplayer"></div>
</div>

<script type="text/javascript">
// JavaScript から SWF へアクセスする為に必要
var params = { allowScriptAccess: "always" };
// OBJECT 用の ID
var atts = { id: "object_id" };
// 埋め込み
// enablejsapi=1 で、JavaScript からアクセス
// playerapiid=ytplayer は、onYouTubePlayerReady イベントで
// オブジェクトを区別する為の文字列
// key=dev_key で、コントロール類自作モード( 但しムービ入れ替え可 )
swfobject.embedSWF(
	"http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
	"ytapiplayer", "425", "356", "8", null, null, params, atts
);

// プレイヤーが使えるようになると呼び出される
function onYouTubePlayerReady(playerId) {
	this_player = document.getElementById("object_id");
	// 初回サムネイル
	this_player.cueVideoById("ci5tOkmr-xo");
	// 終了イベントを知る為のイベント登録
	this_player.addEventListener("onStateChange", "onytplayerStateChange");
	document.getElementById("start_btn").disabled = false;
	document.getElementById("end_btn").disabled = false;
	document.getElementById("mess").style.display = "none";
}
var flg = 0;
function onytplayerStateChange(newState) {
	if ( newState == 0 ) {
		this_player = document.getElementById("object_id");
		// 次のムービー
		if ( flg % 2 == 0 ) {
			this_player.loadVideoById("ci5tOkmr-xo", 0);
		}
		if ( flg % 2 == 1 ) {
			this_player.loadVideoById("_Hb_PPGDBLc", 0);
		}
		flg++;
	}
}
</script>
<br>
<INPUT id=start_btn disabled type="button" value="複数動画ループ開始"
onClick='player=document.getElementById("object_id");player.loadVideoById("_Hb_PPGDBLc", 0);'
><INPUT id=end_btn disabled type="button" value="複数動画ループ終了"
onClick='player=document.getElementById("object_id");player.stopVideo();'
>

関連する記事

複数の YouTube の動画を JavaScript Player API を使って連続再生する( 一般プレーヤー )


posted by lightbox at 2014-06-26 09:21 | API | このブログの読者になる | 更新情報をチェックする

jQuery/JavaScript : 存在しない可能性のある画像の代替表示

すべての画像をチェックして visibility が hidden のものでサイズが50より小さい場合( 画像がない場合なので適当な数値です )にのみ別の画像に入れ替えます。最初に hidden にしておくのは、ロード時に画像が無いと見栄えが悪いからです。visibility を使うのは、見えないけれどもサイズが確保されるからです

jQueryバージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
$(function(){

	$("IMG").each(function(){
		if ( $(this).css("visibility") == "hidden" ) {
			if ( $(this).prop("width") < 50 ) {
				$(this).prop("src","http://winofsql.jp/image/winofsql.png");
			}
			$(this).css("visibility", "visible");
		}
	});

});
</script>
ノーマルバージョン
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>

<script type="text/javascript">
function noimage () {

	var cnt = document.getElementsByTagName("IMG").length;
	var i,target;
	for( i = 0; i < cnt; i++ ) {
		target = document.getElementsByTagName("IMG")[i];
		if ( target.style.visibility == 'hidden' ) {
			if ( target.width < 50 ) {
				target.src = "http://winofsql.jp/image/winofsql.png";
			}
			target.style.visibility = "visible";
		}
	}

}
if (window.attachEvent){
	window.attachEvent('onload', noimage);
}
else {
	window.addEventListener('load', noimage, false);
}
</script>



タグ:javascript
posted by lightbox at 2014-06-26 07:49 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

input 要素と id 属性のみで、jQuery ボタンテンプレート

input 要素のみ決定しておいて、参照する為に id 属性だけセットしたものを、jQuery でボタンとして使う為のコードテンプレートです。

チェックボックスとラジオボタンが、label 要素を要求するようなので、.after() しているところ以外は全て通常の追加設定になっているはずです。

※ .buttonset() は、ボタンの形状をグルーブ化するだけで、ラジオボタンとしての機能は、name 属性でグループ化されます。
※ 最初のボタン以外には、jQuery UI が必要です

実際問題、チェックボックスとラジオボタンの性能には疑問が残ります。クリックに正しく反応しない場合があるようなのでお勧めできません(ラベルのテキスト部分で起こるようです)



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#buttonContent1")
		.attr("type", "button")
		.val("ボタン1")
		.css({
			"font-size": "20px",
			"padding": "10px 40px 10px 40px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン1がクリックされました");
		});

	$("#buttonContent2")
		.attr("type", "button")
		.button()
		.val("ボタン2")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン2がクリックされました");
		});

	$("#buttonContent3")
		.attr("type", "checkbox")
		.after("<label for='buttonContent3'>")
		.button({ label: "トグルボタン" })
		.click(function(){
			alert( $(this).prop("checked") );
		});

	$("#radio1")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio1'>")
		.button({ label: "選択1" })
	$("#radio2")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio2'>")
		.button({ label: "選択2" })
	$("#radio3")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio3'>")
		.button({ label: "選択3" })
	$("#radio").buttonset();


});
</script>

<input id="buttonContent1">
<input id="buttonContent2">
<input id="buttonContent3">

<br><br>

<div id="radio">
<input id="radio1">
<input id="radio2">
<input id="radio3">
</div>


posted by lightbox at 2014-06-26 00:15 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年06月25日


PHP : 指定ファイル名でダウンロード 『application/octet-stream』 と 『Content-disposition: attachment』

application/octet-stream を使う事によって、通常はブラウザに表示されてしまうようなファイルをダウンロードさせる事ができます。

また、保存時のファイル名を正しくする為に Content-disposition を使用しています。

PHP のオンラインマニュアル にはそのものズバリのサンプルが readfile のページにあります。

例1 readfile() によるダウンロードの強制
<?php
$file = 'monkey.gif';

if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
}
?>
リンク先のマニュアルでも説明されていますが、readfile はそもそもこのような目的で使われる事を想定しているようで、『メモリに関する問題はなく、 巨大なファイルを送ってもかまいません。』とあります。特殊な目的で出力する為に内容に加工を加えるような場合は、後述のような内容で読み込めばいいはずです。

但し、キャッシュ制御が有効の場合は際限なく読み込んでしまって out of memory エラーが出る場合があるので、ob_end_clean であらかじめキャンセルしておくといいと思います。

システム書き込みバッファの内容を出力したい場合、キャッシュ制御が有効の場合は flash と ob_flush の両方が必要です

ファイルサイズは無くてもダウンロード可能ですが、ただ、存在しないとクライアント側で何パーセント処理済みかの表示が不可能になります。

fread を使用して読み込む
<?
header( "Content-Type: application/octet-stream" );
header( "Content-disposition: attachment; filename={$_GET['download_target']}" );

$path = '../download/' . $_GET['download_target'];

$size = filesize( $path );

header( "Content-Length: $size" );

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

if ( $fp ) {

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

	fclose( $fp );
}

?>


ファイルの取得方法では、小さいファイルならば、file_get_contents で十分ですが、大きなファイルではメモリが大量に消費させる可能性を考慮する必要があります。さらに、大きなファイルでは PHP 側のタイムアウトの設定も必要になる可能性があります。また、他のサーバーから取り込む場合は、ファイルサイズを取得するのに cURL 関数が必要になります。( PHP 5.0.0 以降 では filesize がそのまま使えるようなニュアンスですが、stat() を http がサポートしていないので使えません )

※ 参考 : max_execution_time (30/PHP_INI_ALL)

▼ PHP マニュアルの投稿の引用
<?php
$remoteFile = 'http://us.php.net/get/php-5.2.10.tar.bz2/from/this/mirror';
$ch = curl_init($remoteFile);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); //not necessary unless the file redirects (like the PHP example we're using here)
$data = curl_exec($ch);
curl_close($ch);
if ($data === false) {
  echo 'cURL failed';
  exit;
}

$contentLength = 'unknown';
$status = 'unknown';
if (preg_match('/^HTTP\/1\.[01] (\d\d\d)/', $data, $matches)) {
  $status = (int)$matches[1];
}
if (preg_match('/Content-Length: (\d+)/', $data, $matches)) {
  $contentLength = (int)$matches[1];
}

echo 'HTTP Status: ' . $status . "\n";
echo 'Content-Length: ' . $contentLength;
?>
cURL を使ったサンプル

PHP : WEBでもコマンドラインでもHTTPでファイルをダウンロードする


タグ:fread readfile PHP
posted by lightbox at 2014-06-25 17:32 | PHP + 特記事項 | このブログの読者になる | 更新情報をチェックする

2014年06月23日


Office Word で、セル一個のテーブルで強調表示する

もともと、文章になじむように設計されているので、図形等のオブジェクトを使うより簡単に強調できるのですが、テーブルに限らず Word では フォントを14にしたとたんフォントの上下の行間が大きくなるので、段落の設定から『1ページの行数を指定時に文字を行グリッド線に合わせる』のチェックを外します。

外すと、フォントのサイズによってはあまりにも上下の余裕がなくなるので、段落前と段落後の行数を手入力で小さく設定しています。






posted by lightbox at 2014-06-23 18:04 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

Word 2010 で『中抜き』の代替え

Word 2010 になると、Word 2007 であったフォントの文字飾りに『中抜き』がありませんが、『文字の効果』で多様な装飾が可能なので、そちらに移行したような感じになっています。ただ、Excel 97-2003 文書で保存すると『互換モード』になって、『文字の効果』自体は消失しますが、『中抜き』は生き返りました。そして、『互換モード』を解除しても中抜き効果はそのままで、文字の効果で作成可能なものです。

互換モードの『中抜き』



文字の効果から作ったもの

1) 塗りつぶしなし
2) 文字の輪郭の線(単色)
中抜きでは、輪郭のスタイルが以下のように変化していましたが、見た目にあまり変わりは無いようです




※ 2010 から互換モードに移行すると、中抜き効果は消失します


で、『文字の効果』で作ったものと『中抜き』で作ったものをそれぞれ PDF で出力して比較すると、結果は全く同じに見えました。



ちなみに、䯂と言う漢字は、IME パッドの画数で最大のものを使いました。この漢字は、Google の翻訳で日本語から英語には翻訳されずに無視されました・・・・






タグ:microsoft WORD
posted by lightbox at 2014-06-23 17:35 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2014年06月21日


Google MAP のリンクのパラメータ( QueryString )

Google MAP が相当変わりましたが、ちょっと触って見ると QueryString の基本部分はとても解りやすいものでした。

基本セット

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z?hl=ja

10z はズームでした。



交通状況( !5m1!1e1 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z/data=!5m1!1e1?hl=ja

!5m1!1e1 の部分でタイプが決まるようです。



路線図( !5m1!1e2 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z/data=!5m1!1e2?hl=ja



自転車( !5m1!1e3 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z/data=!5m1!1e3?hl=ja

何を表示するのか解りませんが、そのようなタイプがあるようです。



地形( !5m1!1e4 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z/data=!5m1!1e4?hl=ja



ストリートビュー対象地図( !5m1!1e5 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,10z/data=!5m1!1e5?hl=ja

本来人形アイコンをドラッグして変化するものですが、これで直接表示すると、マウスクリックでストリートビューに切り替わります



サテライト( !3m1!1e3 )

https://www.google.co.jp/maps/@34.6614067,135.4193668,2000m/data=!3m1!1e3?hl=ja

サテライトの場合は、ズームではなく、2000m といったような『高度』パラメータのようです。





タグ:Google Map
posted by lightbox at 2014-06-21 14:40 | Google | このブログの読者になる | 更新情報をチェックする
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 終わり