Lesson00 事前準備

01ChatWorkの設定

本講座では、質問や面談日決定のためのチャットツールに「ChatWork」を用います。アカウントはこちらで発行済なので、ここではログイン方法から基本的な使い方までを解説していきます。

以下リンクから「ChatWork」へログインしてください。

※ログイン情報はメールに記載してあります。

https://go.chatwork.com/ja/?page=column

ログインができたら以下のようなチャットができているはずです。

※ログインできない、チャットがない場合は運営にご連絡ください。

※順序は異なる可能性があります。

それぞれのチャットルームについて解説します。

【山田太郎】講師チャット

まず、チャットルーム名の【山田太郎】にあたる部分がご自身のフルネームになっていることを確認してください。こちらのチャットは、週1回のオンライン面談を担当する講師やプロデミアサポートチームとの連絡に使用します。

面談の振り返りチャットも送信されますので、ご確認ください。

また、面談の振替や日程調整もこちらのチャットを使用してください。

【山田太郎】質問チャット

カリキュラムを進める中で分からないこと、困ったことがあった場合はチャットにて質問をすることができます。

質問対応チームが待機しておりますので、「質問のテンプレート」を参考に質問をお送りください。

マイチャット

こちらは送信相手のいない、自分だけのチャットルームになります。運営側、講師側は閲覧できないため自由にメモを残していただいてかまいません。

ただし、40日を過ぎるとチャットが削除されてしまうので、Notion等のメモアプリにメモを残すことをおすすめします。

メッセージ送信方法

ここからは、Chatworkの基本的な使い方と、このカリキュラムにおける送信時のルールを説明します。

メッセージ入力欄にメッセージを入力したあと、右上の「送信」ボタンを押すとメッセージが送信されます。

送信したメッセージは、グループチャットに参加しているメンバー全員が見ることができます。

宛先

どのチャットルームでも、宛先は必ずToAllを用いるようにしてください。

そうすることで、チャットルームに参加している全員に通知を送ることができます。

メッセージ入力欄上の「TO」ボタンを押し、「すべてのメンバー」を選択します。

画像のように[toall]が入力されるので、この状態で送信したいメッセージを入力、送信してください。

ファイルを添付する

チャットでは、メッセージと合わせてファイルを送付することもできます。

送信をクリックすると、ファイル付きメッセージを送信します。

送信したファイルは、画像の場合タイムライン上でプレビューを確認できます。

メッセージの編集

自分が送信したメッセージの内容は、後から編集することができます。

自分が送信したメッセージにカーソルを合わせると右下に現れる、「編集」ボタンをクリックします。

メッセージ作成欄にメッセージがコピーされるため、メッセージを編集します。

編集が完了したら、「送信」ボタンをクリックすると送信済みのメッセージが更新されます。

メッセージの削除

自分が送信したメッセージは削除することもできます。

自分が送信したメッセージにカーソルを合わせると、右下に現れる「•••」ボタンをクリックします。

さらに「削除」をクリックすると、メッセージが削除されます。一度削除したメッセージはもとに戻すことができません。

なお編集または削除ができるメッセージは自分が送信したメッセージのみです。自分以外のユーザーが送信したメッセージは、編集も削除もできません。

メッセージへの返信

メッセージへ返信すると、返信元のユーザーからみたとき、メッセージの背景色が緑になります。また返信元のユーザーに通知が届きます。

メッセージを返信したいときは、返信したいメッセージにカーソルを合わせ、右下に現れる「返信」ボタンをクリックします。

返信元のユーザー名がメッセージ入力欄にコピーされるため、そのままメッセージを入力します。

「送信」ボタンをクリックすると、メッセージが送信されます。

返信したメッセージには「TO」ではなく「RE」がつきます。

また、REの横の「返信元」をクリックすると、返信元のメッセージをプレビューで確認することができます。

メッセージへのリアクション

メッセージに対して返信する必要がないとき、簡単なリアクションを送信することもできます。

リアクションしたいときは、リアクションしたいメッセージにカーソルを合わせ、右下に現れる「リアクション」ボタンをクリックします。

送信したいリアクションを選択すると、リアクションが送信されます。送信したリアクションはメッセージの左下に表示されます。

リアクション横のアイコンをクリックすると、リアクションをしているユーザーを確認することができます。

ほかのユーザーが送信したリアクションをクリックすると、自分もおなじリアクションを送信することができます。

