SQLの窓 イラストAC フリー素材

2012年03月25日

FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する : Adobe AIR Flex

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文



ベースアーティクルのソースコードの VideoDisplay を VideoPlayer に変更するだけで、
赤い部分が追加されて、VideoDisplay の為に作ったユーザーコントロールが全くいらな
くなります。

ボタンは [stop] だけが特別な意味を持ちますが、[play]と[pause] は VideoPlayer の
機能として実装されています。さらに、実行位置もドラッグできるなどより便利になって
いますし、Video の Full スクリーンも本来の目的に合ったものとなっています。
( VideoDisplay では、コードのサンプルとして作ったので機能は後回しです )

※ VideoDisplay は、mx 名前空間には無かったコントロールです


posted by at 2012-03-25 01:01 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月23日

Adobe AIR Flex : AIR アプリケーション記述ファイルについて

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

Adobe AIR アプリケーションの構築
AIR アプリケーション記述ファイル
<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/3.1"> 
	
	<id>lightbox.SimpleFlvPlayer</id> 
	<versionNumber>1.0</versionNumber> 
	<filename>simple_flv_player</filename> 
	<name>超シンプル FLV プレーヤー</name> 
	<installFolder>lightbox</installFolder> 

	<initialWindow> 
		<title>AIR アプリケーション</title> 
		<content>Mainw.swf</content> 
		<x>300</x>
		<y>200</y>
		<width>500</width>
		<height>500</height>
		<systemChrome>standard</systemChrome> 
		<!--transparent>true</transparent--> 
		<!--visible>true</visible--> 
		<minimizable>true</minimizable> 
		<maximizable>true</maximizable> 
		<resizable>true</resizable> 
	</initialWindow>
	<icon>
		<image32x32>winofsql.png</image32x32> 
	</icon> 

</application>

上のソースと、Adobe のリンク先でだいたいの概要は掴めるとは思いますが、
要点はなかなか解りにくいので以下を良く読んで下さい

application 要素のバージョンと adl.exe のバージョンを一致させる
※ ここでは3.1


versionNumber 要素は、Flex3 の時 version だったので古い定義を使う時は注意
( AIR 2.5 以降では、version 要素は versionNumber、versionLabel要素に置き換えられました )

systemChrome は、standard と none で外観が変わるが、none ではスキンを適用する
maximizable と minimizable と resizable と transparent は内部から変更できません
( AIR アプリケーション記述ファイルは、ビルドとは無関係で変更してから実行できます )

Adobe ドキュメント

AIR アプリケーション記述エレメントの仕様
public class WindowedApplication



posted by at 2012-03-23 18:12 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Adobe AIR Flex : Flex で定義されているスキンを使って『外観』をかっこよく

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

一般的な外観を使うと、Windows の環境に依存して以下のようになってしまいます。
( <systemChrome>standard</systemChrome>  )



Flex3 の時は、AIR アプリケーション記述ファイル で、systemChrome を none に
するだけで良かったのですが、Flex4 で spark を使うと以下のようにタイトルが表
示されずに、ウインドウをドラッグできません。



この対処は、skinClass に spark.skins.spark.SparkChromeWindowedApplicationSkin
をセットする事で解決しますが、記述方法としては、要素のプロパティとして設定する
方法と、ActionScript で記述する方法の二通りがあります。
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData();"
	nativeDragEnter="Check_DragEnter(event)"
	nativeDragDrop="Check_DropFile(event)"

	usePreloader="true"
	showStatusBar="false"

	titleIcon="{imgSmile}"
	title="エクスプローラから flv をドラッグ・ドロップできます"

	skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
>

ActionScript で書く場合は、import spark.skins.spark.*; を記述しておいて、
this.setStyle( "skinClass", SparkChromeWindowedApplicationSkin );
と書くと良いでしょう






posted by at 2012-03-23 01:50 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月22日

Adobe AIR Flex : デバッグ用ログ出力( ついでなんで HTML 上の Flex のログ出力方法も書いておきます )

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

Flex3 の時は、trace メソッドで出力されたのですが、何故かうまくいかない
ので、王道の 『logging API』を使用します。

まず最初に以下の定義をします

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

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

ここで、MyLogger はなんでもいいです。ログの出力行の最後に出力される文字列
で、ここでは結局出力していません(includeCategory )。その設定も含めて、以下
のコードで利用します。

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

■ includeDate 〜 includeCategory はログ行に出力するかどうかです
( 詳細は、オンラインドキュメント解説ページ )
■ Log クラスは、mx.logging に定義されています

