みんなでつくるダンジョンのテストプレイ動画を撮ったよ
みんなでつくるダンジョンのテストプレイ動画（編集したマップを自キャラで移動したり、他のマップに移動したりしている様子）を撮ってみました。トップページに掲載する動画を撮るための練習として撮ったものです。 こんな感じにいろいろな人が作ったマップを相互につなげて遊べるようなものをつくっております。
（素材はbunaguchiさん、墨cmさんからお借りしたものを使っております）
マップの編集の様子もぺたり。このようにアイテムをぺたぺたと貼りながらアニメーションを適用していきます。さらに位置固定とするかどうか、衝突時の跳ね返り処理をするかどうか、などなどを設定し、マップをつくっていきます。
いままでこのような動画を公開する際はgifアニメーションしかアップしていなかったのですが、 やっぱりちゃんと動画で撮ったほうが滑らかに動くし、今後はめんどくさがらずに動画を撮るようにしよう...。
（Windowsだと、Windowsキー＋Ｇキーでかんたんに動画キャプチャできると知ったのでもう大丈夫なはず）
ちなみに、動画内でうごいているキャラクターは墨cmさんに描いていただいたのですが、
なんとわたしのアバター画像（いわゆるうちの子）から描き起こしていただいたものなのです。うれしい～。
ほかにもキャラクターやマップチップ画像をいろいろ描き起こしていただいたので、ちゃんと活用した動画をトップページに載せるぞー。 （このように紹介動画やスクリーンショットにつかっていい素材は引き続き募集中です）
もうあと2か月くらいで製作開始から1年くらい経つことになるのだなぁ。訳あって全く開発できていない期間が3か月くらいあったのですが、それにしてももう半年くらいは経っている。。。
ではでは！
Jest + WSL でテストが通るときと通らないときがあって困っていたときのメモ
タイトルの通りのトラブルで困っていた時のメモ。7～8つくらいのテストファイル、180くらいのテスト項目のテストを走らせると、エラーになるときとならないときがあってふぇ～わからん！ってなっていました。
package.jsonに以下のように書いて、 npm run test していました。
...省略... "scripts": { "test": "jest" }
こんな雰囲気のエラーが出たり出なかったりしていたのでした。
ENOENT: no such file or directory, open 'fuga.json' Cannot find module 'hoge' from 'fuga.js'
開発環境はWindows10, Windows Subsystem for Linux 。ひとまず並列実行をやめるべく、以下のようにpackage.jsonを変更したらテストが安定して通るようになりました。 これどうやったら並列実行でもテストが安定して通るようになるのだろう...。引き続き調べてみないとなぁ。
...省略... "scripts": { "test": "jest -i" }
開発中のぼやきブログでした。ではでは。
開発報告や近況報告など（8/27）
相も変わらず「みんなでつくるダンジョン」はちまちまと開発中なのでした。
背景の遠景スクロールに対応した
背景の遠景スクロールに対応しました。これでちょっとした奥行きが演出できるようになります。また、マップであそんでいる最中は画面のサイズを800x600pxに制限するようにしました。こうすることで、環境の差異によるマップの見え方の変化を防ぎます。（表示領域がちっちゃくなっちゃうのですが、見え方の差異のほうが影響大きそうなのでこのような対応にしてみています）
バグをつぶしたり仕様を決めたり
最低限必要な機能がそろいつつあるのでバグをつぶしたり、あいまいな仕様を明確化したりしています。ようやっとJestによるJavaScriptのテストコードも動くようにしたので、仕様を決めながら最低限必要なテストコードを整備したりしています。規模が大きめの開発になってしまったので、そのぶんバグも多くて大変...。
トップページ作っている
そろそろ認知されたい！ということでトップページをこさえています。かっこいいページにしたいのだけど、なかなかそうならないのでつらぽん。
納得がいったタイミングで公開出来ればよいなぁと思っております。
のこりリリースまでに実装したいものたち
以下の機能を実装したいぞ！
- メッセージ表示機能（かんばんの文章を表示したり、キャラクターがしゃべったりするみたいなやつ）
- 床を動かせるようにする機能
目途が経ったらクローズドβテストをやりたい！と思っているので、興味のある方はひきつづきこちらのブログをご覧いただきたくです。あともうちょっとで1年経ってしまうので、そろそろ他の人の反応も欲しいなぁ～と思っているのでした。
ではでは～。
あいこんくらぶ・ぴこぴよのTwitter Developer登録が完了したよ
Twitter連携機能を今後も利用するには申請が必要とのアナウンスがちょっと前にあったので、私の管理するアプリケーションについての申請をしていたのでした。 （従来の「apps.twitter.com」で管理できていたアプリケーションも、Twitterが今後移行する「developer.twitter.com」のダッシュボードで管理できるようにしなければならないということのようなので。。。）
管理しているアプリケーションの中でツイッターAPIを叩いているのは以下のものです。
- あいこんくらぶ(https://iconclub.jp)
- ぴこぴよ(https://picopiyo.iconclub.jp)
申請にあたっては概ね以下のようなことを聞かれたような気がします（ちょっとうろ覚え）
- 個人なのか法人なのか
- APIのどのような機能を利用するのか
- アプリの利用目的（選択肢から適切なものを選択後、英文でアプリの概要を説明）
アプリの概要（利用目的）については、「pixelartとかゲームのスクショをツイートするアプリだよ。pixelartは小さいから大きくして投稿できるところがユーザーにとって便利だよ。公開しているアプリはこれだよ（あいこんくらぶ・ぴこぴよのURLを添えて）」みたいな感じのことを書きました。
申請を出したのが7/28、Approveされたのが8/11なので、2週間くらいかかったことになります。 とりあえず申請は通ったっぽいので、あいこんくらぶ、およびぴこぴよについてはツイート機能を維持できそうなのかな。
（実は既存アプリの維持はこれでいいのか？という気持ちでよくわかっていないのですが、「developer.twitter.com」に既存のアプリケーションが存在するので問題ないのかな？という気持ちです）
最近Twitter APIの仕様がちょいちょい変わっていて（先日はコールバックURLが設定されていないアプリケーションの認証に失敗するようになったりと） ふとした拍子にアプリケーションが動かない！みたいになりかねないので、お気づきの点がございましたら遠慮なくTwitter ( https://twitter.com/piyorinpa ) もしくはメール( contact（あっとまーく）iconclub.jp )でおしらせください。
ではではー
開発報告（8/13）
いつもの開発報告をば。久々の更新ですが、「ふぇー進捗ダメだー」という感じで進めております。主な作業は以下の通り。
本番に近いサーバ環境を整えてデプロイしてみる
ずっと開発PC上でのみの動作確認をしていましたが、そろそろサーバを用意してちゃんとデプロイできるようにしないとなーと思っていたのでした。
とりあえずHerokuとAmazon S3をつかって本番環境っぽいサーバ環境を作って動くようになりました。これで動作確認が捗るようになるといいなぁ。。。
今回クラウドストレージ（Amazon S3）を使うにあたり、Railsの新しい機能であるActiveStorageで組んでみたりなどしていました。 もともとAPI方式で開発を進めている関係もあってか、それほど導入も難しくなく行うことができました。
ちなみにActiveStorageは現状ディレクトリ構造は組めないのですね。今後できるようになるのかもわからなさそう。 github.com
ローカル開発環境の整備など
ActiveStorageの導入後、開発環境上でActiveStorageでアップロードした画像サムネイルを取得すると、なぜかレスポンスが返ってこないというトラブルが頻発していました。 （おそらく本番環境ではこのようなトラブルは起きていないと思われ。）
アプリケーションサーバのログにも「Started GET」なログが残るものの、「Completed 200」なログ（レスポンスログ）が残らず「ふぇーわからん」となっていたのでした。 一度このトラブルに見舞われるとアプリケーションサーバを再起動しなければならず、はてどうしたものか。。。
なんとなくActiveStorageの問題というよりはアプリケーションサーバの問題なのでは？と思い検索を進めてみると、こんなIssueがヒットしたのでした。 github.com
スレッドのデッドロックかも？とのことなので、シングルスレッドで動作するように設定を変更したところ、たまにレスポンスに失敗することはあるものの 完全にリクエストを受け付けなくなってしまうという感じには（今のところ）なっていないので、とりあえず開発環境については様子見かな。。。と思っています。 （シングルスレッドで動かして様子を見ながら原因を切り分けていく感じで様子見をしてみようかなと思っています。）
原因がよくわからずもやもやするので、引き続き様子を見ながら直せそうなら直すという感じかなぁ。。。
という感じで、環境構築周りをメインに進めていたので、なかなか「こんな機能を作っているよ！」な報告ができていませんが、ちゃんと作業はしているんだなーと思っていただければうれしいです。
ではではー！
Dockerでphpの開発環境整備など（開発報告）
かねてからやらないとやらないと、とおもっていた、あいこんくらぶ ( https://iconclub.jp ) ・ぴこぴよ ( https://picopiyo.iconclub.jp ) の開発環境整備（改善）をいい加減やらねばなーと思っていたので、週末をつかってガッとやってしまったのでした。（これやらないといろいろと捨てられなかったりするので、、、）
そのときの作業のメモを残しておきます。
phpのDocker ImageをつかってDockerfileをつくる
まずはphpのDocker Imageをとってきます。公式のイメージ がありますが、利用バージョンや目的に応じていくつかの種類があります。今回は開発環境ウェブサーバ用としたいので、 Apacheとセットのものを使います。
最終的なアプリサーバのDockerfileはこんな感じ。
FROM php:7.0-apache RUN docker-php-ext-install pdo_mysql RUN a2enmod headers RUN a2enmod rewrite COPY config/php.ini /usr/local/etc/php/
MySQLをデータベースとして使いたいので pdo_mysql をインストールします。pdo_mysql が入っていないことに気づかずにずいぶん時間をつかってしまった...。
（こちらの記事を参考にしました: PDO MySQL driver not found · Issue #62 · docker-library/php · GitHub）
さらにさらに、Apacheで有効になっていないモジュールは有効にしてあげる必要があるので、a2enmod をつかって有効にしたいモジュールを設定します。これをやらないと mod_rewrite 等が使えないのでした。
データベース周りと接続する
データベースにはMySQLを使いますが、MySQLまわりも公式イメージをつかいます。このイメージは各種環境変数を設定することで、ルートユーザーのパスワードを設定したり、ユーザーを作成したりすることができます。
MYSQL_USER, MYSQL_PASSWORD でユーザー名とパスワードを、 MYSQL_DATABASE でデータベース名を設定しておくと、ユーザーとデータベースが1つずつ作成され、作成されたデータベースに対して GRANT ALL 権限でアクセスすることができます。開発環境として簡単にDBアカウントを用意できて便利。
最終的な docker-compose.yml は概ねこんな感じ。これで docker-compose up で開発環境が起動できるようになりました。
version: '3'
services:
app:
build: .
hostname: hoge.local
container_name: app
ports:
- '8000:80'
volumes:
- ./app/:/var/www/html/
links:
- db
db:
image: mysql:5.7
container_name: db
ports:
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: piyo
MYSQL_USER: user
MYSQL_PASSWORD: piyo
MYSQL_DATABASE: foo
もうちょっと様子を見て、これでよさそうならよしとしたいぞ。ではではー。
今週のだらりんぴっく(7/16の週)
さてさて、今週のだらだらの記録をば。とはいいつつも、今週はだらだらのほうも、週末開発のほうもあまり捗らなかったのでした。
とりあえずだらだらのお供にしたまんがをぺたり。
bookwalker.jp ひさびさに少女漫画っぽいやつを買ってみたのですが、絵も話も好みでよかったです。
www.comic-ryu.jp ずっと積読していたやつをようやく読んだのでした。最新刊が出てからしばらく続刊が出てない（休載している）みたいですが、いまは連載されているのかな...。単行本は続きが気になるタイミングで終わっているので、首を長ーくして続きを待ちます。
積読しているまんがが溜まりつつあるので、そろそろ消化していきたいぞー。
雑記その1
そういえば、Amazon Primeのセールがこの間ありましたが、11インチくらいの液晶ディスプレイを思わずポチってしまったのでした。（たしか1.2万くらいだったような...。同じものがAmazonでみつけられなかった。リンク先はちょっとだけ大きいバージョンのディスプレイ。） https://www.amazon.co.jp/ELECROW-11-6インチディスプレイ-最大解像度1920X1080-PS4WiiU-Raspberry/dp/B07871VPCS/
紹介ページの日本語が若干怪しかったりしていたこともあり、あまり大きな期待はしていなかったのですが、シンプルでよさそうな感じです。 いまのところ動画を見ながら作業するのに重宝しています。
雑記その2
SUZURIでアクリルブロックが作れるようになったので、手持ちの絵をちょっと書き換えてつくってみました。
届いたらブログにアップしたりしてみるつもりです。
ではではー。
