【Pigeon Framework】画像・ファイルアップロード機能とAmazonS3連携

「Pigeon Framework での画像保存の仕組みってどうなってるんだ?」

「画像やファイルはAmazonS3に保存しとけたら便利なのにな…」

管理画面生成ツールPigeon Framework なら、AmazonS3との連携も1,2分程度で出来てしまいます。画像保存の仕組みと共にサクッと確認していきましょう。
  

画像・ファイルアップロード機能について

今回、Pigeon Framework の画像アップロード機能をご紹介するために作成したテーブルがこちらになります。

CREATE TABLE `characters` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `c_name` varchar(100) NOT NULL,
  `job` varchar(100) NOT NULL,
  `lv` int(10) DEFAULT '0',
  `image` text,
  `created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ゲームのキャラクター管理テーブルです。

こちらを使って、「画像がどのように保存されるのか」「AmazonS3とどのように連携させるのか」を見ていきましょう。

 

画像保存の際の注意点(configファイル設定)

初めに、画像を保存する際は、

    - table:  characters
      label: "キャラクター"
      fields:
//~~~~~~~~~~~~~~~~~~~//
        - field: image
          label: "キャラ画像"
          type: image          // ←注目

このように、configファイルのテーブルごとの設定で「type: image」としていないと画像として保存できません。ご注意ください。
  

デフォルトでは、画像・ファイルは DBに登録

画像ファイルは、先ほど作った「chractors」テーブルのimageカラムには、画像のpassだけが保存され、画像の中身は、自動生成されたテーブルである「pf_file_blob」に保存されます。

具体的に見てみしょう。

このようにデータを追加すると、「characters」テーブルの内容は、

+----+--------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+
| id | c_name       | job       | lv   | image                                                                                       | created             | updated             |
+----+--------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+
|  2 | 赤い勇者     | 見習い    |    2 | http://○.○○○.○.○○/api/file/7d7ac1098d04a7f55969f88e70e9e291fb08aaf69737b67ed3ef1a9e06a156dd | 2019-08-31 07:12:06 | 2019-08-31 07:12:06 |
+----+--------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+

このようになります。imageカラムには、passが保存されているのがわかりますね!

そして、画像の中身というのは、自動生成されたテーブルである「pf_file_blob」に保存されています。(中身は非常に長いので割愛します。)
 

Amazon S3に保存場所を変更する

では、いよいよAmazonS3との連携方法を見ていきましょう!
 

Amazon S3 との連携方法

AmazonS3に連携するには、configファイルのインデント無しになるような位置にs3に関する情報を追記するだけでOKです。

//~~~~~~~~~~~~~~~~~~~~~~~~~~
admin-table: pf_admin
base-path: /
s3:
 bucket: pigeon-fw-test
 access-key: TESTETSETSETS&'(&3214   //こんな感じの文字列です
 secret: TESTESTESTfegay&'(ohfewa;+  //こんな感じの文字列です
 region: ap-northeast-1
 directory: /characters/image        //デフォルトは"/" 
db:
  host: localhost
//~~~~~~~~~~~~~~~~~~~~~~~~~~

上記のような感じですね。なんと、これだけで連携ができてしまっています。
 

Amazon S3 を使うとこうなる

先ほどと同じように、新しいキャラクターを追加します。すると、「characters」テーブルの中身は、

+----+-----------------------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+
| id | c_name                      | job       | lv   | image                                                                                       | created             | updated             |
+----+-----------------------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+
|  2 | 赤い勇者                    | 見習い    |    2 | http://3.114.6.50/api/file/7d7ac1098d04a7f55969f88e70e9e291fb08aaf69737b67ed3ef1a9e06a156dd | 2019-08-31 07:12:06 | 2019-08-31 07:12:06 |
|  3 | オレンジの勇者              | 達人      |   99 | https://s3-ap-northeast-1.amazonaws.com/pigeon-fw-test/characters/5d6a4cda9c0e6.jpg         | 2019-08-31 07:52:06 | 2019-08-31 10:32:58 |
+----+-----------------------------+-----------+------+---------------------------------------------------------------------------------------------+---------------------+---------------------+

このように、imageがAmazonS3へのパスになって

画像がAmazonS3に保存されているのが分かりますね!
 

Amazon S3 連携まとめ

AmazonS3に連携するには、

  1. S3のアクセス情報をconfigファイルに追加する

なんとこれだけです!

AmazonS3にササッと連携して、画像はS3に入れときましょう。

機能一覧ページへ