ブラウザで縦書きできるツール4選&作品が読めるサイト9選
新年あけましておめでとうございます。ブラウザで組版できる投稿サイト「八雲文庫」の管理人です。年末年始はゆっくりブログを書き溜めようと思っていたのですが、放置できない不具合も多々見つかりましてその対応にかかりっきりとなってしまいました。宣伝活動は後手に回ってしまいましたがサイトの品質はさらに向上しましたので、文芸の素晴らしさを1人でも多くの人に広められるよう今年も鋭意活動していきたいと思います。2018年が文芸ブームの年となりますように。ブラウザで気軽に文芸作品が読みたい方は是非一度サイトをご訪問ください。
さて、今回の記事ではブラウザと相性が悪いとされてきた縦組みによる表現を可能とするツールや、縦組みで作品を読めるようサービス提供しているサイトをご紹介します。モダンブラウザでは縦組みはCSS3 Wrighing Modesとして標準化されておりますので、ツールの導入に関しては事前にCSS3を学習することをお勧めします。
ツール
※最終更新日は調査した 2018-01-07 時点
1.竹取JS
制作:株式会社CMONOS 様
ライセンス:MIT
最終更新日:2015-11-08
2.h2vR.js
ウェブページで縦書きレイアウト - tategaki.info
制作:tyz@freefielder.jp 様
ライセンス:http://tategaki.info/h2v/license/
最終更新日:2016-07-22
営利目的で使用する際は許可が必要ですのでご注意ください。
3.nehan.js
制作:縦書き文庫 様
ライセンス:MIT
最終更新日:2017-11-26
nehan.jsと組み合わせて使用するビューアー「Responsivook.js」やChrome拡張「Nehan Reader」も併せて公開されているようです。
4.tategumi.js
制作:合同会社アライアンス・ポート 様
ライセンス:MIT
最終更新日:2011-08-04
プロジェクトページがNot Foundのため既に開発は停止しているようです。
サービス
1.青空 in Browsers
運営:株式会社ボイジャー 様
形式:HTML5
2.えあ草紙
運営:satokazzz 様
形式:FLASH
PC向け汎用電子書籍リーダー「AIR草紙」のウェブ版です。Chrome拡張も公開されています。
3.カクヨム・pixiv小説縦書きビューワ(非公式)
運営:文月夕 @hanameiro 様
形式:CSS3
カクヨム、pixiv小説に投稿した作品をURLから縦書きで表示できるようです。
4.純文学小説投稿サイト―jyunbun
運営:sakurada_kazoku 様
形式:FLASH
5.タテ書き小説ネット
運営:株式会社ヒナプロジェクト 様
形式:PDF
小説投稿サイト大手「小説家になろう」の縦書き表示用サイトです。
6.縦書き文庫
運営:Watanabe Masaki 様
形式:Javascript
nehan.jsの開発者様が運営している小説投稿サイトです。
7.ノベラボ
novelabo | 出版社ディスカヴァーが運営する小説投稿サービス「ノベラボ」
運営:株式会社ディスカヴァー・トゥエンティワン 様
形式:画像?
出版社様が運営されていることもあり投稿作品の書籍化もされています。
8.pixiv小説
運営:ピクシブ株式会社 様
形式:CSS3
縦書き機能は2015年からの提供だそうです。
9.八雲文庫
運営:管理人 @yakumobooks
形式:Javascript
僭越ながら最後にご紹介させて頂きます八雲文庫も縦組みで作品を公開できます。本記事の最初の画像はChromeブラウザで八雲文庫内の作品を表示した際のキャプチャーです。分かりにくいですがHTMLにPDFや画像を埋め込んでいるわけではなくFLASHでもありません。Javascriptでテキストをレンダリングすることで縦書きを表現しています。
モダンブラウザはFLASHをデフォルトで無効にする傾向にありますし、CSS3では期待するページ送りや今後の拡張が難しいと判断したためJavascriptによるレンダリングという手段を取りました。上記でご紹介したツールの中では縦書き文庫様のnehan.jsが最も近い技術となります。ただ、当サイトはサーバーサイドによる計算も組み合わせていますのでJavascriptだけで縦書きとページ送りを実現できません。そういう意味でもnehan.jsはとても素晴らしいライブラリですね。
現実の書籍も様々な意匠が凝らした組版で読む人を楽しませていますので、ウェブの世界もブラウザの制約に負けずに豊かな文章表現を追求していければ良いですね。
MediaWiki APIを使ってWikipedia上の作家の生年月日&没年月日を自動で取得する
Twitterによる自サイトの宣伝をスタートしてから早3週間以上経ちましたが、リリース直後は全くと言って良いほどアクセスのなかったサイト(小説・画像投稿サイト「八雲文庫」)にも、Twitterからの流入が確認できるようになりました。
一度でもご訪問頂いた皆様は誠にありがとうございます。“小説・画像投稿サイト”と銘打ってはおりますが、ブラウザで縦組みで読めて本棚管理もできる青空文庫ビュワーとしてお使い頂けますので是非気軽に使ってください。無料でご利用になれますし投稿機能以外はアカウントも不要です。
さて、認知度ゼロから個人がサービスを始めることの難しさを痛感しながらマーケティングについて日々学習する毎日なのですが、Twitterによる反響を計測する上では欠かせないTwitter Analyticsを眺めると、ツイート内容とその時ユーザーが興味を持っているワードが絶妙にマッチするとTwitterからの流入も劇的に増えるということがデータとして見えてきました。(Twitterユーザーにとっては当り前のことだと思いますが管理人はTwitter初心者なのです)
リアルタイム性のあるツイートはTwitterに張り付いていられないのでなかなか難しいですが、少なくともデイリーでの関連ワードをきちんとおさえてツイートすることが認知度を上げる鍵であると実感しました。
ということで頑張って呟こうと心がけてはいるものの、ツイート内容を毎日その日に絡めたものにするのは非常に大変です。私も以下のように作家の誕生日/命日に八雲文庫で公開している書籍をご紹介してはいますが、その日の作家を探すだけでも結構な手間だったりします。
本日12/14は著者である森田草平の命日でもあります。お昼休憩に当サイトで読書はいかがですか。 #赤穂浪士 #忠臣蔵 #読書好き #小説好き
— 八雲文庫 (@yakumobooks) 2017年12月14日
四十八人目 - 森田 草平(青空文庫) | 八雲文庫 https://t.co/ZNigxS7rdj
ということでようやくブログのタイトルなのですが、作家の生没月日で365日を埋めたリストが欲しかったのでWikipediaのAPIを使って自動で抽出してみました。 結果的には561名の作家*1の生年月日と没年月日*2で342日が埋まりました。
プログラムはGithubで公開中です。作家名を変更すれば好きな偉人・有名人の生没年月日を取得できます。HTML&Javascriptなのでどの環境でも動作します。ライセンスはMITなのでご自由にどうぞ。初めてのGithubなので不手際があったらすみません。
結果を加工して作った目的のリストも同様に公開中です。作家生没月日リスト.csv
機械的に取得したものなので内容の精査はしておりません。 利用する際は自己責任でお願い致します。 取得した年月日がおかしいもの(日経新聞社)があったり、そもそも青空文庫とWikipediaで表記が異なる外国人作家がほぼ取得できていなかったりするので今後修正する予定です。
リストがあっても対象作家の作品が八雲文庫にない場合もありますので必ず呟けるとは限りませんが、そういう場合は本家の青空文庫様や他の方のツイートをリツイートしたり、作家の生没ではなくその日の時事に関連した書籍をご紹介するなどで対応するつもりです。
企業人なので少ない時間で効果的にマーケティングできるよう今後もTwitterでの活動は継続していきたいと思いますので、応援してくださる方は是非フォローをお願い致します。 あと、今後は本投稿のような技術情報の発信もしていければと思います。
最後にしつこいようですが宣伝です。
小説・画像投稿サイト「八雲文庫」をオープンしました!ブラウザで縦書き、横書き、さらには段組みも可能です。新規ユーザー募集中ですので是非ご登録ください。 https://t.co/KFKZDjxNek #小説投稿 #画像投稿
— 八雲文庫 (@yakumobooks) 2017年11月25日
誰でも簡単!八雲文庫で文章と画像を組み合わせた書籍を公開する方法
インターネットの隅の方でひっそりとオープンした当サイトにも、ようやくユーザー様がつき投稿作品も公開されるようになりました。素敵な作品の投稿、本当にありがとうございます!まだまだアクセス数も少なくご満足頂けない点もあるかとは思いますが、長い目で見て頂ければと思います。作品の投稿を予定されていない方もユーザー登録して頂けますとPCやスマートフォンで本棚に追加した書籍を共有できますので是非ご登録ください!
さて、今回は投稿サイトとしての肝の部分である投稿機能についてご紹介したいと思います。 サイト本体の「使い方を見る」も併せてご覧頂ければと思います。
雛形から書籍を作成する
アカウントの登録と著者(ペンネーム)の作成を終えられた前提でご説明させていただきます。 まずは「あなたの本棚」のサイドメニューにある「本を作る」から書籍の「新規作成」を行います。
著者と書籍タイトルは一度登録すると後から変更はできませんのでご注意ください。
基本情報を入力したら「次へ」ボタンを押し、テンプレートからお好みの雛形を選択します。 基本的にはPC・スマートフォンで最も読みやすい「JIS B6」を選んで頂ければと思います。 他の用紙サイズもありますが実験的な意味合いが強いので、大きいモニター向けの専用書籍を作成したいなどの限られた場合のみ他のテンプレートをお選びください。
カスタマイズ(上級者用)ボタンで細かな調整ができますのでお好みの設定に変更することもできます。
選べるフォントにつきましては「OSフォント」もご用意しましたがこちらも実験的なものなので、基本的には見る側の環境に依存しない「Webフォント」をご使用ください。 Webフォントはフリーで公開されているものを今後増やしていく予定です。
テンプレートを選んだら「次へ」ボタンを押して表示の確認をしましょう。問題がなければ「決定」で書籍を作成します。
書籍に目次を追加する
一覧画面に先ほど作成した書籍が表示されますので「書籍を編集」で編集画面に移動します。
編集画面では表紙やタグの登録もできますが、今回は最も基本的な目次の作成のみご説明致しますので「目次」を選択します。 目次を追加する矢印を選択するとテキストボックスが現れますので、目次名を入力してEnterキーを押します。
Enterキーを押すと目次が登録され内容を編集できるアイコンが表示されますので、選択して目次の編集画面に移動します。
追加した目次の内容を編集する
目次の編集画面では、目次名以外にテキストがない場合は目次名がページに大きく表示されます。テキストをあえて入力しないことで見出しとして使用することもできます。
ページに表示したいテキストを入力して「保存」ボタンを押すと、文章が自動で組版されプレビューに表示されます。
「目」アイコンを選択すると自動組版されたページ構成が確認できます。
「画像」アイコンを選択すると、「ファイルを追加」ボタンが現れます。ファイルをアップロードしてみましょう。
複数のファイルを同時にアップロードすることもできます。
ファイルは画像ファイル横のボタンから個別にアップロードもできますし、「開始」ボタンで一括でアップロードすることもできます。
画像ファイルはレイアウトで指定した用紙サイズまでリサイズされますので、用紙サイズよりも幅が小さいファイルの場合はファイルサイズが大きくなります。ご注意ください。
画像をアップロードできたら、プレビューを挿入したいページ位置までページ送りし、「現在のページに挿入」を選択します。
ページ構成で画像が挿入されていることを確認できます。挿入した画像を削除したい場合は「削除」ボタンとチェックボックスを使用します。挿入・削除した画像は「保存」ボタンを押すまで書籍に反映されません。
「保存」ボタン横のプルダウンから目次のステータスを変更します。 「今すぐ公開」を選んで「保存」ボタンを押し、目次を「公開状態」にしましょう。書籍はまだ公開されていないので、目次もまだ他のユーザーからは見えません。
書籍を公開する
「戻る」から書籍の編集画面に戻り、「公開」から公開ステータス「今すぐ公開」を選び「更新」ボタンを押せば、書籍はインターネット上に誰でも見られる形で公開されます。
いかがでしたでしょうか?「簡単そう」「投稿してみたい」と少しでも思って頂けた方は是非ユーザー登録をお願いします!今回ご紹介した機能は全て無料でご利用になれます。
管理人が作成した画像を使ったサンプルの書籍も公開しましたので、実際にどのような書籍が作成できるかご覧になってみてください。
おはようございます。今回は画像投稿のサンプルとして管理人自ら絵画集を作成してみました!八雲文庫ではブラウザで読める画像集を簡単に公開することができますよ。
— 八雲文庫 (@yakumobooks) 2017年12月10日
画集「フェルメール」 - 管理人 | 八雲文庫 https://t.co/3wF8HAyz4t
八雲文庫における作品カテゴリーについて
本日は先月リリースしました、ブラウザで組版できる小説・画像投稿サイト「八雲文庫」での投稿作品を分類するカテゴリーについてご説明します。
八雲文庫における作品のカテゴリー分類
八雲文庫の作品カテゴリーは以下の通りです。(2017年12月現在)
様々な出版社や書店サイトのカテゴリー分けを参考に粗すぎず細かすぎないように分類したつもりですが、ご要望があればご連絡ください。
また、八雲文庫にはカテゴリーの他に作品に「タグ」をつける機能もありますので、そちらもご活用頂ければと思います。
青空文庫の取り込みとカテゴライズ仕様
八雲文庫では青空文庫作品を多数取り込み公開していますが、その際に作家別作品一覧拡充版CSV中にある分類番号(NDC分類記号)を元に八雲文庫のカテゴリーに合うように再カテゴライズしています。
青空文庫の分類についてはpawa@朗読部さんの投稿された以下の記事でも触れられていますので併せてどうぞ。
青空文庫のごく簡単な紹介 on @Qiita https://t.co/cJlm647Xsq
— pawa@朗読部 (@_pawa_) 2017年12月2日
なお、1つの作品に複数の分類番号があるものは先に記載されている方を採用しています。
この辺りは勢いで実装したため多少粗い感じになってしまっています。
以下が分類番号とカテゴリーの対応表です。
分類番号 | 八雲文庫カテゴリー |
---|---|
NDC Kxxx | その他(こども・知育) |
NDC 1xx | 哲学 |
NDC 31x | 政治 |
NDC 33x NDC 34x |
経済 |
NDC 37x | 教育 |
NDC 3xx | その他(社会・ビジネス) |
NDC 4xx | 自然科学 |
NDC 5xx | 技術・工学 |
NDC 620 | ガーデニング |
NDC 6xx | その他(趣味・実用) |
NDC 8xx | 言語 |
NDC 0xx NDC 2xx |
その他(教養・アート) |
NDC 76x | 音楽 |
NDC 7xx | その他(教養・アート) |
NDC 914 NDC 915 NDC 916 |
エッセイ・評論 |
NDC 9xx | その他(小説・文学) |
メインのコンテンツとなるはずである「小説・文学」に対応するNDC「文学(9類)」が世間一般で認知されているカテゴリーとギャップが大きく、「その他(小説・文学)」で扱うしかなかったところが残念な感じです。 他の方々が既に実践していますが機械学習による小説の自動分類もいつか挑戦してみたいと思っています。
最後に宣伝です。
小説・画像投稿サイト「八雲文庫」をオープンしました!ブラウザで縦書き、横書き、さらには段組みも可能です。新規ユーザー募集中ですので是非ご登録ください。 https://t.co/KFKZDjxNek #小説投稿 #画像投稿
— 八雲文庫 (@yakumobooks) 2017年11月25日
既にアカウントを作って作品を投稿してくださった方もいらっしゃいます。
生まれたばかりのサイトですので是非皆さんで育ててください!
組版できる小説・画像投稿サイト「八雲文庫」をオープンしました!
小説・画像投稿サイト「八雲文庫」をオープンしました!ブラウザで縦書き、横書き、さらには段組みも可能です。新規ユーザー募集中ですので是非ご登録ください。 https://t.co/KFKZDjxNek #小説投稿 #画像投稿
— 八雲文庫 (@yakumobooks) 2017年11月25日
宣伝活動をつい先日(11月25日)から開始しました!
今後とも宜しくお願い致します。
ではさっそくですが、八雲文庫でできることをいくつかご紹介したいと思います。
以下の機能は全て無料でお使い頂けます。
- 投稿したテキストを自動組版してブラウザ上に表示&公開できる
- 完全固定レイアウトで本っぽさを再現!
- 投稿された作品をMy本棚で管理できる
- 1つのアカウントで複数ペンネームを管理できる
- コメント投稿は「ペンネーム」と「匿名」を選べる
- 8,000以上の青空文庫作品を縦書きで読める
- 閲覧画面はモバイル対応
- 最後に
投稿したテキストを自動組版してブラウザ上に表示&公開できる
上記画像はPDFではなく純粋なHTMLです。 テキストを保存するだけで事前に決めたレイアウト(所謂「基本版面」)に沿ってブラウザ上に表示できます。 当サイトはHTMLでどこまで日本語組版処理の要件(日本語版)を満たせるかに挑戦した自分にとっての技術研究的なサイトでもあります。作ろうと思い立ってから結構な時間が経過してしまいましたが、少しずつ勉強を重ねてようやく公開へと至りました。
完全固定レイアウトで本っぽさを再現!
当サイトは固定レイアウト(フィックス型)です。拡大縮小に合わせて自動で文字組が変わる(リフローされる)ことはありません。その代わり、投稿者は自由にレイアウトを指定することができ紙の書籍のように1冊1冊違った個性を表現ができます。 指定できるレイアウトの項目は以下の通りです。
- 用紙サイズ
- 用紙向き
- 文字方向
- 綴じ方向
- 段組(段組間隔)
- 余白(天・地・ノド・小口)
- フォント(WebフォントまたはOSフォント)
- フォントサイズ
- 行間隔
- ルビサイズ
- 文字間隔
- 柱位置
- ノンブル位置
- アキ調整
あと、各種表紙(表紙、背表紙、裏表紙、袖表紙、内表紙)も登録できます。
投稿された作品をMy本棚で管理できる
ブラウザでの組版表現の他に実現したかったのがこの「デジタル書架」です。もちろんこれもHTMLですが、「表紙」「背表紙」「裏表紙」の切り替えが可能です。ユーザー登録しなくても使えますのでとりあえず触ってみたい方は使ってみてください(但し本棚の情報はブラウザに保存されます)。
1つのアカウントで複数ペンネームを管理できる
当サイトは利用規約 | 八雲文庫にも書きましたがお1人様1アカウントです。 ですが1つのアカウントで複数のペンネームを登録できますので、ペンネーム単位での創作活動ができます。
コメント投稿は「ペンネーム」と「匿名」を選べる
コメント投稿では気軽さを念頭に、匿名での投稿もできるようにしています。 もちろん、著者がコメントの投稿を禁止することもできます。
8,000以上の青空文庫作品を縦書きで読める
現在8,894の青空文庫作品を取り込み公開しています。 当サイトはマークダウンの一種である青空文庫形式の完全再現も1つの目標としています。 まだまだ対応できていないマークダウンもあり全ては取り込めていないのですが、 最終的には全作品を取り込めるように頑張りたいと思います。
閲覧画面はモバイル対応
当サイトで公開された書籍はモバイル端末のブラウザでも閲覧できます。固定レイアウトなのでリフローはしませんが、お使いのモバイル端末で最大表示されるように自動調整します。拡大縮小はピンチイン・ピンチアウトしてください。また、投稿画面は最低768pxの幅が必要なので横向きのタブレットであれば問題ないかと思いますが、スマートフォンでは(操作できなくはないですが)少し厳しいかと思います。 投稿画面はお世辞にも使い易くはないのでいずれ直したいと思っています。
最後に
ここまで読んで頂きありがとうございます。
まだまだご紹介できていない機能があるのですが、ご興味の出た方は是非八雲文庫にアクセスして「使い方を見る」をご覧になってください。
ちなみに、当サイトは某IT企業で働くエンジニアが1人で開発・運営しています。仕事とプライベートの空き時間は限られているためサポート不足などあるかもしれませんが、諸々ご了承ください。