くらげになりたい。

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

javascript

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

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…