tech.kayac.com

最近ロードバイクのコンポーネントを一新しました。nagataです。

この度スマホアプリにまつわる交流会を開催する運びとなりましたのでお知らせいたします！

今年度、カヤックのラボチームBMSP（ブッコミスマートフォン）はスマートフォン上で 新しいプラットフォームとなるようなアプリを開発することを目標として活動をしています。

開発から半年が過ぎ、社内のメンバーだけでなく、 スマートフォンアプリ開発に情熱を注いるエンジニアのみなさんと ざっくばらんに情報交換の場が持ちたい！ということで、 今回、ライトニングトーク交流会を開催することになりました！

カヤック本社1階にある、DONBURI CAFE DINING bowlsにて、ご飯を食べながら、 アプリの企画?開発までの裏話やアプリ内機能の実装方法など 日々の開発で培ったノウハウを共有をしませんか？

みなさんと交流できますことを楽しみにしております！

日時

8/4（木）19:00〜21:30
※受付は18:45〜開始いたします。

19:00〜20:10
ライトニングトーク
20:10〜21:30
交流会

内容

ナカマップの実装について

【講演者】大塚雅和

  • ナカマップの実装 〜GPS/リアルタイムチャット〜

ナカマップとは？

位置を共有しながらグループチャットができるアプリ！
http://nakamap.com/ja

Reengoの技術ってどんななの？

【講演者】村瀬大輔

  • IP電話待ち受けの秘密

Reengoとは？

Facebookの友達に電話番号なしで電話できるアプリ！
http://reengo.me/

EncountMeのできるまで

【講演者】堤修一

  • EncountMeの誕生の裏話
  • 開発環境について

EncountMeとは？

街での「すれ違い」を楽しむアプリ！
Twitterアカウントでログイン。今まで出会えなかった人や情報と出会えます。
http://encountme.com/ja/

ライトニングトークご協力者募集

当日、ライトニングトークをしていただける方を募集しています。 ご協力いただける方は申込フォームで、お話しいただけるテーマの入力をお願いします。 お1人5分目安でお願いします。

場所

DONBURI CAFE DINING bowls

定員

40名
※会場の都合で、応募多数の場合は、参加者を制限させて頂く場合がございます。

こちらのフォームより、お申込みください。

※担当より、開催１週間前を目安に確定のご連絡をさせていただきます。

会費

4000円（お食事・お飲物飲み放題です）

参加資格

勉強会の特性上、今回はエンジニアの方限定とさせていただきます。ご了承ください！

問い合わせ先

カヤック ギブ&ギ部
event2011@ml.kayac.com
※メールの件名にスマフォライトニングトークイベント問い合わせと明記ください。

皆様のご参加を心よりお待ちしております！

カヤックではスマホアプリ好きな技術者も募集しています！

Tags

▼

▲

※Chromeで本文エリアをスクロールするとエラーになるそうです。ごめんなさい！

こんにちは！１年間自転車通勤を続けた結果、健康診断で「おっ！」と言われて大満足のaragaです!

SWFをiPhone上のSafariで動かすプロジェクト「FlashForward」をgithubで公開しました。

プロジェクト名

FlashForward

ライセンス

MIT

FlashForwardとはなにか？

まずは、社内勉強会で発表した資料をご覧ください。

非常に操作性が悪くてすいません。が、実はこの資料はおそらく世界初の試みで作られています。

なんとSWF,SVG,Canvasの3種類のフォーマットで見る事が出来ます。

※ Safari推奨

これらはFlashForwardを使ってFlashLite1.1で作ったSWFのスライドを変換しました。

このほかのサンプルはギャラリーをご覧ください。

以上で、エントリを終了するつもりでしたが、想像以上に使いづらい資料ですので、資料の内容を簡単に説明していきます。

特徴

FlashForwardはFlashLite1.1コンテンツをHTML5に変換するシステムで、特に日本のフィーチャーフォン(ガラケー)で使われているようなFlashに特化しています。

iPhoneで見るという前提なのでSafari以外のブラウザは動作保証しません。

日本のガラケーサービスにおいて一般的なテクニックである「SWFの動的生成」に対応しやすくするために、SWFを一度中間フォーマットへ変換するパーサーと動かすランタイムを独立させています。

そのため動的生成は中間フォーマットであるJSONを書き換えるだけで実現できるので、非常に処理が簡単です。

また、携帯ブラウザという特性上、出来るだけ通信を小さくするために、中間フォーマットは小さな単位で分割します。 上手くキャッシュを使えば、例えばアバターの服だけを新たにロードするというように非常に少ない通信で扱う事が出来ます。

中間コードの仕様

グラフィックはSVGまたはJPEG, PNG、その他はJSONに変換し名前付きインスタンス単位でファイルを分割します。(ファイル数を少なくする事も可)

index.json

SWFのルートでfpsなどのメタ情報、素材の辞書情報、RootにあるフレームアニメーションとActionScriptを所持しています。

動的生成をする場合は、このindex.jsonを書き換えます。

各種SVG

ベクターグラフィック、埋め込みフォント、静的テキストはSVGにしています。

SVGにしている理由はSVGは見た目を非常に美しく再現できるということと、XMLなのでクライアントでパースがしやすいためです。

各種ビットマップ

SWFに埋め込まれたBitmapデータはJPEGまたはPNGにして抽出します。

その他JSON

上記以外はJSONにしています。

Canvas と SVG

FlashをHTML5にした事のある方はCanvasにするか、SVGにするか、CSSアニメーションにするか非常に悩むと思います。

iOS4からCSSアニメーションのwebkitTransformではGPUが効くという噂を聴きCSSアニメーションも検討しましたが、SWFのようなフレームアニメーションを再現するには、各ムービークリップで同期を取るのが難しかったため今回は見送りました。

さて、問題はSVGとCanvasのどちらを採用するかですが、グラフィックが奇麗なのはSVG、FPSが出やすいのがcanvasというのが色々と試した結果です。

グラフィックに関しては、canvasではpixel単位でビットマップを作るので丸める際に生じる誤差の範囲で隙間が出来たりする場合が有ります。

FPSに関しては、SVGでは10fps程度が限界で、canvasでは15fpsくらいまで出せると思います。

実装上の大きな違いは、SVGが毎フレーム差分のDOM操作をするのに対して、Canvasは毎フレーム全ての画像レンダリングを実装する必要があります。 ガラケーの制約の中で作られたFlashの場合はSVGでもかなりのFlashが問題なく動きますが、アルファを多様したりオブエジェクト数が多かったり、着色を使っているような場合はCanvasでないとパフォーマンスが出ません。

まとめると、

  • パフォーマンスを優先したいなら(高FPS) -> Canvas

  • 美しいベクターグラフィックを優先したいなら -> SVG

  • 汎用的にハイクオリティで変換したい -> Canvas

他社さんのゲームでSWFをHTMLに変換しているゲームを見ているとどうやらcanvasを採用している例が多そうです。 また、FlashForwardよりもハイクオリティなものも多いようです。

しかし、公開したFlashForwardは、現段階（2011/7/7）canvasの処理に不具合が残っていたり、非効率な実装をしているためパフォーマンスにおいてもSVGの方が出ます。 Canvasは使い物にはなりません＞＜

まだまだ未熟なプロジェクトですので、どなたかCanvasの処理やパーサーを高速化してくれるととっても嬉しいです。（まるっと全部を高速化してくれても良いよ!!!）

良かったらご自由に使ってフィードバックをください！

Tags

Authoraraga

Date

▼

▲

こんにちは。いつの間にか当ブログ担当になっていたnagataです。

京都支社ができてしばらく経ちましたが、 このたび大阪で勉強会を開く運びになりましたので告知させていただきます！

エンジニア限定★関西初！面白法人カヤック主催勉強会
〜「ソーシャルアプリのつくり方」―エンジニア主導のサービス展開法― のご案内〜

面白法人カヤックの京都支社ができて数か月。 今までは関東にしか支社がなかったため、関西のエンジニアの皆様と 情報交換するチャンスに恵まれず、京都支社内のメンバーだけで ノウハウを共有して運営をしてきました。

しかし、

「外の人ともアツくエンジニアトークしたい！」

ということで、まずは新参者として、話のネタを提供させていただき、 関西エンジニアの皆様との勉強会をご一緒できれば、と考えました！

１人でも多くのエンジニアの皆様と情報交換させていただきたいので ぜひ、ふるってご参加ください。 皆様とお会いできることを楽しみにお待ちしております。

日時

7月9日（土）13:00〜15:00 ※受付は12:45からとさせていただきます。

  • 13:00〜14:10 勉強会
  • 14:10〜15:00 交流会

内容

カヤックのソーシャルゲームの作り方

【講演者】庄司容崇

  • カヤックのゲーム開発履歴 〜成功と失敗の軌跡〜
  • カヤック流、ソーシャルゲームの企画術
  • 数十万のユーザーの心を掴むゲーム開発と運用とは？

カヤックのスマートフォンアプリの作り方 ―ナカマップの秘密―

【講演者】大塚雅和

  • ナカマップの誕生の裏側 〜カヤックのラボチーム〜
  • ナカマップの実装 〜GPS/リアルタイムチャット〜

場所

新大阪丸ビル 新館 904号室

定員

40名

※会場の都合で、応募多数の場合は、参加者を制限させて頂く場合がございます。以下のフォームより、お申込みください
※担当より、開催１週間前を目安に確定のご連絡をさせていただきます。

参加資格

勉強会の特性上、今回はエンジニアの方限定とさせていただきます。 ご了承ください！

なお、今後も勉強会を開催予定ですので、 その他職種（ディレクター・デザイナー等）の皆様は、以下のフォームに ご入力いただきましたら、次回のご案内をさせていただきます。

お申し込み方法

申し込みフォームよりお申し込みください。

お問い合わせ先

カヤック ギブ＆ギ部 event2011@ml.kayac.com
※メールの件名に【関西イベント問い合わせ】と明記ください。

お知り合いとご一緒にご参加ももちろんOKです。 皆様のご参加を心よりお待ちしております！

と、いうわけで、関西圏にお住まいのみなさまに、この機にカヤックがどんな会社か覗いてみていただけたらと思います。

カヤックでは一緒に働くアツいエンジニアを募集しています！

Tags

▼

▲