Redmineとは【Udemyで学習】
Redmineとはブラウザで「やるべき仕事、すなわちタスク」の情報管理ができる無償のオープンソースソフトウェアです。
チームで取り組むべきタスクの「誰が」「何を」「いつまでに」を登録することで、チーム全員がタスクの進捗状況や記録などを共有することができます。
フランスのJean-Phillipe Lang氏が開発し、日本、世界で広く使われています。
もともとはソフトウェア開発のバグ管理のために開発されましたが、充実した機能と汎用性により、利用分野や利用頻度がどんどん広がっているソフトウェアです。日本では、楽天が自社のソフトウェア開発のために大規模に利用していること、JAXA（宇宙航空研究開発機構）がスーパーコンピュータの運用管理で利用していることなどが有名です。最近はIT関連以外の小規模チームや個人での活用事例がインターネット上で紹介されています。
Redmineの主な機能についてお話しします。
Redmineには多くの機能がありますが、その中からこのコースで取り扱う「チケット」機能、「ガントチャート」機能、「Wiki」機能、「ニュース」機能についてお話しします。
まずは「チケット」機能です。Redmineのチケットはタスクや作業といった意味を表します。チームのタスクは大きな課題から小さな作業までいろいろありますが、それらを「チケット」に登録することでチームとしてやるべきことが「見える化」され、円滑なチーム進行につながっていきます。チケットには期日や優先順位など細かく設定できるので、自分が何をすればいいのか明確になります。また、Redmineはとても簡単な操作で登録したチケットを一覧表にしたり検索したりすることができます。
ご覧いただいている画面が、チケットの入力画面と、チケット一覧画面です。タスクとしての基本的な入力項目があらかじめ準備されています。またチケット一覧画面は、並び順や表示項目、抽出条件が自由に設定できます。
次は「ガントチャート」機能です。ガントチャートは作業の計画と進捗を視覚的に把握できるチャートです。Redmineはチケットの開始と期日をもとにガントチャートの時間軸にマッピングします。通常、ガントチャートは専用のソフトやExcelなどで作成したりしますが、Redmineは自動でガントチャートを表示してくれるので、とても便利です。
ご覧いただいている画面が、ガントチャート画面です。多くのタスクの実施時期、進捗状況が効率的に把握できる強力な機能です。
次は「Wiki」機能です。Wikiはチームのメンバがブラウザだけで簡単に文書を作成できるシステムです。WikiPediaのWikiですね。WikiはTextile（テクスタイル）という記述ルールで入力すると、見出しや表組み、Redmine内の他のページへのリンクなどを簡単に記述することができます。
ご覧いただいている画面が、Textile（テクスタイル）の入力画面と、入力した結果、表示されるWiki画面です。Textile（テクスタイル）は、最初はとっつきにくいかもしれませんが、上部のツールバーを併用することで、簡単に習得することができると思います。
次は「ニュース」機能です。ニュースはチームのメンバにお知らせを配信する機能です。ニュースを掲載するとRedmineのホーム画面やマイページなどにも表示されます。また、ニュースが追加されたタイミングでチーム全員に通知メールが送信されます。
以上、Redmineの主な機能について、説明しました。なお、このレクチャーのリソースに「講師がオススメする参考書籍情報」を登録しました。日本におけるRedmineの第一人者「前田剛（まえだごう）さん」の「入門Redmine第5版」です。読みやすく、入門としても、マニュアルとしても活用できる構成となっています。Redmineを導入されるのであれば、入手し、ご活用されることをオススメします。
★続きはUdemyで★
第1章「Redmineとは何なのか？なぜタスク管理はExcelではなくRedmineなのか」について【Udemyで学習】
第1章「Redmineとは何なのか？なぜタスク管理はExcelではなくRedmineなのか」
このセクションのレクチャーの流れについてお話しします。
このコースを受講された方の中には、Redmineの基礎知識をお持ちでない方もいらっしゃると思いますので、まず最初のレクチャーで「Redmineとは」をお話します。具体的には「Redmineとは何なのか」「Redmineの主な機能はどのようなものなのか」をお話しします。
そして、次のレクチャーで「Redmineの基本概念」をお話しします。Redmineにはちょっと聞きなれない用語もでてきますので、基本概念としてそれらの言葉の説明をさせていただきます。
そして、次のレクチャーで「ExcelではなくRedmineでタスク管理をするメリット」をお話しします。「Excelでのタスク管理をした場合の15のストレス」を解決する面でのメリットについては、第２章でひとつひとつ説明します。ここではRedmineを使う根幹となる大きなメリットについてお話しします。
それでは、「Redmineとは」から、一緒に学んでいきましょう。
『Redmine入門』〜Excelでのタスク管理にストレスを感じているプロジェクトリーダとメンバのための〜【Udemyで学習】
みなさんこんにちは。Redmine入門コース担当の小野宏司です。このビデオではコースの概要と特徴について解説していきたいと思います。
私は30年以上にわたって通信キャリアでシステム開発に従事し、フルスタックエンジニアとして多くのWeb開発を行ってきました。JavaやRuby, Python など、多くのプログラミング言語に精通しています。
このコースは、Excelでのタスク管理にストレスを感じているプロジェクトリーダとメンバが、Redmineを使用したタスク管理を学ぶことによって、たった2時間で悩みを解決する手段を習得するコースです。
このコースがどのような受講生を対象にしているかをお話します。
まずは「Excelでのタスク管理にストレスを感じているプロジェクトリーダ、プロジェクトメンバ」
それから「Redmineの具体的な使い方を学びたい方」
「Redmineとは何なのかを知りたい方」
「Redmineのメリットを知りたい方」
「Redmineのメリットを上司に説明したい方」
「個人でRedmineを使ってタスク管理してみたい方」
「タスク管理のツールを探している方」
そして「Microsoft Projectを使用している方」
などの受講生を対象としています。
このコースで受講生が何を達成できるか、またどのようなスキルが身に付くかを説明します。
このコースを完了した受講生は「Redmineが使えるようになります。」
「なぜタスク管理はExcelではなくRedmineなのかがわかります。」
「Excelでのタスク管理15のストレスを共有できます。」
「Redmineとは何なのか、メリットは何なのかがわかるようになります。」
「Redmineのガントチャートなどでプロジェクト状況を把握できるようになります。」
「Redmineでニュースを配信したり、Wikiを使って文書を作成することができるようになります。」
「Redmineでチケットを登録して更新できるようになります。」
「Redmineでプロジェクトを準備できるようになります。」
「Redmineを簡単にインストールする方法がわかります。」
「Redmineの初期設定ができるようになります。」
このコースでは、まずは、第1章で「Redmineとは何なのか？なぜタスク管理はExcelではなくRedmineなのか？」をお話しします。
第2章では「RedmineはExcelでのタスク管理「15のストレス〜いつもウンザリ〜」を解決する」を説明します。
第3章では「サンプルプロジェクト「社員旅行プロジェクト」」を紹介します。
第4章では「Redmineをインストールする」をスクリーンキャストを使って動画でお伝えします。
第5章では「Redmineを初期設定する」を動画でお伝えします。
第6章では「Redmineで社員旅行プロジェクトを準備する」を動画でお伝えします。
第7章では「社員旅行プロジェクトでRedmineのチケットを登録して更新する」を動画でお伝えします。
第8章では「Redmineの社員旅行プロジェクトでプロジェクトの状況を把握する」を動画でお伝えします。
第9章では「社員旅行プロジェクトで情報共有機能を利用する」を動画でお伝えします。
第10章では「Redmineで社員旅行プロジェクトの計画を変更する」を動画でお伝えします。
このコースの特徴は、私も経験したことがある「Excelでのタスク管理15のストレス」を共有することです。
それから、15のストレスをRedmineがどのように解決するのかをひとつひとつ説明します。
それから、15のストレスの解決をRedmine操作でお見せします。
さらに、二時間弱という短い時間でグッと凝縮して習得可能です。
最後になりますが、このコースは、コース収録の現時点でUdemyで唯一、初の日本語Redmineコースであるということです。
このコースを受講するにあたってどのような知識やツールが必要かを、ご説明します。
PCの基本的な知識。
Excelの基本用語。セルなどの基本用語がわかれば十分です。
Redmineをインストールしてみたい方はPC。OSはWindowsまたはMacまたはLinuxです。
それでは皆さまとコース内でお会いできることを楽しみにしています。
以上「Redmine入門〜Excelでのタスク管理にストレスを感じているプロジェクトリーダとメンバのための〜」の紹介でした。
★続きはUdemyで★
『Bootstrap4入門』テーブル 【Udemyで学習】
このレクチャーでは、Bootstrap4のテーブルについてお話しします。
まずは、Bootstrap4の公式ページでテーブルの書式設定を確認したいと思います。
公式ページを開いたら、左メニューでContentのTablesをクリックします。 ご覧の通り、table要素にtableというクラスを適用するだけで、Boostrap4は表を見やすい形に書式設定してくれます。
少しtableクラスのバリエーションを確認しましょう。
tableクラスに加えて、table-darkクラスを適用すると、色を反転して暗めのテーブルとなります。
また、thead要素にthead-lightクラスを適用すると、明るめの表見出しとなります。 学習用アプリケーションPMMSではこのthead-lightクラスを使用します。
table-stripedクラスを適用すると交互に行の色が変わります。
また、table-hoverクラスを適用すると、tbody内のテーブル行でマウスオーバによるホバー状態が有効になります。 学習用アプリケーションPMMSではこのtable-hoverクラスを使用します。
また、table-smクラスを適用することで、セルのpaddingが通常の半分となり、少し行間が狭いテーブルになります。 学習用アプリケーションPMMSではこのtable-smクラスを使用します。
その他、罫線の無いテーブルの指定方法や、行やセルの背景色の指定方法などが紹介されています。
Bootstrap4で、見やすいテーブルを簡単に作成することができることをお分りいただけたと思います。
それではさっそく学習用アプリケーションのテーブルを作成していきましょう。
まずは、テーブルの骨格を作成します。 jumbotronの下で、.container>table>tbody>tr*10>td*6とタブキーをタイプしてください。 tdを6個含んだtrを10行、簡単に作成することができました。
ここでで完成系のHTMLソースを参照して、tdの中身や属性を入力しましょう。完成形は https://zunda-lab.github.io/Bootstrap4Sample を参照してください。追加するとご覧のようなHTMLになります。 ご覧の通り、罫線なしのテーブルになっていることがご確認いただけると思います。
それではここでtable要素にtableクラスを追加してみましょう。 tableクラスを適用しただけで横罫線が表示されたことをプレビューでご確認いただけたと思います。
次に、table要素にtable-smクラスを追加します。パディングが狭くなってコンパクトで見やすい表になったと思います。
次に、table要素にtable-hoverクラスを追加します。プレビューの行にマウスオーバしてみましょう。背景色が変化することがお分りいただけると思います。マウスカーソルがどの行にあるか分りやすくなりました。
次は、見出し行を追加します。tbody行の上で、thead.thead-light>tr>th*6とタブキーをタイプしてください。thを6個含んだtrを、簡単に作成することができました。完成形のHTMLソースを参照し、thの中身や属性を入れてください。追加するとご覧のようなHTMLになります。
最後に、ページ送りを追加します。 まずは、Bootstrap4の公式ページでページ送りの書式設定を確認したいと思います。 公式ページを開いたら、左メニューでComponentsのPagenationをクリックします。 ここでページ送りの様々なバリーションを見ることができます。 学習用アプリケーションでは記号を使用したシンプルなページ送りを使用しています。ここでCopyボタンをクリックして、table要素の終端の次に貼り付けましょう。aria-labelやsr-onlyはスクリーンリーダー用の指定です。
これで、学習用アプリケーションのテーブル要素は完成です。
最後にブラウザでindex.htmlを確認しましょう。このように、Bootstrap4を利用すると、見た目に優れたテーブルを簡単に作ることができることを実感いただけたと思います。
以上で、Bootstrap4のテーブルの解説を終わります。
『Bootstrap4入門』Bootstrap4とは 【Udemyで学習】
Bootstrap4とは何かについてお話しします。
Bootstrap4は人気のCSSフレームワークです。CSSフレームワークとは何かお分かりでしょうか？CSSフレームワークはCSSの書式指定を集めたライブラリー集です。CSSフレームワークを利用すると、自分でCSSを記述しなくても、用意されたclassを指定するだけで、見た目のよいWebサイトを構築できます。
次はBootstrap4の特徴についてご説明します。 Bootstrap4の特徴について3点お話しします。
特徴その１はレスポンシブWebデザインです。レスポンシブWebデザインとは何かお分かりでしょうか？ レスポンシブWebデザインとは、ひとつのHTMLで、サイト閲覧者のデバイスの画面サイズに応じて、最適な画面のレイアウトを表示させる技術のことを言います。レスポンシブWebデザインがよくわかるサイトでご紹介します。Bootstrapで作られたThemewagon Live Demoというサイトですが、画面下のアイコンをクリックすることで、表示するデバイスをシミュレートすることができます。PCでは横に長く表示された画面上部のメニューがスマートフォンでは、メニューのハンバーガーアイコンのみに置きかわりクリックすることで縦長にメニューが表示されるよう工夫されています。レスポンシブWebデザインの特徴がよくわかるサイトです。
特徴その2はグリッドシステムです。 Bootstrap4のグリッドシステムとは、ページ全体を横幅12分割で構成する仕組みのことです。「各コンテンツが何列分の幅を使用するか？」を指定すると、ページ全体のレイアウトを自由に組み立てられます。
特徴その3は豊富なコンポーネント群です。 Bootstrap4に用意されている豊富なコンポーネントを使用することで、見栄えのいいWebページを効率よく作成することができます。
『Bootstrap4入門』学習用アプリケーション「会員管理システム（PMMS）」について 【Udemyで学習】
学習用アプリケーション「会員管理システム」についてお話しします。
このアプリは、本コースのために、Bootstrap4を利用して私が作成した、モックアップサイトです。サーバサイドの機能を実装していないモックアップですので、実際に会員を登録したり編集したりということはできません。作成したのは、Bootstrap4を利用したHTMLのみです。
また、本アプリの名称ですが、プログラミング愛好会の会員管理システムを想定しましたので、Programming club Membersip Management System の頭文字をとって「PMMS」と名付けました。
このアプリは主に３つの画面で構成されています。
１つ目の画面は「会員一覧画面」です。トップ画面として表示される画面です。会員の一覧が1ページに10人表示され、ページャ機能を具備しています。
２つ目の画面は「会員詳細画面」です。ページ内にタブを設置し、会員の基本情報や所属する部会などの情報を切り替えて表示できるように考えました。
3つ目の画面は「新規会員登路画面」です。Bootstrap4による登録用フォームの説明をするために設置しました。
次に画面遷移についてお話します。
「会員一覧画面」の氏名のリンクをクリックすると「会員詳細画面」に遷移します。また、画面上部の「会員一覧」リンクをクリックすると「会員一覧画面」に戻ることができます。さらに「会員登録」リンクをクリックすると「新規会員登録画面」に遷移します。ここでも画面上部の「会員一覧」リンクをクリックするとことで「会員一覧画面」に戻ることができます。
次に、画面遷移以外の画面の動きをご紹介します。
まずは画面上部に設置したナビゲーションバーです。画面をスクロールしても固定されて表示されるのでメニューとしての役割を持たせています。会員一覧や会員登録のリンクに加えて、ドロップダウン形式のメニューを実装しました。 ナビゲーションバー右端のバージョン番号をクリックすることで「このアプリについて」的なモーダルダイアログが表示されます。モーダルダイアログの紹介に使用することを目的として設置しました。
次に会員詳細画面で画像をスライド表示しているカルーセルです。デフォルトでは周期的に画像が変化しますが、画像の左右に存在するコントローラで意図的に画面を遷移することができます。
それから、同じく会員詳細画面のタブ切り替えです。ひとつのページに多くのコンテンツを表示させる場合によく使用される機能です。
本アプリは、GitHubのPages機能を使用して公開しています。URLは「https://zunda-lab.github.io/Bootstrap4Sample」です。いつでもお試しいただけます。
これで学習用アプリケーション「会員管理システム」の紹介を終わります。
オンライン学習Udemyで『Bootstrap4入門』〜Webデザインに対して苦手意識を持つエンジニアのための〜をリリースしました
みなさんこんにちは Bootstrap4入門コース担当の小野宏司です。
このビデオではコースの概要と特徴について解説していきたいと思います。
私は30年以上にわたって通信キャリアでシステム開発に従事し、フルスタックエンジニアとして多くのWeb開発を行ってきました。JavaやRuby, Python など、多くのプログラミング言語に精通しています。
この講座では、Webデザインに苦手意識を持っているエンジニアが、Webデザインの苦手意識を乗り越えた現役エンジニアから、3日間でBootstrap4を学び苦手意識を乗り越えてもらうためのコースです。
このコースは、まず1日目はBootstrap4の基本とページレイアウトについて学習します。 次に2日目には、Bootstrap4の基本的なコンポーネントを学習します。 そして3日目には、動きがあるコンポーネントを学習します。
このコースの特徴は、サンプルアプリにより開発現場での即戦力を身につけることができることです。 それから、学習用アプリによる完成イメージを提示するため、ゴールが明確であるということです。 また、Bootstrap4適用前後の画面の変化を動画で確認できることです。 さらに、Visual Studio Code による効率的なHTML開発が習得できることです。
それでは、皆さんとコース内でお逢いできることを楽しみにしています。
