[3011] 見た、聞いた、IE9とWP7（Windows Phone7）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［11］
見た、聞いた、IE9とWP7（Windows Phone7）

秋葉秀樹
< https://bn.dgcr.com/archives/20110221140300.html
>
───────────────────────────────────
IE9RC版、出ましたね。つい先日大阪で行われた某イベントで、日本マイクロソフトのUXエバンジェリスト春日井さんと共演というカタチで出演させていただきました。テーマはIE9とWP7（Windows Phone7）です。

まだ2つとも正式リリースがはっきりしてないのですが、参加されたみなさんは日本でもまだ触る機会がなかなかないWP7に興味津々だったようで、WP7を取り囲み列が出来ていたくらいです。

WP7はおしゃれ、カッコいいです。はっきり言ってマイクロソフトらしからぬ、と春日井さん本人もそう言っておられたくらいです。今後は、アプリのマーケットをしっかりと充実させることに重点を置いてプロジェクトを進めていくらしいです。確かに！　まずはこれがないと、どんだけOSがしっかりしていても売れない...かもしれないから。

ちなみにデベロッパー的には、年間約1万円弱の開発者登録料がかかります。僕はiPhoneのデベロッパーとして年間アップルに10800円ほど払っていますが、そんなに変わらない感じですね、若干安いくらい。それと、学生さんは無料らしいです。

スクール通いの皆さんは、通われているスクールがマイクロソフトの「指定」した教育機関かどうかを確認して、そうであったらWindows Phone7アプリの開発者を目指してみると良いのでは！？

●WP7にはIE9が搭載されるということ

現在HTML5で策定されているAPIの中でも、PC版のIE9と同等の機能が備わるらしく、IE9の大きなウリ（？）でもあるハードウェアアクセラレーションがWP7用IE9でも採用されているらしいです。

まあ、スマホでハードウェアアクセラレーションを駆使すると心配なのは電池のような気がしますが、そのへんどうなんでしょうね？

CSS3に関してもPCのIE同等、後で書くけどtransitionが採用されていません。残念ながらちょっとしたCSSでのアニメーションも出来ないということです。

WP7の発売時期は、今年の後半ということをおっしゃられてました。結構遅いと感じています。理由としては、日本語版のOSに関する情報がまだないらしく、この時点で「日本語のフォントは何を使うんだろう」という事すら？　らしいです。

さて、IE9ですが、やはり制作者、デザイナーとして気になるところはCSS3の対応状況と表示の安定性などではないでしょうか？　というわけでIE9セッションではこんな話をしました。

●CSS3 2Dtransformを採用

2Dですが、CSS3の変形が可能になったということです。
CSSの部分だとこんな感じで変形が可能になります。

section.demo:nth-of-type(2) img {
-ms-transform: scale(1.2,1);
}

section.demo:nth-of-type(3) img {
-ms-transform: rotate(-10deg);
}

section.demo:nth-of-type(4) img {
-ms-transform: skew(10deg);
}

section.demo:nth-of-type(5) img {
-ms-transform: matrix(1,.2,-.2,1.3,20,30);
}

scaleは、縦と横別々に拡大縮小ができます、サンプルでは横方向に120％拡大しています。
rotateは回転、サンプルでは10度回転しています。
skewは傾斜、10度傾斜させて平行四辺形のような形になります。
matrixはちょっと複雑で、変形なしのデフォルトだとこんな感じです。

-ms-transform: matrix(1,0,0,1,0,0)

カッコの中をカンマ区切りにしますが、6つの数値が必要です、それぞれの役割は以下のようになります。
1番目 ... 横方向の拡大縮小率、scaleと数値の考え方は同じです。
2番目 ... 縦方向の拡大縮小率、scaleと数値の考え方は同じです。
3番目 ... 縦方向に傾斜します、例えば200pxの画像だと20px÷200px=0.1の値を入れると20px下に傾斜します。
4番目 ... 横方向に傾斜します、計算方法は3番目と一緒です。
5番目 ... 横方向の移動距離、上記サンプルにはありませんが、translateの考え方と同じです。
6番目 ... 縦方向の移動距離、上記サンプルにはありませんが、translateの考え方と同じです。
ちなみに5、6番目の場合最新のOperaではpxの単位を付けないと動きません。

