とくながです。

サイブリッジはソーシャルアプリの開発にも力を入れており
最近は新しいアプリのリリースも近づいているため、
Flash liteに触れる機会もより多くなっています。

前回のエントリーでも簡単に触れましたが、
Flash liteはドコモ機種の仕様で100kbを超える
SWFが読めないので、大規模なアプリとなると
いかにファイルサイズを小さくするかが鍵となります。

今回はファイルサイズを軽量化する方法をまとめます。

読み込む画像の下げ、容量の削減

読み込む画像などのダイエットは最低限必要です。
またビットマップするかベクターにするか、
状況に応じて都度確認する必要があります。

複雑な画像はライブラリから「写真画質（JPEG）」、
シンプルな画像は「可逆圧縮（PNG）」にすることで
容量を多く削減することができます。

パスの量を減らす

イラレから持ってきたデータなどで発生しやすいですが、
パスが多いデータについては削減する必要があります。
「修正」→「シェイプ」→「最適化」で調整は可能ですが、
データによっては荒くなるので注意が必要です。

2回以上出現するオブジェクトはインスタンス化

インスタンス化したオブジェクトはいくつページに出現しても
大幅に容量が増えることはありませんので、
全てのオブジェクトをインスタンス化する気持ちで良いと思います。

色やサイズを変更しても、容量はほとんど増えません。

ループするアニメーションはムービークリップ

トゥイーンを使ってアニメーションを行う場合、
インスタンスのタイプを「グラフィック」にして
ループ処理を行うという方法がありますが、
これだとフレームの数だけ容量が増大してしまいます。

ムービークリップの中はstop();しない限り、
自動的にループするという特徴がありますので、
できるだけグラフィックでのアニメーションは控えましょう。

変数名やラベル名はできるだけ短く

塵も積もれば山となりますので、
できるだけ短い変数名で記載するクセをつけましょう

こんにちは、acurryです。
残り少ない夏、みなさん楽しんでいますか?
私はこの夏は伊豆へ花火と海を堪能しにいってきました♪
8月もあと1週間ですが有意義に楽しみたいですね。

さて、今日は素人でもプロのデザインができるツール、
カラージェネレーターをいくつかご紹介したいと思います。
ウェブデザインでネックとなるのはやっぱり配色。
配色をうまくまとめるだけで、デザインはぐんとよくなります。

今日は、役立つカラースキームのサンプルやジェネレーターを
厳選して紹介しますね♪

Color Scheme Designer

これは結構有名なので使っている人も多いかも？
ライトバージョンとダークバージョン、ポイントカラーを変更した場合など、4パターンまで,自分の作った配色でサイトを確認できます。
http://colorschemedesigner.com/

ColorBlender

ColorBlenderも使いますね。相性の良い色を自動でピックアップしてくれます。
http://colorblender.com/

Color Hunter

これはなんと、Flickerの写真をもとに色を抽出してくれます。写真に使われている色が一目瞭然ですね。
http://www.colorhunter.com/

Color Palette Generator

これはアップロードした写真の配色を分析してくれるツール。これも便利です。
http://www.degraeve.com/color-palette/

Adobe Kuler

最後はアドビのツール。ユーザーの力"で作られたカラーチャート集で、7000種類以上ものテーマが公開されています。
http://kuler.adobe.com/

色んな機能をうまく使って、効率良く良いデザインを作れるといいですね。
私もいろいろためします！

こんにちは、はまっちです！
お盆休みは北海道に行っていました。
ちょうど涼しくなる時期だったらしく、絶好の避暑日和を満喫してきました！

さて、前回はSmarty修飾詞とプラグインの話をしましたが、
実はプラグインを作成したのは記事を書いた時が初めてでした。
とても便利だったので個人的にまとめてみました。

■Smartyマニュアル - プラグインによる Smarty の拡張
http://www.smarty.net/manual/ja/plugins.php

プラグインの拡張方法

以下はプラグインの命名規則です。

[プラグインのタイプ].[任意の文字列].php

この記述通りにファイル名を付け、関数を定義し読み込ませることで、Smartyにプラグインとして認識されます。
サンプルとして前回記述したプラグインを例に出しますと、

modifier.date_week_format.php

この『modifier』の部分はプラグインのタイプです。
modifierは修飾詞を表しています。他のタイプについては後述します。
『date_week_format』の部分はプラグインの名称で、任意の文字列を設定することが出来ます。規則はPHP変数のものに準じています。

