Flash Lite｜WEB制作・WEB開発のTips＆News Kamimoto.biz Labs

2010年1月22日

携帯用FlashであるFlashLite。

その作り方はある意味iPhoneサイトを作ることに似てもいます。

ガラパゴスケータイと呼ばれている日本の携帯ですが、FlashLiteサイトもある程度、技術的に一般化されていて、書籍も出回っています。

その関係で、けっこうパターン化できるようになってきていますね。

そこで、参考になるブログ記事がありましたのでご紹介。

FlashLiteサイトのインターフェースの傾向

これはわかりやすいパターン分け。

• マクドナルド型
• 縦スクロール型
• メニュー開閉型
• 時間連動型

• FlashLite
• UI
• デザイン
• 携帯

2009年9月26日

このWeb制作ブログにアクセスいただく際に、「au エミュレータ」や「ソフトバンク エミュレータ」という検索クエリが一番多いです。

あと、趣味で、ケータイサイトデザイン集「モバイルデザインアーカイブ」を運営してるということもあり、ケータイサイト制作を始める際のお役立ちリンクをまとめてみました。

ケータイサイトをPCで確認

大手3キャリアともに、純正のエミュレータ（シミュレータ）が存在します。

• NTTドコモ iモードHTMLシミュレータ
• NTTドコモ iモードHTMLシミュレータII
• au Openwave SDK 6.2K
• au Openwave SDK 6.2Kのダウンロード
• ソフトバンク ウェブコンテンツヴューア

ドコモの「iモードHTMLシミュレータII」について補足しておきます。

901iシリーズ以降のiモード対応HTML、Flash、デコメールテンプレートや、901iSシリーズ以降のPDF、902iシリーズ以降のトルカ、906iシリーズ以降のデコメアニメなどが確認できるようになっています。

ケータイ端末のディスプレイ

各キャリアのケータHTMLの仕様

一度は、各キャリアの仕様説明ページを読んでおく必要があります。

• NTTドコモ iモード対応HTMLのバージョン
• au EZfactory
• ソフトバンク Mobile Creation

また、各キャリアごとにページ容量が異なるため、それにも注意しなくてはいけません。

また、画像ファイルについても留意する必要があります。

■ドコモ
GIF、JPEG。
ただし、あまりにも古い機種の場合、GIFしか表示できません。

■au
GIF、JPEG、PNG、BMP。

■ソフトバンク
JPEG、PNG。

また、「GARAKU FP Server Expansion」というフリーソフトも便利です。

以下、引用します。

GARAKU FP Server Expansion は、オリジナル画像を用意するだけで携帯電話の各キャリア＆機種に最適な容量の画像に自動調整し、配信するサーバ・ミドルウェア・モジュールです。

Flash Liteについて

■Flash Lite 1.0
容量制限は20KB。

■Flash Lite 1.1
現在の主流です。
Flash4をベースに、容量制限は100KB。

■Flash Lite 2.0
Flash7をベースに、容量制限は150KB。
ただし、ドコモ端末では採用されていません。

■Flash Lite 3.0
Flash8ベースで、FLV（Flashビデオ）にも対応しています。
最新機種でのみの対応です。

また、再生方法は、「インライン再生」、「インタラクティブ再生」2種類あり、それぞれ用途が異なります。

・インライン再生
HTML内に含み、キーイベントが使用できません。

・インタラクティブ再生
直接、swfを参照し、キーイベントを使用することができます。

以上、まとめてみました。
iPhone、Androidなどのスマートフォンも日本の中で、ある程度の地位を占めるようになってきました。

でも、ガラパゴスと呼ばれた日本のケータイでも、もっともっといいケータイサイトが出てくればいいなと思います。

• まとめ
• ケータイサイト
• モバイルサイト
• リンク集
• 制作

2009年7月25日

モバイルFlasher必読と呼べる良書がようやくでたかもしれません。

Flash Liteで作る携帯コンテンツ実践教科書 (Web Designing BOOKS)
	東條 雅樹 毎日コミュニケーションズ 2009-07-22 売り上げランキング : 3426 Amazonで詳しく見る by G-Tools

