株式会社スマレジの開発部でスマレジのサーバサイドを作っています

Lucid Chart APIをたたいて(?)みた(2)

こんにちは、株式会社スマレジ、開発部のマサです。

今回はLucid Chart APIから取得したXMLPHPの扱いやすい形にするところをやっていきます。 前回のブログ↓ masa2019.hatenablog.com

Laravelでコンポーネントを追加する

参考にしたサイト様↓ saba.omnioo.com

上記のサイト様はLaravel5ですが、6でも同じ手順でできました。

下準備

doc_root\app\ControllerにComponentを追加する場合、

composer.jsonの下記を追加

        "classmap": [
            "database/seeds",
            "database/factories",
+            "App/Http/Controllers/Component"
        ]

config/app.php

    /*
    |--------------------------------------------------------------------------
    | Class Aliases
    |--------------------------------------------------------------------------
    |
    | This array of class aliases will be registered when this application
    | is started. However, feel free to register as many as you wish as
    | the aliases are "lazy" loaded so they don't hinder performance.
    |
    */

    'aliases' => [
    (中略)...
        /** custom */
        'Component' => 'app/Http/Controllers/Component',

コンポーネントを作る

基底用のクラスをつくる。

namespace App\Http\Controllers\Component;

/**
 * 基底コンポーネント
 * Class BaseComponent
 * @package App\Http\Controllers\Component
 */
class BaseComponent
{
    public function __construct()
    {

    }

}

Lucid Chart用コンポーネント

今回はとりあえず矩形(blocks)と矢印(lines)を取得する部分を実装します。 前回のブログではXML文字列をdeveloper kitから取得していましたので、それに合わせたインターフェースにしておきます。 本当はアクセスキーとトークンを設定しておくんですが…大人な事情でしばらくはこれで。

namespace App\Http\Controllers\Component;
use http\Exception\UnexpectedValueException;

/**
 * Lucid Chartの矩形読み込みコンポーネント
 * Class LucidComponent
 * @package App\Http\Controllers\Component
 */
class LucidComponent extends BaseComponent
{
    /**
     * 画面遷移図の情報
     * @var null|Object $displayTransitionStructure
     */
    public $displayTransitionStructure = null;

    public function __construct($xmlString) {
        parent::__construct();
        $this->displayTransitionStructure = $this->loadDisplayTransitionStructureByXml($xmlString);
    }

    /**
     * XML文字列の画面遷移図を読み込む
     * @param $xmlString
     * @return bool|Object
     */
    public function loadDisplayTransitionStructureByXml($xmlString) {
        //TODO:画面遷移図のヘッダ情報のチェック

        return simplexml_load_string($xmlString);
    }


    /**
     * 矩形情報を返す
     * @return array
     * @throws UnexpectedValueException
     */
    public function getBlocks()
    {
        if (is_null($this->displayTransitionStructure)) {
            throw new UnexpectedValueException("Structure info(this->displayTransitionStructure) is undefined."); //例外回りはまだ触りつつなので、別の適切なクラスがあればご指摘下さい。。。
        }
        if (!isset($this->displayTransitionStructure->blocks)) {
            throw new UnexpectedValueException("Structure info you set does not have block info. please check your Lucid Chart.");
        }
        $blocks = $this->displayTransitionStructure->blocks;
        $res = [];
        foreach ($blocks->block as $key => $block) {
            $res[] = $block;
        }
        return $res;
    }

    /**
     * 矢印情報を返す
     * @return array
     * @throws UnexpectedValueException
     */
    public function getLines()
    {
        if (is_null($this->displayTransitionStructure)) {
            throw new UnexpectedValueException("Structure info(this->displayTransitionStructure) is undefined.");
        }
        if (!isset($this->displayTransitionStructure->lines)) {
            throw new UnexpectedValueException("Structure info you set does not have line info. please check your Lucid Chart.");
        }
        $lines = $this->displayTransitionStructure->lines;
        $res = [];
        foreach ($lines->line as $key => $line) {
            $res[] = $line;
        }
        return $res;
    }
}

作ったコンポーネントを使う

今回はコントローラの中で使います。以下、一部抜粋。

//利用するコンポーネント
use App\Http\Controllers\Component\LucidComponent;
(中略)...
    public function index()
    {
        $str = '<?xml version="1.0" ?>...';
        $lucidComponent = new LucidComponent($str);
        $block = $lucidComponent->getBlocks();
        $line = $lucidComponent->getLines();

デバッガでみてみた変数の中身はこんな感じです。

f:id:masa2019:20191215183300p:plain
矩形情報はこんな風に取れます

f:id:masa2019:20191215183357p:plain
矢印情報は接続前後の矩形のIDがはいっているんですね。