くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt.jsでGoogle Tag Manager+Google Analyticsを使ってみた

Google Tag Manager+Google AnalyticsをNuxtで使うときに、 ちょっとめんどうだったので、その備忘録。 タグマネージャで拾ってこれるのは、aタグとかのリンクとかHTMLベースだけ。。 なので、JavaScript側で行っているページ遷移とかは取れないのでよしなに…

Google Tag Manager+Google Analyticsに入門してみた

Google Tag Managerが便利とのことで、 Google Analyticsと連携させる方法を調べてみたときの備忘録 ざっくりなイメージ ゆるゆるだけど、Google Tag Manager(GTM)はこんなイメージ。 Webサイトに仕込んでいろいろ変数化や計測とかできる aタグがクリックさ…

v8nでカスタムVeeValidateやったら楽だった

これの続き。 www.memory-lovers.blog 前回導入したVeeValidateにカスタムバリデーションを追加したいと思い、 いろいろ調べたらv8nが便利そうだったので、使ってみた。 サンプルはTwitterIDのバリデーションの例 インストール $ npm install --save v8n カ…

TypeScriptなNuxt.jsでVeeValidateを使ってみる

フォームのバリデーションのため、VeeValidateを使ってみたときの備忘録 Nuxt.jsのコンポーネントで使う場合は、ちょっとめんどくさかった。。 フォームのバリデーションライブラリはいろいろある Vue公式ガイドでは、以下の2つが紹介されてた。 Vuelidate V…

Nuxt.jsでローディングにSpinKitを使ってみる

Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。 SpinKitというのもあるそうなので、そっちを使ったときの備忘録 SpinKitは、vue用のライブラリもあるよう(vue-spinkit) SpkinKit(vue-spinkitなし) インストール $ npm install --sa…

SSRなVueでもTweenLiteでカウントアップアニメーション(数字がクルクルするやつ)

以下の記事で、数字がクルクルするアニメーションをやってみたけど、 SSRだとうまくいかないっぽい。。 そのときの備忘録。 www.memory-lovers.blog 初期表示がおかしい!! TweenLiteを入れたページでリロードするとこんな感じに。。 Unexpected token expo…

Nuxt.jsでvue-loadersを使ってみた

ローディングアニメーションを用意しようと見てたら、Loaders.cssが良さそうだなと! vue用のvue-loadersがあったので、Nuxt.jsに取り込んでみたときの備忘録 インストール $ npm install --save vue-loaders プラグインファイルを作る plugins/vue-loaders.…

Vueでリスト要素がふわっと横に消えるのアニメーション(リストトランジション/transition-group)

Vue/Nuxtのv-forを使ったリストで削除するときに、 リスト要素が横にずれながら消えるアニメーションをしたいときの備忘録 ほぼ、Vueの公式ガイドに書いてあった。。 おぉリストのアニメーションもできた(*´ω`*)削除時にふわっと横に消えていくヽ(=´▽`=)ノ公…

Vue+TweenLiteでカウントアップアニメーション(数字がクルクルするやつ)

Vueの公式ガイドにある数字を変更すると、 数字がクルクルするアニメーションを使ってみたので、その時の備忘録。 Vueすごい。。TweenLiteすごい。。 おぉ数字がクルクルするアニメーションできた(*´ω`*)Vueすげー TweenLiteすげーってなってる(*´ω`*) pic…

vuex-classを使うとNuxt+TSのModuleなStoreがスッキリかけた

またまた Nuxt公式サンプルから。 Vuex Store (using vuex-class) - Nuxt.js vuex-classを使うとStoreのState/Getter/Actionなどを アノテーションで紐付けれるらしい。。なにこれ、超便利。。 page/componentsの部分 こんな感じでできるよう。。すごい。。 …

SSRなNuxtで認証情報をセッションに保存する

SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存…

Vue/Nuxtのイベント修飾子をまとめてみた

Vue/Nuxtで開発しているときに、何度も調べなおすので、まとめてみた。 修飾子の一覧 <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a>

JavaScriptのobjectのCloneとPropety Delete

JavaScript/TypeScriptでobject型の値をあれこれしたいなと思ったので、 そのときの備忘録。Stack Overflowすごい。。 clone 1. Spread Properties: Yes, Methods: No, Deep Copy: No var clone = { ...customer }; 2. Object.assign Properties: Yes, Metho…

Roppongi.vueにリモートで参加してみた!

ライブビューイングできる勉強会があるようなので、初勉強会だけど参加してみた(´ω`) いつもスライドだけ見てたけど、ライブ感すごい。。次は現地にいきたい。。 roppongi-vue.connpass.com www.youtube.com Roppongi.vueのふんいき はじまってます〜 #ropp…

AndroidのDatePickerDialogで最初に年選択を表示する

Twitterみていたら@_monoさんのすてきなツイートを見つけたので、さっそく試してみたときの備忘録 年のところを押すと年選択できるの分かりにくいので、僕は初期表示を年選択モードにしてる( ´・‿・`)(選択済みの場合は日付選択モードを初期表示) https://t.c…

AngularFirebaseのNoSQL設計パターンをER図で書いてみた

前回の記事と同様に以下の記事の内容を整理した。 Advanced Data Modeling With Firestore by Example | AngularFirebase 出てくる例ごとにER図を書いてみると、なんとなくNoSQLわかってきたかも。 基本的な考え方 複製 複数のDocumentを作成しないよう、あ…

