Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

ダミー画像を作るJavaScriptライブラリとWebページ。

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 dummysan.html
Octocat-spinner-32 dummysan.js
README.md

ダミーさん

ダミー画像をつくります。
Photoshopでダミー画像を作るなんてめんどうだし遅いし、今ならCanvas API使えばできるだろうと2009年くらいに思って作り始めました。
プロトタイプはできたのですが未完成です。

JavaScriptの勉強がてら作ってます。

ダミーさん(プロトタイプ)の機能

プロトタイプはシンプルなWebページです。
テキストボックスに幅と高さを入力して生成ボタンを押すとダミー画像が出てくれます。
ダミー画像は灰地で、真ん中に「幅 × 高さ」と大きさを書いてくれてます。

幅と高さのフォーマットは次のとおりです。

  • width height
  • width x height
  • width, height

なんとなくフレキシビリティを持たせたかっただけです。x,を使う場合、前後のスペースは任意です。

ここまでが、今のダミーさんです。もうちょっと頑張って、つぎの2つを実現させたいです。

計画: ダミーさん Level 2(仮称)

プロトタイプという言い訳をしていますが、ダミーさんはしょぼいです。

  • ラベルをカスタマイズできません
    • 大きさだけでなく目的や用途をラベルに書いておきたい場合があるかもしれません
    • 真ん中以外に置きたいことがあるかもしれません
  • 背景に任意の画像を使いたい場合があるかもしれませんが、それもできません
  • ダウンロードはブラウザ任せです、右クリックで保存するとかになります
    • クリックしたらダウンロードくらいしてほしいものです
  • 複数のダミーをまとめてダウンロードすることもできません
    • 各ファイルの名前もちゃんと決めてくれるかどうか分かりません

これらすべてを取り込めるかどうかはわかりませんが、機能拡張をしたいです。

計画: ダミーさんEmbedded(仮称)

ダミーさん2で機能が充実したとして、ダミーさんが使われるとはあまり思っていません。
ダミーを作ってダウンロードしても、HTMLを書くときは何も手助けしてくれないからです。

というわけで、特定の記法をフックにして自動的にダミー画像で置き換えるというものを考えています。
たとえばこんな感じです。

<img src=dummy320x240 ...>

320×240なダミー画像で置き換えてくれます。

<img src=dummy200x40 data-label="バナー" data-bg=dummybg.jpg ...>

ラベルをつけて、背景画像を変えてくれます。 ラベルについてはdata-属性は長くて書くのが面倒なので、titleとかaltから流用するといいかもしれません。

Something went wrong with that request. Please try again.