【Jupyter Labを使っている方必見！】HTMLをJupyter Lab内でプレビューする方法！
Jupyter Lab。
まだβ版ではありますが、Pythonをベースとした統合開発環境で、コーディングや対話的なデータ解析、さらにはシェルを扱ったり、おおよそやりたい操作は全て行うことができます！ 非常にリリースが待ち遠しいツールの１つであります。
しかしながら、デフォルトのJupyterLab（2018/12/19時点）ではHTMLのプレビューはブラウザのタブを別途開いて行うしかありませんでした。
ここで朗報です！
この問題点を解決するプロジェクトが現在進行中のようです！
今回はこのプロジェクトの１つ、HTMLのプレビューをJupyter Lab内で開く方法をご紹介します！
（※この記事の内容をご自身で試される場合は自己責任でお願いします）
Jupyter Labとは
以前の記事でJupyterについては書かせていただきました。
Jupyterとは、簡単に言ってしまうと、対話的にデータ解析を進めることができるウェブアプリケーションです。 この「対話的」というのが非常に重要で、思考の過程を残しておくことができるので、まさにデータ解析の必需品となっています。
その中でも、現在もプロジェクトが着々と進んでいるのがJupyterLab。
こちらはまだ（2018年12月19日時点で）β版ではありますが、Jupyter Notebookとは異なり、対話的なデータ解析だけではなく、ファイル管理やコーディング、シェルの管理などを一括に行うことができるPythonをベースとしたプラットホームです。
今回はこのJupyter Labに関する問題点の１つとその解消方法についてご紹介します！
Jupyter Lab内でHTMLのプレビューを表示できない問題
Jupyter Lab。
普通のエディタとしての機能もあります。 つまり、テキストファイルやMarkdownファイルなどの編集を行うことができます。 特にMarkdownファイルに関してはMarkdownのプレビューも見ることができ、さらにそれがすぐにリダイレクトされるので、プレビューを見ながらMarkdownファイルの編集といった作業も行うことができます！
しかしながら、デフォルトのJupyter Labでは、HTMLの編集を行うことはできるのですが、そのプレビューをJupyter Lab内で開くことができません...
たとえ、ファイル名を右クリックして「Open With」を選んでも、選択肢は「Editor」しかありません...
もちろん、無理矢理、「Open in New Browser Tab」を選択して、ブラウザのタブでプレビューを開くことはできます。
しかし、これではプレビューを見ながらHTMLファイルを編集することができなくて非常に不便です...
やはり、プレビューを見ながら編集はしたいですよね...
というわけで、次の節でこの問題の解決方法についてご紹介します！
Jupyter Lab内でHTMLのプレビューを表示する方法
実はというと先ほどの問題、すでにJupyterLabのプロジェクト内でissueとして上がっています。
そして、このissueにおいてJupyter Lab内でHTMLをプレビューする拡張について議論・実装がなされています。 特にJupyter Lab内でHTMLをプレビューする拡張はMax Levineさんによって実装されているようです。
問題の解決方法
というわけで、Jupyter Lab内でHTMLがプレビューできない問題を解決する手順は簡単。 Max Levineさんのjupyterlab_htmlをインストールするだけ。
方法は簡単で
$ jupyter labextension install @mflevine/jupyterlab_html
でOK。もし、ここでnodejsがないなどのエラーが出た場合は
$ conda install nodejs
を叩いてから、先ほどのコマンドを打てばOK。
そして、
$ jupyter lab
として、Jupyter Labを開くと..
のようにjupyterlab_htmlでビルドするかどうか尋ねてきます。 これを「BUILD」と答えれば自動でビルドが始まり、終わればJupyter Labをリロードするかどうか尋ねてきます。 これを「RELOAD」と答えて終了です！
簡単でしょ？
HTMLのJupyterLab内でのプレビュー
さて、実際にHTMLがJupyter Lab内でプレビューできるのか確かめてみましょう！ Jupyter LabでHTMLファイルを右クリックして、「Open With」の選択肢の「View HTML」をクリックすれば...
この通り！HTMLがJupyter Lab内でプレビューできます！
HTML+CSSのJupyterLab内でのプレビュー
もちろん、HTMLのプレビューだけでは物足りません。 実際はCSSなどでスタイルを指定したいのですが、実はそれもできちゃいます。
このHTML+CSSについては
で議論されていました。
簡単に言ってしまうと、HTMLファイルの頭に
<link rel="stylesheet" type="text/css" href='http://localhost:8888/files/${cssファイルのJupyterにおける絶対パス}'>
を入れるだけ。※CSSの絶対パスであることには注意してください！（ポート番号が8888でない方は適宜変更お願いします）
実際にやってみると、
この通り！うまくCSSが反映されていますね！
まとめ
今回の記事ではJupyter Lab β版（2018/12/19時点）において、HTMLファイルをプレビューする方法をご紹介しました。
issueの方を見ていると、ver.1ではHTMLはプレビューできるものとしてリリースされる可能性がありますね！ 非常に楽しみです😆
というわけで今回はここまで！
ご質問やご意見などございましたら、どんなに些細なことでも結構ですので、ぜひコメントよろしくお願いします！
