Web編：HTML5やjQuery Mobileなど
スマホWebアプリ開発に役立つ記事33選

　開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。

　一方で、スマートフォンOSはWebブラウザやWebを表示する機能を備えているので、「Webアプリ」を実行できます。ここでは、スマートフォン向けのWebアプリ開発についてまとめます。HTML5やCSS3、jQuery MobileなどJavaScriptフレームワークを使ったスマートフォン向けのWebアプリケーション開発に関する記事、HTMLやCSS、JavaScript／jQueryそのものを学習するのに役立つ記事としては、以下をお勧めします。

スマホ向けWebの基本や表示に役立つ記事6選

　PC向けWeｂアプリと異なり、スマートフォンの画像サイズに合わせる必要があります。iPhone向けの記事が多いですが、微妙に表示が異なるもののAndroidやWindows Phoneにも応用できると思います。

■ 基礎知識

WebアプリをiPhoneっぽくするための5つのポイント iPhoneで動かす業務用Webアプリ開発入門（1）　業務用iPhoneアプリは、なぜネイティブではなくWebが良いのか？ iPhoneっぽい見た目の重要性とともに解説します 「Smart ＆ Social」フォーラム 2010/9/30

iPhone向けWebアプリを作ろう Safari Web Content Guide for iPhoneを読み解く　iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します 「Smart ＆ Social」フォーラム 2008/5/29

.NETでスマホ向けWeb開発を始める前の基礎知識 .NETによるスマートフォンWeb UI開発ガイド【導入編】　「Windowsアプリ」「Webアプリ」の次は「スマートフォン」。スマホ向けWebアプリの特徴やUIデザイン、開発技術を紹介 「Insider.NET」フォーラム 2011/4/1

あなたのサイトはiPhoneで見られますか？ 安藤幸央のランダウン（36）　携帯電話と違い、PC用のサイトも見られる小さな画面の端末が普及してきている。そんな時代のWebページはどうあるべきかを解説しよう 「Java Solution」フォーラム 2007/9/14

■ スマホのWebブラウザやWeb表示

Netbookにも広まるAndroidで、かつてないWeb体験を Androidで動く携帯Javaアプリ作成入門（9）　WebKitを搭載しているAndroidでは、アプリの一部としてHTMLを表示でき、JavaScriptとアプリを連動させることも可能です 「Smart ＆ Social」フォーラム 2009/9/3

アプリ内でWebページを開いてiOS標準アプリと連携 iOSでジオ（GEO）プログミラング入門（3）　Google Mapsを使う地図アプリの画面遷移を改善し、ユーザビリティを向上するために、iOSのAPIやXcodeの使い方を解説します 「Smart ＆ Social」フォーラム 2011/11/28

HTML5を使ったWebアプリ開発に役立つ記事9選

　微妙に使える機能が異なるもののiOS・AndroidのWebエンジン「WebKit」や、Windows PhoneのWebブラウザ「Internet Explorer Mobile」では、HTML5やCSS3などが使えます。HTML5は、これまでHTMLではできなかったいくつかのネイティブな機能を、Webアプリでも実現する技術として注目を浴びています。

■ HTML5とは、CSS3とは、SVGとは

HTML5“とか”アプリ開発入門 最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします デザインハック ＜ リッチクライアント

デザイナは要注目！ 明日から語れるHTML5＆CSS3 一撃デザインの種明かし（13）　Webデザイナのみならずプログラマも必修となるHTML5＆CSS3について、具体的な表現の例や、タグ、今後の予想、ツールなどを紹介します デザインハック ＜ リッチクライアント 2010/9/27

いますぐ使えるCSS3テクニック集 コピペ用サンプル付 一撃デザインの種明かし（16）　HTML5時代のWeb制作で必須となる「CSS3」を使いこなそう！ カヤック・コーポレートサイトの実例とサンプルを交えながら解説します デザインハック ＜ リッチクライアント 2011/10/11

