はじめに

ページ中の複数の画像を zip に圧縮してローカルにダウンロードする方法を整理した。
JavaScript で画像をローカルにダウンロード の続き

TL;DR

続きを読む

はじめに

JavaScript で画像をローカルにダウンロードする方法を整理した。

img タグで表示されている画像を JS 実行で保存するような処理を想定。

参考: zip にまとめてダウンロード編: JavaScript で複数画像を zip に圧縮してローカルにダウンロード

TL;DR

続きを読む

はじめに

Apache2 + PHP でウェブサーバを立てている状況で、非公開ディレクトリ(パブリックでないローカルのディレクトリ)の画像を読み込んで表示する方法を調べた。

※「画像は表示したいが、画像ファイル自体は公開ディレクトリに格納したくない」のような特殊なケース

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'))
続きを読む

CSS の display:none と visibility:hidden について



カテゴリー Programming

はじめに

display, visibility プロパティについて簡単に整理した。

TL;DR

  • display: none;display: block;(flex, etc…) で要素の 表示/非表示
    • 表示に影響が出る(他要素の位置が変わったりする)
  • visibility: hidden;visibility: visible; で要素の 表示/非表示
    • 表示に影響が出ない(他要素の位置は不変)
  • display: none;visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
    • アクセシビリティを保つにはここを参考(試してない)
続きを読む

はじめに

<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 属性を消せる
  • 上記をまとめると以下
1
2
3
4
<img src="404.png"
onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"
onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"
>

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

続きを読む

はじめに

yuki24/rambulance で動的なエラーページを表示する方法についてまとめた。

TL;DR

  • Gemfilegem "rambulance" 追加 → bundle (or bundle install) でインストール
  • rails g rambulance:install でセットアップ
  • config/initializers/rambulance.rb"例外" => "対応ファイル" のペアを記述
  • app/views/errors/対応ファイル.html.xxx にエラーページの内容を記述
  • /rambulance/対応ファイル にアクセスすると、エラーページの内容が確認できる
続きを読む

はじめに

最近のサイトでよく見かける「このサイトでは 〜 Cookie を利用します」という表示を、osano/cookieconsent を用いて簡単に実現する方法について調べた。

TL;DR

  • osano/cookieconsent で簡単に表示を追加可能
  • 公式ページ で簡単に見た目を変更可能
  • オプションが豊富なため、細かいカスタマイズもできる
続きを読む

r17n


Softwear Engineer


Fukuoka