SQLの窓

2012年06月27日


Win8(JS Metro)の『分割・・・』テンプレートから追加のページを定義する方法

元となる記事

『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

新しいページは、新しい HTML と JS を作成して、items.html のタイトルの横から呼び出したいと思います
新しい items.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">分割</span>
                <button id="newpage">新しいページ</button>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

items.js では、items.html の定義である、WinJS.UI.Pages.define が実行されているので、その初期処理部分である『ready』で新しく追加したボタンのイベントを作成し、新しいページの呼び出し処理である、WinJS.Navigation.navigate を実行しています。この際、第一引数には URL を指定しますが、第二引数には新しいページへと引き渡す JSON をオブジェクトをセットしています

新しいページの HTML 記述(hello.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link rel="stylesheet" type="text/css" href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>

    <div style="padding:20px;">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
    </header>
        こんにちは

    </div>
    

</body>
</html>

新しいページは何も定義はしていませんが、唯一『戻るボタン』を配置する際にルールがあると思って下さい。これし、navigator.js に書かれている、『header[role=banner] .win-backbutton』というセレクタに合わせる必要があるということです。この条件に合わせることで、ナビゲートのコントロールはほぼ、navigator.js が行います。

あとは、hello.js で、このページの定義を行う事で全体が正しく動作します

(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/hello/hello.html", {

        // この関数は、ユーザーがこのページに移動するたびに呼び出されます。
        // ページ要素にアプリケーションのデータを設定します。
        ready: function (element, options) {
            Debug.writeln(JSON.stringify(options, null, "   "));
        },
        unload: function () {
            
        }
    });
})();

▼ JSON.stringify による options出力内容です
{
   "param1": "自動的に",
   "param2": "ページのオプションとして ready イベントへ"
}



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

2012年06月23日


Android Flex : Android の為の AIR Flex 基本 List で Web からデータ取得

Google ドライブからダウンロード




モバイルの基本と思われる List なんですが、基本すぎるせいなのかちょっと探してもあまり良いサンプルが見つからなかったので、WEB Flex3 の内容を移植してみました。List の dataProvider に直接 XMLList をセットできないので変換しましたが、もともと DataGrid 用だったのでこの方法にしました。

List 内に画像も表示してみました



関連する記事

コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	// List 用
	import spark.events.IndexChangeEvent;

	// http サーバー関連
	import mx.collections.ArrayList;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

	}

	// *********************************************************
	// データを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ボタンが押されました" );

		srv.url = "http://homepage2.nifty.com/lightbox/data/list.xml";

		// レスポンス結果のデータフォーマット
		srv.resultFormat = "e4x";
		
		srv.method = "GET";
		
		// リクエストを実行
		var at:AsyncToken = srv.send();


	}


	// *********************************************************
	// リストを選択
	// *********************************************************
	public function myChangedHandler(event:IndexChangeEvent):void {

		// 本来は複数選択用
		var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
		logger.info( selIndices[0].toString() );
		var selItems:Vector.<Object> = event.currentTarget.selectedItems;
		logger.info( selItems[0].toString() );

		// 単体
		logger.info( event.currentTarget.selectedItem.toString() );
		logger.info( event.newIndex.toString() );

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void
	{
		var dataSet:ArrayList = null;

		var aData:Array = new Array();
		for each(var xmlData:XML in e.result.row.name ) {
			aData.push(xmlData);
		}

		dataSet = new ArrayList(aData);
		base.dataProvider = dataSet;

	}
	
	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void
	{
		logger.info("HTTPService失敗\n\n理由 : " + e.fault.message);
	}

]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id="srv" showBusyCursor="true"
		 result="resultHandler(event)"
		 fault="faultHandler(event)" />
</fx:Declarations>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:List
			id="base"
			width="100%"
			height="100%"
			change="myChangedHandler(event);" 
		>
			<mx:ArrayCollection>
				<fx:String>固定リストデータ1</fx:String>
				<fx:String>固定リストデータ2</fx:String>
				<fx:String>固定リストデータ3</fx:String> 
				<fx:String>サンプル通り</fx:String> 
			</mx:ArrayCollection>
		</s:List>
	</s:BorderContainer>


