Twitterの埋め込みタイムラインが使えなくなっていた

ドット絵ツイート支援サービス「ぴこぴよ」のトップページには、#picopiyo のツイートをタイムライン表示するウィジェットを配置していましたが、とうとう動かなくなってしまいました。

picopiyo.iconclub.jp

どうやら今までのウィジェットは廃止され、https://publish.twitter.comを使って新しいものを生成して置き換えないといけないのですが、ハッシュタグ検索結果タイムラインのウィジェットは設置できないようです。 (一応ツイート検索APIは存在しますが、これを使って今までのような検索結果タイムラインを表示するのは手間で面倒...)

ということで、ぴこぴよトップページでの #picopiyoタイムライン表示は取りやめることにしました。「こんなツイートができるよ!」という紹介が目的で設置していたのですが、直すのに手間がかかりそうなので致し方ない。。。

今後#picopiyoなツイートを見たい方は、ご自身が利用しているTwitterクライアントで検索していただくか、#picopiyoの検索結果 からご覧ください。(この記事をご覧の方はぜひ#picopiyoの検索結果も観てみてね!)

ちなみに、たまに #picopiyo なツイートを私も眺めているのですが、「使っていただけてうれしいー」という気持ちになって制作意欲の糧にしております。いつもハッシュタグをつけてツイートしていただきありがとうございます!

ではでは~

みんなでつくるダンジョンにプラグインの仕組みを導入してみたよ

作ったマップをつなげて遊べる「みんなでつくるダンジョン(開発中)」には、以下のような機能を入れたいと思っていました。

  • キャラクターのセリフを表示したり、看板に書いてある字を表示したりする機能
    • キャラがしゃべったりしたほうが楽しそうだなぁと思ったので
  • 物体が常に上下左右に動く機能
    • リフトとかを配置できるようにしてちょっとだけゲームっぽく遊べそう

あくまで「ゲーム制作ツール」ではないので多機能なものは不要と考えていますが、それでも多少マップに動きがあったほうが楽しそうだなと思ったのでした。 というわけで、配置したアイテムに機能を付加することができる「プラグイン」という機能を仮組してみていました。

f:id:piyorinpa:20180917205108p:plain
こんな感じにアイテムに機能を付けられるイメージ

たとえば看板の上で決定ボタンを押したときに「看板のテキストを表示させる」みたいな演出をさせたいときには、以下の動画のように配置したアイテムに対してプラグインを設定します。 (前作の「ステージデザイナー」の反省を生かして、なるべく簡単に設定できるようにしたつもりですがどうなんだろう...)

「直線移動プラグイン」を適用すると、リフトが動くようになったりもします。

キャラがめちゃくちゃ滑っていますが、そのへんもどうにかしないとなぁ。現在は摩擦係数を固定値にしていますが、いくつかの値から選べるようにするとよさそうかなと思っています。 (ただ、リフトの速度が不連続的に反転するということは、上に乗っかっている物体は多少なりとも滑ってしまうことになりそうなので、その辺のバランスをどうするか考えないとなぁ)

初期公開時は限られた種類のプラグインのみを公開予定ですが、今後もちょっとずつ種類を増やしていきたいなという気持ちでもろもろ設計してみています。

ではでは~。

みんなでつくるダンジョンのテストプレイ動画を撮ったよ

みんなでつくるダンジョンのテストプレイ動画(編集したマップを自キャラで移動したり、他のマップに移動したりしている様子)を撮ってみました。トップページに掲載する動画を撮るための練習として撮ったものです。 こんな感じにいろいろな人が作ったマップを相互につなげて遊べるようなものをつくっております。

(素材はbunaguchiさん、墨cmさんからお借りしたものを使っております)

マップの編集の様子もぺたり。このようにアイテムをぺたぺたと貼りながらアニメーションを適用していきます。さらに位置固定とするかどうか、衝突時の跳ね返り処理をするかどうか、などなどを設定し、マップをつくっていきます。

いままでこのような動画を公開する際はgifアニメーションしかアップしていなかったのですが、 やっぱりちゃんと動画で撮ったほうが滑らかに動くし、今後はめんどくさがらずに動画を撮るようにしよう...。

Windowsだと、Windowsキー+Gキーでかんたんに動画キャプチャできると知ったのでもう大丈夫なはず)

ちなみに、動画内でうごいているキャラクターは墨cmさんに描いていただいたのですが、 なんとわたしのアバター画像(いわゆるうちの子)から描き起こしていただいたものなのです。うれしい~。

f:id:piyorinpa:20180909194414g:plain
わたしのうちの子が動いている~!

ほかにもキャラクターやマップチップ画像をいろいろ描き起こしていただいたので、ちゃんと活用した動画をトップページに載せるぞー。 (このように紹介動画やスクリーンショットにつかっていい素材は引き続き募集中です

もうあと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に制限するようにしました。こうすることで、環境の差異によるマップの見え方の変化を防ぎます。(表示領域がちっちゃくなっちゃうのですが、見え方の差異のほうが影響大きそうなのでこのような対応にしてみています)

f:id:piyorinpa:20180826201423g:plain
床等に対して背景が遅れてスクロールする(素材は墨cmさまの提供)

バグをつぶしたり仕様を決めたり

最低限必要な機能がそろいつつあるのでバグをつぶしたり、あいまいな仕様を明確化したりしています。ようやっとJestによるJavaScriptのテストコードも動くようにしたので、仕様を決めながら最低限必要なテストコードを整備したりしています。規模が大きめの開発になってしまったので、そのぶんバグも多くて大変...。

トップページ作っている

そろそろ認知されたい!ということでトップページをこさえています。かっこいいページにしたいのだけど、なかなかそうならないのでつらぽん。

納得がいったタイミングで公開出来ればよいなぁと思っております。

のこりリリースまでに実装したいものたち

以下の機能を実装したいぞ!

  • メッセージ表示機能(かんばんの文章を表示したり、キャラクターがしゃべったりするみたいなやつ)
  • 床を動かせるようにする機能

目途が経ったらクローズドβテストをやりたい!と思っているので、興味のある方はひきつづきこちらのブログをご覧いただきたくです。あともうちょっとで1年経ってしまうので、そろそろ他の人の反応も欲しいなぁ~と思っているのでした。

ではでは~。

あいこんくらぶ・ぴこぴよの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

スレッドのデッドロックかも?とのことなので、シングルスレッドで動作するように設定を変更したところ、たまにレスポンスに失敗することはあるものの 完全にリクエストを受け付けなくなってしまうという感じには(今のところ)なっていないので、とりあえず開発環境については様子見かな。。。と思っています。 (シングルスレッドで動かして様子を見ながら原因を切り分けていく感じで様子見をしてみようかなと思っています。)

原因がよくわからずもやもやするので、引き続き様子を見ながら直せそうなら直すという感じかなぁ。。。

という感じで、環境構築周りをメインに進めていたので、なかなか「こんな機能を作っているよ!」な報告ができていませんが、ちゃんと作業はしているんだなーと思っていただければうれしいです。

ではではー!