Skip to content

Instantly share code, notes, and snippets.

@rdlabo

rdlabo/Ionic-book-contents.md Secret

Last active August 17, 2017 04:54
Show Gist options
  • Save rdlabo/1262adc83ef9994071e6f97f794892cd to your computer and use it in GitHub Desktop.
Save rdlabo/1262adc83ef9994071e6f97f794892cd to your computer and use it in GitHub Desktop.
Download ZIP
Ionic超入門 企画書 目次案
Raw
Ionic-book-contents.md

ご購入・ご利用前に必ずお読み下さい

本書の内容について

対象とする読者

必要とする開発環境

はじめに

HTML/CSS/JavaScriptがスマホアプリに

SPA（Single Page Application）という開発方法

jQueryプラグインの代わりに覚えてほしい「JavaScriptフレームワーク」

スマホアプリだけではなく、Webサイトもアプリになる？！

さぁ、アプリをつくろう

1.HTML5アプリ開発フレームワーク「Ionic」

1.1.なぜ、Ionicなのか

つい使いたくなるiOS/Android別の美しいUIデザイン

スマホアプリに変換する機能が標準装備

常に最先端の技術だから時代遅れにならない

1.2.Ionicを採用している国内プロダクト

ゲーマガ -- ドワンゴ株式会社

Hibee -- Excite株式会社

AreaInnovationReview -- （一社）エリア・イノベーション・アライアンス

2. Ionicのはじめ方と便利な機能

2.1. Ionicを簡単に使うためのツールをインストール

Node.jsをインストール

Ionic CLIをインストール

2.2. プロジェクトをつくろう

コマンドひとつで自動生成

プレビューを自動起動して開発をはじめよう

2.3. Ionicの便利な機能

Ionic CLIの便利なコマンド

iOS/Android別にプレビューしよう

オリジナルThemeをつくろう

圧倒的に書くコードを減らしてくれる技術紹介

2.4. アプリとしてビルドしよう

WEBアプリとしてビルド

ビルドしてiPhoneアプリとして動かそう

ビルドしてAndroidアプリとして動かそう

コラム「早く上達する4つの方法」

1) IDEを使って、らくらく開発

2) エラーは修正方法まで教えてくれる

3) 公式ドキュメントとGoogle翻訳を使いこなそう

公式ドキュメントには大体のことが書いてある

英語が読めない人でも英語が読めるGoogle翻訳！

3. Ionicの基本とはじめての開発

3.1. Ionicの基本

プロジェクトフォルダはこうなってる

index.htmlと呼び出し順をみてみよう

appフォルダで基本を抑えよう

3.2. チュートリアル「タスクリストアプリをつくってみよう」　難易度★☆☆☆☆

ステップ1　HTMLテンプレートを変更すると画面が変わる

ステップ2　HTMLに直接書かない値を表示してみよう

ステップ3　タスク一覧を別ページに分割してみよう

ステップ4　タスクの変更・削除も思ったより簡単？！

ステップ5　Ionic Strageをつかってセキュリティを向上

コラム「イベントとLifeCycle」

ユーザのいろいろな操作に反応させよう

ページの表示から離脱まで

UIコンポーネントをつかってイベントを予約

4. 外部APIをつかってアプリを便利にしよう

4.1. 外部APIの形式とその活用

REST APIとjsonという共通方式

クロスドメインの注意と制限

4.2. チュートリアル「WordPressを表示するアプリをつくろう」　難易度★★☆☆☆

ステップ1　開発テンプレートをダウンロード

ステップ2　記事一覧を取得して表示しよう

ステップ3　記事詳細ページを作成しよう

ステップ4　Google Analyticsを設定してアクセス解析

5. きれいなコードで、明日の自分を助けよう！

5.1. 書いたコードをきれいにする「コードリファクタリング」

共通する処理は別々に書かずにまとめよう

オリジナルタグをつくって同じUIを共通化

型を共通化することでミスを減らそう

5.2. チュートリアル「コードリファクタリング」難易度★★★☆☆

ステップ１　Providerを使って脱コピペ！

ステップ２　子Componentsでオリジナルタグ作成

ステップ３　型を共通化して使いまわそう

6. スマホアプリ開発実践

6.1. アプリストアで販売するための設定をしよう

アプリ名とバージョンを設定

アプリアイコンとロード画面を登録

6.2. チュートリアル「スマホアプリの機能をつけよう」　難易度★★★★☆

ステップ１　ソーシャルシェアボタンをつけよう

ステップ２　カメラ機能をつけよう

ステップ３　エミュレーター/実機で動作確認

7. テスト自動化実践

7.1. 変更する毎にブラウザ確認を卒業！

今日書くテストは、明日のあなたを助ける

karmaとjasmineを使ってテスト自動化

7.2. チュートリアル「テスト自動化で動作結果を確認」　難易度★★★★★

ステップ１　環境設定

ステップ２　エラーチェックのための文言テスト

ステップ３　返り値をチェックして予期せぬエラーを防ぐ

終わりに

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment