はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

Nuxt.js環境でGSAPプラグインを登録する方法

Nuxt.jsにてGSAPのプラグインを使おうとする場合Docs - GreenSock このページの通りにやってもUnexpected token {とか色々出て動きません。 色々調べた結果、このようにgsap/dist/のパス指定してあげると動きます! import { gsap } from "gsap"; import { M…

Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」

nuxt-linkで遷移した場合には問題ないのですが リロードやURLを直接叩いた場合に以下のようなエラーが発生します DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.appendChild原因として…

ティラノスクリプトにfirebaseを連携させて自在に操る

前回、シナリオゲームが手軽に作れるティラノスクリプトに強引にVue.jsを入れることをやりましたが。 次は、、、Firebaseを入れたい!! やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。そしてFirebaseのFirestoreならとても…

ティラノスクリプトに強引にVueを入れてみる

こんにちは、ノベルゲームをHTML5を用いて気軽に作成できるティラノスクリプトをご存知でしょうか?tyrano.jp 最近、ノベルゲーム的な表現がしたくて触っているのですが。 使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい! とい…

技術ポートフォリオ

なんとなく自分の技術ポートフォリオをまとめてみました重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。 Lv15までは守 Lv100までは破 Lv100以上は離の領域 総合力: Lv50 (システム開発歴10年ほど) Javascript:Lv35 Nuxt.js : Lv10…

nuxt.js のSSRデバッグ方法 by Jetbrain

こちらの記事が参考になりました。 ありがとうございます。k-sasaki.net asyncDataのデバッグを諦めてconsole.logで頑張っていたところこれで、デバッグできるようになりました!こんな感じで、ブレークポイントを入れたい場所に「debugger;」と書けばchrome…

babylon.js ステップ15 環境設定

ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう!! 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボ…

babylon.js ステップ14 パーティクル表現

babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう! パーティクルの作り方 パーティクルシ…

babylon.js ステップ13 スプライト(Sprites)

babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! 2つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から…

babylon.js ステップ12 レイキャスト(Raycasts)

babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう! レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelpe…

babylon.js ステップ11 画面クリックとの衝突判定 (Picking Collisions)

babylon.js チュートリアル ステップ11 は画面クリックとのコリジョンです。コリジョンシリーズの3回目です。いきましょう! 3Dオブジェクトのクリック(hit)を検出 ヒットした情報を用いて銃槍の位置をずらす デモ 3Dオブジェクトのクリック(hit)を検出 壁…

babylon.js ステップ10 メッシュの交差衝突判定 (Intersect Collisions - mesh)

メッシュ同士が、それぞれ衝突を検出する方法をやりますいきましょう!! 説明 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 まとめ 説明 衝突検出の2つの方法を紹介します。 2つのメッシュが接触し…

babylon.js ステップ9 カメラとメッシュの衝突判定&重力 (Cameras, Mesh Collisions and Gravity)

babylon.js を覚えようステップ9は衝突判定と重力制御です! いやー、重力とか楽しそうですね。 メッシュだけでなく、カメラにも設定できるようです。 いきましょう!! 説明 1.重力の設定 2.楕円体を定義する 衝突を適用する(Apply collision) メッシュオブ…

babylon.js ステップ8 アニメーション(Animations)

babylon.js でのステップも8個目!!今回はアニメーションです!アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。いきましょう! アニメーションの2つの方法 キーフレームアニメーション アニメーションを止める方法 終了を待…

babylon.js ステップ7 ライティング

babylon.js ステップ7 ライティングです。3D表現はライティングが無いと始まりません。ライディングの無い空間はただの暗黒です。暗黒の空間に一条の光として、ライトを設置します。ライトと言っても、太陽のような環境光もあります。いきましょう! ライト…

babylon.js ステップ6 カメラ

babylon.jsにはよく使われる2つのカメラがあります。一つは1人称視点のユニバーサルカメラ(the Universal Camera)、もう一つはアークカメラ(Arc Rotate Camera)です。 まずカメラのコントロールを可能にしましょう camera.attachControl(canvas, true); ユ…

babylon.js ステップ5 マテリアル

マテリアルを使用すると、メッシュを色とテクスチャで覆うことができます。なお、メッシュを表示するには光が必要です。拡散マテリアル(Diffuse)と鏡面マテリアル(Specular)では、光源を作成する必要があります。いきましょう! 色 まずは、StandardMaterial…

babylon.js ステップ4 位置、回転、スケーリング

babylon.js やってみようシリーズのステップ4位置、回転、スケーリングのお話です 位置の話 babylon.jsには2つの座標系があります ワールド座標系 ローカル座標系 ワールド座標系 ワールド座標系の原点は変わりません。通常、メッシュが作成されると、その…

babylon.js ステップ3 線Lineを使ったいろいろな形状を表示

いろいろな形状シリーズです。いきましょう! 線 //Array of points to construct lines var myPoints = [ new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1, 1), new BABYLON.Vector3(0, 1, 0) ]; //Create lines var lines = BABYLON.MeshBuilder.…

babylon.js ステップ2 いろいろなプリミティブを表示

早速いきますBABYLON.MeshBuilderを使っていろいろ作っていきますThree.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。 球体 // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.Cr…

Three.jsに物理法則を導入できるPhysijs を入れてみたいけど、、

前回の記事で、Three.jsはゲームに使えない的なことを言ってしまったのですが。。 実は、物理法則を簡単にいれる方法があったっぽい。それが、外部ライブラリPhysijsだ!! 特徴はこうだ! オブジェクトが重力の影響を受け、お互いに衝突するようになる シー…

babylon.jsで3D表現の初めの一歩

こんにちはどうしても3Dでゲームっぽい物をWeb上で作りたくて、ここ数ヶ月Three.jsを勉強していたのですが、、どうやらゲームを作るにはbabylon.jsの方が良さそうです。なぜ、Three.jsではダメなのか?それは純粋な3D表現ツールだからです。 キャラクターが…

私はサル以下なのか、、、と思ったあなたに。RPGに例えたGitの概念

ヒトにはもっと良い例えがあるはず! そんなわけで、サルには理解できないRPGで、誤解を恐れずに例えてみた。いつも教えるときに例えて説明しているので、自分で整理するためにメモ。 概念だけなので正確には、こっちのGithubが出してるチートシートを確認し…

Nuxt.js × Cordvaでスマホアプリを作ろうとしたメモ

Nuxt.jsでcordovaを利用してiOS,Andoroidアプリが作れたらいいなという 意欲的な事をふと思ったのでやってみたメモです。 Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】 – こまめ この設定をやってCordova公式…

WSLにRails6環境を構築する方法メモ

Rails6Macでは難なく入ったのですが、、、WindowsのWSLではちょっとてこずったので、現状行ける方法をメモしておきます 【前提】 あらかじめWSLのubuntuが入っているものとします。ない場合はMicrosoftStoreからインスト―ル Ruby: 2.6.3 Rails: 6.0.2.2 Wind…

nginxインストール&起動&停止&設定(ubuntu)

インストール sudo apt-get update sudo apt-get install nginx 起動 sudo nginx 起動後に nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)みたいになるなら、すでに起動しているかも ps aux || grep nginxで起動しているプロセス…

container staton docker ubuntu初期設定メモ

いろいろインストール apt update IP系 apt install apt install iproute2 エディタ /etc/init.d/ssh restart ssh apt install openssh-server locale系 apt install language-pack-ja-base language-pack-ja ibus-mozc echo 'export LANG=ja_JP.UTF-8' >> ~…

PhpStorm(Intellij)でjavaコマンドを実行するとバージョンが違う

別のターミナルを開くしかなさそうです。ここで、Issueが出てますが、みんなイライラしています。 intellij-support.jetbrains.com環境変数(PATH)のJAVA_HOMEが「C:\Program Files\Java\jdk1.8.0_241」になっていてもPhpStormで開くと openjdk 11.0.3 2019-0…

Nuxt.jsでAdobeのTypekitを使う方法

ネットを探しても無かったので載せときます。 サブセットの話 日本語のフォントというのは、アルファベットに比べて文字数が多いため常用漢字だけに絞ってパッケージングし直したりしているんですが。(サブセット化) 最近ではダイナミックサブセットといっ…

プロジェクト・アリストテレス

googleの収益の根源(生産性を高める方法)を分析したけど 結果ほぼなにも関連がなくて すごい人材がいるとかでも無くて 唯一あったのが、社員の安心感「心理的安全性」だった。 ってやつ。 googleのアリストテレス プロジェクト rework.withgoogle.com グー…