0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

『HAKOGAKI』プロットと本文を同時に書けるアプリを作りました。

Last updated at Posted at 2021-10-09

はじめに

小説や脚本を書くときプロットを作る人は多いと思いますが、以下のような悩みはないでしょうか?

  • プロットと本文を同時見たい。。。
  • プロットと本文を1つのファイルで管理したい。。。
  • 本文書いてたらプロットも直したくなる。。。

自分はこの悩みを感じていました。
ツールを探してみたのですが、機能が違ったり、リッチすぎたり、ぴったりはまるものが見つかりませんでした。
そこで、HAKOGAKIというアプリを作りました!

HAKOGAKI
※ 現在はPCでの利用を想定していて、スマホだと見にくいと思います

サービス概要

HAKOGAKIには

  • シナリオモード
  • プロットモード
    の2つのモードがあります。

シナリオモード

image.png

主に本文を書くためのモードです。
段落ごとに分かれていて、段落内には

  • 段落タイトル
  • 本文
  • Todo
  • メモ
    があります。

本文を書きながら、Todoを完了させて、気になったところをメモに残して・・・みたいな使い方ができます。段落やTodoは好きなだけ追加できますし、本文やメモのスペースは伸縮できます。

上の「シナリオ」というボタンを押すとプロットモードに切り替わります。

プロットモード

image.png

全体構成を作るためのモードです。

データはシナリオモードと同期していますので、段落構成、段落タイトル、Todo、メモは同じものが表示されますし、編集したらシナリオモードに反映されます。

プロットモードは

  • 全体メモ
  • 段落
    の2つが表示されています。
    シナリオモードと違い段落には段落タイトル、Todo、メモだけ表示していて一覧性を高めています。

こだわったポイント

  • データの保存方法
  • 進捗機能
  • シンプルさ

データの保存方法

3種類のデータ保存があります。

  1. プロジェクトとして保存(ファイル)
  2. 作品として保存(ファイル)
  3. ブラウザに自動保存

1. プロジェクトとして保存(ファイル)

image.png
右上のフロッピーアイコンから、作品タイトル、段落を全部そのままファイルにしてダウンロードできます。保存したファイルは左のアップロードアイコンから読み込めます。

2. 作品として保存(ファイル)

作品タイトル、段落タイトル、本文をまとめてファイルにしてダウンロードします。作品が完成したときに使ってください。

3. ブラウザに自動保存

1つ目の「プロジェクトとして保存」と同じ情報をブラウザに自動しています。
次にHAKOGAKIを使うとき、前回の最後の状態がロードされます。

進捗機能

段落とTodoには完了のチェックボックスがあります。

image.png

そして、プロジェクトとして保存したときに、書き始めたときからの進捗をお知らせします。
進捗として計測しているのは、完了させた段落、Todo、書いた文字数です。
小さな達成感を感じられ、書き続けるモチベーションになります。

image.png

シンプルさ

全体のUIをシンプルにすることを心がけています。
今まで説明を書いてきましたが、ほとんど直感的に扱えると思います。

技術的なお話

現在はクライアントサイドで完結しているアプリで非常にシンプルです。
個人的には、React, Next.jsでの開発が初めてで戸惑うところもありましたが、特別なことはあまりないかなと思います。アプリの公開はVercelを利用しています。

ざっと主要な技術を上げると、以下の通りです。

  • React
  • Next.js
  • Redux Toolkit
  • Typescript
  • MUI
  • styled-components
  • Google Analytics
  • Jest
  • sinon
  • Vercel

開発期間は、一ヶ月程度かなと思います。
(間が空いているので正確ではないですが・・・)

おわりに

まだまだスタートラインに立ったアプリです。今後、いろいろな機能を作っていきたいと考えています。現在、自分の頭にあるものだと

  • 作品出力時のカスタマイズ
  • undo/redo機能
  • スマホ対応
  • サーバへのデータ保存
  • 履歴保存
    とか便利かなあと考えています。

たくさん使って、たくさんフィードバックを頂けると嬉しいです!
(右上アイコンの「ヘルプ」 -> 「お問い合わせ」からどうぞ)

最後までご覧いただき、ありがとうございました!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?