MyEnigma

とある自律移動システムエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

Texのコードから数式をリアルタイムに描画するWebアプリを作った

目次

はじめに

無料で作る自作Webアプリ第二弾です。

(第一弾はこれです)

myenigma.hatenablog.com

 

ブログの記事やプレゼン資料を作っていると、

たまに数式を書きたくなりますが、

Officeの数式エディタは非常に使いづらいので、

Texの記法で数式を書きたくなります。

 

Web上でTex記法で数式を書くアプリはいくつかありますが、

自分用にカスタマイズしたくなったので、

自作Webアプリを作ってみました。

Tex数式変換Webツール

こちらから使えます。

Tex Converter  

テキストボックスにTex記法で数式を書くと、

下記のように数式がリアルタイムにレンダリングされます。

f:id:meison_amsl:20150621105926p:plain

 

またページの下部にある

数式のURLやhtml用のimgタグのコードも同時に更新されるので、

そのコードをそのままはてなブログなどに貼り付ければ、

数式を簡単に記事内に貼り付けることができます。

加えて、数式のサイズもスライドバーで調整できます。

 

また、下記のように一応iPhoneやiPadにも対応しており、

アドレスバーなどを隠すことでできるだけ

Webアプリっぽくしています。

(あまり使うことは無いと思いますが)

f:id:meison_amsl:20150621110311p:plain

またiPhone, iPadの場合、safariでページを開いて、

『ホーム画面に追加』をすれば、

下記のようにアプリみたいに使うこともできます。

f:id:meison_amsl:20150622085038p:plain

Webアプリの構成

Github pagesを使いました。

Git初心者でも大丈夫!完全無料でGithub PagesにWebページを公開する方法 | 株式会社LIG

Texの数式描画には、google chartのAPIを使っています。

Charts   |   Google Developers

Google Chart API – LaTeX を使って数式画像を動的に生成するツールを作ってみた | TM Life

  

あと、リアルタイムにtextareaに入力された文字を

リアルタイムに取得するためにjavascriptも使っています。

簡単に説明すると、

下記のように

textareaを作って、onkeyupでjavascriptの関数を呼びます。

    <div class="form-group">
      <textarea name="beforeConvert" id="beforeConvert" cols="10" rows="8" onkeyup="showPreview()"
        placeholder="ここにTex記法のコードを入力して下さい" class="form-control"></textarea>
    </div>

そして、呼ばれる関数は、

getElementByIdのvalueで入力されたデータを取得して、

あとは事前に決めたdivのIDの場所にデータを自動で流し込むだけです。

      function showPreview() {
        var imput = document.getElementById('beforeConvert').value ;
        var image = "<img src='http://chart.apis.google.com/chart?cht=tx&chs="+equationSize.toString()+"&chl="+imput+"' />"
        var imageurl = "http://chart.apis.google.com/chart?cht=tx&chs="+equationSize.toString()+"60&chl="+imput
        if(imput!=""){
          document.getElementById('preview').innerHTML = image ;
          document.getElementById('imageurl').setAttribute('value', imageurl);
          document.getElementById('imagetag').setAttribute('value', image);
        }
        else{
          document.getElementById('preview').innerHTML = "ここに数式の画像が表示されます。" ;
          document.getElementById('imageurl').setAttribute('value', "");
          document.getElementById('imagetag').setAttribute('value', "");
        }
      }

加えて、結構悩んだのがスライドバーの作り方で、

inputタグのtypeをrangeにすると、スライドバーが作れます。

あとは同じようにonchangeでjavascriptの関数をコールバックすれば、

スライドバーのデータをリアルタイムに取得できます。

<input type=range id='eqsize' min=10 max=100 value=60 onchange="getRange()"/>

Google Chart APIでプラス記号が上手く表示されないバグへの対応

プラス記号をテキストボックスに記入した時に、

なぜか数式にプラス記号が表示されなバグがありました。

ちょっと調べた所、

Google Chart APIはHTTPのGetメソッドで

数式データをリクエストするのですが、

Getメソッドでは+記号がスペースに置き換えられてしまうようです。

Getメソッド(URL)ではプラス記号は"%2B"で表されるようなので、

下記のようにjavascriptで変換するようにしました。

input = input.split("+").join("%2B");

そうしたら、プラス記号も入力できるようになりました。

f:id:meison_amsl:20150624185526p:plain

Local Storageを使って数式をブラウザにキャッシュする

技術資料などを作っていると、

以前使った数式を修正して、

新しい数式を作りたくなるので、

数式の履歴保存機能を追加しました。

  ユーザ毎にDBに保存するのは面倒なので、

HTML5のLocalStorageという機能を使って、

ブラウザに履歴を管理するようにしました。

数式を入力して、下部のSaveボタンを押すと、

下記の写真のように、保存した時間と

数式のTexコードと数式画像が

追加されて保存されます。

  f:id:meison_amsl:20150627084405p:plain

 

ブラウザを一度閉じて、開きなおしても

それらのデータは保存されるはずです。

Clearボタンを押すと履歴が消去されます。

また、この数式データはブラウザにしか

保存されませんのでご安心下さい。

今後やりたいこと

  • コードの公開

参考資料

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

MyEnigma Supporters

もしこの記事が参考になり、

ブログをサポートしたいと思われた方は、

こちらからよろしくお願いします。

https://gumroad.com/l/myenigmasupportersgumroad.com