段落ごとにコメントできる縦書き文章の作成サービスを公開しました

Brushup! について

段落ごとにコメントできる縦書き文章の作成サービスBrushup!を作りました。

パスワードを付けることもできるので、特定の人にだけ見せる使い方も可能です。

主に編集や校正の依頼に使えるツールを想定しています。

段落へのコメントを試してみたい方は、お試し用のエントリからどうぞ（コメントを投稿するにはユーザー登録が必要）。

ユーザー登録について

グーグルアカウントで登録できます。

マークアップについて

マークダウンという文法ですが、普通に文章を書く感覚で使っても、大体は思ったとおりの出力になるんじゃないかと思います。

マークダウンについては、ヘルプにも少しだけ説明しましたが、細かいことは各自で調べて下さい。

ちなみに縦書き文庫の記法は基本的にはそのまま使えるはず（全部はまだ試していませんが…）

チップ記法とか台詞記法とかは大丈夫でした。

またルビの記述ですが、Brushup!では簡易記法を用意しました。

[ruby 漢字 かんじ]にルビをふる。

みたいに書けます。多少はタイプ量が減るかと…

活動メモについて

次にプロフィールページにある「活動メモ」というものですが、自分の活動の中で報告したいものを勝手に書き込んで下さい。

サービスの性質上、プロフィールページに公開投稿を自動で一覧表示、みたいな機能は敢えて用意していません。

活動メモを使って、自分の言葉で報告したりしなかったりすればいいと思います。

ちなみに投稿した文章のURLは、連番じゃなくてハッシュ値で作られるので、自分でURLを公開しない限りはアクセスされないと思います。

もちろん非公開にすることも出来ますし、パスワードを付けて公開することも可能です。

datasetにセットしたboolean値について

ちょっとハマったのでメモ。

例えば、

<div id="foo" data-hoge="true"></div>

とかあったとき、以下の結果はどちらもfalse

$("#foo").data("hoge") == "true" // false
$("#foo").data("hoge") === "true"  // false

理由はdatasetにセットした"true" もしくは "false"は、boolean型として評価されるから…

typeof $("#foo").data("hoge"); // "boolean"
$("#foo").data("hoge") === true; // true

ちなみにnehan.jsも、datasetの値はズボラぶっこいて、一律で文字列型のまま返しちゃっていたので、今さっき直しました。

脚本を台詞記法で書く

ちょっとした小ネタですが、縦書き文庫の台詞記法はキャラクタ登録なしでも使えます。

キャラクタ名の部分に、人物の名前をそのまま書けば、キャラクタ画像じゃなくて文字列で表示されます。

なので、ちょっとした脚本は次のような感じで書けます。

[speak 太郎 今日は天皇杯の決勝だね。]
[speak 次郎 去年まで同じJ2で戦ってた同士が決勝って凄いね。]

詳しくは縦書き文庫ヘルプ | 台詞記法を参照して下さい。

チップ記法

わざわざtipタグを書くのが煩わしいので、チップ用の記法を用意しました。

チップについては 縦書き文庫 | チップ記法 を参照のこと

文法

次のように記述します。

[tip タイトル:内容]

注意

• tipとタイトルの間には一つ以上の半角スペースが必要です。
• タイトルと内容の間には半角のコロン:が必要です。

台詞記法で吹き出しの有無を切り替えられるようになりました

台詞記法で、吹き出しの有無を選べるようになりました。

声に出す台詞はspeakを使います。

[speak taro これは声に出して言う台詞！]

心のなかの台詞はthinkを使います。

[think taro これは心のなかの台詞…]

実際に表示させるとこんな風になります。

詳細は縦書き文庫ヘルプ | 台詞記法についてを参照のこと。

利用者の「規約を読みました、同意します」はウェブ最大の嘘？

おもしろそうなサービスを見つけました。

Terms of Service; Didn't Read

「みんな読んだとか言って嘘ついてるけど、あなたが同意した規約の中身って、実際はこんな風になってるんだよ」みたいなことが確認できるサービス。

各サービスの各規約ごとに、thumb up/downのアイコンが割り振ってあって、総合評価としてclassA〜classEでレーティングされています（classAが最も良い）。

有名どころでは、

• DuckDuckGo がclassA
• Github がclassB
• Google がclassC
• Delicious/Youtube がclassD

みたいな感じでした。

