VSCode | 文章で生きていく

Visual Studio Code for 小説まとめ

一式鍵 — Sun, 26 Feb 2023 14:12:48 +0000

私は小説新規作品を作るのをやめてしまって久しいわけですが、それでも過去作品を自分のサイトに掲載するにあたってかなり大幅な修正を行っていたりするので、テキストエディタは必須なわけです。私は職業としてプログラマなものですから、仕事でもプライベートでもエディタは手放せません。

そのエディタ、世の中にはいくつも選択肢があったりするわけですが、私に言わせれば一択です。「Visual Studio Code」。これ。このサイトでも何度も書いていますが、「Visual Studio Code」略して「VSCode」は超絶便利ですし、何なら毎日のように進化しています。

VSCodeは「プラグイン」というものを追加することで、自分好みにカスタマイズできるようになります。なので、私のVSCode、会社用と自宅用では全く機能性が違っています。が、それでいい。

さて、プログラマの諸氏に於いてはVSCodeの何たるかなんて当たり前のように知っていると思いますので、ここはそういうソフトウェアに疎い人も多いと思われる「小説界隈」にターゲットを絞ってお話しましょう。そう、小説執筆用としてVSCodeを使うのです。

VSCode、なんか難しそう。なんて声を度々耳にしますが、大丈夫です。ただのテキストエディタです。ファイルの作成も保存も「ふつう」です。特別な操作はありません。あとは書くだけなので、ここも問題はないはずです。

でもそれだったら「メモ帳」となんにも違いません。

VSCodeはデフォルトのファイル管理機能や検索機能が半端ありません。そしてさらに登場するのが各種プラグインです。プラグインになると一気にハードルが上がる（心理的な）と思いますので、その辺細かく解説します。

と言っても、過去記事貼るだけなんですけどね。3つ貼りますが、基本的には一番最初のだけ見てもらえればOKです。余力のある方は2つ目、3つ目もどうぞという感じで。

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

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

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

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

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

VSCodeだけで、あなたの物語の「設定資料集」を作れちゃいます。 VSCodeってのは（超すごい）テキストエディタのことです。やりたいことはたいていできます。ただの「メモ帳」とはわけが違うんですね、これが。なんでもできます、まじで。で、...

というわけでみなさん、VSCodeを執筆のお供にしてみてはどうでしょうか。一度使ったら離れられなくなりますよ。特に長編小説書くときとか、これ以上ないくらいに重宝します。短編もたくさん書かれる方なら一括管理できるので非常に便利です。

ダウンロードは↑のページにもありますが、こちらです→https://azure.microsoft.com/ja-jp/products/visual-studio-code/

The post Visual Studio Code for 小説まとめ first appeared on 文章で生きていく.

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

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

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

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

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

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

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

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

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

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

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

【WordPress】Cocoonの「吹き出し」トークを簡単に作るためのpython

一式鍵 — Wed, 25 Aug 2021 12:02:59 +0000

何でもかんでもめんどくさいと感じてしまう私ですが、別サイトでこういうコンテンツを作ったりしています。

おしゃべり＠論理空間#01 - セイレネス・ロンド / 統合情報サイト

エディットなんか召喚されたんだけど、ここはどこ？いま何年？カティアタシもよくわからないけど、なんか不思

「フキダシ」トーク、ダイアログのコンテンツなんですね。ところが、この吹き出しコンテンツ、作るのがすごくめんどくさい。ストレスフル。なにせ１文書くたびに吹き出し作ってまた一文書いて……というのを繰り返す必要があるので。修正したら変なところまで消えちゃうし、元に戻すのもめんどくさいし。で、結構イライラしてたんですね。でも、基本は話者１と話者２の繰り返しトーク。とりあえずは２人しか出てこないコンテンツ。であれば、なんかプログラム書けば一発じゃね？　という話。

python実行環境を作る
吹き出し用のアイコンとかを設定する
pythonでコードを書いてみる
完成形
原稿を準備する
python実行！
再び「投稿」→「新規作成」からの表示確認（プレビュー）

