TinyMCE(WYSIWYG Editor)とDataCamp Lightの相性が悪い話(未解決)
arakaki R, mezzanine, python 2019-03-01 25 のコメント

はじめに

ウェブアプリとデータサイエンスを融合できたら面白いだろうなーと常々考えているあらかきです。そんな訳でRのウェブアプリケーションフレームワークであるshinyなんかにも手を出している(けど全然やってない)んですが、この度DataCamp Lightなる素晴らしいサービスを知り試してみました。

百聞は一見にしかず、こんなのです。(記事一覧ではPython, こっちはR。[Run]から5秒ぐらい掛かります。)

Rのスクリプトはこちらから拝借しました。ggplot2の使い方を丁寧に解説してくれてます。

これで学習記録をブログに残しつつ、見返して気になった部分をすぐ修正して実行できるやん！と夢が広がりました。

ところが、DataCamp Lightを当ブログに埋め込むのは一筋縄ではいかず…。

できてるやん！って感じですが、結論から言うと実はこれiframeで無理やり埋め込んでるだけなのです。原因はタイトル通りTinyMCEでして、今回はそんなうまくいかなかった経緯と今後の対策を記録しておきます。

DataCamp Lightとは？

そもそもDataCampがなにかというと、データサイエンスに特化したオンライン学習サービスのようです。日本語で分かりやすい情報はこの記事ぐらいでしょうか。

で、そんなDataCampが簡単にエクササイズを公開できるように提供してくれているのがDataCamp Lightです。

the embeddable version of DataCamp - DataCamp Light

さらに、

Works for both R and Python. Sessions are maintained on DataCamp's servers.

Works for both R and Python. Sessions are maintained on DataCamp's servers.

スクリプトの実行はDataCampのサーバーで行い、なんならセッションも保持してくれる！太っ腹！

利用方法

使い方もとっても簡単。GitHubのページを見ればわかりますが、

Add the script to your HTML page (there is an example in examples/standalone-example.html):

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

That's it! ...

GitHub - datacamp/datacamp-light: Convert any blog or website to an interactive learning platform for data science

cdnのコードを埋め込むだけです。

ただし、上の説明はひっかけでうまく動きません。正しくはこうです。

<script async src="https://cdn.datacamp.com/dcl-react.js.gz"></script>

asyncで非同期に処理しないと永遠に読み込まれなかったり、読み込みが著しく遅くなったりしますのでお気をつけください。(参考：DataCamp Light | Standalone exampleのソース)

おせっかいTinyMCEの自動整形機能

で、早速ブログ記事に埋め込んでやろうとしましたが早々に問題が発生しました。

ページ冒頭のサンプルは以下のようなコードなんですが、

<div data-datacamp-exercise data-lang="r" data-height="400">
  <code data-type="sample-code"> 
    library("ggplot2")
    ggplot(iris,aes(x=Petal.Length,y=..density..,fill=Species))+
      geom_histogram(position="dodge")+
      geom_density(alpha=0.5)
  </code>
  <div data-type="hint">Just press 'Run'.</div>
</div>

これを直接ソースコードから入力して、

「OK」して改めて開くと、

<div data-datacamp-exercise="" data-lang="r" data-height="400"><code data-type="sample-code"> library("ggplot2") ggplot(iris,aes(x=Petal.Length,y=..density..,fill=Species))+ geom_histogram(position="dodge")+ geom_density(alpha=0.5) </code>
<div data-type="hint">Just press 'Run'.</div>
</div>

こんなふうに改行が消され、属性には勝手に空文字が与えられ…。

DataCamp Lightでは<code>タグ内の改行がそのまま反映するようになっていて、RやPythonのスクリプトは行単位で実行されるので、これではうまく動きません。

説明が前後しましたが、このエディタがTinyMCEです。

Mezzanine CMSとTinyMCE

このブログはDjangoベースのMezzanine CMSで作っています。そしてMezzanine CMSのWYSIWYG EditorはデフォルトでTinyMCEになっています。

By default, Mezzanine uses the TinyMCE editor to provide rich editing for all model fields of the typemezzanine.core.fields.RichTextField.

Admin Customization — Mezzanine 4.3.1 documentation

それだけではなくWordPressなどでも使われている結構有名なライブラリのようで、ググったらいろいろと情報は出てきたのですが、コード内を直接編集して改行を保つような方法は見つけることができませんでした。

かといってMezzanine自体をカスタマイズするほど理解は及んでおらず…。ダメ元でいろいろいじってみましたがやはり駄目でした。

一応の解決策と今後の課題

そんな経緯で、冒頭で述べたとおりDataCamp LightのHTMLファイルはアプリケーションサーバーを介さない静的ファイルとして配置して、iframeで無理やり埋め込んで対応しています。ただこれだと手数が増えてどうにも使い勝手が悪い。

尻すぼみとなりますが、今後はやはりMezzanine上でTinyMCE以外のWYSIWYG Editorを設定できるように模索する、ということで今回は締めたいと思います。

上記Mezzanineドキュメントの引用の続きですが、他のエディターに変えたりエディタを使わないということも可能なようなので。

The setting RICHTEXT_WIDGET_CLASS contains the import path to the widget class that will be used for editing each of these fields, which therefore provides the ability for implementing your own editor widget which could be a modified version of TinyMCE, a different editor or even no editor at all.

• DataCamp Light

• ← chromebook で開発環境の構築(Crostini と時々Crouton)<br>その③Tmux, ほかターミナルカスタマイズ
• インディアン・ポーカーのプログラムとpaiza.io使ってみた →