</s:View>


itemRenderer の中からのイベント処理です。
( ※ 昔と同じでトップを参照するしか方法を見つけられませんでした )

Mainw.mxml
startview.mxml

XML に アイコンの URL を含めるようにしました。


タグ:android AIR
posted by lightbox at 2012-06-23 21:34 | Flex | このブログの読者になる | 更新情報をチェックする

Android Flex : コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ



dae は、Papervision3D の 事実上の最終バージョンである Papervision3D_2.1.932.swc を同梱しています(もちろんオリジナルのソースコードも)。 他に必要なのは、android の SDK と Flex4 の SDK です( android ランタイムを最新にするなら、AIR の SDK ) ※ 以下を参考にして下さい コマンドラインで簡単に AIR アプリケーションを Android エミュレータにインストールして実行 さらに、AIR のランタイムを エミュレータにインストールする必要があるので、こちらを参照して下さい エミュレータと ddms を起動する エミュレータの構築は先にすませておいて、android の SDK フォルダである android-sdk-windows 内の AVD Manager.exe を実行してエミュレータが完全に起動するのを待って、アプリの一覧を表示します その後、tools フォルダの中の ddms.bat を実行して、デバイスをクリックして選択し、LogCat を選択してログが出力されているのを確認します( ここをクリックしないと新しいログが表示されません ) 何かする前には、LogCat をクリックしてログを削除しておいたほうがいいです。以下は、dae ロードした時のログを選択して外部出力したものです
06-23 08:39:37.777: I/air.lightbox.androidtest(528): INFO: Papervision3D 2.0.0 (March 12th, 2009)
06-23 08:39:37.777: I/air.lightbox.androidtest(528):  
06-23 08:39:38.017: I/air.lightbox.androidtest(528): INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode. 
06-23 08:39:46.426: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:46.436: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:39:48.046: I/dalvikvm(528): Jit: resizing JitTable from 512 to 1024
06-23 08:39:50.696: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:39:50.706: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eyes_mqo 
06-23 08:39:50.726: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eye 
06-23 08:39:51.096: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:39:51.107: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:39:51.146: I/air.lightbox.androidtest(528): LOAD_COMPLETE
06-23 08:39:56.616: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:56.626: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: tensi 
06-23 08:40:00.777: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:40:00.787: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:40:00.797: I/air.lightbox.androidtest(528): LOAD_COMPLETE

何か問題があれば、Log にヒントが出力されるはずですから、コードを function 単位で追えるように工夫しておくといいと思います。

次に、パッケージの android.bat の中の Flex4 の SDK の位置を自分の環境と一致させて、android.bat を実行します。( このコマンドプロンプト内で全て処理します )

1) ソースコードを修正した場合は、build.bat で swf を作成
2) inst.bat で apk パッケージを作成してエミュレータにインストール

この繰り返しのみで処理します。certificate.bat は証明書の作成ですが、テストだけなら同梱されたものでかまいません。アプリがある特定のユーザによって作られたかどうかの同一性をチェックするのが目的なので、アプリのダウンロード管理システムへの更新時にしか必要ありません。