また、自分が送信したリアクションをクリックすると、リアクションを取り消すことができます。

メッセージの引用

すでに送信されたメッセージを引用し、新しいメッセージを作成することができます。

メッセージの引用は、すでに送信されたメッセージに補足したい場合や、返信したい箇所を強調したい場合などに便利です。

引用したいときは、引用したいメッセージにカーソルを合わせ、右下に現れる「引用」ボタンをクリックします。

メッセージ全体が引用タグに囲まれた状態でメッセージ入力欄にコピーされるため、続けてメッセージを入力します。

「送信」ボタンをクリックすると、メッセージが送信されます。

引用部分は、ダブルクォーテーションと罫線で囲まれています。また、メッセージの一部を引用することも可能です。

引用したいメッセージをドラッグで選択すると、「メッセージに引用」が表示されます。

「メッセージに引用」をクリックすると、メッセージの一部が引用タグに囲まれた状態でメッセージ入力欄にコピーされるため、続けてメッセージを入力します。

「送信」ボタンをクリックすると、メッセージが送信されます。

質問のテンプレート

質問チャットにて質問をする際には、はやく問題を解決するために、少ないターンで質問が伝わるようにメッセージを送信しましょう。

以下のテンプレートを参考に、カリキュラムのどの部分で、何に困っているのか、どこまで自力でできたのか、何が知りたいのかを伝えてください。

02画面キャプチャ用ツール

チャットを使って質問する際に言葉で説明しにくい場合は、画面キャプチャを添付しましょう。

画面キャプチャは以下のショートカットを使って撮ることができます。

Windowsでの操作方法

画面キャプチャを撮るためのショートカットは「Shift」+「Windows」+「S」です。

キャプチャを撮りたい画面を表示させた状態で、上記のキーを押すと薄暗い画面になりますので、マウスやトラックパッドを使って切り取りたい箇所を選択してください。

1. 「Shift」+「Windows」+「S」を同時に押す
2. マウスをクリックした状態で切り取りたい箇所を選択、離す

今回は赤枠で囲まれた部分を切り取ることにします。

切り取られた画像

切り取った画像は、「Ctrl」+「V」で貼り付けることができます。

また、マーカーなどを使って画像の特定の箇所を強調させたい場合は、「切り取り&スケッチ」を使って画像を編集することができます。

画面キャプチャを撮ると右下に通知が出ます。その通知をクリックするか、Windowsの検索で「切り取り&スケッチ」を検索すると開くことができます。

Macでの操作方法

画面キャプチャを撮るためのショートカットは「Shift」+「command」+「4」です。

キャプチャを撮りたい画面を表示させた状態で、上記のキーを押すとカーソルが十字に変わりますので、マウスやトラックパッドを使って切り取りたい箇所を選択してください。

1. 「Shift」+「command」+「4」を同時に押す
2. マウスをクリックした状態で切り取りたい箇所を選択、離す

Macでの操作方法

今回は赤枠で囲まれた部分を切り取ることにします。

切り取った画像は、「Ctrl」+「V」で貼り付けることができます。

また、マーカーなどを使って画像の特定の箇所を強調させたい場合は、切り取った際に画面右下に表示されるサムネイル、もしくはデスクトップに保存された画像からペン先マークをクリックすることで編集することができます。

切り取り、修正した画像

ここまで画面キャプチャの撮り方を説明しましたが、コードを確認してほしいときにはチャットの「[code][/code]」を使って該当箇所のコードを文字で送信するようにしましょう。

03Cloud9の解説・登録

Cloud9とは？

AWS Cloud9は、クラウドベースの統合開発環境（IDE）です。

簡単に言うとコードを書いたり管理するエディターになります。

ただのエディターではなくサーバーやデータベースなどの環境を簡単に作成できるようになっていますので環境構築の時間をかなり短縮することができます。

AWSアカウントを新規作成した場合、12か月間は無料で使用することができます。

講座受講中は無料で利用することができますが、12か月以降は利用時間に応じて利用料が発生します。

例えば、1か月に20日間・1日4時間（計80時間）ほどCloud9を利用した場合、$ 0.93程度（100円程度）の月額費用が発生します。

Cloud9に登録

Cloud9を使うためにまずは「Gmail」を取得しましょう。

※すでにGmailを取得している場合は、取得済のGmailを用いても問題ありません。

以下のリンクから新しくGmailを作成してください。

https://accounts.google.com/signup

Gmailが作成できたら、次にAWSアカウントを作成します。

以下のリンクにアクセスし、アカウントを作成してください。

https://signin.aws.amazon.com/signin

リンクにアクセスすると以下のような画面が表示されるはずです。

情報を入力して「認証コードをEメールアドレスに送信」をクリック

以下の画面に遷移します。

しばらくするとAWSから登録したGmail宛に認証コードがが届くので、画面に入力して「認証を完了して次へ」をクリック

認証が成功したらパスワードを入力し、「次へ」をクリック

続いて名前と住所を入力していきます。

入力が完了したら「次へ」をクリック

クレジットカード情報を入力し「確認して次へ」をクリック

携帯番号を入力し、「SMSを送信する」をクリック

SMSに届いた番号を入力し「次へ」をクリック

ベーシックサポート無料を選択し「サインアップを完了」をクリック

サインアップが完了したらサインインします。

ルートユーザーを選択し、Gmailアドレスを入力し「次へ」をクリック

次にパスワードを入力します

サインインをクリックするとコンソールのホームが表示されます

まずはリージョンを変更しましょう。

リージョンとはCloud9が稼働する地域のことです。

今回は「アジアパシフィック(東京)」を選択します。

次に画面上部の検索ボックスに「cloud9」と入力しましょう。

以下の画像のようにcloud9が絞り込まれます。

星マークをクリックし、お気に入り登録しておきましょう。次に開くときに便利です。

Cloud9をクリックしましょう。

cloud9が開けたら「環境を作成」をクリックし、環境を作成します

プラットフォームの部分を「Ubuntu Server 22.04 LTS」に変更する

「作成」ボタンをクリック

しばらくすると環境が作成されます

Cloud9IDE欄の「開く」をクリックしましょう

無事にCloud9を開くことができました。

本講座はこのCloud9にコードを書いていきます。

次に共有用のアカウントを作成します。

本講座では各レッスンごとに課題が１つ以上存在します。課題の提出方法はこのCloud9を用います。

今のままでは受講生の方のみ閲覧できるようになっており講師側が確認することができません。

講師も受講生のCloud9にアクセスできるように設定していきます。

まずはホームに移動しましょう。

左上のAWSのアイコンをクリックすることで戻ることができます。

カスタムを選択し、「パスワードの強度」「その他の要件」のチェックをすべて外し「変更を保存」をクリック

画面上部に「IAM ユーザーのパスワード要件が更新されました。」と表示されるはずです。

続いてIAMユーザーを作成していきます。

※必ず以下をコピペし間違えないようにしてください。

ユーザー名「fmnet_teacher」

パスワード「dY6grW5s」

コンソールサインインURLをコピーしチャットの概要欄に張り付けてください。

これで作業は終了です。

04Cloud9の使い方

Cloud9で作成したファイルのプレビューを確認する方法は以下のとおりです。

方法1

1. プレビューを確認したいファイル名にカーソルを合わせ右クリック
2. 「Preview」をクリック

方法2

1. プレビューを確認したいファイルを開く
2. 画面上部の「Preview」ボタンをクリック
3. 「Preview File ファイル名」をクリック

表示結果

プレビューを別タブで表示させたい場合には、Cloud9の画面右上にある矢印ボタンをクリックします。

このほかCloud9の操作方法で分からないことがある場合は、「質問チャット」にてお問い合わせください。

05メンタリングの仕方・方法説明

受講期間中は、チャットでの質問対応に加えて、Google Meetを使って担当メンターとのメンタリングを実施します。Google Meetの入室方法や操作方法は次のセクションで説明します。

メンタリングの目的

担当メンターとのメンタリングを週1回実施します。実施時間は1回30分です。

メンタリングでは、学習を進める中で出てきた質問や疑問への回答に加え、学習の進捗状況の確認をします。

学習を進める中で不安や相談ごとがあれば、遠慮なく担当メンターに話してください。

注意事項

メンタリングの日程変更は、実施予定日の2営業日前までです。それ以降の変更は振替ができませんのでご了承ください。 例）月曜日に面談が設定されている場合

• 木曜日まで　→　システムから変更可。振替対応可。
• 金曜日以降　→　欠席扱い。振替対応不可。

無断欠席を2回された場合、それ以降のメンタリングは中止となります。返金対応もいたしかねますのでご注意ください。

06Google Meetの使い方

メンタリングにはGoogle Meetを使用します。

メンタリングの時間になったら、質問チャットの右側「概要欄」に記載されているURLをクリックしてMeetに参加しましょう。

入室方法

URLにアクセスしたら、青色の「今すぐ参加」ボタンを押してMeetに参加してください。

プレビュー画面中央に表示されているマイクもしくはカメラのアイコンを押すことで、入室時のマイクとビデオのON / OFFを設定できます。

また、右下にあるキラキラのアイコンを押すと、背景のぼかしなどカメラの映像にエフェクトを加えることができます。フィルターや動く背景を指定することもできますが、画面が重くなってしまう可能性があるため、あまりおすすめはできません。

URLクリック後の画面

入室前にマイク、スピーカーの設定を確認したい場合は、プレビュー画面下部の「マイク配列」「スピーカー」をクリックすることで確認できます。

マイクの設定確認

どのマイクに接続されているかは、「マイク配列」をクリックすると確認できます。

また、「マイク配列」をクリックしたあとに表示される画面でマイクに音声が入っているか確認できます。

マイクに音声が入っていると、バーが左右に動きます。

スピーカーの設定確認

「スピーカー」を選択すると、接続されているスピーカーの確認ができます。

また、「スピーカーをテスト」を押すと、接続されているから音楽が流れます。

入室前に、きちんと音声が再生されているか確認しておきましょう。

Meet参加後の画面

入室後は、このような画面が表示されます。

メンタリングの中で利用することの多いボタンは以下の通りです。

画面共有

言葉だけで説明するのが難しい場合は、自分の見ている画面を相手に共有しながら話すことができます。

画面共有ボタンをクリックします。

下図のような画面が表示されるので、ウィンドウタブを選択して共有したい画面を選択し、共有ボタンをクリックします。タブごとの共有（1画面ごとの共有）もできますが、教材とCloud9を切り替えて表示したい場合などは、ウィンドウの共有を選ぶとスムーズです。

画面共有を終了したい場合は、もう一度画面共有ボタンをクリックして「画面の共有を停止」、共有画面の下部に表示されるバーの「共有を停止」もしくはMeetの右上に表示されている「共有を停止」をクリックすると停止できます。

07講座の全体像の解説

本講座の概要

本講座では、プログラミング初学者の方がWebアプリケーションを作成するための基本の基を身に着けることを目的としています。

まずはHTMLやJavascript、PHPといったプログラミング言語の基本となるルールや構文を学び、その後実際に成果物を作成しながら身につけていきます。

成果物の作成中に分からないことがあれば、基礎に戻って確認しつつ進めていくことになります。

最終的には学んだことを組み合わせて、Webアプリケーションを作成することをゴールとしています。

本講座の主要カリキュラム

プログラミングの基本となるルールや構文を学習する

1. HTML & CSS の学習
2. JavaScriptの学習
3. jQuery の学習
4. SQL の学習
5. PHP の学習
6. Git の学習

実際にWebアプリケーションを作成する

1. Laravel の学習
2. Laravelを用いたメモ帳アプリケーションの作成
3. Laravelを用いたメッセージ共有アプリケーションの作成

08講座終了後について

本講座を終了すると、PHP/Laravel を用いたWebアプリケーションの開発の基本を抑えられている状態となります。

今後は今回作成したアプリケーションにさらに機能を拡充していくのも良いですし、アプリケーションをイチから作成するための知識もすでに有しているので、新しいアプリケーションにも挑戦出来ることでしょう。

また、PHPと代表的なフレームワークであるLaravelの基本を学ぶことで、他のプログラミング言語を学習するための土壌も身についています。 同様の学習の進め方で学ぶことができるので、新しい言語にチャレンジすることもおすすめです。

今後もプログラミングに触れ続け、新しいことに挑戦することが学習の近道となります。

• 今後もプログラミングに触れ続け、新しいことに挑戦することが学習の近道となります。
  • 今後もプログラミングに触れ続け、新しいことに挑戦すること
  • 今後もプログラミングに触れ続け、新しいことに挑戦することが学習の近道となります。
• 今後もプログラミングに触れ続け、新しいことに挑戦することが学習の近道となります。今後もプログラミングに触れ続け、新しいことに挑戦することが学習の近道となります。
• 今後もプログラミングに触れ続け、新しいことに挑戦する