くらげになりたい。

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

Vueでドラッグスクロール

Nuxtで開発をしてて、ドラッグスクロールしたいなと思ったら、 便利なライブラリがあったので、試したときの備忘録。 ドラッグスクロールは、スクロールするのをマウスホイールじゃなくて、 左クリックを押してドラッグしながら、スクロールするやつ。 デモ…

個人開発報告: 月例振り返り&開発予定 (2020年5月)

前回同様、4月を振り返りと実績値の公開、今月の開発予定です(´ω`) www.memory-lovers.blog 5月は積読以外もいろいろやった(´ω`) 積読ハウマッチ: 3回アップデート アップデートは3回。細かいのもあるけど。。 2020/05/02 スマホでのメニューがスリムに✨ 2…

Nuxt+Buefyでアクションシートをつくってみる

入力フォームが下からスライドして出てくるUIがいいなと思い、 Buefyでやってみたときの備忘録。 Nuxt/Vueのtransitionを使うとできた(´ω`) こんな感じ <template> <transition name="modal"> <div class="modal modal-sheet is-active" v-if="active"> <div class="modal-background" @click="close"></div></div></transition></template>

vue-chartjsでdata labelを使えるようにする

vue-chartjs、便利だけど、 数値とかデータラベルがほしいなと思って調べたときの備忘録。 chart.jsのプラグインでchartjs-plugin-datalabelsというのがあるらしい。 こんな感じのができる(´ω`) インストール $ npm i vue-chartjs chartjs chartjs-plugin-d…

@nuxt/componentsを使って、コンポーネントのimport文を不要にする

Nuxt.jsの公式ツイッターを見てたら、いい感じのモジュールがあったので、試してみたときの備忘録。 Introducing @nuxt/components ✨No need to import your components anymore ✅ Scan and auto import components✅ Multiple paths with customisable prefi…

FirestoreのonSnapshotでリアルタイム同期する

firestore便利だけど、getしか使ったことなかった。。 onSnapshotを使うと、変更されたデータを受け取れるので、試してみたときの備忘録。 ドキュメントはこれをみた。 ・Cloud Firestore でリアルタイム アップデートを入手する | Firebase 使い方 こんな感…

FontAwesome5をNuxt+Buefy(Bulma)で使えるようにする

以前の記事でvue-fontawesomeを使って、FontAwesome5を使えるようにしたけど、 nuxt-fontawesomeというもっと便利なのがあったので、試してみたときの備忘録。 便利だけでどデフォルトをFontAwesomeにしないといけないっぽい感じなので、併用していると難し…

スマホのシェア機能にWeb Share APIを使ってみる

スマホだといろんなアプリに送れたりするシェア機能がある。 WebサイトでもWeb Share APIを使うとできるらしいので試してみた。 サポート状況は、SafariとAndroidのChromだけ。 ・Can I use... Support tables for HTML5, CSS3, etc 使い方 すごく簡単。 pri…

Nuxtで簡単にクリップボードへコピーする(nuxt-clipboard2)

クリップボードコピーについて、いろいろやってみてるけど、 nuxt-clipboard2を使うとすごく簡単だった。ので、そのときの備忘録。 nuxt-clipboard2は、vue-clipboard2のNuxtモジュールで、 vue-clipboard2は、clipboard.jsのVueライブラリ インストール $ n…

コマンドでpng画像を圧縮/軽量化する(pngquant)

PNGの軽量化をWebサービスを使ってやっていたけど、 コマンドでやりたくなったので調べてみたときの備忘録。 pngquantというのがあるらしい。。 インストール $ brew install pngquant 圧縮する # 上書き保存(-f --ext) $ pngquant -f --ext .png image.png …