Pixiv小説公式エディタへの不満
こんにちは。Yutoinuです。
趣味でPixiv小説を使い、二次創作怪文書を投稿しているのですが、Pixivの小説投稿画面って使いにくくないですか？
Pixivの小説では、markdownで”#”で表すような章立てであったり、アスタリスク2個で表すような太字の機能がPixiv小説記法として入力することができます。
実際の記法については公式FAQを参照いただきたいのですが、タグによって、太字や改ページが挿入できます。
例としては、[b: 太字]と記入すると、太字になります
実際の小説投稿画面がこちらです。
適当に何個かタグをまとめて使ってる怪文書の画面を抜き出してきました。
ボタンから、自動でタグ挿入してくれる機能もあって便利なのですが、タグの強調表示がなく、編集がし辛いです。
また、自動保存機能もなく、下書きのバージョニング管理などはできず、セッション切れで下書きが消えてしまうといった痛い失敗も経験してるので、個人的にはここはプレビューと最終確認の場にしています。
ということで、エディタに不満があるなら作ればいいじゃんってことで、VSCode用のPixiv小説記法に対応する拡張機能を作ってみました。
Pixivには小説として解説記事を書いたのですが、創作者仲間からこの記事はPixivじゃなくてQiita向きだろとツッコミが入ったので、Qiitaに上げることにしました。
作ってみた
大方針として、以下の3段階に分けて開発することにしました。
- タグの強調表示
- タグの予測入力
- プレビュー機能
が、VSCode拡張機能なんて作ったことのないエンジニアには、3まで実装する元気がなく、2で力尽きました。
色々Qiitaの先駆者やら生成AIやらに力を借りることでなんとか実装できました。
ここで公開してるよ
まずは何かしらで空の拡張機能プロジェクトを作成し、そこから色々足していきました。
代表的なものは以下のあたりでしょうか。
まず、エディタはPixivNovelからpnovelとかいう拡張子をPixiv小説型式の言語として認識てもらうことにしました。
まずは、.pnovelファイルをPixiv拡張として認識するようにpackage.jsonを改造します。
次に、タグを関数として予測入力してくれるように、extentions.jsに羅列しました。
また、カッコは作ったら自動で閉じて欲しいので、ここのpnovel言語の仕様として、小説やタグで使うカッコ類も記入しておきました。
プログラミング言語と違い、小説で使う鉤括弧も自動閉じするのが個人的こだわりポイント
{
"autoClosingPairs": [
["[", "]"],
["(",")"],
["（","）"],
["「","」"],
["『","』"]
],
}
こんなところでしょうか。
機能紹介
実際、この拡張機能を使って小説を書くと、こんな感じに強調表示してくれるようになります。
.pnovelの拡張子に対して、自動的に有効になります。
[]が連続する時の処理が甘いのはご愛嬌ってことで、正規表現の修正プルリク、お待ちしております。
また、[]を入れると予測入力もしてくれます。
他、セリフ等の「」を入力すると、自動で閉じカッコも入れてくれるので、字書きさんにはありがたいのではないかと。
使い方
VSCodeの一般公開するほどの品質はないので、野良のVSIXとして配布しております。
GitHubリポジトリのリリースページから、リリースバイナリを配布していますのでそちらをご利用いただくのがおすすめです。
VSIXで拡張機能ダウンロード
VSCodeさえあれば動くので、こちらがおすすめです。
- VSIXをリリースバイナリからダウンロードする
- 拡張機能を拡張機能画面からインストールする
拡張機能に行き、…のボタンでVSIXからのインストールでインストールできます
ローカルで環境構築
俺もこの拡張機能を改良したい！って人向けです。
あらかじめ、GitとVScodeとNodeJSはインストールしておいてください。
まず最初に、Gitから今回のプロジェクトをクローンしておきます。
最初にvsceをインストールしておきましょう。
プロジェクトのフォルダで以下コマンドを入力します。
npm -g install vsce
-gは、自分の環境で必要でしたが、何かしらNodeJSの設定ミスったかもです。
VSCodeのデバッグモードで、拡張機能のテスト動作ができるので動作確認してください。
問題なければ以下コマンドで、VSCode拡張ファイルが完成します。
インストールしましょう。
vsce package
使ってみての感想や改善リクエスト、プルリク等お待ちしております。