初めに

この記事はフォームに名前を入力するとPDF化された印鑑を出力するアプリを作ろうの後半です。
フォームに名前を入力するとPDF化された印鑑を出力するアプリを作ろう①（Ruby on RailsでPDFファイルを作成）

前回まででPDFファイルを出力するところまで実装できました。今回はPrawnのGemによる基本的なカスタム方法について説明していきます。

PrawnによるPDFのカスタム

Prawnの基本機能はText、Graphics、Bounding Boxの3つです。
それぞれについて説明しながら印鑑を実装していきます。

実装する準備としてPDFに座標を表示します。

stamp_pdf.rb

class StampPdf < Prawn::Document
  def initialize(user)
    super(page_size: 'A4')
    # 座標を表示
    stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
  end
end

PDF画面

Text

早速、Textを使っていきます。
このPDFのタイトルを中央揃えで表示させます。

stamp_pdf.rb

class StampPdf < Prawn::Document
  def initialize(user)
    super(page_size: 'A4')
    # 座標を表示
    stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
    # タイトル（追記箇所）
    text_box "印鑑のPDF化", at: [0, 700], align: :center, size: 20
  end
end

座標[x, y] = [(0と最大値（A4の場合523）の中央値), 700]にフォントサイズ20の印鑑のPDF化という文字が表示されます。

PDF画面

Graphics

次にGraphicsを使っていきます。
印鑑の外枠部分を表示させます。

stamp_pdf.rb

class StampPdf < Prawn::Document
  def initialize(user)
    super(page_size: 'A4')
    # 座標を表示
    stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
    # タイトル
    text_box "印鑑のPDF化", at: [0, 700], align: :center, size: 20
    # 図形の色（追記箇所）
    stroke_color 'ce3337'
    # 円（追記箇所）
    stroke_circle [260, 550], 50
  end
end

円の中心座標[x, y] = [260, 600]に半径50、輪郭の色がce3337の円が表示されます。

PDF画面

Bounding Box

最後にBounding Boxを使っていきます。
一旦、円を消してBox化を可視化してみます。

stamp_pdf.rb

class StampPdf < Prawn::Document
  def initialize(user)
    super(page_size: 'A4')
    # 座標を表示
    stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
    # タイトル
    text_box "印鑑のPDF化", at: [0, 700], align: :center, size: 20
    # 図形の色
    stroke_color 'ce3337'
    # 円
    # stroke_circle [260, 550], 50
    # Bounding Boxのブロック（追記箇所）
    bounding_box([235, 600], width: 50, height: 100) do
      # boxの描画
      stroke_bounds
    end
  end
end

座標[x, y] = [235, 600]の右下に横50、縦100のBounding Boxが表示されます。
Bounding Boxは描画範囲を指定することができるので、rubyのブロックと相性がいいです。

PDF画面

追記したBounding　Boxのブロック中に印鑑の輪郭と名前を入れてみます。

stamp_pdf.rb

class StampPdf < Prawn::Document
  def initialize(user)
    super(page_size: 'A4')
    # 座標を表示
    stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
    # タイトル
    text_box "印鑑のPDF化", at: [0, 700], align: :center, size: 20
    # 図形の色
    stroke_color 'ce3337'
    # テキストの色
    fill_color 'ce3337'
    # Bounding Boxのブロック
    bounding_box([235, 600], width: 50, height: 100) do
      # boxの描画
      stroke_bounds
      # 円（追記箇所）
      stroke_circle [25, 50], 50
      # テキスト（追記箇所）
      text_box "#{user.name}", at: [5, 90], size: 40
    end
  end
end

少しややこしいんですが、このブロック中の原点がわかれば簡単です。
原点は長方形ブロックの左下の頂点[x, y] = [235, 500（600ー100）]です。
ということで、描写される円の中心は[x, y] = [260(235+25), 550(500+50)]、半径40となり、
テキストは座標[x, y] = [240(235+5), 590(500+90)]の右下へフォント40の文字が表示されます。
＊テキストは右上から左下に表示され、デフォルトでブロックの幅を超えると改行する仕様です。この性質を使って縦書きを表現しています。

PDF画面

最後に座標とブロックの描写を取り除き、コンポーネント化して完成！！！

stamp_pdf.rb

class StampPdf < Prawn::Document
  # userにモデルなどのデータを渡します
  def initialize(user)
    # superで初期設定を指定 新規PDF作成
    super(page_size: 'A4')

    # 座標を表示
    # stroke_axis
    # font指定
    font "app/assets/fonts/SourceHanSans-Bold.ttc"
    # box化
    create_title
    create_stamp(user)
  end

  # タイトル
  def create_title
    text_box "俺の印鑑", at: [0, 700], align: :center, size: 20
  end

  # 印鑑
  def create_stamp(user)
    bounding_box([235, 600], width: 50, height: 100) do
      # boxの描画
      # stroke_bounds
      # 図形の色
      stroke_color 'ce3337'
      # 円
      stroke_circle [25, 50], 50
      # テキストの色
      fill_color 'ce3337'
      # テキスト
      text_box "#{user.name}", at: [5, 90], size: 40
    end
  end
end

PDF画面

今回は印鑑実装で図形を扱うのでPrawnというGemを用いてPDF化をしましたが、wicked_pdfなどのGemもあります。これから用途に合わせて使っていきたいです。最後まで読んでいただきありがとうございます。

フォームに名前を入力するとPDF化された印鑑を出力するアプリを作ろう②（PrawnによるPDFファイルのカスタム）

初めに

PrawnによるPDFのカスタム

Text

Graphics

Bounding Box

参考文献