box-sizing:margin-box

margin-boxとは

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

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

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

になります。

続きを読む

デザイナー的には Safari > Chrome?

Safari V.S. Chrome - via Designer News

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

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

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

どちらが本当の青か?

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

テキストファイルで入稿できるようになりました

使い方は、本文の入力フィールドに、テキストをドラッグ&ドロップするだけです。

ドラッグ&ドロップすると、テキストのエンコーディングを確認するダイアログが開きます。

f:id:convertical:20140908154540p:plain

元ファイルのエンコーディングを選択してOKを押すと、ドロップしたテキストの内容が、そのまま本文の入力フォームに展開されます。

ただしこの機能、古いブラウザでは利用できません。

投稿画面を開いて、もし本文の入力フォームの下に以下のような表示が出ていたら使えます。

f:id:convertical:20140908155147p:plain

標準の入力フォームを改良しないといけないなあと思っていたのですが、執筆は使い慣れたエディターで進めて、投稿するときはファイルを放り込む、というやり方もありだなあと思います。

500エラーの修正

縦書き文庫へのアクセスにおいて、これまで結構な頻度で500なエラー画面が表示されていたと思います。

実はこの裏側では「ECONNRESET」という通信エラーが発生していて、その原因がよくわからずこれまで四苦八苦していたわけです。

続きを読む

シリーズ単位で作品をまとめることが出来るようになりました

シリーズ単位で複数の作品をまとめることが出来るようになりました。

縦書き文庫ヘルプ:シリーズを作成する

作品一覧だけでなく、表紙や登場人物なども一緒に表示されるので、シリーズ作品のエントリーページとして最適です。

これに伴い、プロフィールページのメニューに「シリーズ」が追加されました。

f:id:convertical:20140831205724p:plain

またシリーズに所属する作品は、作品タイトルのヘッダ部分で、シリーズへのリンクが貼られます。

これまでシリーズ物の閲覧性が悪かったわけですが、これでかなり改善されたのではないでしょうか。

サムネールが画面に収まらない場合について

埋め込みサムネールを使う人が、モバイルとの兼用をどうするのかっていうのが課題だったわけですが。

今まではサイズの部分にレスポンシブな感じでパーセントを指定することをおすすめしてきたわけですが、よくよく考えたらもっと簡単な解決策がありました。

それは「画面に収まらない時はリンク(+表紙)を代わりに表示する」というものです。

小さい画面でサムネールを出しても仕方ないですし…

今後は例えばサムネール(800x600)をiphoneなどで閲覧した場合、サムネール部分が解像度に収まらないので、タイトルリンク(と、設定されていれば表紙)に置き換わって表示されます。

ただし、2014年8月25日以前のサムネールは、タイトルと表紙ではなく、URLのリンク(http://...みたいなリンク)として表示されてしまいます。

これが嫌な人は、新しいコードを取得して貼りつけ直してください。

backbone.touch.jsでモバイルデバイスの「クリック」を高速にする

クリックが遅い?

おそらく世間的には常識的な内容なんでしょうが、モバイル用フロントエンドの初学者には新鮮なことだったので書き残しておきます。

続きを読む