イナヅマTVログ

2011.06.09
13:01
author: taikiken
0件のコメント

WordPressテーマ”Yoko”に学ぶスマートフォン対応CSS

昨日(2011-06-09)当ブログのテーマをYokoに変更しました。
Elmastudio : Yoko
http://www.elmastudio.de/themes/yoko-wordpress-theme/
http://wordpress.org/extend/themes/yoko

ドイツ生まれのテーマです。
ご覧のようにPC, iPad ランドスケープでは3カラム、iPad ポートレイトでは2カラム、iPhoneでは1カラムスタイルのテーマです。
PCでもブラウザウインドウ幅を狭めると3->2->1とカラムが変化します。
グリッドのようなリキッドのようなデザインです。

HTML5
YokoはHTML5で作られています。
header, nav, footer, aside... などHTML5から登場したタグで構成されています。

CSS3
CSS3で新たに使用できるようになった :last-child 疑似クラスなどを使用しています。

スマートフォン対応
これが最大の特徴になると思います、Yokoはプラグイン無しの状態でスマートフォン、タブレットでの表示に対応しています。
しかも、ポートレイト表示・ランドスケープ表示にも対応しています。
JavaScriptに頼らずCSSだけで、です。

＊IEのためにJavaScriptは使われています。

WordPressにはWPtouch, mobilepressなどの優れたスマートフォン対応プラグインがあります。
ただ、カスタマイズが難しくPCサイトともう１つ別のスマートフォンサイトを作る労力を強いられてしまいます。

もうひとつ、これらのプラグインを使用したサイトを利用した時に感じる違和感が常にありました。

どちらのプラグインも程度の差はありますがiPhoneアプリのようなデザインとインターフェースを実現・提供しようとしています。
良く出来ていますが所詮にせもの(Fake)です。

他にもスマートフォン用にSencha, jQuery Mobile, などのJavaScriptを用いWebアプリなのにネイティブアプリのようなインターフェースとデザインを採用するサイトも増えてきています。

OSレベルで実現しているUIを擬似的に作り出すのは似たものはできたとしても、どこかぎこちないものです。

それよりはスマートフォン・ブラウザで最良のデザインとUIを実現するために努力する方が良い気がしています。
iPhoneアプリと同じデザインと動きをWebにも求めるのは悪くはないかもしれませんが、少々短絡的に過ぎるのでは無いかと考えます。

うまい言葉が見つからないのですが、制作者として思考を停止しているように思えてしかたがありません。

Yokoのアプローチはとても新鮮です。
「できるじゃん」って話です。

スマートフォンといえどもブラウザで見ているのはWebコンテンツです。
重要なのはあの小さな画面でもストレスなく見ることが可能なことではないかと考えます。

アプリのようなデザインだけど使いにくいサイトを見たいわけではありません。

@media (max-width)で対応
Yokoはstyle.cssの中でモバイル端末の画面幅に合わせてCSSを切替えています。

style.cssの末尾に下記のようなmediaブロックの中でプロパティ値を変更しています。

/* --- iPad Landscape --- */
@media screen and (max-width: 1024px) {
}
/* --- iPad Portrait --- */
@media screen and (max-width: 880px) {
}
/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
}

max-width : 620pxのブロックでiPhoneなどスマートフォンに対応するCSSを設定しています。
コンテナはpxではなく%で幅指定されているのでウインドウ幅に合わせてコンテナは伸び縮みします。

はでなエフェクトはありませんがブラウズするに困ることはありません、ただ単にPCサイトと同じ内容でレイアウトが違うだけです。
WPtouch, mobilepressなどでは一部情報が欠落してしまうこともありますが、Yokoではそれもありません。
これが本来のWebコンテンツのあり方のような気がします。

子テーマとしてはどうなの
で、どうなのYokoは最高なの？
と聞かれると答えにちょっと困ります。

少なくともYokoを親テーマにすることは可能ですが子テーマでのカスタマイズはたやすいようには思えませんでした。
style.cssでfont-familyの指定がなぜか多数記述されていてオーバーライドはめんどくさく思えました。
そんなにfont-familyの指定はいらなかったように思います。

制作者の趣味だと思いますがtext-transform:の多用は好きではありません。
font-style: italic;の多用も好きではありません。
私の好みの問題なのかもですが…

HTML5への対応もどうせならもっとガッツりしても良かったのでは無いかと思います。
HTML5への対応も不十分に感じられる部分もあります。

お勧めはしにくいのですがスマートフォンサイトを制作・企画する人に一度試して欲しいテーマです。

