laravel-nestedsetマルチレベル無限分類の詳細な説明

小云云
リリース: 2023-03-19 15:58:01
オリジナル
3236 人が閲覧しました
laravel-nestedset は、リレーショナル データベース トラバーサル ツリー用の larvel4-5 プラグイン パッケージです。この記事では主に、laravel-nestedset のマルチレベル無制限の分類を共有し、皆様のお役に立つことを願っています。

ディレクトリ:

  • ネストされたセットモデルの概要

  • インストール要件

  • インストール

  • 始めましょう

    • 移行ファイル

    • ノードの挿入

    • ノードの取得

    • ノードの削除

    • 整合性チェックと修復

    • スコープ

ネストされたセットモデルの紹介

ネストされたセットモデルは、順序付けされたツリーを実装する賢い方法であり、高速で、何もありませんたとえば、ツリーのレベルがいくつであっても、特定のノードの下にあるすべての子孫を取得するには 1 つのクエリしか使用できません。欠点は、その挿入、移動、削除に複雑な SQL の実行が必要なことです。ステートメントですが、これらはすべてここにあります。プラグインで処理されます。
詳しくはウィキペディアをご覧ください!入れ子集合モデルとその中国語訳!ネストされたコレクションモデル

インストール要件

  • PHP>=5.4

  • laravel>=4.1

  • v4.3バージョン以降はLaravel-5.5をサポート

  • v4バージョンはLaravelをサポート- 5.2、5.3 , 5.4

  • v3バージョンはLaravel-5.1をサポート

  • v2バージョンはLaravel-4をサポート

データ破損の可能性を防ぐために、トランザクション関数をサポートするデータエンジン(MySqlのinnoDbなど)を使用することを強くお勧めします。

インストール

次のコードを composer.json ファイルに追加します。 composer.json文件中加入下面代码:

"kalnoy/nestedset": "^4.3",
ログイン後にコピー

运行composer install 来安装它。

或者直接在命令行输入

composer require kalnoy/nestedset
ログイン後にコピー

如需安装历史版本请点击更多版本

开始使用

迁移文件

你可以使用NestedSet类的columns方法来添加有默认名字的字段:

...
use Kalnoy\Nestedset\NestedSet;

Schema::create('table', function (Blueprint $table) {
    ...
    NestedSet::columns($table);
});
ログイン後にコピー

删除字段:

...
use Kalnoy\Nestedset\NestedSet;

Schema::table('table', function (Blueprint $table) {
    NestedSet::dropColumns($table);
});
ログイン後にコピー

默认的字段名为:_lft_rgtparent_id,源码如下:

public static function columns(Blueprint $table)
    {
        $table->unsignedInteger(self::LFT)->default(0);
        $table->unsignedInteger(self::RGT)->default(0);
        $table->unsignedInteger(self::PARENT_ID)->nullable();

        $table->index(static::getDefaultColumns());
    }
ログイン後にコピー

模型

你的模型需要使用KalnoyNestedsetNodeTraittrait 来实现nested sets

use Kalnoy\Nestedset\NodeTrait;

class Foo extends Model {
    use NodeTrait;
}
ログイン後にコピー

迁移其他地方已有的数据

从其他的nested set 模型库迁移

public function getLftName()
{
    return 'left';
}

public function getRgtName()
{
    return 'right';
}

public function getParentIdName()
{
    return 'parent';
}

// Specify parent id attribute mutator
public function setParentAttribute($value)
{
    $this->setParentIdAttribute($value);
}
ログイン後にコピー

从其他的具有父子关系的模型库迁移

如果你的数据库结构树包含 parent_id 字段信息,你需要添加下面两栏字段到你的蓝图文件:

$table->unsignedInteger('_lft');
$table->unsignedInteger('_rgt');
ログイン後にコピー

设置好你的模型后你只需要修复你的结构树来填充_lft_rgt字段:

MyModel::fixTree();
ログイン後にコピー

关系

