CodeZine(コードジン)

特集ページ一覧

QRコード付き名刺印刷アプリケーションの作成

GcBarCodeコントロールと、C1PdfDocumentコントロールを使った.NETアプリケーションの作成

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/09/19 14:00

 「PowerTools PlusPak for Windows Forms 6.0J」のGcBarCodeコントロールは、いろいろな種類のバーコードを作成するコンポーネントで、QRコードも簡単に作成できます。また、「PowerTools ComponentOne Studio 2012J」のC1PdfDocumentコントロールは、ドキュメントをPDF化するコンポーネントです。そこで、これらのコンポーネントを使用して、メールアドレスをQRコード化し名刺に組み込む、名刺印刷アプリケーションを作ってみました。

フォームに必要事項を入力し「名刺印刷」ボタンを押すと、
フォームに必要事項を入力し「名刺印刷」ボタンを押すと、
QRコードを組み込んだPDFを作成する
QRコードを組み込んだPDFを作成する

はじめに

 最近やたらと目につくQRコード。ファミリーレストランやショップのチラシなど、いろいろな媒体で目にしています。主にサイトのURLやコンタクト用メールアドレスをQRコード化し、携帯電話やスマートフォンですぐに入力できるようにしたものが主流のようです。

 「PowerTools PlusPak for Windows Forms 6.0J」のGcBarCodeコントロールは、いろいろな種類のバーコードを作成するコンポーネントで、QRコードも簡単に作成できます。また、「PowerTools ComponentOne Studio 2012J」のC1PdfDocumentコントロールは、ドキュメントをPDF化するコンポーネントです。

 そこで、これらのコンポーネントを使用して、メールアドレスをQRコード化し名刺に組み込む、名刺印刷アプリケーションを作ってみました。

対象読者

 Visual Basic、またはVisual C#のバージョン2005/2008/2010のいずれかを使って、プログラムを作ったことがある人。

必要な環境

 Visual Basic 2005/2008/2010、Visual C# 2005/2008/2010、Visual Studio 2005/2008/2010のいずれかでプログラムが作れる環境。

 なお、本プログラムはWindows 7上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

プログラム実行時の注意事項

 「PowerTools PlusPak for Windows Forms 6.0J」と「PowerTools ComponentOne Studio 2012J」を使って作成したアプリケーションを配布する場合、「PowerTools PlusPak for Windows Forms 6.0J」と「PowerTools ComponentOne Studio 2012J」のアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。

 本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。

ファイル名 説明
GrapeCity.Win.PlusPak.v60.dll 本体アセンブリ
C1.C1Pdf.2.dll 本体アセンブリ
C1.C1Pdf.4.dll 本体アセンブリ(※.NET Framework 4でのみ使用可)

 これらのファイルを、プログラムを実行するフォルダに格納します。

 .NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Frameworkのバージョン2.0以上がインストールされていることが必須条件です。

コンポーネントのインストール

 「PowerTools PlusPak for Windows Forms 6.0J」と「PowerTools ComponentOne Studio 2012J」を使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に同製品をインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動するので、「個人情報の収集および使用に同意する」にチェックを入れ[同意する]ボタンをクリックします。

 トライアル申込フォームで必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ダウンロードします。ZIP形式で圧縮されたファイルを解凍して、インストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 「PowerTools PlusPak for Windows Forms 6.0J」および「PowerTools ComponentOne Studio 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは次の2つです。

名前空間 コントロール
C1.C1Pdf C1PdfDocument
GrapeCity.Win.BarCode GcBarCode
名前空間が「C1.C1Pdf」の「C1PdfDocument」と、
名前空間が「C1.C1Pdf」の「C1PdfDocument」と、
「GrapeCity.Win.BarCode」の「GcBarCode」コントロールを選択する
「GrapeCity.Win.BarCode」の「GcBarCode」コントロールを選択する