NoSQLのテクニックが書いてある「Advanced Data Modeling With Firestore by Example」を翻訳してみた

オリジナルの記事は、こちら。 Advanced Data Modeling With Firestore by Example | AngularFirebase NoSQLのデータ構造や設計について、いろんな事例が書いてあってすてきだったので、 Google翻訳で翻訳した(´ω`) 翻訳精度すごい。。 内容の整理は別途や…

いまさらFirebaseのCloud Firestoreに入門してみた

以前RealTimeDatabaseで簡単なアプリを作ったことがあるけど、 Firestoreにそろそろ入門せねばと、公式ドキュメントの内容を整理してみた。 とりあえず、チートシート的に使うために、公式ドキュメントのまとめだけ。 概要 まずは、公式の「Cloud Firestore…

ISBN13からISNB10/ASINを計算する (TypeScript ver.)

書籍検索をするとISBN13だけのものもあり、 ASINと同じISBN10を計算したいなと、 いろいろ調べたので、その時の備忘録。 はじめてみたけど、チェックディジットの簡単に計算できるのはびっくり! ISBN13 → ISBN10 左3桁と右1桁目を取る 「モジュラス11 ウェ…

楽天ブックAPIを使ってみた

API

書籍検索APIを探してたときに見つけた、楽天ブックAPIを試してみた! 使った感のまとめ アカウント登録が必要。でも、使い方は簡単 タイトル、出版社, 著者、発行日、概要、サムネイル、価格などほぼ取得できる ページ数は取得できないっぽい タイトル・著者…

国立国会図書館サーチで提供するAPIを使ってみた

書籍検索APIを探してたときに見つけた、国立国会図書館APIを試してみた! 使った感のまとめ 認証なしで利用可能。検索も柔軟。 読み方がわかればシンプルだが、ドキュメントがわかりにくいかも。。 タイトル、概要、出版社, 著者、出版社、発行日、価格、ペ…

OpenDBを使ってみた

API

書籍検索APIを探してたときに見つけたOpenDBを試してみた! 使った感のまとめ 認証なしで利用可能。使い方も簡単 タイトル、出版社, 著者、発行日(精度低)が取得できる 概要、サムネイル、高精度の発行日、価格、ページ数は取得できないものもある ISBN指定…

Nuxtで開発するときによくみるリンク集

Nuxt/Vue関連はドキュメントが充実しているのでよく見るけど、 毎回ググっているのがめんどくさくなってきたので、まとめてみた。 Nuxtのガイド/APIリファレンス ルーティング - Nuxt.js ビュー - Nuxt.js 非同期なデータ - Nuxt.js Vuex ストア - Nuxt.js A…

Google Book APIを使ってみた

書籍検索APIを探してたときに、Google Book APIを試してみた! 使った感のまとめ 認証なしで利用可能。使い方も簡単 タイトル、概要、サムネイル、著者、ページ数、発行日(精度低)が取得できる 出版社、高精度の発行日、価格は取得できない 応答率はいいが網…

ZEIT/NowでTypeScriptしてみる

前回の記事でJavaScriptでNowを利用できるようになったので、 TypeScript化できるようにしてみる。 それぞれ、GitHubで公開。 変更前(JS): zeit-now-minimum-example | GitHub 変更後(TS): zeit-now-minimum-example-ts | GitHub TypeScript化するためにやっ…

Webアプリやサービスを簡単にクラウド化できるZEIT/nowでWebAPIを作ってみた

FirebaseのHostingとCloud Functionでいろいろしようかなと思ってたところ、 nowのほうがいいなと思ったので、その時の備忘録 nowにしようと思った理由 Firebase上でNuxtアプリを動かしているが、以下の2点が気になる。。 外部APIを利用する場合、APIKeyなど…

調べたアニメーションライブラリのちょっとしたまとめ

Webサービスの画面にアニメーションをつけたいなと思ったときに、いろいろ調べたときの備忘録。 いろいろあって悩ましい。。 アニメーションライブラリ AOS - Animate on scroll library スクロールアニメーションのライブラリ。簡単に導入できる Delighters…

Figma / Google Gallary をほんのちょっとだけ調べたみた

デザインツールはなにがいいだろうと思い、 気になっていたFigmaとGoogle Gallaryを調べてみたときのメモ。 Whimsicalも気になっているので、今度調べてみる。 Figma: デザインツール UIデザインを作成するツール。四角とか丸とかを組み合わせて作るっぽい。…

Nuxt.jsで自動生成するvue-routerのファイルは、.nuxt/router.jsに配置される

タイトルですべてを言っている感。。 Nuxt.js+nuxt-i18nでpageから、ルーティングを自動生成していると、 最終的にどんな設定になっているかわからない時がある。 今、どんなルートがあるかを確認したかったので、調べてみたときの備忘録。 自動生成したルー…

BitBucketからGitHubへ移行するときにやったこと

GitHubのプライベートリポジトリが無料になったらしいので、移行を考えてみる。 GitHubとBitBucketの違い 個人的に思う違いは以下の感じ。 ほかにもいろいろあるけど、気にしているところは以下のとおり。 GitHub プライベートリポジトリ無制限 共同編集は最…