処理部分の詳細コード

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	//papervision3Dクラス
	import org.papervision3d.materials.*;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.core.utils.*;
	import org.papervision3d.objects.parsers.*;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.geom.TriangleMesh3D;
	import org.papervision3d.events.*;

	// 3D 空間
	private var view3D:BasicView;
	private var dae:DAE = null;
	private var lcnt:int = 0;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

		// 3D空間作成
		view3D = new BasicView();
		// 背景色
		view3D.opaqueBackground = 15247823;

		// SpriteVisualElement に追加
		base.addChild(view3D);

		// カメラの初期位置
		// ( 全て 0 だと LookAT エラー )
		view3D.camera.z = -5;	
		view3D.camera.x = 0;	
		view3D.camera.y = 0;

		// 画面が小さいので、遠近法は使わない
		view3D.camera.ortho = true;
		view3D.camera.orthoScale = 80;	// これで対象の大きさを決定

		// 描画開始
		view3D.startRendering();

	}

	// *********************************************************
	// 3D モデルを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ロードボタンが押されました" );

		// sdcard に置く場合は、file.url をロードに使用します
		var file:File = File.userDirectory.resolvePath("eyes.dae");
		logger.info( file.url );

		// 3D モデル作成
		if ( dae != null ) {
			view3D.scene.removeChild( dae );
		}
		dae = new DAE();

		if ( lcnt % 2 == 0 ) {
			dae.load("http://homepage2.nifty.com/lightbox/data/eyes.dae");
		}
		else {
			dae.load("http://homepage2.nifty.com/lightbox/data/tensi.dae");
		}
		dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, function(e:Event):void{

			logger.info( "LOAD_COMPLETE" );

			try {

				// オブジェクトの位置
				dae.x = 0;
				dae.y = 0;
				dae.z = 0;

				// ラジアンでは無くそのまま-15度
				dae.rotationX = -15;
	
				dae.scale = 1;
	
				// 3D 空間に平面オブジェクトを追加
				view3D.scene.addChild( dae );

				lcnt++;
			}
			catch (error:Error) {
				logger.info(error.message);
			}

		});

	}

]]>
</fx:Script>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:SpriteVisualElement
			id="base"
			width="100%"
			height="100%"
		>
		</s:SpriteVisualElement>
	</s:BorderContainer>


</s:View>

データは WEB から読みだすようにしていますので、インターネット環境によってはうまくいかないかもしれません。その場合は、エミュレータの sdcard 内に保存して実行すると良いです( file.url を使う )

sdcard 内への保存は、ddms で device メニューから file エクスプローラを実行して mnt/sdcard を開いて push( ツールボタン) すれば良いです



※ eyes.dae と eyes.png は同梱しています( 元データは 光陰像型 さんのメタセコイアデータです )



posted by lightbox at 2012-06-23 17:59 | Flex | このブログの読者になる | 更新情報をチェックする

IE 兼用背景 Fade transition の実装


本来 CSS3 で簡単にできるところを、IE だけみっともないので、何とか頑張ってみました。
、が、実際問題こんな事している時代でも無いのですが・・・

現実にはまだ問題があるのが、IE で見てもらうと良く解りますが、現状の再確認と言うことです。
<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=2);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>
<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
})();
</script>
<div class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>
えっと、IE のアンチエイリアスのバグに対応しました。
( あまり意味無いとは思いますが )
<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=0);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<script type="text/javascript">
</script>
<div id="target" class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>

<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
else {
	target.filters[0].Apply();
	target.style.backgroundColor="#fff";
	target.filters[0].Play();
	target.filters[0].duration = 2;
}
})();

</script>
関連する記事

CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御


タグ:IE トラブル
posted by lightbox at 2012-06-23 14:01 | CSS3 | このブログの読者になる | 更新情報をチェックする

2012年06月21日


『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

ページ遷移は本来 Navigate オブジェクトの navigated イベントで自分で動的にページを作成すると思ってたのですが、PageControl オブジェクトの助けを借りて、ページの定義単位で完結するようなテンプレートになっているようです。

まず、開始は default.html ですが、DIV 要素に URL が定義されています
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>SplitApp</title>

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

    <!-- SplitApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div> -->
</body>
</html>

但し、それは option 部分で、事の始まりは 『data-win-control="Application.PageControlNavigator"』 から開始される事になります。ここで、Application は、このアプリケーションが作成した名前空間で、さらにアプリケーションが作成した PageControlNavigator オブジェクトに支配されている事になります。この PageControlNavigator は、navigator.js で定義されており、この PageControlNavigator こそが、API で定義されている本来の Navigater オブジェクトのこのアプリケーション用のラッパーとなっています。

navigate.js の参照

先頭部分がコンストラクタですが、ここで Navigate オブジェクトの navigated イベントに _navigated イベントがマップされているのが解ります(他にも初期処理がなされています)。そして、肝心の _navigated で、WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state, parented) が実行されて新しいページ定義が、newElement にロードされてページ遷移が起きます。(この、メソッドは Microsoft のドキュメントではまだ第一引数の記述が無いようです)