アプリのようにデザインし、アプリのようにエフェクトやトランジッシヨンを実装することだけが答えじゃないことが読み取れるのでは無いかと思います。

使いにくい扱いづらいと書きましたがテンプレートをダウンロードしてごちょごちょカスタマイズして公開するのに3時間ほどでした。
ブログレベルなら良い選択肢のひとつのように思います。

当然じっくり改造すれば企業サイトでも充分使用可能だと思います。

あるいはstyle.cssの中のヒントを使って新規にテンプレートを制作しても良いでしょう。

LOUIS VUITTON Legends

2011.06.09
00:03
author: taikiken
0件のコメント

LOUIS VUITTON Legends, ペレとマラドーナからサインを貰う

LOUIS VUITTON Legends

LOUIS VUITTONのキャンペーンサイト。
http://www.louisvuittonjourneys.com/legends/
往年の名選手、ペレ、マラドーナ、ジタンの三人がサッカーゲームに興じています。

「サインをもらう」を選ぶとペレ、マラドーナのどちらかからサインを貰えます。
サインを貰うにはFacebookアカウントが必要です。
ビデオ映像の中のサインをする紙にFacebookアイコンがレンダリングされます。
これ、湾曲も見事に違和感なく仕上がっています。

それと多くの言語に対応しています。
どんだけ労力使ってるんだよって話です。

これだけの大物を揃えたんですから制作も手を抜けないですよね〜。

2011.06.08
12:17
author: taikiken
0件のコメント

【速報】iOS5のmobile Safari, CSS対応状況

WWDC 2011 ではジョブズさんも登場して見応えがありました。

iOS 5 の Safari はタブ機能も実装し使いやすく生まれ変わるとのこと、楽しみです。
http://www.apple.com/ios/ios5/features.html#safari

Beta SDK もダウンロード可能になり早速インストールして試してくれた方がいるようです。
David B. Calhoun – Developer Blog
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5
CSS, JavaScript の対応状況を調べています。

気になるところをつまみ食いです。

position:fixed に対応
バグっていて使いものにならなかった position:fixed が文字通りFixされているらしいです。
position:fixedを使うShadowboxなどのポップアップ系エフェクトが全滅な状況は救われるでしょう。
実際AppleのサイトもPC Safariではポップアップさせていてもmobile Safariではわざわざ条件分岐させてポップアップをしないように作られていました。

overflow:scroll に対応
以前投稿したように mobile Safari は overflow プロパティが何を設定しても hidden 扱いになるというバグなのか仕様なのか訳分かんない状態でした。
モバイルSafari(Webkit)のCSS:overflow

そのせいで Adobe の ActionScript API は見切れてしまい iOS デバイスでは使い物になりませんでした。

overflowへの対応がここまで放置されていたのはAppleの怠慢とも言えます。
ePab表示も mobile Safari のエンジンWebkitを使っているため同様の問題が起こっていました。
本文中のコードブロックが見切れてしまい表示されないことがありました。
わざわざ見切れなくなるまで文字サイズを小さくしコードをコピーしメモにはり付けるなんて面倒なことをしていました。

ただこれはWebkitの問題だったのかもしれません。
Android の標準ブラウザでも同じでしたから。

ファイルアップロードには非対応のまま
input type=”file” には対応していないとのことです。
Appleのサンドボックスではアップロードは許せないのでしょうかねぇ。

Android ブラウザは対応していることを思うと何とかなんないものでしょうか。

後書き
David B. Calhoun – Developer Blog では他にECMAScript 5 の対応状況やHTML 5 test のスコアなどものっているのでご覧になると良いでしょう。

新たに追加されたForm input type もあります。
良い記事を書いていただき感謝です。

update 2011-06-10
書き忘れていました。
Beta SDKでの話なので正式リリースを待つ必要があると思います。

David B. Calhoun – Developer Blog のデモビデオを見たところ、overflow:scroll はやっぱり操作しづらい感じがしました。
やっぱりコンテナを固定化する方法はまずそうです。

2011.06.06
18:46
author: taikiken
0件のコメント

Flash CS5をクラッシュさせるActionScriptの入力方法

なんの役にも立たない話です。

Progression コマンド機能を使って swf を読込む簡単なコードを書いていたら Flash CS5 がクラッシュするつまんない話。

import jp.progression.commands.net.LoadSWF;
import jp.progression.commands.lists.SerialList;
 
import flash.net.URLRequest;
import flash.display.MovieClip;
 
