『Bootstrap4入門』Bootstrap4とは 【Udemyで学習】

www.youtube.com

Bootstrap4とは何かについてお話しします。

Bootstrap4は人気のCSSフレームワークです。CSSフレームワークとは何かお分かりでしょうか?CSSフレームワークCSSの書式指定を集めたライブラリー集です。CSSフレームワークを利用すると、自分でCSSを記述しなくても、用意されたclassを指定するだけで、見た目のよいWebサイトを構築できます。

次はBootstrap4の特徴についてご説明します。 Bootstrap4の特徴について3点お話しします。

特徴その1はレスポンシブWebデザインです。レスポンシブWebデザインとは何かお分かりでしょうか? レスポンシブWebデザインとは、ひとつのHTMLで、サイト閲覧者のデバイスの画面サイズに応じて、最適な画面のレイアウトを表示させる技術のことを言います。レスポンシブWebデザインがよくわかるサイトでご紹介します。Bootstrapで作られたThemewagon Live Demoというサイトですが、画面下のアイコンをクリックすることで、表示するデバイスをシミュレートすることができます。PCでは横に長く表示された画面上部のメニューがスマートフォンでは、メニューのハンバーガーアイコンのみに置きかわりクリックすることで縦長にメニューが表示されるよう工夫されています。レスポンシブWebデザインの特徴がよくわかるサイトです。

特徴その2はグリッドシステムです。 Bootstrap4のグリッドシステムとは、ページ全体を横幅12分割で構成する仕組みのことです。「各コンテンツが何列分の幅を使用するか?」を指定すると、ページ全体のレイアウトを自由に組み立てられます。

特徴その3は豊富なコンポーネント群です。 Bootstrap4に用意されている豊富なコンポーネントを使用することで、見栄えのいいWebページを効率よく作成することができます。

www.udemy.com

『Bootstrap4入門』学習用アプリケーション「会員管理システム(PMMS)」について 【Udemyで学習】

www.youtube.com

 

学習用アプリケーション「会員管理システム」についてお話しします。

このアプリは、本コースのために、Bootstrap4を利用して私が作成した、モックアップサイトです。サーバサイドの機能を実装していないモックアップですので、実際に会員を登録したり編集したりということはできません。作成したのは、Bootstrap4を利用したHTMLのみです。

また、本アプリの名称ですが、プログラミング愛好会の会員管理システムを想定しましたので、Programming club Membersip Management System の頭文字をとって「PMMS」と名付けました。

このアプリは主に3つの画面で構成されています。

1つ目の画面は「会員一覧画面」です。トップ画面として表示される画面です。会員の一覧が1ページに10人表示され、ページャ機能を具備しています。

2つ目の画面は「会員詳細画面」です。ページ内にタブを設置し、会員の基本情報や所属する部会などの情報を切り替えて表示できるように考えました。

3つ目の画面は「新規会員登路画面」です。Bootstrap4による登録用フォームの説明をするために設置しました。

次に画面遷移についてお話します。

「会員一覧画面」の氏名のリンクをクリックすると「会員詳細画面」に遷移します。また、画面上部の「会員一覧」リンクをクリックすると「会員一覧画面」に戻ることができます。さらに「会員登録」リンクをクリックすると「新規会員登録画面」に遷移します。ここでも画面上部の「会員一覧」リンクをクリックするとことで「会員一覧画面」に戻ることができます。

次に、画面遷移以外の画面の動きをご紹介します。

まずは画面上部に設置したナビゲーションバーです。画面をスクロールしても固定されて表示されるのでメニューとしての役割を持たせています。会員一覧や会員登録のリンクに加えて、ドロップダウン形式のメニューを実装しました。 ナビゲーションバー右端のバージョン番号をクリックすることで「このアプリについて」的なモーダルダイアログが表示されます。モーダルダイアログの紹介に使用することを目的として設置しました。

次に会員詳細画面で画像をスライド表示しているカルーセルです。デフォルトでは周期的に画像が変化しますが、画像の左右に存在するコントローラで意図的に画面を遷移することができます。

それから、同じく会員詳細画面のタブ切り替えです。ひとつのページに多くのコンテンツを表示させる場合によく使用される機能です。

本アプリは、GitHubのPages機能を使用して公開しています。URLは「https://zunda-lab.github.io/Bootstrap4Sample」です。いつでもお試しいただけます。

これで学習用アプリケーション「会員管理システム」の紹介を終わります。

www.udemy.com

オンライン学習Udemyで『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜をリリースしました

www.youtube.com

みなさんこんにちは Bootstrap4入門コース担当の小野宏司です。

このビデオではコースの概要と特徴について解説していきたいと思います。

私は30年以上にわたって通信キャリアでシステム開発に従事し、フルスタックエンジニアとして多くのWeb開発を行ってきました。JavaRuby, Python など、多くのプログラミング言語に精通しています。

この講座では、Webデザインに苦手意識を持っているエンジニアが、Webデザインの苦手意識を乗り越えた現役エンジニアから、3日間でBootstrap4を学び苦手意識を乗り越えてもらうためのコースです。

このコースは、まず1日目はBootstrap4の基本とページレイアウトについて学習します。 次に2日目には、Bootstrap4の基本的なコンポーネントを学習します。 そして3日目には、動きがあるコンポーネントを学習します。

このコースの特徴は、サンプルアプリにより開発現場での即戦力を身につけることができることです。 それから、学習用アプリによる完成イメージを提示するため、ゴールが明確であるということです。 また、Bootstrap4適用前後の画面の変化を動画で確認できることです。 さらに、Visual Studio Code による効率的なHTML開発が習得できることです。

