写真からスライドパズルが作れる「スラパッ」をリリース

リリースって言うほど大したものではないんですが、せっかく作ったので記事化しておくことにしました。
利用は無料で、登録も不要です。

スラパッの機能

写真をアップするだけで、4×4（16マス）のスライドパズルゲーム（別名15パズル）ができるサービスです。

作ったパズルの公開期間（遊べる期間）を、2日〜30日まで設定できます。
なので、作ったパズルは最大30日間遊ぶことができます。

公開設定は「リンクを知っている人だけ」と「すべての人に公開」があります。
前提として、作ったパズルのURLはランダムに生成されます。

リンクを知っている人だけ：
基本的に作ったパズルのURLを推測するのは難しいため、共有しなければ知られることがありません。

すべての人に公開：
スラパッ内の「新着」や「みんなのスライドパズル」内で公開されます。

一部の仲間内でネタとして遊んだりする場合は「リンクを知っている人だけ」にするのが良いでしょう。
その場合も、共有が問題になるプライベートな写真などは利用しないでください。

クリアした人へ「秘密のコメント」を表示することができます。
ネタ的に、「何かを教えてもいいけどパズルクリアできたら！」という感じで使ってもらえたらいいかなと思ってます。

自分で撮ったiPhoneの写真を整理していたら、唐突に「この写真がスライドパズルだったら面白いな、やってみたいな」と思い作ったものです。

作ろうと思って思い浮かんだのは、「とにかく簡単に」「有効時間を設けて、遊べるのは短期間に」しようというもので、初めのものは4時間ほどでできました。

1枚の画像を擬似的に指定ピース数に分割して、3×3マス、8×8マスなど難易度を選べるものでした。

出来上がったものは遊べるものの、元画像を擬似的にピースで分割しているため、ブラウザのサイズを変更すると配置情報が狂って完成（ゴール）を認識しないし、空白マスや移動マスの変化、画像領域全体の計算など不安定な要素を多く抱えるため、バグも多いものでした。

どうせならレスポンシブにしてスマホでも出来るようにし、プレイ時間でのランキング機能もつけたいと思い、改良を重ねてできたものが現状のものです。はじめの思いつきから完成まで1週間かかり、実制作時間は30時間ほど。

コード自体は主にChatGPTを使って出力しました。
見た目は簡単そうですが、ある程度プログラミングがわからないと現状の生成AIだけで完結させることは難しく、割と複雑なものになっています。とはいえ、ベースの部分を任せられるのは大きかったです。

途中データベースを止め、テキストファイルでタイムやランキングを記録してましたが、やっぱりデータベースに戻そうと全体を作り直したり、英語版を作ったりしたので想定より時間がかかりました。

同じURLで、ブラウザの設定言語によって表示言語を変える「ローカライズ版」を作成しましたが、Googleの検索結果では英語が優先されるようで、日本語での検索結果も英語で表示されるようになってしまいました。

そのため、現在は日本語のみで表示しています。（多くのサービスが言語別にディレクトリを分けている理由の一つかも？）
もしサービスが多く使われるようになったら、ローカライズでも公開したいと思います。

ファミコンの8bitゲーム風に自作のゲーム用曲を作成し、パズルピースのスライド時に「カシャッ」という音も作ってみました。

しかし、パズルの操作時にスライドを動かすスピードは平均0.3秒くらいです。
JSの処理が追いつかず、音が遅れてしまうことと、ゲーム音も必要ないと思って公開をやめました。
ということで電車内などでも気にせず遊べます。

本格的なアプリゲームが多数あるなかで、なかなか「スライドパズルをやろう」と思う人も少ないんじゃないかな…と思うんですけど、自分が世界遺産の風景と一緒に写った写真でスライドパズルをやってみたくなって、ついのめり込んで作ってしまいました。

自分の推しの写真や、そのファン同士でやったり、プチコミュニティなんかでも利用してもらえたら、作って良かったと感じられます。ぜひ使ってもらえたらありがたいです。