これ良書の匂いがぷんぷんします。

現在一番機種が普及しているFlash Lite 1.1を中心に解説していますが、適宜Flash Lite 2.0以降についても解説しています。
また、docomo、au、SoftBank各キャリアごとのFlash Liteの仕様も詳細に掲載しています。

キャリアごとの仕様も解説。

また、本の中身がこちらでちらほらと。

ということで、さっそく、アマゾンで注文しました！

• Flash Lite

2009年4月 9日

Web制作･開発のための今日のブックマークです。

・Webサイトを特徴づける10のデザインテクニック
テクニックというよりも、「心構え」と呼んだ方が適切かもしれません。
なお、テキストのカーニングとは「カーニング とは、特定の文字の組み合わせの文字間隔を調整する処理」のことです。

・シンボルを使用して作業効率を高めよう｜Fireworksデベロッパーセンター
シンボルというのは、Flashを使用されている方ならおなじみかと思いますが、Fireworksでも同様のものが存在します。

・「今日のナカツリ」、3キャリア対応携帯Flashサイト提供開始
内容としては、PC版のモバイルへの焼きまわしなわけですが、Flash LiteのUIがすごいいいです。

・IE6 ⇒ IE8 ⇒ IE6 で JavaScriptが動かなくなった
そういうことらしいです。

• Fireworks
• Flash Lite
• シンボル

2009年3月28日

今回は、Flash Lite関連の記事のご紹介です。

■Mobile Creation Flash Liteコラム
ソフトバンクモバイルが運営している開発者向けサイト「Mobile Creation」内のFlash Liteコラムです。

Flash Liteコラム

以下が記事になります。

• Flash Lite™をはじめよう！
• Flash Lite™制作の基本的な流れ
• 画像/文字を表示してみよう
• 画像を動かしてみよう！
• 入力を受けつけて画面が動く！

内容としては、完全な初学者向けですが、逆に言うと教える際に役に立つ内容だと思います。

■Flash LiteからAIRへ――Open Screen Projectでモバイル戦略を加速するAdobe
Flash LiteについてのAdobeの戦略です。

• AIR
• Adobe
• Flash Lite

2009年2月15日

Web制作・開発のための今日のブックマークです。

・「ブラウザー作るのはやめた」アドビCTOが語るAIRの未来
アドビもブラウザ開発っていうのを考えてたのはちょっとびっくり。
#まぁ、路線としてはありうるのはわかりますが。

あとは、iPhone対応のFlashについての部分での『MAX会場において、同社に近い筋から「ジョブス氏のサインさえあれば、数時間後には使えるようになるはず」と耳にしたことも加えておきたい』は結構うけた。

・HTMLのマークアップ時に目的に合った要素を選ぶ方法
いくらCSSハックを覚えても、XHTMLの適切なマークアップを知らなければ何も意味はない。

・今さら聞けない！Flash Liteの基礎知識
なにげに、Allaboutって、Web開発についていろいろと触れてるページが多いんですよね。
Flash Liteについて、さくっと書いてあります。

・手嶋屋、OpenPNE で集金・寄付できる「PayPal ボタン」を提供開始
PayPalのAPI利用。
これは、OpenPNE以外でも、使える考え方だと思う。

• API
• Allabout
• XHTML

2009年1月27日

2009年1月のテーマは、Flash Liteなんですが、ちょうどおもしろそうな連載がありました。

gihyo.jpでケータイFlashゲーム制作レクチャーっていうのをやっているみたいです。

第17回　パズルゲームレクチャー（3）オリジナルパズルを考える！

おもしろい。
Flash Liteの勉強になる。

ということで、メモ代わりにまとめてみました。

『ケータイFlashゲーム制作レクチャー』
・第1回 ケータイFlashゲーム　制作レクチャーの始まり！

・第2回 ゲームをデザインする

・第3回 アクションゲームレクチャー(2) ゲームの舞台，ステージを作る