▼ 出力です
( info 以外にもメソッドはありますが、ここでは必要無いでしょう )

logger.info( "initData() が実行されました" );

ログの環境設定

これは、Flex3 の時と同じでした。『C:\Documents and Settings\ユーザ』ディレクトリに
mm.cfg ファイルを作成して、TraceOutputFileEnable=1 を書き込むとファイルに出力されて
TraceOutputFileEnable=0 にすると標準出力に出力されます。出力されるファイルは、
C:\Documents and Settings\ユーザー\Application Data\Macromedia\Flash Player\Logs
の flashlog.txt です。( これを変える方法はまだ知りません )

※ 標準出力を使いたい場合

日本語が化けるので、Flex3 のころの内容ですが参考になると思います
( Adobe AIR Flex をだれでも簡単に作成できるパッケージ内の記述 )
【実行中の trace の日本語処理について】
デフォルトでは、Flex 内が UTF8 なので化けます。
ファイルに書き込めば、正しく表示されますが、

どうしてもコマンドプロンプト上で日本語トレースしたい場合は以下のようにします。

1) ファイル名を指定して実行から、cmd.exe を実行してコマンドプロンプトを表示
2) プロパティのフォントで MS ゴシックを選択して、「同じタイトルのウインドウに適用する」を選ぶ
3) コマンドプロンプトを閉じる
4) __air_start.txt を開いて、chcp 65001 を実行させるように ; を削除する
5) air_start.wsf を実行する
※ mode con: cp select=65001 でもコードページは変更できます

このオプションは、バグってるようなので、日本語は表示されますが欠けたりします。
コンソールの再描画が正しくされていないようなので、ウインドウのサイズを変更したり
最小化して戻したりすると正しく表示されます。

「同じタイトルのウインドウに適用する」を解除したい場合は、
HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe のレジストリキーを削除します。
( 環境毎に違うと思いますが、HKEY_CURRENT_USER\Console の下に作成されます )
ソースコード 2年半ぶりに Air Flex のコードを整備しました Web Flex のログコード
	import mx.formatters.*;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

昔は Firebug 使ってずっとこれで出力してましたが、今では全てのブラウザで
console.log が使えるので普通に利用できるはずです


posted by at 2012-03-22 23:39 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Adobe AIR Flex : デバッグ実行

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

『実行(デバッグ)』をダブルクリックして下さい



アプリケーションが、adl.exe を使って実行されます。
コマンドプロンプトから実行されているのは、アプリケー
ション内から出力するログを、このコンソールに表示する
事が可能だからです。

但し、日本語の出力はキャラクタセットの関係で設定が面倒
なので、ファイル出力にしたほうがいいと思います。ただ、
日本語を表示しないのであれば、コンソールへの出力も効率
が良い場合もあります



実行コマンドラインは、adl Mainw.xml としているだけです。Mainw.xml は、
Flex で作られた内容を Windows アプリケーションで実行する為の定義で、
これはビルドされるのでは無く、実行毎に読み込まれるテキストファイルです。

このアプリケーションでは、外観を Flex が定義したスキンで表示する為に
systemChrome が none となっています。これを standard に変更すると、外
観が以下のようになります



Mainw.xml
<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/3.1"> 
	
	<id>lightbox.SimpleFlvPlayer</id> 
	<versionNumber>1.0</versionNumber> 
	<filename>simple_flv_player</filename> 
	<name>超シンプル FLV プレーヤー</name> 
	<installFolder>lightbox</installFolder> 

	<initialWindow> 
		<title>AIR アプリケーション</title> 
		<content>Mainw.swf</content> 
		<x>300</x>
		<y>200</y>
		<width>500</width>
		<height>500</height>
		<systemChrome>none</systemChrome> 
		<!--transparent>true</transparent--> 
		<!--visible>true</visible--> 
		<minimizable>true</minimizable> 
		<maximizable>true</maximizable> 
		<resizable>true</resizable> 
	</initialWindow>
	<icon>
		<image32x32>winofsql.png</image32x32> 
	</icon> 

</application>

versionNumber に注意して下さい。Flex3 の頃とは仕様が変更されています
( 以前は version だったので古い定義はエラーになります )

http://ns.adobe.com/air/application/3.1 の 3.1 も重要です。
現在使用しているバージョンと一致する必要があるので、adl.exe
のプロパティでバージョン番号を確認して下さい



posted by at 2012-03-22 00:07 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月21日