●WebMコーデックを採用

Video要素には、マイクロソフトだけあってH.264は外せないな、と思っていましたがココに来て「WebMを採用しました」と春日井さん。

しかし「< http://html5test.com/
>」では、WebMをサポートしていないと表示されましたので、このあたりはしっかり調べてみないといけませんね。

マイクロソフトは、ChromeにもH.264を対応させようとChrome extensionをリリースしたりという状況で、次第にTheora Oggがなくなっていきそうな感じがします。果たして特許ライセンス料金問題は今後どうなっていくか？　まだまだ混沌としている問題かもしれないですね。

●ハードウェアアクセラレーション

IE9はcanvasによる描画に対し、ハードウェアアクセラレーションを使ってのデモを披露されていました。確かにChromeと比較してだいぶ速いように見えます。ただ、疑問は「ブラウザごとにだいぶ速度が違ってくるんじゃない？」という制作者側やユーザとしては逆に疑問や心配があったんですが、つい最近、Chromeの次期バージョンもハードウェアアクセラレーションに対応するという記事が出ましたね。

ChromeのGPU H/Wアクセラレーションを試す〜IE 9の優位性もなくなった〜（オルタナティブ ブログ）
< http://blogs.itmedia.co.jp/kichi/2010/10/chromegpu-hwie-.html
>

今後は各ブラウザがGPUに対応していくことになりそうだというお話も聞けました。

●対応を見送ったAPIについて

Web SocketやWeb Workersなど、IE9RCでは実装されませんでした。おそらくこのまま正式リリースということになりそうです。これらについては、「（策定されている）仕様自体が不安定な機能を搭載するということになるので見送った」ということです。

これはこれで分かるような気がします。おそらく一部仕様が変更になりました、というのは今後あるでしょうし。他のブラウザのように先行実装は抑えているような気もしますが、今後は安定した機能を採用していくブラウザを目指すIEということらしいので、注目しています。

さて、東京版が来週あります。今回の大阪版と引き続き、もっとIE9をデザイナー視点で切り込んでいきます。それではそれでは。

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［269］Adobe Premiere CS5編
使用されている画像などの項目のレポートを出力する

古籏一浩
< https://bn.dgcr.com/archives/20110221140200.html
>
───────────────────────────────────
今回は、Premiere CS5で使用されている画像などの項目の、レポートを出力するスクリプトです。あれ？　PremiereってJavaScriptで制御できるの？　という人がいるかもしれません。限定的ながら制御は可能です。限定的というよりも機能がないので、ほとんど何もできないような状態ですが......。

以下のスクリプトは、現在のプロジェクトファイルにある画像やシーケンスなどの項目の、レポートファイルを作成し保存するものです。


// プロジェクト内の項目情報を出力する
(function(){
var savefile = File.saveDialog("保存するレポートファイル名を入れて下さい");
if (!savefile) return;
if (!savefile.open("w")){
alert("レポートファイルを保存できません");
return;
}
savefile.writeln(app.project.name); // プロジェクト名
savefile.writeln(app.project.path); // プロジェクトが保存されているパス
var itemList = app.project.rootItem.children;
for(var i=0; i<itemList.numItems; i++){
savefile.writeln(itemList[i].name);
}
})();


上記のスクリプトは項目の名前しか出力しません。項目のパスを出力する場合は、以下のようにnameの代わりにtreePathを指定します。

