SQLの窓

2011年07月17日


jQuery : animation メソッド

jQuery の英文マニュアル : .animate() – jQuery API ページのサンプル
(Basic Usage)をもう少し解りやすく変更したものです。

All animated properties should be animated to a single numeric value,
プロパティは数値である事。

width, height, or left can be animated but background-color cannot be.
幅や高さや位置情報はアニメーションできるが、背景色は不可

Property values are treated as a number of pixels unless otherwise
specified. The units em and % can be specified where applicable.
通常は、ピクセルが利用されるが、em や % も利用可能 

In addition to style properties, some non-style properties such as 
scrollTop and scrollLeft, as well as custom properties, can be animated.
CSS で無い scrollTop と scrollLeft は動作します

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
margin, background, border のような一度に複数指定できるものは サポート外

In addition to numeric values, each property can take the strings 'show', 
'hide', and 'toggle'. These shortcuts allow for custom hiding and showing
 animations that take into account the display type of the element.
数値プロパティでは、show、hide、toggle が利用可能。

Animated properties can also be relative. If a value is supplied
with a leading += or -= sequence of characters
+= と -= で現在の値よりの相対指定が可能
と、だいたいを読んで以下のサンプルで試しています。100% 使うと、DIV 枠に 適合するようなサイズになったりします
二つ以上の効果を同時実行( 数値プロパティに対して )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
</script>
<input type="button" value="アニメーション" onclick='jqAction()'>
二つ以上の効果を同時実行( 数値プパティに対して )
<div style='position:relative;height:150px;'>
<img
	id="target"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
	'
/>
</div>
<script type="text/javascript">
function jqAction() {
	$('#target').animate(
		{
			// あるものを 0 にしたり、無いものを元に戻します
			// ( いったん見えなくなります )
			opacity: 'toggle',
			width: '-=200'
		},
		2000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target').animate(
				{
					opacity: 'show',
					width: '+=200'
				},
				2000
			);
		}
	);

}
</script>

<input type="button" value="フェードアウト/フェードイン" onclick='jqAction2()'>
<div style='position:relative;height:150px;'>
<img
	id="target2"
	src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
	width="442"
 	height="121"
	style='
		position: absolute;
		left: 10px;
		visibility: "visible"
	'
/>
</div>
<script type="text/javascript">
function jqAction2() {
	// 見えなくなくなります
	$('#target2').fadeOut(
		2000,
		function() {
			// 見えなくなった後、元へ戻します
			$('#target2').fadeIn(2000);
		}
	);

}
</script>


If the easing argument is not defined, the default swing function is used.
easing は、アニメーションのパターンですが、通常ライブラリでは、swing と linear のみのようで、増やしたい場合は プラグインを使用する必要があるみたいです。デフォルトは、swing になり、animation ではプロパティ毎に配列で easing を指定できると書いてあります。

width: ['toggle', 'swing']

こんな感じですね

関連する記事

jQuery の easing の追加



posted by lightbox at 2011-07-17 22:56 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2011年07月15日


Google のURL短縮 API の簡単な実装例

フリーフォントで簡単ロゴ作成に実装した内容です。

このサービスでは、設定パラメータを URL に保存するので相当 URL が長くなります。ですから、リンクの href に使うには少し不便なので、IFRAME で以下のページを埋め込みました。XMLHttpRequest で呼び出しても良かったのですが、本体の画面構成がいっぱいいっぱいだったので、埋め込みにしています。

IFRAME を開くと同時に、URL を転送して、IFRAME 内で変換してもらうようにしています。このほうが、URLの内容を再度確認できます。



JSON で内容が返って来るので、json_decode を使ったほうが簡単になるのですが、サンプルとして他の JSON の内容も JavaScript で直接全て使えるサンプルとしてまずテストしました。
<?
header( "Content-Type: text/html; Charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>URL短縮</title>
<style type="text/css">

* {
	font-size:14px
}

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

	if ( document.getElementById("url").value == '' ) {
		alert("URLが指定されていません   ");
		return false;
	}

	return true;

}
</script>
</head>
<body>
<div style='padding:10px;'>
<input type="button" value="閉じる" style='float:right' onclick='parent.document.getElementById("ggurl").style.display="none"'>
<br>
<form
	id="frm"
	method="post"
	style='display:inline;'
	onsubmit='return setData();'
>
	<table>
	<tr>
	<td>URL</td>
	<td><textarea readonly id="url" name="url" style='width:390px;height:200px;'><?= $_POST['url'] ?></textarea></td>
	<tr>
	<td colspan=2>
	<input
		type="submit"
		value="URL短縮"
	/>
	</td>
	<tr>
	<td>短縮後</td>
	<td>
		<input
			readonly
			type="text"
			id="text"
			name="text"
			style='width:390px;'
			onclick='this.select();'
		>
	</td>
	<tr>
	</table>