python実行環境を作る

まず、pythonの実行環境を作る必要があります。これ、書こうと思ったんですけど、既に他にいろんなページで書かれているのでありがたく参照させていただきます。ので、まずはこちらのサイトなどを参考にして、Visual Studio Code上にpython実行環境を作ってください。あ、他の環境でもOKです。pythonが動けば何でもいい。私はVSCodeでpython動作環境を完結させています。多分一番手軽なのでおすすめですよ。

吹き出し用のアイコンとかを設定する

さて、pythonできたら、次はCocoonの吹き出しにアイコンとか設定してください。「Cocoon設定」→「吹き出し」ページに入り、「新規追加」してください。こんなふうに。

左右に関しては、実はタグを一箇所いじるだけで変更できるんですが、ここではこのフキダシ位置で固定にします。

吹き出しが用意できたら、「投稿」→「新規追加」で新しいページを作ります。このページはタグを取得するためだけのページなので「公開」はしないでくださいね。

白いページが開いたら、ブロック追加で「クラシック」を選びます。

すると、こんなふうに「吹き出し」が選べるようになるので、今設定した「アイコンが左」の吹き出しを設定します。

ここまでできたら、上の画像の上の方にある「ブロックに変換」ボタンを押してHTMLを表示させます。下記の様に表示されますが、黄色でマークした部分は環境に合わせて変わります。

まず、↑のHTMLをどこかに保存しておいてください。

保存したら、一度↑のブロックを削除し、次に「アイコンが右側にある吹き出し」を出して同様にHTMLコードを保存します。準備はここまでで。

pythonでコードを書いてみる

次に、エディタで「fukidashi.py」とか適当な名前の.pyファイルを用意します。あ、文字コードは「UTF-8」ですよ。

以下、コードです。１行目については「読み込むテキストファイル名」を設定します。

f = open('talking.txt', 'r',encoding="utf-8")
datalist = f.readlines()
f.close()

次の行で、↑の方で保存した二種類のHTMLコードを使います。が、最後の

のところまでしか使いません。ここ注意。たとえばこんなふうになります。

