SQLの窓

2015年01月28日


JavaScript : setTimeout の第一引数の正しい書き方。

IE10、IE11 で第三引数以降を使って関数に値を引き渡せるので、第一引数は無名関数を書くか、定義済みの関数名を書くのが正解です。但し、過去の IE9 以前の対応が必要な場合は、グローバル変数等を使用すればいいと思います。文字列は使えますが、セキュリティ上の理由から避けたほうが良いとされています。

昔の IE のマニュアルにはこう書いていたのですが、

文字列。指定されたインターバルで実行されるコード。
(  eval() を使うのと同様の理由で非推奨です / Mozilla のドキュメント より )

最新のマニュアルではこう書かれています。
( このドキュメントでは、第3引数が正しくないようです / 正解は Mozilla のドキュメントを参照 )

指定した間隔が経過したときに実行されるコードを示す関数ポインタや文字列を指定します( Microsoft の英文には API なので、実際に function pointer とあります )


▼ 無名関数


現在では関数名を記述する場所で無名関数をその場に書く事が多いですが、もちろん文字列でも動作します。文字列の場合は、処理する内容をタイマーが発生する時間に内容を確定させておく事が重要です( 全て文字列なので、それがかならずそのまま実行される事を利用します )

具体的には、関数内に値を埋め込む事で時間差の問題を解決できます。

関数名では、IE11、Firefox、Google Chrome、Opera で第三引数(関数の引数の数ぶん第4、第5と指定できます)が利用できる事を確認しています。
( IE では IE10 以降で第3引数が使用できるようです )
<script type="text/javascript">

var param = "NO!"

function startTest(param) {

	// OK はこの時点で確定です
	// ※ 文字列に startTest の引数を埋め込んでいます
	setTimeout(
		'(function(str){alert(str)})("startTestの引数:'+param+'");',
		500);

	// 第三引数で、setTimeout 実行時点の値を引き渡します
	// 関数の引数を第三引数以降で渡します
	// ( IE9 以前は実装されていません )
	setTimeout(
		function(a,b){console.log(param);alert(a+" / "+b)},
		600,
		"setTimeoutの引数:" + param,
		"ここは第4引数です");

	setTimeout(
		refTest,
		700,
		param,
		"ここは第4引数です");

	// param 内は NO! になります
	// ※ グローバルの param を参照します
	setTimeout('alert("グローバル:"+param)',1000);

}

function refTest(a,b) {

	console.log(param);
	alert("定義済み関数の参照:"+a+" / "+b)

}

startTest("OK");

</script>



posted by lightbox at 2015-01-28 06:40 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする

2015年01月23日


Google の Plus API を使って Google+ 投稿データを jQuery UI のアコーディオン(accordion)で表示する

アプリケーションを認証すると、以下のようになります。



一番上のブルーのメニューは、ログアウトや関連リンクをセットしてあります。下の黒いバーが jQuery UI のアコーディオンを使用して Google Plus の投稿データを表示しています。


▼ 実際のデモページです。
http://winofsql.jp/gapi/examples/page2.htm

page2.htm に IFRAME 内で接続用のリンクを用意しています。こうしておくと、どんなページにも簡単に接続リンクを追加できます。IFRAME 内は普通のリンクで、target="_top" になっています。

リンクには QueryString として初期ページと処理ページを渡して標準化しています。

page2.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<iframe
	src="start.php?start=page2&action=main_action2"
	name="myframe"
	frameborder="0"
	scrolling="no"
	width="200"
	height="100"
></iframe>

</body>
</html>

▼ 接続リンクのあるページ
start.php
<?php
require_once("user_client.php");

$_SESSION['start'] = $_GET['start'];
$_SESSION['action'] = $_GET['action'];

$authUrl = $client->createAuthUrl();

?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body style='background-color:#e0e0e0;'>
<a href="<?= $authUrl ?>" target="_top">接続</a>
<br><br><br>
ここは IFREAME です
</body>
</html>


