くらげになりたい。

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

javascript

ローカルPCからfirebase-adminを使ってFirestoreを操作する(管理ツール)

Firestore、便利だけど一括取得とか一括実行をGUIでやるのがつらい。。 スクリプトでできないかなと思っていたら、できるっぽいので調べてみたときの備忘録。 テストデータ生成とか不要データの削除とかいろいろ使えそう(´ω`) ディレクトリ構成 my-admin/ -…

JSでランダムな文字列を生成する3つのライブラリ(Nano ID/uuid4/shortid)

ユニークIDなどのためにランダムな文字を生成したいなと思ったら、 いろいろライブラリがあったので、調べたときの備忘録 調べたのは、以下の3つ Nano ID uuid4 shortid Nano ID セキュエアでURLフレンドリーな文字でユニークIDを生成してくれるライブラリ v…

bitly APIで短縮URL(TwitterのURLバン対策 パート2)

前の記事でFirebase Dynamic Linksを使ったURL短縮を書いたけど、 ドメインを自分で設定するのでURLバンされる気してbitly APIも試してみた。 その時の備忘録。 TwitterのURLバンについては、もぎゃさんのCrieit記事を参照 crieit.net 準備 bitly アカウント…

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…

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

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

NuxtをTypeScript化するときのやりかた

Vue.jsとNuxt.jsでいろいろ作っているけれど、TypeScriptが素敵すぎる。。 create-nuxt-appだとTypeScriptがないので、TypeScript化するときにやることを整理したときのメモ TypeScriptが使えるように設定する 0. ディレクトリ構成 ディレクトリ構成はこんな…

Vue.jsでの配列・オブジェクト操作のお作法

Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。 お作法があるので、調べてみたとこの備忘録。 配列 // 追加: pushを使う let addItem = ... this.items.push(addItem); // 変更: spliceを使う let modifyIndex = 1; let modifyItem …

【小ネタ】JavaScriptでクリップボードにコピーする(Async Clipboard API)

クリップボードにコピーするほう法を調べたので、その備忘録。 // Copy navigator.clipboard.writeText("some text").then(function() { // Promise resolved successfully. console.log("Copied to clipboard successfully!"); }, function() { // Promise …

SNSシェアボタンを追加するあれこれ(Facebook/Twitter/Google+/はてなブックマーク/LINE/Pocket)

ウェブサイトによくあるSNSのシェアボタン。使いたいなと思い、いろいろ調べたときの備忘録。 アイコンを探す アイコンは色を変えたりなどしたいので、CSS fontがいい。 - Font AwesomeとかLigature Symbolsを見てみる - なければ、Simple IconsでSVGを探し…

ScrollRevealで簡単JavaScriptアニメーション

スクロールすると表示されるアニメーションとかをやりたかったので、 いろいろ調べたら、ScrollRevealがいい感じだった。その時の備忘録 npmでインストール $ npm install scrollreveal --save スクロールアニメーションの設定 import ScrollReveal from "sc…

Django x jQuery x Ajaxで非同期にファイルをアップロードしてサーバ側で処理をする

前に記事で書いた処理のファイルバージョン。 wannabe-jellyfish.hatenablog.com 見た目的にはこんな感じ。 HTML側 <form id="form" class="form" action="upload_file" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="input-group"> <input type="text" class="form-control" readonly=""> </div></form>

DjangoとjQueryでAjaxする

最近、フロントエンドもやるようになり、いまさらjQueryでAjaxを使うことに。。 右も左も分からないので、その際の備忘録。 コードはこんなかんじ formで入力を受け付けて、submitの際に、Ajaxでの通信に切り替える感じ 成功するとdiv配下に、帰ってきたHTML…