Adobe AIR Flex : ビルド手順(3) : コマンドプロンプトでビルド

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

『対話ビルド用コマンドライン』をダブルクリックすると、ビルド用のコマンド
プロンプトが開いて、fcsh が起動します





『クリップボードにコピーします』をダブルクリックすると、クリップボード
に『開発用ビルド』の内容がコピーされるので、コマンドプロンプトで右クリ
ックします。すると、自動的にビルドが開始されます( 1回目のビルド )



ソースを修正して2回目以降のビルドは最初からビルドするのでは無く、差分
でビルドする為に、上矢印で compile 1 を表示させて実行します





posted by at 2012-03-21 23:51 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Adobe AIR Flex : ビルド手順(2) : SDKの設定

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

ダウンロードした flex_sdk_4.6.zip は、C ドライブのルートに置いて解凍するのが
パスが短くて、いろいろな意味で都合が良いです。ですから、Flex SDK のパスは
C:\flex_sdk_4.6\bin となるので、MKEditor で _FLEX4_AIR_BUILD.mkp を開いて、
『SDKの場所』で書き換えて下さい( C:\flex_sdk_4.6\bin ならそのままです )




■ 検索パスとして丸ごと埋め込むので、java の sdk のパスを含めてもかまいません
C:\flex_sdk_4.6\bin;C:\Program Files\Java\jdk1.6.0_14\bin




posted by at 2012-03-21 23:35 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Adobe AIR Flex : ビルド手順(1) : コマンドプロンプトの設定

ベースアーティクル

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★


▼ この記事の本文

コマンドプロンプトを使うので、まずコマンドプロンプトでクリップボード
の操作が簡単に行えるように設定します。

1) ファイル名を指定して実行で、cmd と入力してコマンドプロンプトを開きます
( ファイル名を指定して実行は、Winキー+R でも開く事ができます )

2) タイトルバーよりプロパティダイアログを開きます





3) 簡易編集モードにチェックします

これによって、右クリックでコピー&ペーストが可能になります
( ここでは ペーストに使います )




posted by at 2012-03-21 23:24 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2年半ぶりに Air Flex のコードを整備しましたが、相変わらず欲しい情報が見つからないのが Adobe のようです

Flex2 からやっている自分ですら相当苦労しました。ま、でも一日で済んだ
のは奇跡的かもしれませんが、Flex4 の日本語リファレンスのダウンロード
リンクすら世の中から消えている始末です。

酷すぎ。

▼ PC にあるのと中身を比較していませんが・・・・
http://help.adobe.com/ja_JP/Flex/4.0/Flex_4_docs.zip


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData();"
	nativeDragEnter="Check_DragEnter(event)"
	nativeDragDrop="Check_DropFile(event)"

	usePreloader="true"
	showStatusBar="false"

	titleIcon="{imgSmile}"
	title="エクスプローラから flv をドラッグ・ドロップできます"

	skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel {
	backgroundColor:black;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import spark.components.*;
	import spark.events.*;
	import org.osmf.events.*;
	import org.osmf.media.*;
	import flash.filesystem.*;
	import flash.events.Event;
	import mx.controls.Alert;
	import mx.logging.targets.*;
	import mx.logging.*;

//	import spark.skins.spark.*;

	[Bindable]
	[Embed("smile.png")]
	private static var imgSmile:Class;
	private var nSize:int = 1;
	private var rootObject:WindowedApplication;
	private	var nativeMenu:ContextMenu;

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

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():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);

//		this.setStyle( "skinClass", SparkChromeWindowedApplicationSkin );

		// メッセージ
		logger.info( "initData() が実行されました" );

		// 再生イベントの発生間隔
//		myVid.playheadUpdateInterval = 1;

		// プログレスバーの初期化
		progressBar.setProgress(0, 100);

		// Mainw.xml の値を変更
