読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

RxJSとvirtual-domで、拡張可能なreactiveアプリケーションを作るフレームワーク - inga

inga(因果)は、軽量で拡張可能なリアクティブ・アダプターです。RxJSとvirtual-domを使っています。 github.com よくあるTodo-MVCは100行ぐらいです。 inga/todo-mvc.js 特徴 軽量なこと。全ソース合わせても100行ちょっとしかないです。 プラグインで拡張…

管理画面がスマホにも対応しました

管理画面リニューアルのお知らせです。 スマホとPCでUIを統一し、どちらからも同じUIで使用できるようになりました。 エントリーの一覧には、カードUIを使用しています。 PCユーザーからすると、元のテーブルレイアウトのほうが一覧性が高いかもしれませんが…

nehan.jsのセレクターマッチング処理を高速化

nehan.jsのセレクタのマッチング処理を高速化しました。 先日サポートした行末揃えは、有効にすると20%ほど遅くなりましたが、今回の修正によって15%ほど速くできたので、少し戻すことができました。 前々から、機会があったらやっておこうと思っていた処理…

text-align:justify に対応

nehan.jsが、text-align:justifyに対応しました。 縦書き文庫では既に、ビューアーのbodyに対してjustifyが設定されています。 これを設定すると、例えば行末に赤い部分のような微妙なスペースがあっても… 揃えた後はこんな風に、行末が揃います。 あらゆる…

nehan.jsが複数ページに渡る論理的な回りこみ処理(論理フロート)の解除に対応しました。

リポジトリ上のnehan.jsで、論理的な回りこみ処理(論理フロート)の解除を実装しました。 回り込みを解除するスタイル設定ですが、通常のcssでは、 .clear-left{ clear:left } .clear-right{ clear:right } .clear-both{ clear:both } などと書くところです…

縦書き横書きの自動リサイズに対応したページ送りのビューアー「responsivook」

縦書き横書きの自動リサイズに対応したページ送りのビューアーを公開しました。 github.com ブログやホームページに簡単に埋め込むことができます(たぶん)。 デモ デモページを用意しました。 Responsivook demo 上のページで、ウインドウをリサイズしてみ…

Chrome Extensionのmanifest.json内version値を更新するスクリプト

手作業でやるのが面倒になってきたので書きました。 事前にnpm install minimistが必要です。 // update-manifest-version.js var fs = require("fs"); var args = require("minimist")(process.argv.slice(2)); var update_version = function(version, tar…

textNodeの出力オプションを追加

2chからのアクセスに、珍しくリファラが付いてたので、元スレを覗いてみたのですが、縦書き文庫に投稿された作品へのリンクに「踏まないほうがいいよね?」ってレスが付いていて、地味に傷ついたのでした。 capturePageTextオプション それはさておき、表題…

段落の先頭に自動で空白を入れる

サッカーのページを見ていたら、サイドメニューあった「ストレスと友達になる方法」というリンクが「スアレスと友達になる方法」に見えてしまいました。 ストレスともスアレスとも友達になれそうにない自分ですが、せめて段落の先頭に自動で空白を入れるぐら…

スタイル編集機能で、プログラマブルな小説投稿

