20日目 閲覧設定画面を作ろう
最近はダークモードに対応してきているサイトも多くなっているので、閲覧環境は変えられるようにしておいた方が無難です。
「小説投稿機能も作れたので、今日は閲覧設定機能を作っていこう。そのまま表示してもいいのだけど、それだと寂しいからね。文字色と背景色、文字サイズ、行間の変更と縦組み表示ができるようにしておこう」
「縦で読めるのは嬉しいよね。でも難しいんじゃないの？ 大手でもついてないところあるけど」
「昔は難しかったからPDFで提供しているところもあったけど、最近はCSSで簡単に設定できるからそこまで難しくはないよ。ボタンを押してClassの付け外しで簡単に実装できる。設定の保存はLocalStrageかcookieに保存して、最初に読みだすだけでいい。
まぁやってみようか」
* * *
「実装しておきたいのは電子書籍用のソフトウェアや端末で変更できる部分。kindleなんかでは文字色、背景色、文字サイズ、行間、フォントを変更できるようになっている。この辺りを押さえておけばいいかな。
■文字色と背景色
文字色と背景色の変更は、白地に黒、黒地に白、セピアに黒、の三種類は用意するといいかな。白地に黒は通常使うもの、ダークモード用に黒地に白も用意しておきたい。あとは、実際の紙の小説ではセピア、クリーム色を使うことも多いのでそれに合わせて用意しておくのがいいかな。
閲覧設定を変更できるサイトではこの3パターンを用意しているところが多いね。これに加えて水色と黒の組み合わせも人気だね。自分で選べるようにするのもありかと思うけど、人気の三種類だけでもいいかな。要望があれば追加するのもいいね。
■文字サイズ
文字サイズが適切かどうかはユーザーが判断することなので、できれば変更できるようにしておきたいところだね。
特大、大、中、小、みたいに決められた大きさから選ぶところや、▼、▲で微調整できるところがあるね。できたら微調整できるようにしておくと小回りが利いていいかな。
■行間
行間を設定できるようにしているところは少ないけど、これも設定できると嬉しいかな。改行が少ない文章の場合、横書きだと詰まった印象になりやすいからその時は広げられるといいね。
これも決められた行間から選ぶ場合と▼、▲で微調整できるところがあるね。
■縦組み表示
ほとんどのところは横組みで表示しているけど、縦組みで読みたい人もそこそこいる。その人たちように設定できるようにしておこう。単純に縦にするだけならほとんど設定しなくてもできるから、そんなに労力はかからないよ。
また縦にする場合はフォントも変更できるようにしておこう。ゴシック体だと、どうしても読みにくいから明朝体を選べるようにしておくといいかな。これもCSSで設定できる。
ただ、アンドロイドだとゴシック体しかない場合が多いからそれの対応をどうするかは考えておかないといけない。Webフォントを使うのか、それとも特に何もしないのかを決めておこう。
だいたい決めるのはこのあたりかな。じゃぁ実際に作っていこうか」
「わかった」
時間がなければ後でもいいですけど、そこまで難しくないのでやっておくといいですよ。簡単なCSSとJavaScriptで実装できます。原理的にはClassの付け外しですね。
とある投稿サイト運営側でのアンケート結果を見ると3~4割くらいの人が利用しているようです。3割近くは変えられることを知らないようなので、恐らく半数くらいが潜在的利用者なのかなって思います。
縦書き表示にこだわる人もいるので、その人たちを取り入れるのであれば実装必須ですね。特に文芸系の作品を好む人に多いと思います。できたらフォントも変えられるようにするといいです。
ただ、androidの明朝体への対応はなかなか難しくて、Webフォントを使えばいいんだけど表示スピードが落ちるのが難点ですね……。
