SQLの窓

2012年04月28日


$.ajax({}).then( doneCallbacks, failCallbacks ); のテスト

読みだすデータは、shift_jis で書かれた JSON 形式のテキストです。
{
	"version" : "1.01a",
	"name" : "日本語名表示"
}
.then() は、Windows8 Metro(JS) のすべての処理において同じ仕様のものが使われています 成功の場合 1) success が呼ばれる 2) doneCallbacks が呼ばれる 失敗の場合 1) failCallbacks が呼ばれる 2) statusCode 内が呼ばれる JSON.parse を使用しているのは、Windows8 Metro(JS)との互換の為です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
</head>
<body>

<script type="text/javascript" src="http://localhost/json/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$.ajax({
	url: "target.json",
	beforeSend: function ( xhr ) {
		xhr.overrideMimeType("text/plain; charset=shift_jis");
	},
	success: function(data, textStatus, jqXHR) {
		alert(data);
		alert(textStatus);
		alert( JSON.stringify(jqXHR,null,"   ") );
	},
	statusCode: {
		404: function() {
			alert("ページが存在しません");
		}
	}
}).then(
	function(data, textStatus, jqXHR) {
		var obj = JSON.parse( data );
		$("#tx1").val( obj.version );
		$("#tx2").val( obj.name );
	},
	function(data) {
		alert("err\n"+JSON.stringify(data,null,"   "));
		alert("この後、statusCode の処理が実行されます");
	}
);

</script>

<input type="text" id="tx1">
<br />
<input type="text" id="tx2">
</body>
</html>



posted by lightbox at 2012-04-28 21:48 | jQuery + Ajax | このブログの読者になる | 更新情報をチェックする

Google ドキュメントを使ってソースコード配布と解説

Google Drive が始まったので、かねてより Google+ ではソースコードだけが共有するの
に面倒だったので、使ってみると思いの外便利です。で、思いもしなかった効果があった
ので、ここで試してみます。

以下のコードは、Three.js で使われていた WebGL のチェックコードで、実行文ですので
処理されて結果が true か false になります。
上の表示は、Google ドキュメントを公開して IFRAME でコードを取得して少し見栄え
を調整して貼り付けていますが、Excel や Word のように『図形』を追加して表現が
簡単にできます。これは Word と同様の『文書』ですが、ソースコードは CTRL+A で
選択されるのでコピーも簡単です。

挿入から図形描画



文書の作成



ソース部分の強調も時間をかければ見やすいものになりますし、変更は Google ドキュ
メントのほうで基本的な内容は行います。
( 表示エリアの調整は IFRAME 側で行う必要があります )

IFRAME 基本コードの取得






posted by lightbox at 2012-04-28 01:24 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月25日


余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

画面はまたこのゲームサンプル(の一部)を使いました
( 正式タイトルは JavaScript and HTML5 touch game sample )



結局、要素の部分を置き換える為の正式な SDK は存在しました。そのサンプルのタイトルは
『Loading HTML fragments sample』ですが、navigate メソッドはやはり骨格であって、置き
換えは自分で行って検証しました。置き換える為に使われる HTML のヘッダ部分の置き換え後
の影響は厳密では無い事もわかりましたが、確実に説明のつかない結果だったので、不必要な
ものは省いてコードを構成しています。

一つ解ったのは、navigate の骨格を使う事によって、自動的に back メソッド等が使えるよう
になる事です。他のサンプルでも不思議だったのですが、『戻る』アイコンがあるのに、どうも
イベント定義されているふしが無かったのですが、navigate 完了後に一網打尽にされるようで
す。
続きを読む
posted by lightbox at 2012-04-25 22:51 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月24日


querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード

Windows8 Metro(JS) のコードを追っかけていて気になったので、確認しておこうと思い、
簡単な確認用のコードを作成しました。

forEach の引数は二つで、二つ目は省略可能です。オブジェクトを指定した場合、その
オブジェクトを一つ目の引数の関数内で、this として参照できました。関数は、3つの
引数を取る事ができ、それぞれ、配列の要素、その要素のインデックス番号、配列その
もののようです。

