なーたのおぼえがき

なーたのおぼえがき

つくったものとか

Google colaboratoryをpdfに変換して出力する

気候がやばいですね。上がったり下がったりで体調の死。
COVID-19の影響で大学がオンラインになりました。引きこもり最高。
でも一人でやっているとモチベーションがご逝去なさるので学友とzoomつないだまま講義受けてます。これはこれで楽しい。

さて本題。オンライン講義が始まって「Google colaboratoryつーかうよ」といわれました。レポートはPDF形式で提出、作り方は好きにしーてね。
どうせ実行結果とコードを貼るしそのままcolabでやっていいよとのことだったのですが、書き出しできなくない??という内容以外で詰まるという地獄。
ちまちま調べて暫定手順が決まったので備忘録。あとできなくてひーん(泣)ってしてる人いるかもしれないしちらっとまとめてみます。
先生から指示があったらそっちに切り替えたい…

前提条件

  • 使用するのはGoogle colaboratory(.ipynbファイルで説明)
  • ローカルに何か入れるのは面倒なので無し
  • HTMLがそれなりにわかっている人向け(わからなくても問題はないが体裁を整えるのに必要)

とりあえずここではGoogle driveのマイドライブ直下に「Colab Notebooks」というフォルダがありその中にPDFにしたいファイルが格納されているという状況から始めます。
えーとつまり
 MyDrive > Colab Notebooks >PDFにしたいファイル.ipynb
という状況。

それではいってみよー

全体の流れ

  1. 新しいファイルを作成
  2. apt-getでnbconvertと環境を入れる
  3. nbconvertで変換する
  4. 体裁を整える

新しい .ipynbファイルを作成する

まず、PDFにしたいファイルがあるよね。
f:id:Clairdeluna_eve:20200520083300p:plain
どこからでもいいんだけど新しいColabのファイルを作成します。
PDFにしたいファイルを開いていたら左上の「ファイル」>「ノートブックを新規作成」。
そうするとまっさらなファイルができます。
f:id:Clairdeluna_eve:20200520083654p:plain

環境の導入

Google colaboratoryは「!」を前につけることでunix系コマンドが使えるよ。
ここに

!apt-get install texlive texlive-xetex texlive-latex-extra pandoc
!pip install pypandoc

と入力して実行。
見てわかる通りTexだったりPandocをインストールしています。
ちょっと時間かかるけど終わったら

from google.colab import drive
drive.mount('/content/drive')

これを入力して実行。
ColabとDriveの連携をさせる処理。左のタブからドライブマウントしてたらいらないかもしれにゃ。
ちょっとしたら止まって入力スペースみたいなのが出てくる。そしたらその上にある「Go to this URL in a browser」の行のリンクをクリックして認証フェーズへ。
連携したいGoogleアカウント(PDFにしたいファイルが入っているドライブのアカウント)でログイン。そうしたら認証コードが出てくるのでコピーして入力スペースに貼ったらEnter。するとマウントできたよ実行おーわりってなる。

変換

画像はなんかあるらしいけど詳しく知らない。

日本語も画像も含まれていないファイル
!cp drive/My\ Drive/Colab\ Notebooks/[PDFにしたいファイル名].ipynb ./
!jupyter nbconvert --to PDF "[PDFにしたいファイル名].ipynb"

を実行するとしばらくだぁーーって文字が流れて変換プロセスを教えてくれます。
で、実行終了した後最後から二行目に「PDF successfully created」と出ていたら変換が成功しています。エラー吐かれたらメッセージよく読んで原因排除してもっかいやってね。
f:id:Clairdeluna_eve:20200520085632p:plain
左側のタブの囲ってるとこに[PDFにしたいファイル].pdfって出てくるのでダウンロードすればOK。

日本語の含まれているファイル

