MKupdate vol.4「SPIRAL ver.2.18 PHP」

SPIRAL ver.2.18 のアップデートで「PHP実行環境」がリリースされました。
前回のMK update でも ver.2 のメンテナンス性についてご案内しましたが、
今回も引き続きアップデートで利用可能となった PHPについて、「メンテナンス性」をテーマにご紹介させていただきます。
◆ 前回のMK update
今回は長めの内容になっています。

前回のおさらいとローコード開発プラットフォームについて

メンテナンスとは

メンテナンス性については、前回のMK update記事を参照ください。
前回のMK update

ローコード開発プラットフォームを改めておさらい

ローコード開発プラットフォームとは
プログラミング言語を記述しなくても、
ビジュアル操作でシステム開発が可能で、
コードを書くことで拡張が可能なプラットフォームです。
参考ページ

ローコード開発プラットフォームを利用することで得られるメリット
・開発工数の削減
・人員の技術ハードルを下げる
・セキュリティ対策の負担を軽減
・品質の向上

PHPを使った ver.2 のページ構成・考え方

「ページ」という、図でいう枠の部分を作成し、色がついている「ブロック」を「ページ」に埋め込んで1つの画面を作成します。(*1)
PHP は、画面全体にかかる「ページ」部分に記載し、動作をさせます。
画面出力する際は、PHP で処理を行った値を「ページ」内の body や「ブロック」に値を渡して Thymeleaf で表示させます。(*2)
*1 「ブロック」の埋め込みは必須ではないので、「ページ」単体で使用することも可能です
*2 PHP の echo などの出力関数などは使用できません

「オリジナルの"差し替えキーワード"」をPHPで生成し、Thymeleaf で出力するイメージです。

ver.2 には、テスト環境と本番環境が存在します。
PHP環境変数という機能が実装されており、PHP を使用する際に、テスト環境と本番環境で変数の値を切り替えることが可能です。
テスト環境と本番環境で APIキー/エンドポイントを切り替えたい場合、PHP環境変数を設定しておくことで、
環境ごとに変数の値が切り替わるため、反映時の書き換えが不要になります。

Thymeleaf を改めて

Thymeleaf は、テンプレートエンジンです。
データ（SPIRAL や PHP で処理された値）とテンプレート(HTML) を合体させ、値を置き換えてくれた HTML を作る仕組みとなります。

ポイント

データとテンプレートを組み合わせる仕組みとなるため、
プログラムと表示系カスタマイズが完全に分離して設定が可能です。

Thymeleaf ならではのメリット

独自のタグがないので、HTMLを使用できます。
書き方として、HTML のタグに属性を追加する形なので、
インデントが乱れずらく、ソースコードの可読性が高くなります。

Thymeleaf の使い方

表示系カスタマイズ領域は、すべて Thymeleaf で行います。一部になりますが、使い方を紹介します。

■ 標準構文

th:xxx=""

上記の構文を HTML の属性値に追加する形になります。

書き方の紹介(一部)

■ 値の出力

 <p th:text="${id}">id</p>

■ 繰り返し処理

 <div th:each="data:${array}"></div>

■ 分岐処理

 <div th:if="${data} == true"></div>

■ ローカル変数を定義

 <div th:with="x=1,y=‘hoge’">
     <p th:text="${x}"></p>
     <p th:text="${y}"></p>
 </div>

PHP の活用シーン

PHP は、外部連携 / データ処理などに使用します。
外部システムとの連携であったり、別DBからのデータ取得などは、PHP で実装する必要があります。
日付や表示用のデータフォーマット調整なども PHP で行います。
表示時のカスタマイズは、Thymeleaf となるため、表示のための処理は PHP で行いません。
* Thymeleaf の値を PHP に渡すことはできません。

【EX】PHP + Thymeleaf 実践

MK update の時間内で紹介できなかった、PHP + Thymeleaf のサンプルをいくつか記載します。
公式のサポートサイトはこちらになります。
サンプルコードに対しての不具合やもっとこうしたほうがいい等あれば、リクエストボードよりご指摘ください。

サンプルコード

■ 値の出力(日付の表示)
【PHP】

<?php
// 本日の日付をThymeleafに値をセット
$SPIRAL->setTHValue("date",date("Y/m/d"));

【Thymeleaf（html）】

<div th:if="${cp.result.isSuccess}">
   <!-- Y/m/d には、PHP実行タイミングの日付が入ります -->
   <p th:text="${cp.result.value['date']}">日付</p>    
</div>

▼

【出力結果】

<!-- Y/m/d には、PHP実行タイミングの日付が入ります -->
<p>Y/m/d</p>

■ 繰り返し処理と表示処理もろもろ
【PHP】

