JavaScript

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製…

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

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

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

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

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

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

Gamepad APIであそんでみる

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

LitElementをつかってみている~

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptで絞り込み検索の実装

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