MD-Blog_Web Creative

各課題詳細への実装仕様を説明する文章やWikiでのアジェンダ・議事録作成など、WebディレクターはBacklogで長文を入力する機会が多々あると思います。

私はデザイン畑出身なので視覚で捉えるタイプなのと、クリエイターが内容を認知・理解しやすいように文章そのものだけではなく、文字の強弱や行間などにも気を使います。

そのため、ちょこちょことプレビューしながら入力します。

そこでいつも『不便だなぁ。』と思っているのが、改行を1箇所だけ増やしたいなど、ちょっとした調整もプレビュー画面では一切できないこと。

「プレビュー」なので当たり前といえば当たり前なのですが、やっぱり不便!!となり、検索してたどり着いたのが「Visual Studio Code（以下「VSCode」）」とVSCodeのプラグイン（機能拡張）「VS Code Backlog Wiki Preview」。

まずは、セットアップ

• VSCodeをダウンロード
  https://code.visualstudio.com/download

• ダウンロードされたzipを解凍して、解凍されてできた「Visual Studio Code.app」を「アプリケーション」ディレクトリに移動します。
  （注：Macの場合です）
• VSCodeを日本語化するため、起動したら画面左側に並んでいるアイコン郡の中から一番下のアイコン「Extensions」を選択します。
• 表示されたフィールドに「Japanese Language Pack」と入力すると「Japanese Language Pack for Visual Studio Code」が表示されるので選択し「Install」を押下しインストールします。
• インストールが完了すると、画面右下にRestart Nowと表示されるので押下し、VSCodeを再起動します。

• 上記と同じ一番下のExtensionsアイコンを選択し、フィールドに「VS Code Backlog Wiki Preview」と入力し、結果表示から選択しインストールします。

これで、VSCodeのセットアップが完了となります。

VS Code Backlog Wiki Previewを使う

• 新規でファイルを開き、拡張子を 「bl」「biki」「backlog」にして保存すると、ヘッダー右側のアイコン表示数が増えるので縦長長方形が2つ並んだ状態に虫めがねがついたアイコンを選択するか、command（⌘） k　vを押下。
• 上記動作にて、ウィンドウが縦に2分割されて右側にプレビューが表示されますので、大見出し・中見出し・本文など入力していくとライブ反映されていきます。

エディター側で選択している箇所をプレビュー側でもハイライト表示してくれるし、よい感じです。いかがでしょうか。

あとがき

Backlogのコードに完全対応とはいきませんが、アジェンダ作成など入力量が多い場合のベース作成には十分かな。と思います（ありがたや〜）。

Visual Studio Codeは最近流行り（とよく聞きます。周りに使っている人も多い。）のコードエディターで、プラグインも色々あり、充実していますね。

インストールしているプラグインは

• 「Prettier - Code formatter」
• 「Beautify」
• 「Markdown Preview Github Styling Custom」
• 「Debugger for Chrome」

ですが、残念ながらありがたみを感じるほどコアに使用はできていません。笑
（「Japanese Language Pack for Visual Studio Code」はもちろん入ってます。）

進行する「手」のときも、つくる「手」のときも、世の中のしんせつな人に感謝しながら、本日も業務効率化を目指したいと思います。