漫画ビューワーlaymicのアップデートとスクリプト版配信のお知らせ

かねてよりお知らせしていたlaymicビューワーのバージョン２が完成しました！

2020/01/13以前からStrawMan Templateをお使いの方は、下記の記事を参考にバージョンアップをお願いします。


あ、例によっていつも通りのコピペですのですぐ済みます。

2020/01/18：追記
当サイトのlaymicの雛型cssのバージョンは固定版のｖ１です。
サンプルとして参考にする場合はご注意ください。
雛型cssの違いに関しては解説記事を熟読し活動方針に合ったものをご利用くださるようお願いします。

straw_manテンプレートlaymicビューワー関連設定解説記事

straw_manにおけるlaymicのアップデート方法

yamanosu.com

あわせて、html/cssが編集可能なサービスで利用できるlaymicスクリプトも公開になります。

laymicビューワーの汎用サイト向け導入説明記事

straw_man以外のサイトに対して、laymicビューワーを導入するための説明をしていきます。

yamanosu.com

https://t.co/8PXiANFZHX

laymic最新版をgithubに上げました。これでもうstraw_man以外のサイトでも使える状態なのですが、導入説明が不親切気味なので、ここについてはまた記事を書こうと思っています。

— リラ (@dettalant) January 13, 2020

dettalant/laymic

Contribute to dettalant/laymic development by creating an account on GitHub.

github.com

漫画ビューワーlaymic_v2の変更点

・ｖ１での告知ページ（ひな型ｃｓｓ）の表示領域乱れの修正


・ｖ１での最終ページ配置による重複ページ発生の修正


・サムネイル表示への画像指定


PRの部分が設定した画像。
サムネイル表示は元ページを縮小しているだけなので、サムネ状態でも告知ページのリンクが生きており誤クリックが発生しやすくなっています。
こういったサムネイルジャンプによる誤クリックの予防を想定しています。

あとは徹底的に記事を軽量化したい方向け？


・キーボード操作への対応
（キーボードショートカットの一覧はこちら）


・スマートフォン/タブレットのズーム機能の追加
一般的なスマホ操作でズームができるようになりました。
さらに、ページ進捗バーをタップすることによりページ間ジャンプも可能になりました。


・PCでのズーム機能の追加
PCは、標準操作でズームを多用するスマホと異なるので解説します。


中央クリックで表示されるUIにアイコンを追加

虫眼鏡アイコン（クリックでズームします）


さらに、マウスホイールをクリックすることにより任意の場所を拡大可能

ドラッグ操作でページを動かせます。
拡大中にホイール操作でズームが解除されページが移動します。


拡大倍率は読者により変更可能。

1.5～3.0倍まで自由に設定できます。

これにより、セリフサイズが小さめな漫画の読み味が大幅に向上。
ありとあらゆる表現が可能です。

リリース済みの各ビューワーやpdfのズームよりも直感的に使え、低ストレスで多用に耐えうるものを目指しました。


下記リンクから『ブラックジャックによろしくが』が展開しますので試してみてください。

laymicビューワーの今後について

今回のバージョンアップでlaymicビューワーの開発は一区切りになります。
重大な不具合やネット界が揺るぐような技術革新が無い限りｖ３の開発はありません。

この先もずーっとエンジニアに開発をお願いするのはやり過ぎというのもありますが、これ以上追加するものが無いところまで追求できたからでもあります。



この場を借りてひとこと言わせてください。

たくさんの意見をくれた神様セカンドライフファンの皆様、StrawMan Templateを使っていただいた皆様、バグを探し出してくれた融さん。

そして私の理念に共感し高度なスキルをこれでもかと発揮してくれたリラさん。


ありがとうございました！！本当に、本当にありがとうございました！！！
心の底から愛してる！！！！！！！！！！！！！！！！

いただいた意見へのお返事

実装できたもの、出来なかったもの、敢えてやめたものへのあれやこれや。




どう実装してもストレスフリーな動作は実現できなかったので、ホイールクリックで任意の場所をワンクリックで拡大できる仕様にしてみました。

ズーム操作が快適なビューワーなど無いというのが私とエンジニアの共通認識でしたが、ホイールの多用により今までにない快適な操作感を実現できたと思います。

気づきのきっかけになったご意見に心から感謝ーーー！！




ご指摘の部分の修正とキーボード操作を充実させました。

キーボードの民エンジニアが自信ありありでしたのででいいものに仕上がったと思います（反キーボード民より

だから秋田を好きになれーーーーーーーーーーーー！！！




あんな細いとこ押せないでしょ、と非スマホ民同士で話していたところスマッホランドのテスターがチョロいチョロいと押しまくり。

ってわけで実装しましたのでお試しあれ～～




laymicは個人使用を想定していますので、権利表記をはじめ各情報はサイトに書くか、告知ひな型を工夫すれば入れられるので見送りました。

ですが、多数の作家が作品を持ち寄る投稿サイトなら話は別。
企業の皆様、漫画情報表示ボタンでもなんでも入れられますので御検討よろしくお願いします。




貴重なご意見ですが、大部分を見送らせていただきました。

見送った主な理由はlaymicに込めている理念に合っていないことにあります。
そもそも機能の理念を読み取れというのは無理がありますので、一つづつ説明させてください。



・マウスを画面上端／下端に持っていったらメニューが出てくる
アクションに対してしっかりとレスポンスを返すのがいいUIだという考えでデザインしています。