Node具有以下功能,他们功能完全且被预加载:

  • Node belongs to parent

  • Node has many children

  • Node has many ancestors

  • Node has many descendants

假设我们有一个Category模型;变量$node是该模型的一个实例是我们操作的node(节点)。它可以为一个新创建的node或者是从数据库中取出的node

插入节点(node)

每次插入或者移动一个节点都要执行好几条数据库操作,所有强烈推荐使用transaction.

注意! 对于v4.2.0版本不是自动开启transaction的,另外node的结构化操作需要在模型上手动执行save,但是有些方法会隐性执行save并返回操作后的布尔类型的结果。

创建节点(node)

当你简单的创建一个node,它会被添加到树的末端。

Category::create($attributes); // 自动save为一个根节点(root)
ログイン後にコピー

或者

$node = new Category($attributes);
$node->save(); // save为一个根节点(root)
ログイン後にコピー

在这里node被设置为root,意味着它没有父节点

将一个已存在的node设置为root

// #1 隐性 save
$node->saveAsRoot();

// #2 显性 save
$node->makeRoot()->save();
ログイン後にコピー

添加子节点到指定的父节点末端或前端

如果你想添加子节点,你可以添加为父节点的第一个子节点或者最后一个子节点。
*在下面的例子中, $parent 为已存在的节点

添加到父节点的末端的方法包括:

// #1 使用延迟插入
$node->appendToNode($parent)->save();

// #2 使用父节点
$parent->appendNode($node);

// #3 借助父节点的children关系
$parent->children()->create($attributes);

// #5 借助子节点的parent关系
$node->parent()->associate($parent)->save();

// #6 借助父节点属性
$node->parent_id = $parent->id;
$node->save();

// #7 使用静态方法
Category::create($attributes, $parent);
ログイン後にコピー

添加到父节点的前端的方法

// #1
$node->prependToNode($parent)->save();

// #2
$parent->prependNode($node);
ログイン後にコピー

插入节点到指定节点的前面或后面

你可以使用下面的方法来将$node添加为指定节点$neighbor的相邻节点

$neighbor必须存在,$node可以为新创建的节点,也可以为已存在的,如果$node为已存在的节点,它将移动到新的位置与$neighbor相邻,必要时它的父级将改变。

# 显性save
$node->afterNode($neighbor)->save();
$node->beforeNode($neighbor)->save();

# 隐性 save
$node->insertAfterNode($neighbor);
$node->insertBeforeNode($neighbor);
ログイン後にコピー

将数组构建为树

但使用create静态方法时,它将检查数组是否包含children键,如果有的话,将递归创建更多的节点。

$node = Category::create([
    'name' => 'Foo',

    'children' => [
        [
            'name' => 'Bar',

            'children' => [
                [ 'name' => 'Baz' ],
            ],
        ],
    ],
]);
ログイン後にコピー

现在$node->children包含一组已创建的节点。

将数组重建为树

你可以轻松的重建一个树,这对于大量的修改的树结构的保存非常有用。
Category::rebuildTree($data, $delete);

$data = [
    [ 'id' => 1, 'name' => 'foo', 'children' => [ ... ] ],
    [ 'name' => 'bar' ],
];
ログイン後にコピー
ログイン後にコピー
composer install を実行してインストールします。 🎜🎜またはコマンドラインに直接入力してください🎜
// Accessing ancestors
$node->ancestors;

// Accessing descendants
$node->descendants;
ログイン後にコピー
ログイン後にコピー
🎜過去のバージョンをインストールする場合は、[その他のバージョン] をクリックしてください🎜🎜使用を開始してください🎜

ファイルを移行

🎜NestedSet を使用できます classcolumns メソッドでデフォルト名のフィールドを追加します: 🎜
$result = Category::ancestorsOf($id);
$result = Category::ancestorsAndSelf($id);
$result = Category::descendantsOf($id);
$result = Category::descendantsAndSelf($id);
ログイン後にコピー
ログイン後にコピー
🎜フィールドを削除します: 🎜
$categories = Category::with('ancestors')->paginate(30);