このテンプレートの場合、初回の表示で 『/pages/items/items.html』 が呼びだされる事になるわけですが、このページは ListView になっており、それなりにかなりのテンプレート用のコードが付加されています。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">SplitApp</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

表示される本体は、下のほうにある DIV 要素内( class="itemspage fragment" ) です。上にある DIV 要素は、ListView の一つ一つのアイテムの表示用テンプレートです。しかも、ページ全体を支配するのはこれらでは無く、items.js であり、データ表示の為に data.js も読み込む事になります。

items.js の参照

data.js の参照

items.js では、ページ全体を WinJS.UI.define メソッドで、PageControl オブジェクトとして定義しています。このページ用の interface は、現在のところは ready イベントのみ本来のページ用のもののようです。それ以外は全て内部でのやりとりで呼び出されます。

■ initializeLayout は ready または、updateLayout から。
■ itemInvoked は、ready 内で ListView からマップ
■ updateLayout は、本体の PageControlNavigator から window.onresize の結果として呼び出されています。

参考 : Metro スタイル アプリ用 JavaScript プロジェクト テンプレート

まとめ

結局、split.html でも同様の定義がなされており( unload イベントはドキュメントに無く裏付けできませんでした )、結局 data.js にある JSON オブジェクトの内容によって表示されるコンテンツが決まり、css によって見栄えが変わる本当の意味でのテンプレートになっています。殆ど、テンプレートコードを触る余地は無く、よほどの知識が無いと逆に動かないものになってしまうようなものである事は間違いありません。


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

2012年06月20日


Android Flex : コマンドラインで簡単に AIR アプリケーションを Android エミュレータにインストールして実行

Android の SDK と、Flex4 の SDK が必要です。エミュレータは先に動くものを作っておきます。

結論から言うと、Flex を使うので Java は必要ですが、Eclipse は必要ありません。コマンドプロンプトから全て完結させます。今回は、Android 2.3.3 でテストしています。

エミュレータ起動

※ コマンドラインでデバイスを指定していないので、エミュレータの起動は一つだけにしてください。



AIR のランタイムをインストール

Flex4 の SDK に入ってるものでも、AIR の SDK に入っているものでもどちらでも構いません。
adt -installRuntime -platform android -package C:\flex_sdk_4.6\runtimes\air\android\emulator\Runtime.apk

adt -installRuntime -platform android -package C:\AdobeAIRSDK\runtimes\air\android\emulator\Runtime.apk



ソースコード

AIR のインストールができたら、アプリケーションのビルドですが、用意したソースは以下のようになっています。( UTF8N です )
Mainw.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	firstView="startview"
	applicationComplete="initApplication()"
>

<fx:Script>
<![CDATA[

	// *********************************************************
	// アプリケーションの初期化( 画面構築後 )
	// *********************************************************
	public function initApplication():void {


	}

]]>
</fx:Script>

	<s:navigationContent>
		<s:Button label="終了" click="NativeApplication.nativeApplication.exit()"/>
	</s:navigationContent>

</s:ViewNavigatorApplication>
startview.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	import mx.logging.targets.*;
	import mx.logging.*;

	private var logger:ILogger = Log.getLogger("MyLogger");

	public function initView():void {

		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

	}

	// *********************************************************
	// アプリケーションの初期化( 画面構築後 )
	// *********************************************************
	public function checkText():void {

		intext.text = "ボタンが押されました";
		logger.info( "ボタンが押されました" );

	}

]]>
</fx:Script>

	<s:Label
		x="43" y="27"
		text="名前を入力して下さい" />

	<s:TextInput
		x="41" y="64"
		id="intext"
		width="300" />

	<s:Button
		x="42" y="150"
		width="131" height="60"
		label="Submit"
		click="checkText()" />

