サイトに組み込む漫画ビューアーとしてオススメのjQuery「Fotorama」がはてなブログでも使える(スマホ対応!)

掲題の通りなのですが、前々から、ぜひ漫画描きさんにオススメしたいと思っていたjQuery「Fotorama」が、はてなブログ記事内でもあっさり使えたので、感動のあまりついに紹介記事を書いています。感動で前が見えない。

head要素に追記できるブログや個人サイトなどに、スマホでスワイプできるまんがビューアーつけて、自分の描いた漫画を展示したい! という方にはうってつけです。

 

 

jQuery(ジェークエリー)って?

javascriptをかんたんに扱えるように、機能をパーツ化したファイル(通称ライブラリ)のことです。

詳しいことは詳しい方がたくさん記事を書いているのでぜひそちらで!(すません!HTMLいじって個人サイトで遊んでいたおたくだからなんとなくわかるけど専門家ではないのでちゃんと説明できない)

handywebdesign.net

 

Fotoramaって?

jQueryプラグインのひとつで、シンプルで美しい画像ギャラリーを作成できるものです。

fotorama.io

公式サイトは英語ですが、こわがらず読んでみればすぐに理解できます。説明もシンプルなら、実装した様子もシンプルで、非常に美しいギャラリーがつくれます。

 

なぜ漫画描きにオススメなの?

jQueryスクリプトでギャラリーを実現できるものは実はけっこうあるのですが、なぜ「Fotorama」が漫画描きにオススメなのかというと・・・・

 

・日本の漫画を読むときのように、「左方向」へのページ送りができる!

・スマホのスワイプに対応!(指でページ送りができる)

・キーボード入力にも対応!(←→キーでページを送ることができる)

・表示がはやい!

・ビューアーがシンプルできれい!

・設置がめちゃくちゃかんたん!

 

とくに一番最初の、「左方向へのページ送りができる」は、他のスクリプトではなかなか見ないオプションなんです! だって英語圏も、日本語の横書きも、右方向へ進みますからね。でも、Fotoramaでは、右から左へと文章を書く国を想定して、左方向への切り替えができるようになっているんです。

日本の漫画も、せりふが縦書きなら、ページは左へと進んでいきますよね!

 

どうやって設置するの?

これが本当にかんたんなので公式サイトを読んだ方がすぐわかると思うのですが、ここでは、はてなブログではどのように設置するかを記載しておきます。

 

(1)<head></head>内に、公式サイトの「SET UP」STEP1で指定されているコードをコピペします。

はてなブログのダッシュボード

>左のメニュー

>設定

>詳細設定

>「headに要素を追加」

f:id:gnymds:20191008233756p:plain

貼り付けられたら保存。

 

(2)新しい記事を書きます。

「HTML編集」モードに切り替えたら、まずは公式サイトの「SET UP」STEP 2にあるコードをそのまま貼り付けましょう。

f:id:gnymds:20191008234317p:plain

↑↑このimgタグの中に書いてある緑色の文字を、自分の貼り付けたい画像(=漫画のページ)のURLに置き換えます。

はてなブログなら、はてなフォトライフに画像をアップロードし、その画像をURLを右クリックで取得すればOKです。

キャプチャの中ではimgタグが2つ、タテに並んでいますが、ページ順どおりに、上から順番に並べます。

 

実際に置き換えてみるとこうなります。

f:id:gnymds:20191009000126p:plain

実はもうこれだけで、プレビュー表示に切り替えると、きれいなギャラリーが出来上がっています!

なお「見たまま編集」ではギャラリーにはならず、画像がならんでいるだけです。「プレビュー」で見てくださいね。

でも今回は漫画を展示したいので、最後にオプションの設定をしましょう。

 

(3)オプションの設定をします。

漫画ページを「右から左へ」と読み進ませたいので、「Right-to-Left」というオプションを設定しましょう。

Fotoramaのオプションは基本的にdivタグに追記するだけで実装できます。

 

「Right-to-left」https://fotorama.io/docs/4/right-to-left/

画像を「右から左へ」と送るのをデフォルトにするオプションです。さきほどのように「HTML編集」モードに記事を切り替えたら、divタグに「data-direction="rtl"」と付け足してください。

f:id:gnymds:20191009002611p:plain


これで、左方向へと進む画像ギャラリーが完成しました!

以降は私のオススメオプションです。

 

「Keyboard」https://fotorama.io/docs/4/keyboard/

パソコンのキーボードでページ送りを操作できるようになります。漫画のページめくりをキーボードでやる派の人にはオススメです。divに「data-keyboard="true"」を追加してください。

 

「Thumbnails」https://fotorama.io/docs/4/thumbnails/

デフォルトだと、ギャラリーにまとめられた画像の点数だけ「○」が横並びに表示されるのですが、これをサムネイルにすることができるオプションです。divに「data-nav="thumbs"」を追加してください。また、サムネイル用に小さな画像を別途用意した場合は、どれを使うか指定することもできます。詳しくは公式サイトをご参照ください。(サムネ用画像を用意したほうが動作は軽いと思います)

 

全部実装すると、HTMLはこんな感じになります。

f:id:gnymds:20191009002722p:plain

 

Fotoramaには、他にもフルスクリーンやキャプション表示・ビデオ再生などたくさんのオプションがあるので、公式サイトの「DOCS」ページを参考に、好きにカスタマイズしてみてくださいね。

「DOCS」https://fotorama.io/docs/4/

 

さて、これで全部の設定ができました。記事を公開してみましょう!

 

動作サンプル

実際に実装してみると、こうなります!

 

 

どうでしょうか? うまく見られますでしょうか。

スマホのスワイプにも対応しているので、とってもオススメです。

 

※載せている漫画は拙作「19時半から打ち合わせ」のお試し読み部分なので合法です。ご安心ください。なお漫画のつづきは

http://www.manga-gai.net/manga/1930/18/08.html 

です。よろしければ。笑

 

以上、拙くて恐縮ですが「Fotorama」のご紹介でした!

ずっと紹介したかったのですっきりしました〜。