1
(C)2017 Staffnet Inc. All rights reserved.
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 の適用場所2
(C)2017 Staffnet Inc. All rights reserved.
マニフェストファイルの設定 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
3
(C)2017 Staffnet Inc. All rights reserved.
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 の編集を行い
4
(C)2017 Staffnet Inc. All rights reserved.
ます。コンポーネントごとに指定する 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
5
(C)2017 Staffnet Inc. All rights reserved.
../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 は以下になります。
6
(C)2017 Staffnet Inc. All rights reserved.
/* 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";
7
(C)2017 Staffnet Inc. All rights reserved.
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");