Más contenido relacionado La actualidad más candente (20) Similar a Hybrid appのすすめ (20) 1. Hybrid app
2011. 9. 22(Thu) @CyberAgent
CyberAgent Inc.
Smartphone Division
Kazunari Hara @herablog
6. Native
Access to Hardware
Rich UI
Faster, Smoother
8. Native vs Web
Access to Hardware ×
Multi-device ×
Faster, Smoother
Developers
Notas del editor 「Hybrid appのすすめ」ということでNativeとWeb両方の良いところを組み合わせたアプリのご紹介をします。\n サイバーエージェントスマートフォンDiv 原と申します。\n最近はAmebaの閲覧面、Piggのスマートフォン対応、デカグラフを担当しています。\nHTML/CSS/JavaScriptを書くWebのディベロッパーです。\n サイバーエージェントスマートフォンDiv 原と申します。\n最近はAmebaの閲覧面、Piggのスマートフォン対応、デカグラフを担当しています。\nHTML/CSS/JavaScriptを書くWebのディベロッパーです。\n サイバーエージェントスマートフォンDiv 原と申します。\n最近はAmebaの閲覧面、Piggのスマートフォン対応、デカグラフを担当しています。\nHTML/CSS/JavaScriptを書くWebのディベロッパーです。\n サイバーエージェントスマートフォンDiv 原と申します。\n最近はAmebaの閲覧面、Piggのスマートフォン対応、デカグラフを担当しています。\nHTML/CSS/JavaScriptを書くWebのディベロッパーです。\n さっそくですが、スマートフォンのアプリケーションを作る際には大きく分けて2通りの方法があります。\nひとつめはNative言語(Java, Objective-Cなど)で作る場合、もうひとつはWeb言語(HTML/CSS/JavaScript)で作る場合です。\n会場にいらしゃっている方はどのような環境で開発されている方が多いのでしょうか。\n最近のGoogle I/O 2011でも話されていたようにどちらで作るほうがいいのか、様々な議論があります。\n Nativeの利点はハードウェアにアクセスできリッチではやく、スムーズなアプリケーションを作れることです。\n\n 一方Webの利点は多くのデバイスに対応することができ、HTML5を中心とする技術の進歩でモバイルアプリが作りやすくなっていることです。\nまた、弊社の場合は過去の経験からWebの開発者が圧倒的に多いため、開発者をみつけるのもスムーズにすすめられます。\n さて、それぞれの利点があるなかでどちらの技術を使うことがいい選択なのでしょうか。\n \n 考えた結果、思い切って両方合わせてみちゃうことにしました。幸いどのプラットホームにおいてもNativeアプリケーションのなかにWebブラウザを内包することができます。その上にNativeをラップしてアプリケーションとしてリリースします。\n なぜハイブリットがいいのかというと、両方のいいとこ取りができるからです。\nWebは多くのデバイスに対応でき開発者もたくさんいるため素早く作成できます。Nativeはハードウェアにアクセスでき動きがはやく、スムーズです。\n両方のよいところを合わせてつくれば、効率的で使いやすい。\nつまり「Speedy & Friendly」なんです。\n 今まで作ってきたなかでとてもやりやすかったメンバー構成はこちらです。\nデザイナー, Web クライアント側の技術者, Native クライアント側の技術者, サーバーのAPI等を作成する技術者\nそれぞれ兼任できる場合は合わせてしまって問題ありません。役割分担として4つにわかれているととてもやりやすかったです。\n それでは制作実例をみてみます。\n ひとつめはアッキーナアプリ(iOS)です。\n目覚ましパズル機能です。どこがNativeでどこがWebでしょうか。\n 緑色のところがNativeでオレンジ色がwebです。パズルはWebでもできます。\nNativeは指定時間に起動, 開始/終了, 時間計測, 音鳴らす/止めるを担当しています。\n \n 最後は現在開発中のピグアプリの制作実例です。どこがWebでどこがNativeで作られているかおわかりですか。\n 部屋の背景、アバター表示・アクション(オレンジの部分)はWebで作られており、ボタン等それ以外の緑色の部分はNativeで作られています。\n背景、アバター部分はiOS, Android共共通化し、その上のボタンのみそれぞれ作ることで効率化をはかり、かつタッチ、ページ遷移等スムーズになっています。\nただし、Webの動きが遅いという問題に直面していて、今はそことの闘いになっています。\n特にiPhone4はRetinaで計算コストが高いため遅いです。GPUを使ったり間引きしたりしてなんとか解消しています。\n \n いくつか制作実例をご覧いただきました。\n効率化・使いやすさをはかるため、制作の際にはHybridアプリもぜひご検討ください！\n 最後にブログの告知させてください。CAのクリエイターブログです。\nca 1pixelと検索するとでてきます。\nスマホ関連もたくさん載せていく予定ですのでぜひご覧ください。\n いくつか制作実例をご覧いただきました。\n効率化・使いやすさをはかるため、制作の際にはHybridアプリもぜひご検討ください！\n \n \n