※ IE では forEach は IE9(標準モード) である必要があります
<div id="target">
<input class="ent" value="a" />
<input class="ent" value="b" />
<input class="ent" value="c" />
</div>

<script type="text/javascript">
var col = document.querySelectorAll(".ent");
var arr = [];
arr.push( col[0] );
arr.push( col[1] );
arr.push( col[2] );
arr.forEach(
	function( element, index, base ) {
		console.log(element.value);
		console.log(index);
		console.log( base[index].value );
		console.log(this.ref);
	}
	,{ ref: "参照できています" }
);
</script>


posted by lightbox at 2012-04-24 16:44 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月19日


Three.js で行われている整然としたクラス作成

Three.js は、Canvas や WebGL を使った 3D を表現するライブラリですが、中を読むのに
このようなクラス定義が基本なので非常に解りやすいです。
<!doctype html>
<html lang="en">
	<head>
		<title>サンプル</title>
		<meta charset="utf-8">
		<style>
		</style>
	</head>

<body>
<script>
var R101 = {};
R101.Class = function(){
	this.version = "1.01";
	this.colors = [];
	this.flg = false;
};
R101.Class.prototype = {
	constructor: R101.Class,
	method1: function() {
		alert("method1:"+this.version);
	},
	method2: function() {
		alert("method2:"+(this.data||"未定義です"));
	},
	method3: function() {
		alert("method3:"+this.flg);
		this.data = {};
	}
}

var obj = new R101.Class();

</script>

<input type="button" value="method1" onclick="obj.method1();" />
<input type="button" value="method2" onclick="obj.method2();" />
<input type="button" value="method3" onclick="obj.method3();" />
</body>
</html>
まず、R101 と言う名前空間を作成していますが、一般的にライブラリを作成する時に有効で、
変数が他から独立して作成されるようになります。R101 は、一般的な JavaScript のオブジェク
トになります。そこに、R101.Class として、function を定義しています。
( ※ R101.Class では、this で変数を作成して、後に作成されるインスタンスで参照されます。)

R101.Class.prototype に、JavaScript のオブジェクトを設定し、そのメンバとして、コンストラ
クタとメソッドを定義しています。ここで、たとえ prototype の設定をしなくても、コンストラ
クタは R101.Class になり、以下の実行を行うと一致します

if ( R101.Class === obj.constructor ) {
	console.log("一致");
}

しかし、それではメソッドの定義を R101.Class 内でする事になり、記述上コンストラクタとメソ
ッドとプロパティの定義がごちゃ混ぜになってしまいますが、この場合だと見事に3か所に分けて
定義できますし、後から見ても一目瞭然となります。

Windows8 Metro JS SDK でもよく使われていた || の意味

alert("method2:"+(this.data||"未定義です"));

この || は最後に true 扱いになったものを利用すると言う意味で、this.data が
定義されていた場合はその中を表示しますが、未定義の場合は "未定義です" のみを
表示します


posted by lightbox at 2012-04-19 22:11 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2012年04月18日


Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します

サンプルコードにあった記述を簡略して記述して実行テストして試してみました。
ここでは、getter の戻り値が function なので、prop という本来プロパティで
あるはずのものが、メソッドとして( 引数あり )定義されて実行できるようにな
っていました。

※ 最初の function は コンストラクタで、func はメソッドとなります。

var test = WinJS.Class.define(
	function () {
	},
	{
		func: function () { },
		prop: {
			get: function () {
			return
				function (a, b, c) {
					return a + b + c;
				}
			}
		}
	}
);

var inst = new test();

Debug.writeln(inst.prop(1, 2, 3));



posted by lightbox at 2012-04-18 13:18 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月17日


Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

デベロッパーの時のサンプルと、コンシューマーの時のサンプルとでは若干仕様変更
があったような気がしますが、それでも画面変更は基本的にこんな感じで行うようです。
( そういえば、MessageDialog のスタイル(色)が変わっていました )

今日調べたサンプルは、以下のような画面でゲームそのものは単純ですが表示ページ
がたくさんありました。



