Angular8におけるBootstrap4ベースのng-bootstrapのTimepickerの利用方法
2019.7.14
by Shuichi Ohtsu
フルソースコード
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
です。
ページが表示されましたら、右側の緑の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
と入力します。
ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。
ＯＫです。
Gulpによるバックアップの作成
この段階で、変更前ソースのバックアップを取っておきます。但し、関連ライブラリまでバックアップをする必要はないので、node_modules以下のファイルは除外することにします。
このようなバックアップを行うgulpfile.jsをすでにプロジェクトに含めてありますので、それを実行します。
gulp -m Intial
と入力します。-mオプション以下の文字は、作成したプロジェクト名に追加する文字列です。
次に、Timepickerテスト用のプロジェクトも作成しておきます。
gulp -m ForTimepicker
と入力します。
次にファイルエクスプローラーを開き、作成したTimepickerテスト用のプロジェクトをディレクトリごとコピーし、適当なディレクトリ内にペーストします。
そして、ディレクトリ名をng8-bootstrap4-timepickerに変更しておきます。
次に、コマンド・プロンプトを開き、このディレクトリに移動します。
そして
code .
と入力して、VSCodeを開きます。
VSCodeが起動しましたら、
ctrl+@キーを押し、ターミナル・ウィンドウを開きます。
プロジェクト名の変更
次に、プロジェクトの内容を変更していきます。
まず、プロジェクト名を変更します。
package.jsonファイルを開くと、プロジェクト名がng8-bootstrap4-initialになっているのがわかります。これをng8-bootstrap4-timepickerに変更します。
左の検索アイコンをクリックし、プロジェクト全体のソースを対象として置換を行います。
次に、パスカルケース、すなわち-ではなく大文字で区切っているものも存在しますので、Ng8Bootstrap4InitialをNg8Bootstrap4Timepickerに変更しておきます。
次に
npm i
と入力し、再度ライブラリをインストールします。
このプロセスには若干時間を要します。
また、プロジェクトが起動できるかもチェックします。
ng s -o
と入力します。
ブラウザが自動的に開き、ドロップダウン及びドロップアップが表示されます。
ＯＫです。
Timepickerを追加
次にng-bootstrapのサイトを開き、Timepickerのサンプル・プログラムを参照します。
そのＵＲＬは、
https://ng-bootstrap.github.io/#/home
です。
ここで、Demoボタンをクリックし、左側のメニューからTimepickerをクリックします。
そしてGlobal configulation of timepickersを表示します。
この設定を取り込むことにします。
まず、右上のCodeボタンをクリックし、そのソースを表示します。
まずＨＴＭＬ文をコピーします。
VSCodeに戻り、src/app内のapp.component.htmlファイルを開きます。
コピーしたＨＴＭＬをここに貼り付けます。
また、プルダウン及びプルアップ関連の部分をコメントアウトします。
ブラウザに戻り、TypeScriptのファイルを開きます。
まず追加が必要なimport部分をピーします。
VSCodeに戻り、src/app内のapp.component.tsファイルを開きます。
コピーしたimport部分をここに貼り付けます。
ブラウザに戻り、providers部分をコピーします。
VSCodeに戻り、app.component.tsファイルを開き、providers部分をここに貼り付けます。
ブラウザに戻り、クラス内の主要部分をコピーします。
VSCodeに戻り、app.component.tsファイルを開き、ここに貼り付けます。
Timepickerの表示
ここで、ブラウザに戻り、http://localhost:4200を開きます。
しかしTimepickerは表示されません。エラーが発生しているようです。
Ctrl+Shift+i キーでコンソール情報を表示します。ngModelが原因のようです。ngModelを利用するためには、FormsModuleをインポートしておく必要があります。
FormsModuleのインポート
VSCodeに戻り、app.module.tsを開き、FormsModuleをインポートします。
再度、ブラウザに戻りますと、エラーがなくなり、Timepickerが表示されました。
ＯＫです。
Spinnerの表示
しかし、このままですと、数値入力が面倒なので、Spinnerを表示することにします。
VSCodeに戻り、app.component.tsファイルを開き、
config.spinners = true
と変更します。
ブラウザに戻り、表示を確認すると、Spinnerが表示されるようになりました。
ＯＫです。
秒の非表示
次に、秒までは表示する必要はないので、秒の欄を非表示にします。
VSCodeに戻り、app.component.tsファイルを開き、
config.seconds = false
に変更します。
ブラウザに戻り、表示を確認すると、秒の欄が非表示になりました。
ＯＫです。
AM/PMの表示
次にAM/PMの区別をした表示にしてみます。
VSCodeに戻り、app.component.tsファイルを開き、
config.meridian = true
を追加します。
ブラウザに戻り、表示を確認すると、AM/PMのボタンが追加されました。
取得した時刻データの表示
しかし、このままだと時刻データが本当に取得できているのかがわかりません。そこで取得時刻データを画面上に表示することにします。
VSCodeに戻り、app.component.htmlファイルを開き、取得時刻データを表示するように変更します。
具体的には、
<pre>Selected time: {{time | json}} </pre>
という一行を追加します。
ブラウザに戻り、表示を確認すると、取得時刻データが追加されました。
ＯＫです。
表示スタイルの修正
しかし、このままですとTimepickerが左寄せになっており、取得時刻データとのバランスがよくないので、そこを修正していきます。
まず、一行を５対２対５の比率で区切り、中央に表示するようにしてみます。
VSCodeに戻り、app.component.htmlファイルを開き、divタグを追加していきます。
ブラウザに戻り、表示を確認しますと、数値データの表示が欠けています。
そこで中央の表示幅を広げるために、一行を４対４対４の比率で区切ることにします。
VSCodeに戻り、app.component.htmlファイルを開き、比率を変更します。
ブラウザに戻り、表示を確認します。
ＯＫです。
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/