それでは、皆さんとコース内でお逢いできることを楽しみにしています。

www.udemy.com

 

Jenkinsでカバレッジを取得する

www.youtube.com

 

以下、オンライン学習サイトUdemyの「『Jenkins入門』〜速習!2時間で習得する短期開発とQCDを達成する方法〜 | Udemy」の一部です。

コメントアウトをはずして「肥満」の場合のテストケースを含めて実行してみます。コミットとプッシュを実行してビルドの実行を待ちます。

ビルドが完了しました。ビルドの結果画面からカバレッジを確認しましょう。「カバレッジレポート」リンクをクリックしてmodelパッケージをクリックするとHealthCheckクラスのカバレッジが100%になっています。HealthCheckのリンクをクリックすると処理全てが緑色で塗られテストで実行されていることがわかります。

SampleJOBのトップ画面を開きます。新たに追加されたコードカバレッジの推移グラフで緑色の線が上昇し、赤色の線が下降していることがわかります。緑色の線は実行された割合、赤色の線は実行されていない割合を示しています。このようにカバレッジ結果がわかりやすく表示されるので、プロジェクトは確実にテストを消化するような方向に向かうというわけです。

www.udemy.com

www.youtube.com

Jenkinsでジョブを作ってビルドしてみましょう。

Jenkinsのトップ画面で「新規ジョブ作成」をクリックしましょう。そして「Enter an item name」にジョブの名前を入力します。今回は「SampleJOB」という名前を付けます。

次にジョブの種類を選択します。ジョブの種類はいくつかありますが、最も基本的で汎用的な「フリースタイル・プロジェクトのビルド」をクリックします。「フリースタイル・プロジェクトのビルド」が選択されてあるのを確認して画面下の「OK」ボタンをクリックします。

そうするとジョブの設定画面が表示されます。

ジョブの設定画面では、まずソースコード管理を設定します。今回はGitHubに登録されているソースコードを使用してビルドを行いますので、「git」を選択します。gitのリポジトリ情報を設定するエリアが表示されるので、まずは「リポジトリURL」を入力します。あらかじめフォークしておいたご自身のGitHubリポジトリのURLを設定します。「ビルドするブランチ」はmasterブランチなので、そのままの「*/master」で設定します。その他の設定項目はデフォルトのままで問題ありません。

次にビルドトリガを設定します。ビルドトリガはビルドさせたいタイミングを指定する項目です。Jenkinsにはいくつかのビルドトリガがありますが、今回は「SCMをポーリング」を選択します。「SCMをポーリング」とはソースコード管理で設定したリポジトリに変更が加えられたかをJenkinsが一定時間ごとにチェックして、変更があればビルドを実行するというものです。チェックの間隔はLinuxなどのcronと同じ書式を使って指定できます。「SCMをポーリング」をチェックを入れて、「スケジュール」に「* * * * *」を設定します。この設定でJenkinsは1分おきにチェックします。その他の設定項目はデフォルトのままで問題ありません。ここで一旦設定を保存するため画面下の「Apply」ボタンをクリックしましょう。

www.udemy.com

Jenkinsのインストール~驚愕の簡単セットアップを紹介します!~

www.youtube.com

Jenkinsのインストール方法は多種多様です。常時起動のサービスとしてインストールする方法がJenkins公式ホームページに紹介されていますが、オンライン学習プラットフォームのUdemyコース「『Jenkins入門』〜速習!2時間で習得する短期開発とQCDを達成する方法〜 | Udemy」ではびっくりするくらい簡単なセットアップ方法をご紹介しています。

公式サイトからWARファイルをダウンロードして、コマンドラインで "java -jar jenks.war" と起動します。これでブラウザからJenkinsの画面にアクセスできるのです。

www.udemy.com

Jenkinsによりビルドを自動化する効果~何度も何度も自動ビルドすることは開発者の不安や恐怖を取り除く!~

www.youtube.com

 

「Jenkinsによりビルドを自動化する効果」をご紹介します。

Jenkinsのジョブにビルドの自動実行を設定することにより、プログラムコードをSubversionGitHubなどのリポジトリに登録したタイミングで、全てのプログラムを自動ビルドすることができます。

  • ビルドが成功したのか、失敗したのかは、自動ビルドを設定したジョブが終了したタイミングでメンバーにメールで通知されます。チーム内にすぐ結果が共有されるため、ビルドに失敗した場合は、ただちに原因を調査し対処する習慣がチームに生まれます。直前にリポジトリ登録した箇所に要因があることがほとんどでしょう。
  • リポジトリへのコミットの度、ビルドされるので、スモールスタートから始めて、少しずつビルド規模を大きくしていくので、阻害要因「まとめてビルドする恐怖」から解放されるというわけです。
  • リファクタリングしてもビルドがすぐに実行されるため、こまめにリポジトリ登録すれば、ビルドに失敗しても原因箇所が特定しやすくなり、原因追求が簡単です。そのため「リファクタリングに対する恐怖」のビルド面の恐怖は解消されます。

『Jenkins入門』〜速習!2時間で習得する短期開発とQCDを達成する方法〜 | Udemyでは、Jenkinsの操作などのデモンストレーションによって、「ビルドの自動化」を、より具体的にご紹介します。

 以上「Jenkinsによりビルドを自動化する効果」について、ご紹介いたしました。

www.udemy.com