小説執筆に「VisualStudioCode」を使う時に使える拡張機能・縦書き＋α

一式鍵 — Sat, 25 Dec 2021 07:29:21 +0000

以前、このような記事を書いて紹介しています。VisualStudioCodeのインストールについても書いてます。入れておいて損の無いエディタなので「そんなに専門的（ぽいの）要らないよ～」なんて方でも入れてみてください。難しいこと無いので。

この記事だけでもかなりの情報量なのですが、今回私が新しく入れて、個人的にいい感じになったものをご紹介。まず画像をみてください。

これ、「novel-writer」という拡張機能（プラグイン）なのです。

左が書いてる原稿だとして、[F1]で表示されるコマンドパレットで「Novel:縦書きプレビュー」を選ぶだけで、右の画面のようにプレビューが表示されるのです。フォントとかも設定でいじれるので（画像ではいじってませんが）、好みに合わせて色々できます。またこのプラグインはですね、「ただ縦書きができます！」というものではないのです。

小説書き目線で創られた拡張機能ですので、実に「そこ！」というところに手が届く感じの機能が沢山あります。中でも【文字数カウント】の機能が強い。現在のファイルの文字数だけじゃなくて、指定フォルダ（ワークスペース）にあるテキストファイルの文字数を自動的に合算して出してくれます。なので、エピソードごとに.txtファイルを分けて作っていても、一瞬とかからずに「全部で何文字いったか？」というのを確認可能です。具体的にはこんな感じで表示されます。

この機能自体、これだけじゃないんですが、まぁ、そこは実際見てもらえれば一発なので。

ちょっと敷居は高くなりますが、Gitと連動させることで「編集距離」を表示させることができます。改稿の進捗具合が一目瞭然になるっていう話です。新規で原稿書く場合は文字数カウントでいけますが、改稿はなかなか距離が掴みにくい……原稿構成をされる方もいると思います。私はエピソードがだいたい同じ文字数でエピソードごとに.txtわけているのでこの機能はなくていいかなって思ったりしますが、システマティックに把握したい場合はあったらとっても便利だと思います。

「小説執筆」、何を使っていますか？

というわけで、私が小説執筆時に使っていた＆今もブログやら仕事やらでフル活用しているエディタについて紹介しますよ。生涯で最も長時間触っているエディタだと思う。 Visual Studio Code ブログでも小説でもそうなんですが、私は「文章...

The post 小説執筆に「VisualStudioCode」を使う時に使える拡張機能・縦書き＋α first appeared on 文章で生きていく.

VSCodeでフローチャート（を使った人物相関図）を直感的に書く方法

一式鍵 — Sat, 17 Jul 2021 00:32:38 +0000

VSCodeだけで、あなたの物語の「設定資料集」を作れちゃいます。

VSCodeだけで、あなたの物語の「設定資料集」を作れちゃいます。

VSCodeってのは（超すごい）テキストエディタのことです。やりたいことはたいていできます。ただの「メモ帳」とはわけが違うんですね、これが。なんでもできます、まじで。

で、小説書きやってきた私は、「小説書きには最適なツールだ」と思っているソフトでもあります。なので、そんなソフトが小説書きにとってどれほど役に立つのかを日々考えている次第。

というわけで、今回は「人物相関図」をテキストエディタで作る――ための環境を作ってみましょうということです。いろんなソフトを開かなきゃならないというのはワタシ的にはかなり苦痛。なので、人物相関図だろうがなんだろうが、すべてこの「VSCode」で統合できないものかな！　と。

VSCodeでフローチャート

さて、先日よりVSCode推しの記事を書いている私ですが、今日は「フローチャート」をVSCode上で書いてみるチャレンジをしてみますよ。実はVSCodeでフローチャートを書く方法は、大きく分けて2種類あります。CUIとGUIです。さて、ここでCUI、GUIと言われて「？？？？」となった方。そう、あなた。あなたです。アナタのためにこの記事を書きました。

ちなみにCUIというのは「文字だけでなんとかする」インターフェイスで、GUIというのは「画像的な感じも使ってなんとかする」インターフェイスのことです。プログラマな感じの人ならCUIのほうが楽だと思います。そういう人はVSCode突っ込んだら「VSCode Mermaid」って検索すればいいと思うよ。うん、そういう人はこれだけでググれると思うので割愛。ちなみに個人的にはCUIなMermaidのほうが使いやすいです。