GcBarCode、C1PdfDocumentコントロールについて

 今回使用するGcBarCode、C1PdfDocumentコントロールですが、実はこれらのコントロールはいずれも過去の記事で取り上げ、コントロールの特徴について紹介しました。

 それぞれ、コンポーネントスイートのバージョンは1つ前(PlusPackは5.0J、ComponentOneは2011J)のものですが、コントロールの基本性能は変わりませんので、コントロールの詳細はこれらの記事をご参照ください。

 ここでは、GcBarCodeコントロールでQRコードを作成する方法と、C1PdfDocumentコントロールの概要について説明します。

GcBarCodeコントロールのQRコード作成機能

 GcBarCodeコントロールは、バーコード生成コントロールです。チェックディジットの自動計算、サイズ設定や回転処理、データ連結など多彩な機能を備えており、数値と種類の指定のみで簡単にバーコードを出力することができます。また、解像度にあわせて最適なバーコードイメージを生成することにより、高い読み取り率を実現しています。

 このコントロールの使用できる種類の一つに、QRコードがあります。QRコードは、縦横の2次元図形を使って情報を図形化したもので、数字で最大7089字、英数字で4296字、漢字で1817字まで図形化できます。

 バーコードが専用のバーコードリーダーを必要とするのに対し、QRコードは携帯電話やスマートフォンなどの情報端末、パソコンなどで簡単に読み込むことができるので、ショップのWebアドレスやメールアドレスをQRコードで伝えるなど、商業サービスで広範に利用されています。

 GcBarCodeコントロールでQRコードを作成するのはとても簡単で、フォームにGcBarCodeコントロールを配置し、「Type」プロパティを「QRCode」に設定します。そして、「Value」プロパティにコード化したいデータを文字列で設定するだけです。あとは、GcBarCodeコントロールが自動的にQRコードを作成してくれます。

 作成したQRコードはGcBarCodeコントロールに表示され、そのコードをビットマップ形式、拡張メタファイル形式の画像に変換し保存することができます。画像作成時は画像解像度(DPI)を指定することができます。

 このプログラムでは、作成したQRコードを一度ビットマップファイルに保存し、これをPDF文書に組み込むようにしています。

C1PdfDocumentコントロール

 C1PdfDocumentコントロールは、.NET FrameworkアプリケーションからPDFドキュメントを作成するコントロールです。

 PDFドキュメントを表示するアプリケーション「Adobe Reader」には印刷機能が組み込まれていますので、データをPDF化することで面倒な印刷処理をアプリケーション側で持つ必要がなく、PDFドキュメントを作成する処理だけを作ればよいので、開発の負担も軽くなります。

 また、PDFファイルはデバイスやOSに依存しませんので、作成したPDFドキュメントはいろいろな場面で使用することができます。

 C1PdfDocumentコントロールは、テキストだけでなく図形や画像などのグラフィックス要素も一緒にPDF化することができます。これらの描画メソッドの使用方法は、GDI+の各メソッドとほぼ同じであるため、GDI+を使ったことがある人はすぐにマスターすることができます。

 各描画要素は、描画領域をRectangleF構造体で指定できるので、このメソッドを使ってレイアウトをデザインする、という使い方ができます。

 作成するPDFドキュメントに対するプロパティ設定も制御できるので、ドキュメントプロパティのタイトル、作成者、サブタイトルなどを設定したり、コピー、編集、および印刷の許可・不許可設定やパスワード設定を行ったりすることができます。

フォームの作成

 では、フォームを作成していきます。このプログラムでは、フォームに入力された内容をもとにPDFドキュメントを作成します。

 入力されたメールアドレスは、QRコード化してビットマップファイルに保存し、PDFドキュメントに組み込みます。

 PDFドキュメントは、フォームのレイアウトと同じような体裁になるよう、テキストと画像を配置します。

