Monthly Archives: 8月 2021

2021-08-03

2021年夏の新番組

最近は1話が月末まで遅れることが多くなってきましたね。

初評 テレビ開始 テレビCh 作品名 ネット配信
－ 06/29(火) 25:34 日テレ ワンダーエッグ・プライオリティ 特別編  
△ 07/01(木) 22:00 MX ピーチボーイリバーサイド dアニメ
△ 07/01(木) 22:30 MX SCARLET NEXUS dアニメ
－ 07/01(木) 23:30 MX ひぐらしのなく頃に 卒  
△ 07/02(金) 24:00 MX ヴァニタスの手記 第1クール Amazon
－ 07/02(金) 24:30 MX 100万の命の上に俺は立っている 第2シーズン  
△ 07/02(金) 25:05 MX ぶらどらぶ(VLADLOVE) ※ネットでは既に配信済 dアニメ
△ 07/02(金) 25:25 TBS系 乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…Ｘ (第2期) dアニメ
△ 07/02(金) 25:50 TBS系 俺、つしま Youtube
× 07/02(金) 26:25 TBS カノジョも彼女 ABEMA
× 07/03(土) 22:00 MX ぼくたちのリメイク ABEMA
△ 07/03(土) 23:30 MX 魔法科高校の優等生 dアニメ
× 07/03(土) 25:00 MX かげきしょうじょ!! dアニメ
－ 07/03(土) 25:30 MX 現実主義勇者の王国再建記 FOD
△ 07/03(土) 25:30 テレ朝 RE-MAIN dアニメ
△ 07/04(日) 21:30 MX 天官賜福 -吹替版- dアニメ
○ 07/04(日) 22:00 MX 死神坊ちゃんと黒メイド dアニメ
－ 07/04(日) 22:30 MX アイドリッシュセブン Third BEAT! (第3期) 第1クール  
○ 07/04(日) 23:00 MX ゲッターロボ アーク dアニメ
× 07/04(日) 24:00 MX 探偵はもう、死んでいる。 dアニメ
△ 07/04(日) 25:00 MX 指先から本気の熱情2-恋人は消防士- dアニメ
× 07/05(月) 25:30 テレ東 うらみちお兄さん dアニメ
△ 07/05(月) 26:00 テレ東 精霊幻想記 ABEMA
△ 07/06(火) 23:00 MX 転生したらスライムだった件 第2期 第2部 dアニメ
－ 07/07(水) 07:05 テレ東 KICK＆SLIDE  
△ 07/07(水) 22:00 MX チート薬師のスローライフ～異世界に作ろうドラッグストア～ dアニメ
－ 07/07(水) 22:30 MX TSUKIPRO THE ANIMATION 2  
△ 07/07(水) 23:00 MX 月が導く異世界道中 dアニメ
△ 07/07(水) 24:00 MX 小林さんちのメイドラゴンS (第2期) dアニメ
△ 07/08(木) 24:00 MX 白い砂のアクアトープ ABEMA
－ 07/08(木) ～ Netflix BIOHAZARD(バイオハザード)：Infinite Darkness Netflix
△ 07/09(金) 22:30 MX 迷宮ブラックカンパニー dアニメ
× 07/10(土) 22:30 MX D_CIDE TRAUMEREI dアニメ
－ 07/11(日) 19:00 Eテレ ラブライブ！スーパースター!!  
－ 07/11(日) テレ東 闇芝居 第9期 Paravi
× 07/12(月) 24:00 MX 出会って5秒でバトル dアニメ
× 07/14(水) 25:05 MX 女神寮の寮母くん。 dアニメ
－ 07/14(水) 24:55 フジテレ NIGHT HEAD 2041 FOD
× 07/15(木) 24:30 MX Sonny Boy -サニーボーイ- dアニメ
△ 07/18(日) 24:30 BS日テレ 戦乙女の食卓Ⅱ YouTube
－ 07/20(火) ～ WEB配信 アサルトリリィふるーつ  
△ 07/22(木) 24:55 フジテレ 平穏世代の韋駄天達 Amazon
－ 07/31(土) 24:00 MX マギアレコード 魔法少女まどか☆マギカ外伝 2nd Season  
△ 07/31(土) 26:00 テレ朝日 ジャヒー様はくじけない！ dアニメ

今期は不作……凶作ですかね？

2021-08-03 ,

org-modeのコードブロックでHTMLを「実行」する

org-modeのコードブロック(org-babel)でHTMLを書いているとフラストレーションが溜まります。なぜならば書いたHTMLの結果を確認しづらいからです。