new SerialList (
	null,
	new LoadSWF(
		new URLRequest('example.swf'),
		null,
		{
			onProgress: function ():void {
				trace(this.bytesLoaded / this.bytesTotal);
			}
		}
	),
	function ():void {
		trace('complete');
	}
).execute();

とフレームにスクリプトを書いた後ふと「new SerialListのブロックは関数の中に書こう」と思いコードの修正を始めました。

まず、new SerialList の前に function 文を書きました。

function doLoadSWF ():void {

次に閉じる } を書くために ).execute(); の後ろにカーソルを移動し[return]キーを叩くと……見事に Flash CS5 はクラッシュします。

3度試して3度ともクラッシュしたのでまちがいないかと。

どうしたかというと。

function doLoadSWF ():void {
 
}

関数を先に書いておいて { } の間に new SerialList から ).execute(); をカット&ペーストしました。

少々イレギュラーなコードの書き方なのでFlash君がむずがったのかもしれません。

そろそろ Flash がクラッシュするところを見たかったんだよなーって方はお試しあれ。

2011.06.03
14:08
author: taikiken
0件のコメント

Audiotool, Chrome Storeに登場

Chrome Store - Audiotool

Audiotool

Audiotool が Chrome Store に登場してたので早速インストール。
https://chrome.google.com/webstore/detail/bkgoccjhfjgjedhkiefaclppgbmoobnk

Facebook : http://www.facebook.com/audiotool

すでに 100,000 ダウンロードらしいです。

Audiotool の完成度の高さにはいつも感激します。
Chromeアプリとしてインストールできるといつでも楽しめることができます。

Chromeのこの機能とても便利です。

2011.06.02
09:25
author: taikiken
0件のコメント

気になったら調べる、GTween.endでCompleteイベントは発生する？

ActionScriptのTweenエンジンのひとつGTweenには強制的にTweenを最終値へジャンプさせるend関数が用意されています。

このend関数を実行した時にonCompleteプロパティに設定したCallback関数は実行されるかが気になりました。

気になったら調べる、どんな些細なことでも、という訳でちょっと実験。

import com.gskinner.motion.GTween;
import com.gskinner.motion.easing.*;
 
import flash.display.Sprite;
import flash.display.Graphics;
 
function drawBackground ():void {
	var sp:Sprite = new Sprite();
	var g:Graphics = sp.graphics;
	g.clear();
	g.beginBitmapFill(new PNGChecker());
	g.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
	g.endFill()
	addChild(sp);
}
drawBackground();
 
function createMotionTarget ():Sprite {
	var sp:Sprite =  new Sprite();
	var g:Graphics = sp.graphics;
	g.clear();
	g.beginFill(0xff0000);
	g.drawCircle(0,0,20);
	g.endFill();
	return sp;
}
var target_sp:Sprite = createMotionTarget();
 
target_sp.x = target_sp.y = 30;
addChild(target_sp);
 
var gtween:GTween = new GTween(target_sp, 2);
gtween.ease = Sine.easeOut;
gtween.onComplete = onMotionComplete;
 
function onMotionComplete (g:GTween):void {
	trace(g);
}
 
gtween.end();

gtween.end();を実行するとonMotionCompleteが呼び出されていました。
そうなっていて欲しかったので一安心です。

2011.05.28
12:10
author: taikiken
0件のコメント

Objective-C, Cocos2Dを使った開発を助けてくれるアプリ

Cocos2DはObjective-Cのゲーム・フレームワークです。
OpenGL, 物理エンジンBox2D, を搭載しゲーム開発に威力を発揮します。

高機能な分敷居が高く特に開発初期には戸惑うことばかりです。

FlashのようなGUIなエディタがあればと思わずにはいられませんでした。
慣れればガリガリとコードを書けるんでしょうけど・・・

以前、LevelHelperを買ってみようかなぁと投稿したんですけど、まだグズグズ悩んでます。

探してみるとあるもんですねぇ、有料・無料と。

Cocoshop – OpenSource Visual Editor for Cocos2D
オープンソース版のエディタがあるようです。
http://www.cocos2d-iphone.org/forum/topic/15668/page/2
このページの下の方にリンクがありました。

ソースはgithubで公開されています。
Source: https://github.com/andrew0/cocoshop

CocosBuilder
ロードマップも公開されていて今後に超期待です。
http://cocosbuilder.com/

Roadmap

I am developing CocosBuilder in my spare time, so updates are coming when I have some time over and it isn’t sunny outdoors. Please give me feedback and encouragement to keep going! This is an approximate roadmap for the planned updates to CocosBuilder:

0.3 – Support for SpriteSheets & Automatic updates – done

0.4 – Multiple documents, improved loading and saving & document types -done

0.5 – Cut/Copy/Paste

0.6 – Undo/Redo

0.7 – Smoother interface & a visual assets manager

0.8 – Possibly support for more types of objects

0.9 – Stuff that I’ve forgotten to add to the roadmap

1.0 – Overall bug fixes, better looking website & documentation

Mac App Store

LevelHelper
LevelHelper – Bogdan Daniel Vladu

SpriteHelper
SpriteHelper – Bogdan Daniel Vladu

SpriteHelperFree
SpriteHelperFree – Bogdan Daniel Vladu

2011.05.23
21:39
author: taikiken
0件のコメント

ActionScript 3, Event処理を簡単に、SignalsでTimer

AS3のループ処理TimerでSignalsを使ってみる。

import org.osflash.signals.natives.NativeSignal;
import flash.utils.Timer;
import flash.events.TimerEvent;
 
var timer:Timer = new Timer(1000 * 0.5);
var loop:NativeSignal = new NativeSignal(timer,TimerEvent.TIMER);
loop.addWithPriority(onTimer, 9);
loop.add(onTimerSecond);
timer.start();
 
var n:int = 0;
 
function onTimer (e:TimerEvent):void {
	if (n++ > 3) {
		loop.removeAll();
		return;
	}
	trace(n);
}
function onTimerSecond (e:TimerEvent):void {
	trace('Second');
}

【メモ】
リスナーがNativeなEventを扱う場合は必ず引数が必要。
タイマーを止める時にはNativeSignalインスタンスからリスナーをremoveできる。

loop.removeAll();

一挙にリスナー群を削除できるのはかなり便利。
今回のようにリスナー側から削除命令を出す場合は、プライオリティーが一番高いリスナーにremoveAll();を仕込む。

2011.05.20
21:29
author: taikiken
0件のコメント

HTML5, CSS3 の Daft Punk ビジュアライザー

Daft Punk の楽曲を使ったサウンド・ビジュアライザーが公開されています。
ブログを読むと HTML5, CSS3で作ったとのこと。
Anatomy of a Mashup: Definitive Daft Punk visualised

著作権あたりはかなりあやしい感じですが、いけてるビジュアライザーです。

“Definitive Daft Punk” visualised in realtime

Definitive Daft Punk visualised

Definitive Daft Punk visualised

2011.05.18
12:44
author: taikiken
1件のコメント

ActionScript 3, 定数のように扱える配列型変数のお勉強

前投稿での「ActionScript 3, 配列を定数にしても参照側から書換えられる」の解決策を考えてたら長くなりそうだったのでエントリーを分けました。

次のように考えました。
【対処法】
定数にスカラ以外を設定できるけど設定しちゃうと思わぬ不具合を引き起こすかもしれないので使わない方がいいかも。

代わりに定数のように扱える変数をつくってみたらどうだろう。

いくつかアイデアがあったのですが、”画期的！”と自画自賛した方法がうまく動かなかったので以前から使っている方法をご紹介してお茶を濁しておきます。

package  {
	import flash.utils.ByteArray;
 
	public class Fruits extends Object {
		private static var _BASKET:Array = null;
 
		public function Fruits() {
		}
 
		public static function set BASKET(datas:Array):void
		{
			if (_BASKET != null)
				return;
			_BASKET = clone(datas);
		}
 
		public static function get BASKET ():Array
		{
			return clone(_BASKET);
		}
 
		protected static function clone(source:*):*
		{
			var ba:ByteArray = new ByteArray();
			ba.writeObject(source);
			ba.position = 0;
			return ba.readObject();
		}
	}
}

Class側の設定は以上です。

テスト

var datas:Array = ['apple','banana','melon'];
Fruits.BASKET = datas;
 
var copy:Array = Fruits.BASKET;
 
datas[0] = 'スイカ';
trace(Fruits.BASKET); //apple,banana,melon
trace(copy); //apple,banana,melon
 
copy[0] = 'マンゴ';
trace(Fruits.BASKET); //apple,banana,melon
trace(copy); //マンゴ,banana,melon
 
var datas2:Array = ['いか','たこ','さんま'];
 
Fruits.BASKET = datas2;
trace(Fruits.BASKET); //apple,banana,melon

引数で渡される配列が二次元以上だと concat, slice では複製が作れないので以前投稿したclone関数を使っています。