function smarty_modifier_date_week_format($date)
{
～略～
}

定義する関数名は『smarty_[プラグインのタイプ]_[任意の文字列]』
つまりサンプルは、date_week_formatという名前の修飾詞プラグイン、となります。

プラグインのタイプ

プラグインのタイプは全部で９つあります。
・function(テンプレート関数)
・modifier(修飾子)
・block(ブロック関数)
・compiler(コンパイラ関数)
・prefilter(プリフィルタ)
・postfilter(ポストフィルタ)
・outputfilter(アウトプットフィルタ)
・resource(リソース)
・insert(インサート)

ここでは上３つのタイプについて書いて行きたいと思います。

modifier - 修飾詞プラグイン

まず前回作成したmodifierについてです。
modifierは、変数名の後ろに『|(パイプ)』で繋ぐ修飾詞を新しく追加します。

modifier.tax.php

function smarty_modifier_tax($param)
{
return floor($param * 1.05);
}

＜テンプレート＞

{$hoge|tax}

修飾詞を付けると、変数を第一引数としてsmarty_modifier_tax関数に送られ、
結果が返ります。

パラメータを追加することで、更に複雑な修飾詞を作成することも可能です。

function smarty_modifier_tax($param, $tax=1.05, $suffix="") { return floor($param * $tax).$suffix; }

＜テンプレート＞

{$hoge|tax:suffix="円"}

function - テンプレート関数プラグイン

functionは、テンプレート関数を追加します。
テンプレート中 {func} 形式で動作します。
修飾詞とは違い、それ単体で動きます。

function.print_count.php

function smarty_function_print_count($params, &$smarty)
{
$page = "unknown";
if($params["page_id"]){
$page = $params["page_id"];
}
/* DBなどを利用しアクセスカウント数を取得＆＋１したりする */
return $count;
}

＜テンプレート＞

{print_count:page_id="index"}

第一引数には、テンプレート関数に渡された引数が連想配列として渡されます。
第二引数には、Smartyオブジェクトのアドレスが入ります。

block - ブロック関数プラグイン

blockは、ブロック関数を追加します。
テンプレート中 {func}～{/func} 形式で動作します。
この形式の関数は、開始タグと終了タグとで2回呼び出されます。
同じ名前のテンプレート関数とブロック関数があった場合、ブロック関数が優先されます。

block.change.php

function smarty_block_change($params, $content, &$smarty, &$repeat)
{
if(!$repeat){
if(isset($content)){
/*　加工したり色々　*/
return $content;
}
}
return "";
}

＜テンプレート＞

{change}ほげほげHOGEhoge{$hoge}{/change}

第一引数には、ブロック関数に渡された引数が連想配列として渡されます。
第二引数には、開始タグの場合はNULLが、終了タグの場合はタグで囲まれた部分が渡されます。
第三引数には、Smartyオブジェクトのアドレスが入ります。
第四引数には、開始タグの場合はTRUEが、終了タグの場合FALSEが参照で渡されます。
(関数で$repeatをTRUEとする事でコンテンツが再評価される
...ということですが読んでみてもいまいち利用イメージが湧きませんでした...
後方互換の為の引数と書かれているサイトが多数ありますが、そういうことなのでしょうか)

残りのタイプについては、使いどころがはっきり理解出来た時に書こうと思います。

サイブリッジのプロジェクトでも、オリジナルのプラグインを使用しています。
複雑だけど共通化出来る部分などは、このようなプラグインにしてしまうと、
多人数による開発でかなり便利になりますね。

こんにちは、今日が誕生日のぴんしゃんです。
サイブリッジではハッピーバースデー制度というものがあり、本人含めて配偶者、子供の誕生日は17時に帰宅できるのです。
なんてハッピーな制度でしょう！

代表の水口は子だくさんのため、年に5回もこのルールを適用できるのです。
うらやましいです。

さてこんな日はサクサクと仕事を進めたいものです。
というわけでMovable Typeでフォームをサクサク作成できる「A-Form」を使ってみましょう！

A-Formとは？

アークウェブさんが開発したMTのプラグインで、フォームを複数作成できるツールです。
申し込みフォームやアンケートフォームを設置する機会の多いクライアントさんにお勧めしています。
htmlの知識のない方でも設置が簡単にできます。
http://www.ark-web.jp/movabletype/

