プログラミング
Vue CLIには ビルドターゲットとして Web Componentを選択できる機能があり、これを使うとVueのSFC(単一ファイルコンポーネント)をWeb Componentとして書き出してくれます。 cli.vuejs.org このビルドモードには以下の特徴があります。 指定したディレクト…
趣味のライブラリ開発を行っていたときに試行錯誤したはなしです。せっかくなのでブログにまとめました。 たとえば以下の仕様を満たすクラス Dispatcher を作ります。 イベントを購読したり発行するDispatcherクラス 複数のイベントと、それに対応する処理を…
そろそろ自作WebアプリケーションをTwitterログインに対応したいなと思い続けてはや1年。重い腰を上げてやるぞ~となったのでやってゆきます。 このWebアプリケーションの構成は概ね以下の通り。これをどのように移行していくかを考えます。 Ruby on Rails製…
GitHubにはIssueのタイムラインを取得できるTimeline APIがあります。Issueのコメントだけではなく、たとえば「いつ、どのラベルを付与したか」や「いつ、どのProject Columnに移動したか」などを取得できます。(GitHubドキュメント に記載の通り、GitHub P…
Lit(+TypeScript)でつくったWebComponentをJestでテストしたくなったので、行ったことをまとめておきます。 前提 テストやコンポーネントはTypeScriptで記述 ts-jestが導入済み Lit 2.0.0 / Jest 26系で動作確認 テストを書いてみる 以下のようなコンポー…
静的サイトの配信のために、Amazon S3にファイルを設置してCloudFrontで配信する方法はよく行われていると思いますが、私の管理するアプリケーションでもこのような構成のものがあります。 というわけで、もっとかんたんにデプロイできるようにしたいな~と…
こんにちは。お手軽に自分のサイトに埋め込むアンケート的なやつを作りたいけど、Google Formsなどでは若干要件を満たさないというお悩みがありました。 ログインしているときだけアンケートに答えられるようにしたい 入力フォームに隠しパラメータを埋め込…
みんなでつくるダンジョンで使うために簡易的なマップエディタを構成するためのWebComponentを作っています。 github.com この過程でオートタイルを実装してみたのでまとめてみます。デモはこちら(グリッド上をドラッグアンドドロップするとオートタイルを…
Railsでログインまわりを実現したいときによくつかうDeviseですが、認証まわりを外部サービスにお引越しするとしたらどうなるのだろうというのをお試ししてみました。 今後ソーシャルログインなどできるようにしたいと思っているのですが、これを機会に認証…
ずいぶん前のエントリーのとおり Custom Elementをつくってみたわけですが、この経験をいまいち活用できておらず、もうちょっと実用的なものを作ってみようという気持ちになりました。そこで、「ドット絵を拡大してもきれいに表示される要素」を作ってみまし…
ウェブブラウザでゲームパッド(いわゆるゲームのコントローラ)が使えたらいいなと思っていたら、Gamepad APIなるものがあることを知りました。 developer.mozilla.org ということでつかってみます。Gamepad APIの使い方は、上記の記事がわかりやすいです。…
GitHub Actions気になっていたけど使うチャンスがない...。と思っていたのですが、そういえばみんなでつくるダンジョンのドキュメントはVuePressでつくっていて、GitHubにPublic Repositoryとして存在していて、かつGitHub Pagesで公開していたのだった~と…
使い勝手のいいコンポーネントをあちらこちらで使えるようにしたくなり、WebComponentsの技術をつかってつくりたいなーどうしようかなーと思っています。 というのも、いまつくっているものたちのJavaScript開発環境は、概ねノンフレームワークもしくはVue.j…
みんなでつくるダンジョンでつかわれているあたり判定処理は、実は自前で書いていたりします。 アルゴリズムは以下の記事を多分に参考にさせていただいています。 marupeke296.com で、インターネットに公開されている記事を参考に作ったものだし、ソースコ…
きょうはVue.jsのコンポーネントをWebComponents化してみたよという話をば。 どうやって WebComponents化しておけば、カスタム要素とJSをひとつ置けば、かんたんに任意のVue.js製コンポーネントを配置できるので便利そう~ということでお試ししてみました。 …
こんにちは。みんなでつくるダンジョンに複数のひとが集まれる仕組みがほしいな~とずっと思っていました。というわけで、前回記事の下準備 を経て実装してみています。 こんなかんじのことがやりたい やりたいことはこんなかんじ。ほかのユーザーをじぶんの…
みんなでつくるダンジョンのアップグレード業をして、Rails5 -> Rails6 になりました。 使っている人からすると「なんのこっちゃ~」と思われるかもしれませんが、いろいろ開発に必要な足回りの環境が最新のものになったよ!ということです。 なんでアップグ…
以前のブログ記事でちょっとだけ触れた「JavaScriptでPNGファイルをつくっているよ」な開発がなんとなくうまくいきはじめたので、ここまでのあれこれを記事にしてみます。 それにしても、こんなに長文のブログを書くのははじめてでつかれた。。。ぱたり。(…
ひさびさに自分用プログラミングメモをば。Railsアプリケーションを開発する際に認証機構としてdeviseをよくつかいますが、アカウントの削除時にパスワードを要求したくなったのでした。アカウント削除はインパクトが大きいので、再度ユーザーに確認を取りた…
みんなでつくるダンジョンでは、キャラクターを画面中央に表示するようにカメラ座標を決定しています。 今まではキャラクターの位置を以下のように決定していましたが、キャラクターのうごきががくがくするとカメラまでがくがくと動くようになり、画面酔いを…
「みんなでつくるダンジョン」ではPixiJSを活用してWebGLな描画をしています。ただいまパフォーマンスチューニングをしており、この一環として画像を並べて表示するための処理を、指定したテクスチャを繰り返し表示することができるTilingSpriteに置き換える…
みんなでつくるダンジョンのテストサーバはHeroku+Amazon S3で構成しており、画像の管理まわりにはActiveStorage(Ruby on Rails)を使っていますが、テストサーバに上げても「うまくうごかない~」となっていたのでした。 S3上にある画像をImageオブジェクト…
タイトルの通りのトラブルで困っていた時のメモ。7~8つくらいのテストファイル、180くらいのテスト項目のテストを走らせると、エラーになるときとならないときがあってふぇ~わからん!ってなっていました。 package.jsonに以下のように書いて、 npm run te…
かねてからやらないとやらないと、とおもっていた、あいこんくらぶ ( https://iconclub.jp ) ・ぴこぴよ ( https://picopiyo.iconclub.jp ) の開発環境整備(改善)をいい加減やらねばなーと思っていたので、週末をつかってガッとやってしまったのでした。(…
今日も今日とてちまちまと趣味開発のほうを進めているのですが、各種値を入力->チェック->OKかどうかを確かめる実装を各所に行わなければならず、めんどい~となっていました。 たとえば以下の画面の入力欄は「編集画面のグリッド(点々)の幅を決める」ため…
こんにちはこんにちは。きょうはちょっとだけJavaScriptのテスティングフレームワークJestをお試しでつかってみました話をば。 趣味開発なので、がっつりテストプログラムを書くつもりはないのですが、それでも重要な部分(データを更新したり、読み込んだり…
今回はVuexのお勉強もかねて、FlashメッセージをVue.js+Vuexで書いてみました。 というのも、今開発をすすめている「みんなでつくるダンジョン」はVue.jsを使って作っているのですが、「保存しました!」とか「通信中です」などのメッセージを出したくなっ…
しばらく更新をさぼってしまっておりました。最近進捗報告ができておらず、なかなかもんもんとしておりますが、ちまちまと作業しておりますのでもう少々おまちください。 (「みんなでつくるダンジョン」については、画像募集しておきながら、ぜんぜん活用で…
大量のタグやキーワードの中から検索をかけるとき、最近はテキストに入力しながらリアルタイムで検索してくれる機能をよく見ますね。 私の趣味プログラミングでも、「めもりあん」のタグ検索機能でこのような処理を実装しています。 (こんなかんじ) 単純に…
苦労してようやくいい感じの実装ができて、さてコミットを付けようと思いまして。 [bash] $ git commit -am "タイルモード描画を設定できた!!!!!" うれしさのあまりエクスクラメーションマーク「!」を5つも書いてしまっているところに喜びを表したかったの…