WordCamp Kansai 2025

WordPress公式オフラインイベントでスパイラル株式会社もスポンサー出展として参加しました！
色んな方と意見交換ができとても有意義な時間でした

スポンサーブースでは

私たちは「WordPressで高カスタマイズな会員サイトを簡単に作れるようになってもっといろんな仕事ができるようになろう！」
というメッセージを掲げて参加しました！

「ログイン機能を作って」と言われても意外とサッとは作れないですよね...

▲スポンサーツアーの様子（めっちゃ盛り上がってました！）

目の前で会員サイトを制作！簡単にできるんですよ...

今回のブースの目玉！
目の前で「こんな機能を追加してほしい」と伝えてその場で作ってもらうということをしていました。

依頼を直接伝えたらあっという間に作ってしまう彼は、
先週WordPressもSPIRAL ver.2も初めて触った超初心者！！

▲容赦ない注文を依頼されているメンバー。

彼は帰るとき案外難しい依頼は無かったと強気のコメントをしていました。

どんな依頼が来たのか

たくさんあるのですが、複雑なものを一つピックアップしました。

一般会員、特別会員を分けて、特別会員の中でもA,B,Cを分けて表示したい。

会員情報を2つに分けてさらに3つに分けて表示ですが、普通に作ったら大変混乱してしまいますが、ショートコードでササっと作ってもらいました。

ブロックエディタイメージ

データベースで設定した**member_type**と**select**の条件でかこって出し分けるイメージです。

[spiral-s-is-logged-in-type key="member_type" value="1"]
<!-- 一般会員だけ見える -->
[/spiral-s-is-logged-in-type]

[spiral-s-is-logged-in-type key="member_type" value="2"]
<!-- 特別会員だけ見える -->

	[spiral-s-is-logged-in-type key="select" value="1"]
	<!-- 特別会員のAを選んだ人だけ見える -->
	[/spiral-s-is-logged-in-type]
	
	[spiral-s-is-logged-in-type key="select" value="2"]
	<!-- 特別会員のBを選んだ人だけ見える -->
	[/spiral-s-is-logged-in-type]
	
	[spiral-s-is-logged-in-type key="select" value="3"]
	<!-- 特別会員のCを選んだ人だけ見える -->
	[/spiral-s-is-logged-in-type]

[/spiral-s-is-logged-in-type]

提供しているショートコード一覧
https://apl-support.pi-pe.co.jp/s3m/s3m_function/

お仕事の悩みをポスターにして並べていました

どの悩みが特に共感できそうですかね！！？？
私は単純作業地獄を経験しているのでできる事増やしたい派です！

タッチアンケートで実は...

シールが貼れるアンケートを実施していました！

タッチすると、シール画面にリアルタイムに反映されるというものです。
これ実はSPIRAL ver.2で簡単に作れます！（ラフ含めて数時間でできました。）

作り方

今後記事でもっと詳しく紹介するので軽くどんなことをやったかだけお伝えします！

タッチした場所のX軸とY軸をSPIRALに追加します。

JQueryでササっと作ったSPIRALに送るコード

$('.field').on('click', function (e) {
	// タップできる範囲の横と縦の長さ
	var width  = $(this).outerWidth();
	var height = $(this).outerHeight();

	// タップした場所のX軸とY軸
	var x = e.pageX - $(this).offset().left;
	var y = e.pageY - $(this).offset().top;

	// 百分率に直して小数第二位までに四捨五入
	var leftPos   = Math.round((x / width) * 10000) / 100;
	var bottomPos = Math.round(((height - y) / height) * 10000)/100;

	// SPIRAL ver.2で生成できる登録用<form>にX軸とY軸の値を入れて送信
	$('[name="x"]').val(leftPos);
	$('[name="y"]').val(bottomPos);
	$('form button[value="next"]').click();
});

表示するページでX軸、Y軸を取ってきてcssで位置と色を合わせ、
アニメーションを簡単に作ったら完成。

私も作ってみたい！

SPIRALエンジニアベータ

個人向けに無料ベータ環境を配布しています！
SPIRALナレッジサイトに会員登録をしたらもらえます。
ローコード開発を試してみたい方は是非申し込んでみてください！（タッチアンケートも作れます）

フォームとかもローコード（ノーコードも可）で作れます。

SPIRALセキュアセッションマネージャー

WordPressで安全な会員サイトを作るプラグインについて、
ご自身のWordPressに入れたらお試しで使えるトライアル版プラグインを用意しています。

※トライアル版は変更不可の会員データが2人固定で入っておりショートコードやPHP関数を自分の環境で使えるか確認できるものとなっています。

▼詳しいSPIRALセキュアセッションマネージャーの紹介はこちら

最後に

WordPressと関わるユーザーさんにこんなにたくさん関われる機会が今までなかったので改めて貴重な機会でした。
他のスポンサーの方々の製品に対する考え方も聞くことができ、個人としてもとても勉強になりました。
Web業界は常に情報が変わっていくこともあり、情報収集のためにもmeet up等にも参加していきたいですね。