// プロジェクト内の項目情報を出力する
(function(){
var savefile = File.saveDialog("保存するレポートファイル名を入れて下さい");
if (!savefile) return;
if (!savefile.open("w")){
alert("レポートファイルを保存できません");
return;
}
savefile.writeln(app.project.name); // プロジェクト名
savefile.writeln(app.project.path); // プロジェクトが保存されているパス
var itemList = app.project.rootItem.children;
for(var i=0; i<itemList.numItems; i++){
savefile.writeln(itemList[i].treePath);
}
})();

上記、いずれのスクリプトも、最初の階層のみ出力で入れ子になっている場合には使えません。これに関しては、また次回ということで。

プレミアCS5のスクリプトに関する情報は、ほとんどなく手探りなので、今回はこのくらいで......。

感触としては、AfterEffectsと同じような感覚です。プロパティがあっても違う結果を返したり挙動も怪しい部分もあるので、JavaScriptを使って手抜きをするのは多分難しいでしょう。ちなみに、メディアエンコーダーCS5もJavaScriptの制御に対応しています。


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

コミPo!で服が出たので買ってみた。3月の予定では「ユーザー3Dモデルデータのインポートに対応」とあるので、Google SketchUpで作ったのも読み込めるかも。

・コミPo!
< http://www.comipo.com/
>

・Retro Driver【8話まで書いた】
< http://www.openspc2.org/reibun/comipo/RetroDriver/
>

・HTML5+JavaScriptアイデア＆実践サンプル【明日22日発売】
< http://www.amazon.co.jp/dp/4048704486
>

・JavaScriptコーディング ベストプラクティス【本日21日発売】
< http://www.amazon.co.jp/dp/4844361791
>

・Google API Expertが解説するHTML5ガイドブック
< http://www.amazon.co.jp/dp/4844329278
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集　発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Webディレクター養成ギブス［10］
ウソも方便

蓮井慎也
< https://bn.dgcr.com/archives/20110221140100.html
>
───────────────────────────────────
私はWEB制作ディレクションをするにおいて、よくウソをつきます。ついて良いウソと悪いウソに分けられるとしたら、私がつくウソは"ついて良いウソ"に分類できると思っていますので、常套手段と捉え、積極的にウソをついています。

なかにはウソをつけない、あるいはウソは悪だと思っている真面目な人もいるでしょうが、すべてを真に受けて予定通りにWEB制作進行ができていなければ、クライアントに進行が遅れるたびに謝り倒さないとならなくなり、謝る回数が増えると信用も失う上、それだけ無駄な時間を使うことになります。

また、WEB制作者には「まだ？」「まだ？」としつこく聞くこととなり、クライアントにもWEB制作者にも嫌がられるようになるでしょう。

結果をプラスの方向に働かせるためにつくウソを、"ウソも方便"といいますが、WEB制作ディレクションでは、この"ついて良いウソ"をどれだけつけるか？　が、腕の良い悪いを分けるポイントでもあると思います。

この"ついて良いウソ"は、WEB制作ディレクションの色々なシーンで活用することができます。簡単な例で見ていきましょう。

●"ついて良いウソ"とはこういうもの

・納期に提出する場合

納期が例えば18:00設定されているとしたら、WEB制作者には16:00と伝えておいて、クライアントには17:00にテストアップ連絡しましょう。

WEB制作者がウソの納期に数分遅れたところでまったく問題はなく、遅れたことに謝罪があっても、WEB制作者には「なんとか食い止めたよ。次は遅れないでね」と恩を売り、クライアントには18:00としていた納期よりも1時間早く上がってくることで「早い！」という信頼を得ることができます。

また、WEB制作者に18:00納期がバレても問題ありません。「おかげでクライアントから『仕事が早いね！』と評価の声をいただいているよ！」と、ねぎらいの一言（これもウソ）をかけておけば、これもウソだとバレながらも喜んでくれるはずです。

・WEBデザイナーのデザインが気に入らない場合