・第4回 アクションゲームレクチャー(3) キャラの作成と当たり判定

・第5回　アクションゲームレクチャー（4）　ゲーム制作の仕上げ

・第6回　Adobe取材レポ！！

・第7回　カードゲームレクチャー（1）　カードとそのアニメーション

・第8回　カードゲームレクチャー（2）　スクリプトを仕込む！！

・第9回　カードゲームレクチャー（3）めくったカードとその判定！！

・第10回　カードゲームレクチャー（4）　いよいよ完成！！

・第11回　マップ冒険ゲームレクチャー（1）ゲームの王道 マップ冒険ゲームをFlashで作る！

・第12回　マップ冒険ゲームレクチャー（2）PCの移動とマップスクロールを作る!

・第13回　マップ冒険ゲームレクチャー（3）マップ上のイベントを作る！

・第14回　マップ冒険ゲームレクチャー（4）イベントの作成～そして！！

・第15回　パズルゲームレクチャー（1）お手軽パズルゲームを作る！

・第16回　パズルゲームレクチャー（2）パズルを完成させる！

・第17回　パズルゲームレクチャー（3）オリジナルパズルを考える！

ちょっとまだ少しずつしか見てないですが、後でまとめて見よう。

• Flash Lite
• gihyo.jp

2009年1月10日

OFGさんのFlash Liteサンプルサイトがいい。

最終更新日：2008/7/10と、ちょくちょくと更新なさっているみたいです。

携帯用Flash サンプル置き場

• 占い：乱数とフレーム移動のみ
• 計算ゲーム：数値の足し算のみ
• テキスト入力サンプル：テキスト入力ボックスに入力された文字列を変数に格納し、再利用する
• fscommand2サンプル：fscommand2関数で携帯電話の時刻や電池残量を取得して表示させるサンプル

Flash Liteを始めたばかりの方は、参考になるのでは？？

• サンプル

2009年1月 9日

携帯版のFlashであるFlash Liteでは、Flashとの違いがいくつかあります。

今回ご紹介する「滑らかな動きを実現する」方法だと、

例えば、Flashだと、

縦の縮尺を変更する場合、

_yscale += (目標の縮尺比率 - _yscale) / 縮尺のスピード;

という一連の動きをonEnterFrameで繰り返し行えば目的の縮尺になるつれてそのスピードが遅くなることで、滑らかに拡大・縮小が行われます。

ただ、Flash Liteなので、onEnterFrameは使えません。

そこで、フレーム1とフレーム2の間で、行ったり来たりします。
#目標の値にくれば、そこで終わります。

1フレーム目：_yscale += (目標の縮尺比率 - _yscale) / 縮尺のスピード;
2フレーム目：gotoAndPlay("1フレーム目のラベル名");

これで、Flash Liteでも滑らかに動かすことが可能です。

• アクション

2009年1月 2日

Flashは、ウェブ制作の中でも、いろんな要素が求められ、非常にハードルが高い部分もある技術です。

単純に、プログラム・デザインという棲み分けができず、両方の能力が高いレベルで求められることにも起因しています。

そんな中、PC向けのフルFlashサイトの制作を覚えるのはすぐにはいかないかもしれませんが、携帯用のFlash＝Flash Liteなら、比較的に少ないactionscriptで対応が可能です。

そこで、Flash Liteの書籍で、新しいものだけをまとめてみました。

携帯Flashスクリプト入門

携帯Flashサイト＆ゲーム制作入門

携帯Flashサイトデザイン入門

Flash for mobile

• FlashLite

こちらで紹介してるWEB制作・WEB開発は、各種サービスサイトでご相談ください。各種ライブラリ（Prototype.js、script.aculo.us、jQuery）によるAjax開発、Movable Typeサイト制作のサイトへぜひ一度アクセスしてみてください。

• サイトマップ
• お問い合わせ
• ホームページ制作
• Web制作アイデア
• HTMLコーディング
• SEO
• SEO対策情報ブログ
• ウェブデザイン
• twitterデザイン
• twitterサービス
• twitter情報
• 動画まとめ