“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”
MICHAEL KLARKE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.
RECENT ARTCLES
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.
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原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。 特にv-ifを利用するとほぼ発生するように思います その場合、v-ifの前後や、場合によってはコード全てを <client-only></client-only>で囲えば発生しなくなります ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますのでその辺りはご注意ください 参考：【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 [...]
ティラノスクリプトにfirebaseを連携させて自在に操る
前回、シナリオゲームが手軽に作れるティラノスクリプトに強引にVue.jsを入れることをやりましたが。 次は、、、Firebaseを入れたい！！ やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。そしてFirebaseのFirestoreならとても扱いやすい。 もし、Firebaseとティラノスクリプトが掛け算できるならどんなものでも作れそうですよね。 それではいきましょう！！ Firebaseを初期化する 呼び出す！ まとめ Firebaseを初期化する 例によって強引にindex.htmlにscriptタグを埋め込みます。 firestoreとauthを使いたかったのでそれも入れています。 first.ksなどで初期化します。 ;Firebase [iscript] console.log("Init firebase"); // Initialize Cloud Firestore through Firebase firebase.initializeApp({ apiKey: 'xxxxx', authDomain: 'yyyyy.firebaseapp.com', projectId: 'zzzzzzz' }); f.db = firebase.firestore(); f.auth = [...]
ティラノスクリプトに強引にVueを入れてみる
こんにちは、ノベルゲームをHTML5を用いて気軽に作成できるティラノスクリプトをご存知でしょうか？tyrano.jp 最近、ノベルゲーム的な表現がしたくて触っているのですが。 使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい！ という思いが強くなって来たので、強引にVueを入れてみました。 強引にVueを入れる方法 結果 Vueを操ってみる まとめ 強引にVueを入れる方法 やり方はとてもシンプルです。 index.htmlにVueのタグを入れるだけです cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしておりVue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。 そして、bodyタグの下の方でvue用のdivを定義して。あとはcssでposition:absoluteとかでレイヤー化しておきます。 次に、Vueをインスタンス化する必要がありますが。やり方としては、ティラノスクリプトはJSを実行できる[iscript]タグを利用します。 例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに次のように書きます 結果 こんな感じで、Hello Vue!!が出てくる Vueを操ってみる Vueを操るには[iscript]タグを利用していきます。先ほどの部分を少し改変します。first.ksでnew Vueしたインスタンスをティラノスクリプトのゲーム変数に格納します ;Vue読み込み [iscript] var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' [...]
技術ポートフォリオ
なんとなく自分の技術ポートフォリオをまとめてみました重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。 Lv15までは守 Lv100までは破 Lv100以上は離の領域 総合力: Lv50 (システム開発歴10年ほど) Javascript：Lv35 Nuxt.js : Lv10 Vue.js：Lv15 Firebase総合力：Lv5 Firebase FireStore：Lv15 Firebase Authentication：Lv10 Firebase Storage：Lv5 Firebase Functions：Lv10 Pixi.js,Three.js,babylon.js：Lv5~Lv10 システム開発のチーム連携力 Lv5 サーバー構築 Lv20 システム設計 Lv35 守：ツールを十分に理解するフェーズ 【テーマ】通常の利用方法の範囲で忠実に実行する。2年くらいの利用実績。課題 ・Nuxt.js、Vue.jsのレベルを15まであげる ・Firebaseの総合力をレベルを15まで 破：基本理解が一定レベルを超え、ツールの垣根超えて縦横無尽に利用できるフェーズ 【テーマ】 ツールではなく根源的な法則の理解(基本の積み重ね) ・ほぼ入り口にはいっている。様々なライブラリを取り込み組み合わせて利用できるようになって来た 現在レベル50 →外部のJSライブラリをどんどん取り入れ、Lv15まで理解し、その後複合させて独自のシステムに昇華させるフェーズ 勉強: [...]
nuxt.js のSSRデバッグ方法 by Jetbrain
こちらの記事が参考になりました。 ありがとうございます。k-sasaki.net asyncDataのデバッグを諦めてconsole.logで頑張っていたところこれで、デバッグできるようになりました！こんな感じで、ブレークポイントを入れたい場所に「debugger;」と書けばchromeのDevツールでブレークされます。Jetbrain最高です。
babylon.js ステップ15 環境設定
ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう！！ 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます アンビエントカラーの変更 次のプロパティを使うとアンビエントカラーを設定できます scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3); clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。主に、メッシュとの組み合わせて使用され、メッシュマテリアルのStandardMaterial.ambientColor によって最終的なアンビエントカラーが決まるようです。 スカイボックス 美しい完璧な空を作りたいと思いませんか？それを簡単に実現したのがスカイボックスです。このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。作り方は次の通りまずは箱を作ります。 var skybox = BABYLON.Mesh.CreateBox("skyBox", [...]
