アペフチ

シュガーソングとビターステップ

今週初めに太鼓の達人をやり始めた。

最初は米津玄師の「Lemon」がクリアできるかできないかぐらいのレベルで、今日UNISON SQUARE GARDENの「シュガーソングとビターステップ」の「むずかしい」をクリアできるようになった[1]

シュガーソングとビターステップとは不思議な縁があって、いつも転換を齎してくれる。ポップンミュージックでは難易度HYPERからEXTRAに移る最初の曲として丁度いい難易度だったし、この曲を知らなかったけどYouTubeで検索してUruを知ることができたし、そして今また「ドン」「カ」が混じる太鼓の達人曲の練習相手となってくれている。特別好きな曲というわけではないのだが、縁がある。


1. 例外的に米津玄師の「LOSER」だけはすぐにクリアできるようになった。やっぱり好きな曲は違う。

未明の闘争、小説の誕生 小説の自由、コミュニティマーケティング、Python機械学習プログラミング

連休であいちトリエンナーレに行こうと思っていたのだけどやらないといけないことを思い出してしまったので、諦めた。腹いせに、作業をしつつ、本を読んでいる。最近は一つの本をまとめて読むのでなく、細かく切り替えながら読んでいる。

未明の闘争

今8%で、まだまだ。書き方に慣れてきて、癖になり始めてる。

客の歌っているラルクアンシエルやグレイはうまかったがカラオケをうまく歌うくらいバカなことはない。

— 未明の闘争(上)

というのがあって、ああいいなあと思う。

小説の誕生 小説の自由

80%ぐらいで、読み終わるのが勿体無い。神の話を過ぎたあたり。ほんとどのページも面白いなあ。

コミュニティマーケティング

仕事のために細々と読んでいる。書き方が明快。

Python機械学習プログラミング

「コンピューターにデータを与えてパターンを学習させることができる」というぐらいのふわっとした理解だったところにどんどん形を与えてくれるので興奮して読んでいる。

(Kindleとかの電子書籍ストアじゃなく)PDF版を購入できるのがありがたい。

まんがを、IIIFで、サーバーなしで表示してみる

この前(まんが読むのに適した環境)の続き的な話。

「まんがって、みんな表示したい要件一緒なのに[1]、どうもウェブでの標準的な表示ツール無いよなあ。自分で作ってみたらいいのかも知れないけど、それって単に『また一つ独自のやり方が増えた』ってことにしかならないよなあ。」とか日々思っていたのですが、IIIFなら、画像の配信方法は世界共通で規定されているし、表示ツールも既に複数あるから、いいの見付けてきてまんが向けに手を入れれば読みやすくできるかも、と思い付いたのでした。[2]

ので、やってみました。

IIIF用のMiradorビューワーでまんがを表示したところ
Figure 1. 『ブラックジャックによろしく』(© 佐藤秀峰)

まとめ

  • IIIFでまんがを閲覧できるようにしてみた

  • wax_iiifというツールで、サーバーメンテなしでまんが配信・閲覧ができた

  • まんがにメモ書き(アノテーション)を付けて、後からそれを検索とかできた

wax_iiif

IIIFでは一つの大きな画像を、複数の大きさ(小ささ)にリサイズして用意したり、何枚かの正方形の画像に分割してブラウザー側で貼り合わせて大きく見せる、といった使い方を念頭に置いていて、それを実現するために、ユーザーがアクセスした時にその場で画像加工をして配信するサーバー、というのがいくつも作られているんですけど、そういうサーバーをあんまり運用したくないから簡単なやつがいいなあ……と思っているところで、IiifS3というツールを見付けたのでした。ただ、今はメンテされてなくて、これをフォークしたwax_iiifというのの使い方を調べました。

