【コラム】

HTML5で作るスマホWebアプリ開発チュートリアル

1 "さよならFlash!"は本当か? HTML5トレンドに潜む5つの誤解

jAction佐藤佳文
 
  • <<
  • <

1/4

はじめまして、jActionの佐藤佳文です。私はアプリ制作会社で主にFlashやHTML5開発をしているエンジニアです。クライアントワークで企業PRのためのWebアプリを開発したり、趣味でWebサービスを作ったりしています。

jActionを知らない方が多いと思いますので、簡単に紹介します。jActionは、HTML5による動的かつリッチなWebアプリを効率的に制作できるようにするJavaScriptライブラリです。jQueryのようなイメージと考えてもらって構いません。

今回は連載初回となりますので、「本連載の目指すところ」「HTMLにまつわる5つの誤解」についてお話ししましょう。

最終目標は「HTML5を使ってWebアプリをつくれるようになること」

本連載では、プログラミング経験者かつHTML5の初心者で、これからHTML5を仕事に生かしたい方、自作のアプリをつくりたい方に向けてお送りします。HTML5をすでに仕事に生かしている方や独学で勉強している方には、少々物足りない内容になるかもしれませんが、知識のおさらいとして読んでいただければと思います。

本連載の最終目標は、読者の方が「HTML5の基礎や本質を理解し、HTML5を使ってWebアプリをつくれるようになる、または、仕事に生かせるようになること」です。よって、連載ではHTML5の知識だけではなく、実際にコードを書けるようになるために、コードもできるかぎり紹介していきます。

今後は、HTML5が注目されている背景や理由(より具体的に)概要の紹介を行った後、コードを織り交ぜながらHTML5で加わった機能を実践的に解説していきます。

HTML5に関する5つの誤解

HTML5は、現在最も注目を集めている技術の1つで、IT業界の方ならば一度は耳にしたことがあるはずです。最近は、HTML5ベースのWebページやスマホアプリの導入を検討している企業が少なくなく、HTML5に関する案件が増加しているのも事実です。

HTML5に対する一番大きな期待は「iPhoneでも見られるアプリをつくれる」ことでしょう。今まで動的でリッチなWebページをつくる時はFlashで開発することが多かったのですが、iOSを搭載したモバイル端末はFlashに対応していないので、iPhone向けのWebアプリを開発する際は、必然的にHTML5で開発する必要があります。

しかし、私がクライアントと接するなかで感じているのが「HTML5に対する過度な期待」です。なかには誤解すら含んでいる節があります。加えて、HTML5について正しく理解している人は多くないように思われます。私個人の感覚なのですが、問い合わせや打ち合わせなどでも感じます。業界で言うと、ゲーム業界や一部のWeb業界の一部には理解している方が比較的多いのですが、広告業界などでは理解している方は少ないように感じます。

以下、私が感じているHTML5に対する5つの誤解を説明しましょう。

(1)HTML5はブラウザに依存しない?

これまで、Webアプリ開発ではブラウザ間の互換性の低さが問題になっていました。HTML5では、このような問題を解決するため、「すでにWebブラウザが実装している機能を詳細に分析し、そこから仕様を抽出する」という作業によりブラウザ間の互換性を高めようとしています。

しかし、現段階では、HTML5でもブラウザ間で動作が異なり互換性が高いとは言えない状況です。例えば、あるブラウザでは問題なく動いていたプログラムが、別のブラウザでは正常に動かないことがあります。

(2)HTML5は表現力が高い?

HTML5以前のHTMLは主に文章の論理構造の明確化が目的にされていたので、動的なページを構成することなどの表現部分に関しては、進歩していなかったのが現実でした。しかし、昨今のWeb技術の向上や動的かつリッチなWebページに対するニーズにより、HTML自体にも表現部分の実装能力の向上が求められました。

そこで現れたのがHTML5です。HTML5は、canvasなどの機能が追加され、以前よりもリッチな表現ができるようになりました。

しかし、メディアなどでは「HTML5はFlashのような表現ができる」と言われていますが、現状では、HTML5はFlashに比べて表現の幅が少なく、Flashのようなリッチな表現をすることは難しいです。また、Flashのような表現を実現したとしても、FlashよりもHTML5は開発が難しいため、Flashよりも制作コストがかかるのが現状です。

