読者です 読者をやめる 読者になる 読者になる

カッパでも分かるiOSアプリゲーム開発

カッパがひたすらゲーム制作に関することを書くブログです。Railsに関するTipsもたまにまとめてます。

PDFをブラウザ上で表示させる pdf_js が使いやすくて便利

Rails
スポンサードリンク

たのしいRuby 第5版
f:id:InvokeTwoA:20151023183618p:plain「PDFをダウンロードさせるんじゃなく、web上で表示させたいなー」
f:id:InvokeTwoA:20151215172640p:plain「 ( ^ω^)つ pdf_js 」
【目次】

pdf_js とは

f:id:InvokeTwoA:20151108161835j:plain

  • PDFをブラウザ上で表示出来る

PDF.js

  • rails 用には pdfjs_rails が用意されてる

GitHub - shyammohankanojia/pdfjs_rails: PDFjs viewer for rails application.

使い方

まずは gem のインストール

gem 'pdfjs_rails'

bundle install

f:id:InvokeTwoA:20151023183618p:plain「そしていつもの再起動」
f:id:InvokeTwoA:20151215172640p:plain「」

pdf 表示用のjsを作成

rails g pdfjs_rails:install

f:id:InvokeTwoA:20151023183618p:plain「よーし、実行するか(ポチッ)」
ポチ「ワンワン!」

$ rails g pdfjs_rails:install                                                                                                       
      create  public/pdfjs
      create  public/pdfjs/build/pdf.js
      create  public/pdfjs/build/pdf.worker.js
      create  public/pdfjs/web/compatibility.js
      create  public/pdfjs/web/debugger.js
      create  public/pdfjs/web/images/annotation-check.svg
      create  public/pdfjs/web/images/annotation-comment.svg
      create  public/pdfjs/web/images/annotation-help.svg
      create  public/pdfjs/web/images/annotation-insert.svg
      create  public/pdfjs/web/images/annotation-key.svg
      create  public/pdfjs/web/images/annotation-newparagraph.svg
      create  public/pdfjs/web/images/annotation-note.svg
      create  public/pdfjs/web/images/annotation-paragraph.svg
      create  public/pdfjs/web/images/findbarButton-next-rtl.png
      create  public/pdfjs/web/images/findbarButton-next.png
      create  public/pdfjs/web/images/findbarButton-previous-rtl.png
      create  public/pdfjs/web/images/findbarButton-previous.png
      create  public/pdfjs/web/images/loading-icon.gif
      create  public/pdfjs/web/images/loading-small.png
      create  public/pdfjs/web/images/secondaryToolbarButton-firstPage.png
      create  public/pdfjs/web/images/secondaryToolbarButton-lastPage.png
      create  public/pdfjs/web/images/secondaryToolbarButton-rotateCcw.png
      create  public/pdfjs/web/images/secondaryToolbarButton-rotateCw.png
      create  public/pdfjs/web/images/shadow.png
      create  public/pdfjs/web/images/texture.png
      create  public/pdfjs/web/images/toolbarButton-bookmark.png
      create  public/pdfjs/web/images/toolbarButton-download.png
      create  public/pdfjs/web/images/toolbarButton-menuArrows.png
      create  public/pdfjs/web/images/toolbarButton-openFile.png
      create  public/pdfjs/web/images/toolbarButton-pageDown-rtl.png
      create  public/pdfjs/web/images/toolbarButton-pageDown.png
      create  public/pdfjs/web/images/toolbarButton-pageUp-rtl.png
      create  public/pdfjs/web/images/toolbarButton-pageUp.png
      create  public/pdfjs/web/images/toolbarButton-presentationMode.png
      create  public/pdfjs/web/images/toolbarButton-print.png
      create  public/pdfjs/web/images/toolbarButton-search.png
      create  public/pdfjs/web/images/toolbarButton-secondaryToolbarToggle.png
      create  public/pdfjs/web/images/toolbarButton-sidebarToggle.png
      create  public/pdfjs/web/images/toolbarButton-viewOutline.png
      create  public/pdfjs/web/images/toolbarButton-viewThumbnail.png
      create  public/pdfjs/web/images/toolbarButton-zoomIn.png
      create  public/pdfjs/web/images/toolbarButton-zoomOut.png
      create  public/pdfjs/web/l10n.js
      create  public/pdfjs/web/locale/ar/viewer.properties
      create  public/pdfjs/web/locale/ca/viewer.properties
      create  public/pdfjs/web/locale/cs/viewer.properties
      create  public/pdfjs/web/locale/da/viewer.properties
      create  public/pdfjs/web/locale/de/viewer.properties
      create  public/pdfjs/web/locale/el/viewer.properties
      create  public/pdfjs/web/locale/en-US/viewer.properties
      create  public/pdfjs/web/locale/es/viewer.properties
      create  public/pdfjs/web/locale/fi/viewer.properties
      create  public/pdfjs/web/locale/fr/viewer.properties
      create  public/pdfjs/web/locale/he/viewer.properties
      create  public/pdfjs/web/locale/it/viewer.properties
      create  public/pdfjs/web/locale/ja/viewer.properties
      create  public/pdfjs/web/locale/ko/viewer.properties
      create  public/pdfjs/web/locale/locale.properties
      create  public/pdfjs/web/locale/lt/viewer.properties
      create  public/pdfjs/web/locale/nl/viewer.properties
      create  public/pdfjs/web/locale/pl/viewer.properties
      create  public/pdfjs/web/locale/pt-BR/viewer.properties
      create  public/pdfjs/web/locale/ro/viewer.properties
      create  public/pdfjs/web/locale/ru/viewer.properties
      create  public/pdfjs/web/locale/sr/viewer.properties
      create  public/pdfjs/web/locale/sv/viewer.properties
      create  public/pdfjs/web/locale/tr/viewer.properties
      create  public/pdfjs/web/locale/vi/viewer.properties
      create  public/pdfjs/web/locale/zh-CN/viewer.properties
      create  public/pdfjs/web/locale/zh-TW/viewer.properties
      create  public/pdfjs/web/viewer.css
      create  public/pdfjs/web/viewer.html
      create  public/pdfjs/web/viewer.js

