Symfoware

Symfowareについての考察blog

Riot js 書籍ビューワー風なサンプルプログラム

キーボードの左右キーで画像を切り替えるRiotサンプル
Riot キーボードの矢印キーで画像を切り替える

PDFファイルをjpgファイルに変換
PDFBox 2でpdfファイルをページごとにjpgファイルへ変換する

これを組み合わせ、pdfから変換したjpgファイルを見開きで表示するサンプルを作ってみます。


サンプル



Riot キーボードの矢印キーで画像を切り替える
こことほとんど同様の内容です。

imageフォルダにlist.jsonを作成。
画像のリストを記載しておきます。

・image/list.json


  1. [
  2.     {"url1":"image/001.jpg", "url2":"image/002.jpg"},
  3.     {"url1":"image/003.jpg", "url2":"image/004.jpg"},
  4.     {"url1":"image/005.jpg", "url2":"image/006.jpg"},
  5.     {"url1":"image/007.jpg", "url2":"image/008.jpg"},
  6.     {"url1":"image/009.jpg", "url2":"image/010.jpg"},
  7.     {"url1":"image/011.jpg", "url2":"image/012.jpg"},
  8.     {"url1":"image/013.jpg", "url2":"image/014.jpg"},
  9.     {"url1":"image/015.jpg", "url2":"image/016.jpg"},
  10.     {"url1":"image/017.jpg", "url2":"image/018.jpg"},
  11.     {"url1":"image/019.jpg", "url2":"image/020.jpg"},
  12.     {"url1":"image/021.jpg", "url2":"image/022.jpg"},
  13.     {"url1":"image/023.jpg", "url2":"image/024.jpg"},
  14.     {"url1":"image/025.jpg", "url2":"image/026.jpg"},
  15.     {"url1":"image/027.jpg", "url2":"image/028.jpg"},
  16.     {"url1":"image/029.jpg", "url2":"image/030.jpg"},
  17.     {"url1":"image/031.jpg", "url2":"image/032.jpg"},
  18.     {"url1":"image/033.jpg", "url2":"image/034.jpg"}
  19. ]




表示するriotなプログラムはこうなりました。


  1. <!doctype html>
  2. <html lang="ja">
  3. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Riotサンプル</title>
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. </head>
  9. <body>
  10.     <my-tag></my-tag>
  11. </body>
  12. <script type="riot/tag">
  13. <my-tag>
  14.     <h3>画像表示サンプル { info }</h3>
  15.     <div style="float:left;width:50%">
  16.         <img src="{ url1 }" style="width:100%;height:100%">
  17.     </div>
  18.     <div style="float:left;width:50%">
  19.         <img src="{ url2 }" style="width:100%;height:100%">
  20.     </div>
  21.     <br clear="both"/>
  22. var self = this
  23. self.imagelist = []
  24. self.url1 = ''
  25. self.url2 = ''
  26. self.info = ''
  27. self.index = 0
  28. updateView(operation) {
  29.     self.url1 = self.imagelist[self.index].url1
  30.     self.url2 = self.imagelist[self.index].url2
  31.     self.info = `( ${self.index + 1} / ${self.imagelist.length} ):${operation}`
  32.     self.update()
  33. }
  34. getList() {
  35.     // 画像のURLリストを取得
  36.     const url = 'image/list.json'
  37.     fetch(url)
  38.     .then(function(response) {
  39.         return response.json()
  40.     }).then(function(json){
  41.         self.imagelist = json
  42.         self.updateView('getList')
  43.     })
  44. }
  45. keydown(event) {
  46.     var operation = ''
  47.     switch (event.keyCode) {
  48.         case 37: // left 1つ前の画像
  49.             operation = 'left'
  50.             self.index--
  51.             break
  52.         case 39: // right 次の画像
  53.             operation = 'right'
  54.             self.index++
  55.             break
  56.         default:
  57.             return
  58.     }
  59.     // 範囲チェック
  60.     if (self.index < 0) {
  61.         self.index = 0
  62.         return
  63.     }
  64.     if (self.imagelist.length - 1 < self.index) {
  65.         self.index = self.imagelist.length - 1
  66.         return
  67.     }
  68.     self.updateView(operation)
  69. }
  70. document.onkeydown = this.keydown;
  71. this.getList()
  72. </my-tag>
  73. </script>
  74. <!-- マウント -->
  75. <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
  76. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.8.1/riot+compiler.min.js"></script>
  77. <script>
  78. riot.mount('my-tag')
  79. </script>
  80.     
  81. </html>




2つの画像を左右に並べて表示しています。
動作している様子はこんな感じです。

824_01.gif

※このgifはpeekを使用して作成しました。
Ubuntu 画面をキャプチャしてgifアニメを作成する(Peek)
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/01/31(水) 23:09:23|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