要約
- Viual Studio Codeの拡張機能Cloud LaTeX Extension for Visual Studio Codeを使ってCloud LaTeXとVSCodeを連携します．
- Cloud LaTeXのプロジェクトにあるファイルを，ローカルPCのVSCodeで編集できるようになります．
- Cloud LaTeX Extension for Visual Studio Codeは2021年4月3日現在開発中です．
導入背景
Cloud LaTeXはクラウド上で$\LaTeX$を使ってpdfファイルを作成できるサービスです．.texファイルを編集するエディタもウェブブラウザ上で動作します．長大な$\LaTeX$のプログラムをローカルPCにインストールせずに使うことができるのが利点です．
Visual Studio Codeは最も人気のあるエディタの一つで，様々なサービスとの連携や拡張性・カスタマイズ性の高さが特徴です．
気軽にlatexを使いたい．そして.texファイルはクラウド上に保持したい．しかし備え付けのエディタではなくVSCodeを使いたい．そんな願いをかなえてくれるのが今回紹介する拡張機能です．
この拡張機能を使うことで，ローカルPC上で編集したファイルをCloud LaTeXのプロジェクトに同期することができます．Cloud LaTeXでは.texファイルをコンパイルしてpdfを出力してくれるので，すぐにpdfで出力を確認することができます．
実際の手順
ステップ 1 Cloud LaTeXに登録
まずは公式ホームページからログインまたはサインアップします．
- メールアドレスから登録，
- facebook, twitter, googleアカウントとリンク
のいずれかを選びます．
他のサービスと連携してアカウントを作成した人は別途パスワードを登録する必要があります．
一度ログアウトし，ログイン画面にあるパスワード再設定をクリックして誘導に従ってください．
ステップ 2 新しいプロジェクトを作成
ユーザーのマイページから新規作成を選択し，新しいプロジェクトを作ります．
今回はSampleというプロジェクトを作ります．プロジェクト名は任意の文字列で代替可能です．
次に，プロジェクトを開き，ブラウザのヘッダーからProject IDを読み取ります．
urlの/projects以下の数字がProject IDです．
この例では343112となっています．この値はあとで使うので別のテキストファイルなどにコピー&ペーストで一次的に保存しておきましょう．
ステップ 3 クライアントIDとトークンを取得
右上のユーザーから拡張機能を選択します．
パスワードの入力を求められるので，入力します．
次にトークンを生成をクリックします．
Client IDとtokenもあとで必要になるので保存しておきます．
ステップ 4 VSCodeに拡張機能を導入
VSCodeのサイドーバーの拡張機能のアイコンをクリックし，検索窓にcloud latexと入力します．
installボタンからインストールします．
ステップ 5 ワークスペースを作成
Cloud LaTeXの拡張機能にはワークスペースが必要なので，なければhoge.code-workspaceという名前で空のファイルを作成します．hogeの部分は任意の文字列で代替可能です．
今回はCloud LaTeXのプロジェクトのファイル群を同期させるためにCloud LaTeXというフォルダを作成しました．その中にhoge.code-workspaceというファイルがあります．
フォルダ構成は
Cloud LaTeX
└─ hoge.code-workspace
となっています．
まずVSCodeでCloud LaTeXというフォルダを開きます．このフォルダはワークスペースファイルよりも上の階層にあれば，どこでも良いです．
次に「ワークスペースを開く」でhoge.code-workspaceを開きます．
ステップ 6 拡張機能の設定
VSCodeの拡張機能が並んでいる左のバーからCLをクリックし，Set accountをクリックするとメールアドレスを入力するバーが出ます．
ここにCloud LaTeXで登録したメールアドレスを入力します．このときパスワードを設定していないとエラーになります．
次にClient IDを入力してEnterを押します．もし保存し忘れてしまっていたら，もう一度同じ手順で作り直してください．
次にtokenを入力してEnterを押します．
認証が成功すると右下にポップアップが出ます．
次にProject settingのWorkplaceタブにある設定を変更します．
- Cloudlatex: Enabled にチェック
- Cloudlatex: Project IDにプロジェクトIDを入力
変更するとリロードを促すポップアップが出るのでリロードします．
左側のProject settingがProject setting (Sample)となれば成功です．
反映されない場合は何度かReloadを押してみましょう．
成功するとCloud LaTeXというフォルダに，新たに
figuresmain.pdfmain.tex
などのフォルダとファイルが作成されます．
同期できるかの確認
クラウドからローカル
まずクラウド上で編集したファイルが同期されているか確かめましょう．
Cloud LaTeXのサービスから，main.texというファイルの35行目に文字列を加えました．
クラウドで編集した後ローカルでReloadを押すと次のようになります．
ローカルからクラウド
次にローカルで編集した箇所がクラウドに反映されることを確かめましょう．
VSCodeの編集画面でmain.texというファイルの36行目に文字列を加えました．
ブラウザをリロードすると次のようになります．
まとめ
この記事ではCloud LaTeXをVSCodeに連携する方法を紹介しました．これにより，.texファイルをクラウドに保持しつつ，好きなエディタで.texファイルを編集することができます．
注意
開発ページのREADMEにある通り，開発中の機能です．重要なプロジェクトには使用しないでください．