l =('
エディット
')

r =('
カティ
')

そして、「閉じタグ」部分だけを変数に入れます。

finmark =('
')

出力ファイル名を設定します。ここでは「result.txt」としました。

fo = open('result.txt','a',encoding="utf-8")

そして以下はまんまコピペ。

for data in datalist:
    dArr = data.split(":")
    cName = dArr[0]
    cContent = dArr[1]
    outputText = ''
    if(cName == 'l'):
        outputText = l + cContent + finmark
    elif(cName == 'r'):
        outputText = r + cContent + finmark

    fo.write(outputText + '\n')

fo.close()

というわけで、私のファイルはこんなふうになっています。pythonはタブの入れ方も重要なのでこのままね。

完成形

ピンク背景のところが個人差の出てくる所です。

f = open('talking.txt', 'r',encoding="utf-8")
datalist = f.readlines()
f.close()

l =('
エディット')

r =('
カティ
')

finmark =('')

fo = open('result.txt','a',encoding="utf-8")

for data in datalist:
    dArr = data.split(":")
    cName = dArr[0]
    cContent = dArr[1]
    outputText = ''
    if(cName == 'l'):
        outputText = l + cContent + finmark
    elif(cName == 'r'):
        outputText = r + cContent + finmark
    fo.write(outputText + '\n')
fo.close()

原稿を準備する

↑で設定した「talking.txt」を作らないといけません。これはテキストファイルですが、文字コードはやっぱり「UTF-8」です。なお、talking.txtは、↑でつくったfukidashi.pyと同じフォルダに置きます。

中身はこんな感じ。

l:カティ、カティ
r:なんだい姉さん
l:思ったんだけど、どうしてここ私たちしかいないの？
r:多分アイコンが確保できないんだと思う
l:あいこん？？？
r:ああ、いやいや、こっちの話。
l:それはそうと、キリス・オヴェロニアって名前知ってる？
r:ん？　うん、知ってるけど。マリーたちの養子。
l:養子？　歌姫なの？

「l:」と「r:」が繰り返されているのが分かると思いますが、この「l」「r」がどの吹き出しを用いるかを決めています。また「:」（←半角）はpythonコードの中で区切り文字として使っているので、忘れずに入れてください。「l:せりふ」「r:せりふ」を繰り返すのです。これはいくら続いても構いません。pythonがいい感じにHTMLコードに変えてくれます。原稿ができたら保存します。

python実行！

ターミナルで「fukidashi.py」を保存しているディレクトリ（フォルダ）に移動してください。そして、「fukidashi.py」を実行します。すると、何食わぬ顔で処理が終了します。気になる人はprintでも仕込むと良いです。

すると、fukidashi.pyやtalking.txtと同じフォルダに「result.txt」が出てきます。

中身を見ると、こんなです（抜粋）


エディット
カティ、カティ

カティ
なんだい姉さん

エディット
思ったんだけど、どうしてここ私たちしかいないの？

カティ
多分アイコンが確保できないんだと思う

エディット
あいこん？？？

台詞のあとに改行いれて ”

“がきていますが、これは個人的な好み。改行とっぱらってもいいし。

とりあえずこの「result.txt」の中身を全部コピーします。

再び「投稿」→「新規作成」からの表示確認（プレビュー）

白い画面が開いたら、「カスタムHTML」ブロックを追加します。

こんなふうにコピペします。

これ、↑画像内の「プレビュー」だと上手く表示されません。ので、「公開」ボタンの横の「プレビュー」をしてみてください。

見てみると、この通り。

これで、１：１トークに関しては問題なくクリアできると思います。もちろんコードをちょっといじれば途中でキャラクターを変えたりすることも自由です。

これで長文トークも自由自在です。なお、トークの途中で改行を入れたい場合は「ああああ
いいいい」のように「br」タグを書けばOKです。なお、このコードはあくまで私が個人用に作ったものなので、例外処理的なものとか入れてませんし、なんならresult.txtの初期化処理もしていません。（なので、fukidashi.pyを実行するたびにresult.txtは手動で消してね(゜¬゜））

ものっそいざっくりしてますが、まぁヒントくらいになればいいかな。みたいな？

めんどくさいって思うのは大事なことですよ。

The post 【WordPress】Cocoonの「吹き出し」トークを簡単に作るためのpython first appeared on 文章で生きていく.

めんどくさいと感じることは、効率化することができる

一式鍵 — Mon, 23 Aug 2021 13:57:45 +0000

「めんどくさい」を大事にしろというのはしばしば耳にします。私もそう思います。もちろん、ただ「めんどくさい」と思うだけだったら意味がありません。ただの文句言いたい人になってしまいます。大事なのはそこから一歩先に進んで「めんどくさく感じるのはなぜか」と考えること。そしてさらに有用なのは「だったらそのめんどくさい要因はどうやれば軽減、あわよくば除去することができるのか」を考えること。さらに素晴らしいのは、「そのために施策を考えて実行すること」です。

これら全て、まずは「めんどくさい」と思わないことには始まりません。ルーティンワークだから仕方ないとか、このままでも別に～とか言ってる人は一生効率化できませんし、一生無駄タスクに埋もれるだけです。現状維持でいいやーって人は危険ですよ。現状維持は、即ち衰退ですからね。だって我々の持ち時間はせいぜい100年なんですし、後ろに行くに従って人としての効率は（普通は）下がっていくのです。だから、若い頃と同じようなやり方を延々やっていても（多少の熟練効果はあるかもしれませんが）、時間効率はどんどん下がっていくのです。老い先短くなって効率悪くなって日常のタスクで埋もれて……ってなったらちょっと寂しくないですか。いや、いくらやってもやる人には足りないんですけどだったらなおのこと、少しでも自覚できるくらいに効率化をしたほうが良いと思うんです。「めんどくさいと思う」のは大切ですが「めんどくさいと思い続ける」ことほど無駄なことはありません。

「めんどくさいと感じない人」はもちろん、「めんどくさいと感じるだけの人」も成長はありません。というか、前者よりも文句言うぶんよろしくない。なので「めんどくさい」と感じるセンサーをしっかり立てて、その上で「そのめんどくささをなんとかしてやるぜ！」と行動を起こすようにすると、最初はその対策に時間コストをとられますが、長い目で見ると必ず時間短縮につながるのです。時間の先行投資と考えると良いのです。

もちろん、「めんどくさいこと」をすべて解消しろというわけじゃないです。まず重要なのは「ルーティン」になっていることが「めんどくさくないか」というチェックをすること。「ルーティン」ですから、短スパンで繰り返されることであるはず。であるなら、多少コストがかかっても優先的に効率化したいところ。そもそもルーティンワークに「めんどくさい」の入る余地がないくらいの人は、多分他のことも効率よく出来てると思うのですよね。もっと、もっとだ！　ってなると思いますが、そういう人は大抵その時点の能力の限界ギリギリまで効率化してる気がします。効率化に終わりはありませんけどね。

そうそう、たとえばですよ、ブログ。このサイトのようなブログ。たとえば一からHTMLをぽちぽちやりながら、毎日更新……とか、今の時代どう考えても無茶です。いや、私が大学生だったころはそれが当たり前でしたよ。私、いにしえのインターネッツ民ですからね。でも、それだと専門知識（HTMLとか）は必要だし、タグ打ち間違えたら崩れるし、本文だけ打ち込んでも改行すらされませんし（BRタグ打たないとね）、ましてページデザイン変更とかくっそめんどくさいことになるし、全ページリンク貼り直し作業とかやってたら文字通り数日仕事になるわけだし。とにかく精神に来る作業が多かった。

でも今、見てください。このサイトはWordpress使ってるんですけどね、めちゃめちゃ楽。Cocoonみたいに勇者の皆様が作って提供してくれてるスキン使いつつ、ちょいちょいググりながら更新環境整えたら、後はネタさえ思いつけばいくらでもそのことだけに注力して更新できるような環境ですよね。これ、多くの人の「めんどくさい」の結晶だと思うんですよね。叡智ですよね。めんどくせーなーと思っても、他の人がやってくれてる！　なんてありがたい時代ですか。めんどくせーなーと思いさえすれば、大抵の「簡単にしてやんよ方法論」は落ちています。このサイトの更新環境も「これこれしたいけどめんどくせー。よーしググるか」で見つけてきたもので作られています。そういうものをフルに使っていくのも「めんどくせぇ」を極めた人の特権かなと。

「めんどくさい」を放置しない。これが、日々の中から「めんどくさい」を減らすライフハック。

こっちのサイトで今「とってもめんどくさい」更新コンテンツがあって。それをどうにかしてめっちゃらくらくに更新できるかっていうのを考えている所。他にも応用効くように作りたい所。まずは仕様を決めないと。……というところで多くの人は「めんどくさくてもいいや」になっちゃうと思うんですが、そういう細かいところで差が出てくるんじゃないかな、みたいな。

しかし何の言語で作ろうかな。やっぱりお手軽pythonかな……。Visual Studio Codeあれば（実質的に）開発環境要らずだしな……。あ、Visual Studio Codeについては↓みてね。

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

The post めんどくさいと感じることは、効率化することができる first appeared on 文章で生きていく.

Python3をpaizaで勉強して、発想の引き出しを増やそうとしている。

一式鍵 — Tue, 03 Aug 2021 14:33:14 +0000

TechFulとかでもいいんですが、シュタゲとコラボしてるからという安直な理由でpaizaでやっていますよ。python3の問題を3日で合計70問くらい解いてます。簡単なやつばっかり（笑）　リハビリにはちょうどいい。

ログイン

ログイン画面です。｜ITエンジニア・プログラマ向け総合求職・学習サイト【paiza】

↑です。あ、このサイトに訪問してもらっても、私には一切お金は入りません、アフィじゃないので（笑）　プログラムの基礎から頑張りたいとか、少し離れててカンを取り戻したいとか、そういう方には特に良いのではないかと思いますね。

私はかつてはperl使いで、その後JAVAに変わり、今はもっぱらC#の人なんですが、趣味としてpython3をやりたいなと。（でも会社で自分だけが使う便利ツール作る時はpython3ですな）

python自体は二年くらい前に初めて触ったんですけどね、しばらく忙しくて修練どころじゃなくて。ちょこちょこ自分用のツールはつくっていたんですが、そのくらいで。このサイトでも以前やっていた「分析」のためのツールとかも自作でしたけどね。あとは「カクヨム」から「アルファポリス」に転載する際の変換ツールとか。あ、結構作ってた。

それはともかくとして、もっとこう、すげぇ面白いものを作ってみたくて、で、その引き出しを豊富に持つためにはやっぱり基礎部分が必要だと思っていて。完全に基礎が身につけば自ずと「こんなのやれるんじゃね？」っていう発想が出てくるんじゃないかなと思うんですよね。実際C#とかだと「この作業うぜぇなぁ、なんとかならんべか？」って思った次の瞬間には、その解決ツールの設計がおよそ出来てるし。その領域まで行っときたいんですよね、python。なんせ取り扱いが楽だから。取り扱いが楽だから（大事なことなので）

私はもうエディタと言えばもっぱらVSCodeしか使ってないんですが、pythonてば、このVSCodeの中だけで完結させられるんですよ、全てを。めっちゃ楽。Djangoの方にも進出したいところだけど、まぁまずはpython単体でどうにかこうにかしていけないとね。

今基礎問題しかやってないから、paizaレーティングが1400～1500くらい（うへぇ）　まずは1800を目指してがんばろう。ていうか2500くらい行きたいところです。が、pythonくらいは基礎からじっくり習得したいので（他の言語は必要に迫られて必要なところだけやったから意外と穴だらけだ）、あれですね。それにこれは全くプライオリティは高くないので（仕事で求められてるわけじゃなし）、ゆっくり自重しながら（笑）　夢中になるととてもよくない。こういうスコア制のものってどうしてもハマっちゃうんだよね、昔から。まんまと乗せられている……！

というわけで、目下取得に向けて動いている某技術系資格試験の勉強とは全く関係ないんだけど、pythonの修練も頑張りたい所でございますな。某技術系資格試験、問題集はだいたい暗記したんだけど、今の時点だと合格率5割強くらい。たぶん。もっと完全に理解できないと難しい。

VScodeについては以下の記事も是非参考に。

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

ワードプレス更新作業の強い味方、マークダウンエディタ！

スマホでマークダウンワードプレス更新の際には、基本的にはパソコンにて「VIsual Studio Code」にプラグイン「Markdown All in One」突っ込んでの作業になるんですが、スマホでも効率よく作業できないものかなという...

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

よーろしくどうぞー。

The post Python3をpaizaで勉強して、発想の引き出しを増やそうとしている。 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

画像に変換したい

「test.dio」タブの中にある「ファイル」をクリックします
「Export」を選択します
すると画面上部中央に下の図のような表示が出るので「.png～」を選択します
後は通常通り出力するファイル名を設定して保存します

こうなったら後はもうただの画像なのでお好きにどうぞ。
修正するのも再びこの「test.dio」を開いていじくるだけです。

さぁこれで、クソなOfficeを使う必然も、画像編集ソフトでレイヤがどうので四苦八苦することもなくなります。オマケにテキスト含めて全てVSCodeで管理できるすばらしさ。クリエイター諸氏、是非体験してみてくださいませ。

こちらの記事もどうぞ。

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

ワードプレス更新作業の強い味方、マークダウンエディタ！

マークダウンとこのフローチャート（しかも画像取り込みも可能）のやつを使えれば、あとはVSCodeの標準機能だけでも死ぬほど便利で使い勝手の良い環境になると思うなぁ。

The post VSCodeでフローチャート（を使った人物相関図）を直感的に書く方法 first appeared on 文章で生きていく.

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

一式鍵 — Tue, 13 Jul 2021 14:52:14 +0000

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

Visual Studio Code
自動保存機能
タブエディタ
フォルダ管理ができる
1. フォルダごと開く！
2. フォルダの中をまるごと検索！
プラグインがすごい

Visual Studio Code

ブログでも小説でもそうなんですが、私は「文章を書く」際に使うソフトは「Visual Studio Code」一択です。何しろ、保存しなくていい。保存したければもちろん保存できるんですが、保存しなくても自動的にこっそり保存してくれる。Visual Studio Code（以下VSCode）がもし仮に落ちたとしても、次に立ち上げた時にはちゃんと前回書いたところまで残っている。すげぇやつです。それだけでも圧倒的に執筆にいいんですが、こいつ、もっとすげぇ機能が色々あるんです。追加できる機能を含め、そのスペックは鬼のように凄まじいので、今回は小説執筆に限ってお話をしていきますよ。あ、ちなみにVSCodeは無料です。

VSCodeはこちらからダウンロードできます。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

自動保存機能

前述の通り、「自動的に保存してくれる」という。昨今のエディタでは珍しくはない機能ですが、仮にファイルを作っていなくても保存してくれるという点ではやっぱりすごい便利。（2022/11/14追記→）ただし以下の設定が必要です（外部サイト）

エディターの自動保存の設定

Visual Studio Code でエディターの自動保存に関する設定を行う方法について解説します。

便利。私も小説書く時にはこのVSCodeなしではやっていられませんでしたね。昔はEvernote使っていたんですが。それにほら、よく「保存忘れて●千文字消えた」なんて聞きますよね。私としてはなんで自動保存エディタ使わないんだろとか思うんですが。まぁ、そんな嘆きもこのVSCodeをぶち込めば解決です。それにVSCodeはなによりタブエディタなのでいくつものファイルを同時に開いておけるんですよね。しかし、それだけではないのです。

タブエディタ

↑で言いましたが、タブなんです、タブ。画像にある通りタブ。これ、メモリが許す限り開けるんじゃないかな、知らんけど。

しかも同じファイルを画面分割で見られたりするんです。これはあんまり小説では使わないかもしれないんですが、プログラマやってたりすると意外と使う。それにあれですね、タブですから、「設定資料」とかを常に開きっぱなしにできるのは便利。たとえば右画面に設定、左画面に本文とかできるし、3画面分割とかすれば登場人物も置いておける。とても便利。だがしかし、VSCodeのやばいところはこれだけじゃない。

フォルダ管理ができる

フォルダごと開く！

そう、フォルダです。フォルダをまるごと読み込んで置いておけるんです。どういうことかわかりにくいかもしれないんですが、どんなアプリケーションにも【ファイルを開く】ってあるじゃないですか。そこに【フォルダを開く】が追加されてる感じです。で、これで「フォルダを開く」と、その中にある全ての読み込み可能なファイルが、VSCodeの左端の窓にずらりと表示されるんですね。こんなかんじに。

ここでは私の「セイレネス・ロンド」の第一部～第三部をまとめてVSCodeで開いています。画像では第一部と第二部が見えてる感じ。

小説でエピソードごとにファイルを作ったりすると、いちいち読み返したり検索したりするのが面倒で、一個のファイルで作ったりしますよね。でもそれだと何かと不便なときもあると思います。そういう時にエピソードごとにテキストファイルを分けたりすることもできて、管理も難しくはない。……そういう選択肢が増えるという意味は大きいですね。また、「カクヨム」だと自分でUPしたものをバックアップとしてカクヨム的にフォーマットにしたものをダウンロードすることができるんですが、それはフォルダにエピソードがずらり。まさに上の画像のように入っています。そこからたとえば公募用に原稿を調整したり管理したりする……なんてときに超便利。わざわざ.txtファイルをコピペして連結しなくても利便性は下がりません。

フォルダの中をまるごと検索！

システム系の人ならgrepってやつを使いこなしちゃうと思うのであんまりアレですが、一般の方はgrepってなんぞやな感じでしょうし、そもそもコマンド使えというのは殺生な話。ところが、このVSCodeでは、普通の検索と同様に「開いているフォルダ」の中を検索して、結果を出力してくれるんです。しかも、検索対象フォルダは一つ二つに限りません。いくつもフォルダは開けるので、やろうと思えば全フォルダのテキストファイルの中から特定の単語を検索したりすることもできるんです。この画像を見てください。先述の通り、「セイレネス・ロンド」の3つのフォルダを開いている状態ですが、それをまとめて検索しているのがわかります。

これにより「あの単語どこで使ったっけ」とか「●●はどこで初登場だっけ」というのが一瞬でわかります。ファイルをいちいち開いて検索して……なんていう無駄を完全に除去できるんですね。

とにかくこの機能が便利すぎて怖い。小説書く人なら、この機能の恐ろしさはすぐピンとくるはず。

プラグインがすごい

プラグインっていうのは「追加機能」のようなものだと思ってください。「このプラグインを入れるとこういう機能がつきますよ」的な。そうやってVSCodeを自分好みに成長させていくわけですね。VSCodeをインストールしたら、以下の見出しになっているワードで検索するとすぐに見つかります。

CharacterCount

個人的におすすめしたいのが、「CharacterCount」。以下のような機能です。

すべての空白文字(全角/半角スペース、改行、タブ)
ルビ範囲指定記号(《》)とその中の文字
ルビ開始記号(「|」、「｜」)

小説投稿サイトに参加してる方なら、この意味がわかりますよね？　ルビとかを除いた「本当の文字数」をリアルタイムにカウントしてくれる機能です。コレ本当に便利。モチベーション維持にも大いに役立ったものです。

Convert Ruby

そしてこれ。HTML形式と小説投稿サイト形式のルビをコンバートしてくれるというやばいやつです。コレは解説が難しいのでアレですが、私には超役立ちました。ここで紹介した2つのプラグインは、どっちも小説書きさんでもある8amjpさんの手によるものです。小説投稿サイト経験を生かして、WEB小説書きさんに使いやすい機能を作ってくださったわけですね。是非おためしあれ。

Markdown All in One

実はこの記事、この「Markdown All in One」というプラグインの機能で書いています。これ、小説本文では使えない機能ですが、「設定資料」を書く上ではやばいほど約にたちます。簡単に見出しをつけれたり、目次を自動生成してくれたり、とにかくやばい。特に知識がなくてもすぐに使いこなせるくらいの簡単さですし、VSCodeの左にマークダウンで本文書いて、右側にその画面を表示させておく、なんてこともできるし、本文を左、設定資料（マークダウンで整形済み）を右に表示、なんてことも。自由度が極めて高いのもVSCodeの特徴です。

ちなみに↓の画像がこのブログ記事の下書きです。左の画面で執筆し、右の画面で見栄えを確認しています。が、たとえば、このようにキャラクター紹介を書いて、右の画面に表示しておきます。で、左の画面は小説本文タブに切り替えると……なんと、ウィンドウを切り替える必要なく常に自作資料を見ながら執筆ができるのです。

更にその上、こうして整形したマークダウンの画面をたとえばPDF出力したりできちゃうんです。表も作れたりするので、かなりかっちりした設定資料をPDFにできる。これ、思ってる以上に興奮すると思いますよ！（笑）

7/15追記

↓のページも、[Visual Studio Code] + [Markdown All in One]で書きました。

「セイレネス・ロンド」世界の要素を数値化してみる - セイレネス・ロンド / 統合情報サイト

とりあえず「静心」ベースですが、キャラクターの来歴こそ違うところもありますが、ユニットベースで考えた場合は「セ

マークダウンエディタについての記事も書きました。ぜひ。

ワードプレス更新作業の強い味方、マークダウンエディタ！

2021/12/25追記

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

The post 「小説執筆」、何を使っていますか？ first appeared on 文章で生きていく.