ブログ移行のお知らせ。

お世話になっております。
ライフマップ開発チームの大城です。

この度ブログサービスをNoteに移行する事になりました。
https://note.com/tech_lifemap/

短い間でしたが、お世話になりました。
移行先でも何卒よろしくお願いいたします。

それでは！

SpreadsheetとGASとGMailでメールを送信する話。

お疲れ様です。
ライフマップ開発チームの大城です。

本日はSpreadsheetとGASを使って、メールを送信してみようと思います。

何をしたいのかというと...

1. Spreadsheetでメール内容と送信先リストを作成 
2. GASとGMailを連携
3. GASからメールを送信する

をやりたいと思います。

# 開発

## Spreadsheet

### スプレッドシートを作成する

新規でスプレッドシートを作成しましょう。 
サンプルはこちらです。 
https://docs.google.com/spreadsheets/d/1alCisxRr9gaUOurols6sE_ll2KAOY_AyLAwWiKStyzM/edit#gid=0

### シートを作成する

1枚目のシートの名前を『メール内容』にします。 
シートの内容は下記の表やサンプルを参考にしてください。

項目	値
送信元名
件名
本文

2枚目のシートの名前を『送信先リスト』にします。 
シートの内容は、下記の表やサンプルを参考にしてください。

email
test01@xxxxx.xxx
test02@xxxxx.xxx
test03@xxxxx.xxx

## Google Apps Script

### 事前準備

スプレッドシートの上部メニュー『拡張機能 > Apps Script』を選択してください。
以下のような新しいスクリプトが作成されると思います。

function myFunction() {
    
}

### メール内容を取得する

まずはスプレッドシートにあるシート『メール内容』から必要なデータを取得しましょう。
次のようにすると、先ほど作成したスプレッドシートにアクセスすることができます。

  var spreadsheet = SpreadsheetApp.getActive();

• SpreadsheetApp: スプレッドシート操作用クラス
• getActive(): GASに紐づいているSpreadsheetを開く関数

次にシートにアクセスします。
以下のようにすると、シート名を使ってシートにアクセスすることができます。

  var sheet = spreadsheet.getSheetByName('メール内容');

• getSheetByName: 名前を指定してシートを開く関数

次にメール内容を取得します。 
以下のようにすると、シートの各セルから値を取得できます。

  var from_name = sheet.getRange(2, 2).getValue();
  var subject   = sheet.getRange(3, 2).getValue();
  var body_text = sheet.getRange(4, 2).getValue();

• getRange: スプレッドシートのセルを取得する関数（開始行, 開始列, 行数, 列数）
• getValue: 取得したセルの値を取得する関数（単体）

### 送信先リストを取得する

次に送信先リストを取得します。 
メール内容と同じ方法で、シートの各セルから値を取得します。

  var sheet = spreadsheet.getSheetByName('送信先リスト');
  var list  = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();

• getLastRow(): シートの値入力済みの最終行を取得する関数
• getLastColumn(): シートの値入力済みの最終列を取得する関数
• getValues(): 取得したセルの値を取得する関数（複数）

### メール送信処理の作成する

いよいよメールを送信します。
送信先リストに1件ずつメールを送信する為、繰り返し文（for）を使います。

  for (var i = 0; i < list.length; i++) {
    var to_email = list[i][0];
    var options = {}
    options['name'] = from_name;
    
    GmailApp.sendEmail(to_email, subject, body_text, options);
  }

• GmailApp: Gメール操作用クラス
• sendEmail(): メール送信関数（送信先メールアドレス, 件名, 本文, オプション）
• options['name']: 送信元名

これで準備は完了です。

### メールを送信する

早速試してみましょう。
GASを保存して、作成した関数（myFunction）を選択し、実行ボタンを押してください。

『承認が必要です』と警告が表示された場合、全て許可してください。 
※ 特に問題はないと思いますが、トラブル等発生した場合は責任を負いかねますのであらかじめご了承ください。

### メールを確認する

メール送信の実行が完了したら、メールが届いているか確認してください。 
問題なく届いていれば完了になります。  

お疲れ様でした！

# 最後に

メールを一括で送れるのは便利ですよね。 
次回は、スプレッドシートからGASのスクリプトを実行したり、送信先リストによって本文中の宛先名を変えたりしようと思います。  

ではまた次回、大城でした！

---

GASのコード置いていきます！

コード.gs

function myFunction() {
  var spreadsheet = SpreadsheetApp.getActive();
  var sheet       = spreadsheet.getSheetByName('メール内容');

  // メール内容の取得
  var from_name = sheet.getRange(2, 2).getValue();
  var subject   = sheet.getRange(3, 2).getValue();
  var body_text = sheet.getRange(4, 2).getValue();

  // 送信先リストの取得
  var sheet = spreadsheet.getSheetByName('送信先リスト');
  var list  = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();

  // メール送信
  for (var i = 0; i < list.length; i++) {
    var to_email = list[i][0];
    var options = {}
    options['name'] = from_name;
    
    GmailApp.sendEmail(to_email, subject, body_text, options);
  }
}

Bootstrap実践編 - スライダーの追加②

お疲れ様です。
ライフマップ開発チームの大城です。

本日は、前回追加した画像スライダーをカスタマイズしていこうと思います。 
前回の記事はこちらです！
https://tech-lifemap.blogspot.com/2022/12/bootstrap-3.html

# Webサイト改修

## 前回の振り返り

前回は画像スライダーの追加を行いました。 
サンプルを作りましたので、比較用にお使いください。 
https://life-campaign.com/tech/bootstrap/03

## 画像スライダーのカスタマイズ

### 事前準備

前回追加した画像スライダーには ID を設定していませんでした。 
次に紹介する前後ボタン等は、どのスライダーを操作するのか指定しなければ動作しない為、事前に ID を設定しましょう。 
スライダーのDIV要素のID属性に carousel-top と入力してください。

<div id="carousel-top" class="carousel slide" data-bs-ride="carousel">

### 前後(Prev/Next)ボタンの追加

以下のコードを .carousel-inner の次に加えると、前後の画像に切り替えるボタンが追加されます。

    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-top" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel-top" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

[クラス名の説明]  

• carousel-control-prev: 前に戻るボタンに付与するクラス名です  
• carousel-control-next: 次に進むボタンに付与するクラス名です  
• carousel-control-prev-icon: 前に戻るボタンのアイコン表示用のクラスです  
• carousel-control-next-icon: 次に進むボタンのアイコン表示用のクラスです  
• visually-hidden: 補助技術（スクリーンリーダー等）から隠すクラス名です  

[属性の説明]  

• data-bs-target: 対象のスライダーを指定します  
• data-bs-slide: 対象のスライダーの方向を指定します  
• aria-hidden: 補助技術（スクリーンリーダー等）から隠すオプションです  

リンク先のように動作すれば完了です。 
手動でスライダーを操作できるので、より便利になりますね。
https://life-campaign.com/tech/bootstrap/04/1.html

### インジケーターの追加

以下のコードをスライダーの子要素の頭に配置すると、インジケーターが追加されます。

  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-top" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

[クラス名の説明]  

• carousel-indicators: インジケーターに付与するクラスです  
• active: 最初に表示する画像に付与するクラスです

[属性の説明]  

• data-bs-target: 対象のスライダーを指定します  
• data-bs-slide-to: 対象のスライダーの何枚目に移動するか指定します
• aria-current: 現在の位置を示します
• aria-label: 現在の位置に名前を付けます

リンク先のように動作すれば完了です。 
一気に指定のページまで移動できるのは便利ですよね。 
https://life-campaign.com/tech/bootstrap/04/2.html

# 最後に

カルーセルにはまだまだオプションがたくさんあります。 
次回も引き続き紹介していくので、気が向けばまた見に来て下さい〜  

大城でした！

Bootstrap実践編 - スライダーの追加①

お疲れ様です。  
ライフマップ開発チームの大城です。

本日は、Bootstrapを使ってサイトのトップに画像スライダーを追加したいと思います。  
前回の記事はこちら！  
https://tech-lifemap.blogspot.com/2022/04/bootstrap-2.html

# Webサイト改修

## 画像スライダー

早速サイトのトップに画像スライダーを追加していきましょう。  
マニュアルだとこちらになります。  
https://getbootstrap.jp/docs/5.0/components/carousel/

まずは36行目のHello World!!を消しましょう。

<h1>Hello, world!</h1>


削除した行に画像スライドを入れます。  
マニュアルにあるSlide onlyのサンプルコードをそのまま貼り付けてください。  
https://getbootstrap.jp/docs/5.0/components/carousel/#slides-only
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
[クラス名の説明]
carousel slide: Bootstrapのカルーセル機能を使用するには必須のクラス名です。
carousel-inner: カルーセルの中身をこのクラス名で囲みます。
carousel-item: スライドさせる要素１つ１つに付けるクラス名です。
active: １番初めに表示させる要素に付けるクラス名です。
[属性の説明]
data-bs-ride="carousel": ページ読み込み時にカルーセルをスライドさせる為に必要な設定です。
サンプルコードのままだと画像が表示されないです。  
なぜかというと、imgタグのsrc属性の値が「...」だからです。  
画像ファイルを用意するのは手間なので、簡単に作成できるSVGを使ってみましょう！

svgタグは次のように作成します。
<svg class="d-block w-100" width="800" height="400">
    <rect width="100%" height="100%" fill="#777"/>
    <text x="50%" y="50%" fill="#555">First slide</text>
</svg>
[クラスの説明]
d-block: display: block;
w-100:   width: 100%;

[SVGの属性と子要素の説明]
width: 幅の指定
height: 高さの指定
<rect ... />: SVGの画像パーツ
width: 幅の指定
height: 高さの指定
fill: 背景色の指定
<text>...</text>: SVGのテキストパーツ
width: 幅の指定
height: 高さの指定
fill: 背景色の指定
...: テキスト内容

作成したsvgタグをimgタグに上書きしましょう。
2個目、3個目のテキストはSecond、Thirdに書き換えてくださいね。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">First slide</text>
        </svg>
    </div>
    <div class="carousel-item">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">Second slide</text>
        </svg>
    </div>
    <div class="carousel-item">
        <svg class="d-block w-100" width="800" height="400">
            <rect width="100%" height="100%" fill="#777"/>
            <text x="50%" y="50%" fill="#555">Third slide</text>
        </svg>
    </div>
  </div>
</div>


## 確認

ここまで改修したら、一旦表示内容を確認してみましょう。
いい感じに画像スライダーが表示されていると思います！

簡単に色々な機能を追加できるのが、Bootstrapのいいところですよね。

今回はここまでとします。
次回もどうぞよろしくお願いいたします。
大城でした！

Bootstrap実践編 - ヘッダーメニューの追加

お疲れ様です。
ライフマップ開発チームの大城です。

本日は、Bootstrapを使って簡単なヘッダーメニューをWebサイトに追加しようと思います。
Bootstrap導入編はこちらをご覧ください！
https://tech-lifemap.blogspot.com/2022/04/bootstrap.html

# Webサイト作成

ヘッダーメニュー

早速サイトの上部にメニューを追加していきましょう。
ドキュメントだとこの部分です。

こんな感じでコードを追加しましょう。

  <header>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <h1 class="navbar-brand mb-0">Navbar</h1>
        </div>
      </nav>
    </header>

クラスの説明

• navbar: ナビゲーションバー用装飾適応
• navbar-light: メニューの文字色の指定。背景色に合わせてlightかdarkを選びます。
• bg-light: 背景色の指定。今回は薄い灰色。
• container-fluid: レイアウトの指定。横幅いっぱいに要素を表示します。
• navbar-brand: ロゴやサイト名に使用します。文字色の指定だけみたい...？

ヘッダーメニューが追加されましたね。

次は適当なメニュー項目を追加しましょう。
以下のコードを追加してください。

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

クラスの説明

• navbar-expand-lg: レスポンシブ設定。ブラウザのサイズによってメニューの表示を切り替えます。

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>

クラスの説明

• navbar-toggler: メニュー開閉ボタンの装飾
• navbar-toggler-icon: メニュー開閉ボタンのアイコン
• collapse: コラプス機能を使う場合設定します。
• navbar-collapse: メニュー開閉エリアの装飾
• navbar-nav: メニューの装飾
• nav-link: メニューの装飾
• active: nav-linkに付ける事でメニューを強調します。
• disabled: nav-linkに付ける事でメニューを非活性化します。

属性の説明

• data-bs-toggle="collapse": このボタンはコラプス機能のトグルです、と指定する
• data-bs-target="#navbarNav": コラプスする対象は〇〇(id)です、と指定する

これでメニュー項目が追加されたと思います！

コラプス機能が使われているので、幅が狭くなるとメニューも開閉式に変わるかと。
簡単にレスポンシブ対応できて便利ですよね〜

今回はここまでとします！

それではまた次回〜
大城でした。

Bootstrap導入編

お疲れ様です。
ライフマップ開発チームの大城です。

初めの記事を上げてからだいぶ時間が経ってしまいました...お恥ずかしい限りです。

本日はBootstrapの使い方を説明したいと思います。
簡単にオシャレなWebサイトが作成できるので、デザインできないよ〜なんて悩んでる方はぜひBootstrapを使ってみてください。

なんだか難しい...とか、これ間違ってるよ！等あればコメントでご指摘いただけると助かります。m（＿＿）m

# 準備

作業場所の作成

まずは作業するディレクトリを作成しましょう。
後々絶対やって良かった！と思うはずなので、お勧めです。

ディレクトリ構成はこんな感じになります。

~/Developments/bootstrap
┗index.html

HTMLファイル1個だけですね。

HTMLテンプレートファイル作成

次はBootstrapが使えるHTMLファイルを作成しましょう。
公式ドキュメントにスターターテンプレートが用意されているので、そのまま使っちゃいます。
https://getbootstrap.jp/docs/5.0/getting-started/introduction/#%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

わかりやすいように、使わない部分を省いたものを載せておきます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSSファイル読み込み -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, world!</h1>
  <!-- Bootstrap JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

これで準備は完了です！
実際にブラウザで開いてみて、『Hello, world!』と表示されているか確認してください。

こんな感じで、今回は終わりたいと思います。
短くてしょーもない内容ですが、Bootstrapは便利で使いやすいよ！って事を伝えたかったので、許してください。（；；）

続きは次回、Bootstrapを使って簡単なWebサイトを作るところから書きたいと思います。

大抵はドキュメントのサイドメニューにある『Components』カテゴリにあるので、自分で試してみたい！という方はドキュメント見た方が楽しいかもです。

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

それではまた次回〜
大城でした。

開発環境についての話。

皆さん初めまして。
株式会社ライフマップ エンジニアの大城です。

私は現在、弊社サービス『コレカラ進路.JP』のリニューアルの開発を進めています。
まだ詳細はお伝えできませんが、いずれこちらで進捗の報告等できればと思いますので、どうぞよろしくお願いいたします。

本日は、Webサイトの開発ってどうやるの？と興味を持っている方向けに、ローカル開発環境の立ち上げ方についてお話ししたいと思います。
ちなみに私はMacbookを使っているので、Macbook前提でお話しさせていただきます。
Windowsの方ごめんなさい。

今回ご紹介するのは、

• ウェブサーバーの仕組み
• Dockerとは？
• Dockerの使い方
• Dockerを使ったWEBサーバーの構築手順

の四つになります。
難しいと感じるかもしれませんが、大丈夫です。やってみれば意外と簡単です。

# ウェブサーバーの仕組み

まず最初はウェブサーバーの仕組みからご説明いたします。
知ってるよ！という方はスキップしてください。

ウェブサーバーは下記の図のような仕組みになっています。

簡単に流れを説明すると、
ウェブサイトのURLを開くとインターネット経由でルーターにリクエストが飛んで、
ウェブサーバーソフトウェアがURL毎の決まったファイルを実行し、実行した結果がブラウザに表示されます。

# Dockerとは？

Dockerとは仮想環境を構築するツールです。
パソコンの中にパソコンを作るようなイメージですね。

先程のウェブサーバーの仕組みをDockerに置き換えると下記の図のようになります。

Docker Engineがルーターの役割をします。
Docker コンテナというのが先程ご紹介した仮想環境で、この中にソフトウェアをインストールしたり、ウェブサイトのファイルを設置したりします。

Dockerのイメージは掴めたでしょうか？
もし難しくて理解できなくても、今はそういうものがあるんだな程度で問題ありません。
Dockerの使い方を学びつつ理解も深めてもらえればと思います。

# Dockerの使い方

## アカウント作成

まず初めにDocker Hubのアカウントを作成します。
下記サイトのDocker Hubの『Signup』からアカウントを作成してください。
https://www.docker.com/get-started

## インストール

次にDocker Desktopをインストールします。
下記サイトのDocker Desktopの『Download for XXX』からインストーラーをダウンロードしてください。
https://www.docker.com/get-started

ダウンロードが完了したらインストーラーを起動し、ガイドに従ってインストールします。
途中ログインを求められたら、先ほど作成したDocker Hubのアカウントとパスワードを入力してください。

## 起動

インストールが完了したら、ターミナルで下記コマンドを実行しましょう。
現在のバージョンが表示されればインストール完了です。

docker -v
#=> Docker version 20.10.5, build 55c4c88

# Dockerを使ったウェブサーバー構築手順

いよいよ本番です。
自前のパソコンにウェブサーバーの開発環境を構築しましょう。

今回作成するコンテナは次の二つになります。

• ウェブサーバー
• データベース

ディレクトリ構成は下記になります。

~/Development/docker/webapp
  ┣docker-compose.yml
  ┣php.ini
  ┗html/
  ┗index.html