f:id:InvokeTwoA:20151023183618p:plain「public以下に大量にファイルが作られた!!」
f:id:InvokeTwoA:20151215172640p:plain「プロジェクトのgitにプッシュしたら差分が偉いことになってるからビックリされるね」

html で下記のコードを追加すれば pdf がブラウザ上で表示される

<iframe src="/pdfjs/web/viewer.html?file=hogehoge.pdf" style="border: 0" width="50%" height="600" frameborder="0" scrolling="no"></iframe>

f:id:InvokeTwoA:20151023183618p:plain「 file= の後に pdf ファイルの url を指定すれば良いのかー」
f:id:InvokeTwoA:20151215172640p:plain「public以下に大量にファイルが作られちゃうのは少し気になりますが、使い方は本当に簡単ですね」

オプションなど

f:id:InvokeTwoA:20151023183618p:plain「url にオプションを付けるみたいだね。 ?file=*** の後に#をつけて指定するらしい」
f:id:InvokeTwoA:20151215172640p:plain「ふむふむ」

<iframe src="/pdfjs/web/viewer.html?file=hogehoge.pdf#page=2&zoom=page-fit" style="border: 0" width="50%" height="600" frameborder="0" scrolling="no"></iframe>

f:id:InvokeTwoA:20151023183618p:plain「これで2ページ目、ページにフィットした大きさにズームして表示ができる!」
f:id:InvokeTwoA:20151215172640p:plain「めでたいですねー」

パラメーター名 説明
page page number Example: page=2
zoom zoom level zoom=200 (accepted formats: `[zoom],[left],[top]`, `page-width`, `page-height`, `page-fit`, `auto`)
nameddest go to a named destination
page mode either "thumbs" or "bookmarks" pagemode=thumbs

総括

f:id:InvokeTwoA:20151107203453j:plain

  • 導入が超楽チン
  • public 以下に大量にファイルが作られちゃうので気になる人は気になるかも
  • ブラウザ上からPDFをダウンロードさせるのはけっこう敷居が高いので、導入してくれてとても助かると企画の人から声をもらった

f:id:InvokeTwoA:20151023183618p:plain「なんかすんなり行きすぎて、記事にする事があまりなかったよ」
f:id:InvokeTwoA:20151215172640p:plain「ブログ的には残念ですがありがたい事ですな」
f:id:InvokeTwoA:20151023183618p:plain「ちなみにカッパクエストはやっと戦闘システムの仕様が決まり開発再開……」
f:id:InvokeTwoA:20151215172640p:plain「3月中にはリリースしたいですね。となると、あと2週間ほどで開発完了しなければなりません」
f:id:InvokeTwoA:20151023183618p:plain「……3月のカッパがきっとやってくれるはず」