Webサイトの分析をする際、PV数といった一般的な指標は Google Analytics で取得することができますが、今回は独自の指標を取得したかったので Google Tag Manager を使って独自で実装した javaScript をWebサイトで動かし、指標を Goo...
Read More
jQueryを使わないでDOM操作するためのメモ
jQuery を使わないで素の JavaScript を使ってDOM操作をしたくなったので、その痕跡を書き残しておきます。
Read More
JavaScriptメモ
＊ Window $(window).width() ---- ウィンドウの横幅を取得 $(window).height() ---- ウィンドウの高さを取得 $(window).scrollTop() ---- スクロールの上端を取得
Read More
バリデーションチェックに便利なVuelidateの使い方
Vueプロジェクトで入力フォームのバリデーションチェックをする際に便利な Vuelidate というライブラリを見つけたので使ってみました。
Read More
Gulpを使ってSassのコンパイルを自動化する
Gulp を使ってSCSS ファイルを CSS ファイルにコンパイルする処理を自動化したので、その方法を書き残しておきます。
Read More
Intersection Observerを使って画像をフワッと表示させる方法
スクロールのイベントを検知してアニメーションを発火させる方法は色々ありますが、その中でも Intersection Observer を使う方法が便利だったので、使い方を書き残しておきます。
Read More
Nuxt.jsでSSL(https)化する方法
Nuxt.js を使ったWebアプリケーションをSSL化したかったので、自己証明書を使ってローカル環境で HTTPS 通信できるようにしました。
Read More
Nuxt.js に Storybook を導入する方法
フロントエンド界隈で Storybook を使っているとの話をよく聞いていたのですが使ったことがなかったため、動作確認をしてみました。 この記事では 以前に作成した Nuxt プロジェクト に Storybook を導入しています。
Read More
Nuxt.js + Swiper スライダーの作り方
Webサイトなどでよく見掛ける、一定時間が経過すると画像が切り替わるスライダーを実装してみました。 前回作成した Nuxt.js プロジェクト に追加したかったので、Swiper の Vue 用プラグイン vue-awesome-swiper を使ってスライダーを実装...
Read More
SVGアニメーションの作り方（stroke編）
下記のようなSVGアニメーションを実装してみたので書き残しておきます。
Read More
TimelineMaxを使ったオープニングアニメーションの実装
下記のような簡単なオープニングアニメーションを実装してみたので書き残しておきます。 実装には GSAP の TimelineMax を使っています。
Read More
Nuxt.js + ScrollMagic を使ったスクロールエフェクト（ふわっと要素を表示）
画面を下にスクロールしていくとフワッと画像が表示されるエフェクトを付けたくて ScrollMagic というライブラリを使ったので、その実装方法を書き残しておきます。 今回は Nuxt.js で作った Web アプリケーションに適用したので、Vue.js 用の...
Read More
Nuxt.js + SCSS + Netlify を使ったWebサイトの公開
Nuxt.js でポートフォリオを作成して公開したので、その手順を書き残しておきます。また、SCSS の適用方法についても書いておきました。 ＊参考 Nuxt.js 公式サイト/ Views npm / @nuxtjs/style-resources...
Read More
GraphQL（React + Apollo）を使ってみました②（データ更新編）
下記記事の続きです。 前回はデータを取得して画面に表示するところまでだったので、今回はデータを更新できるようにします。
Read More
GraphQL（React + Apollo）を使ってみました①（データ取得編）
GraphQL の話題を聞くことはあったのですが実際に触ったことがなく、使い方やメリットを知るために公式サイトの React と GraphQL クライアントライブラリ Apollo を使ったチュートリアル をやってみました。 この記事ではチュートリアルでやったこ...
Read More
Nuxt.js + Firebase でWebアプリを公開してみました
無料で使えるホスティングサービスは GCE や GAE、Firebase がありますが、Firebase を使ったことがなかったので、 Nuxt.js と組み合わせて動作確認をしてみました。今回の記事では Nuxt.js で作成した簡単なアプリケーションを Firebase ...
Read More
Vue.js でダッシュボードを作成④（データバインディング編）
前回作成した Vueアプリケーションに、表示対象の月を変更できる機能を追加しました。また、合わせて下記機能も追加し、少し躓いた部分があるのでこの記事に書き残しておきます。
Read More
Vue.js でダッシュボードを作成③（Vue-chart.js でのグラフ描画編）
前回の記事 で 作成した Vue アプリケーションのダッシュボード画面に、グラフを描画してみました。 ライブラリは Vue でグラフ描画するためのライブラリ vue-chart.js を使いました。 また、データについてはまだサーバーとの連携をしていないので、サンプ...
Read More
Vue.js でダッシュボードを作成②（SVGアイコン作成編）
前回作成した Vue アプリケーションのサイドバーに SVG のアイコンを付けてみました。 無料で使えるフリーアイコンも数多く公開されていますが、せっかくなので以前から気になっていた Adobe XD を使って自分でアイコンを作成してみました。
Read More
登録:
投稿 (Atom)
