プログラミング

Vue CLIのWebComponentビルドをVue3でも使いたい

Vue CLIには ビルドターゲットとして Web Componentを選択できる機能があり、これを使うとVueのSFC(単一ファイルコンポーネント)をWeb Componentとして書き出してくれます。 cli.vuejs.org このビルドモードには以下の特徴があります。 指定したディレクト…

TypeScriptのConditional Typesで引数に応じた型を選択的に出しわける

趣味のライブラリ開発を行っていたときに試行錯誤したはなしです。せっかくなのでブログにまとめました。 たとえば以下の仕様を満たすクラス Dispatcher を作ります。 イベントを購読したり発行するDispatcherクラス 複数のイベントと、それに対応する処理を…

既存アプリケーションの認証基盤を Firebase Authentication にお引越し

そろそろ自作WebアプリケーションをTwitterログインに対応したいなと思い続けてはや1年。重い腰を上げてやるぞ~となったのでやってゆきます。 このWebアプリケーションの構成は概ね以下の通り。これをどのように移行していくかを考えます。 Ruby on Rails製…

GitHub Issue Timeline APIでProjectの状態にとどまった時間を取得する

GitHubにはIssueのタイムラインを取得できるTimeline APIがあります。Issueのコメントだけではなく、たとえば「いつ、どのラベルを付与したか」や「いつ、どのProject Columnに移動したか」などを取得できます。(GitHubドキュメント に記載の通り、GitHub P…

LitでつくったWebComponentをJestでテストする

Lit(+TypeScript)でつくったWebComponentをJestでテストしたくなったので、行ったことをまとめておきます。 前提 テストやコンポーネントはTypeScriptで記述 ts-jestが導入済み Lit 2.0.0 / Jest 26系で動作確認 テストを書いてみる 以下のようなコンポー…

Amazon S3+CloudFront環境へGitHub Actionsをつかってデプロイする

静的サイトの配信のために、Amazon S3にファイルを設置してCloudFrontで配信する方法はよく行われていると思いますが、私の管理するアプリケーションでもこのような構成のものがあります。 というわけで、もっとかんたんにデプロイできるようにしたいな~と…

JSON Schemaでお手軽アンケートフォーム

こんにちは。お手軽に自分のサイトに埋め込むアンケート的なやつを作りたいけど、Google Formsなどでは若干要件を満たさないというお悩みがありました。 ログインしているときだけアンケートに答えられるようにしたい 入力フォームに隠しパラメータを埋め込…

オートタイルを実装してみる

みんなでつくるダンジョンで使うために簡易的なマップエディタを構成するためのWebComponentを作っています。 github.com この過程でオートタイルを実装してみたのでまとめてみます。デモはこちら(グリッド上をドラッグアンドドロップするとオートタイルを…

Deviseのアカウント情報をFirebase Authenticationにお引越ししてみる

Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証…

ドット絵をきれいに表示できるCustom Elementをつくってみた

ずいぶん前のエントリーのとおり Custom Elementをつくってみたわけですが、この経験をいまいち活用できておらず、もうちょっと実用的なものを作ってみようという気持ちになりました。そこで、「ドット絵を拡大してもきれいに表示される要素」を作ってみまし…

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オブジェクト…

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つも書いてしまっているところに喜びを表したかったの…