TML5モバイルゲームを開発する際には、ゲーム画面が様々な画面サイズに完璧に対応することが非常に重要です。今回は、幅600px、高さ800pxのゲーム画面を例に、PIXI.jsとNext.jsを使って、あらゆるモバイル画面に完全表示できるレスポンシブゲームを作成する方法を紹介します。プレイヤーがスクロール操作をする必要はありません。
Vue.jsを使った開発では、数字入力ボックスの入力を3桁の数字に限定するなど、制限をかける必要がよくあります。 しかし、min属性やmax属性を使うだけでは、望ましい結果は得られません。 この記事では、これらの属性の限界を探り、解決策を提供します。
フォームをテーブルに配置すると、コンテンツが正しく表示されない問題を解決する方法について説明します。この問題を解決するために、フォーム属性を使用する方法をStack OverflowとMozilla Developer Network(MDN)の記事を参照して学びます。
最近、Webページを開発していて、入力やボタンなどの要素を複製したり削除したりする必要があります。ここでは、javascriptでコピーする要素を探し、node.cloneNodeで要素をコピーし、element.insertAdjacentHTMLで指定した位置に要素を配置するようにしています。
Mapboxを使って作成した地図の中に、ある地点から半径◯KMで円を作る場合はよくあると思います。中心点の座標と半径を入力して、円を作成してもらう方法を調べまして、Mapbox+Turf.jsで出来ました。これから、今回の実装方法を紹介します。
NuxtJSのデフォルトエラー画面をカスタマイズしたいため(特に404 not foundの表示)、変更する方法を試してみました。 そんなに手間がかからないので、方法をメモして、今後修正したい時に参考になると思います。
NuxtJSにFirebase認証を導入するのは簡単にできると思ったが、意外にはまりました。 今回は静的なサイトにGoogle認証の機能を実装しまして、その過程にメモした方が良いと思う部分があったので、記事にしました。 今後、同じ構成で認証機能を作成したい時に、参考になればと思います。
以前画像をS3にアップロードする時に、まずはサーバーに画像を一時的に保存してから、S3にアップロードしましたが、今回はブラウザーでサーバーに画像を保存せずにそのままS3にアップロードしてみました。
プロジェクトの関係で、Jsonファイルのデータを再処理することがあったので、ファイル読み取りと保存方法(fsモジュール)、配列の並び順変更の方法(sort関数)とその結果をメモしておきます。