フォームを作成してみる

A-Formをインストールすると左メニューに「A-form」が追加されます。
「新しいフォームを作成する」をクリックして、編集画面を開きます。

右サイドにパーツがあるので、それをフォーム編集画面内にドラッグ＆ドロップします。

項目名や選択肢の編集もダブルクリックで行えます。
操作はとても直感的です。項目を上下に移動したり、複製したりもできます。

フォームの設定をする

詳細設定タブをクリックすると、フォームの設定画面が開きます。

・フォーム名の編集
・送信完了時の動作
　　確認画面に完了メッセージを表示
　　ウェブページにジャンプ
　　URLで指定したページにジャンプ
・送信完了時の動作
・フォームの公開状態
・受付番号の設定
・控えメールの管理
・メール本文のテキスト設定

受付データの管理タブではCSVのダウンロードもしくはデータのクリアが行えます。
この画面でデータを閲覧＆管理できればいいんですけどね。
バージョンアップに期待です。

アクセスレポートを見てみよう

「A-form」はフォームを作るだけではなく、アクセス数やエラーログ、コンバージョン率などもレポート表示してくれます。

フォームを設置する

まずはウェブページのデザインテンプレートの
<$mt:PageBody$>を<$mt:PageBody aform="1"$>としておきましょう。
ページを作成しフォームを設置したい場所に下記のタグを追加します。数字はフォームIDです。

[[aform004]]

設置は以上。とっても簡単。

こんなかんじで表示されます。
CSSも調整可能なので、デザインの統一もできるのが嬉しいですね。

かのうです。
サイブリッジは今夏休み！でも私は休みをずらして9月末の祝日と合せて大型連休にしうと企んでいます。今のところまだ予定はないんですけどね笑

そういえば「iモードブラウザ2.0」のお話

2009年5月以降に発売開始されたdocomo端末に「iモードブラウザ2.0」が搭載されていますよね。
デザイナー向けの新しい機能は下記ですが、まだまだ完全に普及したとは言えないので、結局のところ「XHTML+CSS」での携帯サイト構築が必要ですね。

・外部スタイルシートを含むCSS対応
・サイズ制限が500Kバイトに
・Shift_JIS、UTF-8の文字コードが利用可能
・JavaScript対応（Ajax含む）
・ページ埋め込みFlash動画（FLV）対応
・クッキー対応

▼docomo公式サイト
iモードブラウザについて

XHTML+CSSでの3キャリア対応の落とし穴

なんで普及もしばらく時間がかかりそうなので自分のメモ的に、今回は改めて携帯サイトを作る上で基本的なお話をまとめたいと思います。
今回はなるべくキャリア毎の差をなくして「iモードブラウザ1.0」でも表示したいデザインにコーディングしようとしたとき、たいがいぶち当たる落とし穴を中心にご紹介します！

画像がゆがむ

CSSとは関係ないですが幅240pxで画像を作成して、auで見たら画像がゆがんでる...それはスクロールバーの分だけ表示される幅が縮小しているからです。
どうしてもキレイに表示したいときは画像を小さくしてセンター揃えでしょうか。

その場合私は232pxで指定していますが、その前後でも問題ないかと思います。
（横228ピクセル以内に抑えてくださいっていう記事も見たことありますが...）

<div style="text-align:center;">
<img src="img/keyv.gif" width="232" height="180" border="0" />
</div>

hrタグ

hrタグは結構くせがあります。docomoではXHTMLの属性が非対応ですし、auとSoftbankでも仕様が異なります。

下記はdocomoだと若干多めにマージンをとられますがhrで指定するには一番最適です。

<hr size="1" style="width:100%;height:1px; margin:0px; padding:0; color:blue; background:blue; border:1px solid blue;" />

それでもやっぱり...という場合はスペーサーGIFを使って1pxのボーダーを実現しましょう。

<div style="text-align:center; margin:0; padding:0; background:blue;"> <img src="img/spacer.gif" height="1" width="1" border="0" /> </div>

センタリング

styleでの指定だけでもいいのですが、より古い機種に対応させるにはalignも念のため指定しておいた方がベターです。

<div style="text-align:center;" align="center">

アンカーリンク

docomoはname属性に対応していないため、アンカーリンクの挿入は下記のようにしましょう。

<a name="top" id="top"></a>

画像の回り込み

