Angular8におけるBootstrap4ベースのng-bootstrapのTimepickerの利用方法

# Angular8におけるBootstrap4ベースのng-bootstrapのTimepickerの利用方法


2019.7.14


by **_Shuichi Ohtsu_** 

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


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

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

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



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

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

ここでは、Angular8においてBootstrap4ベースのng-bootstrapのTimepickerを利用する方法についてご紹介します。

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

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

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

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

## 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" >



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

`gulp -m ForTimepicker`

と入力します。


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



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


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



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


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



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

そして

`code .`

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


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


VSCodeが起動しましたら、


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


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



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

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

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

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

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


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



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


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


次に

`npm i`

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


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


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

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

`ng s -o`

と入力します。


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


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


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



ＯＫです。

## Timepickerを追加

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

そのＵＲＬは、

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

です。



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


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


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

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


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

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


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


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

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

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


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


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

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


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

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

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

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

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

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


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

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


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


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


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

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


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


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

## Timepickerの表示

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

しかしTimepickerは表示されません。エラーが発生しているようです。

`Ctrl+Shift+i` キーでコンソール情報を表示します。`ngModel`が原因のようです。`ngModel`を利用するためには、`FormsModule`をインポートしておく必要があります。

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



## FormsModuleのインポート

VSCodeに戻り、_app.module.ts_を開き、`FormsModule`をインポートします。

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


再度、ブラウザに戻りますと、エラーがなくなり、Timepickerが表示されました。
  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng8/ng8_Bootstrap4_Timepicker_23.png" width= "640" >

ＯＫです。

## Spinnerの表示

しかし、このままですと、数値入力が面倒なので、Spinnerを表示することにします。


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

`config.spinners = true`

と変更します。

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

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

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

ＯＫです。

## 秒の非表示

次に、秒までは表示する必要はないので、秒の欄を非表示にします。


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

`config.seconds = false`

に変更します。

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


ブラウザに戻り、表示を確認すると、秒の欄が非表示になりました。

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


ＯＫです。

## AM/PMの表示

次にAM/PMの区別をした表示にしてみます。

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

`config.meridian = true`

を追加します。


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


ブラウザに戻り、表示を確認すると、AM/PMのボタンが追加されました。


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



## 取得した時刻データの表示

しかし、このままだと時刻データが本当に取得できているのかがわかりません。そこで取得時刻データを画面上に表示することにします。


VSCodeに戻り、_app.component.html_ファイルを開き、取得時刻データを表示するように変更します。

具体的には、

`<pre>Selected time: {{time | json}} </pre>`

という一行を追加します。


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




ブラウザに戻り、表示を確認すると、取得時刻データが追加されました。

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



ＯＫです。


## 表示スタイルの修正

しかし、このままですとTimepickerが左寄せになっており、取得時刻データとのバランスがよくないので、そこを修正していきます。

まず、一行を５対２対５の比率で区切り、中央に表示するようにしてみます。

VSCodeに戻り、_app.component.html_ファイルを開き、divタグを追加していきます。


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


ブラウザに戻り、表示を確認しますと、数値データの表示が欠けています。

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

そこで中央の表示幅を広げるために、一行を４対４対４の比率で区切ることにします。

VSCodeに戻り、_app.component.html_ファイルを開き、比率を変更します。

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

ブラウザに戻り、表示を確認します。

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