くらげになりたい。

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

javascript

Webでクリップボードにコピーする(zenorocha/clipboard.js)

以前の記事で、Clipboard APIやclipboard-polyfillを調べたけど、iOSのSafariで使えないなど制限が。。 clipboard.jsのほうがサポートが広かったので、調べてみたときの備忘録。 インストール $ npm install clipboard --save 使い方 基本的には、data属性を…

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認と…

DotEnv+Nuxt.jsでsrcDirを設定するとうまくうごかないときは、dotenv.pathを設定する

Nuxt.jsで環境変数の設定にdotenvを使ってたときの備忘録。 起こった現象 ソースディレクトリの場所を変えようと、 nuxt.config.tsにsrcDirを設定したら、うまく動かず。。 ディレクトリはこんな感じ。 / app/ .env nuxt.config.ts nuxt.config.ts内では、pr…

【小ネタ】ローカルにある画像ファイルをBase64エンコードするJavaScript

画像ファイルをData URL形式に変換したいなと思ったときの備忘録。 こんな感じ 読み込み時にbase64を指定できるらしい const fs = require("fs"); // 変換するファイルパス const filePath = "./photo.png"; // 対象のファイルをbase64形式で読み込み const …

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

JavaScriotでツイートしたいなと思って、いろいろ試していたら、 30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。 Node.jsでTwitter APIを使う Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう イ…

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

Nuxt.jsでツイートするアプリを作りたいなと思い、 文字数ってどうやって計算するんだろ?って思ったら、 公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録 Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるら…

<input type="file" />で選択した画像を<img>に表示する

雑だけど、こんな感じ(´ω`) <html> <body> <input type="file" id="myImage" accept="image/*" onchange="setImage(this);" onclick="this.value = '';"> <img id="preview"> <script> function setImage(target) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("preview").setAttribute(…</body></html>

ネストされたJavaScriptのオブジェクトをフラットにするhughsk/flatというライブラリ

ネストされたObjectをフラットにしたいなと思ってたら、いいライブラリが。 hughsk/flatを使ったらすぐできたので、その備忘録。 サンプルは、GitHubあるREADME.mdの抜粋です。 インストール $ npm install flat 使い方2: ネスト→フラット const flatten = r…

ローカル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)

クリップボードにコピーするほう法を調べたので、その備忘録。 2020/03/20追記 2020/03/20現在、Can I useをみると、Safariが未対応。。 clipboard-polyfill.jsを利用するのが良さそう。 www.memory-lovers.blog こんな感じ // Copy navigator.clipboard.wri…

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…