メインページ(default.html)画面入れ替え用の DIV が一つあるだけで、画面は他の HTML
より動的に作成されます。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Game</title>

    <!-- WinJS references -->
    <link rel="stylesheet" href="//Microsoft.WinJS.0.6/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- App references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/assetManager.js"></script>
    <script src="/js/movingAverage.js"></script>
    <script src="/js/frameTimer.js"></script>
    <script src="/js/touchPanel.js"></script>
    <script src="/js/scores.js"></script>
    <script src="/js/gameState.js"></script>
    <script src="/js/game.js"></script>
    <script src="/js/navigator.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/homePage.js"></script>
    <script src="/js/creditsPage.js"></script>
    <script src="/js/rulesPage.js"></script>
    <script src="/js/gamePage.js"></script>
    <script src="/js/scoresPage.js"></script>
</head>
<body>
    <!-- Fragment host -->
    <div id="contentHost" data-win-control="GameManager.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>

    <!-- App bar -->
    <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{
        commands:[
            {id:'home', label:'Menu', icon:'&#xE10F;', section: 'global', onclick: GameManager.navigateHome},
            {id:'play', label:'Game', icon:'&#xE102;', section: 'global', onclick: GameManager.navigateGame},
            {id:'rules', label:'Rules', icon:'&#xE104;', section: 'global', onclick: GameManager.navigateRules},
            {id:'scores', label:'Scores', icon:'&#xE113;', section: 'global', onclick: GameManager.navigateScores},
            {id:'credits', label:'Credits', icon:'&#xE10C;', section: 'global', onclick: GameManager.navigateCredits},
            {id:'newgame', label:'New', icon:'&#xE10E;', section: 'selection', onclick: GameManager.game.newGame},
            {id:'pause', label:'Pause', icon:'&#xE103;', section: 'selection', onclick: GameManager.game.togglePause}
        ]}"></div>
</body>
</html>

パっと見は、contentHost に勝手にページがロードされるように読めるのですが、すべて
カスタムの作業となっており、その時に利用されるのが、WinJS.Navigation Namespace と
いう名前空間です。

ここに navigate と言う function が存在するのですが、それを実行したからといって
何かが起こるのでは無く、navigated というイベントが発生するだけで、そこで実際の
実装を行うようですが、他にもこの作業を行うのにいろいろガイドラインが存在するよ
うです。

これは、無理に読み解かずに『ありもの』を利用するのが良いと思われます



posted by lightbox at 2012-04-17 23:19 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月14日


Google+ のプロファイルの『バッジ』を取得してウェブサイトやブログに貼りつける

バッジを作成すると、ウェブサイトの訪問ユーザーはサイトを離れることなくバッジから直接
Google+ のサークルにあなたを追加できます。ユーザーとの交流を深めましょう。


まず、プロフィールを表示して、アドレスバーの『自分の番号』を取得します。



そのあと、バッジを取得するページへ行って、その番号を貼りつけます



ページの一番下にコードが表示されるのでウェブサイトまたはブログに貼りつけます

▼ 貼りつけてみました
Google+ ページでも同様にして取得できます





posted by lightbox at 2012-04-14 10:50 | Google | このブログの読者になる | 更新情報をチェックする

GIMP Portable 2.6.11 Rev 3 のバグに伴う、旧バージョン(2.6.8)のインストールと、インストール時の注意事項

Windows7 で使おうと思ったら結局 2.6.8 を使う事になりました

2.6.12 も 2.7(ベータ)もメニューが反転しない



Windows7 では『クラシック』を使っているのでこうなってしまいました。エアロを利用している場合は問題は出ないはずです。しかし、クラシックを含む『ベーシック』ではこのようになるものもあるのでこれも GIMP Portable のバグです。

対応としては、Windows 側で選択色を変更します







しかし、GIMP のためだけに Windows の見え方をすべて変更する事になるので、2.6.8 を使えばいいとは思います。


WindowsXP でのバグのお話

ずっと、2.6.6 を使っていて、ある操作手順を書こうと思って最新版を入れると、クリップボードから貼り付けた時に画像がずれるという現象が発生しました。