// 视图模板中面包屑:
@foreach($categories as $i => $category)
    <small> $category->ancestors->count() ? implode(' > ', $category->ancestors->pluck('name')->toArray()) : 'Top Level' </small><br>
    $category->name
@endforeach
ログイン後にコピー
ログイン後にコピー
🎜デフォルトのフィールド名: _lft_rgt、parent_id、ソース コードは次のとおりです: 🎜
$result = $node->getSiblings();

$result = $node->siblings()->get();
ログイン後にコピー
ログイン後にコピー

モデル

🎜モデルは、ネストされたセットを実装するために KalnoyNestedsetNodeTraittrait を使用する必要があります🎜
// 获取相邻的下一个兄弟节点
$result = $node->getNextSibling();

// 获取后面的所有兄弟节点
$result = $node->getNextSiblings();

// 使用查询获得所有兄弟节点
$result = $node->nextSiblings()->get();
ログイン後にコピー
ログイン後にコピー
🎜既存のデータを他の場所に移行します 🎜

他のネストされたセット モデル ライブラリから移行します

// 获取相邻的前一个兄弟节点
$result = $node->getPrevSibling();

// 获取前面的所有兄弟节点
$result = $node->getPrevSiblings();

// 使用查询获得所有兄弟节点
$result = $node->prevSiblings()->get();
ログイン後にコピー
ログイン後にコピー

親子関係を持つ他のモデル ライブラリから移行します

🎜 データベース構造ツリーに parent_id が含まれている場合code> フィールド情報については、次の 2 つのフィールド列をブループリント ファイルに追加する必要があります: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 获取后代的id $categories = $category-&gt;descendants()-&gt;pluck('id'); // 包含Category本身的id $categories[] = $category-&gt;getKey(); // 获得goods $goods = Goods::whereIn('category_id', $categories)-&gt;get();</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜 モデルを設定した後、構造ツリーを修復して <code>_lft_lft を埋めるだけで済みます。 _rgt code>フィールド: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$result = Category::withDepth()-&gt;find($id); $depth = $result-&gt;depth;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜Relationship🎜🎜ノードには次の関数があり、完全に機能し、プリロードされています:🎜🎜🎜🎜ノードは親に属します🎜🎜🎜🎜ノードには多くの子があります🎜🎜🎜🎜ノード多くの祖先があります🎜🎜🎜 🎜ノードには多くの子孫があります🎜🎜🎜🎜 カテゴリモデルがあると仮定します。変数 $node はモデルのインスタンスであり、操作対象のノード (ノード) です。新しく作成したノード、またはデータベースから取り出したノードにノードを挿入できます🎜🎜🎜🎜ノードを挿入または移動するたびに、いくつかのデータベース操作を実行する必要があるため、トランザクションを使用することを強くお勧めします🎜🎜 <strong>注意!バージョン v4.2.0 では</strong>トランザクションは自動的に有効になりません。また、ノードの構造化操作ではモデルを手動で保存する必要がありますが、一部のメソッドは暗黙的に保存を実行し、操作後にブール値の結果を返します。 🎜<h4>ノードの作成</h4>🎜 ノードを作成するだけでは、ツリーの最後に追加されます。 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$bool = $node-&gt;down(); $bool = $node-&gt;up(); // 向下移动3个兄弟节点 $bool = $node-&gt;down(3);</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜 または 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$result = Category::whereAncestorOf($node)-&gt;get(); $result = Category::whereAncestorOrSelf($id)-&gt;get();</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜ここのノードはルートに設定されています。これは、親ノードが存在しないことを意味します🎜<h4>既存のノードをルートに設定します</h4> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$result = Category::whereDescendantOf($node)-&gt;get(); $result = Category::whereNotDescendantOf($node)-&gt;get(); $result = Category::orWhereDescendantOf($node)-&gt;get(); $result = Category::orWhereNotDescendantOf($node)-&gt;get(); $result = Category::whereDescendantAndSelf($id)-&gt;get(); //结果集合中包含目标node自身 $result = Category::whereDescendantOrSelf($node)-&gt;get();</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <h4>指定された親ノードに子ノードを追加します 端または前end</h4>🎜子ノードを追加したい場合は、親ノードの最初の子ノードまたは最後の子ノードとして追加できます。 🎜<em>*次の例では、<code>$parent は既存のノードです🎜🎜親ノードの最後に追加されるメソッドは次のとおりです: 🎜
$nodes = Category::get()->toTree();

