HTML5 CSS3 JavaScript 入門
概要
- 次のようなことに観点を当てて記載しました
- HTML5やCSS3、JavaScriptとは何か?
- 新機能やレガシーブラウザ対応
- 全体像や概要、基礎を抑えるのに役立てられたら良いと思います
- フロントエンドエンジニアを目指す人にもオススメです
- プログラムの例は少ないので実際の使い方などは他のサイトを参考にしてください
HTML5
HTML5とは
- HTMLの最新バージョン、HTML4/XHTML1に変わるしようとして登場
- HTML4やXHTML1が「文章」を定義するためのマークアップ言語だったのに対してHTML5は「Webアプリケーションプラットフォーム」を実現するための中核の技術として考えられている
HTML5で追加された主な要素
- ドキュメントの構造を表す要素
- セクション/アウトラインの概念が強化されている
- 代表的なセクショニンング要素は4種類
- <section>,<article>,<aside>,<nav>
- 各セクションのヘッダ情報やフッター情報を定義するために次の要素もある
- <header>,<footer>
- マルチメディア要素
- これまで動画や音声の再生にはFlashなどのプラグインをインストールして使用する必要があったが、HTML5では動画や音楽用の要素が追加された
- <video>,<audio>
- <audio>要素はJavaScriptからアクセスできるAudio Apiが提供されており、より複雑な操作が可能
- これまで動画や音声の再生にはFlashなどのプラグインをインストールして使用する必要があったが、HTML5では動画や音楽用の要素が追加された
HTML5で使える新機能
- グラフィックス
- Canvas:ブラウザ畳でグラフィックスを描画するための機能
- 線を引く、短径で塗りつぶす等
- SVG(Scalable Vectir Graphics):グラフィックスを描画する別の方法として、ベクター画像を扱う(XMLの構造を持つ)
- 拡大しても画像が粗くならない
- XMLで記述されるため、JavaScriptからDOMにアクセスできる
- Illustratorなどのデザインデータを使用できる
- WebGL:3Dグラフィックスを扱うためのOpen GL ES2.0に基づくAPI
- Canvasと同様にJavaScriptで実装し<canvas>要素に対して描画を行う
- 現時点ではモバイルブラウザのサポートが少ない
- その他
- CreeteJS,three.jsなど、様々なライブラリが公開されており少ないコードで手軽に実装できる
- Canvas:ブラウザ畳でグラフィックスを描画するための機能
- 位置情報(Geolocation API):ユーザーの位置情報を取り扱う
- 履歴(History API):ブラウザの履歴を管理・操作する機能
- ストレージ(Web Storage):ブラウザ側にデータを保持する機能
- Key-Value型で保持(Cookieよりもデータ量が大きく、扱いやすいAPIが提供されている)
- Cookieとは違い、データがサーバーへ送信されない(送信したい場合は個別に処理を記述する)
- Web Storageには次の二つがある
- localStorage:永続的にデータが保持される、別タブ・ウィンドウで共有可能
- sessionStorage:ブラウザが起動している間だけ有効、別タブ・ウィンドウでは共有不可
- オフライン対応(Application Cache):ブラウザにファイルをキャッシュさせ、オフラインでも機能する
- manifestファイルにキャッシュさせたいファイルを定義することで一度読み込めば次回以降はキャッシュしたファイルを読み込むようになる
- manifestファイルは非常に強力なキャッシュとなるため、ファイルが更新されないなどの事態を引き起こすことがあり、実運用の際には注意して設計する必要がある
- ファイル操作(Drag and Drop API/File ApI):ページ上の要素やデスクトップなどブラウザ外のファイルをドラック&ドロップをできるようにする
- ファイルを選択する以外にも、JavaScriptで選択されたファイルにもアクセス可能
- 並行処理(Web Workers):JavaScriptの並行処理を行える
- 通常、JavaScriptの処理は同一のスレッド上で処理されるが、重い処理を実行すると完了するまで処理が止まってしまう
- Web Workersを利用することでバックグランドで動作させユーザへのストレスを軽減できる
CSS3
CSS3とは
CSS3で使える新機能
- アニメーション
- 次の二つの方法でアニメーションを表現
- transitionプロパティ:スタイル指定されている要素に対し違うスタイルを指定し変化をアニメーションさせる
- animation/@keyframesプロパティ:animationプロパティは、@keygramesで定義したキーフレームに沿ったアニメーションを実行します
- 次の二つの方法でアニメーションを表現
- グラデーション
- background/background-imagesプロパティに次の二つの新しい値を用いることでグラデーションを表現
- linear-gradient:線形グラデーションを生成
- radial-gradient:円形グラデーションを生成
- background/background-imagesプロパティに次の二つの新しい値を用いることでグラデーションを表現
- ドロップシャドウ
- 次の二つの方法でドロップシャドウ(影をつける)効果を与えられる
- box-shadowプロパティ:ボックスモデルにドロップシャドウ効果を与える
- text-shadowプロパティ:テキストにドロップシャドウ効果を与える
- 次の二つの方法でドロップシャドウ(影をつける)効果を与えられる
- ボーダー
- 次の二つのプロパティがある
- border-radiusプロパティ:ボーダーの角を丸めるプロパティ
- border-imageプロパティ:ボーダーの描画に画像を用いるプロパティ
- 次の二つのプロパティがある
- 変形
- transformプロパティ:移動、回転、拡大・縮小、傾斜させることができる(translateとscaleのアニメーションと組み合わせてつ変わることが多い)
- ウェブフォント
- これまでは、フォントを指定する場合、ユーザが保有しているフォントでしか表現できなかった
- ウェブフォントは、@font-faceを用いることで制約をなくし様々なフォントの表現が可能(ただしライセンスの考慮は必要)
- @font-face:サーバ上のフォントファイルを読み込みfont-familyプロパティが利用可能
- セレクタ:{ }内のCSS命令を適用するか選択(セレクト)する部分
- メディアクエリ:@mediaを表示するメディアの種類や特性に応じたスタイルを指定するためのもの
- メディア特性には、「幅、高さ、色」の指定ができ、幅の指定はレスポンシブルデザインの実装によく使われる
- ベンダープレフィックス:接頭辞を付与したプロパティ(将来的な仕様変更に備えた先行的な実装)
- 次のようなプロパティがある
- -moz-
- -webkit-
- 具体的には各ブラウザごとにプロパティを変更したりできる
- 次のようなプロパティがある
JavaScript
JavaScriptとは
- Webページに動きを表現できる
- HTML5の台頭や、アプリケーション化、Flashに変わる表現などで利用される
- Webブラウザ上の言語として認識が強いがサーバサイドの言語としても広く知られてきた(Node.jsなど)
- 言語を使うにあたり次のようなものがある
// オブジェクトの例) // オブジェクトの生成 var obj = { name : 'tanaka', other : {address : 'Tokyo'}, getName : function { return this.name; } }; // 値の取り出し console.log(obj.name); console.log(obj.other.address); console.log(obj.other.getName());
オブジェクトの生成
- オブジェクトを生成する方法として次の二つがある
// コンストラクタ関数とnewの例) // 1.コンストラクタ関数"Person"を生成 // 慣例的にコンストラクタ関数の一文字目は大文字 var Person = function() { this.name = 'sato'; this.address = 'Tokyo' return this; } // 2.コンストラクタ関数"Person"のプロトタイプにメソッド追加 Person.prototype.getAddress = function { return this.address; } // 3. 生成されたオブジェクトを格納 var person = new Person(); person.getAddress(); // "Tokyo"が取得できる
this
- 読み込み専用の変数(最初は掴みにくく乱用しがち)
- 次のようなルールで使う
DOM(Document Object Model)
- JavaScriptからHTMLやCSSにアクセスするための仕組み
- DOMツリーとして、window.documentからアクセスできる(HTMLのタグの階層)
- DOMで出来ることは大まかに次の3つ
- DOM要素の情報の取得・変更:
document.getElemenById('ID名');
- DOM要素の追加:
var btn = document.createElement('span');document.body.appendChild(btn);
- イベント関数登録:
window.onload = function() {処理};
- DOM要素の情報の取得・変更:
非同期通信
- Ajaxを利用する上で欠かせない技術
- Ajaxを利用する場合、主流な方法は次の二つ
- XMLHTTPRequest通信:サーバとデータをやりとりするAPI(データ形式はXML系とJSON形式がある)、オリジンが一致しないと通信できない(安全な通信を行うためのセキュリティ制限あり)
- JSONP通信:XMLHTTPRequest通信ではオリジンが一致しないと通信ができないので、それを解決するために登場した(scriptの読み込みはドメイン間の制限を受けないため、動的なscriptラグを読み込みコールバック関数を使って実現んできる)
その他
レガシーブラウザ対応
おすすめ書籍
- 「フロントエンドエンジニア養成読本」がオススメです(このブログは一部抜粋しているのでもう少し詳しく知りたい人は是非!)
- プログラム以外にも「フロントエンドエンジニアの基礎」、「開発環境」、「パフォーマンス」、「Git」など幅広く網羅しています
MBaaS 比較
概要
MBaaS(「エムバース」と読みます)はMobile Backend as a Serviceの略で,去年の中頃から米国で使われるようになった用語です。一般的にBaaSと呼ばれているサービスは,IaaS(Infrastructure as a Service)やPaaS(Platform as a Service)と比較すると,プログラミングや構築,運用の手間がかからないものを指す場合が多く,MBaaSはモバイル版BaaSですので,iOS, Android, JavaScriptなどのモバイルアプリの開発環境でそのまま使えるSDKが提供されています。いろいろなサーバ機能がすべて,SDKのAPI経由で利用できるので,アプリを開発するだけで,リリースすることができます。ユーザ管理,データ管理,プッシュなどの機能がひと通り揃っていて,そのサービスを使うだけで大体のことができてしまう汎用的なMBaaSは,米国のParse社,Kinvey社,StackMob社,日本のKii株式会社などが提供しています。
参考URL:第2回 MBaaSとは
サービス比較
比較1
比較2
機能の種類 | Parse | ニフティクラウド | アピアリーズ | Kii Cloud |
---|---|---|---|---|
ユーザー | 会員管理・認証 | 会員管理・認証 | ユーザー管理・認証 | ユーザー管理 |
権限管理 | 権限管理 | 権限管理 | アクセス制限機能 | Objectに対するアクセス権 |
データストア | データストア | データストア | データベース機能 | データ管理 |
ファイルストア | ファイルストア | ファイルストア | ファイル機能 | Object Bodyのアップロード |
位置情報 | 位置情報検索 | 位置情報検索 | ロケーション機能 | 位置情報 |
プッシュ通知 | プッシュ通知 | プッシュ通知 | プッシュ通知 | プッシュ通知 |
SNS連携 | SNS連携 | SNS連携 | - | 外部サービスを利用した認証 |
アプリ分析 | アプリ分析 | - | - | アプリ分析 |
バックグラウンドジョブ | バックグラウンドジョブ | - | - | スケジュール起動 |
サーバー | - | - | - | サーバー機能拡張 |
A/Bテスト | - | - | - | A/Bテスト |
APIリクエスト数 | 30/秒 | 200万回/月 | 10,000/月 | 100万回/月 |
プッシュ通知 | 100万回(100万の端末)/月 | 200万回/月 | 500/月 | 100万回/月 |
ストレージ | データストレージ 20GB | |||
ファイルストレージ 20GB | 基本ストレージ 5GB | 基本ストレージ 100MB | 1GB | |
データ転送 | 2TB | - | 1GB | - |
その他 | バックグラウンドジョブ 1 | ファイルサイズ制限 5MB | - | A/Bテスト 1/月 |
参考URL:無料で十分試せるMBaaS、ニフティクラウド mobile backendを使ってみる
その他(MBaasとPaasの組み合わせ)
- Nifty(MBaas)とMonaca(Paas)を使ってチェックインアプリが1〜2時間でサクッと作れます。
- とりあえずサービスの使い方やイメージを抑えるのに丁度いいと思います。
- 参考URL: Nifty(MBaas)とMonaca(Paas)でチェックインアプリを作成する
iOS HTTP メモ
- iOSのHTTP関係のプログラムやメモです
- 随時更新していく予定です
Flow
HTTP リクエストを発行しレスポンスを受信するまでのプログラムの流れはだいたい次の通り。
NSURLConnectionの場合
- リクエストヘッダ(NSURLRequest)を作る
- NSURLConnectionのクラスメソッドを用いリクエストを発行する
- レスポンスヘッダ(NSURLResponse)とレスポンスボディを取得する
NSURLSessionの場合
- セッションクラス(NSURLSession)を作る
- タスクを生成する
- タスクの実行する
// playgroundの場合↓のコメントアウトを消す // import XCPlayground /* * NSURLConnection(非同期) */ func myNSURLConnectionAsync() { // 通信先のURLを生成. let url:NSURL = NSURL(string:"http://httpbin.org/get")! // リクエストを生成. let request:NSURLRequest = NSURLRequest(URL:url) let queue:NSOperationQueue = NSOperationQueue() // NSURLConnectionを使ってアクセス NSURLConnection.sendAsynchronousRequest(request, queue: queue, completionHandler:{ (response: NSURLResponse!, data: NSData!, error: NSError!) -> Void in // 帰ってきたデータを文字列に変換. var result = NSString(data: data, encoding: NSUTF8StringEncoding)! println("myNSURLConnectionAsync->\(result)") }) // playgroundの場合↓のコメントアウトを消す // XCPSetExecutionShouldContinueIndefinitely(continueIndefinitely: true) } /* * NSURLConnection(同期) */ func myNSURLConnectionSync() { // 通信先のURLを生成. let url:NSURL = NSURL(string:"http://httpbin.org/get")! // リクエストを生成. let request:NSURLRequest = NSURLRequest(URL:url) // NSURLConnectionを使ってアクセス var response: NSURLResponse? var error: NSError? let data = NSURLConnection.sendSynchronousRequest(request, returningResponse: &response, error: &error) var result = NSString(data: data!, encoding: NSUTF8StringEncoding)! println("myNSURLConnectionSync->\(result)") // playgroundの場合↓のコメントアウトを消す // XCPSetExecutionShouldContinueIndefinitely(continueIndefinitely: true) } /* * NSURLSession(非同期) */ func myNSURLSession() { // 通信先のURLを生成. let url:NSURL = NSURL(string: "http://httpbin.org/get")! // セッションの生成. let session = NSURLSession(configuration: NSURLSessionConfiguration.defaultSessionConfiguration()) // 通信のタスクを生成. let task = session.dataTaskWithURL(url, completionHandler: { (data, response, err) in // 帰ってきたデータを文字列に変換. var result = NSString(data: data, encoding: NSUTF8StringEncoding)! println("myNSURLSession->\(result)") }) // タスクの実行. task.resume() // playgroundの場合↓のコメントアウトを消す // XCPSetExecutionShouldContinueIndefinitely(continueIndefinitely: true) }
参考UTL:NSURLSession のまとめ
Json
jsonを取得しパース
func myNSURLConnectionSync() { // 通信先のURLを生成. let url:NSURL = NSURL(string:"http://httpbin.org/get")! // リクエストを生成. let request:NSURLRequest = NSURLRequest(URL:url) // NSURLConnectionを使ってアクセス var response: NSURLResponse? var error: NSError? let data = NSURLConnection.sendSynchronousRequest(request, returningResponse: &response, error: &error) // var result = NSString(data: data!, encoding: NSUTF8StringEncoding)! // println("myNSURLConnectionSync->\(result)") // Jsonでパース let json:NSDictionary = NSJSONSerialization.JSONObjectWithData(data!, options: NSJSONReadingOptions.AllowFragments, error: nil) as! NSDictionary for (name, value) in json { println("key:\(name) value:\(value)") } }
GCD
GCDを使った非同期完了後の処理
func myNSURLConnectionAsync() { // 通信先のURLを生成. let url:NSURL = NSURL(string:"http://httpbin.org/get")! // リクエストを生成. let request:NSURLRequest = NSURLRequest(URL:url) let queue:NSOperationQueue = NSOperationQueue() // NSURLConnectionを使ってアクセス NSURLConnection.sendAsynchronousRequest(request, queue: queue, completionHandler:{ (response: NSURLResponse!, data: NSData!, error: NSError!) -> Void in // 帰ってきたデータを文字列に変換. var result = NSString(data: data, encoding: NSUTF8StringEncoding)! println("myNSURLConnectionAsync->\(result)") // GCD(Grand Central Dispatch) dispatch_async(dispatch_get_main_queue(), { // 完了後に実行する処理(self.tableView.reloadData()等) }) }) }
参考URL:[Swift 1.1] swiftで api を叩いて、JSONをパースして、表示させる方法 (xcodeは6.1, iOSは8.1)
Auth
cookie
Cookieの永続化
// Cookieの永続化 import UIKit class AppDelegate: UIResponder, UIApplicationDelegate { let SavedHTTPCookiesKey = "SavedHTTPCookies" func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { self.window = UIWindow(frame: UIScreen.mainScreen().bounds) self.loadCookie() return true } func applicationDidEnterBackground(application: UIApplication) { self.saveCookie() } func saveCookie() { let cookiesData:NSData = NSKeyedArchiver.archivedDataWithRootObject(NSHTTPCookieStorage.sharedHTTPCookieStorage().cookies!) NSUserDefaults.standardUserDefaults().setObject(cookiesData, forKey: SavedHTTPCookiesKey) } func loadCookie() { if let cookiesData:NSData = NSUserDefaults.standardUserDefaults().objectForKey(SavedHTTPCookiesKey) as? NSData { for cookie:NSHTTPCookie in NSKeyedUnarchiver.unarchiveObjectWithData(cookiesData) as [NSHTTPCookie] { NSHTTPCookieStorage.sharedHTTPCookieStorage().setCookie(cookie) } } } }
Custom URL Scheme
- Custom URL Schemeの処理をシンプルに書く
- URLの設計:
scheme://controller/action?query
- アプリ側は受け取ったcontrollerを元に、使用するcontrollerクラスを選び、そのcontrollerクラスにactionとqueryを渡す。
- 各actionの挙動については各々のcontrollerに任せる
- URLの設計:
import UIKit class AppDelegate: UIResponder, UIApplicationDelegate { func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject?) -> Bool { var result:Bool = true let schema:String = url.scheme! let host:String = url.host! let action:String = url.lastPathComponent! let query:String = url.query! return result } }
外部ライブラリ
- [Swift] HTTP通信OSS Alamofire 導入編
- [Swift] HTTP通信OSS Alamofire 応用編
- AFNetworkのSwift版 Alamofireを試してみた
- AFNetworking 2.0 のまとめ
- iOS開発でNetwork周りのManagerを作る (AFNetworking使用例)
- afnetworking-2-0-tutorial
- NSURLSession Tutorial
note
- 特にこだわりがないようであれば、Alamofireを使ったほうがよさそう(画像のキャッシュとか自分でコードを書く量が最終的に少なくてすみそう)
HTTPの確認に便利
- httpbin(1): HTTP Request & Response Service(jsonの確認にカナリ便利!)
参考URL
プッシュ通知 証明書 更新 手順
- プッシュ通知(APNs 証明書)の更新メモ
- Certificates, Identifiers & Profilesにて、証明書を更新する
- サーバーへ新しい証明書を配布する
更新手順
No. | 内容 | Development | Product | 備考 |
---|---|---|---|---|
0 | KeyChain(開発環境)->証明局に証明書(CertificateSigningRequest.certSigningRequest)を要求 | ◯ | ◯ | Development・Product共通、複数のアプリで共通で使う |
1 | Deveropper Center(Safari)->Certificates の作成 | ◯ | ◯ | アプリごと、No.0で要求した「CertificateSigningRequest.certSigningRequest」ファイルを使う |
2 | Deveropper Center(Safari)->Provisioning Profiles の更新 | △ | △ | アプリごとに対応必要。アプリのバージョンアップ時に必要 |
2 | Xcode(開発環境)->Buid Setting->Provisioning Profile のダウンロード | △ | △ | アプリごとに対応必要。アプリのバージョンアップ時に必要。新しくProvisioning Profileは作成されるが、特に更新しなくてもプッシュ通知は受信できる |
3 | KeyChain(開発環境)->p12ファイルを書き出す | ◯ | ◯ | アプリごとに対応必要。鍵ではなく証明書で書きだす |
- No.0
- No.3
手順
- Certificates の削除(更新前のCertificatesの有効期限が切れていない場合)・作成(Apple Push Notification service SSL)→作成後ダウンロード
- Provisioning Profiles の更新
- p12ファイルを書き出す(キーチェーンより「1.Certificates」で作成した証明書を選択し書き出し)
- p12ファイルの鍵を書き出す(キーチェーンより「1.Certificates」で作成した鍵を選択し書き出し)(サーバー側で必要であれば)
- p12をpemファイルへ変換する(サーバー側で必要であれば)
- サーバへp12またはpemファイルを配布
p12からpemへの変換コマンド
openssl pkcs12 -clcerts -nokeys -out apns-dev-cert.pem -in apns-dev-cert.p12 openssl pkcs12 -nocerts -out apns-dev-key.pem -in apns-dev-key.p12 openssl rsa -in apns-dev-key.pem -out apns-dev-key-noenc.pem cat apns-dev-cert.pem apns-dev-key-noenc.pem > apns-dev.pem
参考URL
プッシュ通知文字数(おまけ)
表示箇所 | iOS6 | iOS7 |
---|---|---|
ステータスバー(画面上部) | 全角22文字、半角40文字 | 全角35文字、半角64文字 |
ダイアログ(ロック画面に表示) | 全角57文字、半角108文字 | 全角58文字、半角114文字 |
通知センター | 全角43文字、半角154文字 | 全角58文字、半角114文字 |
iOS 開発 カメラ
- iOS(iPhone,iPad)のカメラ、写真の開発時のメモです
- カメラを起動したり、フォトアルバムから写真を選択してアプリに渡したりできます
- アプリで高解像度(1MB以上)の写真や画像を大量に表示するとメモリ不足でクラッシュします(100KB位まで解像度を下げるのがオススメ)
写真やムービーの撮影
- 2つのテクノロジー
- UIImagePickerController:カスタマイズ可能な基本的なユーザイン ターフェイス
- AVFoundation FW:UIKitと一緒に使用し完全にカスタマイズした静止画像やムービーのキャプチャ機能をアプリケーション向けに作成することができる
- どちらを採用する場合も、Assets Library FWを使用して、メディアのメタデータ(GPS位置情報など)を管理できる
保存済みの写真やムービーをユーザのフォトアルバムから選択
- 2つのテクノロジー
- UIImagePickerController:基本的なユーザインターフェイスを使用してユーザがフォトライブラリからメディアを選択できる
- Assets Library FW:UIKitと一緒に使用し完全にカスタマイズした写真やムービーのブラウザを作成できる
Image Picker Controllerを利用した写真やムービーの撮影
- カメラインターフェイス(UIImagePickerControllerクラスのインスタンス)をインスタンス化してモーダルモードで表示
- システムは、このカメラインターフェイスとユーザとのやり取りを管理(ユーザが写真やムービーを撮影、またはキャンセル)
- システムはImagePickerControllerのデリゲートオブジェクトのメソッドを呼び出し今度は、このメソッドがユーザの操作(たとえば、新規の写真を「カメラロール(Camera Roll)」アルバムに保存する)の結果を処理。(カメラインターフェイスを消去するのもデリゲート)
参考URL
iOS 保存領域 比較 〜NSUserDefaults, CoreData,Keychain,等〜
アプリ容量の制限について
アプリのストレージの最大容量は、おそらく制限なし(20M以上だとDL時にwifiが必要となる)
保存領域について
種類 | 説明 |
---|---|
アプリ領域 | アプリが自由に使え、他のアプリから参照できない領域 |
OS領域 | OSが使用するデータが保存されており、基本的にアプリから参照できない領域 |
共有領域 | メディアライブラリ(写真、音楽等)やイベント(カレンダー等)、連絡先は全てのアプリから参照することができる領域(アプリからできる内容は、書き込みと閲覧のみ) |
永続データの復元(比較)について
- 復元時にデータも復元するには、外部サーバーにデータを保存するかiCloudを利用しないと殆ど初期化される
- 保存領域が共有領域であれば、アプリ自体にiCloudの処理をいれなくても、共有領域のデータは復元できそう
種類 | 復元可否 | 備考 |
---|---|---|
アーカイブ | ☓ | オブジェクトをバイナリ形式に変換してからファイルに永続化(一番基礎的な技術) |
プロパティリスト | - | ユーザーが変更しないもの(定数)、plist |
NSUserDefaults | ☓ | ユーザーが変更するもの |
CoreData | ☓ | データ量多い |
Keychain | ◯ | パスワードや個人情報(暗号化されていない場合復元されない) |
アプリ内にDBとして保存したい場合realmがオススメです。(日本語のドキュメントもしっかりしていて、組み込みも簡単で、ブラウザも用意されています)
参考URL
Xcode デバッグ 値変更
概要
- Xcodeでデバック中に、変数の値や関数の実行する方法の説明です
- デバックエリアでLLDBコマンドを実行して確認します
- 値の変更はデバックエリアで「po 変数名 = 値」で変更できます
LLDBとは、Mac OS X上のXcodeでデフォルトのデバッガで、デスクトップとiOSデバイスとシミュレータ上のC、のObjective-CとC++、Swiftのデバッグをサポートしています。
- 参考URL:About LLDB and Xcode
実行方法
- デバックエリアを表示(メニューバー->View->Debug Area->Show Debug Area)
- 止めたいところにブレークポイント設定
- プログラムの実行
- デバックエリアでLLDBコマンドの実行
実行例
- 変数の値や関数の実行する場合は、「(lldb) po 変数名 または 関数名」を実行します
「po self.dynamicType」でプロジェクト名とクラス名を表示している例
LLDBコマンド一覧(一部抜粋)
省略形 | 内容 | 正式名 |
---|---|---|
po | 式の評価(poはオブジェクト、pは基本型も可) | expression -o -- |
h | ヘルプの表示 | help |
s | ステップイン | thread step-in |
c | 続きを実行(次のbreakPointまで) | process continue |
br l | breakPointを一覧表示 | breakpoint list |
bt | 現スレッドのバックトレース情報を表示 | thread backtrace |