ノート/ノート
訪問者数 1030      最終更新 2017-04-18 (火) 09:12:19

2017/04/15 jupyter notebook と markdown でスライドを作るときのメモ

オーバービュー

                           +-> 専用環境内で表示
 +----------------+       |
 | 文書本文を     | -表示-+-> 専用ソフトで変換
 | markdownで記述 |       |
 +----------------+       +-> ホームページとして表示
 専用環境の場合もあるし         表示javascriptを読み込む
 テキストエディタのこと
 もある

markdownとは

文書やスライドの「整形」を、MSWordやPowerPointではGUIによって場所と形を選択するが、
markdownでは原稿の文と一緒にコマンドを(文字で)書込み、それを整形して表示する。
同じ考えのものは、様々なWiki、文書整形システム(TeXなど)、ホームページ(のタグ)などがある。

利点は

理解しなければならないのは、

markdownの書き方(備忘録)

Markdown記法一覧 や Markdown記法 チートシート を参照。
Markdownの原文については、Daring Fireball: Markdown Syntax Documentationを参照。

見出し(h1など)# (後にスペースを置くこと)<br> ## (h2)、### (h3)
アイテムリスト-か+か* (後にスペースを置く)
番号リスト数字. (数字は何でもいいらしい)
改行行末にスペース2つ
行内コード表示`hoge`
コードブロック行頭にスペース3つか、タブ、また```で囲むというのもあり

専用環境atomでの扱い

markdown編集・整形出力用のいろいろなソフト(アプリ)がある。たとえばGitHub上に上げるためのkobitoとか。

ここではatomを使ってみる。atomは、markdownの入力と、(同時)整形表示ができる。

元々は、atomは汎用で、プラグインによって機能を追加する形で実現している。

jupyter notebook環境で

jupyter notebook 環境では、markdownのセルが書ける。

markdownセルにするには、セルを選択した状態で、上部CellタブからCell Typeを選択し、markdownを選択する。markdownのセルは、Ctrl-Enterで整形表示される。

Cell TypeでCodeを指定するとコードを書くセルになり、markdown表示できない。

スライドにしたい場合は、更にそれぞれのセルの右肩のSlide TypeをSlideやSubSlideに指定。これが空欄のままだと、スライド表示の時にそのセルが含まれなくなる。

画像ファイルは、今編集しているmarkdownのファイル(ipynbファイル)と同じディレクトリに置く。

公開用にホームページ化(html化)する

完成したら、FileタブでSave and Checkpointでセーブしておき、コマンドプロンプト画面からコマンド nbconvert を使ってhtmlに変換することができる。コマンドは

nbconvert --to slides <ipynbファイル名>

変換されたhtmlファイルは画像等は含まないので、常に同じディレクトリ上に画像ファイルをすべて持たせておくこと。つまり、Webサーバーの表示用ディレクトリへコピーする場合に、画像ファイルも一緒にコピーすること。また、reveal.jsディレクトリ以下のファイルもコピーすること。

SE-Linux環境では、コピーしたHTMLファイルや画像ファイルが、Webサーバープログラム(httpd)からアクセスできない(アクセス権限が足りない)ケースがある。そのファイルを閲覧しようとすると、404 Forbiddenが出たりする。そのファイルの属性を見るために、lsコマンドで-Zオプションを付けてみると、

$ ls -lZ mytest.html
-rw-rw-r--. yamanouc yamanouc unconfined_u:object_r:user_home_t:s0 mytest.html

と出たりするが、下の場合に比べて分かる通り、Webサーバーのアクセス権限がない。

ls -lZ AE-mytest.html
-rw-rw-r--. yamanouc yamanouc unconfined_u:object_r:httpd_user_content_t:s0 mytest.html

のように、httpd_user_content_t の属性が付いていなければならない。上位のディレクトリノードがhttpdの属性を持っていれば、その下に作ったファイルは継承するのだが、他からコピーして持ってきた場合には継承しないらしい。

ファイルに、属性を個別にいろいろと設定をするとできるようだが、簡単な方法として、

$ restorecon ファイル名

とするとよい。(たいていうまく行く)この辺はいろいろなところに書いてあるが、たとえば [[ 新SELinux入門 第5回 タイプを変更してトラブルに対処する:http://dpsnet.ddo.jp/MEMO/itpro013.htm]] など参照。

PDF化

スライドをPDFファイルに変換するには、まずブラウザで表示しておいて、

http:// ... hostname ... / ... directory ... /presentation.slides.html/

その次に、URLに「?print-pdf」を追加する

http:// ... hostname ... / ... directory ... /presentation.slides.html?print-pdf

これで開いた状態(js上ではpdf-printが読み込まれている)で、ブラウザの印刷(ctl-Pもしくは 右クリックで「印刷」)。
これによって全ページがPDF化され、「保存」の指定でファイルに保存できる。

大きさが1ページに収まらない(縦に長い)ページは、2ページに印刷されるので、注意。結局はソースを短くなるように修正するしかなさそうだ。しかも、PowerPointなどと違って簡単にフォントサイズや行間を変更できない(らしい)ので 〜そこが楽な点でもあるのだが〜 原稿を修正することになる。

画像を縮めるのは、markdownではできないらしい。(markdownの画像取り込みコマンドには、 サイズ指定用のパラメタは無い。) 代わりとして、画像取り込みにHTMLの<img>タグを使うことになる(と書いてあるページがたくさんあった。)

<img src="hogehoge.png", width="480px">

とかできる。

また、コンテンツを横に2つ並べること(つまり2カラム)は、これまた、できないらしい。 1つ可能なのは、表を作ること。特に画像を2つ並べるときには結構便利かも知れない。あまり 思ったようにはならないのだが。

markdown記法で画像を入れた場合、大きさのコントロールはできないので、大きさは左右バラバラになる。

| 例1     | 例2    | 
|:---------------:|:--------------:|
| ![](tank1.jpg)  | ![](tank2.jpg) |

大きさをコントロールしたければ、<img>タグで入れる。

|  |  |
|:--:|:--:|
| ![](w2v.png)  | <img src="w2v-mechanism.png" width="280px"> |

両方<img>にしてもよいのだが、この例では左側は元のサイズのまま。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-04-18 (火) 09:12:19 (243d)