1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

google colabを使用してきれいにhtml出力する方法

Posted at

Google ColabでノートブックをきれいにHTML化する方法 (初心者向け解説)

概要

ローカル環境(ブラウザ上でなく、PC上)でJupyterのHTMLエクスポートがうまくいかない人向けに、Google Colabを使ってノートブックをHTMLに変換する方法を紹介します。

以下の手順を踏めば、Colab上で課題を作成し、HTMLファイルとして出力できます。

ステップ 0: google Colabとはなにか

google Colabは接続すると、仮想環境(自分のpcとは切り離されたリモート環境)に接続されるので、自分のpc環境に依存せずに開発できます!

google colabって打つと出てくるページにアクセスするともうプログラミングできます。楽。

ページ上でファイル(.ipynb)を保存すると基本的にログインしてるgoogleアカウントのdrive上の/MyDrive/Colab Notebooksに保存されます。


ステップ 1: 課題用ノートブックの作成

まず、Colabで課題を記述したノートブック assignment.ipynb を作成します。
(ファイル名は自由、以下assignment.ipynbとして話を進めます。)
Screenshot from 2025-04-15 22-38-47.png

※ コード・テキスト・図などを使って課題を作成してください。
image.png


ステップ 2: HTML化用のノートブックを作成

別のノートブック to_html.ipynb を作成し、以下のコードを実行します。

# Google Driveをマウント(保存先として)
from google.colab import drive
drive.mount('/content/drive')

# nbconvert を使用するためにjupyterをインストール
!pip install notebook

# assignment.ipynb を HTML に変換 assignment.ipynbの部分は自分で読みかえてください
!jupyter nbconvert ./drive/MyDrive/Colab\ Notebooks/assignment.ipynb --to html

!jupyter nbconvert ./drive/MyDrive/Colab\ Notebooks/assignment.ipynb --to htmlの部分はhtml化したい.ipynbファイル名に各自置き換えてください。

このノートブックにGoogle ドライブのファイルへのアクセスを許可しますか?というポップアップはすべて許可してください。

エラーなく実行できたら、接続しているgoogleアカウントのGoogle drive上のの/MyDrive/Colab Notebooks 上にassignment.htmlがあるはずです。これをダウンロードして、インストールしたブラウザで開いて、pdfとして出力して完了!
image.png

おわりに

いかがでしたか?この方法ならブラウザ上で完結できますし、to_html.ipynbは毎週、課題ごとに使い回せていいですね。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?