はじめに

特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。

TL;DR

続きを読む

はじめに

axios で、添付ファイルありのリクエストを送信する方法を整理した。

【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム を参考にさせてもらった。

TL;DR

続きを読む

はじめに

サーバ(Node.js)からプッシュ通知を送信する方法として、firebase-admin を使って簡単なプッシュ通知を送信する方法を整理した。

関連: Vue + Cordova + Firebase でプッシュ通知

TL;DR

続きを読む

はじめに

Vue.js で画像プレビューする方法を整理した。

基本的に たった2ステップ!Vue.js で選択画像をプレビューする方法(サンプルDL可) – console dot log の通り。

TL;DR

  • <input type="file">@change でイベントハンドラを設定
  • イベントハンドラ内で FileReaderreadAsDataURLdata: url として読み込み
  • 読み込み完了したら Vue の datadata: url を設定
  • <img :src="dataUrl>` のようにバインドして表示
続きを読む

はじめに

Vue + Cordova + Firebase でプッシュ通知を利用する方法を整理した。

※Firebase やプッシュ通知の細かい仕様については詳しくないため、最新/最適 でない方法の可能性があることに注意。
※試行錯誤を経て成功した後に情報を整理しているので、手順漏れや実施タイミングが異なるものなどがあるかもしれないことに注意。

関連: Node.js で firebase-admin を使ってサーバからプッシュ通知

TL;DR

続きを読む

はじめに

ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。

デモページ

TL;DR

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

はじめに

「画像クリックで拡大」を簡単に実現できる 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 を使う方法(chance.js)、npm からインストールする方法(crypto-random-string)についてまとめた。

TL;DR

続きを読む

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



カテゴリー Programming

はじめに

ブラウザで 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 でアクセス
続きを読む

r17n


Softwear Engineer


Fukuoka