目次
- 目次
- はじめに
- Tex数式変換Webツール
- Webアプリの構成
- Google Chart APIでプラス記号が上手く表示されないバグへの対応
- Local Storageを使って数式をブラウザにキャッシュする
- 今後やりたいこと
- 参考資料
- MyEnigma Supporters
はじめに
無料で作る自作Webアプリ第二弾です。
(第一弾はこれです)
ブログの記事やプレゼン資料を作っていると、
たまに数式を書きたくなりますが、
Officeの数式エディタは非常に使いづらいので、
Texの記法で数式を書きたくなります。
Web上でTex記法で数式を書くアプリはいくつかありますが、
自分用にカスタマイズしたくなったので、
自作Webアプリを作ってみました。
Tex数式変換Webツール
こちらから使えます。
テキストボックスにTex記法で数式を書くと、
下記のように数式がリアルタイムにレンダリングされます。
またページの下部にある
数式のURLやhtml用のimgタグのコードも同時に更新されるので、
そのコードをそのままはてなブログなどに貼り付ければ、
数式を簡単に記事内に貼り付けることができます。
加えて、数式のサイズもスライドバーで調整できます。
また、下記のように一応iPhoneやiPadにも対応しており、
アドレスバーなどを隠すことでできるだけ
Webアプリっぽくしています。
(あまり使うことは無いと思いますが)
またiPhone, iPadの場合、safariでページを開いて、
『ホーム画面に追加』をすれば、
下記のようにアプリみたいに使うこともできます。
Webアプリの構成
Github pagesを使いました。
Git初心者でも大丈夫!完全無料でGithub PagesにWebページを公開する方法 | 株式会社LIG
Texの数式描画には、google chartのAPIを使っています。
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");
そうしたら、プラス記号も入力できるようになりました。
Local Storageを使って数式をブラウザにキャッシュする
技術資料などを作っていると、
以前使った数式を修正して、
新しい数式を作りたくなるので、
数式の履歴保存機能を追加しました。
ユーザ毎にDBに保存するのは面倒なので、
HTML5のLocalStorageという機能を使って、
ブラウザに履歴を管理するようにしました。
数式を入力して、下部のSaveボタンを押すと、
下記の写真のように、保存した時間と
数式のTexコードと数式画像が
追加されて保存されます。
ブラウザを一度閉じて、開きなおしても
それらのデータは保存されるはずです。
Clearボタンを押すと履歴が消去されます。
また、この数式データはブラウザにしか
保存されませんのでご安心下さい。
今後やりたいこと
- コードの公開
参考資料
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。