Angular8におけるBootstrap4とFontAwesomeの統合方法



# _Angular8におけるBootstrap4とFontAwesomeの統合方法_  

by **_Shuichi Ohtsu_** 

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


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

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

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



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

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

ここでは、Angular8においてBootstrap4とFontAwesomeを統合する方法についてご紹介します。

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

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

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

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

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

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

そのＵＲＬは、

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

です。


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


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

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


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Fontawesome_03.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_Fontawesome_04.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_Fontawesome_05.png" width= "640" >



VSCodeが起動しましたら、


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


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



そして、

`npm i`

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


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



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

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

`ng s -o`

と入力します。


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



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


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

ＯＫです。

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

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

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

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

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


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


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


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



次に

`npm i`

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


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



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

`ng s -o`

と入力します。


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




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


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



ＯＫです。


## FontAwesomeのインストール

次に、`ctrl+c`で一旦ローカルサーバを停止させ、FontAwesomeをインストールします。

ターミナル・ウィンドウで、`npm i @fortawesome/fontawesome-free`と入力します。


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


@の次の文字列は、`fontawesome`ではなく、`fortawesome`であることに注意してください。

次に、_package.json_ファイルを開き、インストールされていることを確認します。また、`@fortawesome/fontawesome-free`の文字列もコピーしておきます。

次に、_angular.json_ファイルを開き、project - architect - build - stylesの項にインストールしたFontAwesomeを追加します。

具体的には、

`./node_modules/@fortawesome/fontawesome-free/css/all.min.css`

の一行を追加します。


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



## Bootstrap4のボタンを追加

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

そのＵＲＬは、

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

です。


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



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


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


チェックボックス・ボタンのサンプルが表示されていますので、まずこのボタンをAngular8のプロジェクトに取り込み、そのボタンの中に、FontAwesomeのアイコンを表示させることにします。

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

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


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



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

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

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



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




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

追加が必要なのは、model部分のみですので、これをコピーします。



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




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

コピーしたmodel部分をここに貼り付けます。



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


次に、_app.module.ts_ファイルを開き、`FormsModule`をインポートしておきます。



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




## チェックボックス・ボタンの表示

ここで、再度ローカルサーバを起動し、チェックボックス・ボタンが表示されるかどうかを確認します。

`ng s -o`

と入力します。



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


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


ＯＫです。

## FontAwesomeのアイコンの追加

次に、各ボタンの中にFontAwesomeのアイコンを入れていきます。

VSCodeに戻り、_app.component.html_ファイルを開きます。

プルダウン及びプルアップ関連の部分を削除してしまいます。

まず、左のボタンにGoogleのアイコンを入れてみます。

その方法は、簡単です。

ボタンのテキスト部分に、`<i class="fab fa-google"></i>`を挿入するだけです。


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



ブラウザで確認します。


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



ＯＫです。


VSCodeに戻り、次にTwitterとFacebookのアイコンを挿入します。


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


ブラウザで確認します。


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


ＯＫです。

次に、leftやmiddleなどの文字列がおかしいので、Googleなどに変更します。

VSCodeに戻り、_app.component.ts_ファイルを開き、modelの定義を変更します。


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



また、_app.component.html_ファイルを開き、該当部分を変更しておきます。


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


ブラウザで確認します。


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


ＯＫです。

最後に、ボタンの色も変更しておきます。

VSCodeに戻り、_app.component.html_ファイルを開き、ボタンのクラス名を変更し、色を変えます。


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



ブラウザで確認します。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Fontawesome_35.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/>