この状態で、Windows のペイントで貼り付けると正しく貼りつきます。こんなバグだとどこかで説明されているかと思いましたが、見つける事ができず、仕方無いので旧バージョンをインストールしようと思い、そのリンクを探したのですがうまく見つける事ができなかったので、最新版のダウンロード URL から親ディレクトリに移動して、そこからたどってみつけました。

PortableApps.com: Portable Software/USB - Browse /GIMP Portable at SourceForge.net



どれがいいか全部試せばいいのですが、日付からして安定しているのは 2.6.8 である可能性が高かったのでそれを使いましたが、気になる人は試してみて下さい。ポータブルは、インストールしてもフォルダができるだけで、削除すればすぐなくなります。

そこで注意事項ですが。

★ 日本語を含むフォルダに入れない。
★ 空白を含むフォルダに入れない

というのは基本条件ですが、あとあとスクリプトの追加等などをする場合、他のフォルダ内に入れてしまうと階層が深くなりすぎますし、権限の問題も出る可能性があるのでC ドライブのルートに入れるのが良い方法です。( 削除もすぐ選択できます )

ただ、この状態のままだとフォルダが無いと言われるので、C: を付加します。





どうしても、2.6.11 の機能が必要な場合( 具体的な事は解りませんが )は、ポータブルでは無い GIMP for Windows を使う必要があります



タグ:トラブル
posted by lightbox at 2012-04-14 10:22 | GIMP | このブログの読者になる | 更新情報をチェックする

自宅用Twitter投稿ツール / Twitter、bit.ly、Twitpic のAPIを自分で登録して使う : IE拡張

※ アカウントに関わる情報がレジストリに登録されるので、利用は『自宅のみ』を想定しています





Twitter 投稿用は、Twitter の「開発者」から移動してログインし、右上の ユーザーアイコンから
My Applications に入ってからアプリケーションを登録して、
Consumer Key
Consumer Secret
Access Token
Access Token Secret

を登録すると Twitter に投稿できます。

bit.ly Login と bit.ly Apikey を登録すると短縮URLが使える
ようになります。Twitpic Apikey を登録すると、画像を Twitpic
にアップロードできるようになります。

画像は、WEB 上で画像を右クリックして実行すると、アップロード
用に右側部分にその画像が表示されます。

インストール方法

1) openreg.bat を実行
( レジストリエディタを開いて、MenuExt へ移動します )

MenuExt の下にキーを作成します。この文字列が右クリックした
時のポップアップメニューに表示されます



※ @アカウント名 を使うといいと思います
※ いくつでも作る事ができます( 1フォルダ1ユーザ )



2) 作成したキーの「規定」に TwitLink_ex.htm へのフルパスを登録します

( SHIFT キーを押しながら右クリックするとパスをコピーできます )


※ 必ずパスからダブルクォートを削除してください


3) 以下の値を作成したキーの値として登録して下さい

Contexts	REG_DWORD	3f
Flags		REG_DWORD	1


4) TwitLink_ex.htm の 13、14、15 行目を変更します

RegName = "レジストリキー"
HomeUrl = "ホームURL"
strInstall = "インストールディレクトリ"

RegName		: 作成したキー
HomeUrl		: ログ投稿する為の URL( 無くても良い )
		※ ファイル名が無い場合は最後に / が必要です
strInstall	: 2) で登録したファイルのあるディレクトリのフルパス

(例)
	RegName = "@sworc"
	HomeUrl = ""
	strInstall = "C:\laylaClass\sworc"
IE で(画像を)右クリック ※ 設定ボタンをクリックすると設定入力フィールドが表示されます まず Twitter 投稿用に以下を登録します Consumer Key Consumer Secret Access Token Access Token Secret bit.ly の URL 短縮を利用する場合は以下を登録します bit.ly Login bit.ly Apikey 画像を Twitpic に投稿したい場合は以下を登録します Twitpic Apikey Twitpic への画像投稿は、IE 上で画像を右クリックして右サイド部分 でいったん Twitpic に投稿します。投稿が成功すると、Twitpic の URL が左の Twitter 投稿エリアへ転送されるのでそれを利用して Twitter へ投稿します
posted by lightbox at 2012-04-14 02:31 | IE拡張メニュー | このブログの読者になる | 更新情報をチェックする
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 終わり