“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 をPM2でデーモン化しながら起動する方法 最新版
Nuxt.js2系にリプレースして、PM2での起動方法が変わったため紹介しておきます。 PM2のインストール $ npm install pm2 -g 次にecosystem.config.jsに以下のように記述 module.exports = { apps: [ { name: 'NuxtAppName', exec_mode: 'cluster', instances: 'max', // Or a number of instances script: './node_modules/nuxt/bin/nuxt.js', args: 'start' } ] } ここのscriptを呼び出す部分がキモですね script: [...]
Nuxt.jsで大規模なサイトをSPAで作って大丈夫?→やめた方がいいと思う
こんにちは、のすけです。Nuxt.jsチップスのお時間です。 Nuxt.jsはSPA・Universalモード(SSR&SPA)を選択できるのだけど SPA(Single Page Application) シングルページアプリケーション全てのページ1つのHTML上に展開し、ページ遷移はクライアントサイドのJSでガシガシ書き換えることで夢のような高速なサイト作成ができる!! SSR(Server Side Rendering) サーバーサイドレンダリング( Universalモード)Nuxt.jsはSSRとか行っておきながら、どちらもいいとこ取りする(どっちも実装しなくてはいけなくて辛い!?)Universalモードというのがあります。 HTMLをサーバーサイドでレンダリングするので、SEOに強いと言われている(詳細は不明。もはやGoogleが追いついている気もするので気にする必要もないかも) 従来のサーバーサイドコーディング&Vueを合わせた実装になり、かなり面倒。 サーバーサイドでHTMLをレンダリングするので貧弱なWebサーバーや回線だとSPAほどの速度は出ないが Nuxt-linkを踏む場合のみ高速で画面遷移できる。 問い 「Nuxt.jsで大規模なサイトをSPAで作って大丈夫?」 最初よく分からなくて、まぁSPAでいいしょ!と思って作っていたのですが、、、SPAで1年間運用し、その間に機能拡張をしまくって盛り盛りになったプロジェクトはどうなったのでしょうか?? 結論:やめた方がいいよ 規模が大きくなるにつれ、初期訪問者のjsコードのロード時間が長くなり「なかなかページが表示されない!」という結果になりました。 そこで、Universalモードに切り替えたわけですが全てのページをSSR対応に書き換える必要があり、大変に面倒でした。特にクライアントサイドで動くコードとサーバーサイドで動くコードは違うので、それに頭を悩ませました。 なので、プロジェクトが一定以上大きくなるページ数が30ページ越えるくらい??の場合には潔く Universalアプリケーションを選択してSSRした方が良いです。 SSR時の注意点 SSRモードの挙動はかなり複雑です。 Nuxt.jsのSSR/CSR処理について - 株式会社Japonline こちらの記事が参考になったのですが、クライアントサイドレンダリング(CSR)とサーバーサイドレンダリング(SSR)のライフサイクルが 「初回アクセス、リロード時」・・・URLを直接叩いたりaタグで遷移した際 「内部アクセス時」・・・nuxt-linkやrouterで遷移した際 で違う!!というとても複雑な動きをするので、どちらにも対応したコーディングが求められたりします。 ここんところを熟読しつつ、行ける!と思った方はNuxt.js適性があると思います。
Nuxt.js環境でGSAPプラグインを登録する方法
Nuxt.jsにてGSAPのプラグインを使おうとする場合Docs - GreenSock このページの通りにやってもUnexpected token {とか色々出て動きません。 色々調べた結果、このようにgsap/dist/のパス指定してあげると動きます! import { gsap } from "gsap"; import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin"; gsap.registerPlugin(MotionPathPlugin);参考: Problem with Razzle and GSAP - GSAP - GreenSock
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!' [...]