Deviseのアカウント情報をFirebase Authenticationにお引越ししてみる
Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証まわりの処理は外部サービスにお任せするのもあり？という気持ちになっているのでした。
今回は、以下のような条件で認証まわりの面倒を見てくれそうなサービスを選んでみました。
- Twitterログインに対応していること
- 趣味程度の利用なら無料枠で収まりそうなプランがあること
- 既存のアカウントがお引越しできそうな環境があること
ということで、Firebase Authentication を試しに使ってみることにしました。REST APIも充実していそう なので、このへんをつかってサーバサイドでもよしなにできたり、既存の実装に合わせてスムーズに移行できそう？などをもくろんでいます。
まずは、ドキュメントに記載されたフォーマットに従い、アカウント情報をCSVファイルとしてエクスポートします。試しにダミーアプリケーションの開発環境のユーザーをエクスポートしてみます。
PostgreSQLをお使いの場合はこんなかんじのコマンドでエクスポートできました。データベースの users テーブルをSELECTして users.csv に保存します。
psql -h localhost -p (ポート) -d (データベース名) -U (ロール) -c "select id, email, case when confirmed_at is not null then 'true' else 'false' end as validated, regexp_replace(encode(encrypted_password::bytea, 'base64'), '\n', '') from users" -A -F, -t > users.csv
Firebase CLIをインストールして、Project IDを確認します。（以下のProject IDはダミーです）
firebase projects:list ✔ Preparing the list of your Firebase projects ┌──────────────────────┬──────────────────────┬────────────────┬──────────────────────┐ │ Project Display Name │ Project ID │ Project Number │ Resource Location ID │ ├──────────────────────┼──────────────────────┼────────────────┼──────────────────────┤ │ Hoge Project │ hoge │ ?????????? │ ??? │ └──────────────────────┴──────────────────────┴────────────────┴──────────────────────┘
DeviseはデフォルトではBCRYPTでパスワードをハッシュ化して保存しているので、デフォルトのままならユーザーデータの登録コマンドは以下のようになります。
firebase auth:import users.csv --hash-algo=BCRYPT --project 'hoge'
これで登録ができました。ためしにログインエンドポイントをリクエストしてみます。
curl 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=(API Key)' \
-H 'Content-Type: application/json' \
-data-binary '{"email":"test@example.com","password":"password","returnSecureToken":true}'
なんかそれっぽいリクエストが返ってきた～。
{ "kind": "identitytoolkit#VerifyPasswordResponse", "localId": "xxx", "email": "test@example.com", "displayName": "", "idToken": "xxx", "registered": true, "refreshToken": "xxx", "expiresIn": "xxx" }
メールアドレスの検証（サインアップしたら確認メールのリンクを踏まないとアカウントが有効化されない機能）とかとか、必要な機能はそろっているようなので、ためしにいろいろいじってみて、よさそうならお引越しも検討しようと思ったのでした。
認証まわりの機能追加は、セキュリティとの兼ね合いもあってなかなか慎重になってしまうので、信頼できそうな外部サービスにお任せすると気持ち的にも楽ですし。
ではでは～。
ダンジョンの中におみせを出してみました
こんにちは。最近「みんなでつくるダンジョン」に「リンク先遷移機能」を実装しました。こんなかんじに、マップ内からほかのページへと誘導できます。
この機能については メッセージ表示プラグイン に使い方を載せていますので、気になる方はみてみてください。
話はかわりますが、実は私はじぶんの絵のステッカーを作って使いたいなと思い、こんなお店をこっそり開いていたのでした。
こんな感じに使っています。絵の出来はともかくとして、個人的にはそれなりに満足しているわけです。ちなみに貼ってから2年くらい経っていそう。
で、売れるかどうかはともかくとして、マップ内でお店を開くことができたら面白いかもな～とずっと思っていたのですが、今回作った「リンク先遷移機能」をつかえばそれっぽくなるのでは？と思い立ち、 こんなマップをつくってみたのでした。
品物の前の看板を「みる」（PCの場合はZキーを押す）と、販売ページにジャンプできるという仕組みです。ちなみに、このマップで売っている物たちは、100円くらいの利益が出るようになっています。
これらのおみせっぽいマップをつなぐための「デパート」マップもつくってみました。
このデパートマップ、みなさんのマップも接続することができます。じぶんのおみせマップを接続したうえで、デパートマップ内のサービスカウンタで出店申請をしていただければ、お店への入り口の扉を開けます。 （お試しな試みなので、とくにルールなどは設けていないのですが、お店の扉を開ける前に接続先のおみせのようすを見させていただきたいと思います。ただし、暴力的・性的要素の強いもののデパートマップへの接続は今回はNGとさせていただきます）
たとえば、マップ素材を展示しつつ販売ページに誘導するとか、ゲームのマップの一部をダンジョン上に作ってゲームの販売ページに誘導するとか、そんなかんじで使ってみていただけるといいのかなと思っています。 もちろん、これ以外のつかいかたもOKです。 何かわからないことがあれば @piyorinpa までお気軽にどうぞ。
ではでは～
あらためてみんなでつくるダンジョンの紹介をば
こんにちは。実は公開から1年経っている「みんなでつくるダンジョン」ですが（公開日は2019/4/27）、最近は細かいところに手を入れたりしています。パラメータ調整でキャラクタの動きを操作しやすくしたりとかとか。 公開からだいぶたったということで、改めてどんなものになったのか？という点をご紹介したい～ということでこの記事を書いています（公開当初から機能もだいぶ増えたので、あらためてそのあたりも整理しながら書いていきます）。
みんなでつくるダンジョンってなに？
アクションゲームのようなマップをつくることができます。つくったマップ上をたんけんしたり、他のマップとつなげて行き来できたりします。 （この辺の説明は 公開当初の記事 からあまり変わりありません）
マップをつくったり
じぶんで用意した画像などの素材をつかったり、他の方が公開している素材を利用してアニメーションを作ったり、壁などのパーツを配置してマップをつくっていきます。
（1MB以内のPNG画像を30枚まで登録できます。いわゆるマップチップ・タイルセットと呼ばれる形式の画像があるとつくりやすいですが、必ずしもこれらの形式である必要はありません。 くわしくは 📚ヘルプ を参照してください。）
はじめてマップをつくるときは、公式素材を活用してアニメーションをつくってみるといいかもです。マップ作りに向いている素材を確認してみてください。（とりあえず📚チュートリアル とか、📚つくりかた動画 をみるとよいかもです）
また、マップ上に配置した「パーツ」に動きを与えたりできる「プラグイン」という仕組みを使うと、ちょっとしたゲームっぽくできます。例えば以下のようなマップがつくれます。
ちなみに、PC・スマートフォンいずれのデバイスでもマップをつくったりあそんだりできるので、じぶんのマップをどこにいてもお手入れできます。
2MB以内のoggファイルをアップロードすることができ、マップのBGMとしてつかうことができます。
マップを公開したり
つくったマップを「公開」状態にしておくと、マップ毎にURLが発行されるので、これをつかえばブログやSNSでマップを共有できます。たとえばこんなかんじ。
広いマップがつくれるようになったhttps://t.co/BnYaI7LjII #みんなでつくるダンジョン
— ぴよっぴ (@piyorinpa) August 12, 2020
「この画像素材を使うとこんなマップがつくれます」みたいなデモ用途でつかったりするのもいいかもですね。みんなでつくるダンジョンはドット絵に比較的優しい（拡大してもドットがぼやけない）ので、ドット絵を良い感じに見せるための、展示場のようなマップをつくってみてもいいかもしれません。
マップをつなげたり
「コネクタ」と呼ばれるワープ地点のようなものを使うとほかのマップと接続することができます（ほかのマップにワープできるようになる）。じぶんでつくったマップをたくさんつなげればより広い世界をつくることができます。
たとえば、以下のマップに入ってみると、マップの端などに矢印マークが見えますが、これがコネクタです。触れると設定したマップに移動できます。 dungeon.garakuta-toolbox.com
また、ほかのひとが公開している「コネクタ」とも接続できるので、みんなでつくるダンジョン内の世界にマップを参加させることもできます。マップ同士のつながりは ワールドマップ でみることができます。
マップをたんけんしたり
コネクタでつながれたマップをたんけんしてみるのもよいです。後述する「アイテム」をあつめたり、マップによっては「いいね」ができるパーツが設置されていることもあるので、いいなとおもったら「いいね」してみましょう。（📚いいねカウンタの設置方法はこちら）
（マップの製作者さんへリアクションを届けるいい感じの仕組みをもう少し用意したいなと思っているのですが、何かいいアイデアがあったらおしえてください）
アイテムをつくったり
「アイテム」をひろったり、ひろえる「アイテム」を設置したりできます。ひろったアイテムは眺めたり、場合によっては使うことができます。 （プラグインを駆使すると、アイテムをつかったときに起きる動作をつくることができるので、マップ作りに興味のある方はぜひに。くわしくは📚ヘルプ を見てみてください）
まとめ
というわけで、「マップをつくって・つなげて・あそぶ」ことができるウェブサービスなのでした。もっとマップが増えるとたのしいなと思うので、ゲームっぽい画像素材をお持ちの方だったり、とりあえずマップをつくってみたいぞという方はぜひとりあえずマップをつくってみてください。画像素材もまだ少ないですが、他のユーザーの方々に登録いただいているものを（一定条件の下で）つかうことができます。（登録されている素材を確認してみる）
ではではー
みんなでつくるダンジョンで大きなマップをつくれるようになったよ
おひさしぶりです。生活まわりでいろいろあり、最近全然開発できていなかったのでブログの更新もすっかりご無沙汰になっていました（みたいなことを6月あたりにも言っていたけど、いろいろとむずかしく、なかなか本調子にならないのだ。）
ひきつづきちょっとずつやってゆくのでよろしくお願いします。
みんなでつくるダンジョンで大きなマップをつくれるように
いままではマップの最大面積が1500×1500pxという制約がありましたが、これを 3200×3200px に緩和しました（この対応にあたり、描画負荷の調整などを行っています）。 また、マップに設置できるパーツ数も100から150まで増やしました。 以下の画像が目一杯大きなマップをつくってみた様子です（マップチップの大きさは32px四方）。
上記マップは以下から遊ぶことができます
「最大面積」の制約なので、たとえば高さを小さめにとれば、そのぶん幅を大きく取ることができます。
ちなみに、以下の画像が概ね今までのマップの最大面積1500×1500pxに近いマップのようすです（マップチップの制約があり、厳密には1440px四方）。これと見比べると、大きくなったな～感が伝わるでしょうか。
というわけで、ひさびさの開発報告でした。ゆるりとやっていきますが、ご要望などあればツイッターなどなどでお声掛けください。
ではでは～
開発の記録（ぴこぴよにいくつかの機能を追加しました）
この間公開したぴこぴよv2にいくつかの機能を追加しました。
余白なし画像の投稿機能
余白のない画像を投稿できるようになりました。余白を付けると、下図左側のようにツイッターのサムネイル画像の大きさに概ね一致するような画像が生成されますが、下図右側のように（これまでのぴこぴよのように）セットした画像に合わせた画像サイズで 投稿できるようになりました。
パレットつき画像の投稿機能
セットした画像に含まれる色を抽出した色パレットをいっしょに投稿できるようになりました。実験的な機能なので、今後ちまちまと仕様を変えたりするかもしれませんが、よければつかってみてください。
これで、これまでのぴこぴよでできたことはv2でも概ねできるようになったかな、という雰囲気です。ぴこぴよv2に関しては今後もちまちまと手を入れるかもしれないですが、 これまでのぴこぴよは近い将来に廃止されるのでご注意ください。
ではでは。
ぴこぴよv2を試験的に公開しました
だいぶご無沙汰でしたが、個人的なあれやこれやがありちょっと開発をお休みしていました。いまは細々と週末開発を再開し始めています。
そして、突然ですが「ぴこぴよ」（ドット絵ツイート支援サービス）を全面的に作り直したv2版を試験的に公開しました。
- これまでのぴこぴよ : https://picopiyo.iconclub.jp
- あたらしいぴこぴよ : https://picopiyo.garakuta-toolbox.com
しばらく新旧ぴこぴよを並行運用し、近い将来のうちに「これまでのぴこぴよ」は廃止します。（廃止に伴い、Mastodonへの投稿機能の提供を終了します）
ぴこぴよってなんだっけ
改めましてぴこぴよの簡単な紹介をば。ドット絵をきれいに（アンチエイリアスをかけず、エッジがつぶれたりぼやけたりしないように）拡大してTwitterに投稿できるウェブサービスです。#picopiyoの検索結果をみてみる
ドット絵はその性質上、拡大して見せたり、または原寸大で見せたりしたくなるので（個人の感想です）、異なる倍率のドット絵を並べた画像も投稿できます。
あたらしいぴこぴよの機能
基本的には今までのぴこぴよとかわりませんが、微妙に機能が追加されていたりします。
たとえば、ならべて表示する画像の位置を調整できるようになりました。ほかにも、画像の並べ方（上下・左右・中央揃えなど）のバリエーションが増えています。
また、これまでのぴこぴよと異なり、最終的に投稿される画像の大きさが固定となるようにしてみています（この仕様は反応を見て調整をしようかなと思っています）。編集画面の枠内のとおりの画像がTwitterに投稿されるようになっています。
今後もパレット画像の添付機能など、機能拡張ができるといいなと思っているので、使ってみた感想などをぜひツイッター（https://twitter.com/piyorinpa）でおしえてください。
ぴこぴよの裏側
あたらしいぴこぴよは、ほぼ1から作り直しています。フロントエンドはReactで、サーバ側のサービスはAWS LambdaとAPI Gatewayを組み合わせて開発しました。フロントエンドSPAのホスティングはCloudFrontをつかったりと、AWSにだいぶ寄せた感じになっています。AWS SAMでローカル環境下での開発や構成の管理、デプロイも比較的楽にできています。
どうしてこのような構成にしたかというと、趣味開発のウェブサービスをこれからも作り続けようとしたときにお金の問題は切っても切り離せないな..と考えたからなのです。公開するにしろ、自分だけがつかう非公開サービスとするにしろ、固定費としてサーバ（や、各種PaaS）の利用料は発生します。趣味開発レベルのユーザー数や規模だと、サーバリソースを利用した分だけ支払う従量課金システムのあれこれをつかったほうが、結果的にお安くサービスを作ったりやめたりできそうという気になってきています。あとは開発のしやすさなどを考慮して、つかうバックエンドのサービスを決めた結果このようにしています。
ということで、いったん構成が比較的楽なぴこぴよで試してみて、よさげなら今後の開発の選択肢として活用していきたいなという感じなのでした。
ぴこぴよv2は生まれて間もないのでいろいろと調整中なところはありますが、使ってみていただければと思います
ではでは～
ドット絵をきれいに表示できるCustom Elementをつくってみた
ずいぶん前のエントリーのとおり Custom Elementをつくってみたわけですが、この経験をいまいち活用できておらず、もうちょっと実用的なものを作ってみようという気持ちになりました。そこで、「ドット絵を拡大してもきれいに表示される要素」を作ってみました。
ソースコードはこちら。 github.com
実際に動いているようすはこちら。 <pixelart-img> タグで画像を描画することで、拡大してもぼやけたりしません。
garakuta-toolbox.com
（ほんとは <pixelart> タグにしたかったのですが、Custom Elementsの命名規則として「ダッシュが一つ以上入っていること」が必須（ref）のため、<pixelart-img> としています。）
Canvasをつかって、等倍のドット絵をn倍にした画像を動的に作成することで、アンチエイリアスがかからないようにしています。最近のブラウザなら image_rendering プロパティを利用して似たようなことができますが、ブラウザによって若干動作が異なったり、IEでは使えなかったりということでこのようにしてみました。
npmパッケージとして公開しているので、jsDelivrなどのnpmパッケージを配信してくれるCDNをつかって、以下のようにお気軽につかえます。
<pixelart-img scale="2" src="path/to/pixelart.png"></pixelart-img> <!-- スクリプトはすべての pixelart-img 要素よりも後に配置される必要があります --> <script src="https://cdn.jsdelivr.net/npm/@piyoppi/pixelart-element@0.0.5/dist/pixelart-element.bundle.js"></script>
IEなど一部Custom Elementsに対応していないブラウザも対応したい場合は、たとえば以下のように別途Polyfillを入れる必要があります。
<html> <head> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script> </head>
なにかつかえそうなものを作ってみたくなり、とりあえず公開してみたのでした。自分でも実際に使ってみて、適宜改善していこう～という気持ち。
ではでは～。