//		this.height = 600;

		// 初期ボリューム
		myVid.volume = 0.7;

		// *************************************************
		// コンテキストメニュー定義
		// *************************************************
		rootObject = WindowedApplication(mx.core.FlexGlobals.topLevelApplication)
		nativeMenu = new ContextMenu();
		nativeMenu.hideBuiltInItems();

		addContextMenu(
			"x 1",
			function():void {
				changeSize(1);
			}
		);
		addContextMenu(
			"x 2",
			function():void {
				changeSize(2);
			}
		);
		addContextMenu(
			"x 0.5",
			function():void {
				changeSize(3);
			}
		);
		addContextMenu(
			"ベースを最大化",
			function():void {
				myVid.stage.displayState = 'fullScreen';
			}
		);
		addContextMenu(
			"ベースを標準",
			function():void {
				myVid.stage.displayState = 'normal';
			}
		);
		rootObject.contextMenu = nativeMenu;

	}

	// *********************************************************
	// コンテキストメニュー追加
	// *********************************************************
	public function addContextMenu(
		label:String,
		listener:Function
	):void {

		var menuItem:ContextMenuItem;
		menuItem = new ContextMenuItem(label);
		menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,listener);
		nativeMenu.customItems.push(menuItem);

	}

	// *********************************************************
	// 外部からドラッグ開始
	// *********************************************************
	private function Check_DragEnter(e:NativeDragEvent):void {

		var clip:Clipboard = e.clipboard;
		if ( clip.hasFormat( ClipboardFormats.FILE_LIST_FORMAT ) ) {
			NativeDragManager.acceptDragDrop(this);
		}
	}

	// *********************************************************
	// 外部からドロップ
	// *********************************************************
	private function Check_DropFile(e:NativeDragEvent):void {

		var clip:Clipboard = e.clipboard;
		var file_list:Array;
		file_list = clip.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

		var str:String = file_list[0].nativePath;
		var part:Array = str.split(".");
		var len:int = part.length;
		var ext:String = (part[len-1]).toUpperCase();

		if ( ext == "MP4" || ext == "FLV" ) {
			myVid.source = file_list[0].nativePath;
//			myVid.load();
			progressBar.setProgress(0, 100);
		}
		else {
			Alert.show( "flv か mp4 を使用して下さい" );
		}
	}

	// *********************************************************
	// ストップ( リセット )処理
	// *********************************************************
	public function play_Reset():void {

		// STOP ボタンを使用した場合は巻き戻すが、
		// 最後まで表示した場合は巻き戻さない
		myVid.autoRewind = true;
		myVid.stop();
		myVid.autoRewind = false;
	}


	// *********************************************************
	// シーク
	// *********************************************************
	private function setTime( e:MouseEvent ):void {

		myVid.seek( ( e.localX * myVid.duration )/ progressBar.width );
		logger.info("seek");


	}

	// *********************************************************
	// サイズ変更
	// *********************************************************
	private function changeSize( nSize:int ):void {

		switch( nSize ) {
			case 1:
				myVid.width = myVid.videoObject.videoWidth;
				myVid.height = myVid.videoObject.videoHeight;
				break;
			case 2:
				myVid.width = myVid.videoObject.videoWidth * 2;
				myVid.height = myVid.videoObject.videoHeight * 2;
				break;
			case 3:
				myVid.width = myVid.videoObject.videoWidth / 2;
				myVid.height = myVid.videoObject.videoHeight / 2;
				break;
		}

	}

	// *********************************************************
	// 再生ヘッド位置の表示
	// *********************************************************
	private function currentTimeChange( e:TimeEvent ):void {

		progressBar.setProgress(
			e.time,
			e.currentTarget.duration
		);

	}

	// *********************************************************
	// スライダー変更イベント
	// *********************************************************
	private function changeVolume( ):void {

		myVid.volume = hSlider.value;

	}

	// *********************************************************
	// スライダー変更イベント
	// *********************************************************
	private function readyVideo( ):void {

		try {
			changeSize(1);
			this.height = myVid.videoObject.videoHeight + 200;
			if ( this.width < myVid.videoObject.videoWidth ) {
				this.width = myVid.videoObject.videoWidth + 10;
			}
		}
		catch(e:*){
		}

	}

]]>
</fx:Script>

<s:Panel
	title="超シンプル flv プレーヤー"
	percentHeight="100"
	percentWidth="100"
>
	<s:VGroup width="100%">

		<s:HGroup>
			<s:Button
				label="Play"
				click="myVid.play();"
				width="60"
			/>
			<s:Button
				label="Pause"
				click="myVid.pause();"
				width="60"
			/>
			<s:Button
				label="Stop"
				click="play_Reset();"
				width="60"
			/>
			<s:HSlider
				 id="hSlider"  
				 minimum="0"  
				 maximum="1"  
				 value="0.7"  
				 snapInterval="0.1"  
				change="changeVolume();"
			/>
		</s:HGroup>

		<mx:ProgressBar
			id="progressBar"
			mode="manual"
			label=""
			width="100%"
			click="setTime(event)"
			visible="true"
		/>

		<s:VideoDisplay
			id="myVid"
			autoPlay="false"
			autoRewind="false"
			complete="progressBar.setProgress(100,100);"
			source="sample.mp4"
			currentTimeChange="currentTimeChange(event);"
			durationChange="readyVideo();"
		/>

	</s:VGroup>



