初めに
この記事はフォームに名前を入力するとPDF化された印鑑を出力するアプリを作ろうの後半です。
フォームに名前を入力するとPDF化された印鑑を出力するアプリを作ろう①（Ruby on RailsでPDFファイルを作成）
前回まででPDFファイルを出力するところまで実装できました。今回はPrawnのGemによる基本的なカスタム方法について説明していきます。
PrawnによるPDFのカスタム
Prawnの基本機能はText、Graphics、Bounding Boxの3つです。
それぞれについて説明しながら印鑑を実装していきます。
実装する準備としてPDFに座標を表示します。
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のタイトルを中央揃えで表示させます。
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を使っていきます。
印鑑の外枠部分を表示させます。
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化を可視化してみます。
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のブロック中に印鑑の輪郭と名前を入れてみます。
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画面
最後に座標とブロックの描写を取り除き、コンポーネント化して完成！！！
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もあります。これから用途に合わせて使っていきたいです。最後まで読んでいただきありがとうございます。