org-modeにはob-html.elが定義されていません。なので org-babel-execute:html も定義されておらず通常のコードブロックを評価する方法(C-c C-c)でHTMLを実行出来ません。

HTMLの実行とは何か

ちょとまって。実行？　HTMLの実行とは何でしょう。HTMLはマークアップ言語ですからプログラミング言語のように実行と言われても何をするのかよく分かりません。ob-html.elが無いのはおそらくそのためではないでしょうか。

私が思う実行とは何でしょうか。

ブラウザで開く
HTMLの実行と聞いて真っ先に思い浮かべるのはブラウザで開くことでしょう。プログラミング言語では無いと言いますが現実的にはもはやアプリケーションプラットフォームでもあります。
HTMLをそのまま文書に埋め込む
例えばコードブロックを使ってHTMLの書き方を説明したとしましょう。表の書き方、段落の書き方、強調の書き方等々。エクスポートしたときにHTMLの書き方(コード)と表示結果を並べて表示したいことがあります。そのとき、HTMLでエクスポートするならコードの後にそのHTMLそのものを埋め込めれば手っ取り早く結果をブラウザで表示できるはずです。
単にHTMLをそのままファイルとして書き出す
単にそのまま別ファイルに書き出してくれれば十分なこともあるでしょう。結果欄にはそのファイルへのリンクを表示すれば読んでいる人はそれをクリックして結果を確認することが出来ます。ちなみに単に書き出すだけなら :tangle というヘッダー引数があるのですが、これは文芸的プログラミングのためのものでバッファ内のものを一度に全部書き出すコマンドしか見当たらず何だか用途が違う気がします。通常の :results file :file filename で書き出したいところです。
HTMLの文字列そのものを結果とする
コードブロックに書いてあるテキストをそのまま結果とするという考え方も出来ます。実はob-org.elはそうなっています。別の所から参照して活用するのに使えそうです。ちなみに上の二つの「実行」はこれが実現出来るだけで自動的に実現出来ます。「そのまま」というのがミソですね。前者はそのままhtmlエクスポートブロックにするだけ。後者はそのままファイルに書き出すだけです。結果をそのまま返すだけでエクスポートブロックで囲んだりファイルに書き出す処理はOrg Babel側でやってくれます。
スクリーンショットを撮る
結果を画像で表示できれば便利です。これを実現する方法はこれまでにいくつか見たことがあります。ネットを探すとPhantomJSやヘッドレスChromeを使用してスクリーンショットを取れるようにした事例が見つかります(krisajenkins/ob-browser, ob-html-chrome/ob-html-chrome.el)。
ブラウザで開きセッションを維持する
単にブラウザで開くだけで無く、開いたらそのままセッションを維持して、続くJavaScriptのコードブロックをそのセッションで実行できたら面白いのではないでしょうか。JavaScriptからHTML(というかDOM)を操作する方法を解説したいときに便利かもしれません。

とりあえず私がパッと思いつくのはこのくらいでしょうか。HTMLは単なる文書ですから、他にもいくらでもやりたい動作はあることでしょう。

ob-html.el を作る

まず ob-html.el が無いことが問題です。せめて ob-org.el レベルの物は用意しておいて欲しい所ですが無いのだから仕方ありません。

というわけで作りました。

misohena/ob-html

これを読み込ませるとHTMLのコードブロックが評価できるようになり、その結果を #+RESULTS: の場所に埋め込むことが出来るようになります。具体的には次のことが出来るようになります。

HTMLとしてそのまま埋め込む