wax_iiifはなんと、リサイズと画像分割をしたファイルを作成して、必要なメタデータ等のJSONファイルを生成してくれるツールです。アクセス時にその場で画像を生成するのではなくて、単にそのまま配信すればいい形でファイルをあらかじめ生成してくれます。出来上がったものをApacheとかで配信したり、S3とかに置いてウェブサイトにするだけで、もうIIIF対応は終わり、お好みのビューワーでみられるようになります。

実際生成して、ビューワーとしてMiradorを使うようにしてみたのがこちら。リンク先で実際にまんがを読むことができます。

(表示しているまんがは、佐藤秀峰さんが二次利用フリーで公開している『ブラックジャックによろしく』第一巻です。ありがとうございます。まんがのダウンロードと利用に際しての注意事項等はこちら: http://mangaonweb.com/company/download.html

実際にどうやってwax_iiifを使ってサイトを作るのか、というのは、こちらのRakefileを見てみてください: Rakefile
一部抜粋するとこんな感じ:

file "build/001bj/collection/top.json" => ["images/001bj/001bj-210-0.png"] do |task|
  builder = WaxIiif::Builder.new(
    base_url: ENV["BASE_URL"],
    output_dir: "build/001bj",
    verbose: true
  )
  records = Dir.glob("images/001bj/**").collect {|path|
    WaxIiif::ImageRecord.new(
      id: File.basename(path),
      path: path,
      is_primary: true,
      attribution: "タイトル:ブラックジャックによろしく、著作者名:佐藤秀峰",
      license: "http://mangaonweb.com/company/download.html#kiyaku",
      description: "佐藤秀峰著『ブラックジャックによろしく』第1巻の1ページです。作品と二次利用に関する詳細は http://mangaonweb.com/company/download.html をご覧ください。",
      label: [
        "タイトル: ブラックジャックによろしく",
        "著作者名: 佐藤秀峰",
        "詳細情報: http://mangaonweb.com/company/download.html"
      ],
      metadata: [
        {
          "label": "著者", value: "佐藤秀峰"
        }
      ]
    )
  }
  builder.load records
  builder.process_data
end

画像のパスとメタデータを渡して WaxIiif::Builder#process_data を呼ぶだけですね。

出来上がった物はGitLab Pagesにしているので、自分でサーバーをメンテすることなく済んでいます。便利。

メモ書き(アノテーション)

僕はまんが読む時、ページやコマにメモを取りながら読むので、そういうのができるといいですね。

IIIFは学術目的なので当然(?)メモ書き (アノテーションと呼ぶ)の仕様もある程度あって、ビューワー側が対応していたり(上で使ってるMiradorも)、メモ書き保存用のサーバーもあったりします。[3]

これはサーバーなしというわけにはいかなくて、取り敢えずはSimpleAnnotationServerというのを手元のパソコンで試してみました。こんな感じでアノテーションを付けることができます。

画像の範囲を選択してアノテーション(メモ書き)を付けられる

後からその画像を見る時に、アノテーションも一緒に見ることができます。

画像を見る際、その画像にに付けられたアノテーションも表示される

そして、アノテーションで検索もできます。

アノテーションをキーワード検索し、そのアノテーションが付けられた画像へジャンプできる

これは便利すぎる。

こういうことをする基本的なパーツが揃っているというのはありがたいなあ。ウェブでの画像配信が標準化されている恩恵を感じます。自分の好きなように組み合わせればいい。

この後は、UIを自分好みに調整したい気持ちはあります。タグ付けできたり、検索ももうちょっとみやすくしたいですね。そういった細々した展望やメモ書きはこちらにあるのでよかったら見てみてください:
まんがをIIIFで表示 - アペフチ

この日記でもこの辺は書いていきたい。


1. まんがアプリやツイッターや縦スクロールでちょっとずつ変わってきてますけどね。
2. IIIFについては日を改めて書きたいとも思っていますが、IIIFに関する日本語情報の私的なまとめという記事から辿って読んでみると分かると思います。というか僕もこの方の記事を色々と読みました。
3. サーバーはちょっと少ないなという印象です。あと、保存と表示はできても検索ができないとかもある。