スマホアプリの作り方【超まとめ】
Web編:HTML5やjQuery Mobileなど
スマホWebアプリ開発に役立つ記事52選


@IT編集部
2012/1/31
2013/2/28 改訂

iOS(iPhone/iPad/iPod touch)AndroidWindows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための@IT記事のまとめです。今後、順次更新・追加していきます。


スマホアプリは「ネイティブ」だけではない

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

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

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


 

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

 PC向けWebアプリと異なり、スマートフォンの画像サイズに合わせる必要があります。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ブラウザの機能を付加できる
アプリ内で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について、具体的な表現の例や、タグ、今後の予想、ツールなどを紹介します
いますぐ使えるCSS3テクニック集 コピペ用サンプル付
一撃デザインの種明かし(16) HTML5時代のWeb制作で必須となる「CSS3」を使いこなそう! カヤック・コーポレートサイトの実例とサンプルを交えながら解説します
いまさら聞けない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、カヤック、ユビキタスエンターテインメントの取り組みをレポートする
HTML5のデバイス&位置情報系APIを使いこなせ!
D89クリップ(33) 
モバイルデバイス上のWebアプリの未来を担う、HTML5のデバイス系と位置情報系APIを使いこなせ! getUserMediaや、Geolocation APIとは?

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の使い勝手を比較する座談会の模様をレポートする
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アプリケーションを手軽に作成する方法をおばかアプリを例に紹介
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』書評。サイトのスマホ対応案件はどんどん増えている。本書は、公式サイトだけでは分かりにくい部分も詳細に解説している

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

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

HTML


まずはHTML。ハイパーなタグ付き言語
デザイナーのためのWeb学習帳(1) Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを攻略しよう
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セレクタのように使えるらしいけど、実際どうなの? というデザイナのために、その基本をざっくり紹介
CSSの書き方も分かるjQueryプラグイン実践活用法
jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています
jQuery逆引きリファレンス
やりたいことからコードが見つかるjQuery辞典。まずはセレクタ構文に関する「XXするには?」を24本一挙公開。jQueryは.NETでも公式サポート
Insider.NET」フォーラム

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

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


 


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


Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間