Brushup! について 段落ごとにコメントできる縦書き文章の作成サービスBrushup!を作りました。 パスワードを付けることもできるので、特定の人にだけ見せる使い方も可能です。 主に編集や校正の依頼に使えるツールを想定しています。 段落へのコメントを試し…

ちょっとハマったのでメモ。 例えば、 <div id="foo" data-hoge="true"></div> とかあったとき、以下の結果はどちらもfalse $("#foo").data("hoge") == "true" // false $("#foo").data("hoge") === "true" // false 理由はdatasetにセットした"true" もしくは "false"は、boolean型として評価され…

ちょっとした小ネタですが、縦書き文庫の台詞記法はキャラクタ登録なしでも使えます。 キャラクタ名の部分に、人物の名前をそのまま書けば、キャラクタ画像じゃなくて文字列で表示されます。 なので、ちょっとした脚本は次のような感じで書けます。 [speak …

わざわざtipタグを書くのが煩わしいので、チップ用の記法を用意しました。 チップについては 縦書き文庫 | チップ記法 を参照のこと 文法 次のように記述します。 [tip タイトル:内容] 注意 tipとタイトルの間には一つ以上の半角スペースが必要です。 タイト…

台詞記法で、吹き出しの有無を選べるようになりました。 声に出す台詞はspeakを使います。 [speak taro これは声に出して言う台詞！] 心のなかの台詞はthinkを使います。 [think taro これは心のなかの台詞…] 実際に表示させるとこんな風になります。 詳細は…

おもしろそうなサービスを見つけました。 Terms of Service; Didn't Read 「みんな読んだとか言って嘘ついてるけど、あなたが同意した規約の中身って、実際はこんな風になってるんだよ」みたいなことが確認できるサービス。 各サービスの各規約ごとに、thumb…

margin-boxとは margin-boxとは、ボックスのサイズをmarginも含めて計算するボックスのことです。 つまりmarginが50pxで、widthが200pxなら、コンテントサイズは 200(width) - 50(margin-left) - 50(margin-right) = 100 になります。 ちなみにこのmargin-bo…

Safari V.S. Chrome - via Designer News デザイナー的にはSafari > Chromeみたいな議論になってて興味深かったです。 理由は画像編集ソフトが出力する「カラープロファイル」とやらを、数あるブラウザの中でSafariだけが正しく反映してくれるから、なんだと…

使い方は、本文の入力フィールドに、テキストをドラッグ＆ドロップするだけです。 ドラッグ＆ドロップすると、テキストのエンコーディングを確認するダイアログが開きます。 元ファイルのエンコーディングを選択してOKを押すと、ドロップしたテキストの内容…

シリーズ単位で複数の作品をまとめることが出来るようになりました。 縦書き文庫ヘルプ：シリーズを作成する 作品一覧だけでなく、表紙や登場人物なども一緒に表示されるので、シリーズ作品のエントリーページとして最適です。 これに伴い、プロフィールペー…

埋め込みサムネールを使う人が、モバイルとの兼用をどうするのかっていうのが課題だったわけですが。 今まではサイズの部分にレスポンシブな感じでパーセントを指定することをおすすめしてきたわけですが、よくよく考えたらもっと簡単な解決策がありました。…

クリックが遅い？ おそらく世間的には常識的な内容なんでしょうが、モバイル用フロントエンドの初学者には新鮮なことだったので書き残しておきます。 実はモバイル用のビューアーを書いていて、前から「なんかクリックが遅い？」と気になっていたのです。 ず…

モバイル用のビューアーが、表示設定の変更に対応しました。 新しいビューアーはこういう見た目になっていますが、 左上のアイコンをクリックすると、表示設定の画面になります。 縦書き、横書きの切り替え、フォントサイズの変更、明朝ゴシックの切り替えな…

Google Analyticsの埋め込みに対応しました。 アカウント管理の「プロフィール編集」から設定できます。 入力欄には、GoogleAnalyticsのプロパティID（UA-123456-89 みたいなやつのことです）を設定します。 設定すると、各小説ページヘのアクセス（自分自身…

tipというタグを使ってチップリンクが作成できるようになりました。 こんな感じで書くと… 新しい<tip title="パソコン">パーソナルコンピューターの略</tip>が欲しい。 新しい<tip title="テレビ" text-only="true">テレビジョンの略？なのか？</tip>も欲しい。 <tip title="スマホ" icon="exclamation-triangle">スマートフォンの略</tip>も欲しい。 こんなふうに表示されます。 本文にはタ…

ページ送りログに加えて、月別のポイント統計が確認できるようになりました。 各月の上位30の作品別ポイント集計を出力します。 ちなみに青空文庫アカウントで今月のポイント統計を見たら、こんな感じでした。

jingooのv1.2.5をリリースしました。 ひょんなことからjingoov1.2.4にバグ（割りとでかい）を見つけてしまい…緊急でリリースしました。 旧バージョンを使用中の方は、アップデートすることをおすすめします。 バグの詳細 具体的なバグは何かというと、オブジ…

機能縦書き文庫に「キャラクター」が登録できるようになりました。 そして登録したキャラクターを使った台詞を記述する記法として「台詞記法」を追加しました。 キャラクター登録 キャラクタを登録すると、それぞれのキャラクタにプロフィールページが作られ…

ビューアーに表示幅を広げるボタンを追加しました。 これまで表示領域は高さと文字サイズでしか変更できなかったのですが「ワイド」というボタンを押すと、表示幅が横いっぱいになります。 元に戻す時は「ノーマル」を押します。

全ページではありませんが、ビューアー以外のページも、スマホに対応したページを用意しました。 おなじみのハンバーガーボタンが左上にあるタイプです。 押すとこんな感じのメニューが出てきます。 最近googleが公開したweb starter kitっていうのがあって…

作品一覧ページに「あらすじ」というリンクが追加されました。 クリックすると、あらすじが表示されます。 画面に収まらない時は、こんな感じで下にページャーが表示されます。

nehan.jsのリポジトリにpluginsというディレクトリを追加しました。 最初に追加したプラグインは以下の５つです。 nehan.font-awesome.js 先日のエントリでも紹介しましたが、font-awesomeのアイコンを短く書けるプラグイン。 <fa name="user"> <fa name="star"> nehan.gravator.js emailを指</fa></fa>…

nehan.jsでは、組版エンジンを扱う入り口として、主にPageStreamというものを提供しています。 ただしこれは柔軟に扱える反面、はじめての利用者にとっては直感的じゃなかったかもしれませんでした。 そこで、nehan.jsのversion5.0.3からは、より扱いやすい…

jekyll-nehanというものを作りました（ デモを見る）。 Jekyllという静的サイトジェネレータのテーマです。 このテーマを使うと、nehan.jsを使った縦書き横書きのページ送りエントリが簡単に投稿できます。 スクリーンショット 見た目はこんな感じになります…

reactive programmingについての動画（語り手がハイテンション）を見つけました。 http://channel9.msdn.com/Events/Lang-NEXT/Lang-NEXT-2014/Keynote-Duality まだ前半しかみてないのですが、途中getterとsetterを「共変（covarience）」と「反変（contrav…

nehan.jsのversion5から、セレクターのエレメント名の部分が正規表現で記述できるようになっています。 サンプル 例えば、ヘッダー要素なら全てに適用したいスタイルがある時は、こんな風に書けます。 // すべてのh1〜h6 Nehan.setStyle("/h[1-6]/", { "font…

前回発表したアイコンの埋め込み特殊タグですが、こういうタグをnehan.jsでどうやって定義するのかを紹介したいと思います。 おさらいですが、先月に発表したfaタグはこんな風に宣言します。 ハートのアイコンは、<fa name="heart"> imgタグとかhrタグみたいに、閉じタグがあ</fa>…

Font Awesomeのアイコンを簡単に埋め込めるタグfaを用意しました。 name属性にアイコン名を指定します。閉じタグは不要です。 例えばこんな感じで書くと… ユーザー：<fa name="user"> スター：<fa name="star"> ハート：<fa name="heart"> ハート（赤）：<fa name="heart" style="color:red"> ローディング：<fa name="spin spinner"> 回転する歯車：<fa name="spin cog"> こんな感じに表示され</fa></fa></fa></fa></fa></fa>…

nehan readerで長文エントリーを読むときに、少し前まで正常にパースできていたページが、ある日から突然レイアウト崩れを起こしてしまったりすることがあります。 で、調べてみたら、閉じタグの省略を使ったマークアップに変更されたことが原因のようでした…

いつも思うんですけど、 CSSでセレクタのパスを書いてスタイルを設定する 同じものをjavascriptで取得してイベントを設定する って二度手間じゃないですか？ どっちもDOMノードを指定して、何かの値を設定するってことですよね。 設定するものがスタイルかイ…