anti scroll

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

投稿画面からプレビューできるボタンを復活させました

やはりプレビューが使えないと色々と不便なので、プレビューボタンを復活させました。

投稿ボタンの下に「プレビュー」ってボタンがありますので、使ってみてください。

f:id:convertical:20190209221753p:plain
プレビューボタン

プレビューを押すと、

f:id:convertical:20190209221836p:plain
プレビュー結果

こんな感じで、簡易ビューアーが表示されます。

プレビューボタンが表示されない方は、リロードするか、それでも駄目ならタブを閉じてから開き直してみてください。

縦書き文庫をリニューアルしました

縦書き文庫をリニューアルしました。

新しくなったところ

小説投稿画面の機能がスマホでも全て使えるように

これまではスマホの投稿画面ではルビや太字ぐらいしか選べなかったのですが、すべてのボタンがPCの投稿画面と同様に使えるようになりました。

PCだとこんなふうで、

f:id:convertical:20190207121350p:plain
PCの投稿画面

スマホとかだとこういう感じです。

f:id:convertical:20190207121425p:plain
スマホの投稿画面

しおりが無制限に挟めるように

これまでは10個までの制限があったのですが、いくらでも挟めるようになりました。

以下は、しおりを入れるボタン

f:id:convertical:20190207121647p:plain
しおりを挟む

以下はしおりを開くボタン

f:id:convertical:20190207121712p:plain
しおりを開く

しおりを開くと、しおりの一覧が出るので選択します。

f:id:convertical:20190207121748p:plain
しおりの一覧

ちなみに、しおりの数に制限はありませんが、一つの作品に大して10個以上の栞を挟んだ場合、直近の10件までが表示されます。

マテリアルデザインの採用

スマホ等のタッチで操作する端末に親和性が高い(とされている)マテリアルデザインを採用しました。

色々な操作がアニメーションするので、操作がより直感的になったのではないでしょうか。

シリーズ作品の並び替えがドラッグ・アンド・ドロップに対応

シリーズ作品の並び替えも、より直感的にドラッグ・アンド・ドロップで可能になりました。

f:id:convertical:20190207122216p:plain
シリーズの並び替え

ダッシュボードに読んだ、読まれたの情報を表示

ダッシュボードページを新設し、作品を読んだ、読まれたの履歴がパッと確認できるようになりました。

f:id:convertical:20190207122435p:plain
ダッシュボード

「読まれた」のタブには、自作がページ送りされてポイントが入った履歴が出ます。

「読んだ」のタブには、自分が他者の作品を読んで得たカルマの履歴が出ます。

廃止された機能について

埋め込み作品の廃止

利用者があまりいないのと、サーバーへの負担を考慮して廃止となりました。

一部の古いコードは動くかもしれませんが、動作は保証されません。

キャラクターとファンのタブ(プロフィールページ)を廃止

スマホの横幅に足りないというのが主な理由なのですが「ファン」についてはPC限定で復活するかもしれません。

表紙画像の投稿機能を廃止

廃止したのは、表紙の有無が作品のクリック率にあんまり寄与しない(ように見える)ほか、著作権の確認なども大変だったからです。

賛否両論あるかもしれませんが、表紙画像をなくすことで、サイトの読み込みも速くなるので、自分としては良かったかなあと思っています。

開発の振り返り

去年の年末にPCがぶっ壊れてしまったのですが、奇跡的にデータが残ったまま修理が完了したので、そのまま最後まで開発することができました。

自分にとっては今回が人生初Angular(とNgrx)だったのですが、すごく開発しやすかったです。

Angular+Ngrxでは、状態をObservableで閉じることができるので、論理的に矛盾した状態が作られにくい、というところが素晴らしいと思いました。

対象年齢を設定できるようになりました

投稿画面に「対象年齢」という設定欄を新設しました。

f:id:convertical:20180126083935p:plain

ジャンルとしてはホラーだけど、内容はR18みたいなこともあるからです。

ちなみにジャンルが「官能・BL小説」の場合は、自動で「成人向け」という設定で投稿されます。

トップページにて過去のお気に入り履歴に基づいた「お勧め作品」が表示されるようになりました

トップページにて、過去のお気に入り履歴に基づいた「お勧め作品」が表示されるようになりました(ログイン時)。

新しい作品にも出会いやすくなるのではないでしょうか。