日本語の含まれているファイルは上の方法でじかに変換すると
f:id:Clairdeluna_eve:20200520090614p:plain
こんな感じに文字化けします。理由は出力に使用するテンプレートでascii-onlyつまり英数だけねって設定があるから。ローカルに環境作ってて変換するならテンプレートファイル作れば一瞬で終わるんだけど、残念ながら他人のサーバに投げているので設定が見れない(というか見る方法がよくわかってないので知っていたら教えてください)。
そこで

!cp drive/My\ Drive/Colab\ Notebooks/[PDFにしたいファイル名].ipynb ./
!jupyter nbconvert --to HTML "[PDFにしたいファイル名].ipynb"

と変換先をHTMLファイルにして実行します。
そうするとPDFではなくHTMLで出力されるよ。実行が終わったら
f:id:Clairdeluna_eve:20200520085632p:plain
左側のタブの囲ってるとこに[PDFにしたいファイル].htmlって出てくるのでダウンロード。

体裁を整える

ダウンロードしたhtmlファイルをエディタとブラウザで開いていい感じに整えてください。
このhtmlファイルは構成としてはCSS→HTMLという流れで記載されているよ。
HTML5の形式ではあるけど、sectionやarticle等の意味のあるタグ、figureなどの可読性を高めていくやつは全く含まれず、ありとあらゆるをdivで囲う地獄みたいなやつです。コード部分はspanやpreで構成されているのでコードの可読性は捨てて、画像サイズとかを(推奨はされないけど)styleやwidthなどで編集するのがいいと思うよ。CSSも数千行に及ぶので見ない方がいい。
あと実行結果が図の場合BASE-64(おそらく)で書かれているので面白いよ。

HTMLわからん勢のための例

基本的にHTML内にCSSというかスタイルを書くのは推奨されていないけど、今回はやむを得ないという認識でいてね。
idやclass、srcがあるものはその後ろに「style=""」と記載してダブルクオートの中にスタイルを書いていきます。基本的に「プロパティ:値;」という形式だよ。

画像サイズ

<img src="画像のソース" width="300px" height="300px"> 

文字の配置(上から中央ぞろえ、右寄せ、左寄せ)

<h1 id="文字列" style="text-align:center;">見出し<h1>
<p id="文字列" style="text-align:right;">文章<p>
<p id="文字列" style="text-align:left;">文章<p>

各タグ

h1 一番大きな見出し
h2 二番目に大きな見出し
div ここからここまで一つの塊ですよという印
p 内容などの文
span インライン要素というグループ化の単位
img 画像。srcは画像の場所やそのものを指す

詳しくは調べるといいよ。

PDFにする

体裁を整え終わったらWebサイトを印刷する手順を取ります。(画像はChrome)
f:id:Clairdeluna_eve:20200520094412p:plain
印刷ダイアログを開いて
f:id:Clairdeluna_eve:20200520094641p:plain
送信先から「PDFに保存」、そして右下の「保存」をクリック。
ちゃんとプレビューを確認して、変なずれとかあったらHTMLに戻って体裁を整えてね。
ファイル名とかパスが入っているのが嫌な人は印刷ダイアログの詳細設定から余白をなしにすると消えます。

別の方法(2020/5/22追記)

Google colaboratoryの画面から直にPDFに直せます。
f:id:Clairdeluna_eve:20200520083300p:plain
f:id:Clairdeluna_eve:20200520094412p:plainf:id:Clairdeluna_eve:20200520094641p:plain
この流れ。でも文字だのなんだのが見切れたりおさまらなかったりする。これでやってみて問題なければこっちのほうが楽だけど、ページ送りが大変なことになってしまうので個人的にはHTMLに書きだす方をおすすめしたい。できる状態はほとんど変わらないよ。

以上
Wordみたいにきれいな文書にはならないけど、そのままできるのはいいよね。レポート書きなおすのがだるだるだったのでレイアウト?知ったことか!というノリです。
きれいに吐き出させる方法ないのかなー…


ローカルにいーれよって人はこのへん
cartman0.hatenablog.com
github.com

参考にしたのは
hellorusk.net