S3にあるpdfを署名付きURLで取得して表示する

2018-09-16 #go  #s3  #pdf 

全体の構成はこんな感じ。このページでは実際にこの構成でpdfを表示してみている。

全体の構成

  1. 【S3】pdfファイルを置いておく
  2. 【ブラウザ】 サーバにリクエストする
  3. 【サーバ】AWS SDK for Go を使ってpdfファイルへアクセスする署名付きURLを生成
  4. 【サーバ】URLをレスポンスで返す
  5. 【ブラウザ】URLからpdfを取得する
  6. 【ブラウザ】pdfを表示する

署名付きURLを生成する

ドキュメントのとおりやれば ok

// AWSセッションインスタンスを作成
var sess, err = session.NewSession(&aws.Config{
  Region:      aws.String("ap-northeast-1"),
  Credentials: credentials.NewStaticCredentials("MY_ACCESS_KEY_ID", "SECRET", ""),
})

func handleFunc(w http.ResponseWriter, r *http.Request) {
  svc := s3.New(sess)

  // 署名付きURLを生成
  req, _ := svc.GetObjectRequest(&s3.GetObjectInput{
    Bucket: aws.String("bucket-name"),
    Key:    aws.String("lorem.pdf"),
  })
  urlStr, err := req.Presign(10 * time.Minute)

  // レスポンスを返す
  ...
}

pdfを表示する

objectタグを使う方法

単純にブラウザ上にpdfを表示するならhtmlのobjectタグなんかを使う方法があるにはある。

HTMLタグだけでPDFを埋め込み表示する方法

ただ、デスクトップブラウザだと拡大縮小などの機能のついた高機能なPDFビューワーが表示されるが、モバイルブラウザだと画像表示のようになってしまう。実際にobjectタグで表示してみた結果が以下。



両者を比較してみるとこのとおり(左: macOS chrome、右: iOS chrome)。 デスクトップとモバイルブラウザの表示の違い

別ウィンドウで表示する方法

ということでモバイルブラウザの場合はリンクを作って別ウィンドウでpdfを閲覧できたほうがUXとして良くなると思う。

<a target="_blank" alt="lorem.pdf"
   href="{{ 署名付きURL }}">新しいウィンドウでPDFを表示</a>

新しいウィンドウでPDFを表示

管理画面のようなデスクトップで操作する前提の機能であればページ内で閲覧できるのもありだろう。