新たにスタイル編集ページを追加しました。 詳しくは縦書き文庫のヘルプから「スタイル編集」のページを確認して下さい。 注意事項 スタイルはcssではなく、JSON形式で宣言します。 { ".foo":{ margin:{ after:"1em" } }, "span.fuga":{ "font-size":"2em" /…

camel caseでもcssプロパティが設定できるようになりました

nehan.js 5.1.1(まだ開発版ですが)から、cssのプロパティをcamel caseでも指定できるようになりました。 どういうことかというと、ver5.1.0以前では、例えばfont-sizeを設定するとき、 Nehan.setStyle({"font-size":"1.6em"}); // chain-case のようにしか…

クラス名やID名が短く書けるようになりました

これまで縦書き文庫でマークアップするとき、特定の表示を利用する場合、クラス名にnehan-という接頭辞を付けなければならなかったのですが、これが不要になりました。 例えば行末寄せは、これまでは <p class="nehan-ta-end">行末に寄せる</p> だったのですが、今後は <p class="ta-end">行末に寄せる</p> とマ…

各ユーザーの作品を一覧できるアーカイブページを用意しました

ユーザーの作品を手早く一覧できるページを用意しました。 例えば、図書館アカウントのアーカイブページ スマホからでも閲覧できるので、自作の一覧を手っ取り早く紹介するページとして便利かもしれません。 アーカイブページのURLは、以下のとおりです。末…

マークダウン記法をサポートしました

テキストをマークダウン記法で記述できるようになりました。 「その他の項目」の「入力方法」から設定できます。 でも実は「あんまり使われないかもしれないなあ」と思っています。 というのも、マークダウンで改行するには、空行をひとつ開ける必要があるか…

ゼノブレイドをクリア

松方弘樹さんが6時間半の格闘の末に361キロのマグロを釣り上げた今日、自分はゼノブレイドを100時間程度の格闘の末にレベル87でクリアしたのでした。 Newニンテンドー3DS専用 ゼノブレイド 【購入特典】Xenoblade Special Sound Track 付出版社/メーカー: 任…

Rx(Reactive Extensions)とVirtual DOMで作るリアクティブなUI、およびMVARアーキテクチャについて

元ネタはReactive MVC and the Virtual DOMなのですが、MVIという言葉がしっくりこなかったので、自分なりに消化した結果、こういう枠組みになりました、という話しです。 MVARアーキテクチャ概要 まず頭文字の意味についてですが、 M = Model V = View A = …

リアルタイム・プレビューに対応した新しい投稿フォームをリリースしました

久しぶりの機能アップデートですが、リアルタイム・プレビューに対応した新しい投稿フォームをリリースしました。 投稿フォームの上部にある、以下の案内リンクからお試しいただけます。 まだ試験段階で古いブラウザやPCだとどうなるのかわかりませんが、ご…

Matt-Esch/virtual-dom覚え書き

こちらの記事で知ったのですが、Reactで言うところのpropsしかないvirtual dom実装とのこと。 github.com まさに探していたものなので、さっそく試してみたのですが、以下は覚え書きです。 escapeさせたくない中身はattributesにinnerHTMLを設定 inlineなタ…

nehan.jsのデモページをReact/Fluxで作ってみた

必然性は全くなかったのですが、Fluxを試してみたかったので作ってみました。 http://tb.antiscroll.com/static/nehan-demo/ 使ってみた感想 あんまり感触は良くないかも… ただ今はなんとなく全体像を掴んだかもっていう段階なので、もっと複雑なUIを作ると…

2005年にアジア〜中東〜北アフリカ〜ヨーロッパを旅行したロバ中山さんの旅行記がすごい

2005年、つまり今からちょうど10年ぐらい前、アジア〜中東〜アフリカ〜ヨーロッパを旅行したロバ中山さんの旅行記がすごく面白いです。*1 http://www.sakaguti.org/honmon%20page/top%20page/top%20page.htm 今は大変な状況になってしまったシリアやイエメン…

Nehan Readerアップデート。サイトごとに変換対象を設定できるようになりました

Nehan Reader ver0.9.63から、サイトごとに変換対象を設定できるようになりました。 Nehan Readerchrome.google.com 設定の仕方 「涅」のボタンを右クリック→「オプション」と進みます。 「table of selectors to main article」の欄に [siteのURL], [select…

css framework上の全てのセレクタに特定のprefixを付ける

chrome拡張とかでも、普段使っているcssフレームワークが使いたくなることがあります。 しかし大抵のcssフレームワークは、グローバルな名前空間でスタイルを宣言しています。そのまま導入すると、拡張機能のCSSが読み込まれてしまった結果、訪問したサイト…

nehan.jsで拡張タグを作る

拡張タグを作るサンプルとして、次のようなタグを作ってみます。 <circular> <div>1時ですよ!</div> <div>2時ですよ!</div> (省略) <div>11時ですよ!</div> <div>12時ですよ!</div> </circular> で、例えばこのタグを表示した時刻が1時だったら、次のようになるものとします。 動作デモ 実際に動作させてみた結果は、こん…

nehan.js 5.1.0系

まだ安定していないのでリリースまではしてないのですが、自分の中で懸案だった幾つかのトラブルが解消したっぽいので、nehan.jsのバージョンを5.0.5から、5.1.0へと上げました。 tategakibunko/nehan.jsgithub.com ちなみに安定していなくても、縦書き文庫…

Prepared Statementを少し使いやすくするeps(Extended Prepared Statement)

通常のPrepared Statementを少し使いやすくする処理系 eps を作りました。 epsはExtended Prepared Statementの略です。 tategakibunko/epsgithub.com 簡単に言うと、こんな感じでPrepared Statementを記述したくて作ったものです。 prepare foo(age:int, na…

Kefir.jsを使ってnehan.jsなビューアーをReactiveに作る

Kefir.jsを使ったのは、ドキュメントがわかりやすくて綺麗だったからです。 ビューアーの要件 NEXTクリックでページを進める。 PREVクリックでページを戻す。 $("#page-count")に、現在の総ページ数を表示する(非同期で増える)。 $("#page-no")に、現在の…

サイズの指定されていない画像タグにサイズを付けるjQueryプラグイン

既にあるのかもしれませんが、だからといってどうやって検索したらいいかわからないものは自分で作るしかない…ということで表題のものを作りました。 tategakibunko/jquery.image-size-assign tategakibunko/jquery.image-size-assign · GitHub 概要 どうい…

Nehan Reader 0.9.20をリリース

どんなページも、縦書きや横書きのページ送りで読めてしまうGoogle Chrome拡張「NehanReader」のversion0.9.20をリリースしました。 Nehan Readerchrome.google.com 実際に青空文庫の作品を表示すると、こんな感じに。 Yahoo News!とかだと、こんな感じに。 …

「貼るだけ」のアクセス解析?

今回アクセス解析を実装するにあたって疑問に思ったのですが、よくある「貼るだけでOK」なアクセス解析って、サイト所有者の確認ステップがないっぽいのがありますが、これって大丈夫なんでしょうか。 例えば誰かが勝手に他人のサイトを先に登録したら、後か…

「Novelytics」の紹介 〜なぜ小説専用のアクセス解析が必要なのか〜

小説専用のアクセス解析 Novelyticsという小説専用のアクセス解析サービスを作りました。 なぜこんなものを作ったのかについて書きます。 アクセスをベースにしたログの限界 アクセス数というのは、言い方を変えれば単なるクリック数です。 当たり前ですが、…

ドラッグ・アンド・ドロップで、テキストを縦書きページ送りで表示するサイト「Nehan Text Reader」

HTMLファイルやテキストファイルをドラッグ・アンド・ドロップすると、縦書きページ送りで表示してくれるサイト「Nehan Text Reader」を公開しました。 tb.antiscroll.com 画面上(どこでもいい)にテキストファイルをドラッグ・アンド・ドロップすると、ビ…

単純なマッチで複数回replaceするのと、文字クラスを使って一回replaceするのでは、どちらが速いか

qiitaでこんな記事がありました。 innerText(textContent)/innerHTMLを使わずJavaScriptでHTMLエスケープ - Qiita で、思い出したのですが「文字クラスでreplaceを一度で済ますより、単純なマッチを直列で繰り返したほうが速い」って話しをどこかで聞いた覚…

GADTというものを知った

最近OCamlをようやくversion4系列にアップデートしたのですが。 その際にGADTとかいう言葉が気になったので調べていたら、ちょうどわかりやすいエントリーが。 Detecting use-cases for GADTs in OCaml 上のエントリによると、どうやらGADTというのは「代数…

nanocのほうがjekyllより良いかも

nanocとは nanocはRuby製の静的サイトジェネレーターです。 静的サイトジェネレーターとは、固定的な内容のウェブサイトを作るのに使われるサイトジェネレーターです。 ホームページ制作ツールのような複雑なIDEではなく、コマンドラインとエディタでサクっ…

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

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

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

ちょっとハマったのでメモ。 例えば、 <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…

box-sizing:margin-box

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

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

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

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

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

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

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

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

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

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

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

モバイル用のビューアーで表示設定の変更ができるように

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

Google Analyticsの埋め込みに対応

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

チップリンクが作成できるように

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

月別のポイント統計が確認できるように

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