WEB制作者が自信満々のWEBデザインを上げてくるが、どうも気に入らず、でも気に入らないとは直接言えない場合、クライアント担当者に一度提出したフリをして、チェックバックを受けたように装い、WEBデザインを修正してもらい、WEBディレクター自身が自信を持って提出できるデザインでクライアントに勝負（実は一回目の提出を）していきましょう。

ここでクライアントから思ったような評価が得られず、大量のチェックバックを受けてしまうと、WEBデザイナーには怪しまれるかもしれませんが、心配することがありません。クライアント担当者よりもひとつ上の役職の人に（架空で）登場してもらい、「担当者的にはOKなんだけど、ひとつ上の役職の主任さんからNGが出たよ...」と残念そうなフリをして、WEBデザイナーと修正の打ち合わせをすれば、みんながみんなハッピーです。

・値切りや納期交渉を受けたとき

クライアント担当者から「安くしてほしい」や「納期を縮めてほしい」と要求されてしまい、その場で「無理ですよ〜」も聞き入れてもらえないような場合、いったん自社の上長に確認するフリをして、時間を置いてから「社内でも検討した結果、無理です」と答えましょう。

受け入れる、受け入れられないはあるでしょうが、とりあえず言ってみて、受けてくれたらラッキーと思うヨコシマなクライアントが中にもいるので、すべてを真に受けて持ち帰って上長に相談していては、面倒くさい部下のひとりになるでしょう。ある程度は現場判断に任せてもらい、クライアントに対しては正面から「無理です」と返すのではなく、ワンクッションおいたふりして「無理です」と返したほうがベターです（「無理です」と返すのではなく、なるべく代案を示しましょう）。

もし受け入れらなかった場合も心配はありません。「もう一度、社内に掛け合います」で十分です。上長に（受け入れなかったことも含めて）経緯を説明し、判断を仰ぎましょう。上長もよく考えて行動しているなぁ〜と、評価を上げてくれるかもしれません。

すべてがすべてこのようなシーンに当てはめることは不可能ですが、上手にウソをついていくことをおすすめします。しかし、ウソが下手だしバレたら...？と不安になる声も聞こえてきそうですので、バレたときの対処法も書いておきます。

●ウソがばれたときはこうする

・社内の人間にバレたとき

悪いウソでないのであれば、決してウソをウソで塗り固めるということではなく、バレたときのことを考えて、社内においては先に自分は上手にウソをついていることを公言しておいて、バレてたところで笑って誤魔化すくらいの愛嬌が必要でしょう。

・クライアントにバレたとき

強引にウソを突き通して関係を悪化させるよりは、クライアントの要求を呑んで、丸く収めましょう。悪いウソではありませんが、そもそもウソはいけないのと、下手なウソをついた授業料だと思って、受け止めるしかありません。

ただし、社内の上長や、WEB制作者は、よい結果に導こうとしたウソがバレたと正直に話すなど（バレていないのにバレた...と落ち込んだウソを話すこともあります）し、飲み代一回くらい奢るつもりで頑張ってもらいましょう。

"ウソも方便"とは本当によく言ったもので、状況に応じて対応方法を変え、結果をよりよい方向に導くためにつくWEBディレクターのウソは、強力な武器になります。

ウソはつけない、つきにくいと思っている人も、最初の時間を前倒しして伝えて、早めの対応をしていくというのからやってみてください。もし、現在がウソもつかない状況でWEB制作ディレクションをしているのであれば、今以上に動きやすくなるはずです。

ウソをつくことで罪悪感に苛まれることもあるかもしれませんが、ウソをつくことによって関係者全員がハッピーになれるのであれば、と信じて良いウソを積極的につくべきです。

WEB制作者から「あの人のウソでついノセられてしまう...」と嘆かれるくらいが理想ですね！

【蓮井慎也 / Shinya Hasui】WEBディレクター
地元WEB制作プロダクションに所属。大手通販企業に常駐し、WEB制作をしています。オンライン名刺 < http://card.ly/hasui/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（2/21）