いまさら聞けないSVG、なぜ知られていないのか？ いまさら聞けないリッチクライアント技術（9）　「SVG？ 聞いたことないなあ……」と思うのは無理もないことです。知られていない理由とその秘めたる実力について解説します 「リッチクライアント ＆ 帳票」フ ォーラム 2008/2/15

■ HTML5を使ったスマホのWebアプリ開発

HTML5のlocalStorageでiPhone用Webアプリ高速化 iPhoneで動かす業務用Webアプリ開発入門（4）　iOSのSafariブラウザ内にデータを記録する機能を使いデータの先読みとキャッシュを実現しアプリの体感速度を向上します 「Smart ＆ Social」フォーラム 2011/3/2

HTML5でiPhone用Webアプリをオフライン対応に iPhoneで動かす業務用Webアプリ開発入門（終）　アプリケーションキャッシュの使い方をコードを交えて解説します。iPhoneのSafariはキャッシュの更新に注意が必要です 「Smart ＆ Social」フォーラム 2011/4/18

人気順に説明する初めてのHTML5開発 スマホWeb開発での人気順に各HTML5機能の使い方を解説する連載がスタート 「Insider.NET」フォーラム

ゲーム開発はHTML5＋スマホベースが新潮流 D89クリップ（28）　今回のHTML5とか勉強会のテーマは「HTML5＋ゲーム」。mobage、アメーバピグ、GREE、カヤック、ユビキタスエンターテインメントの取り組みをレポートする デザインハック ＜ リッチクライアント 2011/10/19

HTML5のデバイス＆位置情報系APIを使いこなせ！ D89クリップ（33）　モバイルデバイス上のWebアプリの未来を担う、HTML5のデバイス系と位置情報系APIを使いこなせ！　getUserMediaや、Geoｌocation APIとは？ 　デザインハック ＜ リッチクライアント 2011/12/21

jQuery MobileなどJavaScriptを使った開発の記事8選

　スマートフォンならではのレイアウトやコンポーネント、画面遷移やタッチ動作、データ取得をWebアプリで実現するためには、スマートフォン用JavaScriptフレームワークやWeb APIを使うと手軽に開発できます。現在は、特にjQuery Mobileが人気です。

■ スマホ用JavaScriptフレームワークやJSONを使った開発

スマホ用JavaScriptフレームワーク5つ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、Sencha Touch、Wink toolkit、PhoneGapとは　各々の概要・特徴を紹介し、3つのフレームワークで同じ機能を実装して比較します 「Smart ＆ Social」フォーラム 2011/6/22

iUIで始めるiPhone用Webアプリ開発の基礎知識 iPhoneで動かす業務用Webアプリ開発入門（2）　iUIの概要を説明し、使い方や簡単なサンプルページの作り方、iUIに独自の見た目と動作を追加する方法を解説します 「Smart ＆ Social」フォーラム 2010/12/8

JavaサーブレットとJSON-libでできるiPhone向けAjax iPhoneで動かす業務用Webアプリ開発入門（3）　AjaxとJSONの基本をおさらい後、iPhone用Ajaxの実装に役立つライブラリを2つ紹介し「iUI」に組み込む方法を解説します 「Smart ＆ Social」フォーラム 2011/1/17

クラウドで動くGPS連動スマホ用Webアプリを作る たぶん1時間でできるマッシュアップ講座　Google App Engine用Webアプリ開発の環境を構築し、マップや位置情報取得、施設情報のWeb APIを組み合わせてみます 「Smart ＆ Social」フォーラム 2010/11/4

■ jQuery Mobileを使った開発

jQuery Mobileページの基本構造を理解しよう 連載：jQuery Mobile入門（1）　2012年も続く可能性の高いスマホ・ブーム。スマホ向けWebアプリ開発のニーズも高まるだろう。そこで活用できるフレームワークを解説する 「Insider.NET」フォーラム 2012/1/20