▼ Google Plus の投稿情報を jQuery UI のアコーディオンとして
main_action2.php
<?php
require_once("user_client.php");

/************************************************
  アクセストークンがある場合
  但し、期限が切れている場合は再度取得する必要
  があるので、認証用の URL を作成する
 ************************************************/
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
  $client->setAccessToken($_SESSION['access_token']);
  if ($client->isAccessTokenExpired()) {
    unset($_SESSION['access_token']);
    header("Location: {$_SESSION['start']}htm");
    exit();
  }
}
/************************************************
  アクセストークンが無い場合
  認証用の URL を作成する
 ************************************************/
else {
    header("Location: {$_SESSION['start']}.htm");
    exit();
}

/************************************************
  目的 API の処理
 ************************************************/
$service = new Google_Service_Plus($client);

// タスクリストの一覧
try {
	$obj_activities = $service->activities->listActivities("me", "public");
}
catch(Exception $ex) {
	header('Location: logout.php');
	exit();
}

// タスクリストの配列として取得
$activities = $obj_activities->getItems();
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="http://winofsql.jp/jquery/plugins/smartmenus/sm-blue.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#main-menu {
	margin-top: -3px;
	position:relative;
	z-index:9999;
	width:400px;
}
pre {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	width: 700px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/smartmenus/jquery.smartmenus.min.js"></script>

<link type="text/css" href="http://winofsql.jp/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

</head>
<body>

<ul id="main-menu" class="sm sm-vertical sm-blue sm-blue-vertical">
	<li><a href="#">処理</a>
		<ul>
			<li><a href="page1.htm">HOME</a></li>
			<li><a href="logout.php">ログアウト</a></li>
			<li><a href="https://security.google.com/settings/security/permissions" target="_blank">Google のアカウント権限</a></li>
			<li><a href="http://code.google.com/apis/console/" target="_blank">APIs Console</a></li>
		</ul>
	</li>
</ul>

<script>
$('#main-menu').smartmenus();
</script>


<div id="google-plus">
<?php

for( $i = 0; $i < count($activities); $i++ ) {


	$obj = $activities[$i]->getObject();


	$main_text = $obj->getContent();

	$attachments = $obj->getAttachments();

	$attachments_displayName = $attachments[0]->displayName;

	// アコーディオンタイトル
	print "<h3>投稿" . ($i+1) . " : " . mb_substr($main_text,0,20,"UTF-8") . " / " . mb_substr($attachments_displayName,0,20,"UTF-8") . "</h3>";

	// アコーディオンコンテンツ
	print "<pre>";

	print "投稿部分 : " . $main_text . "<br>";

	print "▼--- 添付部分----<br>";

	print $attachments[0]->displayName . "<br>";
	print $attachments[0]->content . "<br>";
	print $attachments[0]->url . "<br>";
	print $attachments[0]->image['url'] . "<br>";
	if ( $attachments[0]->image['url'] != "" ) {
		print "   <img src=\"" . $attachments[0]->image['url'] . "\"><br>";
		print "   " . $attachments[0]->image['type'] . "<br>";
		print "   " . $attachments[0]->image['width'] . "<br>";
		print "   " . $attachments[0]->image['height'] . "<br>";
	}
	print "<br>";

	print "</pre>";

}
?>
</div>

<script>
$('#google-plus').accordion({
		heightStyle: "content",
		header: "h3"
	});
</script>


</bodyy>
</html>


Google Plus の投稿データは多くの階層内にいろいろなクラスが使われており、仕様上メソッドで呼び出す内容も多い為、一つ一つ階層を print_r で表示して取り出し方を Goolge のクラスのソースと照らし合わせながら確認する必要があります。

APIs Explorer

APIs Explorer ページの右上で認証後、me と public をセットして内容を確認できます


▼ 使用する API によって、スコープを変えれるよう標準化しています
user_client.php( 共通 )
<?php
session_start();

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" );

require_once realpath(dirname(__FILE__) . '/../autoload.php');

$client_id = '';
$client_secret = '';
$redirect_uri = 'http://winofsql.jp/gapi/examples/idtoken.php';

$client = new Google_Client();
$client->setClientId($client_id);
$client->setClientSecret($client_secret);
$client->setRedirectUri($redirect_uri);
if ( $_GET['start'] == 'page1' || $_SESSION['start'] == 'page1' ) {
	$client->addScope('https://www.googleapis.com/auth/tasks');
}
if ( $_GET['start'] == 'page2' || $_SESSION['start'] == 'page2' ) {
	$client->addScope('https://www.googleapis.com/auth/plus.login');
	$client->addScope('https://www.googleapis.com/auth/plus.me');
}

?>


▼ API から呼び出されるページ
idtoken.php
<?php
session_start();

require_once("user_client.php");

if (isset($_GET['code'])) {

  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  header("Location: {$_SESSION['action']}.php");

}
else {
  header("Location: {$_SESSION['start']}.htm");
}

?>

関連する記事

Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました



タグ:google API
posted by lightbox at 2015-01-23 20:44 | Google | このブログの読者になる | 更新情報をチェックする

2015年01月22日


C# : Picasa の指定したアルバム内に OpenFileDialog を使って複数の画像を一気にアップロードするコンソールアプリケーション

クライアントライブラリについては、以下を参照して下さい

VB.net(C#) : Picasa より指定したアルバム内の画像の URL 一覧を取得する

▼ 正式英文ドキュメントとサンプルコード
Developer's Guide: Protocol
Google.GData.Client Namespace
PhotoBrowser.cs

using System;
using System.Windows.Forms;
using Google.GData.Client;
using Google.GData.Photos;

class Module1 {

	// OpenFileDialog を使う為
	[STAThread]
	static void Main() {

		// 引数のチェック( user password アルバムタイトル )
		string[] arguments = Environment.GetCommandLineArgs();
		if ((arguments.Length != 4)) {
			return;
		}

		// 複数画像を選択する
		OpenFileDialog openFileDialog = new OpenFileDialog();
		openFileDialog.Filter = "JPeg Files|*.jpg";
		openFileDialog.Multiselect = true;

		DialogResult result = openFileDialog.ShowDialog();
 
		if( result == DialogResult.OK ) {
			// 選んだファイルのパス一覧
			string[] files = openFileDialog.FileNames;

			// companyName-applicationName-versionID で適当に設定
			PicasaService picasaService = new PicasaService("mymymy-photos-v1");
			picasaService.setUserCredentials(arguments[1], arguments[2]);

			AlbumQuery query = new AlbumQuery();
			query.Uri = new Uri(PicasaQuery.CreatePicasaUri(arguments[1]));
			PicasaFeed picasaFeed = picasaService.Query(query);

			if ((!(picasaFeed == null) && (picasaFeed.Entries.Count > 0))) {
				foreach (PicasaEntry entry in picasaFeed.Entries) {
					if ((arguments[3] == entry.Title.Text)) {
						Console.WriteLine( entry.Title.Text );
						// パスの最後の アルバムID を取得
						String[] pathArrayData = (entry.Id.AbsoluteUri).Split('/');
						Console.WriteLine( pathArrayData[pathArrayData.Length-1] );

						Uri postUri = new Uri(PicasaQuery.CreatePicasaUri(arguments[1],pathArrayData[pathArrayData.Length-1]));

						foreach ( string file in files ) {
							System.IO.FileInfo fileInfo = new System.IO.FileInfo(file);
							System.IO.FileStream fileStream = fileInfo.OpenRead();
							// アップロード
							picasaService.Insert(postUri, fileStream, "image/jpeg", file);
							fileStream.Close();
						}
					}
				}
			}
		}
	}
}




タグ:google API
posted by lightbox at 2015-01-22 01:16 | Google | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり