JavaScript

JavaScript で Google Analytics Reporting API v4 を導入する方法について紹介します。 Google Analytics API を利用して人気記事ランキングを作成するためのデータを取得してみます。
Nuxt.js でコンポーントの作成方法について記載します。 ブログなどで、人気ランキングモジュールや、関連記事モジュールなど、複数のページで共通の情報を表示する場合があります。そういった場合にコンポーネントとして切り出しておくことで、共通化することができます。
Vue アプリケーションの状態管理ライブラリであるVuexを理解しながら使ってみます。 Vuex は Flux, Redux の影響のを受けています。 Fluxについても理解をしながらVuexについて理解していこうと思います。
Nuxt.jsを利用してMarkdownで記述可能なブログを自前で作成しました。作成する際に使ったライブラリprocessmdや、ブログを作った際の仕組みについて紹介します。
Nuxt.jsの環境でGoogle Analyticsを導入する方法について紹介します。 Google Analyticsを導入すると各ページ毎のPV等アクセス解析できるため、サイト改善を行うためにはかなり有用なツールとなります。ぜひ導入してみてください。
Nuxt.jsでサイトマップを作成する方法を記載します。サイトマップを作成することでGoogleなどの検索エンジンが効率よくクロールができるようになります。Nuxt.jsでは動的なルーティングも定義することがありますが、その際はサイトマップを作成するときに少し工夫する必要があります。
Nuxt.jsを利用してmarkdown-itを利用する方法を記載します。以前@nuxtjs/markdownitを利用する方法は書きましたが、今回はpluginとして記述する方法について記載します。
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を導入できます。
Nuxt.js の環境で外部のWebAPIを利用する方法について紹介します。 Webサービスを作っていると、外部のAPIと連携してサービスを作ることが多いと思います。 Nuxt.jsでは をnuxt-community から axios-module を導入することでかんたんに axiosというHTTPクライアントを導入することができます。
Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。 今回は HardSourceWebpackPlugin の導入方法について紹介します。
Nuxt.js でページ遷移時のアニメーション(トランジション)を設定する方法について記載します。 Nuxt.js では page に対し Vue の transition の設定がデフォルトでされています。 CSS を使って transition の設定を記載するだけで簡単にページ遷移時のアニメーションを実現することができます。今回はこのブログにも実際に適用しているCSSの設定例を記載します。