Git Product home page Git Product logo

latex_overleaf_vscode's Introduction

VSCodeでLaTeX+Overleafを動かすまで

 LaTeXはWordに比べて「書式が綺麗」で「文献管理が簡単」「動作が軽い」点で使いやすい文書作成ツールと言われています.  しかし,いざ自分で使用してみようと,LaTeX環境構築に関する色々なサイト・記事を見ましたが,何となく面倒な雰囲気が漂っていました(個人的な見解)...  何か簡単にLaTeXを操作できる方法は無いものかと辿り着いたのが,「Overleaf」です!

1. Overleafとは

 Overleafについてざっくり説明しておきます.LaTeXで文書を書く時,ローカル環境にLaTeXをインストールし,何かしらの統合環境(TeX LiveやVSCodeなど)でコンパイルします.  しかし,冒頭で述べたように,デバイス上にLaTeX環境を構築するまでが手間です.これに対してOverleafはクラウドベースのLaTeX専用エディタとして利用できるため,面倒な環境構築を行う必要が一切なくなります.  ※他にも「便利なモジュールもインストール不要で利用可能」「テンプレート機能」「補完機能」「GitHub連携」など便利なところはありますが,ここでは詳しく説明はしません.

2. VSCodeでOverleafを操作

 Overleafは,基本的にブラウザでのみ操作可能なエディタとなっています.そのため,編集中は常にブラウザを起動しておき,慣れないUIでLaTeXを編集する必要があります.調べてみると,VSCode上でOverleafを操作できることが分かってきました.  つまり,「LaTeXの環境構築するのは面倒」→「環境構築不要なOverleafで解決」→「ブラウザ操作は嫌だ」→「VSCodeでOverleafを操作しよう」という流れになります.

3. VSCodeでOverleaf(+LaTeX)を動かす手順

 それでは,VSCodeでOverleafを操作し,LaTeXで文書作成を行うまでの手順を説明します.  ※以降の説明は,VSCodeが既にインストールされていることを前提として進んでいきます.インストールしていない人は,まずVSCodeをインストールしてください.

3.1 OverLeafサインアップ

 まず,Overleafの公式ページからサインアップを行います. サインアップは,メールアドレスとパスワードを設定し,メールアドレスに届くコードで認証するだけなので簡単です.  その後,有料プランへの加入を勧められますが,無料で使用したい人は「No, I don't need these」で丁重にお断りしましょう.

スクリーンショット (30).png

 次に,スタート画面が表示されます.「Create a new project」をクリックし「空のプロジェクト」をクリックします.その際,プロジェクト名の入力が求められますので,適当な名称で作成してもらって結構です.

スクリーンショット (31).png

スクリーンショット (32).png

 空のプロジェクトが作成されると,画面左にソースファイル,画面右にテキストファイルが表示されると思います.

スクリーンショット (33).png

 以上で,Overleafのサインアップは完了となります.

3.2 VSCodeでOverleafログイン

 先ほど,サインアップしたOverleafのアカウントにVSCodeでログインします.まず,VSCode拡張機能の検索欄に「Overleaf Workshop」と入力し,インストールまで行います.インストールが完了すると,サイドバーにOverleaf Workshopというアイコンが追加されますので,クリックします.

スクリーンショット (35).png

スクリーンショット (34).png

 すると「www.overleaf.com」というホストが表示されていると思いますので,カーソルを合わせて,ホスト名の右側にある「Login to Server」というボタンをクリックします.

スクリーンショット (36).png

 ログインするための手段の選択が求められますが,Cookiesを用いたログイン方法「Login with Cookies」を選択してください.すると,Cookies情報の入力が求められますので,自身のOverleafのCookies情報を入力します.

  • OverleafのCookies情報の取得 OverleafのCookies情報取得方法を説明します.まず,Overleafのホーム画面にアクセスします.

スクリーンショット (37).png

 そのページの管理者画面を開きます(F12キーを押す,または右クリックで「検証」).管理者画面内の「Network」タブをクリックし,検索欄に「/project」と入力します.

スクリーンショット (38).png

 この画面のまま,ページを更新すると,という名称のRequestURLを含む通信が出てきます.その中の<projectドキュメント>をクリックし,の中にあるに記載されている文字列をコピーしてください.

画像1.png

 以上で,OverleafのCookies情報の取得が完了しました.最後に,このCookies情報をOverleaf Workshopで入力することでVSCodeでOverleafにログインすることができます,

GitHubリポジトリ

https://github.com/haradakaito/LaTeX_OverLeaf_VSCode?tab=readme-ov-file

latex_overleaf_vscode's People

Contributors

haradakaito avatar hrhrkeee avatar

Watchers

 avatar

Forkers

hrhrkeee

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.