・やっぱりセンちゃん、カクちゃん、あるいはセンセン、カクカクでしょう。一時はメタミ、ドホスが有力だった、あのレンタル・パンダの名前だ。また上野動物園にジャイアントパンダがやってくる。東京都は今後10年間、都の税金から毎年8,300万円を中国に支払うという。いまどき無駄な支出だと思う。もはやパンダが日中友好の証しだなんて思う人は一人もいないだろう。それでも経済効果はいくらかあるし、単純に喜ぶ人も多いようだからまあいいか。名前の公募は1月23日に締め切られ、3月下旬、パンダ公開と同時に発表される。応募の内容は公開されるはずだが、もしセンセン、カクカク（いうまでもない尖尖、閣閣だが、応募条件はカタカナ表記のみ）が上位だったら面白くなる。トップだったりしたら（あってほしい！）政府は焦るだろうな。かわいいパンダを見て子どもが「センセン、カクカクなんて変な名前、どうして？」と聞けば、それはね...、とあの国辱を伝えることができる。まことに意義深い。カンカン、ランランなんてのも響きがいいな。カンカン、メイメイはどうだ。漢字で菅、乱、迷。でも、3月下旬にその人、そこにいなかったりして。（柴田）

・蓮井さんの「ウソも方便」が通るのは、蓮井さんが有能だからだと思う。皆が真似されたら困るよ〜。納期。こっちはぎりぎりでやっていて（こちらは進行報告しているにも係わらず、関連作業をねじこまれる場合があったり。もちろんそればかりではないが）、一日延びたらゆっくりできるのにと思いつつ、睡眠不足になり頭朦朧としながら作業して提示。半日や一日以上経ってからチェックされたら（急かしたわりにチェックが遅い。データが開かないとか言われたり。今頃何言ってるの、最優先させたのに！）、あーあれ嘘だったんだな〜と思い、この人とやる時は納期遅れても良さそうだな〜、他の急ぎ仕事を優先させようかなと思ったりする。こちらも最初から「ぎりぎりのぎりぎりだと、どのぐらいまで待ってもらえます？（本当の納期っていつです？）」と聞いてみたりする時も。デザインが気に入らない場合。こっちはポリシーあってのものなのになぁと一応言い、まぁクライアントの意向なら仕方ないかと修正する。で、しばらくたってから元のものに戻させられると、あー、これはディレクターの考えの修正だったのねと思い、その人とやる時は、元データや経過データを細かく残し、理由を伝えてなるべく修正しないように踏ん張る。差し戻し、二度手間、意図のわからない（意味のない、ポリシーのない、改悪）修正がとにかく嫌い。一度目のチェックで通ったものが、二度目、三度目と回を重ねると新たにチェックが入っていくのも嫌い。チェック側の迷いに付き合わされることになるから。暗黒ループトンネルへ突入するのがわかるから。旅（比喩）に出てもいいですか？　と思う。ちゃんと理由のわかる修正は、おー、こんな考えもあったか〜などと嬉々としてやる。なので、向こうも大変とわかりつつも、とにかくこちらの意向を伝えてくださいよ〜と言ってしまう。が、それをするとディレクターから嫌われる気はする。特にクライアントの意見とこちらの意見が合致してしまうと。値切りの話は勉強になる〜。フリーランスでは使えなかったけど。一度の提示ですべてが決まってしまうような気がしていたわ。で、どんなディレクターさんでも、人柄が良かったら、嘘とわかっていても作業優先させたり、納期早めに言ってくれてありがとう、と思ってしまうんだよな〜。修正に関しては、そういう人はこっちの意見をちゃんと持っていってくれたりするし、指示も具体的だし、納期も目標と本当の納期を教えてくれたりするので、絶対遅れるものかと踏ん張るし。これはもう相性とでも言いましょうか。（hammer.mule）