GUIのデザイン

 使用するコントロールは、Label、Button、TextBox、GroupBox、PictureBox、OpenFileDialogの各標準コントロールと、GcBarCodeコントロール、C1PdfDocumentコントロールです。

  • PictureBoxコントロールは、2つのコントロールに「co_name.jpg」「logo.jpg」のJPEG画像をセットします。
  • TextBoxコントロールは、3つはImeModeプロパティを「On」にしておき、残りの一つはTextプロパティにメールアドレスのドメインを入力しておきます。
  • 3つのButtonコントロールは、それぞれClickイベントハンドラを作成します。
  • GcBarCodeコントロールは、「Type」プロパティを「QRCode」に設定します。Valueプロパティはそのままです。
  • C1PdfDocumentコントロールは、デフォルトのプログラム設定のままです。
  • 左のGroupBoxコントロールで名刺サイズの印刷イメージを作っておきます。
フォームのレイアウト
フォームのレイアウト

3つのButtonコントロールの処理

 プログラムの処理は、3つのButtonコントロールのClickイベントハンドラで行います。また、PDFドキュメントの作成は、独自のプロシージャ(メソッド)「print_out」を作成し、この中に処理を組み立てていきます。

顔写真挿入処理の作成

 名刺には顔写真を入れるようにしましたので、この写真挿入処理をボタン「顔写真挿入」のClickイベントハンドラに作成します。

  • (1) 最初に、名前空間「System.Diagnostics」を宣言します。これは、後で作成したPDFドキュメントを表示するのに使用します。
  • (2) メンバ変数を3つ宣言します。
  • (3) ボタン「顔写真挿入」のClickイベントハンドラでは、「ファイルを開くダイアログ」を表示し、顔写真を選択してもらいPictureBoxコントロールに表示します。
Visual Basic
Imports System.Diagnostics  '(1)
Public Class Form1

    'メンバ変数宣言
    Private qr_fname As String = ""  '(2)
    Private cnt As Integer = 0
    Private pdfProcess As Process

③  Private Sub Button1_Click(sender As System.Object, _
                              e As System.EventArgs) _
                              Handles Button1.Click  '(3)
        '顔写真挿入処理
        If OpenFileDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
            PictureBox2.Image = Image.FromFile(OpenFileDialog1.FileName)
        End If
    End Sub
C#
using System.Diagnostics;  //(1)
namespace QRcode_cs
{
    public partial class Form1 : Form
    {

        // メンバ変数宣言
        private string qr_fname = "";  //(2)
        private int cnt = 0;
        private Process pdfProcess; 
     
        private void button1_Click(object sender, EventArgs e)  //(3)
        {
            //顔写真挿入処理
            if(openFileDialog1.ShowDialog()
                == System.Windows.Forms.DialogResult.OK)
            {
                pictureBox2.Image = Image.FromFile(openFileDialog1.FileName);
            }
        }

名刺印刷処理の作成

 続いて、名刺印刷処理を作成します。ここでは、入力されたメールアドレスからQRコードを作成し、ビットマップファイルに保存するとともに、PDFドキュメント作成処理を呼び出します。

  • (1) まず、顔写真とメールアドレスが入力されていないと印刷処理は実行しないようにします。
  • (2) 次に、QRコードを作成します。GcBarCode1コントロールのValueプロパティに、入力されたメールアドレスを代入すると、その時点でQRコードが作成されます(フォームに配置したGcBarCode1コントロールのQRコードが変化します)。
  • (3) 作成したQRコードを、CreateBitmapメソッドを使用してビットマップファイルに保存します。DPIは「120」を指定します。CreateBitmapメソッドは、作成したビットマップをImageオブジェクトで返してきますので、これを変数に格納します。
  • (4) ImageクラスのSaveメソッドを使ってビットマップをファイルに保存します。ただし、複数の名刺を作成する場合、Saveメソッドはイメージの作成元と同じファイルにイメージを保存できないため、ファイル名を変えて保存するようにします。
  • (5) PDFドキュメントを作成する処理を呼び出します。
  • (6) 「終了」ボタンは、そのままプログラムを終了させます。
Visual Basic
Private Sub Button2_Click(sender As System.Object, _
                          e As System.EventArgs) Handles Button2.Click
    '名刺印刷処理
    If PictureBox2.Image Is Nothing Then  '(1)
        MessageBox.Show("顔写真を選択してください", _
                        "入力エラー", MessageBoxButtons.OK, _
                        MessageBoxIcon.Error)
    End If

