フロントエンド
Nuxt.jsを利用してMarkdownで記述可能なブログを自前で作成しました。作成する際に使ったライブラリprocessmdや、ブログを作った際の仕組みについて紹介します。
Nuxt.jsの環境でGoogle Analyticsを導入する方法について紹介します。 Google Analyticsを導入すると各ページ毎のPV等アクセス解析できるため、サイト改善を行うためにはかなり有用なツールとなります。ぜひ導入してみてください。
Netlifyにホスティングしているアプリケーションに対し、独自ドメイン(カスタムドメイン)を適用します。今回はさくらのネームサーバを利用して対応する方法について記載しています。
Nuxt.jsでサイトマップを作成する方法を記載します。サイトマップを作成することでGoogleなどの検索エンジンが効率よくクロールができるようになります。Nuxt.jsでは動的なルーティングも定義することがありますが、その際はサイトマップを作成するときに少し工夫する必要があります。
Nuxt.jsを利用してmarkdown-itを利用する方法を記載します。以前@nuxtjs/markdownitを利用する方法は書きましたが、今回はpluginとして記述する方法について記載します。
Vue アプリケーションの状態管理ライブラリであるVuexを理解しながら使ってみます。 Vuex は Flux, Redux の影響のを受けています。 Fluxについても理解をしながらVuexについて理解していこうと思います。
create-next-app を使うことで簡単にNext.jsを利用したアプリケーションを作ることができます。 create-next-appでアプリケーションを初期構築する手順について備忘録的にまとめます。
faviconを簡単に作れるツールを作成しました。JPG, PNG, GIF などの画像から favicon を自動生成することができます。 ブラウザ上で完結しますが、実際にネットにはアップロードしないので安心です。データはすべてローカルで完結します。 作成したツールの仕組みや利用技術について記載していきます。
Nuxt.jsの環境でGoogle Adsenseを導入する方法について紹介します。 Nuxt.jsだとSPAのサイトだったりするので、その場合Google Adsenseのコードをどう貼ればいいのか、正しく動くのか不安になります。nuxt-community から google-adsense-module というものが利用できるので、そちらを利用することで細かいことを考えずにGoogle Adsenseを導入できます。
JavaScript で Google Analytics Reporting API v4 を導入する方法について紹介します。 Google Analytics API を利用して人気記事ランキングを作成するためのデータを取得してみます。
Nuxt.js でコンポーントの作成方法について記載します。 ブログなどで、人気ランキングモジュールや、関連記事モジュールなど、複数のページで共通の情報を表示する場合があります。そういった場合にコンポーネントとして切り出しておくことで、共通化することができます。
Nuxt.js の環境で外部のWebAPIを利用する方法について紹介します。 Webサービスを作っていると、外部のAPIと連携してサービスを作ることが多いと思います。 Nuxt.jsでは をnuxt-community から axios-module を導入することでかんたんに axiosというHTTPクライアントを導入することができます。
Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。 今回は HardSourceWebpackPlugin の導入方法について紹介します。
新しいPCに変えたときなどに毎回インストール手順を忘れてしまうので備忘録的にまとめておきます。 環境によってNodeのバージョンを切り分けられるものは nodebrew, ndenv, nodenvなど複数あるのですが、 プロジェクトごとに切替可能で、最新のものであるnodenvの導入方法について書いていきます
Netlifyにホスティングしているアプリケーションに対し、独自ドメイン(カスタムドメイン)を適用します。今回はお名前.comで取得したドメインをを利用して対応する方法について記載しています。
nuxt.jsでページごとにtitle,descriptionやogpの情報を変更したい場合があると思います。その際header情報を共通化して、デフォルト値の設定と簡単に上書きできるようにする方法を記載します。
Netlifyにホスティングしているアプリケーションに対し、Netlify DNSを利用してをサブドメインに適用する方法をまとめます。今回はお名前.comで取得したドメインをを利用して対応する方法について記載しています。
Nuxt.jsなどSPAでTwitterのシェアボタンやツイート表示のウィジェットを利用する際、ページ遷移時にうまく表示されない場合があるのでその対処法について記載します。widgets.jsの読み込みのタイミングですので任意のタイミングで読み込むようにします。
Linux(Ubuntu)にNodeを入れたときにも、nodenvでバージョン管理ができたほうが楽なので、Linuxでのnodenvの入れ方について備忘録的にまとめておきます。
VirtualBoxを使ってゲストOSでNuxtのアプリケーションを起動して、ホストからブラウザで参照する際に外部アクセス可能なIPを指定してNuxtのアプリケーションを起動する必要があります。その設定方法について記載します。
Nuxt.js でページ遷移時のアニメーション(トランジション)を設定する方法について記載します。 Nuxt.js では page に対し Vue の transition の設定がデフォルトでされています。 CSS を使って transition の設定を記載するだけで簡単にページ遷移時のアニメーションを実現することができます。今回はこのブログにも実際に適用しているCSSの設定例を記載します。