JavaScript で画像をローカルにダウンロード

tippy(<target>, { content: 'my tooltip' }) でツールチップを設定
- <target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OK
content に HTML も設定可能
- tippy(<target>, { content: '<strong>my tooltip</strong>' })
- tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
既存テーマを利用する場合は CSS を読み込んで theme: 'light のように指定

「画像クリックで拡大」を簡単に実現できる luminous の使い方

2019/12/08 11:25
2019/12/08 11:25
カテゴリー Programming

タグ
HTML JavaScript Node.js Programming

はじめに

「画像クリックで拡大」を簡単に実現できる imgix/luminous を触る機会があったので、簡単に使い方を整理した。

デモページを見ると、何ができるのかがすぐわかる。

TL;DR

npm i luminous-lightbox でインストール
- CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
<a href="拡大画像"><img src="サムネイル"></a> に対して以下を実行
- new Luminous(document.querySelector('a'))
ギャラリー表示の場合は LuminousGallery を使用
- new LuminousGallery(document.querySelectorAll('a'))

JavaScript で 16進数ランダム文字列を簡単に生成(CDN, npm)

2019/11/27 22:00
2019/11/27 22:00
カテゴリー Programming

タグ
JavaScript Node.js Programming npm

はじめに

JavaScript で 16進数ランダム文字列を簡単に生成する方法を調べた。

CDN を使う方法(chance.js)、npm からインストールする方法(crypto-random-string)についてまとめた。

TL;DR

CDN なら chance.js
- chance.string({length: 8, pool: '0123456789abcdef'})
npm なら crypto-random-string
- cryptoRandomString({length: 8})

JavaScript で 16進数の固定長文字列かどうかを判定する方法

2019/11/27 14:35
2019/11/27 22:00
カテゴリー Programming

タグ
JavaScript Node.js Programming

はじめに

JavaScript で 16進数の固定長文字列を判定する方法を調べた。

TL;DR

/^[0-9a-f]{64}$/i.test(target) で確認できる
元ネタ: javascript - How to check if a string is a valid hex color representation? - Stack Overflow

ブラウザで Node.js の Buffer を使う(CDN)

2019/11/26 14:25
2019/11/27 22:00
カテゴリー Programming

タグ
JavaScript Node.js Programming npm

はじめに

ブラウザで Node.js の Buffer (相当) を使う方法を整理した。

なお、この記事で紹介するのは CDN から読み込んで使う方法なことに注意。

TL;DR

<script src="https://bundle.run/buffer"></script> を使う
- jsDelivr のもの(https://cdn.jsdelivr.net/npm/buffer@5.4.3/index.min.js)だと NG
buffer.Buffer でアクセス

HTML img タグで画像が 404 エラーのときに代替画像を表示する方法

2019/11/23 13:55
2019/11/26 14:25
カテゴリー Programming

タグ
HTML JavaScript Programming

はじめに

<img src="xxxx.png"> で xxxx.png が 404 エラーとなったときに、デフォルトで代わりの画像を表示する方法をまとめた。

TL;DR

onerror="this.src = 'alt.png'; this.removeAttribute('onerror')" を指定
- エラー時には代替画像を読み込んで、onerror 属性自身も削除
onload="this.removeAttribute('onerror'); this.removeAttribute('onload'); も一緒に指定
- エラー無し時に onerror, onload 属性を消せる
上記をまとめると以下

<img src="404.png"
  onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"
  onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"
>

※MDN によると onerror は非推奨、ご利用は計画的に

Cordova で端末やエミュレータを指定してデプロイする

2019/11/21 14:30
2019/11/28 14:30
カテゴリー Programming

タグ
Android Cordova JavaScript Node.js Programming iOS

はじめに

Cordova でアプリデプロイ時に、指定した端末やエミュレータにデプロイする方法についてまとめた。

TL;DR

cordova run --list で利用可能なデバイスの表示。
cordova run ios --target=<target id> で実機へのデプロイ
cordova emulate ios --target=<target id> でエミュレータへのデプロイ

Git リポジトリや既存の Cordova アプリ向けコードを使って Cordova 環境を構築する方法

2019/11/21 14:15
2019/11/28 14:30
カテゴリー Programming

タグ
Android Cordova JavaScript Node.js Programming iOS

はじめに

GitHub などに登録されている Cordova アプリのソースコードをクローンした後に、クローンしたコードを使って Cordova 環境を構築(初期設定)する方法。

TL;DR

既存ディレクトリをリネーム
- mv <original name> <renamed name>
--template オプションを使って cordova create
- cordova create <original name> --template=<renamed name>
リネームしたディレクトリを削除
- rm -rf <renamed name>

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

はじめに

TL;DR

r17n

Hexo でブログを作成して Netlify で公開するまで

はじめに

TL;DR

目的・やったこと

Python で MySQL の操作が可能な ORM peewee

はじめに

Git で#から始まるコミットメッセージを登録

はじめに

TL;DR

目的・やったこと

Python requests で画像をダウンロードして保存する方法

はじめに

TL;DR

目的・やったこと

Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)

はじめに

TL;DR

目的・やったこと

Python boto3 で AWS S3 を操作する

はじめに

TL;DR

目的・やったこと

Python requests + boto3 で AWS S3 に画像を直接アップロード

はじめに

TL;DR

目的・やったこと

Node.js で BTC の単位変換する satoshi-bitcoin

はじめに

TL;DR

目的・やったこと

JavaScript で setTimeout や addEventListener のコールバック関数に引数を渡す方法

はじめに

TL;DR

目的・やったこと

Node.js でディレクトリごとにバージョンを変更する nodenv

はじめに

TL;DR

目的・やったこと