$traverse = function ($categories, $prefix = '-') use (&$traverse) {
    foreach ($categories as $category) {
        echo PHP_EOL.$prefix.' '.$category->name;

        $traverse($category->children, $prefix.'-');
    }
};

$traverse($nodes);
ログイン後にコピー
ログイン後にコピー
🎜Add to thefront end of親ノードメソッド🎜
- Root
-- Child 1
--- Sub child 1
-- Child 2
- Another root
ログイン後にコピー
ログイン後にコピー

指定したノードの前後にノードを挿入します

🎜次のメソッドを使用して、指定したノード $neighbor として <code>$node を追加できます。 code >隣接ノード 🎜🎜$neighbor は存在する必要があります。$node の場合、$node は既存のノードになります。 > は既存のノードです。$neighbor に隣接する新しい場所に移動され、必要に応じて親が変更されます。 🎜
Root
Child 1
Sub child 1
Child 2
Another root
ログイン後にコピー
ログイン後にコピー

配列をツリーとして構築します

🎜 ただし、create 静的メソッドを使用すると、配列に children キーが含まれているかどうかがチェックされます。したがって、さらに多くのノードが再帰的に作成されます。 🎜
protected function getScopeAttributes()
{
    return [ 'menu_id' ];
}
ログイン後にコピー
ログイン後にコピー
🎜 これで、$node->children には、作成されたノードのセットが含まれます。 🎜

配列をツリーに再構築する

🎜 ツリーを簡単に再構築できます。これは、多数の変更されたツリー構造を保存するのに非常に便利です。 🎜Category::rebuildTree($data, $delete);🎜

$data为代表节点的数组

$data = [
    [ 'id' => 1, 'name' => 'foo', 'children' => [ ... ] ],
    [ 'name' => 'bar' ],
];
ログイン後にコピー
ログイン後にコピー

上面有一个namefoo的节点,它有指定的id,代表这个已存在的节点将被填充,如果这个节点不存在,就好抛出一个ModelNotFoundException ,另外,这个节点还有children数组,这个数组也会以相同的方式添加到foo节点内。
bar节点没有主键,就是不存在,它将会被创建。
$delete 代表是否删除数据库中已存在的但是$data 中不存在的数据,默认为不删除。

重建子树
对于4.3.8版本以后你可以重建子树

Category::rebuildSubtree($root, $data);

这将限制只重建$root子树

检索节点

在某些情况下我们需要使用变量$id代表目标节点的主键id

祖先和后代

Ancestors 创建一个节点的父级链,这对于展示当前种类的面包屑很有帮助。
Descendants 是一个父节点的所有子节点。
Ancestors和Descendants都可以预加载。

// Accessing ancestors
$node->ancestors;

// Accessing descendants
$node->descendants;
ログイン後にコピー
ログイン後にコピー

通过自定义的查询加载ancestors和descendants:

$result = Category::ancestorsOf($id);
$result = Category::ancestorsAndSelf($id);
$result = Category::descendantsOf($id);
$result = Category::descendantsAndSelf($id);
ログイン後にコピー
ログイン後にコピー

大多数情况下,你需要按层级排序:

$result = Category::defaultOrder()->ancestorsOf($id);

祖先集合可以被预加载:

$categories = Category::with('ancestors')->paginate(30);

