SQLの窓

2014年09月14日


JavaScript : DIV 内に時間範囲のボックスを表示する処理

個人別の出勤時間の表示です。

start と end は、最大の出勤時間幅を定義します。ここでは、6:00 〜 28:00( 次の日の 4時まで )
base_width は、その範囲を表示する幅です。
最小ブロックは 10 分にしています。
氏名 時間 ( 6:00 〜 28:00 ) 開始 終了
浦岡 友也1
6:00 7:00
浦岡 友也2
8:00 10:00
浦岡 友也3
11:00 14:00
浦岡 友也4
15:00 19:00
高田 冬美1
20:00 25:00
高田 冬美2
20:00 27:00

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
var start = 6 * 60;				// 開始時間(分)
var end = 28 * 60;				// 終了時間(分)
var base_range = end - start;			// 範囲時間
var base_width = 300;				// 表示幅
var block = base_width / (base_range/10);	// 10分単位の幅
// ***********************************************
// 時間範囲表示関数
// ***********************************************
function setRange(id,strTime1,strTime2) {

	var parts = strTime1.split(":");
	var h = parseInt( parts[0] );	// 時間部分
	var m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;	// start からの位置
	start_pos = m * block;		// 指定時間の開始位置

	parts = strTime2.split(":");
	h = parseInt( parts[0] );	// 時間部分
	m = parseInt( parts[1] );	// 分部分
	m = (h*60 - start + m)/10;
	end_pos = m * block;
	// 二つ目は幅に変換
	block_width = end_pos - start_pos;

	// 幅を表現する BOX の開始と幅を設定( jQuery である必要はありません )
	$("#" + id).css({ "left": start_pos+"px", "width": block_width + "px" });

}

$(function() {

	setRange("timebar0001","6:00", "7:00");
	setRange("timebar0002","8:00", "10:00");
	setRange("timebar0003","11:00", "14:00");
	setRange("timebar0004","15:00", "19:00");
	setRange("timebar0005","20:00", "25:00");
	setRange("timebar0006","20:00", "27:00");

});
</script>
<style type="text/css">
.rangebox {
	width:100%;
	height: 35px;
	background-color:#e0e0e0;
	position: relative;
}
.rangebox div {
	position: absolute;
	background-color:#ff0000;
	height: 35px;
}

#lboxtable * {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}
#lboxtable table {
	table-layout: fixed;
	width:600px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
</style>
<div id="lboxtable">
	<table>
		<tbody>
			<tr>
				<td style='width:100px;'>氏名</td>
				<td style='width:300px;'>時間 ( 6:00 〜 28:00 )</td>
				<td>開始</td>
				<td>終了</td>
			</tr>
			<tr>
				<td>浦岡 友也1</td>
				<td>
					<div class="rangebox">
						<div id="timebar0001"></div>
					</div>
				</td>
				<td>6:00</td>
				<td>7:00</td>
			</tr>
			<tr>
				<td>浦岡 友也2</td>
				<td>
					<div class="rangebox">
						<div id="timebar0002"></div>
					</div>
				</td>
				<td>8:00</td>
				<td>10:00</td>
			</tr>
			<tr>
				<td>浦岡 友也3</td>
				<td>
					<div class="rangebox">
						<div id="timebar0003"></div>
					</div>
				</td>
				<td>11:00</td>
				<td>14:00</td>
			</tr>
			<tr>
				<td>浦岡 友也4</td>
				<td>
					<div class="rangebox">
						<div id="timebar0004"></div>
					</div>
				</td>
				<td>15:00</td>
				<td>19:00</td>
			</tr>
			<tr>
				<td>高田 冬美1</td>
				<td>
					<div class="rangebox">
						<div id="timebar0005"></div>
					</div>
				</td>
				<td>20:00</td>
				<td>25:00</td>
			</tr>
			<tr>
				<td>高田 冬美2</td>
				<td>
					<div class="rangebox">
						<div id="timebar0006"></div>
					</div>
				</td>
				<td>20:00</td>
				<td>27:00</td>
			</tr>
		</tbody>
	</table>
</div>



posted by lightbox at 2014-09-14 01:13 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2014年09月11日


Seesaa のデザインHTMLの中の、<% if:page_name eq 'tag' -%> セクションでは TAG ページ専用のコンテンツを書く事ができます。



TAG ページは、デフォルトではブログ内への特定のリンクと、サイドバーのコンテンツが表示されるだけなので、表示されているページの価値は殆ど無く、Google の言葉を借りれば『コンテンツがありません』となります。

これは、Seesaa および さくらインターネットのブログシステムを利用している上では宿命となります。

ですが、デザインHTML の中を見ると、page_name と言う Seesaa のテンプレート内で有効な変数を使い、個別の表示を行っている事が解ります。

ですから、この条件の成り立っている範囲になんらかのコンテンツを表示すれば、ユーザはリンク以外にも情報を得る事ができます。ただ、どのタグリンクからページ遷移しても、おなじ内容になるので、ブログの紹介やテーマやプロフィールなどに使うのがいいでしょう。
<% if:page_name eq 'tag' -%>

