あいこんくらぶ・ぴこぴよのTwitter Developer登録が完了したよ

Twitter連携機能を今後も利用するには申請が必要とのアナウンスがちょっと前にあったので、私の管理するアプリケーションについての申請をしていたのでした。 (従来の「apps.twitter.com」で管理できていたアプリケーションも、Twitterが今後移行する「developer.twitter.com」のダッシュボードで管理できるようにしなければならないということのようなので。。。)

blog.twitter.com

管理しているアプリケーションの中でツイッターAPIを叩いているのは以下のものです。

申請にあたっては概ね以下のようなことを聞かれたような気がします(ちょっとうろ覚え)

  • 個人なのか法人なのか
  • 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でアクリルブロックが作れるようになったので、手持ちの絵をちょっと書き換えてつくってみました。

suzuri.jp

届いたらブログにアップしたりしてみるつもりです。

ではではー。

(自分用めも)背景画像の無限スクロールを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)

さてさていつもの開発報告をばをば。今週はアニメーション作成部分や素材登録まわりの見た目をちょっと整理していたり、認証系をごにょごにょしていたりしました。

アニメーション登録からマップに貼り付けるまで

せっかくアニメーション登録と利用の流れをお見せできる段階まで出来てきたので、まずは動いている様子をば。 概ねこんな感じにアニメーションがつくれます。アニメーションに使いたい画像を一枚選び、ちまちまとコマを追加していきます。もちろんアニメーションの速度も変更できます。

f:id:piyorinpa:20180716221500g:plain
アニメーション作成のようす

このようにして作られた「フレーム」情報を用いて、都度画像から絵を切り出して表示することで、アニメーションを表現しています。この辺の処理はWebGLが効いているはずなのでそんなに重くないはず。。。

私はマップチップ文化な人なのでアニメーション作成はこのようなインタフェースとしたのですが、「gifを取り込めるようにしたほうがよかったかなぁ」など、ちょっと悩んだりもしたのでした。 (まあgif->フレーム情報に変換すればgifの取り込みもできなくはないですが...実際のところどのようなUIが好まれるのかは、いまいちピンと来ていないところがあります。)

つくったアニメーションはこのように適用します。動かない絵も「アニメーション」として登録し、「オブジェクト」に適用します。

f:id:piyorinpa:20180716220815g:plain
アニメーションを適用しているようす
(くるくるまわっている画像はあいこんくらぶ::八面体クリスタル (bunaguchiさんの作品)から拝借しました)

こんなかんじに「オブジェクトを置き->アニメーションを適用」のながれでマップを作っていきます。実際に使ってみると、もうちょっと調整の余地がありそうなので、 ちまちまと手を入れる感じにしようと思っています。

テクスチャの認証系まわりの処理の作成

アニメーションに使う画像は「テクスチャ」と呼びます。他の人のテクスチャを勝手に使われないように、 基本的にはテクスチャの持ち主とマップの持ち主が一致していることを条件としたいので、そのあたりを確かめるための処理を作っていたりしました。 おためしでJWT(JSON Web Token)をつかってテクスチャ利用の認可トークンをサーバ側で発行し、必要に応じて検証するようにしてみています。

雑記

「テストプレイどうしようかなー」と思い始め、ふとTwitterのアンケート機能を使ってみることに。どうでもいいですが、いつも「1票も入らなかったら落ち込むなー」と思いながら アンケート機能を使うことを躊躇しているのですが、今回は思い切ってみました。結果は以下の通り。

f:id:piyorinpa:20180716222910p:plain
結果はこんなかんじでした

テストプレイ「やってみたい」という方がいらっしゃってうれしいです。まだぜんぜん何も決めていませんが、公開前に一回クローズドなテストプレイ環境をつくってもよいかもしれないなーと 思ったのでした。

ではではー。

開発報告(7/9)

きょうは「みんなでつくるダンジョン」の開発報告をば。消化したタスクリストを眺めながら「何を紹介できるかな~」と思っていたのですが、 そういえばログインの様子とかマップ上を動く様子とかを未だに動画でお見せしていないなと思ったので、きょうはその辺の様子を紹介しようと思います。

(ようやっとこの一連の流れをお見せできる程度には出来てきたのでした。)

マップを読みこんでテストプレイする様子

さっそく即席のgif動画をぺたり。なんだかカクカクしていますが、動画編集している余裕がなかったので今回は許してください。(ほんとうはちゃんとスムーズに動いていますが、gifのフレームレートを上げるとファイルサイズが大きくなってしまうので。。。)

f:id:piyorinpa:20180709210858g:plain
ログイン->マップ読み込み->テストプレイまで

ログインすると、「マップであそぶ」もしくは「マップを作る」を選択できます。今回は「マップを作る」を選択し、適当なマップを読み込んでみます。 (動画中のマップチップは墨cmさん、bunaguchiさんのものをお借りしています。)

テストプレイボタンを押すと、予め登録したアバターをつかってマップ内を移動できます。もちろんマップを接続する「コネクタ」が適切に設定されていれば、他のマップに移動することもできます。

ロゴを走らせるようにしてみた

ログイン時に表示されるロゴを走らせるようにしてみました。

f:id:piyorinpa:20180709211742g:plain
ロゴが走るよ!

みんなでつくるダンジョンのウェブサイトは、なるべくわくわく感がでるデザインにしたいなぁと思っていたので、サイトに動きをつけたかったのでした。 そこで、とりあえずキャラクターを走らせるようにしてみたのです。この走るキャラクターは3コマで構成されているのですが、普段絵を描かないので、ほぼ1日がかりで描きました。たいへんだった。。。

ログインまわりのデザインはもうちょっと手を加えて、うるさくない程度にわくわく感が出せればよいかなと思っています。私にはデザインの知識がないので、やっぱりこの辺で触りだけでもお勉強しておいたほうがいいのかな。

雑記

やっぱり動画のほうがわくわく感が伝わるかなぁと思うので、これからもなるべく動いている様子をお伝えできればなーと思っています。 しかし、今は「とりあえず動く」段階から「ちゃんとサーバに上げて使えるようにする」段階になってきているのですが、 進捗としてお伝えしづらい(目に見える機能の実装ではない)分部が多いので、なかなかやる気の維持が大変なのでした。

ではでは~