6 章付録マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N

Size: px

Start display at page:

Download "6 章付録マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N"

ともあきよせ
5 years ago
Views:

1 2017/02/23 開発環境バージョンアップ対応手順書はじめに本書ではソフトウェアのインストール時にバージョンを指定することで書籍の記述との違いや不具合を最小限に抑えてきました今月 Angular CLI の指定バージョン beta.17 の配布が終了したため新しいバージョンへの対応を行いますこの手順書は本書が現時点で最新の開発環境へ対応する方法をまとめたものです不具合発生への対応今回指定する最新バージョンもいずれは配布終了になりますまたソフトウェアのバージョンを指定してもその依存ソフトのバージョンが変り不具合が発生することがありますこれらの不具合に対応するひな型プロジェクト (test01) を作成しました必要なモジュールや ng コマンドをプロジェクト内に内蔵していますので指定バージョンのソフトウェアの配布が終了しても本書の手順に沿った操作が継続できます test01 は完成版ダウンロードファイルに含まれます今回対応する開発環境 Angular CLI beta.32.3 Bootsstrap ng2-bootstrap Intl WebStorm Google Chrome (64 ビット ) Node.js git for Windows 開発環境バージョンアップの影響 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.

2 6 章付録マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶Node.js version ダウンロードサイト ❶Git for Windows ダウンロードサイト ❶Angular CLI のインストールコマンド npm パスの自動設定が行われますので ➎➏ の手順は不要です新規プロジェクト作成手順の変更 ❶~➏の手順は下記と差し替えます 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.$

3 3. プロンプトが表示されると新規プロジェクト生成完了です 10 分間以上かかることもあります 4. WebStorm を起動しますスタート画面中央の Open をクリックします 5. ファイル選択ダイアログが表示されます新規作成したプロジェクトのフォルダを選択します C:\Users\user01\WebstormProjects\test01 以降の手順は書籍 ➐ 以降を参照してください新規プロジェクト作成手順の変更は Angular CLI のインストール先フォルダが beta.29 より変更になった影響です現時点で beta.29 以降では WebStorm で新規プロジェクトウィザードは正しく動作しません WebStorm の次バージョンはこの変更に対応しているためこの手順への差し替え不要です本書に記載の手順で新規プロジェクトが生成できます 5 章の変更新規プロジェクトの作成手順変更この手順書の 3 章の変更を参照してくださいプロジェクト名は calcapp とします angular-cli.json の設定を styles.css に変更 bootstrap の CSS ファイル設定の記述場所を angular-cli.jsons から styles.css 内に変更します Bootstrap の CSS ファイルをビルド対象に追加するため styles.css の編集を行い 3

4 ますコンポーネントごとに指定する CSS はコンポーネント内でのみ適応可能ですがここに設定するとアプリ全体に適用できます 1. WebStorm ストームのプロジェクトエクスプローラで styles.css ファイルをダブルクリックしますこのファイルは src フォルダにあります 2. 空白の CSS ファイルの内容を以下のように変更します変更後 /* bootstrap css のインポート url("../node_modules/bootstrap/dist/css/bootstrap.min.css"); キャッシュ対象ファイルの確認内容変更ビルド出力されるファイルが 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-14 calcapp.appcache の変更 CACHE MANIFEST #ver CACHE:./favicon.ico 4

5 ../inline.bundle.js../styles.bundle.js../main.bundle.js../vendor.bundle.js../polyfills.bundle.js 6 章の変更新規プロジェクトの作成手順変更この手順書の 3 章の変更を参照してくださいプロジェクト名は cloudapp とします追加ライブラリのバージョン変更 ng2-bootstrap の新バージョンを指定します ❸ 以下のコマンドを入力します npm install --save intl@1.2.5 bootstrap@3.3.7 ng2-bootstrap@ 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 のインポート url("../node_modules/bootstrap/dist/css/bootstrap.min.css"); 共通 CSS 内容変更 bootstrap css をで共通 CSS(styles.css) に bootstrap の記述が追加済ですのでリスト 6-9 は以下になります 5

6 /* bootstrap css のインポート 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; 外部モジュール登録内容変更 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

7 import {Ng2BootstrapModule from 'ng2-bootstrap'; import {DetailComponent from 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 インポート url("waiticon.css"); 変更履歴 2017/02/23 不具合発生への対応付録の変更を追加 7

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章 2017/04/07 Angular4.0 バージョンアップ対応手順書 Angular2 によるモダン Web 開発 TypeScript を使った基本プログラミング ( 以下本書と記載します ) の対象である Angular2 は 2017 年 3 月 23 日にメジャーバージョンアップを行い Angular4.0 になりました Angular4.0 への対応をまとめたのがこの手順書です Angular