（自分用めも）背景画像の無限スクロールを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票も入らなかったら落ち込むなー」と思いながら アンケート機能を使うことを躊躇しているのですが、今回は思い切ってみました。結果は以下の通り。
テストプレイ「やってみたい」という方がいらっしゃってうれしいです。まだぜんぜん何も決めていませんが、公開前に一回クローズドなテストプレイ環境をつくってもよいかもしれないなーと 思ったのでした。
ではではー。
開発報告（7/9)
きょうは「みんなでつくるダンジョン」の開発報告をば。消化したタスクリストを眺めながら「何を紹介できるかな～」と思っていたのですが、 そういえばログインの様子とかマップ上を動く様子とかを未だに動画でお見せしていないなと思ったので、きょうはその辺の様子を紹介しようと思います。
（ようやっとこの一連の流れをお見せできる程度には出来てきたのでした。）
マップを読みこんでテストプレイする様子
さっそく即席のgif動画をぺたり。なんだかカクカクしていますが、動画編集している余裕がなかったので今回は許してください。（ほんとうはちゃんとスムーズに動いていますが、gifのフレームレートを上げるとファイルサイズが大きくなってしまうので。。。）
ログインすると、「マップであそぶ」もしくは「マップを作る」を選択できます。今回は「マップを作る」を選択し、適当なマップを読み込んでみます。 （動画中のマップチップは墨cmさん、bunaguchiさんのものをお借りしています。）
テストプレイボタンを押すと、予め登録したアバターをつかってマップ内を移動できます。もちろんマップを接続する「コネクタ」が適切に設定されていれば、他のマップに移動することもできます。
ロゴを走らせるようにしてみた
ログイン時に表示されるロゴを走らせるようにしてみました。
みんなでつくるダンジョンのウェブサイトは、なるべくわくわく感がでるデザインにしたいなぁと思っていたので、サイトに動きをつけたかったのでした。 そこで、とりあえずキャラクターを走らせるようにしてみたのです。この走るキャラクターは3コマで構成されているのですが、普段絵を描かないので、ほぼ1日がかりで描きました。たいへんだった。。。
ログインまわりのデザインはもうちょっと手を加えて、うるさくない程度にわくわく感が出せればよいかなと思っています。私にはデザインの知識がないので、やっぱりこの辺で触りだけでもお勉強しておいたほうがいいのかな。
雑記
やっぱり動画のほうがわくわく感が伝わるかなぁと思うので、これからもなるべく動いている様子をお伝えできればなーと思っています。 しかし、今は「とりあえず動く」段階から「ちゃんとサーバに上げて使えるようにする」段階になってきているのですが、 進捗としてお伝えしづらい（目に見える機能の実装ではない）分部が多いので、なかなかやる気の維持が大変なのでした。
ではでは～
今週のだらりんぴっく
今週（と先週）は風邪をひいてしまった関係で、だらだらがいつにも増してはかどってしまいました。たまには日記っぽいことも書いてみようと思ったので、この記事に需要があるのかはさておき、だらだらの記録を残しておきます。 今週の開発の進捗はいまいちだったので、進捗報告のほうはのちほど。。。
まずはだらだらのお供にしたまんがをば。
bookmeter.com 水上先生の作品は「惑星のさみだれ」や「スピリットサークル」を読んだことがあり、とても好きなまんが家さんの一人です。 放浪世界はいつか買おうと思っていたのに、本屋さんでなかなかお目にかかれず、ようやっと購入できたのでした。 この単行本に収録されている「虚無を行く」というお話がすき。
sonorama.asahi.com 街中にある、ちょっと怪しいけど気になるあの店に入って堪能するはなし。私的気になりスポットの「浅草観音温泉」も載っていました。
つぎに「ポポロクロイス物語」を購入した話をば。
最近は作業用BGMとしてゲーム音楽を聴いたりすることもあります（Amazon Musicにそれなりにある）。 ゲーム音楽はループして再生しておくにはちょうど良く、集中したいときにそれなりに重宝しています（といってもそのへんに詳しいわけではありませんが）。 たまたまポポローグのゲーム音楽に出会ったのがきっかけでちょっと調べてみると、ジャケットの絵が好みかつ、ゲームタイトルの響きが良い感じだったので 遊びたくなり、中古ゲーム屋さんでポポローグの前作に当たる「ポポロクロイス物語」を購入したのでした。
どうでもいいけど、PS1のゲームはもはや「レトロゲーム」カテゴリなんだなーと、久々に中古ゲームショップに訪れて思ったのでした。
クォータービューなRPGでかわいい感じの画面で、さほど難易度も高くなく（いまのところは）、疲れていても遊べそうなのでなんとか最後まで楽しく遊べそうです。 （疲れていても遊べるというのは大事で、疲れている時期に歯ごたえのあるものを買ってしまうと高確率で積みゲーにしてしまうので... Cities Skylinesとかガンヴォルトの2作目とか、完全に買って満足してしまったので、そろそろ遊ばないと...）
ではでは。
HTML5のバリテーション機能を使っておてがるバリデーションを試してみている
今日も今日とてちまちまと趣味開発のほうを進めているのですが、各種値を入力->チェック->OKかどうかを確かめる実装を各所に行わなければならず、めんどい～となっていました。
たとえば以下の画面の入力欄は「編集画面のグリッド（点々）の幅を決める」ためのものですが、プログラム上では「数値かどうか」「最小値を下回っていないか」「最大値を超えていないか」を検証しなければなりません。
そして、検証の結果、不正な値とみなせば、ユーザーにその旨伝えなければならないですが、そのための表示領域を設けたり、表示させたり、などなど面倒です。
そこで、HTML5のバリデーション機能を使ってこのような確認をやらせると楽だなと思い、今作っている趣味開発のものにおためしで実装したりしてみています。
例えばこんな感じ。最大値（max）最小値（min）必須入力項目（required）を設定しています。
<form id="confirm-form"> x: <input type="number" class="size-input" min="5" max="300" required> y: <input type="number" class="size-input" min="5" max="300" required> <div class="bottom-buttons"> <input class="button" type="submit" value="適用"> <a class="button" href="#" @click.prevent="close">閉じる</a> </div> </form> <script type="text/javascript"> document.getElementById("confirm-form").addEventListener('submit', function(e) { alert('値の検証に成功しました！'); e.preventDefault(); }); </script>
最小値や最大値に収まらない値を入力して「適用」ボタンを押すと、数値が間違っている旨メッセージが表示されます。 このメッセージはブラウザが勝手につくって表示してくれるので、別途表示領域を設けたり、警告文を作ったりする必要がないのでらくちんです。 ルールに沿った値を入力して「適用」を押せば、alertが表示されます。
（表示はブラウザによって異なります。上記はGoogle Chromeの場合）
form要素とsubmitボタンを置くことでバリデーションをさせることができますが、検証に成功するとページ遷移してしまいます。
ふつうにFormでPOST送信する場合はそれでもいいですが、JavaScriptで入力された値を使ったり、Ajaxで値を取りに行くような実装にしたいときは困ります。
そこで、e.preventDefault() をしてあげることでデフォルトの挙動を停止し、ページ遷移を防ぐことができます。
Vue.jsで同様のことをする場合は、 @submit.prepend としてあげることで、「適用」ボタンが押されてもフォーム送信によるページ遷移を防ぐことができます。
（唐突にVue.jsが出てきたのは、今作っている趣味開発のものがVue.js製のためです）
以下のような記述をした場合、検証に成功したら @submit で設定したメソッド（以下の場合だと appendSettings）が呼ばれます。
<form @submit.prepend="appendSettings"> x: <input type="number" class="size-input" min="5" max="300" required> y: <input type="number" class="size-input" min="5" max="300" required> <div class="bottom-buttons"> <input class="button" type="submit" value="適用"> <a class="button" href="#" @click.prevent="close">閉じる</a> </div> </form>
さきほどの「グリッド間隔を変更するメニュー」画面に適用するとこんな感じになりました。「適用」ボタンが隠れてしまっていますが、値を再入力することで警告ふきだしは消えます。
警告文を示す吹き出しはブラウザが勝手に作ってくれる分、警告文の文言や表示位置、デザインに融通を効かせたい場合は不都合ですが、おてがるな点が良いと思っています。
ちなみに、ブラウザによっては、この手のバリデーションに対応していなかったりしますが、趣味開発なので気にしないことにしています。
ではでは～
趣味開発にタスク管理ツールを使ってみている
最近、趣味開発にタスク管理ツールを取り入れてみたりしています。とりあえず以前に使ったことのあるTrelloで、現在行っている趣味開発作業に関するタスクを2週間くらい管理してみました。
Trelloは一部機能を除き概ね無料でつかえます。
趣味開発は締め切りなどがないことが多く、また開発のやる気維持も結構大変のため、エターナってしまう※1リスクが常に付きまといますよね。というわけで、少しでもそのようなリスクを減らすために、 普段している作業を細かく「タスク」として分割して、進捗どうなっているの？とか、今何やっているの？とか、これから何やればいいの？を見える化してみようと思ったわけです。
実際に趣味開発に使ってみて、たとえばフリーゲーム作者の方など、比較的開発に時間がかかるような作品を手掛けている方なら、趣味開発でもタスク管理するとよさそうだなという気持ちになりました。
でも、「タスク管理」というと大げさな響きもします。そこで、こんないいことがあったよ！とか、こんな感じに使っているよ！などを書いてみようと思います。
（Trelloについてはググればたくさん使い方が載っていると思うので、ここではツールの使い方には触れません）
（※1：作品が未完になってしまうの意）
どのようにつかっているの？
普段している作業を細かく分割し、「カード」に書き込み「リスト」に追加していきます。私の場合は、「Backlog（いつかやるタスク）」「Todo（次にやるかもしれないタスク）」「In Progress（作業中）」 「Done（作業完了）」という感じでリストを切って、カードを移動しながらタスクを管理してみています。
どんな良いことがあるの？
タスクの見える化によって以下のような良いことがあります。
その日にできるタスクを適切に選ぶことができる
時間がない～とか、今日は疲れたけどちょっとだけ作業しようかな、とか、趣味開発の場合は日々の生活をこなしながら行っていくので、その日その日で進めることのできるタスク量には 限りがあると思います。そこで、予めタスクをそこそこ登録しておけば、時間や体力、気力と相談して、その日にこなせそうなタスクを処理することができるようになります。
エターならないようにするには「ちまちまとでも作業を進める」ことが大事かなと思っている私にとっては結構よい使い方だなと思っています。
やったことが自動的に記録されていく
「今週はあまり進まなかったな...」という気持ちが長く続くと、先が見えない感が出てきて開発が止まってしまうことがありますが、案外作業量としてはこなしていたりもするものです。
タスク管理ツールをうまく使えば、行った作業が記録されていくので「実は結構作業しているんだな～」とか、「あとはこれだけやればよさそう」という作業の実態が可視化され、先の見通しがしやすくなり、やる気の維持につながると思います。
（一方で、タスクの見える化によって、Todoにたまった膨大なタスクを目の前にし、「これいつ終わるんだ...」という気持ちになる副作用もあります。そういう気持ちとうまく付き合う必要もあります）
なんかやっているな～感がでる
「ちゃんと作業しているじゃん」という気持ちになることは、孤独な個人開発にとってはとても重要だと思います。 タスクを細かく切って、こまめにカードを移動すれば、適度な「やっている感」を得ることができます。
まとめ
割と長めの趣味開発をされている方々なら、作業計画を頭の中で見積もったり、紙に書き起こしたりすることがあると思いますが、ツールを使うと捗るよという話でした。 今回は利用経験のあるツールを使ってみましたが、様子を見ながら別のツールも使ってみてもいいかもなと思っています。
私もエターならないようにがんばらないとな。。。
ではでは～
開発報告（6/17）とだらりんぴっく
みんなでつくるダンジョンの開発報告
まずはいつもの開発報告をばをば。大体以下のようなことをやっていました。そういえば最近、Trello（タスク管理ツール）を趣味開発でも使ってみているのですが、そのおかげで 「先週何をやったか」が記録できているので、このような記事が書きやすくてよいなーと思ったのでした。
とにかくひたすらバグを取る
現時点で、「マップを読み込んで保存する」「マップ間を移動する」「アバターを作る」「マップ間を移動する」など、あらかたの動作が（雑ではあるけど）できてきつつあるので、 動かしながらバグを取る作業をしていました。まずは安定性を一定部分まで上げて、人に見せられるような状態にしたいなと思ったのでした。
（こんなの作っているんですよー。シュッ(~o~)っみたいな感じにできたらよいなーという気持ち）
バグを洗い出すには、「ひたすら動かす」と「テストコードを書く」な手段があると思いますが、重要な部分はテストを書き、そうでもない部分やリアルタイム性が重要な部分は ひたすら動かす、みたいな感じで進めていきたいなーと思っています。テストプレイを自分以外の人に一度やってもらったほうがよさそうだな...。
テストコードについては、以前の記事でちょっとお試ししたJestを様子を見ながら取り入れていきたいなと思いながらつくっています。
マップサイズが変更できるようになった
マップサイズが変更できるようになりました。今までは1500px四方固定だったのですが、面積が1500×1500px2となることを条件として可変できるようにしてみました。
これで縦長や横長のマップが作れるので、よりダンジョンっぽくできるかなーと思っています。
マップ上のアイテムの位置や大きさを固定できるようにした
実際に使ってみてつらかったのが、マップ上のアイテム（壁床などなど）を意図せず触れてしまい、移動してしまうことでした。いまのところアンドゥ機能を付ける予定がないので、 このままではちと辛すぎる～ということで、マップ上のアイテム位置や大きさを固定できる編集オプションを作りました。
こんなかんじで、実際に触ってみて追加すべき機能を検討しながら作っています。
そのほか
そのほかには以下のような機能を実装・調整していました。
- 背景設定機能（まだまだ調整が必要そう...）
- コネクタ間移動のときのアバター（プレイヤーキャラクター）の移動位置の調整
- 各種編集インタフェースの調整などなど
そういえば、マップ編集やテストプレイの実装ばかりすすめているけど、実際にマップを移動してあそぶ機能（というか導線）をちゃんと作っていないなーと思ったのでした。その辺にそろそろ手を付けないとな...。
素材募集のおしらせ
このようなブログ記事に載せるためのゲームっぽい画像素材を探しています。私の使っていいよ！という方はぜひぜひお気軽に Twitter もしくはブログのコメントにてお声かけください！ （お声掛けいただけると開発のモチベーションがとっても上がります。）素材を利用させていただく条件はこちらに記載しています。
雑記（だらりんぴっくについて）
家でも会社でもPCを触っていると電池切れしちゃう～という話を以前しましたが、最近は「この日はまったくPCを触らないぞ」という日を設けて、ひたすらだらだらしたりしながら バランスをとったりしています。（私は勝手に「だらりんぴっく」と称しています）
というわけで、だらりんぴっくのお供にしたまんがをぺたり。（特に感想とかは書いていないですが...）
中世ファンタジー風の世界のおしごとまんが。中世欧州こじつけコラム「行末ファンタジア」が各話の間に掲載されているのですが、これが個人的に好きです。
先ほどのまんがと同じ作者のまんが。世界中の雑兵がとあるアパートに集結するお話。
ひさびさに本屋で表紙買いしました。（この作者の他の作品を月刊誌で読んでいたことがあったのですが、絵がきれいだなーと思っていたのでした。お話もおもしろかったので早く続きが読みたい...）
ではではー。