<?php
// 数字の配列をセット
$SPIRAL->setTHValue("num",array(1,2,3,4,5,6,7,8,9,10));

【Thymeleaf（HTML）】

<!-- 
  奇数のみ表示 （odd を even に変更すると偶数 ）
-->
<!-- 繰り返し処理 と 分岐処理 -->
<p th:each="val,status:${cp.result.value['num']}" th:if="${status.odd}">
    <!-- 出力 -->
    <span th:text="${val}">数字</span>
</p>

<!-- 1行にまとめたバージョン -->
<span th:each="val,status:${cp.result.value['num']}" th:text="${status.odd}?${val}"></span>



<!-- 
  奇数と偶数で異なる class をつける 
-->
<p th:each="val,status:${cp.result.value['num']}">
    <!-- 出力 -->
    <span th:text="${val}" th:classappend="${status.odd} ? colorRed:colorBlue">数字</span>
</p>

<!-- 1行にまとめたバージョン -->
<span th:each="val,status:${cp.result.value['num']}" th:text="${val}" th:classappend="${status.odd} ? colorRed:colorBlue"></span>

▼

【出力結果】

<!-- 
  奇数のみ表示 （odd を even に変更すると偶数 ）
-->
<!-- 繰り返し処理 と 分岐処理 -->
<p>
    <!-- 出力 -->
    <span>1</span>
</p>

<p>
    <!-- 出力 -->
    <span>3</span>
</p>

<p>
    <!-- 出力 -->
    <span>5</span>
</p>

<p>
    <!-- 出力 -->
    <span>7</span>
</p>

<p>
    <!-- 出力 -->
    <span>9</span>
</p>


<!-- spanタグ1行にまとめたバージョン -->
<span>1</span><span></span><span>3</span><span></span><span>5</span><span></span><span>7</span><span></span><span>9</span><span></span>

<!-- 奇数と偶数で異なる class をつける -->
<p>
    <!-- 出力 -->
    <span class="colorRed">1</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorBlue">2</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorRed">3</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorBlue">4</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorRed">5</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorBlue">6</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorRed">7</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorBlue">8</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorRed">9</span>
</p>
<p>
    <!-- 出力 -->
    <span class="colorBlue">10</span>
</p>

■ 連想配列を Thymeleaf の繰り返し処理を使用せず、テキストで表示
【PHP】

<?php
// 連想配列作成し、セット
$array = array ('a' => 'apple', 'b' => 'banana', 'c' => array ('Cabbage', 'Carrot', 'Celery'));
$SPIRAL->setTHValue("array",print_r($array, true));

【Thymeleaf（HTML）】

<!-- 出力 -->
<span th:text="${cp.result.value['array']}"></span>

▼

【出力結果】

<!-- 出力 -->
<span>Array
(
    [a] =&gt; apple
    [b] =&gt; banana
    [c] =&gt; Array
        (
            [0] =&gt; Cabbage
            [1] =&gt; Carrot
            [2] =&gt; Celery
        )

)
</span>

■ [重要]PHPエラーハンドリング
【PHP】（エラーになるプログラム）

<?php
// 語尾の「;」を削除
$SPIRAL->setTHValue("data1", "test")

【Thymeleaf（HTML）】

<div th:if="${cp.result.isSuccess}">
    <!-- PHP正常完了した場合に表示 -->
    <p th:text="${cp.result.value['data1']}"></p>
</div>
<div th:if="${!cp.result.isSuccess}">
    <!-- PHPにエラー起こった場合に表示 -->
    <p th:text="${cp.result.errorMessage}">error message</p>
</div>

▼

【出力結果】

<div>
    <!-- PHPにエラー起こった場合に表示 -->
    <p>syntax error, unexpected end of file on line 2</p>
</div>

------------------------------------
★ PHP のエラーや条件分岐で Thymeleaf に値をセットできていない状態で、
Thymeleaf の出力が実行されると 500 エラーが表示されるため注意ください
【例】

【Thymeleaf（HTML）】

<p th:text="${cp.result.value['data1']}"></p>
<div th:if="${!cp.result.isSuccess}">
    <!-- PHPにエラー起こった場合に表示 -->
    <p th:text="${cp.result.errorMessage}">error message</p>
</div>

▼

【出力結果】

------------------------------------

PHP を使ったver.2 のメンテナンス性

①公開しているWebアプリの改修
ver.2 をご利用いただく際、公開後の改修のしやすさがポイントになります。
テスト環境と本番環境が用意されており、
改修、チェック、リリースの作業をスムーズに行えます。
また、PHP 環境変数で、テスト環境と本番環境で値が変わるものを定義できるので、リリース前の書き換え作業等も不要です。
改修時のテスト環境構築やリリース負荷の軽減で、メンテナンスが向上！！