    If TextBox4.Text = "" Then
        MessageBox.Show("メールアドレスを入力してください", "入力エラー", _
                        MessageBoxButtons.OK, MessageBoxIcon.Error)
        Else
            'QRコードの作成
            GcBarCode1.Value = TextBox4.Text  '(2)
            Dim qrimg As Image = GcBarCode1.CreateBitmap(120)  '(3)
            cnt += 1  '(4)
            qr_fname = Application.StartupPath + "/qrimg" _
                       + cnt.ToString() + ".bmp"
            qrimg.Save(qr_fname, System.Drawing.Imaging.ImageFormat.Bmp)
        End If

        'PDF作成
        print_out()  '(5)
    End Sub

    Private Sub Button3_Click(sender As System.Object, _
                              e As System.EventArgs) _
                              Handles Button3.Click  '(6)
        Me.Close()
    End Sub
C#
private void button2_Click(object sender, EventArgs e)
{
    //名刺印刷処理
    if (pictureBox2.Image == null)  //(1)
    {
        MessageBox.Show("顔写真を選択してください", "入力エラー",
                        MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    if (textBox4.Text == "")
    {
        MessageBox.Show("メールアドレスを入力してください", "入力エラー",
                        MessageBoxButtons.OK, MessageBoxIcon.Error);
    }
    else
    {
        //QRコードの作成
        gcBarCode1.Value = textBox4.Text;  //(2)
        Image qrimg = gcBarCode1.CreateBitmap(120);  //(3)
        qr_fname = Application.StartupPath + "/qrimg.bmp";  //(4)
        cnt++;
        qr_fname = Application.StartupPath + "/qrimg" + cnt.ToString() + ".bmp";
        qrimg.Save(qr_fname, System.Drawing.Imaging.ImageFormat.Bmp);
    } 

    //PDF作成
    print_out();  //(5)
}

private void button3_Click(object sender, EventArgs e)  //(6)
{
    this.Close();
}

PDFドキュメント作成処理

 独自のプロシージャ(メソッド)「print_out」を作成し、この中に処理を組み立てていきます。

 処理のメインはPDFドキュメントの作成で、フォームに入力された顔写真、社員情報とラベルで表示している会社情報、社名とロゴの画像、QRコード画像をレイアウトしていきます。

 レイアウトをデザインするにあたってはRectangleF構造体を使用し、描画位置を確保しています。

  • (1) 最初に、作成するPDFドキュメントのファイル名と保存するフォルダを作成します。PDFドキュメントは、プログラム実行フォルダと同じフォルダに保存することにします。
  • (2) C1PdfDocumentコントロールを初期状態に戻します。これは、続けていくつものPDFドキュメントを作成する際に、一つ作成するごとにそれまで作成したドキュメントを削除する必要があるためです。
  • (3) C1PdfDocumentクラスのImageQualityプロパティで、PDFドキュメントの画質を設定します。プロパティの設定値は「ImageQualityEnum列挙体」のメンバで、以下の値を使用することができます。ここでは、「High」を指定し最高画質に設定しています。圧縮率は低いのでファイルサイズは大きくなりますが、グラフィックスの画質は高くなります。
ImageQualityEnum列挙体のメンバ
メンバ名 説明
Low 低品質、高圧縮率。
Medium 中品質、中圧縮率。
Default 高品質、低~中圧縮率。
High 最高品質、低圧縮率。
  • (4) 「社名」「顔写真」「ロゴ」の3つの画像をPDFドキュメントにレイアウトします。画像の描画は、DrawImageメソッドを使用します。PictureBoxコントロールにすでに画像が設定されていますので、これを取り出して描画します。それぞれどこに描画するのかは、RectangleF構造体で指定します。
  • (5) DrawStringメソッドを使用して、社員情報を描画します。フォントは「MS P明朝」でサイズは「10」にします。
  • (6) QRコードの画像を挿入します。画像の描画なのでDrawImageメソッドを使用し、ファイルから作成するのでImageクラスのFromFileメソッドを使用します。
  • (7) フォームのLabelコントロールで表示している会社情報を挿入します。テキストなのでDrawStringメソッドで描画します。フォントは社員情報と同じですが、サイズを1つ小さくします。
  • (8) 最後に、DrawRectangleメソッドを使用してドキュメント全体を枠線で囲みます。
  • (9) 作成したPDFドキュメントを保存します。保存場所とファイル名はすでにメンバ変数「fname」で作成しているのでこれを使用します。ファイルの保存はC1PdfDocumentコントロールのSaveメソッドを使用しますが、ここでは同じファイル名で保存するようにしています。そのため、それまでに作成したPDFドキュメントが表示されていると、ファイル保存がエラーになってしまいます。そこで、Tryステートメントでエラーをキャッチし、開いているPDFドキュメントを閉じてもらってから、改めてファイル保存処理を行ってもらうようにします。
  • (10) ファイルに保存したら、ProcessクラスのStartメソッドでPDFドキュメントを表示して完成です。
Visual Basic
Sub print_out()

    '準備
    Dim fname As String = Application.StartupPath + "/meisi.pdf"  '(1)
    C1PdfDocument1.Clear()  '(2)
    C1PdfDocument1.ImageQuality = C1.C1Pdf.ImageQualityEnum.High  '(3)

   '画像の配置
    Dim rect As New RectangleF(10, 5, 130, 22)  '(4)
    C1PdfDocument1.DrawImage(PictureBox1.Image, rect)   '社名
    rect = New RectangleF(10, 35, 70, 70)
    C1PdfDocument1.DrawImage(PictureBox2.Image, rect)   '顔写真
    rect = New RectangleF(190, 5, 60, 40)
    C1PdfDocument1.DrawImage(PictureBox3.Image, rect)   'ロゴ

    '社員情報の配置  (5)
    Dim fnt As New Font("MS P明朝", 10)
    rect = New RectangleF(90, 35, 80, 10)
    C1PdfDocument1.DrawString(TextBox1.Text, fnt, Brushes.Black, rect) '氏名
    rect = New RectangleF(90, 50, 150, 10)
    C1PdfDocument1.DrawString(TextBox2.Text, fnt, Brushes.Black, rect) '所属
    rect = New RectangleF(90, 65, 150, 10)
    C1PdfDocument1.DrawString(TextBox3.Text, fnt, Brushes.Black, rect) '役職
    rect = New RectangleF(90, 80, 150, 10)
    C1PdfDocument1.DrawString(TextBox4.Text, fnt, Brushes.Black, rect) 'メールアドレス

    'QRコードの挿入  (6)
    rect = New RectangleF(10, 110, 50, 50)
    C1PdfDocument1.DrawImage(Image.FromFile(qr_fname), rect)   '顔写真

    '会社情報の挿入  (7)
    fnt = New Font("MS P明朝", 9)
    rect = New RectangleF(90, 115, 150, 10)
    C1PdfDocument1.DrawString("株式会社 SEGCファイナンス", _
                              fnt, Brushes.Black, rect)
    rect = New RectangleF(90, 125, 150, 10)
    C1PdfDocument1.DrawString("〒111-000", fnt, Brushes.Black, rect)
    rect = New RectangleF(90, 135, 250, 10)
    C1PdfDocument1.DrawString("東京都渋谷区翔泳1-0-0 暮府シティ2014", _
                              fnt, Brushes.Black, rect)
    rect = New RectangleF(90, 145, 150, 10)
    C1PdfDocument1.DrawString("℡ 03-111-9999", fnt, Brushes.Black, rect)

    '枠線の描画  (8)
    rect = New RectangleF(0, 0, 280, 165)
    C1PdfDocument1.DrawRectangle(Pens.LightSkyBlue, rect)

    'ファイルに保存しプレビュー  (9)
    Try
        C1PdfDocument1.Save(fname)
        System.Diagnostics.Process.Start(fname)  '(10)
    Catch ex As Exception
        MessageBox.Show("開いているPDFを閉じてから保存してください", _
                        "ファイル保存エラー")
    End Try
End Sub
C#
private void print_out()
{
    //準備
    string fname = Application.StartupPath + "/meisi.pdf";  //(1)
    c1PdfDocument1.Clear();  //(2)
    c1PdfDocument1.ImageQuality = C1.C1Pdf.ImageQualityEnum.High;  //(3)

    //画像の配置  (4)
    RectangleF rect = new RectangleF(10, 5, 130, 22);
    c1PdfDocument1.DrawImage(pictureBox1.Image, rect);  //社名
    rect = new RectangleF(10, 35, 70, 70);
    c1PdfDocument1.DrawImage(pictureBox2.Image, rect);  //顔写真
    rect = new RectangleF(190, 5, 60, 40);
    c1PdfDocument1.DrawImage(pictureBox3.Image, rect);  //ロゴ

    //社員情報の配置  (5)
    Font fnt = new Font("MS P明朝", 10);
    rect = new RectangleF(90, 35, 80, 10);
    c1PdfDocument1.DrawString(textBox1.Text, fnt, Brushes.Black, rect); //氏名
    rect = new RectangleF(90, 50, 150, 10);
    c1PdfDocument1.DrawString(textBox2.Text, fnt, Brushes.Black, rect); //所属
    rect = new RectangleF(90, 65, 150, 10);
    c1PdfDocument1.DrawString(textBox3.Text, fnt, Brushes.Black, rect); //役職
    rect = new RectangleF(90, 80, 150, 10);
    c1PdfDocument1.DrawString(textBox4.Text, fnt, Brushes.Black, rect); //メールアドレス

    //QRコードの挿入  (6)
    rect = new RectangleF(10, 110, 50, 50);
    c1PdfDocument1.DrawImage(Image.FromFile(qr_fname), rect);  //顔写真

    //会社情報の挿入  (7)
    fnt = new Font("MS P明朝", 9);
    rect = new RectangleF(90, 115, 150, 10);
    c1PdfDocument1.DrawString("株式会社 SEGCファイナンス",
                              fnt, Brushes.Black, rect);
    rect = new RectangleF(90, 125, 150, 10);
    c1PdfDocument1.DrawString("〒111-000", fnt, Brushes.Black, rect);
    rect = new RectangleF(90, 135, 250, 10);
    c1PdfDocument1.DrawString("東京都渋谷区翔泳1-0-0 暮府シティ2014",
                              fnt, Brushes.Black, rect);
    rect = new RectangleF(90, 145, 150, 10);
    c1PdfDocument1.DrawString("℡ 03-111-9999", fnt, Brushes.Black, rect);

    //枠線の描画  (8)
    rect = new RectangleF(0, 0, 280, 165);
    c1PdfDocument1.DrawRectangle(Pens.LightSkyBlue, rect);

    //ファイルに保存しプレビュー  (9)
    try
    {
        c1PdfDocument1.Save(fname);
        pdfProcess = Process.Start(fname);  //(10)
    }
    catch
    {
        MessageBox.Show("開いているPDFを閉じてから保存してください",
                        "ファイル保存エラー");
    }
}

まとめ

 携帯端末の普及に伴って、QRコードの利用範囲はどんどん広がっています。宣伝媒体だけでなく会社の書類や資料に組み込んで、QRコードを読み取るアプリケーションと組み合わせて、書類のフォルダを自動的に振り分ける使い方なども行われているようです。

 一方、PDFドキュメントも読み取り専用メディアなので、元の書類が改ざんされることなく配布できるため、ペーパーメディアの主流に近いフォーマットとなっています。

 GcBarCode、C1PdfDocumentの両コントロールはこれらのニーズに応えたコントロールで、組み合わせることで幅広い範囲のアプリケーションで利用できます。

参考文献

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5