Web Design Articles

  • 1810

M1MaxでUnityはまだもっさり！？かもしれぬ話

メインPCをAppleシリコン搭載の最新PCであるMacBookPro16に置き換えましたUnityを使ってみた感想です。定量的なレビューじゃなくて、感想です。 比較対象は2021年に組み立てた自作PC(30万円くらい) 比較PC Macスペック CPU: M1Max 10コアCPUGPU: 32コアのGPUメモリ: 最大64GBのユニファイドメモリ価格は50万円ほど。価格なら間違いなくこちらが勝ってる！ 組んだデスクトップPC CPU: 第三世代 Ryzen9 3950 GPU: Radeon RX6700XT メモリ: DDR4 64GBメモリ本体で30万円ほど [...]

  • 1812

QNAPのWEBサーバーにSSL証明書を設定する方法

ゆえ合って、SSL証明書が必要になりました。QNAPで動いているQTS(QNAPの独自OS)はLinuxの独自拡張OSのようで SSHログインしてLinuxのように操作できます。以下、設定方法です。 SSHサービスを起動 まずは「ネットワークサービスファイルシステム」から 「SSH」をONにしてSSHターミナルからSSHでログインします。 apacheのSSL証明書の設定を実施 設定ファイルはここにあります more /etc/config/apache/extra/apache-ssl.conf記述中のこのあたりの部分を変更していく感じです。 SSLCertificateFile "/etc/stunnel/stunnel.pem" #SSLCertificateKeyFile "/etc/config/apache/server.key" #SSLCertificateChainFile "/etc/config/apache/server-ca.crt" #SSLCACertificatePath "/etc/config/apache/ssl.crt" #SSLCACertificateFile "/etc/config/apache/ssl.crt/ca-bundle.crt" #SSLCARevocationPath [...]

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: './node_modules/nuxt/bin/nuxt.js', そしてビルド開始 npm run build ecosystem.config.jsを読みながらデーモン化したサーバー起動 pm2 start 起動している事を確認 pm2 ls ログを確認 pm2 logs以上！ 参考 [...]

Nuxt.jsで大規模なサイトをSPAで作って大丈夫？→やめた方がいいと思う

こんにちは、のすけです。Nuxt.jsチップスのお時間です。 Nuxt.jsはSPA・Universalモード(SSR&SPA)を選択できるのだけど SPA(Single Page Application) シングルページアプリケーション全てのページ１つの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で１年間運用し、その間に機能拡張をしまくって盛り盛りになったプロジェクトはどうなったのでしょうか？？ 結論：やめた方がいいよ 規模が大きくなるにつれ、初期訪問者の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. 」というエラー発生 - Qiita

ティラノスクリプトに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 = firebase.auth(); [endscript] 初期設定をしてティラノスクリプトのゲーム変数(f)にdbとauthを登録しておきます。 呼び出す！ こんな感じで、例えばscene1.ksのiscriptタグの中でfirebase authenticationのユーザログイン情報を取得したり。 ;Firebase [iscript] f.auth.onAuthStateChanged(user => { if (user) { f.displayName [...]

ティラノスクリプトに強引に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!' } }) // システム変数にVueを追加 f.vue = app; [endscript] そうすると、例えばscene1.ksなどでvueインスタンスを呼び出すことができるのでこんな感じでmessage変数にアクセスできるはず！ [iscript] f.vue.message = "こんにちは"; [endscript]・・・・・・・・・変わった！！ まとめ [...]

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった 結論 DNSの名前解決に失敗している 理由 asyncDataはリクエスト元がサーバーサイドなので、自分自身のサーバーに対してリクエストしているのだけれど、そのリクエスト指定がフルのURL(https://domain-name.com/api/xxxxx)のような形だったのですがそのサーバーの前段にconohaのロードバランサーを入れていました。 その結果、DNSの名前解決先としてはロードバランサーのIPを示しているため結果、ロードバランサーの後ろにあるNuxt.jsサーバーからロードバランサーにapiリクエストが 飛ぶという問題でした 解決策 APIサーバーを別に立てて、別ドメインにしました。 Firebaseのfunctionsが便利でしたので、functionsにnodeサーバーでAPIを構築し解決です。

Let’s Work Together

Tell me more about your project

Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.