// 视图模板中面包屑:
@foreach($categories as $i => $category)
    <small> $category->ancestors->count() ? implode(' > ', $category->ancestors->pluck('name')->toArray()) : 'Top Level' </small><br>
    $category->name
@endforeach
ログイン後にコピー
ログイン後にコピー

将祖先的name全部取出后转换为数组,在用>拼接为字符串输出。

兄弟节点

有相同父节点的节点互称为兄弟节点

$result = $node->getSiblings();

$result = $node->siblings()->get();
ログイン後にコピー
ログイン後にコピー

获取相邻的后面兄弟节点:

// 获取相邻的下一个兄弟节点
$result = $node->getNextSibling();

// 获取后面的所有兄弟节点
$result = $node->getNextSiblings();

// 使用查询获得所有兄弟节点
$result = $node->nextSiblings()->get();
ログイン後にコピー
ログイン後にコピー

获取相邻的前面兄弟节点:

// 获取相邻的前一个兄弟节点
$result = $node->getPrevSibling();

// 获取前面的所有兄弟节点
$result = $node->getPrevSiblings();

// 使用查询获得所有兄弟节点
$result = $node->prevSiblings()->get();
ログイン後にコピー
ログイン後にコピー

获取表的相关model

假设每一个category has many goods, 并且 hasMany 关系已经建立,怎么样简单的获取$category 和它所有后代下所有的goods?

// 获取后代的id
$categories = $category->descendants()->pluck('id');

// 包含Category本身的id
$categories[] = $category->getKey();

// 获得goods
$goods = Goods::whereIn('category_id', $categories)->get();
ログイン後にコピー
ログイン後にコピー

包含node深度(depth)

如果你需要知道node的出入那一层级:

$result = Category::withDepth()->find($id);

$depth = $result->depth;
ログイン後にコピー
ログイン後にコピー

根节点(root)是第0层(level 0),root的子节点是第一层(level 1),以此类推
你可以使用having约束来获得特定的层级的节点

$result = Category::withDepth()->having('depth', '=', 1)->get();

注意 这在数据库严格模式下无效

默认排序

所有的节点都是在内部严格组织的,默认情况下没有顺序,所以节点是随机展现的,这部影响展现,你可以按字母和其他的顺序对节点排序。

但是在一些情况下按层级展示是必要的,它对获取祖先和用于菜单顺序有用。

使用deaultOrder运用树的排序:
$result = Category::defaultOrder()->get();

你也可以使用倒序排序:
$result = Category::reversed()->get();

让节点在父级内部上下移动来改变默认排序:

$bool = $node->down();
$bool = $node->up();

// 向下移动3个兄弟节点
$bool = $node->down(3);
ログイン後にコピー
ログイン後にコピー

操作返回根据操作的节点的位置是否改变的布尔值

约束

很多约束条件可以被用到这些查询构造器上:

  • whereIsRoot() 仅获取根节点;

  • whereIsAfter($id) 获取特定id的节点后面的所有节点(不仅是兄弟节点)。

  • whereIsBefore($id) 获取特定id的节点前面的所有节点(不仅是兄弟节点)。

祖先约束

$result = Category::whereAncestorOf($node)->get();
$result = Category::whereAncestorOrSelf($id)->get();
ログイン後にコピー
ログイン後にコピー

$node 可以为模型的主键或者模型实例

后代约束

$result = Category::whereDescendantOf($node)->get();
$result = Category::whereNotDescendantOf($node)->get();
$result = Category::orWhereDescendantOf($node)->get();
$result = Category::orWhereNotDescendantOf($node)->get();
$result = Category::whereDescendantAndSelf($id)->get();

//结果集合中包含目标node自身
$result = Category::whereDescendantOrSelf($node)->get();
ログイン後にコピー
ログイン後にコピー

构建树

在获取了node的结果集合后,我们就可以将它转化为树,例如:
$tree = Category::get()->toTree();

这将在每个node上添加parent 和 children 关系,且你可以使用递归算法来渲染树:

$nodes = Category::get()->toTree();

