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



# _Angular8におけるBootstrap4 Carouselの設定方法_  

by **_Shuichi Ohtsu_** 

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


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

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

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



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

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

以前、_Angular5におけるBootstrap4 Carouselの使い方_<https://youtu.be/Wgc1cPRdQd0>をご紹介いたしましたが、だいぶAngularの環境も変わりましたので、今回は、Angular8におけるBootstrap4 Carouselの利用方法をご紹介いたします。

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

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

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

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

## GitHubからのプロジェクト・ソースのダウンロード

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

そのＵＲＬは、

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

です。

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

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

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

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


## プロジェクトの生成

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

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

と入力します。

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


## Visual Studio Codeの起動

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

`cd ng8-bootstrap4-carousel`


Visual Studio Codeを起動します。

`code .`

と入力します。


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

VSCodeが起動しましたら、

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

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

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


そして、

`npm i`

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

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




## ソースのバックアップのためのgulpのローカル・インストール

ここで、随時フルソースをバックアップするために、_gulp_をローカルにインストールしておきます。

`npm i gulp`

と入力します。なお、gulpをグローバルにインストールされていない方は、予め `npm i -g gulp`でインストールしておいてください。


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

次に、この段階でのフルソースをバックアップしておきます。

`gulp -m Initial`

と入力します。


-m オプションは、バックアップ・ディレクトリ名に追加するテキストです。

ここでは、最初の段階でのバックアップを明示しています。


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



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


この段階で、プロジェクトが起動できるかをチェックしておきます。

ターミナル・ウィンドウで、

`ng s -o`

と入力します。


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



## Carouselの表示

ブラウザが自動的に開き、Carouselが表示されます。


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



マウスのポインタを画面上におきますと、画面の遷移が停止されます。


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



画面上の_>_アイコンをクリックすると次々にイメージが遷移します。


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


画面上の_<_アイコンをクリックした場合には、戻る形でイメージが遷移します。


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


## Carouselの設定変更

次に、Carouselの表示の設定を変更してみます。

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



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



現在の設定は、イメージの遷移が2秒ごとになっていますが、この設定を1秒ごとに変更してみます。



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



## ブラウザでの確認

ブラウザで、

`http://localhost:4200`

を再度表示しますと、イメージが１秒ごとに切り替わっていることが確認できます。


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


ＯＫです。


## Carouselの設定変更

次に、Carouselの表示の設定を10秒ごとに変更してみます。

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

現在の設定は、イメージの遷移が1秒ごとになっていますが、この設定を10秒ごとに変更してみます。


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



## ブラウザでの確認

ブラウザで、

`http://localhost:4200`

を再度表示しますと、イメージが１0秒ごとに切り替わっていることが確認できます。


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