(3)HTML5はサクサク動く?

HTML5は、canvasなどの表現部分だけではなく、複雑な処理をバックグラウンドで処理することを可能にする「Web Worker」などの機能が加わったことで、以前よりも軽いウェブアプリの開発が実現できるようになりました。しかし、Flashに比べると、描画パフォーマンスが多少低く、処理スピードが遅いのが現状です。

(4)HTML5はSEOに強い?

HTML5は論理構造の強化が図られ、ページを論理構造にしやすくなり、SEOとの相性がいいことが考えられます。しかし現時点では、HTML5を使ったからといって、SEOに効果をもたらす可能性は少ないです。

(5)HTML5はスマホならではの機能に対応?

HTML5では、AndroidアプリやiPhoneアプリのようにデバイス特有の機能を使えると考えている人がいます。デバイス特有の機能とは、位置情報、カメラ機能、音声認識機能、センサー機能などです。

しかし現時点では、Android端末とiPhoneに搭載されている標準ブラウザには、これらのデバイス特有の機能がすべて実装されているわけではありません。具体例を挙げますと、現在地を取得するGeolocationという機能は、Android端末とiPhoneに搭載されている標準ブラウザには装備されていますが、カメラ機能はAndroid端末しか対応していません。

それでもHTML5で開発する意味、開発者に求められること

以上、HTML5にまつわる5つの誤解をまとめてみましたが、HTML5には誤解とも言える過度な期待があることを開発の現場で感じています。

しかし、iPhoneがFlashに対応していないかぎり、リッチなコンテンツをつくる際はHTMLを使う必要があります。広告主やアプリ開発会社が「iPhoneユーザーを切り捨ててよし」と判断することは考えにくいでしょう。また、HTML5はこれから加速度的に進化することが期待されています。将来的には、canvas強化による表現力向上、デバイス特有の機能の実装によるインタラクティブな体験の提供、企業やアプリのPRには欠かせないSEOの強化、ユーザーの満足度を大きく左右する処理スピードの向上など、多くの可能性があります。

私たち開発者はHTML5に対するクライアントの期待を理解したうえで、企画・開発・説明責任を果たさないといけません。また、HTML5の基礎や本質を正しく理解することで、技術オリエンテッドなユニークな企画を生み出せるかもしれません。本連載を通じて、HTML5の素晴らしさ、開発現場にいるからこそわかる難しさ、どちらもお伝えできればと思います。次回は、HTML5の特徴を紹介します。

jAction 佐藤佳文
HTML5によるWebアプリ開発を効率化するJavaScriptライブラリ「jAction」の開発チームでプログラミングを担当。アプリ制作会社で主にFlashやHTML5のコーディングをしている。使用言語は、Flash、HTML5、JavaScript、PHPなど。現在サーバサイド言語のRubyを勉強中。趣味のアプリ制作で、どれか当たってくれないかなと日々願う。
  • <<
  • <

1/4

インデックス

連載目次
第4回 HTML5のvideoタグが可能にするリッチな表現と実装上の課題
第3回 HTML5ならではのグラフィックスを実現する「canvas」
第2回 Flashみたいなサイト作れますよね? HTML5=リッチに潜む誤解を解く
第1回 "さよならFlash!"は本当か? HTML5トレンドに潜む5つの誤解


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ソニーの新たな旗艦拠点 - 銀座ショールーム&ストアのオープニング舞台裏
[09:05 9/26] スマホとデジタル家電
SNS使いが上手い!要注目の食品・飲料系Webキャンペーン事例5選【2016年9月】
[09:01 9/26] 企業IT
【連載特別企画】ゼロから始める多要素認証 第1回 現在、認証基盤に何が求められているのか? YubiKeyが切り拓く近未来の認証環境
[09:00 9/26] 企業IT
【特別企画】著名な車メーカーのブランドをも傾ける!? スマートカーのハッキング対策の勘所とは - ペンタセキュリティ
[08:30 9/26] 企業IT
【特別企画】ドローンビジネスや精密農業に朗報! 高精度測位を実現するモジュール登場
[08:04 9/26] テクノロジー

求人情報