次のコードブロックは評価するとHTMLのエクスポートブロック(#+begin_export html ～ #+end_export)になります。 

#+name: ob-html-ex1-1
#+begin_src html :exports both :results html :cache yes
<p><strong>つよつよ</strong> <ins>追加</ins> <del>削除</del></p>
#+end_src

上のHTMLは次のように表示されます。

#+RESULTS[9621841e579ea4feee64be832813d72c5428d389]: ob-html-ex1-1
#+begin_export html
<p><strong>つよつよ</strong> <ins>追加</ins> <del>削除</del></p>
#+end_export

上のOrg文書はHTMLでエクスポートすると次のように表示されます。 

<p><strong>つよつよ</strong> <ins>追加</ins> <del>削除</del></p>

上のHTMLは次のように表示されます。

つよつよ 追加 削除

外部にHTMLファイルを生成し、そのファイルへのリンクを埋め込む

次のコードブロックは評価すると外部にhtmlファイル(example.html)を出力しそのファイルへのリンクが結果になります。 

#+name: ob-html-ex2
#+begin_src html :results replace file :file example.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>Hello</body>
</html>
#+end_src

どう表示されるかは下をクリックしてね。

#+RESULTS: ob-html-ex2
[​[file:example.html]]

:results には file を指定します。

外部にスクリーンショット画像ファイルを生成し、そのファイルへのリンクを埋め込む

次のコードブロックは評価すると外部にスクリーンショットを含むpngファイル(example.png)が生成されそのファイルへのリンクが結果になります。 

#+begin_src html :results replace file graphics :file example.png :width 320 :height 64
<!DOCTYPE html>
<html>
  <head>
    <title>Hello2</title>
  </head>
  <body>Hello2</body>
</html>
#+end_src

#+RESULTS:
[​[file:example.png]]

:results には graphics を指定します。

スクリーンショットはとりあえずChromeのコマンドラインオプション(いわゆるヘッドレスChrome)で取得するようにしてあります。事前にchromeへのパスを正しく設定する必要があります。

C-c C-oでブラウザで開く

以上は何らかの結果を生成して #+RESULTS: のところに埋め込む方法でした。

しかし肝心の「ブラウザで開く」がまだ実現出来ていません。

org-modeからブラウザで開くというのはorg-babelの「評価」とは何か根本的に違うような気がします。私は別にファイルを書き出したいわけでは無いんです。ファイルを書き出されると管理が面倒なので出来れば書き出して欲しくありません。評価して結果を得たいわけでも無いんです。単にブラウザで見たいだけなんです。

「評価」というよりは「開く」と言った方が良さそうです。

開くと言えば C-c C-o 。org-modeだと org-open-at-point に割り当てられていてポイントにある要素を良い感じに開いてくれます。HTMLコードブロックの上で C-c C-o したら即ブラウザで表示してくれたら便利ではないでしょうか。実は結果がファイルになる場合はすでにそのファイルを開いてくれるようになっています。上の例で言えば、二番目(example.html)と三番目(example.png)は C-c C-o でファイルが開きます。しかし次のように結果が出力されないコードブロックで C-c C-o しても何も起きません。 

#+begin_src html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>Hello</body>
</html>
#+end_src

このようなコードブロックはファイルが関連付けられていないのでブラウザで表示するのは難しいのですが、一時的にテンポラリファイルに書き出してブラウザで開き、その後テンポラリファイルを削除するというのはどうでしょう。

ob-html.elにそのような機能を追加してみました。 (org-babel-html-enable-open-src-block-result-temporary) 関数を呼び出すと org-babel-open-src-block-result 関数にadviceをかけてテンポラリファイルで表示できるようにします。 

(require 'ob-html)
(org-babel-html-enable-open-src-block-result-temporary)

:results silentの時はブラウザで開く

ob-html.elでは:resultsのデフォルト値はsilentにしました。これは ob-org.el がそうだったのでそれを踏襲しました。org-mode全体でのデフォルトはreplaceなのになぜsilentなのでしょうか。org言語は結果を求めるものでは無いという考えがあるのかもしれません。それならばhtmlも同じです。

デフォルトでsilentなので何もヘッダー引数を指定しなかった場合は評価しても何も起こりません。 #+RESULTS: も挿入されません。エクスポートブロックや外部ファイル、画像を生成したければreplaceを指定する必要があります。

silentのときはほとんど何もしないわけですから、このときブラウザで開いてみるのはどうでしょう。

困るときもありそうなので設定で開くかどうか決められるようにしておきました。

セッション対応

残るはセッション対応ですが、これは少し保留させてください。

いくつかやる方法は考えつくのですが、これはhtmlコードブロックだけの範囲を超えています。JavaScriptコードブロックの改善も一緒にやらなければ意味がありません。

2021-08-03-ob-html-screenshot.png
2021-08-01 ,

EmacsのSkewerでライブWeb開発を試す

先日IndiumというJavaScriptの開発環境を試してみましたが、今回はそれと似た用途に使えるSkewerというものを試してみました。

skeeto/skewer-mode: Live web development in Emacs

SkewerはEmacsでライブWeb開発をするためのツールだそうです。

Emacs側で入力したJavaScriptをブラウザ側で実行する仕組みがコアになっています。Indiumと同じようにREPLやソースファイル内のJavaScriptをブラウザ側で実行できます。

また、その仕組みを応用してHTMLやCSSの現在編集している部分をブラウザに反映させる機能もあります(skewer-html-mode, skewer-css-mode)。

変更とリロードを繰り返すのでは無く、編集した部分だけを逐次ブラウザに反映させていきながら開発するスタイルということでライブ開発と呼んでいるのでしょう。

インストール方法

M-x package-install skewer-mode

simple-httpd や js2-mode も一緒に入ります(入っていなければ)。

JavaScriptの実行(ソースコード上とREPLバッファ)を試す

skewerサーバの起動

M-x run-skewer

→ ブラウザで 127.0.0.1:8080/skewer/demo が開きます。

(動作の詳細: M-x run-skewer を実行するとEmacsで実装されたhttpサーバが起動しローカルホスト(127.0.0.1:8080)の /skewer というURLでEmacs側と通信するスクリプトが取得できるようになります。 /skewer/demo ページはそのスクリプトを読み込んでいます。読み込まれたスクリプトは /skewer/get や /skewer/post 等のURLにアクセスしてEmacs側と通信し、Emacs側からの要請に応えてブラウザ側で動作します)

(M-x list-skewer-clients を実行するとクライアントが一つ接続されていることが確認できます)

REPLを試す

  1. M-x skewer-repl

    → *skewer-repl* というバッファが開きます。

  2. REPLに alert("hello"); と入れる

    → ブラウザ側でアラートダイアログが出ます。

  3. REPLに document.documentElement.innerHTML と入れる

    → バッファに "<head>\n <title>Skewer</title>\n <script src=\"/skewer\"></script>\n </head>\n <body>\n \n\n</body>" と出ます。(使っているブラウザの拡張機能によってはもっと複雑なコードが出る場合もあります。Evernote Webクリッパー！)

ソースファイルの実行を試す(skewer-mode)

  1. 適当な場所にexample.jsというソースファイルを作る(私は普段からjs2-modeを使っています) 

    var cv;

if(!cv){
    cv = document.createElement("canvas");
    cv.width = 640;
    cv.height = 480;
    document.body.appendChild(cv);
}

var ctx = cv.getContext("2d");
ctx.clearRect(0, 0, 640, 480);
ctx.fillStyle = "#28f";
ctx.fillRect(0, 0, 640, 480);

ctx.fillStyle = "#4c2";
ctx.fillRect(0, 360, 640, 120);
  2. Emacsでソースファイルを開いて M-x skewer-mode

  3. ソースファイル内で C-c C-k (skewer-load-buffer) を実行する

    → ブラウザに絵が表示されます。

  4. ソースコード内の色(#xxxの部分)や座標などをいじって何度も C-c C-k

    → 都度変更が反映されます。

  5. C-c C-z

    → REPLバッファが出ます。

  6. REPLに document.body.innerHTML と入力する

    → うわぁ、見るんじゃなかった。どうやってロードしているのかが分かります。

HTMLの更新を試す

  1. M-x httpd-serve-directory で好きなディレクトリを指定

    → 127.0.0.1:8080/ でアクセスできるディレクトリ(ルート)がそのディレクトリになります。

  2. そのディレクトリの下にindex.htmlを作る 

    <!DOCTYPE html>
<html>
  <head>
    <title>Skewer Example</title>
    <script src="/skewer"></script><!-- これが重要 -->
  </head>
  <body>
    <p id="hello">hello, world</p>
  </body>
</html>
  3. ブラウザで 127.0.0.1:8080/index.html を開く
  4. Emacsでindex.htmlを開き M-x skewer-html-mode

  5. worldをworlddddに変更して その場所で C-M-x (skewer-html-eval-tag)

    → ブラウザに反映されます。

    C-M-xではカーソル(ポイント)を置いている要素のみ更新されます。ただしbodyは更新出来ません。

    色々試してみると分かると思いますが、要素の順番を入れ替えたりすると正しく更新されなかったりします。

他にもskewer-css-modeを使えばcssファイルの更新も行えるようです。

任意のページをskewerと接続する

上の例はhtmlにscriptタグを埋め込まなければならないのがちょっとイケてませんよね。

実は必ずしもscriptタグを埋め込まなければならないわけではありません。要は http://127.0.0.1:8080/skewer からJavaScriptを読みさえすれば良いのです。

例えばブラウザのアドレスバーから javascript: プロトコルでスクリプトを読み込むという方法があります。次の文字列をアドレスバーに打ち込むとその時開いているページにskewerのスクリプトが読み込まれEmacsと繋がります。 

javascript:(function(){var d=document;var s=d.createElement('script');s.src='http://localhost:8080/skewer';d.body.appendChild(s);})()

このURLをいわゆるブックマークレットにすれば簡単に好きなページとEmacsを接続できます。

他にも開発者用のコンソールからこのコードを実行する方法もあるでしょう。

Emacsパッケージに入っているskewer.jsを別サーバへコピーしてそこから読み込むのはNGです。あくまで M-x run-skewer で起動したEmacs上のhttpdサーバから読み込む必要があります。

この方法で任意のページ(ローカルファイルを含む)でREPLする手順は次のようになります。

  1. M-x run-skewer
  2. 好きなページをブラウザで開く

  3. 次のコードをそのページで実行する(ブックマークレットにしておくとクリック一つで実行できます) 

    (function(){var d=document;var s=d.createElement('script');s.src='http://localhost:8080/skewer';d.body.appendChild(s);})()

  4. M-x skewer-repl

    → *skewer-repl* というバッファが開きます。

  5. REPLに document.body.insertAdjacentHTML("afterbegin", "<p>hello!</p>"); などと打ち込む

    → ページの先頭にhello!と表示されます。

手打ちでhtmlやcssを編集しているときに思いついたら接続して更新を確認しながら作業するといったことが出来そうですね。

終了方法

ブラウザでskewerと繋がっているページを全て閉じます。閉じると M-x list-skewer-clients (gで更新)に出てくるクライアントが消えます。

M-x httpd-stop でhttpサーバが止まります。

org-modeのコードブロック(babel)から使う？

Org-babel-jsによればorg-modeのJavaScriptコードブロック(ob-js.el)はSkewerに対応しているようなこと書かれています。ヘッダー引数に :session "*skewer-repl*" を指定するのだとか。しかし実際にやってみると executing Js code block... というメッセージが出たまま待てど暮らせど反応が返ってきません。ob-js.elを見てみると org-babel-js-initiate-session でreplバッファが無いか無効ならskewerを起動しているのですが、新しく作成したREPLバッファではなくその無い(nil)か無効かのバッファを返しています。そこを直してみても今度はコードをブラウザに送り出した後反応が返ってきません。

Issueに上がっていた方法を試してみましたがこちらもサーバ側でエラーが出て正しく動作しませんでした。

Modification: make org babel js blocks use skewer when it is connected · Issue #65 · skeeto/skewer-mode

解決するにはもう少し詳しく調査する必要がありそうです。

SkewerとIndiumの比較

SkewerもIndiumもEmacs側のJavaScriptをブラウザで実行できるという点は同じです。

単にREPLがしたいだけならSkewerの方が少しだけ簡単でしょうか。Indiumは必ず設定ファイルを作らなければなりませんしデバッグ機能を有効にしたChromeを起動しなければならないので。

依存する外部ツールが少ないのもSkewerの良いところです。Node.jsは不要ですしブラウザもChromeに限定されません。

幅広いブラウザで使用できるのもSkewerの良いところです。IndiumはChromeのリモートでバッグ機能が必要ですが、Skewerはページに専用のスクリプトを注入することで実現しています。

HTMLやCSSを視野に入れている点もSkewerの良いところです。IndiumはあくまでJavaScriptの開発環境です。ただ、SkewerのHTMLやCSSの部分更新は(原理上)正しく機能しない場合も多々あります。

Skewerには本格的なデバッグ機能はありません。ブレークポイントを置いたりステップ実行したいならIndiumを使う必要があります。

SkewerはNode.js用のJavaScriptには対応していません。JavaScript開発というよりはあくまでWeb開発のためのツールです。

Skewerは侵入的であるのに対してIndiumは非侵入的です。Skewerはページにスクリプトを注入しなければなりません。それがページの動作に干渉する可能性はゼロではないでしょう。また、スクリプトを注入する方法を色々考えなければなりません。EmacsからブラウザへJavaScriptを読み込むときもbodyにscript要素を追加することで実現しています。気がつくとbodyがscriptだらけになっていることがありました。

全体的な完成度はChromeのデバッグ機能を使うという筋の良さも手伝いIndiumの方が高い気がしますが、一方で致命的なバグやドキュメントの不親切さも目立ち今回試すにあたってIndiumはかなりハマりました。

今回SkewerやIndiumを試したのはorg-modeのコードブロックから使えるのではないかと期待したからなのですが、結局どちらも使えなかったのにはガッカリしました。

© 2025 AKIYAMA Kouhei, all rights reserved.