</form>

<?
if ( strtoupper( $_SERVER['REQUEST_METHOD'] ) == 'POST' ) {

	$url = googleShorten( $_POST['url'] );
	$url = str_replace( "\n", "", $url );
	$url = str_replace( "'", "\\'", $url );

?>
<script type="text/javascript">
var shorten = eval("(" + '<?=$url?>' + ")" );
document.getElementById("text").value = shorten.id;
</script>
<? } ?>

</div>
</body>
</html>
<?
function googleShorten( $url ) {

	// *********************************************************
	// curl 処理
	// *********************************************************
	$curl = curl_init();
	// *********************************************************
	// https 用
	// *********************************************************
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1);

	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
	curl_setopt($curl, CURLOPT_HEADER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
	$api_url = "https://www.googleapis.com/urlshortener/v1/url";
	$api_url .= "?key=APIキー";
	curl_setopt($curl, CURLOPT_URL, $api_url );
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "{\"longUrl\": \"{$url}\"}" );

	$header = array();
	$header[] = 'Content-Type: application/json';
	curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
//	$handle = fopen("./header.txt", "w");
//	curl_setopt($curl, CURLOPT_WRITEHEADER, $handle);

	$result = curl_exec($curl);
	curl_close($curl);

	return( $result );

}
?>
PHP : Google のURL短縮APIを呼び出す関数
Google URL Shortener API


posted by lightbox at 2011-07-15 14:21 | Google | このブログの読者になる | 更新情報をチェックする

2011年07月12日


Excel で勝手に「折り返して全体を表示する」になる理由

クリップボードから改行データが含まれる文字列をセル内に直接貼り付けると
「折り返して全体を表示する」のチェックが ON になります。また、後から
でも ALT+Enter で改行を挿入すると、やはり「折り返して全体を表示する」
のチェックがON になります。

改行データの状態を確認するには、CTRL+SHIFT+U で「数式バーの展開」
を行います。




「折り返して全体を表示する」のチェックのオン/オフは、リボンから行う
のが通常です





タグ:トラブル
posted by lightbox at 2011-07-12 12:03 | Microsoft Office | このブログの読者になる | 更新情報をチェックする

2011年07月03日


PHP : Google のURL短縮APIを呼び出す関数

json文字列が取得できるので、JavaScript に以下のようにセットすると使えます。
<?
$ret = googleShorten("目的のURL");
$ret = str_replace( "\n", "", $ret );
$ret = str_replace( "'", "\\'", $ret );
?>
<script type="text/javascript">
var shorten = eval("(" + '<?=$ret?>' + ")" );
</script>
function googleShorten( $url ) {

	// *********************************************************
	// curl 処理
	// *********************************************************
	$curl = curl_init();
	// *********************************************************
	// https 用
	// *********************************************************
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1);

	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 30);
	curl_setopt($curl, CURLOPT_HEADER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($curl, CURLOPT_BINARYTRANSFER, true);
	$api_url = "https://www.googleapis.com/urlshortener/v1/url";
	$api_url .= "?key=ここにAPIs Consoleで取得したキーをセット";
	curl_setopt($curl, CURLOPT_URL, $api_url );
	curl_setopt($curl, CURLOPT_POST, 1);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "{\"longUrl\": \"{$url}\"}" );

	$header = array();
	$header[] = 'Content-Type: application/json';
	curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
//	$handle = fopen("./header.txt", "w");
//	curl_setopt($curl, CURLOPT_WRITEHEADER, $handle);

	$result = curl_exec($curl);
	curl_close($curl);

	return( $result );

}

APIs Console

▼ APIs Console です


▼ APIキーの取得です


▼実際に 正しいAPIキーで呼ばれているかどうかは、これで確認します



Google のURL短縮 API の簡単な実装例
Google URL Shortener API



posted by lightbox at 2011-07-03 18:18 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

p.tl(pixiv) へ URL を渡してページを開く方法

やってみたら「できた」というレベルなので、
仕様とかを調べたわけではありません

URL の内容によっては、ひょっとしてまだ変換が必要かもしれません
( あまりに長い URL は無視されます )
function jumpPtl(strUrl) {

	strUrl = strUrl.replace(/%/g,'%2525');
	strUrl = strUrl.replace(/&/g,'%26');
	strUrl = strUrl.replace(/#/g,'%23');
	window.open( "http://p.tl/?q="+strUrl );

}




posted by lightbox at 2011-07-03 13:48 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
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 終わり