化学構造式エディタを作ってみた

大学でレポートを書く際、wordに構造式を挿入したかったのですが構造式だけ手書きだとレポート全体の見た目が不細工になってしまったので教科書みたいな構造式が描けるサイトはないかなあと調べてみたところ無料のものがほとんどなく、やっと見つけたと思ったら使いづらい．．．。そこで、じゃあ自分で作ってみよう！！と思って自作してみました。

作ったサイト

化学構造式エディタ。サイトはこちら。

エディタの一部

どうでしょうか。なかなかシンプルで良くないですか？

詳しくは下の章に書きますが、２重、３重結合もワンタッチで描くことができ、結合や原子の色も変えることができます。手書きで描いた構造式よりだいぶ見やすくなったと思います。また、作った構造式はダウンロードできるので、手書きのものを写真で撮った時のように影がついたりすることもありません。

機能

機能説明用の画像

１．結合
　　これを選択すると結合を描くことができます。また、このボタンを２回　　
　　押すとオプションで結合のデフォルトの長さと太さを変更できます。
　　描写した結合をクリックすると結合の種類を変更できます。

２．消しゴム
　　結合や原子を１つずつ削除できます。

３．削除
　　構造式を一気に削除できます。

４．ダウンロード
　　作った構造式を画像としてダウンロードできます。

５．原子
　　このボタンを押すと原子描画モードになり、原子をワンタッチで描けま　
　　す。また、２回押すことで自分で好きな文字列を入力できるようになり　
　　ます。他の構造式編集ソフトは主要原子はあるものの、自分で入力でき
　　るものは無く、不便だったのでこの機能を作ってみました。

６．カラーパレット
　　選択した色で結合や原子を描けます。他のソフトには意外にも色を自分　　　
　　で変えられる機能がなかったので作ってみました。

レポートに間に合わせたかったので、最低限の機能しか実装していません。今後時間があればライブラリとして以前作った構造式を保存できる機能などもつけてみたいと思います。

実際に使ってみたところ、微妙に線がずれたりしますが手書きよりはきれいに、早く描けるので大学生のレポート用としてなら十分だと思います。ぜひ触ってみてください。大学生の方は友達に紹介してください！！サイトはこちら。

ついでに、最近こんなのも作ったのですが誰も使ってくれなくて悲しいので教科書の登録だけでもしてみてください。大学の教科書の解答を投稿できるサイトです。↓