$traverse = function ($categories, $prefix = '-') use (&$traverse) {
    foreach ($categories as $category) {
        echo PHP_EOL.$prefix.' '.$category->name;

        $traverse($category->children, $prefix.'-');
    }
};

$traverse($nodes);
ログイン後にコピー
ログイン後にコピー

这将像下面类似的输出:

- Root
-- Child 1
--- Sub child 1
-- Child 2
- Another root
ログイン後にコピー
ログイン後にコピー

构建一个扁平树

你也可以构建一个扁平树:将子节点直接放于父节点后面。当你获取自定义排序的节点和不想使用递归来循环你的节点时很有用。
$nodes = Category::get()->toFlatTree();

之前的例子将向下面这样输出:

Root
Child 1
Sub child 1
Child 2
Another root
ログイン後にコピー
ログイン後にコピー

构建一个子树

有时你并不需要加载整个树而是只需要一些特定的子树:
$root = Category::descendantsAndSelf($rootId)->toTree()->first();
通过一个简单的查询我们就可以获得子树的根节点和使用children关系获取它所有的后代

如果你不需要$root节点本身,你可以这样:
$tree = Category::descendantsOf($rootId)->toTree($rootId);

删除节点

删掉一个节点:

$node->delete();

注意!节点的所有后代将一并删除
注意! 节点需要向模型一样删除,不能使用下面的语句来删除节点:

Category::where('id', '=', $id)->delete();

这将破坏树结构
支持SoftDeletestrait,且在模型层

helper 方法

检查节点是否为其他节点的子节点
$bool = $node->isDescendantOf($parent);

检查是否为根节点
$bool = $node->isRoot();

其他的检查

  • $node->isChildOf($other);

  • $node->isAncestorOf($other);

  • $node->isSiblingOf($other);

  • $node->isLeaf()

检查一致性

你可以检查树是否被破环
$bool = Category::isBroken();

获取错误统计:
$data = Category::countErrors();

它将返回含有一下键的数组

  • oddness -- lft 和 rgt 值错误的节点的数量

  • duplicates -- lft 或者 rgt 值重复的节点的数量

  • wrong_parent -- left 和 rgt 值 与parent_id 不对应的造成无效parent_id 的节点的数量

  • missing_parent -- 含有parent_id对应的父节点不存在的节点的数量

修复树

从v3.1往后支持修复树,通过parent_id字段的继承信息,给每个node设置合适的lft 和 rgt值
Node::fixTree();

作用域(scope)

假设你有个Memu模型和MenuItems.他们之间是one-to-many 关系。MenuItems有menu_id属性并实现nested sets模型。显然你想基于menu_id属性来单独处理每个树,为了实现这样的功能,我们需要指定这个menu_id属性为scope属性。

protected function getScopeAttributes()
{
    return [ 'menu_id' ];
}
ログイン後にコピー
ログイン後にコピー

现在我们为了实现自定义的查询,我们需要提供需要限制作用域的属性。

MenuItem::scoped([ 'menu_id' => 5 ])->withDepth()->get(); // OK
MenuItem::descendantsOf($id)->get(); // WRONG: returns nodes from other scope
MenuItem::scoped([ 'menu_id' => 5 ])->fixTree();
ログイン後にコピー

但使用model实例查询node,scope自动基于设置的限制作用域属性来删选node。例如:

$node = MenuItem::findOrFail($id);

$node->siblings()->withDepth()->get(); // OK
ログイン後にコピー

使用实例来获取删选的查询:
$node->newScopedQuery();

注意,当通过主键获取模型时不需要使用scope

$node = MenuItem::findOrFail($id); // OK
$node = MenuItem::scoped([ 'menu_id' => 5 ])->findOrFail(); // OK, 但是多余
ログイン後にコピー

相关推荐:

php实现多级分类筛选程序代码

PHP 查询多级分类的实例程序代码

smarty实现多级分类的方法_php技巧

以上がlaravel-nestedsetマルチレベル無限分類の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート