Hato-Style

プロジェクトが終了したら完了ミーティングをやろう

2009年12月10日 （木）

プロジェクトを開始するときは。キックオフミーティングなど行うかと思います。プロジェクトが終了したら「お疲れ様！」で打ち上げするだけでなく、それと同様にちゃんと反省会をしましょう。

完了したプロジェクトにおいて、受注の経緯からプロジェクト開始〜企画〜開発・制作〜リリース・ローンチに至までに発生した問題や出来事を事細かに分析してみましょう。

問題点を洗い出す

プロジェクトは1人だけでやるわけではありません。ミーティングは営業やディレクター、プロデューサー、プランナー、デザイナー、エンジニア、プログラマ...など社内でプロジェクトに関わった人間全員参加できるようにしたい物です。

まず、プロジェクトの進行に問題は無かったのか？ということが重要なことだと思います。

...などなど。

問題点を洗い出すことで「どうしてそうなったのか」「どこが悪かったのか」「どうすればよかったのか」をスタッフ同士で議論することが出来ます。そして「次からはどう解決すればよいか」という糸口が見いだせれば、問題解決策も明確になります。

「先方との対応に問題があった」「ディレクターの指示が分かりづらかった」「システム実装後にマークアップがinvalidになった」...など、大きな事も細かい事限らずそれぞれの立場からも問題点をあげることで、スタッフ各々がいままで気がつかなかったことへも意識できるようなり、業務がさらに円滑になり、問題の再発防止にもなるかと思います。

良いところは褒め合おう

悪いことだけいいあってもネガティブになるだけです。プロジェクトを通じて良かったところ、うまくいった所などを意見することも重要です。スケジュール通りに納品できた等の大前提は勿論ですが、そう言うことだけでなく業務というプロセスに掘り下げて考えていきます。例えば...

良かった点は次からはさらに良くなるように意識できれば良いですし、なにより他人の仕事を見るという行為も大切なことです。

他のスタッフに「もっとこうすればよかった」「ここがよかったから参考にしたい」などアドバイスをして互いの信頼や団結を高めたりすることも励みに繋がりますし、自分が褒められればモチベーションも上がります。他の人の良いところや行動は自分も積極的に取り入れられるようにすると、業務進行、品質、CS向上にも繋がっていくと思います。

プロジェクトの成功/失敗関係なく、それを次の力にする

プロジェクトが成功していようが失敗していようが関係なく、話し合う場を設けることが大切だと思います。意見交換会をすることで、次のプロジェクトに今回の反省点を生かし、良い部分は積極的に取り組み、モチベーションを上げることが目的です。

意見交換会で見いだせたノウハウや反省点、情報を全員で共有し積み重ねることで仕事の完成度やクオリティがより高まり、それらはスタッフ個人は勿論のこと、プロジェクトチームの力になり、そして会社の財産にもなります。

[携帯Flash]Flash Lite 1.1実装メモ

2009年09月18日 （金）

Flash Lite 1.1実装メモ

モバイル向けページの需要が一般サイトでも普及し、さらに携帯Flashを採用する機会も増えてきました、その開発時に気がついたことなどをいまさらながらまとめて。Flash Lite も進化してますが、公式化の準拠に従ったり、端末シェアを無視できない場合はFlash Lite 1.1での実装もまだ余儀なくされるので要チェック。

Flashの軽量化・高速化

複雑なイラストや文字はビットマップに

ベクターだと容量は抑えられますが、複雑になると別です。また、実機で見るとジャギって汚く見える場合もあります。セリフ系・明朝系のテキストをベクターにすると汚く可読性が悪いのでビットマップにしましょう。

ビットマップ画質の軽量化

100KB以下で制作する必要があるので、ダイエットは大前提。画質はPhotoshopやFireworksで落としてFlashに埋め込む。Flashで画質落とすと汚いので。

ベクターとビットマップの使い分け

背景や境界線など、描写に負担がかからない物はベクターの方が良いです。容量的にも。シンプルなイラストでも機種によっては汚く見えてしまうので画質を落としたビットマップにするのも手。

トゥーン多様は危険

画像のアルファをだんだん減少させてフェードアウトを行うようなアニメを実装したいとき、機種によってはもの凄く遅いなどばらつきが出ました。軽減させるべくフレームアニメで1コマずつ区切った方がいいのかも。

ActionScriptではまること

スクリプトの初期化
fscommand2("SetQuality", "high"); //画質はhigh , medium , low
_focusrect = true;

見た目の調整。画質においてはコンテンツに応じて。

_focusrectはボタンのフォーカス位置の枠の有無。フォーカスするボタンの色が変わるようにしている場合などは見た目が悪くなるのでfalseにします。そうでない場合は現在地が分からなくなるのでtrueにするといいでしょう。

MCにドットシンタックスでアクセスしてgotoAndPlayできない

Flash Lite 1.1でmc1.gotoAndPlay(5);みたいなことができないので、tellTargetを使う。

tellTarget("mc1") {
 gotoAndPlay(5);
}
EnterFrame的な処理はフレームのループで代用

たとえばmc1のX座標を100まで動かしたいとき。EnterFrame的な処理は2つのフレームを行き来させ、処理が終わったら別のフレームに逃げさせる処理にするなどで代替えしました。

//1フレーム目
mc1._x += (100 - mc1._x) / 0.25; 
//2フレーム目
if (Math.abs(100 - mc1._x) < 0.25){
 prevFrame(); //条件が満たないときは1へもどる
}else{
 stop(); //条件が整ったら止める
 mc1._x = 100;
}
functionがないのでcallで代用
//処理を呼び出すとき
call("hoge");

さらにフレームのラベルに「hoge」と指定しそのフレームアクションに

//call("hoge")を実行したときの処理
trace("アンティグアバーブーダ");

検証はまず、Adobe Device Centralで行い、可能であればiモードHTMLシミュレータなどのエミュレータで検証、そして各キャリアの実機検証は欠かさずにしましょう。

[MT]マルチブログ(MultiBlog)で、他ブログのモジュールとエントリをインクルードする

2009年09月18日 （金）

以前案件にて、Movable Type 4.2（MT）のマルチブログ機能でサイトを構築しました。普段案件ではWordPressや独自CMSがおおく、久々のMT採用で思い出しながら実装している最中にハマッたこと。今更ながらちょっと、備忘録メモ。

例えばマルチブログのブログ1からブログ2のモジュールをインクルードし、さらにブログ2のエントリを表示させたいときの話。

<!--インクルードする側　ブログ1のテンプレート-->
<MTMultiBlog include_blogs="2"><$MTInclude module="ニュース一覧"$></MTMultiBlog>
<!--インクルードされる側　ブログ2のモジュールテンプレート-->
<ul>
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$> - <$MTCustField_hoge$></a></li>
</MTEntries>
</ul>

こうすると、カスタムフィールドが見つかりませんとかエラーになって動かず...ブログ2のモジュールのカスタムフィールドの値を削除したらエラーは消えたけど、今度はブログ2のモジュールにブログ1のエントリが適用されてしまうのです。どうやら、自分MTEntriesの扱いに勘違いしていた模様...ハズいです。

<!--インクルードする側　ブログ1のテンプレート-->
<MTMultiBlog include_blogs="2"><$MTInclude module="ニュース一覧" blog_id="2"$></MTMultiBlog>

MTMultiBlog内でも、MTIncludeの扱いは大本のテンプレートが基調になるみたいでblog_id属性で個別にしたら動いた。てっきりMTMultiBlogで包括すればその中は別ブログとして動くモンだと思っていました...。同様に<$MTInclude module="ニュース一覧" blog_id="2"$>単体でもダメなわけです。モジュールのみ呼び出すだけですからね。

MTMultiBlog内に直接テンプレートタグを書くとか、インデックステンプレートとかダイナミックインクルードという手もあったんですが、インクルードする側のブログ1のテンプレート変数によってインクルードするブログ2側のモジュールのエントリ内容を動的に変える必要があったため、インデックステンプレートは使えず、ちょいハマりました。

もっとスマートに行けたら良かったのですが。あるのでしょうか。

Progression DoTweenerのスペシャルプロパティをあらかじめ使えるように

2009年09月13日 （日）

Progressionで使われている、DoTweenerコマンドはTweenerというトゥイーンライブラリを使用しています。座標や透明度や角度などアニメーションを簡単に実装できるのですが、色操作やフィルタ操作なども簡単にできるのがこのライブラリの特徴です。

しかし色やフィルター効果をを変化させたりすることはデフォルトでは出来ず、毎回下記のようなクラスをインポートする必要があります。

//色の場合
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

//フィルタの場合
import caurina.transitions.properties.FilterShortcuts; 
FilterShortcuts.init();

毎回それをやり忘れて動かなくて面倒だったので、あらかじめそれたのスペシャルプロパティがいじれるようにカスタマイズしました。バージョンは3.1.62です。

またProgressionのコアな部分ですので、なにか問題が発生しても知りませんし、プロジェクトのバージョンをアップデートすると戻る可能性もありますので、自己責任で。

package jp.nium.api.tweener {
 import caurina.transitions.Tweener;
 import flash.display.MovieClip;
 import flash.events.Event;
 import jp.nium.api.tweener.TweenerEvent;
 import jp.nium.events.EventIntegrator;
 import jp.nium.utils.MovieClipUtil;
 import caurina.transitions.properties.ColorShortcuts;
 import caurina.transitions.properties.FilterShortcuts;
 
 〜〜中略〜〜

  public function TweenerHelper( scopes:Object = null, parameters:Object = null ) {
   ColorShortcuts.init();
   FilterShortcuts.init(); 
   // 引数を設定する

TweenerHelper.asに上記のようなコードを追加するだけ。あらかじめこうすることで、毎回CastSpriteやCastButtonのクラス上で初期化しなくとも、スペシャルプロパティを使用できます。

DoTransitionの継続時間を1秒より短くする

おまけ

DoTransitionコマンドを使用するときに、duration値（継続時間）を1秒より下に設定出来ない現象が発生しました。

//うごく
new DoTransition(this, Wipe, Transition.IN, 2, None.easeOut, { startPoint:4 } )

//うごかない
new DoTransition(this, Wipe, Transition.IN, 0.25, None.easeOut, { startPoint:4 } )

めっさ遅いなぁ...と思ったらコレは、DoTransitionクラス内の引数のデータ型のせいみたいです。

public function DoTransition( target:MovieClip, type:Class, direction:int, duration:int, easing:Function, parameters:Object = null, initObject:Object = null ) {

ここのdirectionの引数がint型だったので、小数を渡しても整数に変換されてエラーにならず動作しているようです。ここも

public function DoTransition( target:MovieClip, type:Class, direction:int, duration:Number, easing:Function, parameters:Object = null, initObject:Object = null ) {

と型をNumberに変えてあげると正常に動きます。調べてないから適当ですが、意図があってint値になっている可能性も。さらに今後のアップデートで仕様変更も考えられる場合もあるし、ここもコアな部分を触るので自己責任で。

HTMLとCSSしか書かなかったコーダーは今なにしてる？

2009年09月13日 （日）

風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。

(X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。

マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開）

一昔前のCSS Nite問題、そしてid:amachangのTwitterをきっかけに、HTMLコーダーの在り方について様々な議論が交わされていた。

現在、Web標準におけるCSSレイアウトは当たり前だし、HTML+CSSテクニックやIE6対策などWeb上に情報があふれて既に一段落。さらにはIE6なんてもう置いて、HTML5やCSS3なんかが熱くなってきてる。IE6に頭を悩ませる時代は終わりつつある。だからハックを研究したり、CSSテクニックを新たに追求する事は少なくなってきたと思う。

さて当時、取り立たされていたHTMLコーダー。話にあったHTML+CSSしかやらないコーダーは今どうしている？そもそも、HTML+CSSオンリーな人なんていたの？ましてや、そういう人たちはHTMLとCSSのコーディングだけではこの先ダメだと感じてたはず...とおもうのだがどうだろ？

あれから約2〜3年。状況は変わってきているはず。

正直いまはHTML+CSSだけでは難しいと思うし、それにそれだけやっている人は殆どいないはず...。少し視野を広げ、業務の幅も広く手がけるようになったのではないでしょうか？たとえば

上記のような業務を手がけるようになったりしていない？でも分業化が進んでいるこの業界ではやはりHTMLコーダーは必要なわけで。ましてや、これからののHTMLコーダーには下記のようなスキルも必要かと。

単純なHTML+CSSコーディングだけでなくフロントエンド面でもっと磨きのかかった実装や設計も必要なはず。もしかしたら既にそこメインに業務してる最中かも。従来のコーディングをやりつつも、さらにプログラマやデザイナなど他の分野にいったスタッフもいるのでは。

ブラウザやWeb標準、CSSに特化した話題が多かったCSS Niteも、いまやその他の分野、技術、サービスの話題も取り入れたことからも、いま一般に使われてるXHTMLとCSS2のテクニックや話題は新たに学ばなくとも、もう行くとこまで行ったんじゃないかな？と。

HTML+CSSのテクニックは、これからもHTML5やCSS3という形でどんどん盛り上がって、覚えていくことも多いでしょう。なによりWeb技術は日々進歩するので、今ある知識とテクニックで良いという現状維持が一番勿体ないし危険。情報収集や勉強は従来通りやりつつ、スキルアップする志が大切。デザイナだってトレンドを意識し、新たなテクノロジーを取り入れたデザイン手法やテクニックが必要。プログラマも新たな言語やフレームワークやライブラリが登場したら習得しなきゃ。だからみんな勉強だよ。

当時HTML+CSSしか書いてなかったコーダーのみなさんは、今なにしてる？

Mac版FlashでProgression(拡張機能[MXPやJSFL])がインストール(アップデート)できない！

2009年09月12日 （土）

Mac版 Flash CS3 (9.0) Extension Manager 1.8.169にて発生した問題。

独自のフレームワークでフルFlashサイト作り機会が多かったんですけど、今回動的に動かす部分が多かったためProgressionを使用することにした。しかしProgressionのバージョン 3.1.52 と古かったため最新にアップデートしよう MXP 形式にてダウンロード。それをAdobe Extension Managerで無事アップデート完了。

Adobe Extension Managerでの表記も最新バージョンになっている。しかし、Flashを起動してもProgression プロジェクトのパネルのバージョンも、書き出されるプロジェクトも古いまま。一度Flashを終了し、Adobe Extension Managerで再度削除、インストールを繰り返すもバージョンが上書きできない。なんでだろう。

とおもったら既に解決策が。

これを参考にJSFL 版をインストールするも次のようなエラーアラートがでてインストールできない。

ご使用の環境には、すでに MXP 版の Progression がインストールされています。
JSFL 版をインストールする場合には、まず MXP 版をアンインストールしてください。

でも入ってないっぽい

目に見えないのにどうやって消せっちゅうねん。そこで直接拡張機能のディレクトリにアクセスして、Progressionを削除してみた。

[Mac OSXハードディスク]/Users/[ユーザー名]/Library/Application Support/Adobe/Flash CS3/ja/Configuration/Extensions

ここのProgressionのフォルダごと削除したら、すんなりインストールできた。コレが正体だったのか...とおもって踏み込んで調査してみると下記のような原因が。

本来だと、Extention Managerからインストールした拡張機能は、同じ階層にある「jp」フォルダ内に追加されるはずなのですが、「en」フォルダが存在する場合は、「jp」ではなく「en」フォルダ内に設定されてしまい、FLASHに反映されない、、ということが起こってしまうようです。

なるほど、確かにenというフォルダに色々入っている。同様に英語版なんてインストールした記憶は全くないのだが...。なにはともあれソフトウェアのバグと言うことで、テンション下がるわー

floatで横幅きっちりに写真等の要素を並べる

2009年09月08日 （火）

WebサイトやECサイトにて、商品写真を横幅きっちりに並べたい場合があるかとおもいます。その時リスト系の要素をfloatを用いて横に並べて、商品間を左右marginで調節するなどで再現しますが横きっちりに並べる場合一番右端、あるいは左端のアイテムがしたにずれ込みカラム落ちする場合があります。

原因は親要素の横幅と、floatしている子要素の横幅+marginが親要素の横幅をこえるためです。

横幅きっちりに並べたい

その問題が発生しないよう再現しているサイトの中には、一番右端に来る要素に対してclass属性でmarginを0にしたり調整したりする場合がありますが、これにはデメリットがあります。

それを踏まえて、もっとシンプルで別視点から見たアプローチを提示します。

HTML

<div id="main">
<ul>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
<li>[中身]</li>
</ul>
</div>

CSS

div#main{
 width: 830px; /*※1 */
 overflow: hidden; /*※2 */
}

ul{
 list-style: none;
 width: 840px; /*※3 */
}

ul:after{
 display: block;
 clear: both;
 content: "";
}

ul li{
 float: left;
 width: 200px; /*※4 */
 margin-right: 10px; /*※4 */
}

対象ブラウザは Win IE5.5/6/7/8,Firefox 2.x〜,Opera 8.x〜,Safari 2.x〜。

フロートの親要素（ここでいうul要素）の左右marginや横幅を自由にいじれる場合はこの限りではないですけど、ul要素の横幅がその親要素の横幅を同じだったりする場合はこの方法が使えると思います。

何故今更こんな事を？...以前更新引き継ぎされたサイトが、一番右にくる要素にいちいちclass="endcolumn"みたいな属性が付いてて、順番の入れ替えや追加削除の度にレイアウトが崩れてウザくイライラしたから...それだけのことです。

ご案内

このページの先頭へ

このサイトのトップページへ

Copyright © Zoorasia, All rights reserved.