7日目 割烹芸人の調査
開発ステップ1 調査
7日目
開発の前に行うのが調査。
既存技術の調査だったり、作ろうとしているものの位置付けを把握するために行います。
正直、作ろうとしているものがすでにあることもざらなので調査をしておかないといけません。
ということで作る前にエディター業界について調べてみよう。
まず使う場所ですね。大まかに分けて2つ。
■オフラインで使う
インストールして使うソフトウェア、アプリが該当。
■オンラインで使う
Web上で使うアプリケーション。今回作るもの。
性能を高めたいのであればインストールして使うタイプの方が色々とできるのですけど、そっち方面のスキルがないのでオフラインエディターは作りません。
Webサイトにアクセスして使うオンラインエディター形式で作ります。
同じオンラインエディターというくくりでもHTMLを作成する形式はいくつかあります。
■プレーン(ベタ打ち)
現状の小説家になろうの活動報告の形式。
入力補助も何もない、単純にHTMLタグを打ち込む必要がある。
装飾はインラインに入れ込む必要あり。
プレビューしないとどんな出力になるかわからない。
ただ、自由に書けるのでカスタマイズは容易。玄人向け。
■独自タグ打ち
-マークダウン記法
HTMLに関連付けられた独自のタグを使うとサーバー側でHTMLに変換してくれる。
純粋なHTMLを入力させたくない場合はよく使われる。
技術系のブログサービスだとマークダウン記法といわれる形式が標準化されつつある。
参考：StackEdit
でも小説投稿サイトだとマークダウンはあまり見かけない。（Scraivはマークダウン使ってる。まぁ開発者が技術系だからかな）
-完全独自タグ
小説投稿サイトにおいてはそれぞれ独自タグを使うことが多い、でも小説本文に使っているルビは大体共通している。（多分小説家になろう準拠？ どこが始めかは知らない）
今だとハーメルンが独自タグいっぱい使えるかも。
独自タグは、一度サーバー側で変換処理する（Javascriptで処理する場合もある）必要があるので、プレビューしないとどんな出力になるかわからない。でも記法的にプレーンよりはわかりやすい。
なおリアルタイムプレビューを実装しているところもある（ハーメルンとかね）
デメリットはサービス側が設定したタグを覚える必要があり（共通化されていないのもしばしば）、習得に若干時間がかかる。
ただ覚えたらすいすいかけるので書きやすい。中級者～上級者向け。
■WYSIWYG：What You See Is What You Get（見たままが得られる）
ディスプレイに入力したものが出力と同じ格好で見える。
WordやWordpressなんかをイメージしてもらうとわかりやすい。リッチテキスト形式。
ヘッダにアイコンがいっぱいあってそれを選んで装飾していく感じ。
書いたものと出力画面が一致するので彩りやすい。
ポチポチボタンを押していくので初心者でも扱いやすい。タグを書かなくていいので。
ブログサービスでよく使われてる。小説投稿サイトではあんまり取り入れられてない（小説投稿サイトだと占いツクールやGALLERIAはこれを採用している）
ソースコードを直接編集できるモードも用意されているので、上級者でもいじりやすい。
ただ、自動でタグが挿入されるのでどんな装飾を適用しているのかが分かりにくいのが欠点。なれないと、出力されたソースコードを見てびっくりする。
■ブロックスタイル
WYSIWYGの一種で、ソースコードがぐちゃぐちゃになるという問題を解決するために作られた。最新のWordpressのGutenbergがそれに該当しており、今後のWYSIWYG主流になるのではと思われる。
それぞれのコンテンツを独立したブロックで管理する。保存時の出力はクリーンなJSONデータとして取得することができるのでわかりやすい。
小説投稿サイトだとnoteのエディターがこれに該当。
色々なエディター形式がありますね。
うーん、どれがいいかなぁと悩みます。
とりあえず今後はやりそうなWYSIWYGのブロックスタイルでやっていこうかなと思います。
スマホをメインに考えるとタグ打つの面倒だしポチポチできて、出力がそのまま出るほうがいいでしょう。
コードがわけわかめにならないようにブロックごとに管理できた方が拡張性（LINE形式、Twitter形式を考えるとブロック単位で管理するのがよさそう）がありそうなのでそれを採用してみます。
ということで方針も決まったので頑張るぞい。
割烹エディター予定地にそれぞれの画面を用意したので、参考にどうぞ。
https://k-editor.com/
※CSS設定していないからスマホは超見にくい！
※実際に作るときにがんばるんでゆるしてヒヤシンス～。