ちなみにamazonはどうかな、と思って確認してみたら、規約評価の項目は全てthumb downでしたが、classはまだ規約の調査が完了していないので付いていない（No Class Yet）、という扱いみたいです。

レビューの再利用に関する権利

amazonの規約で思い出したのですが、３年ぐらい前に「投稿したレビューの権利が、商用利用も含めてアマゾンに譲渡されることについて知ってるかい？」みたいなブログポストがありました。

Amazon and Book Review Ownership

ちょっと確認したのですが、この件に関する（と思われる）規約の文面は、今はこういう内容です。

お客様がコンテンツの投稿または素材の送信を行った場合、他の取り決めを当サイトが明示していない限り、お客様は、アマゾンに対して、そのようなコンテンツを使用、複製、変更、翻案、公開、翻訳、二次著作物の作成、配布、あらゆるメディア形態で世界中に表示できる、非独占的な、無償の、永続的な、取り消し不可能な、完全なサブライセンスを含む権利を許諾したものとみなします。お客様は、アマゾンとサブライセンスを受けた者が希望すれば、それらに対して、そのようなコンテンツに関連してお客様が送信された名前を使用する権利を許諾したものとみなされます。Amazon.co.jp 利用規約 / レビュー、コメント、コミュニケーション、その他のコンテンツ

ようするに、再利用に関する権利はamazonにあって、amazonはその権利を第三者に対してもライセンスできる、という内容です。

ずいぶんと過激な気もしますが、しかしこれはamazonの商品APIを使うようなマッシュアップ系サービスからしたら、都合が良いはずです。

いちいち全てのレビューについて、それぞれのレビュアーの許諾を得なくてはいけない、となると手続きが大変ですが、この内容なら、アマゾンだけから許諾を得れば良いことになりますし…

ただ、レビューを書いた人たちからしたら、どうか。

もし自分のレビューが「商品のプロモーション」として、なんの相談もなく再利用されたら…もやもやしますよね。

でも規約は、そういうやり方も認めるような内容に読み取れますが、実際どうなんでしょう。

縦書き文庫も「サービスを利用した際に発生した二次的な情報の権利はサイト側に帰属する」などと気楽に書いてますが、アクセスログはともかくとして、レビューはどうするべきなんだろうなあと考えると、悩ましいところではあります（それほどコメントの多いサービスではありませんが）。

box-sizing:margin-box

margin-boxとは

margin-boxとは、ボックスのサイズをmarginも含めて計算するボックスのことです。

つまりmarginが50pxで、widthが200pxなら、コンテントサイズは

200(width) - 50(margin-left) - 50(margin-right) = 100

になります。

ちなみにこのmargin-boxという値は、現在のbox-sizingプロパティでは、有効な値ではありません。

でもcss3 shapesという仕様のshape-outsideというプロパティでは有効な値（それどころかデフォルト値）だったりします。

理由はよくわかりません。

nehan.jsにおけるbox-sizing

ところで nehan.js においては、box-sizingにmargin-boxが指定できます。

というか、margin-boxがデフォルトです。なぜか。

それは、ページ送りの組版では、外側のサイズが固定されているからです。

通常のウェブサイトなら、外側のサイズは「スクロール」という組版に逃げることで、いくらでも拡張できます。

しかしページ送りの組版においては、外側のサイズは絶対です。

つまり内側のコンテンツは、外側に固定されたサイズを、何があってもはみ出さないように配置する必要があります。

そういう「外に余剰サイズを逃すことができない」状況下で、ボーダーの外側に余白を表現したい場合はどうするのか。

答えは簡単。コンテントサイズを削るしかありません。

だからnehan.jsのbox-sizingは、基本的にmargin-boxなのです。

というか、paged mediaにおいては、そうならざるを得ないような気がします。

デザイナーにとっては Safari > Chrome？

Safari V.S. Chrome - via Designer News

デザイナー的にはSafari > Chromeみたいな議論になってて興味深かったです。

理由は画像編集ソフトが出力する「カラープロファイル」とやらを、数あるブラウザの中でSafariだけが正しく反映してくれるから、なんだとか。

で、違いを確認するために用意された画像がこれで、どっちが本当の「青」を出力しているか？ ということらしいけど、なるほど確かに違うものだなあ、と。

どちらが本当の青か？

今までIEとSafariのことをGoogle Chrome Downloaderみたいに思ってましたが、こういうの見ると、全ての分野でChromeが優れているわけではないってことなんでしょうね。