ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

2011年3月5日に高知で行われた、ソーシャルゲーム講習会で、「地方企業がソーシャルゲーム開発を成功させるための10のポイント」という発表を行わせていただきましたので、そのスライド資料を公開させていただきます。

第2回についての情報は、あまり記載されていませんが、講習会の概要はこちらに掲載されています。

→　高知県　行事等のお知らせ　ソーシャルゲーム産業創出事業に関する事前講習会 [pref.kochi.lg.jp]

弊社で実際に苦労した経験を元に、ゲームなど作ったことのない地方の小さな受託開発企業が、リモートでソーシャルゲームの開発を行う場合の注意点をまとめた、ソーシャルゲーム開発初心者に向けた資料です。

「地方企業が・・・」というタイトルにはなっていますが、そうではなくても特にゲーム開発の経験の無い方にとって開発の良い指針となる資料になっていると思います。

また、講習会に参加いただいた皆様、関係者の皆様、本当にお疲れ様でした。この場で改めて御礼を申し上げます。

関連：

• Technology of DeNAに「ソーシャルゲームのためのMySQL入門その２」が公開されています
• ソーシャルゲーム開発に関するスライド資料をまとめてみました
• OSC 2010 北海道の発表で使用したスライド資料「PHPで大規模ブラウザゲームを開発してわかったこと」

ユニークなサービスを作ることで有名な面白法人カヤックさんの技術ブログに、Flash Liteの動的生成に関する記事がありましたのでご紹介します。

→　KAYAC engineers’ blog　FlashLite 動的生成の全てを教えます(その1?) [tech.kayac.com]

ケータイでFlashLiteで少し凝った使い方をしようとすると、現状その機能上の制限から動的生成は避けて通れません。

この記事では、カヤックさんのサービスで実際に使われていたという、実践的なFlash Lite動的生成の解説が行われています。

ActionScript変数の入れ替え、GIF・JPEG・PNG画像の入れ替え、MovieClipやモーションの入れ替えといった、そのまま参考にできそうなサンプルも掲載されています。

またカヤックさんで使われているというライブラリも合わせて公開されているようです。

今までFlash Liteの動的生成の経験が無い方はもちろん、経験がある方にとっても自分のやり方と比べてみる良い機会だと思います。

関連：

• ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版！？携帯コーディング、これだけ読めばすぐできる！」
• Flash Liteの容量削減テクニックをまとめた記事「知らないと損をするよ！ 携帯Flash軽量化メモ」
• ケータイFlashについての5つのTIPSがまとめられた記事「これだけは知っておきたいFlashLite入門」

ASCII.jpにスマートフォンサイトのキャプチャまとめ記事が掲載されていましたのでご紹介します。

→　ASCII.jp　日本語サイトの事例を一挙紹介（前編）　絶対見ておきたい有名企業のスマホサイトまとめ [ascii.jp]

→　ASCII.jp　日本語サイトの事例を一挙紹介（後編）　スマホサイトを作る前に見たい国内38社の実例 [ascii.jp]

誰もが知っている国内有名企業のスマートフォンサイトがまとめられています。

ジャンルとしては次のようにわかれています。

前編：

• ファッション・アパレル
• メーカー（自動車・家電）
• メーカー（食品・飲料）
• 交通・旅行
• 小売・飲食
• 不動産・建設

後編：

• 金融（銀行）
• 金融（保険・証券）
• 金融（クレジット・消費者金融）
• 通信
• メディア（ニュース）
• メディア（テレビ）
• EC・通販
• ポータル・Webサービス
• その他の業種

iPhoneのホーム画面のようにアイコンを並べるのが、どの業種でも比較的よく使われているレイアウトのようですね。

どのサイトも凝ったデザインとなっており、参考になりそうです。

関連：

• デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」

かちびと.netさんに、iPhoneやAndroid向けのJavaScriptフレームワーク「Wink Toolkit」についての日本語解説記事がありましたのでご紹介させていただきます。

→　かちびと.net　iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った [kachibito.net]

WinkToolkitは、JavaScriptで作られたスマートフォン向けのフレームワークで、エフェクトなどのデザイン面に特化した作りになっているようです。

→　WINK TOOLKIT　公式サイト [winktoolkit.org]

上記のかちびと.netさんの解説記事はサンプルが豊富でわかりやすいですね。

見て貰えると分かるのですが、iPhoneやAndroidのブラウザに対応した実用的なエフェクトがかなりの数用意されているようです。

今後スマートフォン向けサイトもどんどん凝った物になっていくでしょうから、この手の技術は要チェックですね。

関連：

• ブックレビュー：WEB+DB PRESS vol.61(2011年2月発売号　特集：実践!Titanium JavaScriptでiPhone&Android本格アプリ開発)
• IBM developerWorksにHTML5モバイルアプリ用フレームワーク「Sencha Touch」の記事がありました
• JavaScriptでiPhone/Android向けのソーシャルアプリが作成できるという「ngCore」について解説されたスライドが公開されていました

IBMの技術文書サイトdeveloperWorksに、HTML5モバイルアプリ用フレームワーク「Sencha Touch」の記事がありました。

→　IBM developerWorks Japan　モバイル Web アプリケーション・フレームワークの比較: 第 4 回 完全なモバイル Web ソリューションとして Sencha Touch を利用する [ibm.com]

「Sencha」は、何度も名前が変わっておりややこしいのですが、むかし「Ext JS」（さらに前はYUI-Ext）と呼ばれていたJavaScriptのフレームワークで、「Sencha Touch」はそのスマートフォン版という位置づけです。

公式ページはこちらになります。

→　Ext Japan　Sencha Touch機能概要 – HTML5モバイルアプリ用フレームワーク [extjs.co.jp]

IBMの記事では、モバイル Web アプリケーション・フレームワークの比較という形で、その「Sencha Touch」について解説しています。

簡単なサンプルと、特徴を紹介しているだけの簡単な記事にはなりますが、Sencha Touchに関する記事はあまり見たことがないので、参考になるのではないでしょうか。

関連：

• jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ
• ケータイのダメダメなJavaScript実装について解説された記事「携帯電話事業者に学ぶ”XSS対策”」
• FlashをHTML5・JavaScriptに変換して動かすSmokescreenというものがあるそうです