Angular8におけるBootstrap4とFontAwesomeの統合方法
by Shuichi Ohtsu
フルソースコード
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を組み込んだプロジェクトのフルソースをダウンロードします。
そのURLは、
https://github.com/Ohtsu/ng8-bootstrap4-initial
です。
ページが表示されましたら、右側の緑のClone or downloadボタンをクリックします。
するとダウンロード用のアドレスが表示されますので、右側のコピーアイコンをクリックし、そのアドレスをコピーしておきます。
プロジェクトの生成
コマンド・プロンプトを開き、適当なディレクトリに移動した後、そのディレクトリで、git clone
に続けて、コピーしたアドレスを貼り付けます。
git clone https://github.com/Ohtsu/ng8-bootstrap4-initial.git
と入力します。
するとダウンロードが開始されます。
Visual Studio Codeの起動
次に、生成されたプロジェクトのディレクトリに入り、
cd ng8-bootstrap4-initial
Visual Studio Codeを起動します。
code .
と入力します。
VSCodeが起動しましたら、
ctrl+@
キーを押し、ターミナル・ウィンドウを開きます。
そして、
npm i
と入力し、プロジェクトに必要なライブラリをインストールします。
プロジェクトの起動の確認
次に、プロジェクトが起動できるかどうかを確認します。
ng s -o
と入力します。
ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。
OKです。
プロジェクト名の変更
次に、プロジェクトの内容を変更していきます。
まず、プロジェクト名を変更します。
package.jsonファイルを開くと、プロジェクト名がng8-bootstrap4-initial
になっているのがわかります。これをng8-bootstrap4-fontawesome
に変更します。
左の検索アイコンをクリックし、プロジェクト全体のソースを対象として置換を行います。
次に、パスカルケース、すなわち-
ではなく大文字で区切っているものも存在しますので、Ng8Bootstrap4Initial
をNg8Bootstrap4Fontawesome
に変更しておきます。
次に
npm i
と入力し、再度ライブラリをインストールします。
また、プロジェクトが起動できるかもチェックします。
ng s -o
と入力します。
ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。
OKです。
FontAwesomeのインストール
次に、ctrl+c
で一旦ローカルサーバを停止させ、FontAwesomeをインストールします。
ターミナル・ウィンドウで、npm i @fortawesome/fontawesome-free
と入力します。
@の次の文字列は、fontawesome
ではなく、fortawesome
であることに注意してください。
次に、package.jsonファイルを開き、インストールされていることを確認します。また、@fortawesome/fontawesome-free
の文字列もコピーしておきます。
次に、angular.jsonファイルを開き、project - architect - build - stylesの項にインストールしたFontAwesomeを追加します。
具体的には、
./node_modules/@fortawesome/fontawesome-free/css/all.min.css
の一行を追加します。
Bootstrap4のボタンを追加
次にng-bootstrapのサイトを開き、ボタンのサンプル・プログラムを参照します。
そのURLは、
https://ng-bootstrap.gitgub.io/#/home
です。
ここで、Demo
ボタンをクリックし、左側のメニューからButtons
をクリックします。
チェックボックス・ボタンのサンプルが表示されていますので、まずこのボタンをAngular8のプロジェクトに取り込み、そのボタンの中に、FontAwesomeのアイコンを表示させることにします。
まず、右上のCode
ボタンをクリックし、そのソースを表示します。
まずHTML文をコピーします。
VSCodeに戻り、src/app
内のapp.component.htmlファイルを開きます。
プルダウン及びプルアップ関連の部分をコメントアウトします。
コピーしたHTMLをここに貼り付けます。
ブラウザに戻り、TypeScriptのファイルを開きます。
追加が必要なのは、model部分のみですので、これをコピーします。
VSCodeに戻り、src/app
内のapp.component.tsファイルを開きます。
コピーしたmodel部分をここに貼り付けます。
次に、app.module.tsファイルを開き、FormsModule
をインポートしておきます。
チェックボックス・ボタンの表示
ここで、再度ローカルサーバを起動し、チェックボックス・ボタンが表示されるかどうかを確認します。
ng s -o
と入力します。
OKです。
FontAwesomeのアイコンの追加
次に、各ボタンの中にFontAwesomeのアイコンを入れていきます。
VSCodeに戻り、app.component.htmlファイルを開きます。
プルダウン及びプルアップ関連の部分を削除してしまいます。
まず、左のボタンにGoogleのアイコンを入れてみます。
その方法は、簡単です。
ボタンのテキスト部分に、<i class="fab fa-google"></i>
を挿入するだけです。
ブラウザで確認します。
OKです。
VSCodeに戻り、次にTwitterとFacebookのアイコンを挿入します。
ブラウザで確認します。
OKです。
次に、leftやmiddleなどの文字列がおかしいので、Googleなどに変更します。
VSCodeに戻り、app.component.tsファイルを開き、modelの定義を変更します。
また、app.component.htmlファイルを開き、該当部分を変更しておきます。
ブラウザで確認します。
OKです。
最後に、ボタンの色も変更しておきます。
VSCodeに戻り、app.component.htmlファイルを開き、ボタンのクラス名を変更し、色を変えます。
ブラウザで確認します。
OKです。
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/