2017/02/23 開発環境バージョンアップ対応手順書 はじめに本書では ソフトウェアのインストール時にバージョンを指定することで 書籍の記述との違いや不具合を最小限に抑えてきました 今月 Angular CLI の指定バージョン 1.0.0-beta.17 の配布が終了したため 新しいバージョンへの対応を行います この手順書は 本書が現時点で最新の開発環境へ対応する方法をまとめたものです 不具合発生への対応今回指定する最新バージョンも いずれは配布終了になります また ソフトウェアのバージョンを指定しても その依存ソフトのバージョンが変り不具合が発生することがあります これらの不具合に対応するひな型プロジェクト (test01) を作成しました 必要なモジュールや ng コマンドをプロジェクト内に内蔵していますので 指定バージョンのソフトウェアの配布が終了しても本書の手順に沿った操作が継続できます test01 は完成版ダウンロードファイルに含まれます 今回対応する開発環境 Angular CLI 1.0.0-beta.32.3 Bootsstrap 3.3.7 ng2-bootstrap 1.3.3 Intl 1.2.5 WebStorm 216.3.3 Google Chrome 56.0.2924.87(64 ビット ) Node.js 6.9.5 git for Windows 2.11.1 開発環境バージョンアップの影響 1 章 変更なし 2 章 変更なし 3 章 ソフトウェアのバージョン指定新規プロジェクトの作成手順 4 章 変更なし 5 章 新規プロジェクトの作成手順 Bootstrap CSS の適用場所 1
6 章 付録 マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります 3.2.2-❶Node.js version 6.9.5 ダウンロードサイト https://nodejs.org/dist/v6.9.5/ 3.2.3-❶Git for Windows 2.11.1 ダウンロードサイト https://github.com/git-for-windows/git/releases/tag/v2.11.1.windows.1 3.2.4-❶Angular CLI のインストールコマンド npm install @angular/cli@1.0.0-beta.32.3 パスの自動設定が行われますので 3.2.4-➎➏ の手順は不要です 3.3.1.1 新規プロジェクト作成手順の変更 ❶~➏の手順は 下記と差し替えます 1. コマンドプロンプト画面で 下記のフォルダフォルダへ移動します C:\Users\user01\WebstormProjects 2. コマンドプロンプト画面に ng new コマンドを入力します このコマンドで現在のフォルダ直下の 新規プロジェクトフォルダ test01 が生成されます ng new < 作成するプロジェクト名 > ng new test01 2
3. プロンプトが表示されると 新規プロジェクト生成完了です 10 分間以上かかること もあります 4. WebStorm を起動します スタート画面中央の Open をクリックします 5. ファイル選択ダイアログが表示されます 新規作成したプロジェクトのフォルダを選択します C:\Users\user01\WebstormProjects\test01 以降の手順は 書籍 3.3.1-➐ 以降を参照してください 新規プロジェクト作成手順の変更は Angular CLI のインストール先フォルダが beta.29 より変更になった影響です 現時点で beta.29 以降では WebStorm で新規プロジェクトウィザードは正しく動作しません WebStorm の次バージョンは この変更に対応しているため この手順への差し替え不要です 本書に記載の手順で新規プロジェクトが生成できます 5 章の変更 5.2.1.1 新規プロジェクトの作成手順変更この手順書の 3 章の変更を参照してください プロジェクト名は calcapp とします 5.2.1.3 angular-cli.json の設定を styles.css に変更 bootstrap の CSS ファイル設定の記述場所を angular-cli.jsons から styles.css 内に変更します Bootstrap の CSS ファイルをビルド対象に追加するため styles.css の編集を行い 3
ます コンポーネントごとに指定する CSS はコンポーネント内でのみ適応可能ですが ここに設定するとアプリ全体に適用できます 1. WebStorm ストームのプロジェクトエクスプローラで styles.css ファイルをダブルクリックします このファイルは src フォルダにあります 2. 空白の CSS ファイルの内容を以下のように変更します 変更後 /* bootstrap css のインポート */ @import url("../node_modules/bootstrap/dist/css/bootstrap.min.css"); 5.4.3.1 キャッシュ対象ファイルの確認内容変更ビルド出力されるファイルが 2 個追加され 名称も一部変更になりました リスト 5-13 index.html の確認 // この行は中央付近に表示されます <link rel="icon" type="image/x-icon" href="favicon.ico"> // 以下の記述は 下から 2 行目に 1 行で表示されます <script type="text/javascript" src="inline.bundle.js"></script> <script type="text/javascript" src="polyfills.bundle.js"></script> <script type="text/javascript" src="styles.bundle.js"></script> <script type="text/javascript" src="vendor.bundle.js"></script> <script type="text/javascript" src="main.bundle.js"></script> 5.4.3.2 マニフェストファイルの作成内容変更 キャッシュ対象となる出力ファイルが変更になったため マニフェストファイルの内容 も変更します リスト 5-14 calcapp.appcache の変更 CACHE MANIFEST #ver 1.0.0 CACHE:./favicon.ico 4
../inline.bundle.js../styles.bundle.js../main.bundle.js../vendor.bundle.js../polyfills.bundle.js 6 章の変更 6.2.2.1 新規プロジェクトの作成手順変更 この手順書の 3 章の変更を参照してください プロジェクト名は cloudapp とします 6.2.2.2 追加ライブラリのバージョン変更 ng2-bootstrap の新バージョンを指定します ❸ 以下のコマンドを入力します npm install --save intl@1.2.5 bootstrap@3.3.7 ng2-bootstrap@1.3.3 5.2.1.3 angular-cli.json の設定を styles.css に変更 bootstrap の CSS ファイル設定の記述場所を angular-cli.jsons から styles.css 内に変更します Bootstrap の CSS ファイルをビルド対象に追加するため styles.css の編集を行います コンポーネントごとに指定する CSS はコンポーネント内でのみ適応可能ですが ここに設定するとアプリ全体に適用できます 3. WebStorm ストームのプロジェクトエクスプローラで styles.css ファイルをダブルクリックします このファイルは src フォルダにあります 4. 空白の CSS ファイルの内容を以下のように変更します 変更後 /* bootstrap css のインポート */ @import url("../node_modules/bootstrap/dist/css/bootstrap.min.css"); 6.4.1.4 共通 CSS 内容変更 bootstrap css を 5.2.1.3 で共通 CSS(styles.css) に bootstrap の記述が追加済ですので リスト 6-9 は以下になります 5
/* bootstrap css のインポート */ @import url("../node_modules/bootstrap/dist/css/bootstrap.min.css"); /* 見やすさのために横幅を制限 */ html { max-width: 1000px; margin-right:auto; margin-left:auto; background-color: #dae3f3; /* ヘッダーバーとの重なりの調整 */ body{ padding-top:50px; background-color: #dae3f3; font-family: sans-serif; /* スライドインデックスアイコンを上部に表示 */ ol.carousel-indicators{ top:10px!important; /* スライドインデックスアイコンの枠線を黒 */ ol.carousel-indicators li{ border-color: black!important; 6.1.4.5 外部モジュール登録内容変更 ng2-bootstrap の仕様変更に対応するため 網掛けをした 2 カ所の変更が必要です import { BrowserModule from '@angular/platform-browser'; import { NgModule from '@angular/core'; import { FormsModule from '@angular/forms'; import { AppComponent from './app.component'; import {JsonpModule from '@angular/http'; import {HttpService from "./http.service"; 6
import {Ng2BootstrapModule from 'ng2-bootstrap'; import {DetailComponent from './detail.component'; @NgModule({ declarations: [ AppComponent, DetailComponent ], imports: [ BrowserModule, FormsModule, JsonpModule, Ng2BootstrapModule.forRoot() ], providers: [HttpService], bootstrap: [AppComponent] ) export class AppModule { 付録の変更 A.5.3.Wait アイコンの Angular2 アプリへの組み込み記述の変更 waiticon の CSS ファイル設定の記述場所を angular-cli.json から src/styles.css 内に変更します リスト A-19 styles.css の修正 /* アニメーションアイコン CSS インポート */ @import url("waiticon.css"); 変更履歴 2017/02/23 不具合発生への対応 付録の変更を追加 7