プログラミング

Gamepad APIであそんでみる

ウェブブラウザでゲームパッド(いわゆるゲームのコントローラ)が使えたらいいなと思っていたら、Gamepad APIなるものがあることを知りました。 developer.mozilla.org ということでつかってみます。Gamepad APIの使い方は、上記の記事がわかりやすいです。…

GitHub ActionsをつかってVuePress製ページを Github Pagesで公開してみる

GitHub Actions気になっていたけど使うチャンスがない...。と思っていたのですが、そういえばみんなでつくるダンジョンのドキュメントはVuePressでつくっていて、GitHubにPublic Repositoryとして存在していて、かつGitHub Pagesで公開していたのだった~と…

LitElementをつかってみている~

使い勝手のいいコンポーネントをあちらこちらで使えるようにしたくなり、WebComponentsの技術をつかってつくりたいなーどうしようかなーと思っています。 というのも、いまつくっているものたちのJavaScript開発環境は、概ねノンフレームワークもしくはVue.j…

JavaScriptで書いたあたり判定処理をnpmモジュールとして公開してみました

みんなでつくるダンジョンでつかわれているあたり判定処理は、実は自前で書いていたりします。 アルゴリズムは以下の記事を多分に参考にさせていただいています。 marupeke296.com で、インターネットに公開されている記事を参考に作ったものだし、ソースコ…

Vue.jsのコンポーネントをWebComponents化してみる

きょうはVue.jsのコンポーネントをWebComponents化してみたよという話をば。 どうやって WebComponents化しておけば、カスタム要素とJSをひとつ置けば、かんたんに任意のVue.js製コンポーネントを配置できるので便利そう~ということでお試ししてみました。 …

ActionCableをつかって複数のひとが集まれるマップをつくっている

こんにちは。みんなでつくるダンジョンに複数のひとが集まれる仕組みがほしいな~とずっと思っていました。というわけで、前回記事の下準備 を経て実装してみています。 こんなかんじのことがやりたい やりたいことはこんなかんじ。ほかのユーザーをじぶんの…

みんなでつくるダンジョンをRails5 -> Rails6にアップグレードしました

みんなでつくるダンジョンのアップグレード業をして、Rails5 -> Rails6 になりました。 使っている人からすると「なんのこっちゃ~」と思われるかもしれませんが、いろいろ開発に必要な足回りの環境が最新のものになったよ!ということです。 なんでアップグ…

JavaScriptでPNGファイルをつくってみる(バイナリから)

以前のブログ記事でちょっとだけ触れた「JavaScriptでPNGファイルをつくっているよ」な開発がなんとなくうまくいきはじめたので、ここまでのあれこれを記事にしてみます。 それにしても、こんなに長文のブログを書くのははじめてでつかれた。。。ぱたり。(…

deviseでアカウント削除時にパスワードを要求したい

ひさびさに自分用プログラミングメモをば。Railsアプリケーションを開発する際に認証機構としてdeviseをよくつかいますが、アカウントの削除時にパスワードを要求したくなったのでした。アカウント削除はインパクトが大きいので、再度ユーザーに確認を取りた…

カメラ移動をばねっぽくしてみた

みんなでつくるダンジョンでは、キャラクターを画面中央に表示するようにカメラ座標を決定しています。 今まではキャラクターの位置を以下のように決定していましたが、キャラクターのうごきががくがくするとカメラまでがくがくと動くようになり、画面酔いを…

PixiJSのTiling Spriteの描画がうまくいかないので試行錯誤したよ

「みんなでつくるダンジョン」ではPixiJSを活用してWebGLな描画をしています。ただいまパフォーマンスチューニングをしており、この一環として画像を並べて表示するための処理を、指定したテクスチャを繰り返し表示することができるTilingSpriteに置き換える…

ActiveStorage+Amazon S3で管理している画像をフロント側で扱うときのCORSまわりでハマったことめも

みんなでつくるダンジョンのテストサーバはHeroku+Amazon S3で構成しており、画像の管理まわりにはActiveStorage(Ruby on Rails)を使っていますが、テストサーバに上げても「うまくうごかない~」となっていたのでした。 S3上にある画像をImageオブジェクト…

ActiveStorageでテストがうまくいかない~のでとりあえず対処したメモ

ActiveStorageを使ったModelのテストがうまくいかない!となったので、対処法のメモをば。 テスト環境はRSpec + factory_bot でつくっています。 has_one_attached をもつ Hoge Modelがあるとして、 # hoge.rb class Hoge < ApplicationRecord has_one_attac…

Jest + WSL でテストが通るときと通らないときがあって困っていたときのメモ

タイトルの通りのトラブルで困っていた時のメモ。7~8つくらいのテストファイル、180くらいのテスト項目のテストを走らせると、エラーになるときとならないときがあってふぇ~わからん!ってなっていました。 package.jsonに以下のように書いて、 npm run te…

Dockerでphpの開発環境整備など(開発報告)

かねてからやらないとやらないと、とおもっていた、あいこんくらぶ ( https://iconclub.jp ) ・ぴこぴよ ( https://picopiyo.iconclub.jp ) の開発環境整備(改善)をいい加減やらねばなーと思っていたので、週末をつかってガッとやってしまったのでした。(…

HTML5のバリテーション機能を使っておてがるバリデーションを試してみている

今日も今日とてちまちまと趣味開発のほうを進めているのですが、各種値を入力->チェック->OKかどうかを確かめる実装を各所に行わなければならず、めんどい~となっていました。 たとえば以下の画面の入力欄は「編集画面のグリッド(点々)の幅を決める」ため…

ちょっっとだけJestをつかってみた

こんにちはこんにちは。きょうはちょっとだけJavaScriptのテスティングフレームワークJestをお試しでつかってみました話をば。 趣味開発なので、がっつりテストプログラムを書くつもりはないのですが、それでも重要な部分(データを更新したり、読み込んだり…

Vue.js+VuexでFlashメッセージコンポーネントのサンプルを書いてみました

今回はVuexのお勉強もかねて、FlashメッセージをVue.js+Vuexで書いてみました。 というのも、今開発をすすめている「みんなでつくるダンジョン」はVue.jsを使って作っているのですが、「保存しました!」とか「通信中です」などのメッセージを出したくなっ…

作品ページをつくりました・続

しばらく更新をさぼってしまっておりました。最近進捗報告ができておらず、なかなかもんもんとしておりますが、ちまちまと作業しておりますのでもう少々おまちください。 (「みんなでつくるダンジョン」については、画像募集しておきながら、ぜんぜん活用で…

JavaScriptで絞り込み検索の実装

大量のタグやキーワードの中から検索をかけるとき、最近はテキストに入力しながらリアルタイムで検索してくれる機能をよく見ますね。 私の趣味プログラミングでも、「めもりあん」のタグ検索機能でこのような処理を実装しています。 (こんなかんじ) 単純に…

bashの履歴の展開機能でちょっとだけあわあわしてしまった

苦労してようやくいい感じの実装ができて、さてコミットを付けようと思いまして。 [bash] $ git commit -am "タイルモード描画を設定できた!!!!!" うれしさのあまりエクスクラメーションマーク「!」を5つも書いてしまっているところに喜びを表したかったの…