本文へジャンプ

ディレクター的『Visual Studio Code』の活用法
〜MarkdownのリアルタイムプレビューでBacklog用文章作成を直感的に〜

Posted by Macky

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

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

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

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

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

まずは、セットアップ

VSCodeをダウンロード

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

Japanese Language Pack

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

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

VS Code Backlog Wiki Previewを使う

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

Markdownをプレビュー

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

あとがき

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

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

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

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

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

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

Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。