</s:View>
Mainw.xml
<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/3.1"> 
	
	<id>lightbox.androidtest</id> 
	<versionNumber>1.0</versionNumber> 
	<filename>Android Test</filename> 
	<name>Android テスト</name> 

	<initialWindow> 
		<content>Mainw.swf</content> 
		<systemChrome>none</systemChrome> 
		<visible>true</visible> 
		<autoOrients>true</autoOrients>
	</initialWindow>
	<icon>
		<image48x48>winofsql.png</image48x48> 
	</icon> 

	<android> 
		<manifestAdditions> 
			<![CDATA[ 
				<manifest> 
					<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
					<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
					<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
					<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
					<uses-permission android:name="android.permission.CAMERA" /> 
					<uses-permission android:name="android.permission.DISABLE_KEYGUARD" /> 
					<uses-permission android:name="android.permission.INTERNET" /> 
					<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
					<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
					<uses-permission android:name="android.permission.WAKE_LOCK" /> 
					<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
				</manifest> 
			]]> 
		</manifestAdditions> 
	</android>

</application>
※ Android の permission は、沢山書いていますが検証していません。
一番目は、Mainw.mxml で二番目は startview.mxml です。Flex ではこのファイルがそのままクラスになるので、Mainw.mxml で、firstView に、startview と書かれています。ビューだけをフォルダにまとめればそのフォルダで参照する事になります( views なら、views.startview )
xml の二行目の 3.1 は、バージョンを示しているので環境または将来的にはこの値によってエラーになるかもしれません。その場合は、自分の使っているバージョンをチェックするか、世の中を調べましょう。3.1 は、Flex4 SDK の中のもので、AIR SDK は、3.3 が入っていました。Android には、3.3 を入れましたが動作しています。


コマンドプロンプトを開く

1) path=C:\flex_sdk_4.6\bin;%path%
2) prompt flex3$G
3) build.bat

build.bat の中身は以下のようになっています
call adt -certificate -cn lightbox 1024-RSA lightbox.p12 password
mxmlc +configname=airmobile Mainw.mxml
call adt -package -target apk-debug -storetype pkcs12 -keystore lightbox.p12 -storepass password lightbox_1.apk Mainw.xml Mainw.swf winofsql.png
call adt -uninstallApp -platform android -appid lightbox.androidtest
call adt -installApp -platform android -package lightbox_1.apk

lightbox.p12 は、名前はなんでもいいですし、毎回作る必要はありません。(パスワードはコマンドラインに書かなければ入力になります)
lightbox.androidtest は、アプリの ID になりますが、LogCat で表示されるのは、air.lightbox.androidtest となります
+configname=airmobile

※ adt で call を使っているのは、adt.bat だからです。

ddms 起動

Android SDK の、tools の中の ddms.bat を実行します。実行したら、左上のエミュレータを選択状態にして、LogCat が表示されるようにしておきます。この、LogCat に logger.info(); でログ表示が可能です。



実行


エミュレータからアイコンをクリックするだけです。このアイコンは、winofsql.png として apk パッケージの中に含めたものです。






タグ:android AIR
posted by lightbox at 2012-06-20 21:57 | Flex | このブログの読者になる | 更新情報をチェックする

2012年06月16日


JavaScript による半角と全角の相互変換(カタカナを除く)完成版

ちょっと必要だったのでインターネットでライブラリ無いか調べてみたら、特に無い上に完成版が無かったので完成させてみました。

s.charCodeAt(0) - 0xFEE0 というのをやってらっしゃった方が居られたので、これがベストだと思いましたが、何故か数字とアルファベットの範囲指定されておられたので一括で文字範囲指定しました。あと、名前空間で関数名が衝突しないようにしてあります。( lboxtool は自由に変える部分です )

