カクヨム縦書きブックマークレットのおまけ
kakuYOMUをLibingにインストール
カクヨムを縦書き表示にするStyilishのユーザーCSSの移植ブックマークレットをiOSのブラウザアプリ、Libingにインストールします。デフォルトはOn Loadしていますが、kakuyomu.jpのページに対して有効になっているようなので、小説閲覧ページ外で干渉することがあると思います。そういった場合にはOn Loadを外す、読む小説を開いた後にブックマークからこのCSSを改めて選択し、適用させることをおすすめします。ご自分の使いやすいように使ってください。
このブックマークレットはJavaScriptに無知な人間がいじった代物です。ご容赦ください。
[追記: 2016-03-05 20:33] こちらもより美しい物に更新。
背景色は例にこの部分のカラーコードを変更してください。
background-color:#f2f2f0!important
フォントサイズはこちらを。
font-size:10.5pt!important
上下に3emの余白を設定しています。変更は以下の箇所の数字で。
.widget-episode{padding-top:3em!important;padding-bottom:3em!important}
[追記: 2016-03-06 16:08] 作品閲覧ページのみに適用
作者様のご厚意により、より良いものへ。
iPhoneでもカクヨムに縦書きCSSを
漸く始まったカクヨムですが、白い！ 明朝体に横書き！ 表示の調整ができない！と大変読むのがつらい状況でして、どなたか作っていらっしゃらないかとStylishを訪ねたら2つ、ユーザーCSSがアップされていました。
有り難い。本当に。
で、そういえばiPhoneでもブックマークレットというものを使って似たようなことできたよな？と思いまして、縦書き"表示"の方のCSSを元にいじってみました。
javascript:setTimeout(function(){if(location.host.indexOf('kakuyomu.jp')==0){style="#globalHeader{opacity:0;} #contentMain-previousEpisode{opacity:0;} #contentMain-inner{overflow-x: scroll !important; -webkit-overflow-scrolling: touch; padding-top:0em !important; max-height:85vh !important; width:calc(100% - 40px) !important; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; background-color:#F2F2F0 !important;} #contentMain-header-cover{padding:60px 120px !important;}#contentMain-header-cover #workColor{height:40px !important; margin:auto 0 !important; width:10px !important;}#contentMain-header-arrow .icon-bottom::before{transform: rotate(90deg); -webkit-transform:rotate(90deg);}.widget-episodeTitle{margin:0 2rem 0 60px !important; background-color: rgba(0, 0, 0, 0) !important;}.widget-episodeBody{font-size: 10.5pt !important; max-height: 38em !important; padding-left: 60px !important;}.emphasisDots span{padding: 0 0.35em 0 0 !important; background-position:right center !important; vertical-align: bottom;}";document.body.appendChild(document.createElement("style")).innerHTML=style;}},1000);
これをiPhoneのブラウザのブックマークから使用すると多分いけるんじゃないかと。この色のところのカラーコードが背景色で、この色のところがフォントサイズになっています。それと、この色の部分は画面の上で出たり引っ込んだりするヘッダーを「透明」にする部分です。削除すれば通常通りに表示されます。透明になるだけなので、右上の方を押してやれば普通に目次とかのやつが出てきます。
自分はそもそもJavaScriptとかできる人ではなく、数値をいじっては適用してみて……を何度も繰り返した程度。不満点がないわけがない。一番は1行あたりの文字数ですね。個人的にはもっと1画面あたりの情報量は多い方が好みなのですが、どこをいじればいいんですかね？
正直スマートフォンであれば、
- 背景色の調整
- ヘッダーの非表示（透明化）
さえできれば、横書きでも妥協できないことはないと思う。公式で機能を実装するか、アプリ版を提供していただくのが一番なんですが、まあ多分ランキング絡みでリリースできなかったりもするんじゃないですかね。知りませんが。ところで国内には Windows 10 Mobile というスマートフォンもあるんですがアプリはiOSとAndroidだけですか？
[追記: 2016-03-05 17:02] より美しく。
javascript:setTimeout(function(){if(location.host.indexOf('kakuyomu.jp')==0){style="#globalHeader {opacity: 0;} #contentMain-previousEpisode {opacity: 0;} #contentMain {padding-top: 1em !important;} #contentMain-inner {overflow-x: scroll !important; -webkit-overflow-scrolling: touch; padding-top: 0em !important; max-height: 100vh !important; width: calc(100% - 40px) !important; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; background-color: #F2F2F0 !important;} #contentMain-header-cover {padding: 60px 120px !important;} #contentMain-header-cover #workColor {height: 40px !important; margin: auto 0 !important; width: 10px !important;} #contentMain-header-arrow .icon-bottom::before {transform: rotate(90deg); -webkit-transform: rotate(90deg);} .widget-episode {padding-bottom: 1em !important;} .widget-episodeTitle {margin: 0 2rem 0 60px !important; background-color: rgba(0, 0, 0, 0) !important;} .widget-episodeBody {font-size: 10.5pt !important; max-height: 42em !important; padding-left: 60px !important;} .emphasisDots span {padding: 0 0.35em 0 0 !important; background-position: right center !important; vertical-align: bottom;}";document.body.appendChild(document.createElement("style")).innerHTML=style;}},1000);
@Keznote 縦書き表示CSSの作者です。
— ひむろ(mjk) (@himuro_majika) 2016年3月5日
1行あたりの文字数についてブログの方にコメントさせて頂きました。
良ければご確認いただければと思います。
他に分からないことがあればご質問ください。
作者様から頂いた物を使用したバージョンになります。美しい……（感嘆）
ひむろ(mjk)様、ありがとうございました。
[追記: 2016-03-06 15:54] 閲覧ページでのみ有効
javascript:(function(){if(location.href.match(/https:\/\/kakuyomu\.jp\/works\/.+\/episodes\/.+/)){document.body.appendChild(document.createElement("style")).innerHTML="#globalHeader{opacity:0}#contentMain-previousEpisode{opacity:0}#contentMain{padding-top:1em!important}#contentMain-inner{overflow-x:scroll!important;-webkit-overflow-scrolling:touch;padding-top:0!important;max-height:100vh!important;width:calc(100% - 40px)!important;writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;background-color:#f2f2f0!important}#contentMain-header-cover{padding:60px 120px!important}#contentMain-header-cover #workColor{height:40px!important;margin:auto 0!important;width:10px!important}#contentMain-header-arrow .icon-bottom::before{transform:rotate(90deg);-webkit-transform:rotate(90deg)}.widget-episode{padding-bottom:1em!important}.widget-episodeTitle{margin:0 2rem 0 60px!important;background-color:rgba(0,0,0,0)!important}.widget-episodeBody{font-size:10.5pt!important;max-height:42em!important;padding-left:60px!important}.emphasisDots span{padding:0 .35em 0 0!important;background-position:right center!important;vertical-align:bottom}"}})();
@Keznote
— ひむろ(mjk) (@himuro_majika) 2016年3月6日
度々失礼します。
スイッチというのは閲覧ページ以外でCSSの適用を無効にするということでしょうか？
もしそうなら勝手にブックマークレットを手直しさせていただきましたので良ければ試してみてください。https://t.co/vQWxYElcjd
作者様からまたもや救いの手が。
今までは閲覧ページ外でも適用されてメニューが無駄に透明化、エピソードの編集ページが潰される、といったことがありましたが、なくなりました。
……といっても、その都度ブックマークから実行するブラウザではあまり関係はないかもしれません。ページの読み込みごとにJavaScriptを実行する機能のあるブラウザ、LibingやOhajiki Web Browser (無料版: Ohajiki D Web Browser) で真価を発揮すると思います。
重ね重ね、ひむろ(mjk)様、ありがとうございます。
書いてました、「自分の１ダース」
自分の１ダース
ある冬の日曜日、模擬試験のため日下弥生は学生服の袖に腕を通して休日の高校に来ていた。試験が終わって、疲れた頭にと持ってきていたチョコレートを手にすると、それは百瀬裕という女子のものと入れ替わっていた。百瀬に返そうとするも「どうして入れ替わってるって分かったの？」と訊ねられる。さて、どうしてだろう。その理由は弥生自身にも分からなかった……。（第１話「微熱で溶けない程度の問題」）
http://ncode.syosetu.com/n9502db/
まあ、そういうことです。
一応ミステリー、特に「日常の謎」と呼ばれるジャンルの小説を目指して書いた作品になります。短編３話の連作で、文量としては河野裕『いなくなれ、群青』（新潮社、2014）の半分程度になります（新潮文庫nexのレイアウトをMicrosoft Wordで再現する遊びをしていました）。
以下、零れ話。
できれば「自分の１ダース」を読んでから見てほしい雑談が続きます。
いくつかの言葉
満タン
まん タン ［0］ 【満タン】
〔タンはタンクの略〕
燃料などが容器いっぱいにはいっていること。満杯。
満タンとは - Weblio辞書
タンクのタンだったのか。てっきり二字熟語かと。
くけつ たい ［0］ 【駆血帯】
静脈血を採取する際、静脈をふくれあがらせるため、採血部上方に巻きつけるゴム紐（ひも）。
駆血帯とは - Weblio辞書
次の言葉を調べている時に見つけた。これを用いて行う止血法を駆血法というらしい。「駆血」自体は辞書にない（この漢字二字から正しい意味を連想することができない）ので海外の医療用語の訳語だったりするのかもしれない。philosophyを哲学とするような。調べる気はない。
点滴のパックとか吊るすアレ
is 何
これについて呼び方がまちまちみたいです。点滴台、点滴棒、点滴スタンド、点滴架台、ガートル台、ガートル棒……。正式名称は何かしらあると思うのですが。通じやすさで言えば「点滴スタンド」がいいのかなと。（Googleサジェストから関連用語かと思えば別物の点滴バーなるものに出会す）
ウェーイ
ウェーイ
別表記：ウェイ、ウェイウェイ
仲間同士で盛り上がった時に発せられる若者言葉。単に軽い挨拶として、友人に会った時などにも用いられる。関連して「ウェーイ系」という表現が使われることがあり、集団になって騒ぐことを好む若者に対する軽蔑を込めた呼称などとして使われる。
ウェーイとは - 日本語表現辞典 Weblio辞書
載っているのか……。実用日本語表現辞典おそるべし。
ネットでは「ウェーイｗｗｗｗｗｗ」と書かれることが多いですね。ただ、縦書きとなるとｗを連打して笑いを表現するのはあまり好ましくない。もちろんライトノベルなどの表現としてはアリだと思います。
今回、自分の文章では、
「百瀬はそういう奴だよ。意外と奥ゆかしいところもあるんだ」
「意外かな。大人しいイメージだけど」
「いや、百瀬はもっとこう、ウェーイ！って感じだぜ？」
と、していました。却下です。
ちなみに、
草を生やす
草を生やす
読み方：くさをはやす
(1)草木を植え込むなどして、地面から草の生えた状態にすること。
(2)インターネットスラングの一種で、「笑い」の意味で語末に付ける「w」や「ww」を大量に付けることを指す表現。
草を生やすとは - 日本語表現辞典 Weblio辞書
あるでしょうね。実用日本語表現辞典 is 何 と、確認したところ、
実用日本語表現辞典
実用的で現代的な日本語の表現について解説する辞書・辞典サイト。ビジネスの現場や電子メール、あるいは職場の上司などから聞いたような、現代的な日本語の中で、特に実用的な場面で利用される言葉を解説します。
http://www.practical-japanese.com
出版物では対応できるはずもないとは分かっていたけれど、Blogger（レンタルブログサービス）で作成されているウェブサイトだったのか……。
学校の靴を履き替える場所を三文字で答えよ。
下駄箱がずらっと並んでいて、ラブレターや画鋲のイベントが起きて、キャラクターの心情を表現するのに一役買うこともある、学校の靴を履き替える場所。
ずっとあの場所のことを「脱靴場」と呼んでいました。読みは「だっかじょう」です。
で、いざWordに打ち込もうとすると変換できない。
Google日本語入力からMicrosoft IMEに切り替えて打ってみる。やっぱりできない。
ここにきてようやく脱靴場は一般的な名称ではないんじゃないかと疑い始めるわけです。こっちは小学校からの付き合いなんで驚きですよ。
手始めにWeblio辞書。
用語解説で「脱靴場」に一致する見出し語は見つかりませんでした。
ほぼほぼ決まりですね。脱靴場は通用しない、と。
ほーん (◜◔。◔◝)？
では、あの場所を表す広く一般に通じる言葉は何か。
会話の中では、
「んじゃまたあと下駄箱でー」
「はいよー」
くらいの会話になることが多いんじゃないかと思うんですが、いやそれも正確ではないよな。その空間の象徴的な物、機能を司る物を指してその場所を示しているだけで。
じゃあなんだ？
といっても、とっくに見当はついていたんですが。
小説を読んでいれば分かりますよね。自分がいつも脱靴場と呼んでいるのと同じ場所を、小説では別の呼び方で書いてあるんですよ。「へえ、そうとも言うんだな」くらいに思っていたことが「あっ、違う」ってなったのが今回のお話。
では、コトバンクより解答。
デジタル大辞泉の解説
しょうこう‐ぐち〔シヨウカウ‐〕【昇降口】
１ のぼりおりするための階段のある出入り口。
２ 校舎などの出入り口で、上履きと靴を履き替えるところ。
Google先生にお尋ねしたところ、自分の出身校以外にも脱靴場を公式に使っている学校はあるようです。意外といろんな地域に散っているようなので、この呼び方が地域性によるものなのかは判断が難しい。
「それなら文中に使用してもよいのでは？」と、したくもありますが、辞書にないとなると、うーん。靴を脱ぐ場所、と漢字で意味は伝わりますが、しかし……。
はじめに
「紙の辞書と電子辞書、どちらを使うべきか」
なんてくだらない問題はどうでもよくて、普段自分が調べ物をする時に使うインターネットのサービスを並べておきます。
Chromeのタブに常駐しているWeblioの二つ。
辞書と類語辞典は別タブで開いてあります。
辞書で調べたワードをそのまま類語で調べたりもできますが、以前見た時はこの二つでページのレイアウトが違うせいで横断して検索する場合にマウスポインタを持っていく場所がばらばらでイラッとしました。今改めて確認したらなんか揃ってますね。
正直スマホ版のが綺麗で個人的には見やすい。まあ例に漏れずスマホ特有のクソ広告があるので、アドブロックのあるブラウザが前提ですが。
んで、Weblioに載っていないような語句はコトバンク。
こちらは百科事典もあるので、やたら細かい知識とかなんとかをずらっと出してくれたりもします。
直接コトバンク内から検索するとYahoo! JAPANの辞書検索結果みたいなゴミ（Yahoo! 全般が嫌いなので）を表示されてしまうので、コトバンク狙い撃ちで調べたい時には余所から「ほげほげ コトバンク」で。
信憑性全般の議論はやはりどうでもよくてWikipedia。
なんだかんだインターネットで調べてたら一度はここ見ます。
「そんなにあれこれ言うなら貴方は自分の分野で間違った箇所を見つけたら修正してくれてるんですよね？」と訊きたい。もちろん編集してくれてる人もいるそうです。
以前「スニーカーソックス」の概要で「自宅警備用」と書いてあったのには笑いました。個人的おすすめはこれ。三毛別羆事件 - Wikipedia
信憑性だのの議論を鼻で笑って吹き飛ばすニコニコ大百科。
ここで真面目に調べるのはネットスラングの意味や由来ですね。
最近見た中ではこれが好き。
フェレンゲルシュターデン現象とは (フェレンゲルシュターデンゲンショウとは) [単語記事] - ニコニコ大百科
シロナガスクジラ現象とは (シロナガスクジラゲンショウとは) [単語記事] - ニコニコ大百科
最後に大先生、Google。
説明不要。
大体こんなところです。
あとはWEB色見本 原色大辞典 - HTMLカラーコードとか、IT用語辞典とか？
本題
当ブログは、Keznoteが文章を書いているその都度に「あれ、これって一般的にはどう呼ばれてるんだ？ これってこういうふうに書いて大丈夫なのか？」と、検索した事柄について書き留めようと始めたものです。どうせ本文に使えずにこぼれるんだから受け皿があってもいいよね。
なるべくちょっとした文章になるように書こうと現時点（2015年11月25日3時18分）では考えています。こぼれ話以外にも書きたいことはあったりなかったりするので、暇な時にそういうのもやろうかなと。はてなとKADOKAWAの新しいアレとか。
