PixelArtPark5に行ってきたよメモ
PixelArtPark5に行ってきました。PixelArtParkとは、毎年この時期に行われているドット絵関連作品があつまるイベントです。 ドット絵作品（絵・ゲーム・ドット絵関連ツールなどなど）やチップチューンミュージックの展示・演奏やお買い物が楽しめます。 第1回のころからなんとなく気になっていたのですが、今回こそは行ってみようと思ったのでした。
毎年「3331 Arts Chiyoda」という場所で開催されるのですが、ここはもともと中学校だったところを改装した施設で独特の雰囲気があり、建物も結構好きだったりします。 （ちょっと前まではんだづけカフェが入居していたのもこの建物ですね）
ふらふら～っと開場の時刻くらいに訪れたのですが既にそこそこ行列していました。結構待つかな..と心配していましたが、さほど待つこともなくするする～と入場できました。パンフレットが入場券代わりになる方式なので、1000円で購入したのちに空いていそうな箇所から回ります。会場は地下階、1階、2階体育館の3か所に分かれていましたが、まずは地下階へ。ゲームやデジタルアートなどが集まったスペースという感じでした。
ドット絵エディタ「PIXELAITBANANA」を触らせていただき、（そういえばドット絵を描くの久々だなぁと思いながら）即興でお絵かきをしました。シンプルなインタフェースで概ね迷いなくお絵かきが楽しめました。モバイル機でのドット絵エディタの選択肢が増えそうということで、今後のリリースがたのしみ。
12/9(日)開催される #PixelArtPark のB-4ブースでは、実際に #PIXELAIT_BANANA を使ってオリジナルTwitterアイコンが作れます。ドット絵を描いたことがない方や時短したい方向けに、数種類ほどアイコンテンプレートも用意しております。
— ふるかわ (@T_Furukawa_nkc) 2018年12月7日
ぜひお立ち寄りくださいませ。 pic.twitter.com/QGpsQOqATC
地下階は一旦抜けて、後程またゆっくり見に行こうと思っていたのですが、入場制限がかかっていたのか行列ができていたので断念。（どの会場も結構混んでいました。）
2階の体育館会場ではドット絵資料を拝見したり、アクリルキーホルダーや画集、チップチューンミュージックCDを購入したりしました。なかにはゲームボーイ実機で視聴できるブースもありまして、実機を通して聴くだけでわくわくするなぁと思うなどしていました。体育館正面のステージでは（私がいた頃には）チップチューンミュージック演奏が行われていました。
イクシールさん（ https://twitter.com/IXILL ）のブースでゲームに挑戦したら、ラッキーアイテム「金のにんじん」が出て景品をもらったり。
「TapTripTown」というゲームのデモ動画を流しているブースがあり、これがとっても気になりました。リリースはこれからということですが、街づくりゲームや箱庭ゲーがすきな私にとっては楽しみ～という気持ち。
つづいて1階の会場へ。グッズ物販がメインのようで、PixelArtPark公式グッズも販売していました。こちらの会場では缶バッチやマグネットなどを購入し、かばんの中はほくほく状態に。このようなイベント、金銭感覚が普段より鈍くなっているので油断していると大変なことになってしまうのですが、楽しいのでその辺の心配は一旦忘れます。
特に事前調査（お目当てのサークルさんリストを作るなど）もせずにふらっと訪れましたが、結構楽しめました。すてきな作品がたくさん～というのもそうなのですが、このようなところ（コミケやコミティアもそうですが）には創作エネルギーみたいなものが満ち満ちなので、じぶんの開発も頑張ろうという気持ちになってよいなぁと思うのでした。
ではでは～。
みんなでつくるダンジョンのベータテストをちょっとずつ始めているよ
先日の記事 でみんなでつくるダンジョンのベータテストに協力いただける方をゆるく募集したところ、何名かの方に応募していただきました。ありがとうございます！（一人も集まらなかったら寂しく一人でベータテストやろう..と思っていましたが、その心配もなくなりそうでよかった～。登録フォームは現在閉めております。）
ひとまずは面識のある方々に触っていただきながら、ベータテストの慣らし運転をしている最中です。 一度に全員に参加いただくのはいろいろと不安があるので、ご協力いただける方の中から少しずつメールにてお声がけさせていただき、徐々に参加人数を増やしていこうと思っています。
不具合報告・質問はどうやって受け付けるの？
とりあえず専用のフォームとTwitterのDMを併用して、どちらか好きなほうを利用いただくようにしようと思っています。（SlackやDiscordを使うのもいいなあと思ったのですが、テストにご協力いただける方々の端末環境などなどがどのようになっているかが心配だったので、ひとまずは確実そうな連絡手段としてこの2つを使ってみることにしました。テスターの方々から「このツールを使いたい！」旨の提案があった場合は別途検討しようかなと思っています。）
受け付けた情報はどうやって管理しているの？
Trelloのボードで管理しています。こんなかんじ。
報告いただいたものを登録し、作業が完了したものは「作業完了」リストに放り込んでいます。ひとまずはこの方法がよさそうか様子を見ながらベータテストしています。 テスターの方々にもボードを閲覧していただけるようになっているので、報告したもののステータスが分かるようにしてみました。
ベータテストの試験運用で既にいくつかの不具合報告や要望などをいただいておりますが、開発者以外の方々に触っていただくことは大事だなぁと思ったのでした。
引き続きテスターのみなさんからフィードバックをいただき、よりよいものにしていくぞ～ということで、ではでは～。
みんなでつくるダンジョンのベータテストに協力いただける方をゆる募します
みんなでつくるダンジョンのベータテスト（バグや仕様の不備がある可能性が高いバージョンのアプリケーションのテスト）をやりたい！ということで、 ベータテストに参加してみたい！という方をゆるく募集します。
ベータテストってなにやるの？
- 開発中の「みんなでつくるダンジョン」であそんでみてください
- ベータテストに協力いただける方のみがアクセスできるサーバ環境をつくります
- きっとバグや仕様の不備に遭遇すると思うので、その場合は適宜私ぴよっぴまでご連絡ください
- なるべく気軽に報告いただけるようにしたいぞ！という気持ちです
- ベータテストに向けて簡単なドキュメントをつくっていますが、わかりづらいかもしれないので適宜いろいろ聞いてください
- 書きかけのドキュメント
- なるべく気軽に聞いていただけるようにしたいぞ！という気持ちだけど、どんなツールを使うのがいいかなぁ
（ちょっと追記） みんなでつくるダンジョンは主に「マップをつくる」「マップを探検する」の二通りの楽しみ方がありますが、どちらかだけ試したいという方も歓迎です。「マップチップ素材をつくっているからマップをつくってみたい」方や「画像素材はあまり持っていないからマップは作らないけど、ちょっと探検してみたい」という方までどうぞ。
ベータテストに参加していただく条件
- SNSのアカウント（TwitterかMastodon）をおしえてください
- メールアドレス（連絡用）を教えてください（ベータテスト周りの連絡およびアカウントの作成のみに利用します）
- 上記の「ベータテストってなにやるの？」にもありますが、適宜いろいろ報告していただける方がうれしいです！
- ただし、おひとり開発なのでもろもろの対応は遅れたりします。ごめんなさい。
- やっぱやめた！と言っていただくのはOKです
- 「いろいろ忙しくなっちゃったから」とか「ツールが思っていたのと違った」とか、理由はいろいろあると思うので...。
いつごろからはじめるの？
2018/12の上旬から中旬ごろには始めたい！と思っています。ただいまいろいろ準備中....。
注意事項
- 公開サーバを置いていろいろな人に触ってもらうのは今回が初めてなので、たとえばサーバ代がかさんで大変！などの状況でテストを予告なく中断することがあります。
- サービスに何かのトラブルが発生した場合も予告なく中断することがあります。
- もしありがたいことにベータテスターやってみたい！という方がたくさんいる場合は時期をずらして段階的に参加していただいたり、人数を制限したり、募集を中断することがあります。
- だいたい数人くらい（3~4人くらい？）にご協力いただければよいなぁと考えています。
- もしベータテスター同士のトラブルがあった場合はテストを予告なく中断したり、該当のアカウントを停止することがあります。
- お渡しするアカウントやパスワード、テスト用サーバのURLを他の人に教えたり、不特定多数が閲覧できるようにしないでください。
- やむにやまれぬ事情があったときにベータテストの開始を遅らせたり、中止することがあるかもしれません
- 「ゆるく」募集しているのでそのへんもゆるいかもしれません...。
- 作ったマップがリリース時に引き継げるとは限らないことに注意してください
やってみたい！の宣言方法
以下のGoogleフォームより必要事項を記入して送信してください。
ひさびさのベータテスト募集で緊張しておりまずが、よろしくお願いいたします。ではでは～。
みんなでつくるダンジョンのドキュメントをVuePressで書いてみているよ
そろそろベータテストを～と思っているので、ドキュメントを整備しております。いままでのドキュメント（たとえば「ステージデザイナー」とか「あいこんくらぶ」とか）はHTMLを頑張って書いていましたが、ドキュメント作るのは結構大変なので楽をしたいなぁと思っていたのでした。
どこにホスティングしようかなぁとかあまり考えなくてよさそうな、静的サイトジェネレータをつかって書きたいなと思っていたのですが、今回はVuePressを使ってみることにしました。みんなでつくるダンジョンにもVue.jsを使っているということが選定理由です。
（静的サイトジェネレータ使うの初めてなので、趣味開発だしまあどれでもいいから1つ使えるようになれればなと思っていたのでした。）
みんなでつくるダンジョンはプライベートgitリポジトリで管理していますが、ドキュメントについては特にソースコードを見られて困るものでもないので（強いて言うならコミットログが適当で恥ずかしい(/ω＼)ということくらい）、GitHubにパブリックリポジトリを置いて、ここを拠点にすることにしてみました。
書きかけでも見てみたい！という方はこちらのURLに随時書いたものをアップしていこうと思うので、たまにチラチラと見に来ていただければと思います（とはいっても、肝心のアプリケーションのほうはまだ公開していないのですが。。。）
ではではー。
さいきんの開発報告など
おひさしぶりです。しばらくブログを更新できていなかったー！ということに気づいたので、とりあえず最近の開発報告などをしてみます。 （というのも、最近ちょっと忙しめだったのでなかなか開発ができていなかったのでした）
クローズドβテスト版の公開の準備を進めているよ
ひきつづきクローズドβテスト版の動作環境をつくったりしています。開発環境とテスト環境は構成がそこそこ違うので、ふぇーって言いながら作業をしています。 トップページ公開からもう1か月たってしまったのだなぁ、という気持ちになりながら、なんとか12月中くらいにはクローズドβテストの公開をしたいなという気持ちでつくっています。 ちなみに、こんな感じにやりたいなーとざっくり考えています。
- あらかじめご協力いただける方々を募集したいぞ
- 画像素材の規格などについては事前に告知できるようにしたい
- バグなどを気軽に報告できる環境を用意したい
- タスク管理ツールのTrelloにクローズドβテストにご協力いただける方々に入っていただき、バグを書き込んでいただくのがいいのかなぁとざっくり思っていたり。（バグに対する進捗なども一目瞭然だし）
- なにかよいツールがあったらおしえてください
- ドキュメント（操作方法など）が間に合うかどうかは微妙...。（つくりながらクローズドβテストを進める感じになりそう）
もうしばらくは私生活がやや忙しめなのでゆるゆる開発モードになりますが、がんばるぞー。
さいきんのだらりんぴっく
かぜをひいてしまったので、最近は強制だらりんぴっくのほうをやっておりました。
お供にしたまんがはこちら。
comic.pixiv.net この作者の「なぎさ食堂」という作品がすきだったのでこちらも読んでみたのですが、独特の面白さがあって好きです。
booklive.jp まんがくらぶで連載をずっと読んでいる作品。続きが気になるーってなっています。
www.shonengahosha.co.jp アニメは全部見ましたが、マンガ版ではどんな感じになるのか楽しみー。
最近はYouTubeもだらりんぴっくのお供になっているのでした。
www.youtube.com 愛知県の片付け業者「片付けトントン」さんがひたすら室内を片付ける様子の動画です。掃除のテクニックなども公開されています。動画に映っている方々も動画慣れしているようで、見ていて楽しいです。最近はすっかり更新が楽しみになっています。
ではではー。もうちょっとゆるゆる更新期間が続きますが、首をながくしてお待ちいただけると嬉しいです。
ActiveStorage+Amazon S3で管理している画像をフロント側で扱うときのCORSまわりでハマったことめも
みんなでつくるダンジョンのテストサーバはHeroku+Amazon S3で構成しており、画像の管理まわりにはActiveStorage(Ruby on Rails)を使っていますが、テストサーバに上げても「うまくうごかない～」となっていたのでした。
S3上にある画像をImageオブジェクトで取得して、Canvasをつかって加工するというJavaScriptプログラムを組んでいました。
let url = "https://s3.example.com/hoge.png"; let image = new Image; image.crossOrigin = "anonymous"; // オリジン間のリクエストだよーということを伝えるために必要 image.onload = () => { let canvas = document.createElement("canvas"); やりたい処理 } image.src = url;
これで画像が取得できてめでたし、と思っていたのですが、ブラウザ上にはこんなエラーメッセージが出てしまっていました（URLまわりは実際のものとは異なります）。
Access to Image at 'https://s3.example.com' from origin 'https://heroku.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://heroku.example.com' is therefore not allowed access.
Access-Control-Allow-Origin がうまく設定されていないとのこと。実際にブラウザのデベロッパーツールを確認してみても、確かに Access-Control-Allow-Origin ヘッダが画像のレスポンスにありません。
（Amazon S3とみんなでつくるダンジョンのテストサーバ（=heroku）は異なるオリジンとなるので、リソースを共有するときにはCORSの設定（Access-Control-Allow-Origin）が必要）
もちろんS3のCORS設定は実施済みです。
ActiveStorageで管理しているリソース（今回の場合は画像）を先ほどのJavaScriptプログラムで参照するために、 Railsサーバ側で url_for 関数を使ってリソースのURLをつくるのですが、ここでつくったURLはRailsサーバを向いています。このURLにアクセスするとリダイレクトがかかり、S3を参照するURLが返されます。
S3はリクエストにOriginヘッダがないと Access-Control-Allow-Origin ヘッダ情報を返してくれませんが、リダイレクトによってこの辺がうまくいっていないのでは？と思ったのでした。
そこで、先ほどのプログラムを以下のようにしてみます。Imageタグでリダイレクトを受けるのではなく、一度fetchをつかってリダイレクト先のURLを受け取り、そこからImageオブジェクトで画像を取得します。
let url = "https://s3.example.com/hoge.png"; fetch(url).then( response => { let image = new Image; image.crossOrigin = "anonymous"; image.onload = () => { let canvas = document.createElement("canvas"); やりたい処理 } image.src = response.url; });
これで無事にS3からくる画像レスポンスに Access-Control-Allow-Origin ヘッダが付与されてJavaScript上で画像を参照できるようになりました。めでたしめでたし。
ではでは～。
「みんなでつくるダンジョン」のトップページを公開したよ
ここしばらく開発中の「みんなでつくるダンジョン」のトップページを公開しました。
（サブドメインにしたらURLが長くなってしまった...。garakuta-toolbox.com ちょっと長いドメインを取っちゃったなーと今更ながら思ったりしたのでした。サービスをリリースするときはURLを変えるかも。）
ひとりで開発しているとやる気の底がつきやすく、なんかそろそろ出さないとやる気がでない～という感じになってきたので、とりあえずトップページを公開します。
（ブログ記事の定期的な公開も「やる気の底つき防止」みたいな役割があるのかもなぁと若干思ったり。趣味で作っているけど工夫しないと続かなかったりするのでした。）
そもそも「みんなでつくるダンジョン」とはどのようなもので、どのように楽しむものなのかという情報がまとまっていませんでした（なんだってー！）。 過去ブログを見ないとどのようなものなのか見当もつかない、という感じでよろしくなかったので、情報をまとめて改めてサービスについてお知らせするいい機会になったかもなぁと思っています。
仕様やそこそこ重要な情報はブログとトップページの両方に載せられたら良いなと思っています。
そして相変わらずページデザインは難しい...。トップページのファーストビューには大きな面積の動画を載せたいなぁと思ったのですが、いろいろ考えないといけないことが多くてやめてしまいました。たとえば以下のようなことが懸案事項になりそう。
- 転送容量の関係で低解像度の動画 or / and 短い動画としないといけない
- 低解像度の動画にした場合はいい感じにごまかさないといけないけどちょっと手間
- 以前に似たようなデザインのページを作った時には、動画の上にメッシュっぽいのをかぶせてごまかしたりしていた
- 動画の編集がそもそも手間...
- AviUtlとか昔は使っていたけど、そろそろ動画編集ソフトもほしいなぁ（大した編集はしないけど、市販の「動画編集ソフト」というものに慣れておきたい）
ということで、今回は背景スクロールをCSSアニメーションで実装という形にしてみました。かっこいいウェブページを見ると「じぶんもああいうのが作りたいなぁ」と思うのですが、まだまだ修行が足りないようで...という感じです。
ではでは～。
