開発報告や近況報告など（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でアクリルブロックが作れるようになったので、手持ちの絵をちょっと書き換えてつくってみました。
届いたらブログにアップしたりしてみるつもりです。
ではではー。
（自分用めも）背景画像の無限スクロールをCSSアニメーションでつくる
この手の話題はいろいろなところで既出だとは思いますが、自分用にメモをば。
CSSアニメーションをつかって背景画像の無限スクロールをする方法です。画像の横スクロールをしたくなったのですが、以下のようにしてみました。
CSSアニメーションのキーフレームに background-position （背景画像のオフセット量）を設定して、背景画像を3秒で画像1枚分だけ横スクロールさせます。
.toppage-header__bg { width: 100%; height: 1000px; background-image: url('images/top_bg.png'); animation-name: scroll-header-bg; animation-duration: 3s; /*3秒で画像1枚分スクロールする*/ animation-timing-function: linear; /*再生速度を一定にする*/ animation-iteration-count: infinite; /*アニメーションの無限再生*/ } @keyframes scroll-header-bg { 0% { background-position: 0 0; /*初期値を設定する*/ } 100% { background-position: -2464px 0; /*画像サイズに合わせて変更する（負号で左スクロール）*/ } }
CSSアニメーションとかトランジションとか、毎度プロパティ名とか忘れちゃうのですよね。というわけでメモしてみたのでした。 ただいまみんなでつくるダンジョンの紹介ページを作っているのですが、CSSアニメーションをちょいちょいと使ってみようと思っています。アニメーションを入れるのは楽しいなぁ。
ではでは。
開発報告（7/16）
さてさていつもの開発報告をばをば。今週はアニメーション作成部分や素材登録まわりの見た目をちょっと整理していたり、認証系をごにょごにょしていたりしました。
アニメーション登録からマップに貼り付けるまで
せっかくアニメーション登録と利用の流れをお見せできる段階まで出来てきたので、まずは動いている様子をば。 概ねこんな感じにアニメーションがつくれます。アニメーションに使いたい画像を一枚選び、ちまちまとコマを追加していきます。もちろんアニメーションの速度も変更できます。
このようにして作られた「フレーム」情報を用いて、都度画像から絵を切り出して表示することで、アニメーションを表現しています。この辺の処理はWebGLが効いているはずなのでそんなに重くないはず。。。
私はマップチップ文化な人なのでアニメーション作成はこのようなインタフェースとしたのですが、「gifを取り込めるようにしたほうがよかったかなぁ」など、ちょっと悩んだりもしたのでした。 （まあgif->フレーム情報に変換すればgifの取り込みもできなくはないですが...実際のところどのようなUIが好まれるのかは、いまいちピンと来ていないところがあります。）
つくったアニメーションはこのように適用します。動かない絵も「アニメーション」として登録し、「オブジェクト」に適用します。
こんなかんじに「オブジェクトを置き->アニメーションを適用」のながれでマップを作っていきます。実際に使ってみると、もうちょっと調整の余地がありそうなので、 ちまちまと手を入れる感じにしようと思っています。
テクスチャの認証系まわりの処理の作成
アニメーションに使う画像は「テクスチャ」と呼びます。他の人のテクスチャを勝手に使われないように、 基本的にはテクスチャの持ち主とマップの持ち主が一致していることを条件としたいので、そのあたりを確かめるための処理を作っていたりしました。 おためしでJWT（JSON Web Token）をつかってテクスチャ利用の認可トークンをサーバ側で発行し、必要に応じて検証するようにしてみています。
雑記
「テストプレイどうしようかなー」と思い始め、ふとTwitterのアンケート機能を使ってみることに。どうでもいいですが、いつも「1票も入らなかったら落ち込むなー」と思いながら アンケート機能を使うことを躊躇しているのですが、今回は思い切ってみました。結果は以下の通り。
テストプレイ「やってみたい」という方がいらっしゃってうれしいです。まだぜんぜん何も決めていませんが、公開前に一回クローズドなテストプレイ環境をつくってもよいかもしれないなーと 思ったのでした。
ではではー。