画像にalign属性を使う場合と、styleにfloatを使う方法があります。
alingだとdocomoが非対応、floatはauが非対応になるので両方記述する必要があります。

また、回り込みの解除は解除したい箇所にブロック要素のタグがあったらそこにclearを記述します。（<br clear="all" />で解除できるのは、auとSoftbankのみなので注意）

<img src="img/icon.gif" width="60" height="60" style="float:left; margin:3px;" align="left" border="0" alt="アイコン" />
<a href="#">タイトル</a><br />
説明説明説明説明説明説明説
<div style="clear:both; text-align:center; margin:0; padding:0; background:blue;">
<img src="img/spacer.gif" height="1" width="100%" border="0" />
</div>

tableタグで2カラム表示

回り込みじゃなくて2カラムにしたい場合などはtableタグを使用しましょう。ほとんどの機種でtableタグを使用しても問題ないですが、かなり古い機種まで考慮したい場合は避けてください。

docomoではtableの外にフォントサイズを指定していた場合はデフォルトのサイ ズに戻るので、めんどうですがspanでテキストを囲んで指定してください。
tableタグやth,tdタグに指定しても効きません。

<table cellspacing="0" cellpadding="0">
<tr>
<th align="right">
<span style="font-size:xx-small;"><a href="#">タイトル</a>
：</span> </th>
<td>
<span style="font-size:xx-small;">説明説明説明説明説明説明説</span>
</td>
</tr>
</table>

フォントサイズ

フォントサイズを同じxx-smallで指定してもキャリヤや端末によって表示はそれぞれ；；
docomoは下記のように全端末共通のようです。

・大 → xx-large,x-large
・中 → large,medium
・小 → small,x-small,xx-small

「大」は大きすぎるので使わないとすると、他のキャリアの端末も考慮してベースは「x-small」で目立たせたいときは「medium」を使うのがいいんだと思うんですが、自分の携帯（auのW61P）だと「xx-small」以外はどれも太字に見えるくらいの大きさになってしまいます。。ベースを「xx-small」にすると端末によって極小になるので、デザインを取るか見やすさをとるか。。

auとSoftbankでは外部CSSが使えるためclassを指定して、ハック的にサイズを調整することも可能です。

auでのセレクトメニュー

プルダウン（セレクトメニュー）が外側のdivでフォントサイズを指定していてもデフォルトのサイズに戻ってしまい、変な改行をされることがあります。その場合はselectタグにサイズをしていしましょう。

<form action="" method="GET">
<select name="url" style="font-size:xx-small;">
<option value="りんご">りんご</option>
<option value="みかん">みかん</option>
</select>
<input type="submit" style="font-size:xx-small;" size="1" value="絞込">
</form>

マージン

docomoの場合はdivにmarginを指定しても対応していませんが、imgタグには対応しています。スペーサーGIFなどの画像にmarginを指定するかvspace,hspaceなどを活用して調整しましょう。

ちなみに、画像の周りに枠をつけたい場合、docomoはborder属性、borderプロパティともに対応していません。

docomoの絵文字をデフォルトにする

言わずとして知れているdocomoの絵文字はcolorで色の指定ができる件なのですが、bodyなどにフォントカラーの指定をしている時はかなりやっかいです。

bodyに指定せずにこんな感じにしてもいいんですが...ソースコードが多くなるとカオス状態です（[！]が絵文字だとします）

<body>
<span style="color:#48251A;">ベースは茶色だけど<span style="color:#F90;">こ んな</span>や<span style="color:#96C;">こんな</span></span>[！]<span style="color:#48251A;"><span style="color:#F69;">こんな</span>色も使いたい</span>[！][！]
</body>

そしたら絵文字の方にカラー指定をしちゃいましょう。auとSoftbankは色が変わらないので大丈夫です。すごい簡略化されたわけではないけど、ベースの色を気にせずにそれ以外の色を着色したい部分だけ気をつければOKです。

<body style="color:#48251A;">
ベースは茶色だけど<span style="color:#F90;">こ んな</span>や<span style="color:#96C;">こんな</span><span style="color:red;">[！]</span><span style="color:#F69;">こんな</span>色も使いたい<span style="color:red;">[！][！]</span>
</body>

▼docomo公式サイト
絵文字カラー一覧

まだまだあるっちゃあるのですが、、今日はココまで！！
では、また(・´з`・)