さて、世の中のほとんどの人はCUIだと敷居が高い、難しい、どうしたらいいかわからない……だと思うので、ここでは「画像的にポチポチクリックとドラッグとしてたらなんか知らんがフローチャートができていた（＝GUIを使ったケース）」っていうようになるお話をしますね。

フローチャートって何に使うねん？

はい、そういう質問、ありますね。フローチャートなんてまず自分で作らないと思います。そもそも「流れ（フロー）」ですからね。製品開発やプログラムの処理についてなどを書くのが基本用途です。一般生活ではまず使いません。フローチャートは。

が、まぁ、ほら。「登場人物の相関図」とかで矢印引いたりなんだりしません？　あれですよ。ワードとかエクセルとかパワーポイントでももちろんできます。が、やつらはダメだ。クッソ重たいし融通効かないし、ちょっと修正しようとしたら大惨事ですよ。あと、作成途中でソフトが死ぬことがありますね、奴らは。バツっと落ちたりフリーズしたり。その後のリカバリにも時間かかるし（なかなか立ち上がらないとか）。奴らにも復旧機能はあるけど、復旧機能をちゃんと使える人ならそもそもMS Office系で（仕事以外では）作図はしないと思う。Office嫌い！←仕事でもOfficeは極力回避する人

そんな中に燦然と現れたのが、この「Draw.io Integration」です。いや、前からあったけどさ。

Draw.io Integration とは

この「Draw.io Integration」こそ、「見た感じで適当になんかしてたらフローチャートができてしまった」を実体験できるプラグインです。ちなみに保存はテキストファイルと同様です。必要に応じて画像形式で出力（エクスポート）できますが、その際に.png（一般的な画像）の他に.svgも選択できます。SVG、その筋の人じゃないと知らないと思いますが、縮小拡大しても劣化しない画像と思ってもらえれば。あと、SVG形式で出力できるということは、たとえばHTMLに埋め込んでjavascriptなりなんなりでその画像を動かしたりもできるということでもあります。クッソめんどくさいけど、多分jQueryとか使えばそこそこ簡単じゃないかな？　知らんけど。とにかく発想力と技術次第で何でもできるのが、このVSCodeとプラグインたちなんです。

でもま、「ぽちぽち素材を置いていって、いい感じになったら画像（.png）に出力できる」くらい理解していれば十分です。

Draw.io プラグイン導入方法

さて、導入です。

めっちゃ簡単。VSCodeは入れたいプラグイン名さえわかっていればほとんど秒殺で導入できます。ググれば99％幸せになれる。今回のこのプラグインも、面倒な設定はないので一瞬です。

Visual Studio Code を入手する

まず「VSCode」をゲットしてください。無料です。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VSCodeをインストールします
VSCodeを開きます
開いたら、左のテトリスみたいなのをクリックする（図1）
上にある検索窓に「Draw.io Integration」と入力する（図2）
一番上に「Draw.io Integration」ってまんまのやつが出てくるので「インストール」
終了（念の為VSCode立ち上げ直すと良いかも）

図１

図2

どうやったら編集モードに入れる？

拡張子が大事です。

VSCodeを立ち上げます
メニューの「ファイル」→「新規ファイル」を選択します
「Untitled-1」というタブが開くのを確認します
そのまま「ファイル」→「名前を付けて保存」を選択します
自分で分かる場所に保存しますが、ファイル名を「test.dio」としてください。dioが大事。.txtとかではこのプラグインは動作しません。
タブ名が「test.dio」に変わったら一度「タブ」を閉じます（VSCodeを閉じる必要はないです）
「ファイル」→「ファイルを開く」→「test.dio」で開き直します。
- 「ファイル」→「最近使用した項目を開く」の中から開いても良いです。
フローチャートを書くための画面が立ち上がります

どうやって編集する？

事細かに書いてみようかと思ったんですが、そもそもGUIって「直感的に使えるもんじゃね？」と思っている私です。実際にこのGUIはなかなか優秀で、適当にポチポチしてても描けちゃったりしました。これ（図3）を書くのに所要した時間は（初見で）10分くらい。
見て分かると思いますが、「Import」をすると画像を入れることもできます。
とりあえず適当に諸々置いたら、いちおう保存しておいてください

図3