jQuery Mobileでサクッと作るスマホWebアプリの基本 jQuery Mobile×Dreamweaverでアプリ作り　jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介 デザインハック ＜ リッチクライアント 2011/9/29

jQuery Mobileで作るスマホ向けFacebookアプリ 無料クラウドでできるFacebookアプリ開発入門（3）　公開したFacebookアプリの管理系機能や、jQuery Mobileを使ったスマートフォン向けのアプリ開発について解説します 「Smart ＆ Social」フォーラム 2011/8/1

DreamweaverでjQuery Mobileアプリのネイティブ化 PhoneGapで始めるWeb→スマホアプリ制作入門（2）　Dreamweaver環境をセットアップし簡単なWebアプリを作ってAndroidで動くネイティブアプリにする手順を紹介します 「Smart ＆ Social」フォーラム 2011/8/30

HTML／CSS／jQueryの基本・リファレンス記事10選

　Webアプリ開発に必要な、HTMLやCSS、JavaScript／jQueryそのものを学習するための記事や、リファレンスです。開発時のご参考に。

■ HTML

まずはHTML。ハイパーなタグ付き言語 デザイナーのためのWeb学習帳（1）　Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを攻略しよう デザインハック ＜ リッチクライアント 2008/8/26

D89Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします デザインハック ＜ リッチクライアント

■ CSS

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ デザインハック ＜ リッチクライアント

D89 CSS/スタイルシート リファレンス辞典 無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介しながら、リファレンス辞典を完成させていく連載です。コードサンプルやDOMの指定方法まで丁寧に説明します デザインハック ＜ リッチクライアント

■ JavaScript

いまさら聞けないJavaScript入門 いまさら聞けないリッチクライアント技術（2）　Ajax技術が注目され大復活を遂げたJavaScript。しかし、復活するまでには数々の悲劇が…… さらに実例や使い方なども解説 「リッチクライアント ＆ 帳票」フ ォーラム 2007/7/17

初心者のためのJavaScript入門 JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで 「Coding Edge」フォーラム

DOMの基本を学ぼう DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある 自分戦略研究所 > スキル創造研究室

■ jQuery

ざっくり覚えて始められるjQueryセレクタ入門 デザイナーのためのWeb学習帳（4）　現在大流行中のjQuery。CSSセレクタのように使えるらしいけど、実際どうなの？ というデザイナのために、その基本をざっくり紹介 デザインハック ＜ リッチクライアント 2009/12/1

CSSの書き方も分かるjQueryプラグイン実践活用法 jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています デザインハック ＜ リッチクライアント

jQuery逆引きリファレンス やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「ＸＸするには？」を24本一挙公開。jQueryは.NETでも公式サポート 「Insider.NET」フォーラム

Web編以外のまとめは順次追加

　スマホWeb開発の技術が身に付いたら、ネイティブアプリ開発の基本編・デザイン／グラフィック編を含めて以下のまとめも参照してみてください。今後、順次公開していきます。

ご意見、ご感想は Smart＆Social 会議室へどうぞ

[過去30日間人気記事 TOP 10] 2012年1月30日 更新 !! 1 位 - いまさら聞けないiPhone/iPadアプリの作り方の基礎 2 位 - 2012年スマホアプリを作り始めるのに役立つ記事35選 3 位 - スーパーマリオはゲーミフィケーションに影響を与えた 4 位 ↑ Androidアプリを“超”魅力的にする3種類のUIテスト 5 位 - 知らないと損するFacebookファンページの作り方 6 位 新 iPhoneで動くARアプリを作るためのライブラリ10選 7 位 ↓ 基礎から分かる、Facebookアプリの作り方 8 位 ↓ ゲーム嫌いも知らないと損、ゲーミフィケーション入門 9 位 ↓ 誰でもAndroid開発できるApp Inventorの基礎知識 10 位 - Android 4.0で注目の顔認識をアプリに組み込むには

Smart＆Social フォーラム トップページへ