※ 円マークがバックスラッシュになるのは仕様なので必要ならば改造すればいいと思います
<script type="text/javascript">
window.lboxtool={
tohan : function(str) {
	return str.replace(/[!-〜]/g, function(s) {
	    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
}
,
tozen : function(str) {
	return str.replace(/[\!-\~]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
	});
}
}
</script>
<input type="button" value="半角に" onclick='document.getElementById("target").value=lboxtool.tohan(document.getElementById("target").value)'>
<input type="button" value="全角に"onclick='document.getElementById("target").value=lboxtool.tozen(document.getElementById("target").value)'>
<br />
<textarea id="target" style='width:400px;height:80px;'>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</textarea>





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

2012年06月14日


Eclipse で Android / 『クリックしてホームにショートカット』を誰でも作れる手順の解説



▼ 手順となると、やたらと画像が多くなるので全体像は NAVER で見れるようにしています

Eclipse で Android / 『クリックしてホームにショートカット』を誰でも作れる手順 - NAVER まとめ


そもそも、SDK のバッケージを隅々までみてもホームにショートカットを作成する処理が存在しないのですが、インターネットを見てもこの方法が紹介されているのみです。SDK 内のショートカットに関する処理の記述はいろいろ試しましたが、全く動作せずです。記述もすごくいいかげんで何言ってるか解らないものばかりでしたし、目的としてはこれが最も役に立つ内容なので。

いずれにしても、Eclipse と SDK(エミュレータ) が必要なのでそれについては以下のリンク先を参照して下さい。


■ Android エミュレータ単独利用Eclipse から Android エミュレータを使う



エミュレータは、4.0.3 も動作しますが、現状では 2.3.3 を使うか実機でテストするのが良いです(4.0.3 は日本語入力が面倒です)。特に実機はストレスなくすぐ確認できます。実機は以下のように中古を買うと言う手もあります。

■ Android 系、ソフマップ中古品揃え『9,800円〜』




重要なポイント

★ Java SDK のバージョン選択

1.5 と 1.6 と 1.7 があると思いますが、いろいろな意味で 1.6 を選択しておくほうが無難だと思います( 1.7 は他の開発で動かなかったりします )が、Eclipse がデフォルトで低いバージョンを選んでしまっている場合は、世の中のソースコードに書かれている @Override でエラーになる可能性が大きいので、意図的に 1.6 を選んでおきます。




★ AndroidManifest.xml に注意する

とにかく、当たり前のように関係してくる制限事項がここに絡んで来ます。

1) 最低必要な SDK バージョン( これより低いものをエミュレータで使うとエラー )
2) パーミッション( 宣言しないと使えないものが多々ある )
3) デバッグ用の設定等( 世間にたくさん転がってます )

ここでは、SDK では存在しないパーミッション(com.android.launcher.permission.INSTALL_SHORTCUT)を入力しておかないと動きません。




★ Eclipse のクセを知る

Eclipse の問題なんですが、こういうものなので受け入れるしかありません。エラーが表示されていても、それは実は Eclipse が消去するのを忘れている場合もあります。実行してやるととりあえず再度チェックしますから、動作確認も含めて時間がかかるかもしれませんが、実行したり、いったん終了したりしてるほうがトラブルを回避できる事が多いかもしれません。


★ Run Configurations と DDMS はいろいろ知っておく

結局エミュレータあってのデバッグなので、この二つの機能はできるだけ知っておく必要があります。多少でも知っておれば特に問題も無く前へ進めるはずです。



※ 上の画像は、画面のキャプチャの説明用ですが、デバイスが選択されています。これをしておかないと、LogCat すらまともに表示されません。
findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View v) {
		Toast.makeText(ShortCutActivity.this, "クリック1", Toast.LENGTH_LONG).show();
		Log.i("DEBUG", "クリック1");
	}
});
オーソドックスなクリックイベントの実装と、Toast と ログの出力です。
Intent targetIntent = new Intent( Intent.ACTION_MAIN );
targetIntent.setClassName( ShortCutActivity.this, "lightbox.test.ShortCutActivity" );

Intent intent = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");
intent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, targetIntent);

Parcelable icon = Intent.ShortcutIconResource.fromContext(ShortCutActivity.this, R.drawable.ic_launcher);
intent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, icon);
intent.putExtra(Intent.EXTRA_SHORTCUT_NAME, "ホームにショートカット");

ShortCutActivity.this.sendBroadcast(intent);
世間で紹介されているコードそのままですが、それ以外で com.android.launcher.action.INSTALL_SHORTCUT に関する記述をどこにも見つける事ができませんでした。( 謎です )


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

Windows8(JavaScript Metro Style) 関連リンク

