雑誌風UIで全画面表示できる方法を探している。
そんな方におすすめなのが、「Treesaver」です。

特徴的なのが、画面サイズによるコンテンツの表示切り替えです。
PC等の大画面の場合と、iPhoneで見た場合とで文字の量を変化させて読みやすいようにしてくれています。

iPhoneだと右左へスライドするとページ遷移できるので、かなり見やすそうでした。

使ってみた様子

以下に使ってみて特徴的な動作を上げてみます。

■ 画面左側にあるタブでメニューが一覧表示

↑タブをクリックしてみます。

するとコンテンツのメニューがサムネイル入りで表示されます。

■ 常に固定のメニューが表示できる

雑誌メニューとは別に連絡先やTwitterへのリンクなどを表示させることができます。

■ ページ移動はボタン、キーボード、スライド方式

↑ページの移動はボタンクリックか、キーボード、iOSの場合はスライドで移動できます。これ地味に便利です。

■ 画面サイズによるコンテンツ切り替え

画面のサイズによって表示するコンテンツの要素を自動的に切り替えてくれるようになります。

↑PCで見た場合

↑iPhoneで見た場合

色々便利機能があって素敵ですね。ダウンロードとデモは下のリンクからどうぞ。

カスタマイズを前程に作られているようで、各ボタンを操作した際のイベントの設定など細かくできるようになっていました。

Youtubeの動画も再生できるようです。

デモ

対応動画形式

ogg (theora/vorbis), mp4/mov (H.264), WebM (VP8/vorbis), FLV

複数対応しているようで、movやflvなど再生できるようです。

デザインにはjQuery UIを使用しているようですので、テーマの変更など簡単にできそうですね。

興味のある方はぜひダウンロードしてみてください！

アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。

作者はTinyMCEの開発者の方だそうです。これは期待できますね。

詳しくは以下

機能

各テクノロジーについて何ができるかは、表にまとめられています。HTML5はJavaScriptだけで画像のリサイズなんかもできちゃうんですね。

以下のような機能があるようです。

• 複数ファイルのアップロード
• アップロード進捗状況の表示
• 最大ファイルサイズの制限
• 画像のサイズを変更する
• ユニークなファイル名の指定

複数ファイルのアップロード処理はCMSでは必須なので、こういったライブラリがオープンソースで公開されるのは開発者には嬉しいですね。

ソースも割とシンプルにできていると思います。これだけで設置できちゃうのはすごいです。

<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3");
</script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="/plupload/js/gears_init.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>


<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$().ready(function() {
	$("#uploader").pluploadQueue({
		// General settings
		runtimes : 'gears,flash,silverlight,browserplus,html5',
		url : 'upload.php',
		max_file_size : '10mb',
		chunk_size : '1mb',
		unique_names : true,

		// Resize images on clientside if we can
		resize : {width : 320, height : 240, quality : 90},

		// Specify what files to browse for
		filters : [
			{title : "Image files", extensions : "jpg,gif,png"},
			{title : "Zip files", extensions : "zip"}
		],

		// Flash settings
		flash_swf_url : 'swfファイルへのパス',

		// Silverlight settings
		silverlight_xap_url : 'xapファイルへのパス'
	});

	// Client side form validation
	$('form').submit(function(e) {
		var uploader = $('#uploader').pluploadQueue();

		// Validate number of uploaded files
		if (uploader.total.uploaded == 0) {
			alert('You must at least upload one file.');
			e.preventDefault();
		}
	});
});
</script>

...


	

		
You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.
	

			

サイトにはデモがあるので、興味のある方は使ってみてください。