<div class="text">
コンテンツを作成する
</div>

<div class="tag">

<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div>
<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
--></script>
<br />
<% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%>
<br />
<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;で全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><a href="<% article.page_url %>"><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div>
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(240) | tag_strip %></div>-->
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'photos' -%>
<% loop:list_data -%>
<div class="tag-photos">
<% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%>
<table>
<tr>
<td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td>
</tr>
</table>
<div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br />
<% if:photo_info -%>
サイズ:<% photo_info.width %>×<% photo_info.height %><br />
<% if:photo_info.size %>容量:<% photo_info.size | filesize %><% /if %>
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'audios' -%>
<% loop:list_data -%>
<div class="tag-audios">
<div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a>&nbsp;
<span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>&nbsp;&nbsp;<% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>&nbsp;&nbsp;<% /if %><% if:audio_info.size %><% audio.size | filesize %>&nbsp;&nbsp;<% /if %><% /if -%></span></div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'videos' -%>
<% loop:list_data -%>
<div class="tag-videos">
<table>
<tr>
<td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td>
</tr>
</table>
<div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br />
<% if:video_info -%>
<!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>-->
時間:<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br />
容量:<% video.size | filesize %><br />
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if %>
<% if:tag_service.service_key eq 'files' -%>
<% loop:list_data -%>
<div class="tag-files">
<div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div>
</div>
<% /loop -%>
<% /if -%>
<% if:pager -%>
<div class="tag-navi">
<% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %>&nbsp;&nbsp;<% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %>
</div>
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%>
</div>
<% /loop -%>
</div>

<div class="text">
コンテンツを作成する
</div>

<% /if -%>

また、逆に TAG ページに表示したく無い内容は以下のように記述します
<% if:page_name ne 'tag' -%>

ここは、TAG ページに表示したくない内容

<% /if -%>




Seesaa独自タグ簡易リファレンス

posted by lightbox at 2014-09-11 14:11 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする

2014年09月08日


ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ

Vertical align anything with just 3 lines of CSS
jQuery UI に resizable があります。これを使って、外側のサイズをリアルタイムに変更して中央のブロックレベル要素が中央に表示されるのを確認できます。

jQuery は、IE の古いバージョン用に 1.xx を使用していますが、結局 IE8(IE11 のエミュレータ) では正しく中央にはなりませんでした。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/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">

$(function() {
	$( "#base_box" ).resizable({});
});
</script>
<style>
#base_box {
	width:450px;
	height:200px;
	border: solid 3px #f00;
}
#inner_box {
	width: 100px;
	height: 50px;
	border: solid 1px #000;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}
</style>
<div id="base_box">
<div id="inner_box"></div>
</div>


タグ:jquery
posted by lightbox at 2014-09-08 20:24 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年09月05日