## 開発準備

まずはターミナルを開きましょう。
開発ではターミナルのようなCLIをよく使うので、覚えておくと大変便利です。
（いつかCLIについても記事書きます！）
ターミナルはLaunchpadのその他にあります。

## コンテナ作成

次に作業用のディレクトリを作成します。
mkdirコマンドにpオプションを付けると、途中にあるディレクトリがなくても一緒に作成します。

mkdir -p ~/Development/docker/webapp

※ mkdir ・・・ ディレクトリを作成するコマンド

ディレクトリを作成したらcdコマンドで移動しましょう。

cd ~/Development/docker/webapp

※ cd ・・・ ディレクトリを移動するコマンド

次にコンテナの設定ファイルをviコマンドで作成します。
Dockerはこのファイルを見てコンテナを構築します。

vi docker-compose.yml

※ vi・・・テキストベースのファイルの編集コマンド
  ┣iキー: 編集モードに移行
  ┗ESCキー: 編集モードから抜ける

version: '3'

services:
  web:
    image: php:7.2-apache
    volumes:
      - ./php.ini:/usr/local/etc/php/php.ini
      - ./html:/var/www/html
    ports:
      - 8080:80
  db:
    image: mysql:5.7
    volumes:
      - ./mysql:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=test
      - MYSQL_USER=test
      - MYSQL_PASSWORD=test

※[7/5更新]シングルクォーテーションが別の記号になっていたので修正しました。

version:

設定ファイルの書き方のバージョンです。
バージョンによって書き方が変わります。

services:

各コンテナ毎の設定です。

image:

コンテナに必要なイメージデータです。
アプリのインストールに必要なディスクと同じです。
DockerHubに格納されています。

volumes:

共有ストレージです。
:(コロン)の左がPC、右がコンテナになります。
ファイルが指定された場合はファイルが、ディレクトリが指定された場合はディレクトリ以下が共有物として設定されます。

ports:

ポートの接続設定です。
PC（左）のポートとコンテナ（右）のポートを繋げることを意味します。
ポートを繋げることでhttp://xxx.com:8080のようにブラウザからアクセスすることができます。

environment

イメージデータをインストールする際に使用する設定です。
mysqlの場合、MYSQL_ROOT_PASSWORDは管理者のパスワードを設定するといったことが可能です。

記入が完了したらESCキーで編集モードを抜け、:wqを入力し、エンターキーを押して保存します。

※ :(コロン): コマンド入力開始、w: 保存、q: 終了

これでコンテナの設定ファイルは完成しました！
残りのファイルも続けて作成しましょう。

## PHP設定

次はphpの設定ファイルを作成するのですが、とりあえず最初は空のままでOKです。
touchコマンドで空ファイルを作成しましょう。

touch php.ini

※touch・・・空ファイルを作成するコマンド

## ウェブサイト作成

最後にhtmlファイルを作成します。

mkdir html
vi html/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8” />
</head>
<body>
  <p>Hello world!</p>
</body>
</html>

これで開発環境の準備は完了しました！
さっそくコンテナを立ち上げてみましょう！

## コンテナ起動

コンテナをまとめて管理するにはdocker-compose upコマンドを使います。

docker-compose up

※docker-compose・・・コンテナをまとめて管理するコマンド

起動が完了したらブラウザからアクセスしてみましょう。
http://localhost:8080/

作成したHTMLファイルが表示されました！

## 番外編 - PHPでウェブサイト作成

今回作成したコンテナにはPHPファイルの動作環境もあります。
試しに作ってみましょう。

HTMLファイルを作成する手順と同じように、PHPファイルを作成します。

vi html/test.php

<?php
$text = “Hello world from PHP!”;
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset=”utf-8” />
</head>
<body>
  <p><?= $text ?></p>
</body>
</html>

ファイルを作成したらブラウザからアクセスしてみましょう。
http://localhost:8080/test.php

PHPファイルも表示されましたね！

ウェブサーバーのローカル開発環境が完成しました。
これで思う存分ウェブサイトの開発ができますね！
素敵なウェブサイトをどんどん生み出していってください！

ちなみに開発環境を停止する場合はdocker-compose downコマンドを使用します。

docker-compose down

開発を終わる場合は忘れずに実行してください。

Dockerを使った開発環境の構築はどうだったでしょうか。
もしできなかった場合は、時間を置いて再挑戦してみてくださいね。
間違いやわかりにくい箇所等あればお問い合わせからご連絡いただけますと幸いです。

また次回もよろしくお願いいたします。