【PHP入門編】#7 エンジニアトレーニング研修（Visual Studio Code、GAS）

前回、Week6では「【PHP入門編】#6 エンジニアトレーニング研修（掲示板制作体験）」と題して、主に「Webアプリ開発入門 PHP+MySQL編1: 掲示板を作ろう」のプログラミングの学習内容を整理してアウトプットしました🔻

今回は、【PHP入門編】#7 エンジニアトレーニング研修（Visual Studio Code）と題して、主にVSC（HTML／CSS）を用いた基礎的なコーディング、GAS（Google Apps Script）について簡単に整理してアウトプットしていきます🔻

Visual Studio Codeとは（VSC)

Visual Studio Code（ビジュアル・スタジオ・コード、通称「VS Code」）は、Microsoftが開発した無料のコードエディタ（プログラミング用の高機能なメモ帳）です。

現在、世界中のWebデザイナー、マーケター、プログラミング学習者からプロのエンジニアまで、圧倒的なシェアを誇る大人気ツールです。

職業訓練のWebデザインやプログラミング（If文やfor文などのコーディング）の講義でも、最初の手順としてこのVS Codeをインストールすることが非常に多いです。

🔶Webサイトの構造をVSC（HTML/CSS）を使って再現する演習

以下🔻の図を参考にVSCを使用して再現する学習に取り組みました。

Let`s Tryということで、まずはHTMLで「！」ボタンをクリックし、
＜head＞タグの中に＜link＞タグ＝＜link rel="stylesheet" href="style_1.css"＞を挿入してCSSとリンクしなければなりません。

＜body＞タグの中に＜div＞要素としてboxを用意します。
最初にbox1-box4まで並べた時にどう映るのか試してみました💡🔻

CSSでは以下🔻のように記述
背景bodyは白、boxの前に「.」をつけ忘れると反応しません。細かな作業になります。幅（width）と高さ（height）の指定と、background-colorでは配色の指定も可能です。

VSCの右下にある「GO LIVE」ボタンをクリックすると記述したコードがサイトへ反映されます🔻
以下のように反映されました。なるほど💡
上から下へボックスの形、色などが反映されていることが分かります。

修正１：　Boxを整える

それと同時にどうやったオレンジboxとイエローboxが横並びになるのか考えさせられます💭

試行錯誤を繰り返しながら以下のように修正記述をしてみました🔻
<div class = "box2">の中に<div class = "box3">を格納して</div>で閉じて記述

CSSも以下のように修正🔻
.box2の記述をdisplay: flex; と横並びになるかどうか、とwidthで横幅を広げてみました

すると、以下🔻のように反映されました
少しずつ近づいてきました💡二段目の色が反対になりましたが形は整ってきました

box2とbox3の色を反対にして記述修正すると以下🔻のように反映されました
若干幅の違いや色が濃い目になりましたが、参考図通りの構図になりました💡

修正２：　Boxを横並びに修正

さらに修正を加えます。文字も追加しないといけません。
<div class = "wrapper">を追加し、box2とbox3を横並びに整理するためです。そして、box2とbox3の下に<p>タグを追加し、「sidebar」「maincontent」も文字を追加します🔻

CSSも追加、修正を加えます🔻
box1-4までの幅と高さを分かりやすく数字を修正し、
.wrapper { display: flex }を追加してbox2とbox3を横並び指定します

すると画面上に参考図のようなレイアウトを反映することが出来ました💡

修正３：　文字位置の修正

最後の調整を行います。<p>タグにある文字を「class=」を追加してCSSで個別に文字色などの調整を可能にします🔻

<p class ="sidebar">sidebar</p>
<p class = "maincontent">maincontent</p>

CSSでは「.maincontent」「.sidebar」と分けて調整しますが、中身は一緒にしています🔻

すると画面上には文字の位置、色、マージン、パディングなどが反映して見栄えが良くなりました💡🔻

この日の講義ここまででした。HTML/CSSの基礎を抑えることによってホームページの構成要素を構築できることが理解できました🧐💭

🔶GAS（Google Apps Script）

GASについても学習しました🔻

GAS（Google Apps Script：グーグル・アップス・スクリプト）とは、Googleが提供している各種サービス（スプレッドシート、Gmail、ドライブ、カレンダーなど）を自動化したり、連携させたりできるプログラミング環境のことです。

課題：「翌日のGoogleカレンダーの予定を自分にメールで通知する処理をGASで作成してください。」

まずは自分で検索、AIを使いながら構築する作業をしてみました。

・どこから始める？

一番簡単な始め方は、Googleスプレッドシートを開くことです。

1. スプレッドシートのメニューバーにある「拡張機能」をクリック

2. 「Apps Script」を選択

これだけで、コードを入力する専用の画面がブラウザ内に開きます。
すると以下のように表示されます🔻

Webデザインやマーケティングのスキルに加えて、この「GASによる自動化・業務効率化」のスキルが少しでもあると、現場での作業スピードが劇的に上がりますし、重宝されること間違いなしのツールです。

★GASに貼り付けるコード

If文やfor文（またはforEach）といった基本的な構文を使って、カレンダーのデータを1つずつ取り出してメールの文章を作成していきます。

Gemini先生にプロンプトを実行してもらい以下のようにテンプレートを準備してもらいました🔻

・動きの解説

• CalendarApp.getDefaultCalendar(): あなたのプライベート（メイン）のGoogleカレンダーを自動的に指定します。

• if (events.length === 0): 翌日に予定が「0件」だった場合の処理をIf文で分けています。

• events.forEach(...): 予定が複数ある場合、for文と同じように1件ずつタイトルや時間を取り出して、メールの文章（mailBody）にガッチャンコと結合していきます。

・設定と自動化の手順

コードを貼り付けたら、「毎朝決まった時間に勝手に実行される」ようにタイマー（トリガー）を設定します。

ステップ A：テスト実行と権限の承認🔻

1. GAS画面の上部にある「保存アイコン（フロッピーディスクのマーク）」を押して保存します。

2. 実行する関数が sendTomorrowCalendar になっていることを確認し、「実行」ボタンを押します。

3. 初回実行時のみ、「承認が必要です」というポップアップが出ます。

4. 画面の指示に従い、自分のGoogleアカウントを選び、「詳細」→「（安全ではないページ）に移動」をクリックし、最後に「許可」を押します。 (※自分で作ったプログラムなので安全です)

5. 実行が完了し、自分のGmailに翌日の予定（または予定なしの通知）が届くか確認してください。

ステップ B：毎朝自動で動くタイマー設定（トリガー）

パソコンを閉じていても、毎朝決まった時間にこのプログラムが動くようにします。

1. GAS画面の左側にある時計のアイコン（トリガー）をクリックします。

2. 画面右下にある「トリガーを追加」ボタンを押します。

3. 以下のように設定を変更します。

   • 実行する関数を選択: sendTomorrowCalendar

   • イベントのソースを選択: 「時間主導型」

   • 時間ベースのトリガーのタイプを選択: 「日付ベースのタイマー」

   • 時刻を選択: 「午前 6時～7時」（※お好みの時間帯でOKです）

4. 右下の「保存」を押します。

これで設定はすべて完了です！
ステップBは設定しませんでしたが、今後自分が必要に応じて設定していくためのツールとして使っていきたですね💡

★「月次サマリ」シートをメールで自分に通知するGAS作成

スプレッドシートにある月次サマリ（売上金額）をメールで自分に通知するGAS作成の課題にも取り組みました。

勿論、相棒はGemini様です。
Gemini様にプロンプトを打ち込みました🔻

（前提知識がない分）会社に所属して業務で使用する際には慎重に扱うべきだと思いますが、個人で使う分には効率化の意味合いで便利です🔻

カレンダーの通知でも行ったようにCopy＆Pasteで実行してみました🔻

・コードのポイント

• SpreadsheetApp.openById(): スプレッドシートのURLに含まれている固有のIDを使って、直接ファイルを開きます。これでスプレッドシートに紐づいていない「独立したGAS（スタンドアロン）」からでも実行可能です。

• revenue.toLocaleString(): 取得した数値が「1500000」だった場合、メールで見やすいように「¥1,500,000」と自動でカンマ区切りの形に整える処理を入れています。

・設定の手順

1. テスト実行: コードを保存し、上部の「実行」ボタンを押します。初回はスプレッドシートへのアクセスとメール送信の権限の承認（「詳細」→「〜に移動」→「許可」）を求められますので、画面の指示に従って承認してください。

2. トリガー（自動化）の設定: 毎月1回、あるいは毎日決まった時間にこの金額をチェックしてメールが欲しい場合は、左側の時計マーク（トリガー）から以下のように設定してください。

   • 毎月1回（月末や月初など）に通知したい場合:

     • イベントのソース:「時間主導型」

     • トリガーのタイプ:「月ベースのタイマー」

     • 日にち・時刻: お好みのタイミングを指定

   • 毎日決まった時間に通知したい場合:

     • イベントのソース:「時間主導型」

     • トリガーのタイプ:「日付ベースのタイマー」

     • 時刻:「午後 6時〜7時」など業務終了のタイミング

これで、スプレッドシートの最新の売上状況が自動でメールボックスに届くようになります。

自分たちで使う分にはどんどん使える機能があるのですが、会社で扱う場合など「個人情報漏洩」など気をつけなければなりません。

🔶エンジニア研修最終日

VSCを使ってサイト制作（構造）演習として自力でHTML/CSSのコードを書いて簡単なサイト構造制作体験しました🔻

以上🔺のようにコードを書いて実装すると以下🔻のように画面上に表示されました♪

以上でPHP（エンジニアトレーニング研修）の学習が終了となりました✅

Week1-7を通して、簡単なホームページ制作を行う上での基礎知識やデータベースを取り扱う際の効率化など、多岐に渡って知識を得ることが出来ました。

この学んだ知識をベースに次どう活かすかは自分次第だと考えています💭

#エンジニアトレーニング
#vsc
#visualstudiocode
#gas
#Google
#googleappscript
#リスキリング