Windows8 と単純に言っても、範囲が広くなるので、まず導入部分を特別に以下のリンク先にまとめました。

Windows8(JavaScript Metro Style 導入) 関連リンク

で、ここからは応用部分です オフィシャル的情報発信リンクWindows 8 アプリ開発者ブログGo Metro(Facebook) 自前まとめ一覧『People』で、Twitter アカウント登録したら解除不能。アプリ削除しました これは、Windows8 リリースプレビューでホーム画面のアプリを使っていて遭遇したバグらしきものです。まあ、おかげでアプリの再登録手順を経験できました。 ■ Windows8 Metro(JS) でのカメラの利用は簡単ですが、問題も多々あるようです わざわざ新しい WEBカメラも買って、その他あわせて3つのカメラでテストしたのですが、結局まだ使えるのでは無かったというのが結果です。機能はふつうに動いてはいましたが、メモリ関連の問題があるようです。( カメラは、Android でもエミュレータで動作を確認はしましたが、アプリからは使えなかったです )。まだ発展途上です > 開発とカメラ ちなみに、古い WEB カメラは最初動作しなかったのですが、最新ドライバをインストールしたら動作しました。 ■ 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移 ( この画面のサンプルは、JavaScript and HTML5 touch game sample ) プロシェクト作成時に、画面分割アプリとグリッドと言う ListView と 画面遷移のひな形が用意されていますが、そもそもコードを読むものではなくデータ部分( JSON ) を変更して作るようなものになっています。コードは相当の知識が無いと読めない SDK レベルのものなのですが、これは、その中の Navigate 処理に触れたものです。 ■ Win8 Metro(JS) : 印刷処理 印刷処理は簡単です。ただ、UI が全くいままでと違うのと、印刷する部分を CSS で制御したりするのが新鮮でした。しかし、まだバグがあるようで Canvas 内の印刷は固まってしまってうまくいきませんでした。Canvas 内で Three.js が動いていて、メモリを使いすぎていたのかもしれません。 ■ Windows8 Metro(JS) で jQuery の datepicker を動作確認しました というか、JavaScript Metro は jQuery を元に作られているような部分が多々あります。サンプルの中にも jQuery の少し古いライブラリが組み込まれていたのもありました。とにかく、ふつうに動作しますので、Metro の画面遷移使うより、jQuery の UI 使ったほうが実装ははるかに簡単なような気がします
posted by lightbox at 2012-06-14 09:37 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年06月06日


ピンポイントですが、SQLServer 2008 は SQLServer 7.0 のデータをロード出来ないのです

SQLServer 2005 までは SQL の RESTORE でふつうにロードできます。但し、SQLServer 2005 では、VIEW に問題があって、SQLServer 2008 にアップグレードすると動くようになるのですが・・・・。今回データを再ロードしようとしたら 『互換性がありません』という主旨のエラーが出ました。世間にさすがに例が無くってあわてましたが、自分のやった手順を思い出して、たぶんそれに違い無いという事に。

検証は明日です。
検証しました。

結局、自分のPC に SQLExpress 2005 がインストールされているので、まずそこへ RESTORE しました。その後、いろいろメンテナンス( 必要無いデータを削除 )してから BACKUP しました。そのファイルを SQLExpress 2008 に RESTORE して事無きを得ました。

※ データが大き過ぎてタイムアウト設定が必要でした
( 以下は思い切って大きくしています )

--------------------------------------------------
sqlcmd -E -S .\SQLEXPRESS -t 3600

use master
go

DUMP TRANSACTION データベース名 WITH NO_LOG
go

DBCC SHRINKDATABASE (データベース名)
go

use データベース名
go
EXEC sp_updatestats
go
--------------------------------------------------

RESTORE
FILELISTONLY 
FROM DISK = 'ファイルのパス'

で、BACKUP されたフォルダのパスをチェックして、PC のそのフォルダを作っておけば以下のコマンドで簡単にリストアできます( DB は存在しない状態で )

RESTORE DATABASE データベース名
FROM DISK = 'ファイルのパス'

※ いろいろ変更してロードする場合はこちら




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