PHP : ファイルのアップロード時のデータのダンプ( PHP 5.4.0 以降で利用可能な php://input での取得 / ASP / C# )

PHP での方法

php.ini で、enable_post_data_reading = Off を設定すると、PHP へのPOST データは、php://input で取得する方法が使用できます( PHP 5.4.0 以降で利用可能 )。ヘッダ情報は、apache_request_headers で取得できます。( この関数は PHP のバージョンによっては動作しません )
このオプションを無効にすると、$_POST や $_FILES に値が入らなくなります。 この場合、投稿されたデータを読むには、ストリームラッパー php://input を使う以外の方法はなくなります。 これは、リクエストをプロキシしたり POST データを処理する際のメモリ消費量を抑えたりする際に有用です。
以下はテストコードです。
<?php

$postdata = file_get_contents("php://input"); 
file_put_contents("body.dat", $postdata );

$headers = print_r(apache_request_headers(),true);
file_put_contents("head.txt", $headers);

?>
OK

▼ body.dat
------WebKitFormBoundaryYhPBaYDBSNNO1pBx
Content-Disposition: form-data; name="send"

upload button
------WebKitFormBoundaryYhPBaYDBSNNO1pBx
Content-Disposition: form-data; name="MAX_FILE_SIZE"

100000
------WebKitFormBoundaryYhPBaYDBSNNO1pBx
Content-Disposition: form-data; name="fileUpload"; filename="001.png"
Content-Type: image/png

バイナリデータ……
バイナリデータ……
バイナリデータ……
------WebKitFormBoundaryYhPBaYDBSNNO1pBx
Content-Disposition: form-data; name="fileUploadTitle"

comment
------WebKitFormBoundaryb80JkuEC8QiLNDst--

ASP での方法

ASP を使うのは、Windows7 では、プロフェッショナル以上が必要だと思いますが、IIS をインストールすれば、比較滝簡単に利用できます。ただ、慣れないうちは管理コンソールが解りにくいのが難点です。

IISのインストール



仮想ディレクトリの作成



仮想ディレクトリを追加して、ディレクトリの参照を有効にすれば、だいたい普通に使えるはずです。

<% Call Response.AddHeader( "Content-Type", "text/html; Charset=shift_jis" ) %>
<form
	method=POST
	enctype=multipart/form-data>
<input type=file name=upload>
<input type=submit name=send value="送信">
</form>
<%
if Request.ServerVariables( "REQUEST_METHOD" ) = "POST" then
 
' ****************************
' オブジェクト作成
' ****************************
	Set Stream = Server.CreateObject("ADODB.Stream")
 
' ****************************
' ストリームオープン
' ****************************
	Stream.Open
 
' ****************************
' Stream タイプの指定
' ****************************
	Stream.Type = 1
 
' ****************************
' raw データの受信と書き込み
' ****************************
	nCount = Request.TotalBytes
	Stream.Write Request.BinaryRead( nCount )
	Stream.SaveToFile Server.MapPath("Post.dat"), 2 

' ****************************
' Stream を閉じる
' ****************************
	Stream.Close
 
end if
%>


以下はその時の HTTP ヘッダです
POST /web/upload/test.asp HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-shockwave-flash, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/vnd.ms-excel, */*
Referer: http://localhost/web/upload/test.asp
Accept-Language: ja
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Content-Type: multipart/form-data; boundary=---------------------------7da1c519203ca
Accept-Encoding: gzip, deflate
Host: localhost
Content-Length: 78138
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: __csv=cdeb8a0717bcd53; ASPSESSIONIDAQTSTRBR=JHMFJGLDFNIDKMNFDIGBOAEK

データは以下のようになります
-----------------------------7da1c519203ca
Content-Disposition: form-data; name="upload"; filename="1252328628672351.png"
Content-Type: image/x-png

ここにバイナリデータ
ここにバイナリデータ
ここにバイナリデータ
-----------------------------7da1c519203ca
Content-Disposition: form-data; name="send"

送信
-----------------------------7da1c519203ca--



AN HTTPD + C#(VS2010)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;

namespace cgi_get_body {
	class Program {
		static void Main(string[] args) {
			Stream inputStream = Console.OpenStandardInput();
			using (FileStream fileStream = new FileStream(@"C:\user\body.dat", FileMode.Create)) {
				inputStream.CopyTo(fileStream);
			}
			EasyResponse();
		}
		static void EasyResponse() {

			Console.WriteLine("Expires: Thu, 04 Oct 2000 00:00:00 GMT");
			Console.WriteLine();

			Console.WriteLine("<!DOCTYPE html>");
			Console.WriteLine("<html lang="ja">");
			Console.WriteLine("<head>");
			Console.WriteLine("</head>");
			Console.WriteLine("<body>");
			Console.WriteLine("OK");
			Console.WriteLine("</body>");
			Console.WriteLine("</html>");

		}

	}
}

C# でビルドした exe が存在するディレクトリを AN HTTPD の一般パスに登録して、.exe を『一般パスでも実行する』ようにし、FORM の ACTION を exe ファイルにすれば c:\user\body.dat にアップロード情報が書き込まれます。




posted by lightbox at 2014-09-05 02:13 | PHP | このブログの読者になる | 更新情報をチェックする

2014年09月04日


Seesaa のスマホページで使う、記事単位のPCページへの移動

何もしなくても、最初から PC ページへの移動ができるようになっていますが、Seesaa のコードでは、そのブログのトップページにしか移動しないので、新たに以下のようなコードを貼り付けるといいです。

※ 場所は、『ブログ説明』の『挿入テキスト(下部)』
<a href="javascript:document.cookie='force_pc=1; max-age=15768000; path=/'; document.cookie='force_sp=0; max-age=15768000; path=/'; document.location=document.location.pathname+'?'+(new Date()).getTime();">PCページのこの記事へ移動</a>
変更しているのは、document.location へセットしている内容で、document.location.pathname をセットして、現在の URL を再セットします。スマホページからスマホページですが、クッキーの正しい設定が事前に行われているので正しく動作しています。

(new Date()).getTime() を付加しているのは、ブラウザのキャッシュ制御がバグっていても正しく動作するように、毎回 URL を変更する為の追加文字列です。

戻す時の為に、PC ページ側での設定

PC 側でもそのままでは、トップページにしか戻らないので、以下のような処理を PC 用の HTML に書き込んでいます。
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
	str="";
	str+="<style type="text/css"> \n";
	str+=" \n";
	str+="#iphone-link { \n";
	str+="	display:none!important; \n";
	str+="} \n";
	str+="<span id="iphone-link2" style="width: 90%;display: block; padding-top: 3px; text-align: right; "><a href="javascript:document.cookie='force_pc=0; max-age=15768000; path=/'; document.cookie='force_sp=1; max-age=15768000; path=/'; document.location=document.location.pathname+'?'+(new Date()).getTime();">スマホページ(この記事)へ戻る</a></span> ";
	document.write(str);
}
</script>

#iphone-link で、元々のリンクを非表示にして、新しいリンクを作成しています。
※ 場所は、body の先頭です。



Seesaa独自タグ簡易リファレンス

タグ:Seesaa
posted by lightbox at 2014-09-04 02:55 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり