GitHubなどでよく見る幾何学画像ですが、これはgeo_patternというGemを使い、文字列を渡して一意の画像を生成しています。 低コストで導入できデザイン性も優れているため、覚えておくと便利かもしれません。 この用途や方法について解説します。

サンプル

geo_patternを用いると、以下のような画像を自動で生成することができます。 その他のサンプルはREADMEをご覧ください。

用途

たとえばブログの記事を書く場合、画像がないと見た目が簡素になりますが、かといってすべての記事に画像を用意するのは時間がかかってしまいます。

こんなとき、記事のタイトルから自動で画像を生成してくれれば、コストをかけずにある程度の見た目を担保することができます。 記事中に画像がある場合はそちらを、なければ自動生成したものを、という形で使い分ければよいでしょう。

あるいは、FacebookやTwitterのような、ユーザごとにカバー写真を設定できる場合、デフォルトのカバー写真としてユーザ名から生成された画像を設定しておく、というのも考えられるでしょう。

一般的に、「なんらかの画像がほしいが手動による準備は難しい」場合に適しています。

手順

それでは、幾何学画像を生成する手順について説明します。

1. インストールする

まずGemfileに以下を追記し bundle install します。

gem 'geo_pattern'

2. 生成する

あとは、以下のように文字列を渡すだけで画像を生成することができます。 画像は、(1)SVG形式と(2)Base64形式で取得できます。

pattern = GeoPattern.generate('文字列')
pattern.to_svg    # => <svg xmlns="http://www.w3.org/2000/svg" ...
pattern.to_base64 # => PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC...

これを背景画像として設定する場合は、divタグに以下のように設定します。

<div style="background-image: <%= pattern.to_data_uri %>"></div>

カスタマイズ

デフォルトでは色やパターンはプログラム側で決められますが、これを指定することができます。 たとえばつくるサービスのテーマカラーを base_color として設定すると、全体と調和してよいかもしれません。

GeoPattern.generate('文字列', base_color: '#39c')
GeoPattern.generate('文字列', color: '#39c')
GeoPattern.generate('文字列', patterns: :sine_waves)
GeoPattern.generate('文字列', patterns: [:sine_waves, :xes])

例：Railsで記事のデフォルト画像を生成する

ここでは記事のタイトルに応じて自動で画像を生成する例を考えます。 この場合、次のようになるでしょう。

app/models/post.rb:

class Post < ActiveRecord::Base
  def image
    GeoPattern.generate(title)
  end
end

app/views/posts/show.html.erb:

<div class="post">
  <div class="post-image" style="background-image: <%= @post.image.to_data_uri %>"></div>
</div>

おわりに

上記により、視覚的に楽しめる要素をコストをかけずに提供することができます。 コンテンツの1つのアイデアとして、ぜひ参考にしてみてください。