Sarahahや質問箱みたくPost文字を含む画像生成の方法はどのようにすればよいでしょうか。

Question

初めまして。お尋ねしたいことがあります。

知りたいこと

掲題の通りなのですが、わかりやすく、
GIFを用意しました。

流れ
step1	フォームに文字を入力。POST
step2	文字を含む画像が生成

現状スキル

わたくし自身の現状スキルとして、
carrierwave, piet・mini_magick等による
画像投稿・サイズ圧縮、 awsのS3への格納はRailsサービスを開発する上で学習しました。

困っています

rails 文字 post 画像生成

等で調べると、RMagickというライブラリを利用することはわかりました。
また画像加工のコード自体は出てくるのですが、

フォームから文字を受け取り、Sarahahや質問箱みたくPost文字を含む画像生成を動的に行う情報源

を見つけることができませんでした。
些細な情報でも構いませんので、類似したソースをご存知の方、いらっしゃったらご教授頂けると幸いです。

p.s.

技術要件はruby,railsをメインとしています。

Comments

[m.ts10806]

phpならGDライブラリというのがあるのですが、それだと要件に合わないですよね。いずれにしても「POSTの文字列は関係なく任意の文字列を画像に埋め込める」というアプローチになります。

[退会済みユーザー]

mts10806さん、ありがとうございます。GDライブラリ見てみますね。ただ、一応 ruby , rails を用いていまして、そちらの技術要件だといいなあという想いはあります。技術要件を追加で質問に加えておきます。

[m.ts10806]

考え方は言語に限らず同じはずなので、私なりのアドバイスを回答として書きました。参考にしてください。

Answer 1

cairo という gem を使う方法もあります。
Cairo という（同名の）グラフィックスライブラリーを Ruby で使えるようにしたものです。

こんな感じで：

require "cairo"

# 表示テキスト
text = "Hello, Cairo!"

# 画像サイズ（px 単位）
image_width = 320
image_height = 240

# サーフィスというものを用意
# フォーマットは FORMAT_ARGB32（アルファチャネル付き RGB 画像）
surface = Cairo::ImageSurface.new Cairo::FORMAT_ARGB32, image_width, image_height

# サーフィスを元にコンテキストというものを用意
context = Cairo::Context.new surface

# フォントサイズ指定（px 単位）
context.set_font_size 32

# フォント指定
context.select_font_face "Georgia"

# (10px, 20px) の位置に移動
context.move_to 24, 80

# テキスト描画
context.show_text text

# PNG 出力
surface.write_to_png "result.png"

Ruby の cairo ライブラリーについては下記が分かりやすいと思います。一部古くなっている箇所がありますが，いまでも役に立ちます。
Rubyist Magazine - cairo: 2 次元画像描画ライブラリ

使うべきメソッドや定数などが分かっているときは公式マニュアルの 索引 からページを探します。

Answer 2

Rails は詳しくないので、具体的な回答にはならないことをまずはお断りしておきます。

ネットで探してみてもピッタリな情報が見つからない場合は、ご自身の問題を分割してみることをお勧めします。

フォームから文字を受け取り、Sarahahや質問箱みたくPost文字を含む画像生成を動的に行う

という処理をおおまかに分割すると、以下のようになります。

1. フォームからPOSTされたデータを受け取る
2. 受け取ったデータから、必要な個所（今回は、画像に含めたい文字列）を取り出す
3. 取り出した文字列をもとに、画像を生成する
4. 生成した画像を、どこかに保存する or レスポンスとして返す

どのあたりがわからないのでしょうか？
なんとなく、 1 と 2 はOK / 3 と 4 あたりが不明確、という感じでしょうか。

わからない箇所がわかったら、それについて調査します。
それでもピッタリな情報が見つからなければ、そのわからない箇所をさらに細かく分割し、どこまでならわかる / どこがわからない を明確にします。
またわからない箇所がわかったら、それについて調査します。
（以下ループ）

これを繰り返せば、いつかは問題が解決できると思いますよ。

---

ネットの情報というのは、自分の求めているものとピッタリ一致するとは限りません。
問題を分割して「わからない箇所がどこなのか明確にする」と、答えに近づきやすくなりますよ。

Answer 3

こういうサービスに対する質問の答えは公式のツィッターを探すと答えが書いてあることが多いです。
質問箱の作者のツィッターでの回答

ImageMagickを使ってゴリゴリ合成しています

rmagickやmini_magickなどのラッパーgemを使えば参考になる記事が出てきます！

とのことです、ご参考まで。

Answer 4

まあ、<canvas>つかってクライアント上で画像を生成してサーバーに画像を送信するという手も。
サンプル(画像生成まで)

Answer 5

手元にRuby環境がないので調べた情報で申し訳ないですが、ご提示のRMagickの機能紹介記事で下記のようなものがありました。

• Ruby - RMagick で画像内に文字を描画！

※冒頭にあるように4年以上前の記事なので現在も同じように書けるかは分かりません。

ここからはフロー、というか考え方の話なのですが、
フォーム入力のPOSTであっても何であっても、ライブラリ側は「指定にそって画像化を行う」処理をしているに過ぎません。
渡される文字列がフォーム入力であろうと固定であろうと、ライブラリにとっては単なる引数のひとつに過ぎないわけです。

というわけで、質問者さんが実現のために踏むべきステップは下記ですね。

1. RMagickを利用して固定文字列を埋め込んだ画像を作成させる
2. 入力フォームを作成し、POSTした情報をPOSTした先で受け取り画面に表示させる
3. 2.でPOSTされた情報（文字列）が受け取れたら、その文字列をRMagickに渡して画像を作成させる