最近の開発記録(20201117)

こんにちは。最近の開発記録をまとめるなどしました。

見下ろしビューのマップをつくれるようになりました

みんなでつくるダンジョンで見下ろしビューのマップをつくれるようになりました。今まではサイドビューマップしか作れませんでしたが、 こんなかんじのRPGみたいなマップがつくれるようになりました。

f:id:piyorinpa:20201117234452p:plain (このマップの画像はぴぽやさん(https://pipoya.net/ )の素材をお借りしてつくりました)

dungeon.garakuta-toolbox.com

見下ろしビューモードの設定 をすることで、重力が無効になり、十字キーで上下左右に移動できるマップとなります。マップ同士の接続も通常通り行えます。

公開したてなので仕様がちょくちょくかわるかもしれませんが、なにとぞよろしくお願いします。

ちなみに、この機能の公開に当たり、描画速度の最適化なども行っています。ちょっとだけパフォーマンスが向上していると思います。

WebGLをさわりはじめました

3Dっぽい何かを作りたくなり、three.js などを使って何かをつくってみるといいかなと思っていましたが、この際WebGLをちょっとちゃんと触ってみようかなということで最近なんとなく遊んでみています。

https://webglfundamentals.org/ を参考にしながらポチポチすすめています。ようやっとシェーダとかとかが分かってきた感じ。ちょっとくらいであれば 何とかコーディングできるようになったので、箱クラスを定義して、箱をくるくるさせることができるようになりました。

いまのところ、WebGLが難しいというよりかは、線形代数的な知識を思い出すのにちょっと時間がかかる...という感じでしょうか。

f:id:piyorinpa:20201118002045g:plain
くるくる

ソースコードはこちら📝

これを活用して何をつくるかは決めていませんが、何か新しいものが作れるようになればいいなと思っています。

ではでは。

Deviseのアカウント情報をFirebase Authenticationにお引越ししてみる

Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証まわりの処理は外部サービスにお任せするのもあり?という気持ちになっているのでした。

今回は、以下のような条件で認証まわりの面倒を見てくれそうなサービスを選んでみました。

  • Twitterログインに対応していること
  • 趣味程度の利用なら無料枠で収まりそうなプランがあること
  • 既存のアカウントがお引越しできそうな環境があること

ということで、Firebase Authentication を試しに使ってみることにしました。REST APIも充実していそう なので、このへんをつかってサーバサイドでもよしなにできたり、既存の実装に合わせてスムーズに移行できそう?などをもくろんでいます。

firebase.google.com

まずは、ドキュメントに記載されたフォーマットに従い、アカウント情報を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"
}

メールアドレスの検証(サインアップしたら確認メールのリンクを踏まないとアカウントが有効化されない機能)とかとか、必要な機能はそろっているようなので、ためしにいろいろいじってみて、よさそうならお引越しも検討しようと思ったのでした。

認証まわりの機能追加は、セキュリティとの兼ね合いもあってなかなか慎重になってしまうので、信頼できそうな外部サービスにお任せすると気持ち的にも楽ですし。

ではでは~。

ダンジョンの中におみせを出してみました

こんにちは。最近「みんなでつくるダンジョン」に「リンク先遷移機能」を実装しました。こんなかんじに、マップ内からほかのページへと誘導できます。

f:id:piyorinpa:20200905182153g:plain
マップに訪れた人をウェブサイトに誘導できます

この機能については メッセージ表示プラグイン に使い方を載せていますので、気になる方はみてみてください。

話はかわりますが、実は私はじぶんの絵のステッカーを作って使いたいなと思い、こんなお店をこっそり開いていたのでした。

suzuri.jp

こんな感じに使っています。絵の出来はともかくとして、個人的にはそれなりに満足しているわけです。ちなみに貼ってから2年くらい経っていそう。

f:id:piyorinpa:20200905182759j:plain
こんなかんじにつかっています

で、売れるかどうかはともかくとして、マップ内でお店を開くことができたら面白いかもな~とずっと思っていたのですが、今回作った「リンク先遷移機能」をつかえばそれっぽくなるのでは?と思い立ち、 こんなマップをつくってみたのでした。

dungeon.garakuta-toolbox.com

品物の前の看板を「みる」(PCの場合はZキーを押す)と、販売ページにジャンプできるという仕組みです。ちなみに、このマップで売っている物たちは、100円くらいの利益が出るようになっています。

これらのおみせっぽいマップをつなぐための「デパート」マップもつくってみました。

dungeon.garakuta-toolbox.com

このデパートマップ、みなさんのマップも接続することができます。じぶんのおみせマップを接続したうえで、デパートマップ内のサービスカウンタで出店申請をしていただければ、お店への入り口の扉を開けます。 (お試しな試みなので、とくにルールなどは設けていないのですが、お店の扉を開ける前に接続先のおみせのようすを見させていただきたいと思います。ただし、暴力的・性的要素の強いもののデパートマップへの接続は今回はNGとさせていただきます)

f:id:piyorinpa:20200905184848p:plain
サービスカウンタ

たとえば、マップ素材を展示しつつ販売ページに誘導するとか、ゲームのマップの一部をダンジョン上に作ってゲームの販売ページに誘導するとか、そんなかんじで使ってみていただけるといいのかなと思っています。 もちろん、これ以外のつかいかたもOKです。 何かわからないことがあれば @piyorinpa までお気軽にどうぞ。

ではでは~

在宅勤務もこなれてきたのでいろいろまとめてみる

昨今の新型ウイルスのあれやこれやで私自身も在宅勤務が続いているのですが、そういえばもう半年くらいこんなかんじなのか~ということで、私の在宅勤務のようすを記録しておこうかなと思ってこんな記事を書いています。

f:id:piyorinpa:20200825200858p:plain

わたしの在宅勤務環境

f:id:piyorinpa:20200825202126j:plain
わたしの在宅勤務環境

(ちょっと話はそれますが、わたしはいろいろなひとのデスクの画像を見るのがちょっとすきで、インターネット上のそういう画像をたまに眺めたりしています。)

こんなかんじのところで仕事しています。趣味開発もここでしています。もともと趣味開発のための環境(デスクとか椅子とか、各種入力デバイスとかとか)はそれなりに整っていたので、これをおしごとにも対応できるように工夫するなどしています。

概ね以下のような環境になっております。

  • デスクはインターネット通販で随分前に買った幅120cm・奥行60cmのもの。引き出しもついていたけど椅子の肘置きと干渉して邪魔なので取ってしまった
    • 天板のサイズは小さくもなく大きくもない大きさでちょうどよい
  • キーボードはREALFORCE 91UBK、トラックボールELECOMのHUGE(これらは購入後3年くらいは経っていそう)
  • おしごとには会社支給のMacBook Proクラムシェルモードで運用、趣味開発にはWindows機のゲーミングPCを使用
    • 二つのマシンを同じ入力デバイスで運用するので、USB切り替え器をつかってボタン一つで各種入力デバイスがいずれかのマシンに接続されるようになっている(これをつかっている)
    • あたらしいグラボが出たら趣味開発PCを買い替えたい...
  • 中央のディスプレイはDELL U2720Q
    • MacBook ProとUSB TypeC で接続すると充電とディスプレイ接続が同時に行えて便利
    • ディスプレイのオーディオ出力にスピーカーを繋ぎ、Mac機・Win機で同じスピーカーをつかえるようにしている
  • 机の右に置いてある小さめのディスプレイはAmazonで買ったフルHDの中華ディスプレイ
    • 各種音楽配信サービスのプレイヤーとか、おしごと時はSlackとか資料を表示したりしている
    • この小ささが個人的には気に入っている
  • コーヒーを飲むと水ものみたくなるので、コップはふたつ置いておく
  • ヘッドホンはノイズキャンセリングつきのやつ。ノイズキャンセリングが付いているとビデオ会議中の自分の声が気にならない気がするので重宝している
  • Macがとても熱くなるので部屋の唯一のデスクファンをMacBook Proに奪われている
  • 椅子はこれ をつかっている
    • なぜか黄緑色だけめちゃ安かったので、というそれだけの理由で買ったやつ。だけど、ロッキング機構とか肘置きとかはちゃんとついてる
    • 在宅ワーカーは椅子にこだわるべき、という話はよく聞くので高級いすに興味はあるけどなかなか勇気がでない
  • 複雑なことは絵に描かないと理解できない性分なので持ち運びできるホワイトボード nu board をずっと愛用している
  • 画面下にウェブカメラがあるけど位置が気に入らない

よさそうポイント

  • 在宅勤務環境をアップデートする == 趣味開発環境がアップデートされるのでお得感がある

イマイチポイント

  • ウェブカメラの位置が「下から見上げる」形になるので、こういうかんじの映り方をしてしまう

    f:id:piyorinpa:20200825000448p:plain
    ウェブカメラのようす(イメージ)

  • 趣味も仕事も同じ場所で行うので気分転換が至難の業

    • 業務が終わる -> すぐに趣味開発へ、という気持ちになりづらい
    • 趣味開発の場所と仕事の場所を分けると各種開発環境もそれぞれ用意しないとなのでコスパがだめになる

在宅勤務のよいところ

私が感じるよいところは概ね以下の通りです。だいたい世間で言われているようなメリットをわたしも感じています。

  • 通勤時間が無くなったことで通勤時間分がそのまま自由時間として開放された
    • 電車に乗らないとこんなに疲れないのか!という気持ちになる
  • 朝ごはんがゆっくり食べられる
  • 自宅~会社との物理的距離がある程度遠くても困らない
    • 住宅にかかる費用を抑えることができる可能性が高まった
  • 仕事中にスピーカーから好きな音楽やラジオを流せる
    • オフィスに通勤していた時はヘッドホンをつかっていたけど、耳がつかれるのでスピーカーのほうがよい
  • 空調の温度を自由に設定できる
    • これは夏の暑い時期などに地味にうれしいポイント。空調の位置や温度設定を気にしなくてよいのはとてもよい

私はとても心配性なので、このご時世下だと、わずかでも体調に違和感が...となったときは出社をすごくためらうことになるし、体調を悪くできないというプレッシャーで体調を壊しそうと思うので、諸々落ち着くまでは在宅勤務はありがたい、という気持ちです(たぶんこれが現在の状況下における個人的在宅勤務最大のメリット)。

(わたしの状況下での)在宅勤務に関する課題

(少なくとも私自身の)在宅勤務に関する課題はこんなかんじです。

  • いままで気にしなかった住環境の問題
    • 文字通り家に「ずっと」いるので、今まで気にならなかったいろいろなことが気になりだす
    • 集合住宅に住んでいるので周りの生活音が以前に比べてすごく気になるようになってしまった(隣の人が大きな声でしゃべっていると、会話の内容はわからないけどしゃべっている雰囲気が壁から伝わってくるとか)
    • (わたしの勤務体系が大きく変わったことでライフスタイルの変化があったのと同じように)隣近所のライフスタイルによる変化と思われる音問題にまいって引っ越しをするなどした
    • 同じような問題が起きないように配慮して引っ越しをしたことである程度改善されたけど、周囲の小さな物音などにびくびくするようになってしまったし、部屋でしゃべるときは小声になる癖がついてしまった(とてもこまっている)
  • 「外に出よう」という強い気持ちがないと外に出なくなる
    • ずっと家にこもっているとメンタルがダメになってしまう大きな原因になりそう(経験談)なので、生活の決まった流れに「外に出る」という課題を強い気持ちで追加する必要がある
    • たまにはお昼ご飯をお弁当にすることで、昼ごはんの調達先開拓を外出のきっかけにするとかもあり
  • 慣れないテレビ会議
    • テレビ会議は間がむずかしかったり(ほかの人と自分の発言がかぶってしまう、とか)、相手のようす(表情とか雰囲気とか)がわかりづらいので、少ない情報量の中で行間を読み始めてしまい、勝手に落ち込むことも。
    • カメラをONにしてもらうなど、情報量を増やすことでだいぶ改善された感。カメラONにできない人向けのバーチャルアバター表示機能とかほしいかも(そういうものがあるだけでもずいぶん違うと思う)。カメラ越しにリアクションをもらえると一人でしゃべっている感が軽減されてなおよい。

あらゆる物事がいままでと異なるので、とにかくメンタルの健康を意識的に保つようにしなければならないという気持ちがあります(性格的な要素が強く出そうなところですが)。通勤していると、移動による視覚的な刺激とか適度な運動が自動的に得られますが、在宅勤務下だとこれらを意識的に行う必要があると感じました。 この「意識的に」というのが案外難しいのですが、いろいろと試してわかりかけ始めていそうな気配があります。

まとめ

この状況下における在宅勤務はとてもありがたいので、落ち着くまではこの体制が続くととてもよいと思う一方で、たまにはオフィスに出社したいなという気持ちがあります。状況が落ち着いたら週1回程度はオフィスに出社したい、くらいの気持ちなのでした。たまに出社することで適度な刺激が自動的に得られるのではと期待しているのですが、ずっとオフィスで / ずっと自宅で、という環境よりもより楽しく働けるのかなと思っています。

ではでは。

あらためてみんなでつくるダンジョンの紹介をば

こんにちは。実は公開から1年経っている「みんなでつくるダンジョン」ですが(公開日は2019/4/27)、最近は細かいところに手を入れたりしています。パラメータ調整でキャラクタの動きを操作しやすくしたりとかとか。 公開からだいぶたったということで、改めてどんなものになったのか?という点をご紹介したい~ということでこの記事を書いています(公開当初から機能もだいぶ増えたので、あらためてそのあたりも整理しながら書いていきます)。

みんなでつくるダンジョンってなに?

アクションゲームのようなマップをつくることができます。つくったマップ上をたんけんしたり、他のマップとつなげて行き来できたりします。 (この辺の説明は 公開当初の記事 からあまり変わりありません)

マップをつくったり

f:id:piyorinpa:20200819221747p:plain
こんな感じのマップがつくれます

じぶんで用意した画像などの素材をつかったり、他の方が公開している素材を利用してアニメーションを作ったり、壁などのパーツを配置してマップをつくっていきます。

(1MB以内のPNG画像を30枚まで登録できます。いわゆるマップチップ・タイルセットと呼ばれる形式の画像があるとつくりやすいですが、必ずしもこれらの形式である必要はありません。 くわしくは 📚ヘルプ を参照してください。)

はじめてマップをつくるときは、公式素材を活用してアニメーションをつくってみるといいかもです。マップ作りに向いている素材を確認してみてください。(とりあえず📚チュートリアル とか、📚つくりかた動画 をみるとよいかもです)

また、マップ上に配置した「パーツ」に動きを与えたりできる「プラグイン」という仕組みを使うと、ちょっとしたゲームっぽくできます。例えば以下のようなマップがつくれます。

ちなみに、PC・スマートフォンいずれのデバイスでもマップをつくったりあそんだりできるので、じぶんのマップをどこにいてもお手入れできます。

2MB以内のoggファイルをアップロードすることができ、マップのBGMとしてつかうことができます。

マップを公開したり

つくったマップを「公開」状態にしておくと、マップ毎にURLが発行されるので、これをつかえばブログやSNSでマップを共有できます。たとえばこんなかんじ。

「この画像素材を使うとこんなマップがつくれます」みたいなデモ用途でつかったりするのもいいかもですね。みんなでつくるダンジョンはドット絵に比較的優しい(拡大してもドットがぼやけない)ので、ドット絵を良い感じに見せるための、展示場のようなマップをつくってみてもいいかもしれません。

マップをつなげたり

「コネクタ」と呼ばれるワープ地点のようなものを使うとほかのマップと接続することができます(ほかのマップにワープできるようになる)。じぶんでつくったマップをたくさんつなげればより広い世界をつくることができます。

たとえば、以下のマップに入ってみると、マップの端などに矢印マークが見えますが、これがコネクタです。触れると設定したマップに移動できます。 dungeon.garakuta-toolbox.com

f:id:piyorinpa:20200819225320p:plain
画面左にあるやじるしが「コネクタ」

また、ほかのひとが公開している「コネクタ」とも接続できるので、みんなでつくるダンジョン内の世界にマップを参加させることもできます。マップ同士のつながりは ワールドマップ でみることができます。

f:id:piyorinpa:20200819224516p:plain
マップ同士のつながり

マップをたんけんしたり

コネクタでつながれたマップをたんけんしてみるのもよいです。後述する「アイテム」をあつめたり、マップによっては「いいね」ができるパーツが設置されていることもあるので、いいなとおもったら「いいね」してみましょう。(📚いいねカウンタの設置方法はこちら

f:id:piyorinpa:20200820232036p:plain
ハートマークに触れるといいねできます(要ログイン)

(マップの製作者さんへリアクションを届けるいい感じの仕組みをもう少し用意したいなと思っているのですが、何かいいアイデアがあったらおしえてください)

アイテムをつくったり

「アイテム」をひろったり、ひろえる「アイテム」を設置したりできます。ひろったアイテムは眺めたり、場合によっては使うことができます。 (プラグインを駆使すると、アイテムをつかったときに起きる動作をつくることができるので、マップ作りに興味のある方はぜひに。くわしくは📚ヘルプ を見てみてください)

f:id:piyorinpa:20200819222842p:plain
アイテムをひろうと

f:id:piyorinpa:20200819222949p:plain
アイテム一覧でながめたり使ったりできます

まとめ

というわけで、「マップをつくって・つなげて・あそぶ」ことができるウェブサービスなのでした。もっとマップが増えるとたのしいなと思うので、ゲームっぽい画像素材をお持ちの方だったり、とりあえずマップをつくってみたいぞという方はぜひとりあえずマップをつくってみてください。画像素材もまだ少ないですが、他のユーザーの方々に登録いただいているものを(一定条件の下で)つかうことができます。(登録されている素材を確認してみる

ではではー

みんなでつくるダンジョンで大きなマップをつくれるようになったよ

おひさしぶりです。生活まわりでいろいろあり、最近全然開発できていなかったのでブログの更新もすっかりご無沙汰になっていました(みたいなことを6月あたりにも言っていたけど、いろいろとむずかしく、なかなか本調子にならないのだ。)

ひきつづきちょっとずつやってゆくのでよろしくお願いします。

みんなでつくるダンジョンで大きなマップをつくれるように

いままではマップの最大面積が1500×1500pxという制約がありましたが、これを 3200×3200px に緩和しました(この対応にあたり、描画負荷の調整などを行っています)。 また、マップに設置できるパーツ数も100から150まで増やしました。 以下の画像が目一杯大きなマップをつくってみた様子です(マップチップの大きさは32px四方)。

f:id:piyorinpa:20200814182917p:plain
3200px四方のマップ

上記マップは以下から遊ぶことができます

dungeon.garakuta-toolbox.com

「最大面積」の制約なので、たとえば高さを小さめにとれば、そのぶん幅を大きく取ることができます。

ちなみに、以下の画像が概ね今までのマップの最大面積1500×1500pxに近いマップのようすです(マップチップの制約があり、厳密には1440px四方)。これと見比べると、大きくなったな~感が伝わるでしょうか。

f:id:piyorinpa:20200814183420p:plain
いままでの最大面積めいっぱいつかったマップ

というわけで、ひさびさの開発報告でした。ゆるりとやっていきますが、ご要望などあればツイッターなどなどでお声掛けください。

ではでは~

開発の記録(ぴこぴよにいくつかの機能を追加しました)

この間公開したぴこぴよv2にいくつかの機能を追加しました。

余白なし画像の投稿機能

余白のない画像を投稿できるようになりました。余白を付けると、下図左側のようにツイッターのサムネイル画像の大きさに概ね一致するような画像が生成されますが、下図右側のように(これまでのぴこぴよのように)セットした画像に合わせた画像サイズで 投稿できるようになりました。

f:id:piyorinpa:20200622222513p:plain
余白をつけないときとつけるとき

パレットつき画像の投稿機能

セットした画像に含まれる色を抽出した色パレットをいっしょに投稿できるようになりました。実験的な機能なので、今後ちまちまと仕様を変えたりするかもしれませんが、よければつかってみてください。

f:id:piyorinpa:20200622223335p:plain
パレットの表示

これで、これまでのぴこぴよでできたことはv2でも概ねできるようになったかな、という雰囲気です。ぴこぴよv2に関しては今後もちまちまと手を入れるかもしれないですが、 これまでのぴこぴよは近い将来に廃止されるのでご注意ください。

ではでは。