Javascript

PIXI.jsとNext.jsでHTML5ゲームを開発する際のモバイル画面への対応

TML5モバイルゲームを開発する際には、ゲーム画面が様々な画面サイズに完璧に対応することが非常に重要です。今回は、幅600px、高さ800pxのゲーム画面を例に、PIXI.jsとNext.jsを使って、あらゆるモバイル画面に完全表示できるレスポンシブゲームを作成する方法を紹介します。プレイヤーがスクロール操作をする必要はありません。

Javascript

Vue.js: 数値入力フィールドの制限に関する問題

Vue.jsを使った開発では、数字入力ボックスの入力を3桁の数字に限定するなど、制限をかける必要がよくあります。 しかし、min属性やmax属性を使うだけでは、望ましい結果は得られません。 この記事では、これらの属性の限界を探り、解決策を提供します。

Javascript

テーブルの中にフォームを配置すると、コンテンツの表示に失敗する問題を解決する

フォームをテーブルに配置すると、コンテンツが正しく表示されない問題を解決する方法について説明します。この問題を解決するために、フォーム属性を使用する方法をStack OverflowとMozilla Developer Network(MDN)の記事を参照して学びます。

Javascript

JavascriptでWebページの要素をコピーして、ページ上の任意の場所に配置する

最近、Webページを開発していて、入力やボタンなどの要素を複製したり削除したりする必要があります。ここでは、javascriptでコピーする要素を探し、node.cloneNodeで要素をコピーし、element.insertAdjacentHTMLで指定した位置に要素を配置するようにしています。

Javascript

Mapbox地図にある地点を中心に距離別の円を表示させてみる

Mapboxを使って作成した地図の中に、ある地点から半径◯KMで円を作る場合はよくあると思います。中心点の座標と半径を入力して、円を作成してもらう方法を調べまして、Mapbox+Turf.jsで出来ました。これから、今回の実装方法を紹介します。

Javascript

NuxtJSのエラーページ(404 errorなど)を変更してみた

NuxtJSのデフォルトエラー画面をカスタマイズしたいため(特に404 not foundの表示)、変更する方法を試してみました。 そんなに手間がかからないので、方法をメモして、今後修正したい時に参考になると思います。

Javascript

Firebase Authentication + NuxtJSでGoogle認証を実装してみた

NuxtJSにFirebase認証を導入するのは簡単にできると思ったが、意外にはまりました。 今回は静的なサイトにGoogle認証の機能を実装しまして、その過程にメモした方が良いと思う部分があったので、記事にしました。 今後、同じ構成で認証機能を作成したい時に、参考になればと思います。

Javascript

NodeJSでLinuxコマンドを実行する

Nodeの環境でJavascriptを使ってLinuxコマンドを実行する方法をメモしました

javascript

AWS SDK for Javascriptを使ってブラウザーから画像をS3にアップロードする

以前画像をS3にアップロードする時に、まずはサーバーに画像を一時的に保存してから、S3にアップロードしましたが、今回はブラウザーでサーバーに画像を保存せずにそのままS3にアップロードしてみました。

Javascript

JavascriptでJsonファイルを読み込んで並び順を変更する

プロジェクトの関係で、Jsonファイルのデータを再処理することがあったので、ファイル読み取りと保存方法(fsモジュール)、配列の並び順変更の方法(sort関数)とその結果をメモしておきます。

Javascript

Javascript 配列にある空やNULL要素を排除する方法

filter関数でいらない要素を排除する方法で空やNULL要素も排除できます。