2012.5.19 セミナー
◆demo1 「Flashユーザーが取り組むHTML5」
・セマンテック マークアップ：文書構造と見栄えの分離
・チッチコンテンツ
・ビデオタグ
・SVG
ベクターグラフィックスが可能に。イラスト限定になるだろうが、拡大縮小が自在
SVGタグにて頂点情報記入での描画
・透明度：opacity
・色相 ： hsla(色相、彩度、明度 、透明度）指定にて可能
・要素の回転：transform やrotate(degree)で可能
・CSSトランジション（CSSによるアニメーション）
・canvas ： htmlタグ＋javascriptによる描画
・テキストエフェクト ： chrome限定
ブラウザにより性能が大きく異なる chromeはローカルで動かないこと多し
・IE10は他ブラウザとほぼ同等レベルとなる見込み
IE9は一部のみサポート（WEBGLは当面見込みなし）
XPはIE8までしか上げられず、XP自体のサポートは2014/4/8まで。
したがってこのあたりまでは対応する必要がある。
IE8 IE6/7/8のシェアは32.1% 。考慮の必要あり。
FLASHは描画APIが計算時ロックできること、actionScriptはコンパイルして実行するのに対し、javascriptはインタプリタであることから、Flashのほうが実行速度が速い。
現時点でのFLASHの描画速度はHTML5の3倍程度となっている。
・クライアントへの見積もりについて
Flash案件に対しHTML5+Javascriptによる制作の場合、見積は1.5～2倍程度となることが多いらしい。フレームワークがあまりないこと、ノウハウが蓄積されていないこと、そして最終段階でのFlashでの再作成の可能性が高いことなどが要因。またiPadやiPhone・タブレットなどへの対象デバイスが多いことから見積額が高くなるのは当然とも言える。
◆demo2「制作事例から考えるテクノロジーの選択基準」
普通のPC向けウェブサイト：どちらでもいい
facebook：いいねボタンはhtml5しか使えないため、html5での制作がよい
HTML5で制作しても検索エンジン対策としての差は設けない（GOOGLE)
結論（私見）：HTML5にて制作すべき
情報：Html5shiv ： createElement("header")などを用い、html5のタグを取り扱っていないブラウザでも、マークアップが可能となる。
☆ns 追記
これはよい。これまでcssのクラス設定すら生きなかったので、とりあえず記入しても大丈夫になったのは嬉しい（もちろんcanvas等の機能が使えるようになるわけではない）。
以下の記事が参考となる
http://www.skyward-design.net/blog/archives/000134.html
◆demo3「新登場CreateJSとは？」
タイムライン上のインスタンス類をhtml5+javascriptを用いて実現するために必要なjavascriptライブラリや画像を出力する。
Toolkit for CreateJSを用いてパブリッシュすると以下のフォルダが生成される
images : 画像類
cliff.png など
libs : CreateJSライブラリ
easeljs-0.4.2.min.js、
movieclip-0.4.1.min.js 、
preloadjs-0.1.0.min.js
soundjs-0.2.0.min.js
tweenjs-0.2.0.min.js
など
sounds : サウンド
pop.mp3 など
上記内容は元となるFlashの内容により異なる。
これら出力されたパーツをもとにCreateJSライブラリなどを用いてスクリプティングをし、HTML5コンテンツを仕上げる。
ペンギンだけをタイムラインにおいてテストを実施してみる。
出力すると
[ images ]
PenBitmap.png
[ libs ]
easeljs-0.4.2.min.js
preloadjs-0.1.0.min.js
[ sounds ]
sample.html
sample.js
が出力されている。若干わかりづらいので
タイムラインに何も置かずにパブリッシュする。すると、最小限のファイルが生成される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>sample</title>
<script type="text/javascript" src="libs/easeljs-0.4.2.min.js"></script>
<script type"text/javascript" src="samaple.js"></script>
<script>
function init(){
canvas=document.getElementById("canvas");
stage=new Stage(canvas) ;
//上記で取得したcanvasを放り込むとeasel側でセッティングしてくれるらしい 。以降Flashのstageと同様addChildなどのコマンドを
//表示リストのように用いることができる
//exportRoot=new lib.sample() ; //easel.jsに内包されているらしい "sample"は元のFlashのファイル名
exportRoot=new Bitmap("images/PenBitmap.png");
exportRoot.x=canvas.width/2;
exportRoot.y=canvas.height/2;
//中心点の設定を行う これはちょっと便利かも
exportRoot.regX=exportRoot.image.width/2;
exportRoot.regY=exportRoot.image.height/2;
stage.addChild(exportRoot);
//canvasが持っていないenterframeのセッティングを行う
stage.update();
//Tickerオブジェクト tick()という関数が毎フレーム呼出される
Ticker.setFPS(24);//内部的にはsetIntervalですかね
Ticker.addListener(stage);
//レジュメでは外部に書いているけど、ここでは内包させておこう。
function tick(ev){
exportRoot.x-=5;
if(exportRoot.x<0){
exportRoot.x+=canvas.width;
}
stage.update();
}
}
</script>
</head>
<body onload="init()" style="background-color: #d4d4d4">
<canvas id="canvas" width="240" height="180" style="background-color: #ffffff"></canvas>
</body>
</html>
上記にて読み込まれた画像が水平にスクロールする。なお上記スクリプトでは画像読込完了イベントを無視しているので、実際はPreloadJSを用いて外部画像ファイルの読込を待つ必要がある（通常はnew Image() + image.addEventListener("load" , loaded , false)にて完了を待つ。上記では、easelJS内包（とおもわれる）のBitmapクラスを用いているので自力でイベント取得できない）
マウスドラッグ等については若干注意が必要
my_mc.onPress=pressHandler;
function
pressHandler (ev){
//evがマウス座標を知っている
my_mc.y+=10;
ev.onmouseMove=dragHandler;
ev.onmouseUp=releaseHandler;
}
function dragHandler(ev){
my_mc.x=ev.stageX;
my_mc.y=ev.stageY;
}
function releaseHandler(ev){
this.onMouseMove=this.onMouseUp=null;
}
詳細は以下を参照
http://www.fumiononaka.com/Sample/F-site/FF120519.html
2012年5月25日金曜日
2012年4月30日月曜日
特保のコーラ(キリン メッツ コーラ)
特保のコーラが発売されました。
特保となった理由は食物繊維が入っていることでしょう。
5.4グラムとサプリ並みの量が含まれています。
食物繊維は女性で2グラム、男性で4グラム程度不足していると言われているので、それを十分補うことができます。
食物繊維には不溶性と水溶性の２種類があり、食べるバランスは「不溶性：2 水溶性：１」がいいと言われています。ところが野菜などは不溶性の方が多く含まれているため、どうしても水溶性が不足しがちです。
このコーラに入っている食物繊維「難消化性デキストリン」は水溶性ですので、食物繊維の摂取バランスを整えてくれます。
宣伝では「脂肪の吸収を抑える」とありますが、便秘予防効果の方が期待できるとおもいます（お腹が緩くなりやすい人は要注意です）。
さて肝心の味ですが…まぁ普通のコーラです。
他社のコーラでも食物繊維サプリを混ぜれば、この「特保」コーラと同等の効果が期待できます
（そこまでしてコーラ飲まなくてもいいんですが…）。
広告には矢吹ジョーが使われています。
隣のテーブルでは、金竜飛が紅茶を飲んでいて、ダイエットを演出するためのこだわりが感じられます。
とはいえ、ここは力石徹を使うべきでしょう。
「お嬢さん。そのお気持ちだけありがたく飲ませていただきます」
どぼどぼどぼ。
おっと、こぼしちゃうからダメか？
キリンビバレッジ | CM情報 キリン メッツ コーラ「矢吹ジョー」篇
http://www.beverage.co.jp/product/cm/mets/joe.html
2012年4月18日水曜日
canvasのマトリックス(setTransform)について
oreireyのHTML5Canvas内 P43 CH2EX10.html
・マトリクス
|a , b , c , d , tx , ty |
setTransform(1 , 0 , 0 , 1 , 0 , 0)
（最終行[ 0 , 0 , 1]は内部的の補完されていると思われる）
このあたりはフラッシュ同様
| 1 , 0 | | x |
| 0 , 1 | | y |
| a , c | | x |
| b , d | | y |
のa , b , c , dの要素は拡大・縮小・回転・傾斜を調整可能。
座標の移動を行うためtx , tyを追加する
| a , c , tx | | x |
| b , d , ty | | y |
| 0 , 0 , 1 | | 1 |
・setTransformをセットしてから描く
・単独でrotateやtranslateを用いる場合も同様（上記の部分機能だからあたりまえか）
・単独で用いる場合は単位行列（だっけ？[ 1 , 0 , 0 , 1 , 0 , 0 ]）をセットし初期化する
・Flashと違い左上原点考慮ではなく、描画中心点を移動させてから描画する印象
(moveToしてから描画するのに近い？）
もうちょっと読んでから整理してみる
2012.5.14追記
・マトリクス
|a , b , c , d , tx , ty |
setTransform(1 , 0 , 0 , 1 , 0 , 0)
（最終行[ 0 , 0 , 1]は内部的の補完されていると思われる）
このあたりはフラッシュ同様
| 1 , 0 | | x |
| 0 , 1 | | y |
| a , c | | x |
| b , d | | y |
のa , b , c , dの要素は拡大・縮小・回転・傾斜を調整可能。
座標の移動を行うためtx , tyを追加する
| a , c , tx | | x |
| b , d , ty | | y |
| 0 , 0 , 1 | | 1 |
・setTransformをセットしてから描く
・単独でrotateやtranslateを用いる場合も同様（上記の部分機能だからあたりまえか）
・単独で用いる場合は単位行列（だっけ？[ 1 , 0 , 0 , 1 , 0 , 0 ]）をセットし初期化する
・Flashと違い左上原点考慮ではなく、描画中心点を移動させてから描画する印象
(moveToしてから描画するのに近い？）
もうちょっと読んでから整理してみる
2012.5.14追記
2012年3月30日金曜日
マイケル･サンデル究極の選択「格差拡大あなたはどこまで許せるか？ 」
途中面白かったので覚書。
この番組は不思議なことに、日本人学生の発言が英語のときは字幕を表示し、外国人学生の発言が英語（全員だと思う）のときは日本語に吹き替えている。
日本人に日本語吹き替えが合わないという点を間引いても、違和感があった。いっそ全て字幕でもよかったのではないだろうか。
さて本題。
この番組中盤のテーマ、成功は「運」かそれとも「努力」か、の議論が面白かった。
突破口を開いてくれたのはケイという日本人学生。個人的には、英語を使わず日本語で発言していたこの学生の意見が最もよかったと思う。
ケイの意見を要約すると
・消費税より所得累進性を高めるべきだと思う
・多く稼いでいる人はインフラ等より多くの社会基盤を使っている
・稼いだ財産も社会によって守られている
・普通の人より「社会そのもの」を利用しているといってもよい
・社会を利用して得た財産は税で徴収し、社会に還元すべき
ここから成功に「運」はどの程度必要なのか？という議論に発展。
上海の女学生は「運」のほうが圧倒的に必要と言い切る。
「自分と同じだけの努力をしても、チャンスに恵まれなければ結果は出ないと思う」
（他学生から一流大学へ入学したことの指摘されたことに対して）
古田氏（元ヤクルト捕手）「一流選手は自分が成功した理由に『運が良かった』ということが多い。逆にそう言えるようになって初めて一流と言えるのかもしれない。もちろん運だけで成功したわけではないが、そういう謙虚な気持ちが大事なのではないか」
ここでサンデル教授がウォーレン・バフェット氏を例として挙げる。
彼は投資家としての能力が現代社会において高く評価されている（だからこそ巨額の富を得た）。
もし私達が日本の武家時代に生まれていたとしたらどうか？多分成功していないであろう。どのような社会に生まれるかは運である。成功は必ずしも自分の努力だけではない。
我々は今の自分は自分の努力の結果だと思いがちだ。それゆえその成果は全て自分が受け取るべきだと考えてしまう。
社会基盤を使って成功したにも関わらず、自分の力だけで成し遂げたと考えるのは、いささか傲慢または思い上がりとも言えるのではないか？
収入の多い人は少ない人を助ける義務があるのではないか？
という議論まで発展した。いい議論だったと思う、と教授はまとめた。
この番組は不思議なことに、日本人学生の発言が英語のときは字幕を表示し、外国人学生の発言が英語（全員だと思う）のときは日本語に吹き替えている。
日本人に日本語吹き替えが合わないという点を間引いても、違和感があった。いっそ全て字幕でもよかったのではないだろうか。
さて本題。
この番組中盤のテーマ、成功は「運」かそれとも「努力」か、の議論が面白かった。
突破口を開いてくれたのはケイという日本人学生。個人的には、英語を使わず日本語で発言していたこの学生の意見が最もよかったと思う。
ケイの意見を要約すると
・消費税より所得累進性を高めるべきだと思う
・多く稼いでいる人はインフラ等より多くの社会基盤を使っている
・稼いだ財産も社会によって守られている
・普通の人より「社会そのもの」を利用しているといってもよい
・社会を利用して得た財産は税で徴収し、社会に還元すべき
ここから成功に「運」はどの程度必要なのか？という議論に発展。
上海の女学生は「運」のほうが圧倒的に必要と言い切る。
「自分と同じだけの努力をしても、チャンスに恵まれなければ結果は出ないと思う」
（他学生から一流大学へ入学したことの指摘されたことに対して）
古田氏（元ヤクルト捕手）「一流選手は自分が成功した理由に『運が良かった』ということが多い。逆にそう言えるようになって初めて一流と言えるのかもしれない。もちろん運だけで成功したわけではないが、そういう謙虚な気持ちが大事なのではないか」
ここでサンデル教授がウォーレン・バフェット氏を例として挙げる。
彼は投資家としての能力が現代社会において高く評価されている（だからこそ巨額の富を得た）。
もし私達が日本の武家時代に生まれていたとしたらどうか？多分成功していないであろう。どのような社会に生まれるかは運である。成功は必ずしも自分の努力だけではない。
我々は今の自分は自分の努力の結果だと思いがちだ。それゆえその成果は全て自分が受け取るべきだと考えてしまう。
社会基盤を使って成功したにも関わらず、自分の力だけで成し遂げたと考えるのは、いささか傲慢または思い上がりとも言えるのではないか？
収入の多い人は少ない人を助ける義務があるのではないか？
という議論まで発展した。いい議論だったと思う、と教授はまとめた。
2012年3月16日金曜日
セミナー「ActionScript 3.0 パフォーマンスチューニング 」のサンプル007_capture_phaseについて
2012.2.15のセミナーで使用されたサンプルをダウンロードさせていただいた。
掲載いただけるとはありがたいことである。
掲載いただけるとはありがたいことである。
その中のひとつ007_capture_phaseについての覚書。
このサンプルはcaptureについて説明するためのものであるが、
子にイベントを設定せず、親だけでコントロールしている、ということも特徴だ。
これまでの私の製作方法は
１．ボタン専用のクラスを作り、
２．その中でエフェクトなどのメソッド作成し
３．そのクラスにマウスイベントを付与していた
４．さらに個別にマウスイベントの起動・解除メソッドを設定親またはメインのスクリプトでマウスイベントの起動・解除を設定していた
一方今回の方法を使うと
・ボタンは単純なグラフィックで構成される要素だけにし、
・エフェクトはメソッドで作成、そこに操作対象（ここではボタンmc)を渡す
という手法が使える（クラスメソッドにしてもよいと思うが、クラスメソッドとかクラス変数はインスタンスと違ってnewでクリアされず残ってしまうので、わざわざ初期化メソッドを作らなければならないので面倒かも）
また、驚いたことにaddEventListenerの第3引数：captureをtrueにすると
そのaddEventListenerを設定したオブジェクト自身はターゲットにならず
イベント配信を行わない。
試しにサンプルのflaファイルにGroup(mc)のボタン群の背景に壁紙を敷いてみたが、
クリックしても反応はない。
ちなみに、サンプルファイルのxChange内に以下のスクリプトを記載したところ
ちなみに、サンプルファイルのxChange内に以下のスクリプトを記載したところ
trace(eventObject.target.name , eventObject.currentTarget.name);
のスクリプトを記載したところ
//target : my0_mc ～my3_mc currentTarget : instance1(親） の結果となった
target :まさにクリックされた対象
currentTarget : イベントを設定した対象
と覚えておく
2012年3月11日日曜日
2012年3月3日土曜日
休眠口座が話題になりましたね。
一体だれが言い出したんだろう？と思っていたら。
提案したのは大前研一氏でした。以下に詳細が書かれています。
〔大前研一「ニュースの視点」〕
KON403「本四連絡道路と休眠口座～真剣に「活用する」ことを考える」
http://www.lt-empower.com/koblog/viewpoint/1795.php
気になる点が。
現在、日本では10年利用しない口座（休眠口座）のお金の中には
「一旦銀行の利益として計上」されているものがあります。
顧客のお金を奪うなと言いながら、自分たちの利益としているのですから、
開いた口がふさがらないとはこのことです。
負債として計上しつづけた方が銀行としては有利かと。利益計上すること無く資金運用できますし。にも関わらず利益にするってことは、長期間負債に計上し続けることに会計上の問題があるのでは？と想像してました。
このあたり詳しい人いたら教えて欲しい。この件に限って言えば銀行の主張の方がわかりやすく感じますね。当然預金者のお金だと思います。
提案したのは大前研一氏でした。以下に詳細が書かれています。
〔大前研一「ニュースの視点」〕
KON403「本四連絡道路と休眠口座～真剣に「活用する」ことを考える」
http://www.lt-empower.com/koblog/viewpoint/1795.php
気になる点が。
--------------------------------------------------------------------------------------------------------
銀行が「顧客のお金だから」と反発しているそうですが、
銀行こそ最も出る幕がない立場にいます。
現在、日本では10年利用しない口座（休眠口座）のお金の中には
「一旦銀行の利益として計上」されているものがあります。
顧客のお金を奪うなと言いながら、自分たちの利益としているのですから、
開いた口がふさがらないとはこのことです。
--------------------------------------------------------------------------------------------------------
負債として計上しつづけた方が銀行としては有利かと。利益計上すること無く資金運用できますし。にも関わらず利益にするってことは、長期間負債に計上し続けることに会計上の問題があるのでは？と想像してました。
このあたり詳しい人いたら教えて欲しい。この件に限って言えば銀行の主張の方がわかりやすく感じますね。当然預金者のお金だと思います。
登録:
投稿 (Atom)