Angular8におけるBootstrap4のTabsetの利用方法



# Angular8におけるBootstrap4のTabsetの利用方法


2019.7.16


by **_Shuichi Ohtsu_** 

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_00.png" width= "640" >


フルソースコード
<https://github.com/Ohtsu/ng8-bootstrap4-tabset>

ビデオ解説(日本語）
<https://youtu.be/IcL_4Xo2lz0>

ビデオ解説(英語）
<https://youtu.be/mO7jVomLvEQ>



--------------------

## プロジェクトの作成方法について

ここでは、Angular8におけるBootstrap4のTabsetの利用方法についてご紹介します。

なお、プロジェクト作成の段階からのBootstrap4の設定方法につきましては、すでに、_Angular8におけるBootstrap4環境の設定方法_<https://youtu.be/gFxuSi4IZjM>を公開しておりますので、そちらをご覧ください。

今回は、そうした設定済みプロジェクトをGitHubからダウンロードし、さらにそれにTabset機能を組み込む形で進めていきます。

プロジェクトの内容については、そのフルソースコードをご覧ください。

--------------------

## Bootstrap4を組み込んだプロジェクト・ソースのGitHubからのダウンロード

まず、GitHubからBootstrap4を組み込んだプロジェクトのフルソースをダウンロードします。

そのＵＲＬは、

`https://github.com/Ohtsu/ng8-bootstrap4-initial`

です。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_01.png" width= "640" >

ページが表示されましたら、右側の緑の_Clone or download_ボタンをクリックします。

するとダウンロード用のアドレスが表示されますので、右側のコピーアイコンをクリックし、そのアドレスをコピーしておきます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_02.png" width= "640" >


## プロジェクトの生成

コマンド・プロンプトを開き、適当なディレクトリに移動した後、そのディレクトリで、`git clone `に続けて、コピーしたアドレスを貼り付けます。

`git clone https://github.com/Ohtsu/ng8-bootstrap4-initial.git`

と入力します。

するとダウンロードが開始されます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_03.png" width= "640" >


## Visual Studio Codeの起動

次に、生成されたプロジェクトのディレクトリに入り、

`cd ng8-bootstrap4-initial`


Visual Studio Codeを起動します。

`code .`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_04.png" width= "640" >



VSCodeが起動しましたら、


`ctrl+@`キーを押し、ターミナル・ウィンドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_05.png" width= "640" >


そして、

`npm i`

と入力し、プロジェクトに必要なライブラリをインストールします。

このプロセスには若干時間を要します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_06.png" width= "640" >



## プロジェクトの起動の確認

次に、プロジェクトが起動できるかどうかを確認します。

`ng s -o`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_07.png" width= "640" >



ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_08.png" width= "640" >



ＯＫです。

## Gulpによるバックアップの作成

この段階で、変更前ソースのバックアップを取っておきます。但し、関連ライブラリまでバックアップをする必要はないので、`node_modules`以下のファイルは除外することにします。

このようなバックアップを行う`gulpfile.js`をすでにプロジェクトに含めてありますので、それを実行します。

`gulp -m Intial`

と入力します。`-m`オプション以下の文字は、作成したプロジェクト名に追加する文字列です。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Dialog_09.png" width= "640" >



次に、Tabsetテスト用のプロジェクトも作成しておきます。

`gulp -m ForTabset`

と入力します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_01.png" width= "640" >



次にファイルエクスプローラーを開き、作成したTabsetテスト用のプロジェクトをディレクトリごとコピーし、適当なディレクトリ内にペーストします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_02.png" width= "640" >



そして、ディレクトリ名を`ng8-bootstrap4-tabset`に変更しておきます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_03.png" width= "640" >



次に、コマンド・プロンプトを開き、このディレクトリに移動します。

そして

`code .`

と入力して、VSCodeを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_04.png" width= "640" >


VSCodeが起動しましたら、


`ctrl+@`キーを押し、ターミナル・ウィンドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_05.png" width= "640" >



## プロジェクト名の変更

次に、プロジェクトの内容を変更していきます。

まず、プロジェクト名を変更します。

_package.json_ファイルを開くと、プロジェクト名が`ng8-bootstrap4-initial`になっているのがわかります。これを`ng8-bootstrap4-tabset`に変更します。

左の検索アイコンをクリックし、プロジェクト全体のソースを対象として置換を行います。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_06.png" width= "640" >



次に、パスカルケース、すなわち`-`ではなく大文字で区切っているものも存在しますので、`Ng8Bootstrap4Initial`を`Ng8Bootstrap4Tabset`に変更しておきます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_07.png" width= "640" >


次に

`npm i`

と入力し、再度ライブラリをインストールします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_08.png" width= "640" >


このプロセスには若干時間を要します。


### npm audit fix の実行

ここでパッケージの脆弱性に関するウォーニングが表示されましたので、パッケージの修正を行います。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_09.png" width= "640" >

`npm audit fix`

と入力します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_10.png" width= "640" >

次に再度

`npm i`

と入力し、もう一度ライブラリをインストールします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_11.png" width= "640" >


パッケージの脆弱性に関するウォーニングが消えました。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_12.png" width= "640" >

ＯＫです。

### プロジェクト起動のチェック


また、プロジェクトが起動できるかもチェックします。

`ng s -o`

と入力します。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_13.png" width= "640" >



ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_14.png" width= "640" >



ＯＫです。

## Tabsetを追加

次に_ng-bootstrap_のサイトを開き、Tabsetのサンプル・プログラムを参照します。

そのＵＲＬは、

`https://ng-bootstrap.github.io/#/home`

です。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_15.png" width= "640" >

ここで、`Demo`ボタンをクリックし、左側のメニューから`Tabset`をクリックします。


そして_Global configulation of tabs_を表示します。
この設定を取り込むことにします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_16.png" width= "640" >


まず、右上の`Code`ボタンをクリックし、そのソースを表示します。

まずＨＴＭＬ文をコピーします。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_17.png" width= "640" >

VSCodeに戻り、`src/app`内の_app.component.html_ファイルを開きます。

コピーしたＨＴＭＬをここに貼り付けます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_18.png" width= "640" >


また、プルダウン及びプルアップ関連の部分をコメントアウトします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_19.png" width= "640" >


ブラウザに戻り、TypeScriptのファイルを開きます。


まず追加が必要なimport部分をピーします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_20.png" width= "640" >


VSCodeに戻り、`src/app`内の_app.component.ts_ファイルを開きます。
コピーしたimport部分をここに貼り付けます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_21.png" width= "640" >



ブラウザに戻り、providers部分をコピーします。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_22.png" width= "640" >

VSCodeに戻り、_app.component.ts_ファイルを開き、providers部分をここに貼り付けます。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_23.png" width= "640" >

ブラウザに戻り、クラス内の主要部分をコピーします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_24.png" width= "640" >


VSCodeに戻り、_app.component.ts_ファイルを開き、ここに貼り付けます。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_25.png" width= "640" >

## Tabsetの表示

ここで、ブラウザに戻り、http://localhost:4200を開きます。

Tabsetが表示されました。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_26.png" width= "640" >

ＯＫです。

## Tabのスタイルの変更

この表示ですと、タブが通常のボタンのように表示されていますので、標準のタブのスタイルに変更することにします。


VSCodeに戻り、_app.component.ts_ファイルを開き、

`config.type = 'tabs'`

と変更します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_27.png" width= "640" >

ブラウザに戻り、表示を確認すると、標準のタブのスタイルになりました。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_28.png" width= "640" >

ＯＫです。

## 左寄せ

次に、タブが中央に表示されていますので、左寄せで表示することにします。


VSCodeに戻り、_app.component.ts_ファイルを開き、

`config.justify = 'start'`

に変更します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_29.png" width= "640" >


ブラウザに戻り、表示を確認すると、タブが左寄せで表示されるようになりました。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_30.png" width= "640" >


ＯＫです。

## タブの垂直表示

これまでタブが水平に連なるように表示されていましたが、これを垂直方向に変更にしてみます。

VSCodeに戻り、_app.component.ts_ファイルを開き、

`config.orientation = 'vertical'`

を追加します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_31.png" width= "640" >


ブラウザに戻り、表示を確認すると、タイトルが垂直に連なるようになりました。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_32.png" width= "640" >


## ボタンへの変更

しかし、このままですとタイトルが分かりづらいので、ボタン形式に変更します。

VSCodeに戻り、_app.component.ts_ファイルを開き、


`config.type = 'pills'`

に変更します。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_33.png" width= "640" >

ブラウザに戻り、表示を確認すると、ボタン形式に変更になりました。

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Tabset_34.png" width= "640" >



ＯＫです。




## Reference

- "Angular8におけるBootstrap4環境の設定方法(Youtube)", 
<https://youtu.be/gFxuSi4IZjM>


- "How to set up Bootstrap 4 environment in Angular 8", 
<https://youtu.be/NoSkIVvf5o8>

- "Angular8におけるBootstrap4環境の設定方法(Qiita)", 
<https://qiita.com/SOhtsu/items/62253bb2309c9a4809fd>

- "Angular 7 Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1]", 
<https://www.techiediaries.com/angular-bootstrap-ui/>

- "Angular5, Angular6, Angular7 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>

- "Angular5, Angular6, Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>