こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。 今回は弊社キャメルスタジオのコーポレートサイトを、長年続けていたWordPress運用からNuxt.jsとFirebaseの運用へ移行したお話をさせて頂きます。 移行した経緯2010年からWordPressによる運用を始めていたこともあり、このあたりの負債がかなり積み上がっておりました。 具体的には、 ・当時から利用していたプラグインの更新が数年前で止まっている ・様々なプラグインが水面下で動いているので
こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。 今回はFirebase Authenticationのログイン周りの便利な記述についてのご紹介です。 Firebase Authenticationでログイン機能を実装した際に、 新規会員登録したらメールアドレス宛てに確認用のメールを送信したい！ パスワード忘れた場合、パスワード再設定のメールを送信したい！ なんてこと、ログイン周りを実装していたら出てきますよね？ そんなときにとても便利なFirebas
こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。 今回はサイトのパフォーマンスをあげるための画像の読み込みに関してのご紹介です。 サイトを作成していくにあたってコンテンツの量や画像が多いとサイトの読み込みってどんどん遅くなっていきますよね。 画像はなにも設定しなければページを読み込んだ際にすべての画像が読み込まれてしまうので時間がかかってしまいます。 逆に言ってしまえばページを読み込んだ際に画面内に表示されない画像を読み込まないようにすれば初期の読み込み
こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。 今回はNuxtのlayoutsディレクトリについてご紹介します。 Nuxtにはlayoutsディレクトリがデフォルトで存在しており、この中にdefault.vueというファイルが格納されています。 このファイルが全ページデフォルトのレイアウトファイルになります。 もし、 ・ページによってレイアウトを変えたい！ ・読み込むコンポーネントを分けたい！ といった場合、このレイアウトファイルを分ける必要があり
こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。 今回は今流行りのvue.jsのフレームワークである「Nuxt.js」の導入の仕方についてご紹介いたします。 Nuxt.jsとはSPAやSSRにも対応できるVue.jsのフレームワークです。 デフォルトで以下のパッケージが含まれていてwebpackなども導入されています。 Vue.js単体でSPAサイトを作成する場合vue-routerなどを別途いれる必要があるのですが、Nuxt.jsはデフォルトで様々な機能
はじめまして、株式会社キャメルスタジオです。 この度、弊社コーポレートサイトのリニューアルに伴い、技術の発表の場としてnoteを使い情報発信を始めることにしました。 まずはサイトリニューアルの際に取り扱ったNuxt.js, Firebase, three.jsのお話をしようと思いますのでよろしくお願いいたします！
