マガジンのカバー画像

貸し本棚開発記

8
貸し本棚の開発記録です。
運営しているクリエイター

記事一覧

固定された記事
貸し本棚のご紹介

貸し本棚のご紹介

こんにちは、加藤です。蜘蛛の糸をよじ登った大盗賊カンダタはどうすれば救われたのか考える毎日です。

貸し本棚の開発記を書いていこうと思っていますが、その前に貸し本棚の簡単な紹介をしておきたいです。

小説保管サービス貸し本棚は小説投稿サイトの体を成した小説保管サービスです。投稿サイトとほとんど変わりませんが、大勢に読んでもらうための楽天のようなモール系ではなく、個人スペースを持つことができるレンタ

もっとみる
背景画像をフェード切り替えする

背景画像をフェード切り替えする

貸し本棚で背景画像の設定ができるようになりました。

がっつり背景画像をタイリングするものではなく、控えめにcoverするスタイルですが、ポータルだけでなく、本棚、小説、エピソードそれぞれに決まった枚数まで背景画像を設定することができます。小説やエピソードの背景を設定して、文字打ちすることで、ビジュアルノベルのような雰囲気を楽しむこともできます。

この記事は以下のことに役立つかもしれません。

もっとみる
バンドルサイズを減らしてみた

バンドルサイズを減らしてみた

貸し本棚のスタート時はとても小さなサービスだったので全く気にしていなかった問題ですが、時間が経つにつれてみるみるバンドルサイズが肥大化してきました。
地味な作業ですが、その削減について書いておきます。

バンドル(bundle)とはwebpackやviteのようなバンドルツールを使うと、アプリケーションで使用するjavascriptファイルの依存関係を解決して事前読み込みし、単一のjavascri

もっとみる
Editor.jsでリンク埋め込み

Editor.jsでリンク埋め込み

リリースしたばかりの機能です。記事エディタに実装されていますが、それ以外のノート等でも動きます。

貸し本棚の記事、ノートエディタはEditor.jsを採用しています。このブロックエディタはプラグインで駆動するエディタで、様々なプラグインが公式、非公式問わず用意されています。

ブロックエディタというのは、ここnoteもそうであるように、ブロック単位でレイアウト設定を行うモダンエディタのことです。

もっとみる
貸し本棚における「文字打ち」機能の実装

貸し本棚における「文字打ち」機能の実装

こんにちは、貸し本棚開発者の加藤憲保です。魔人加藤ではありません。サイコパワーでスパゲッティコードを書きます。
貸し本棚にはいくつかの奇妙な機能がありますが、その中でも使用頻度の高い「文字打ち」機能というものがあります。ノベルゲームのように本文を一文字ずつ打ち出す機能で、その実装の概要を書きたいと思います。

貸し本棚とは貸し本棚は小説投稿サイトの体を成した、小説保管サービスです。宣伝、コミュニテ

もっとみる
小説のバージョン管理

小説のバージョン管理

こんにちは、加藤です。既存機能の紹介です。

長編小説を書いている作家様が遭遇する悩みの一つに、エピソードの大幅な改変があります。
ツンデレ路線で書いてしまった展開が気に入らず、ラブラブに書き直したら話が続かなくなってしまった!以前のツンデレに戻したい!私のツンデレ!どこへ行ったの?
という事故はよくある話です。

この問題を解決するために、多くの作家様は執筆中のファイルをコピーしてバックアップす

もっとみる
頑張らない開発と自己コードレビュー

頑張らない開発と自己コードレビュー

こんにちは、加藤です。コードを書くときは水を飲みます。コーヒーやお茶を飲むとトイレが近くなって、中断するたびに効率が落ちるのでよくありません。

貸し本棚を開発するときに最初に決めた「1時間ルール」というものがあります。壁にぶつかって1時間悩み続けて光明が見えなかったら放棄するという規定です。

あのときもっと頑張れば良かった……こと開発に関して、このような後悔を抱いたことはありません。むしろ逆に

もっとみる
横断検索と置換履歴

横断検索と置換履歴

貸し本棚は編集中の小説に対して、全エピソードを対象に横断検索を行うことができます。検索結果を元に、一括で置換することができたり、指定の検索結果の元にジャンプすることができます。

横断検索検索結果は一覧化され、リストをクリックすると指定箇所にジャンプすることができます。単なるテキスト検索なので軽量です。

結果リスト

この検索機能について特筆できるものはありませんが、結果本文の抽出はもう少し改善

もっとみる
入力に応じて伸びていくテキストエリア

入力に応じて伸びていくテキストエリア

テキストエリア(textarea)はそのサイズを超えるテキストを入力するとスクロールバーが現れ、全体を表示してくれません。テキストを入力するとその文字数に応じて勝手に縦に伸縮するtextareaが欲しいというケースは多く、サンプルも多数ありますが、貸し本棚で実装している方法を単純化して説明してみたいと思います。理屈はめちゃくちゃ単純です。

ダミーテキストで全体を拡張する大枠のdivを用意してre

もっとみる