これを機に、お気に入り機能を積極的に使うきっかけになってくれたらなあ、と思います。

(参考) おすすめ作品について

管理ページから埋め込みコードが取得できるようになりました

管理ページから埋め込みコードが取得できるようになりました。

以下の「埋め込みコード」というリンクから取得できます。

f:id:convertical:20170917162725p:plain

クリックするとコードが表示されますので、コピペして使ってください。

f:id:convertical:20170917162735p:plain

縦書き文庫のビューアーの外部サイトへの埋め込み機能を再開しました

問い合わせが多かったからなのですが…

どうせ新しく作り直すなら!ということで、埋め込みビューアーから表示設定の変更などもできるようにしました。

あとレスポンシブ対応なので、ブラウザのサイズを変えても、それに追従してビューアーのサイズが変わります。

サンプル

実際に貼り付けると、こうなります。スクリーンの左右のクリック(タッチ)でもページ送りすることができます。

使い方

ビューアーの右メニューにある「作品情報」のエリアに「埋め込みコード」という欄があるので、中のコードをコピーして、ブログやホームページなどに貼り付けてください。

カスタマイズ

初期設定を変えたい場合は、縦書き文庫のヘルプを参考に、埋め込みコードの修正をしてください。

注意

埋め込みビューアーでは「脚注機能」や「台詞記法」などは表示できません。

追記

2018年に、再びこの機能は廃止されました。

既に埋め込みを利用している作品についても、現状は表示されていますが、いずれ廃止される予定です。

縦書き文庫のビューアーがテキストファイルのドラッグ&ドロップに対応しました

縦書き文庫のビューアーでドラッグ&ドロップしたテキストファイルが読めるようになりました。

適当な作品を開いて、小説本文の領域にテキストファイルをドロップすると、原稿フォーマットや文字コードを聞かれるので、適切なものを選択してください。

f:id:convertical:20170405092104p:plain

「決定」を押すと、テキストの内容が縦書き文庫のビューアーで表示されます。

nehan.jsのfunctional styleでタグの内容に動的な制限をつける

縦書き文庫では比較的自由にHTMLタグを使用できるのですが、たまにエディターの文字サイズ変更ボタンをテキスト全体に反映させてしまう人がいます。

例えばこういう感じです。

<span class='larger'>
(作品全体のテキスト)
</span>

これの何が困るのかというと、ユーザーが「表示設定」で変更できるはずのフォントサイズが、内側のspanに邪魔されて変更できなくなくなってしまうことです。

縦書き文庫では、ユーザーの表示環境やパソコンの解像度はそれぞれ異なることを踏まえ、それぞれの環境にあわせてビューアーのサイズや文字サイズが変わるようになっています。

その上で、各種サイズは各自が自分好みに設定できるようにしているので、その特徴を破壊するようなマークアップは、あまり望ましくありません。

よって注意事項でも、そういうマークアップを禁止行為であると明記しているのですが、こういう規則って読む人が少ないので、あんまり周知されていないというのが実情です。

というわけで、少し強引なのですがnehan.jsfunctional styleを使って、良くない装飾タグの使い方には、動的な警告を出すようにしてみました。

例えば、部分的なテキストの装飾に使われるspanタグならcontentを以下のように設定し、制限字数を超えていたらエラーメッセージに置き換えます。

Nehan.setStyle("span", {
  content:function(ctx){
    var limit = 100; // 制限字数
    var cont = ctx.getMarkup().getContent();
    return (cont.length > limit)? "error:too long!!" : cont;
  }
});  

色々なタグにまとめて長さ制限を付けたいときは、こんな感じでしょうか。

// 動的にcontent制限するstyle valueを作成する関数
var content_with_limit = function(limit){
  return function(ctx){
     var cont = ctx.getMarkup().getContent();
     return (cont.length > limit)? "error:too long!!" : cont;
  };
};

// 長さ制限を付けるタグ一覧
var LIMIT_LENGTH = {
  b:100,
  em:30,
  span:50,
  strong:100
};

Object.keys(LIMIT_LENGTH).forEach(function(tag_name){
  var limit = LIMIT_LENGTH[tag_name];
  
  Nehan.setStyles(tag_name, {
    content:content_with_limit(limit)
  });
});

もちろん細切れにspanタグを区切られたら効き目は無いわけですが…