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

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

　一方で、スマートフォンOSはWebブラウザやWebを表示する機能を備えているので、「Webアプリ」を実行できます。ここでは、スマートフォン向けのWebアプリ開発についてまとめます。サーバサイドについては、基本的にPC向けWebアプリでの開発とほとんど変わらないので、あまり取り上げません。

　HTML5やCSS3、jQuery MobileなどJavaScriptフレームワークを使ったスマートフォン向けのWebアプリケーション開発に関する記事、HTMLやCSS、JavaScript／jQueryそのものを学習するのに役立つ記事としては、以下をお勧めします。

 

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

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

■ 基礎知識

サイト制作3手法の基礎、OS/機種依存の問題点3選 スマホ向けサイト制作で泣かないための秘伝ノウハウ（1）　PCやケータイと比べて際立ったスマホの特徴2つや、iPhone／Androidでのハマリどころをサンプルを交えて紹介 「Smart ＆ Social」フォーラム 2012/10/22

触りながら覚えるスマホ向け企業サイト設計の基礎 jQuery Mobileでスマホ向け企業サイト構築（2）　簡単なスマホ向け企業サイトを設計するための基本事項を解説し、HTML5＋jQuery Mobileでの構築の手順を紹介します 「Smart ＆ Social」フォーラム 2012/12/14

5分で分かる「レスポンシブWebデザイン」 5分で分かる製作現場（2）　流行りのレスポンシブWebデザインを、いくつかのカテゴリに分けて説明する。スマートフォン向けサイト制作を学びたいという方も必読だ HTML5 + UX 2013/1/28

レスポンシブWebデザインから実機検証までサクッと 無料でCreative Cloudを使い倒せ（1）　無料で使える範囲でCreative Cloudを使い倒そう。レスポンシブWebサイトの作成から実機検証までサクッとやる方法を紹介する 　「HTML5 + UX」フォーラム 2013/2/18

もう、Webはブラウザという制約に縛られなくていい HTML5 + UX開設記念　10年前、旅行先で道に迷わず目的地に辿り着くのがこんなに簡単になるなんて思わなかった。スマホとHTML5が、Webを自由に解き放つ 　「HTML5 + UX」フォーラム 2012/7/10

スマホアプリ開発はWebとネイティブどっちがいいの？ 第2回テックヒルズまとめレポート　HTML5／jQuery Mobileで本当に楽になる？ Webとネイティブの「ハイブリッド」は？ 手間の掛かる“インストール”だからこその利点？ 「Smart ＆ Social」フォーラム 2012/4/27

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業務アプリのスマホ対応のポイント　「自社アプリをスマートフォン対応させたい」という要望がある？！ 基本的な考え方から、.NETでの開発方法までを説明する 「Insider.NET」フォーラム 2012/5/7

.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

WebViewの基本的な使用方法 Android Tips（11）　Androidの画面部品に「WebView」というものがある。これを使うとアプリケーションにWebブラウザの機能を付加できる ＠IT MONOist > 組み込み開発 2012/3/22

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

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

　微妙に使える機能が異なるものの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のスマホ対応の基礎知識とハマリどころ3選 スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）　HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介 「Smart ＆ Social」フォーラム 2012/11/22

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」フォーラム

オフラインWebの活路はモバイルアプリにある UX Clip（21）　「2013年、Web開発の進化を探る」勉強会レポート。HTML5はどこまで活用されているのか、またこれからどうなっていくのか？ 　「HTML5 + UX」フォーラム 2013/2/28

Bing Mapsのサンプルコードを使ってみよう！ Bing Mapsを使ってみよう！（後編）　「Bing Maps」のサンプルコードを使って、HTML5のlocalStorageとgeolocation APIを利用してスマホアプリを作ってみよう 　「HTML5 + UX」フォーラム 2012/12/13

タッチデバイスを指で快適に操作させるために HTML5アプリのタッチUX（2）　タッチデバイスUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう 「HTML5＋UX」フ ォーラム 2012/10/24

ビュー・エンジンと、柔軟なHTMLマークアップ 連載：標準化志向Web開発ことはじめ（3）　HTML5やWeb標準、携帯電話＆スマートフォンに対応するには？ ASP.NET MVCが持つ動的なHTMLコード生成機能を解説 「Insider.NET」フォーラム 2011/2/4

ゲーム開発は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を使った開発の記事14選

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

JavaScriptスマホ対応時に知らないと損する16のコト スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）　スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、OS／機種依存事例5選など 「Smart ＆ Social」フォーラム 2013/1/16

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

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

jQuery MobileなどUIフレームワークの基礎を学ぼう D89クリップ（49）　スマホアプリのUIを作るJavaScriptフレームワークが話題だ。jQuery MobileやSencha Touchの使い勝手を比較する座談会の模様をレポートする デザインハック ＜ リッチクライアント 2012/6/26

Dojo Mobileベースでアプリが作れるXPagesの基礎 XPagesでスマホWebアプリ開発入門（1）　サーバサイドJavaScriptやJavaでNotes/Domino資産を操作しHTMLベースWebアプリが作れる技術のモバイル対応の基本を解説 「Smart ＆ Social」フォーラム 2012/8/27

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でスマホ向け企業サイト構築 jまだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます 「Smart ＆ Social」フォーラム

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

Web制作の現場で培ったノウハウを一挙に共有 UX Clip（6）　「HTML5 Conference 2012」で、HTML5の最先端のAPI解説からHTML5時代のWebデザイン、開発現場で培ったノウハウの紹介やjQuery Mobileの緻密なカスタマイズ法が語られつくした模様をレポートする 　「HTML5 + UX」フォーラム 2012/9/27

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

スマホ案件用の秀逸なドキュメント『jQuery Mobile』 晴読雨読＠エンジニアライフ　『jQuery Mobile』書評。サイトのスマホ対応案件はどんどん増えている。本書は、公式サイトだけでは分かりにくい部分も詳細に解説している 自分戦略研究所 >エンジニアライフ 2012/3/23

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 フォーラム トップページへ