この前提から考えるに、カーソルが誤って移動しただけでUIが表示されるのは望んでいないレスポンスなのでよくない事。
現状のUIでも、中央領域をクリックすることによりUIが出ますので誤動作によるレスポンスもあると思いますが、カーソル移動と比べれば頻度は高くないと判断しています。

なお中央領域をクリックでUIが出る仕様を採用した理由は、操作法がわからなくなったとき人が行う動作はクリック（タップ）連打の可能性が高いからです（開発中イラトントンと呼んでいました）。

操作がわからない状態に陥ったとしても、雑にクリックすればUIが有効化され閉じるなりHELPを開くなりの対処が出来ます。

つまり、ストレスにレスポンスを返し回答を提示することを重視しているので、特定エリアへのポイントでUIが有効化されたり、有効化されないよう画面を避ける動作はストレスにつながると考えられるので採用しませんでした。




・メニューの何もないところをクリックするとメニューが消える
万が一ｖ３があればアイコンが増える可能性もありますし、帯もまたUIですのでメリハリということで。



・メニューが出てくる際、下のところにページ位置が出る
上部固定で行かせてください。

これは、漫画における視点の滞空時間によるもので、右上より左下へ読み進め次のページに移動する。
つまり、視点は中央以下の部分に長く滞在するということです。

下部に進捗バーを置くことは漫画の中に組み込まれた視線誘導技術をUIが阻害するという意味です。


漫画に使われている視線誘導の例。
こういった仕掛けをUIが邪魔をすることは許されない。

ですので上部固定で行かせてください。



・ページ数が (k/n)と出て、バーの割合で現在位置がわかる
これも上記と同様に漫画の視線誘導から目を奪うので無しです。

そうは言ってもピンと来ないと思いますので説明します。

人間が本能的に視線を奪われるもの。
それが、動くもの・目と口・文字です。


動くものはそのままの意味。
動画広告やGIFアニメーションを考えるとわかりやすいと思います。

StrawMan Templateには今流行りの上部からメニューがヌッと出るUIが実装されていません。
これは漫画に込められた視点をUIが奪わないように動的要素を排除するためです。



次に目と口。
これは、顔を認識すると快感が刺激される本能が人間には備わっているからです。
（言葉が無かった時代、顔で個を識別するのは重要なのでそういった本能が備わったとも言われています）

ようはあれ、木のうろが三つあれば顔に見えるってあれ（シミュラクラ現象）。
これを利用しているのがCMで顔の横に商品をかざすやーつ。
目と口のそばに商品を置くことにより視線を誘導するというテクニックです。



最後は文字。
文字が書いてあると読もうとするのが人間です。
今回のページ数の表示は文字なので漫画と同じエリアに置くべきではないというのが結論です。


なにもそこまで…と思う方はこちらをご覧ください。


セリフ→目→セリフ→顔を見落とさないように擬音をプラス→セリフで挟むことにより顔を強調→…………


全てのマンガには先ほど説明したことを応用した仕掛けがてんこ盛り。
これをUIが邪魔をすることは許さないというのがStrawMan Templateとlaymicが漫画専用と謳う最大の理由です。


つまらない漫画とは、ストレスを感じる漫画です。
ストレスとは、自然じゃない視線誘導によるストレス、難解な文字の多用による読めないことへのストレス、他にもたくさんありますが、こういった地味なストレスが積もり積もった結果出力されるのがつまらないというアバウトな感想です。
（もちろんこれらを上手くやると面白くなるわけではありません。
ですが、最後まで読まれる確率は高く、描き手じゃなければ気付かないストレスの積み重ねでつまらないと判断されることは減ります。面白いは別の話、面白いは難しい…。）



UIにストレスがあるのか漫画にストレスがあるのか気づくのは難しいですが、積もり積もったストレスは必ず漫画に影響します。

UIが漫画の面白さを損なうなんて許されない。
これは作家の総意だと確信しています。

そういう視点からページ数の表示は見送らせてください。



・バーをクリックしたりドラッグしたりするとその位置に移動する
スマホでは実装しました。

PCではサムネイル表示で大雑把に俯瞰し読みたいシーンへジャンプできますので機能が被るため不要と判断しました。


なお、サムネイル表示はバラバラーっとページをめくり目当てのシーンを探す動作を機能にしたものです。
目次機能を実装しなかったのも、単行本で目次見てページ数を探す動作より、大雑把にめくり話の区切りの白紙ページで判断する動作の方が一般的と考えたためです。

Kindleのような目次ジャンプは便利は便利ですが、読書体験に本来無い動作ですし目次ON話タイトルでネタバレとか書き手としてイマイチかなって。
（あくまで漫画の話、実用書やテキスト主体の本ならあった方がいいです）



StrawMan Templateとlaymicはこういった膨大なやり取りで生まれた産物です。

作り手以外でこれらを読み取ることは基本無理。
説明していない以上、皆様がわからないのは当然のことなので申し訳ありませんが納得していただけたら助かります。
（後出しみたいになってごめんよーーーーーー）


以上、laymicビューワーｖ２のアップデート記事でした～～～


StrawMan Template総合案内板へ戻る

関連記事

• StrawMan Templateの個別記事に記事編集リンクを追加する方法
• StrawMan Templateでファビコンを設置する方法
• 漫画ビューワーlaymicのアップデートとスクリプト版配信のお知らせ
• 漫画ビューワーlaymic_v2のクローズテストのお願い
• StrawMan Templateの簡易コード置き場