はじめに
パレットを作ってみました。パレット自体は目新しいアイデアではないかもしれませんが、ベースボールにおける素振りみたいなことは続けたほうが良いと思い、少し手を動かしてみました。
ここでパレットと呼んでいるものは、テーブル要素のstyle属性でbackgroundに値を指定して、色を並べたものです。簡単に言ってしまえば色を並べたものです。
どんなものが出来上がるか？
次のような表示になります。
それをどうやって作るか？
フレームワークにRailsを使います。まず、新規にアプリケーションを作成します。適当なディレクトリで次のようなコマンドを実行します。
$ rbenv exec rails new palette
_palette_ディレクトリが作られるので、そのディレクトリに移動します。次に、コントローラとビューを用意するために、次のようなコマンドを実行します。
$ cd palette
$ rbenv exec rails generate controller Rgb sample
細かい説明は省略しますが、ここまでの手順はシンプルです。（ひとによっては、Gemfileを用意して、bundlerでRailsをbundleするかもしれません）
最後に、ビューを実装するために、次のようなコマンドを実行します。
$ vim ./app/views/rgb/sample.html.erb
実装は次のようになります。詳しくは説明しませんが、Kernel#formatがポイントだと思います。
<h1>Rgb#sample</h1>
<p>Find me in app/views/rgb/sample.html.erb</p>
<% count = 0; rows = [0xF00, 0xE00, 0xD00, 0xC00, 0xB00, 0xA00, 0x900, 0x800, 0x700, 0x600, 0x500, 0x400, 0x300, 0x200, 0x100, 0x0, 0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xA, 0xB, 0xC, 0xD, 0xE, 0xF]; columns = [0x0, 0x10, 0x20, 0x30, 0x40, 0x50, 0x60, 0x70, 0x80, 0x90, 0xA0, 0xB0, 0xC0, 0xD0, 0xE0, 0xF0] %>
<table>
<% rows.each do |row| %>
<% columns.each do |column| %>
<% if count == 0 || count % 16 == 0 then %>
<tr>
<% end %>
<td style="background:#<%= format("%03X", row + column) =%>; width:20px; height:10px"></td>
<% count += 1 %>
<% if count != 1 && count % 16 == 0 then %>
</tr>
<% end %>
<% end %>
<% end %>
</table>
Kernel#formatの使い方については次のコマンドで確認できます。
$ ri format
まとめ
特に目新しいことはなにもないのですが、手を動かしてなにかを作ってみると、作ってみたいものが見つかるかもしれません。
例えば、テーブル要素の隙間をなくして、隣り合うテーブル要素に同じ色を指定すれば、いろいろな形を表現できると思います。その形を変えるスクリプトを用意してみても面白いかもしれません。