</s:Panel>

</s:WindowedApplication>

Flex3 のコードも、記念にコメントで残しているところがあります。
mx を使わずに spark を使うように変えるところが基本ですが、よく
もまあこんなに違うものにしてくれたなぁ・・・

というのが実感です。

それはまだしも、trace メソッドが動作しないのにはあきれました。
スキンの角を丸くできないし、@namespace 書かないとエラーになる
し、Flex2 当時も結構苦労しましたが、経験無いと時間ばかりかかる
ので必要無いならかかわらないほうがいいです。

ビルドは全て DOS ベースでやってます。Flex Builder は昔使った事
ありますが、最低だった印象しかありません。やめたほうがいいです。

もう少し整備したらビルドパッケージもリリースします。そうすれば、
誰でも簡単に片目つぶってでも作れるようになります。

前提としては、java が必要ですが、今の環境は 1.7.0_01 です。

あんのじょう、Java7 で問題が出ました。AIR のパッケージを作る
adt でエラーが出ます。とりあえず、1.6.0_16 に変更しました。



posted by at 2012-03-21 04:38 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月19日

Win8 Metro(JS) : Split Application : categoryPage.js


(function () {
	'use strict';

	// Custom event raised after the fragment is appended to the DOM.
	WinJS.Application.addEventListener('fragmentappended', function handler(e) {
		if (e.location === '/html/categoryPage.html') { fragmentLoad(e.fragment, e.state); }
	});

	function updateForLayout(lv, layout) {
		var layoutState = Windows.UI.ViewManagement.ApplicationLayoutState;
		if (layout === layoutState.snapped) {
			lv.layout = new WinJS.UI.ListLayout();
		} else {
			lv.layout = new WinJS.UI.GridLayout();
		}
		lv.refresh();
	}

	function layoutChanged(e) {
		var list = document.querySelector('.categoryList');
		if (list) {
			var lv = WinJS.UI.getControl(list);
			updateForLayout(lv, e.layout);
		}
	}

	function fragmentLoad(elements, options) {
		try {
			var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
			if (appLayout) {
				appLayout.addEventListener('layoutchanged', layoutChanged);
			}
		} catch(e) { }

		WinJS.UI.processAll(elements)
			.then(function () {
				var lv = WinJS.UI.getControl(elements.querySelector('.categoryList'));
				WinJS.UI.setOptions(lv, {
					dataSource: pageData.groups,
					itemRenderer: elements.querySelector('.itemTemplate'),
					oniteminvoked: itemInvoked,
				});
				updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);
			});

		return;
	}
	
	function itemInvoked(e) {
		var group = pageData.groups[e.detail.itemIndex];
		WinJS.Navigation.navigate('/html/splitPage.html', { group: group });
	}

	// The getGroups() and getItems() functions contain sample data.
	// TODO: Replace with custom data.
	function getGroups() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var groups = [];

		for (var i = 0; i < 12; i++) {
			var even = (i % 2) === 0;
			groups.push({
				key: 'group' + i,
				title: 'Collection title lorem ' + i,
				backgroundColor: colors[i % colors.length],
				label: 'Eleifend posuere',
				description: even ? '?Sed nisl nibh, eleifend posuere.' : '?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.',
				fullDescription: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.' + (even ? '' : ' ? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.')
			});
		}

		return groups;
	}

	function getItems() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var items = [];

		for (var g = 0, gl = pageData.groups.length; g < gl; g++) {
			var numItems = g % 2 === 0 ? 12 : 9;
			for (var i = 0; i < numItems; i++) {
				items.push({
					group: pageData.groups[g],
					key: 'item' + i,
					title: g + '.' + i + (i % 2 === 0 ? ' ?Sed nisl nibh, eleifend posuere.' : ' ?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.'),
					subtitle: 'Phasellus faucibus',
					backgroundColor: colors[i % colors.length],
					content: (new Array(5)).join('<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>'),
					description: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
				});
			}
		}

		return items;
	}

	var pageData = {};
	pageData.groups = getGroups();
	pageData.items = getItems();

	WinJS.Namespace.define('categoryPage', {
		fragmentLoad: fragmentLoad,
		itemInvoked: itemInvoked
	});
})();



posted by at 2012-03-19 18:07 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します