悪ふざけでランディングページも作りました。とりあえずherokuに立ててみた。
軽量縦書きマークアップエディタ/縦覧
作ったものと経緯
縦書きマークダウンエディタです。ほしいままに見れる、ということで縦覧帳（じゅうらんちょう）って名前にしてみた。縦にできるし（横にもできます（きれいにできてるでしょ
PDF出力はダウンロードボタンを押すとブラウザの印刷画面が立ち上がってくる、はず…
別にC#とかで作ってもいいんだがめんどくさくてできあいのものがないかなーって「マークダウンエディタ」でぐぐったら、「三十分でできる」とか出てきちゃって、うそうそまじで～つってソースコードみてみたらjavaScriptでやんの。ちなみにフロントエンド周りは全くわかりません。JSとjQueryの違いもわかんなくて、$(".contain")とか何なんだろな？？？って思ってるくらいなのでmarkedjsとかvueがなんとかとかelectronがとか色々書いてるのがあったけど、できるっしょ！ってかんじで手を出しました（白目
ちなみに縦書きにこだわっているのは
- Wordでルビをふると行間が広くなって気持ちが悪いし、ページがちゃんと算出できない
- TATEditorっていう有名なマークダウンエディタはあるんだけど、青空文庫記法の「太字」に対応していない（字下げも対応していなかったはず）
- テキスト読み込んでPDFに変換してくれるやつはあるが、変換してみるまでルビがちゃんとなってるかとか禁則処理がちゃんとできてるかとかわからない。いい感じのやつでも、ちょっと直したいってなったときにいちいちテキストを直して読み込んで…ってやらなきゃいけないのが面倒。
- そもそも縦書きをすると変換候補と文がかぶって大変やりにくい。分離したい
- ファイルは読み込めなくても別にいいや読み込めたらもっといいけど
という俺のための俺のエディタがほしくなったからなのであった。
ちなみにChromeでしか動作確認してないうえに特にテストとかもしてない最悪な品質なので気をつけてください。
ソースコードの修正もできるよ！！！
github.com
使ったもの
- jQuery
- これがよくわかんなくてな。jQueryってやつ使うとrequireが使えないの？？？かな？？？ 便利だしさくさく書けるんだけど他のライブラリとかとあわせようとするといろいろエラーが出て困る
- markedjs
- マークダウンのベースはこれ使ってます。一応XSS対応のオプションがあったので有効にしておいた。
- vue.js
- なんかよくわかんなかったんだけど使ったらめっちゃ便利でこれやばいとなった。ほんとはPDF出力に使いたかったのだが、、、よくわからぬ。書き方が結構特殊。
- bootstrap
- npm
- なんでもかんでもnpmでいれればよいらしい。さいしょよくわからなくてnode_modulesまで全部gitのレポジトリにいれてしまったがpackage.jsonにかいておけばnpm installで全部入ってくれるのね。これは便利
- Node.js
- node app.jsみたいのでサーバーを起動させるのが一番よくわかんなくて困ったが、ブラウザのデベロッパーツールをみてるうちに、「なんだサーバー実装してるだけか」となって解決した。だてにネットワークプログラミングしてるわけじゃねぇんだぞ
- VSCode
- Visual Studioのオープンソースのエディタでこいつが本当に便利だった。xamppとか入れなくてもサーバーが立てられるとかすげぇな
- Chrome
- デベロッパーツールのConsoleとNetworkのところは大変に便利
難航したのがPDF出力でしてね。electron-pdfならできる（ただし日本語対応はしていないのでフォントをbase64に変換しないといけない。それってつまりフォントを画像として読み込むということだな、、、）とかphantom-pdf？ならできるとか（サポートをやめたらしい)vueにあるぽいとか（よくわかんなかったのでつかわなかった）puppeteerでスクショ的に撮って…とかいろいろあったんですけどなんかCSSをちゃんと組んでやったらきれいに出るようになりました。なんやったんや俺のあの苦労は…
ちなみにElectron版も制作してる（というかPDF出力で試してみた）んだが、こっちもやっぱりElectronではうまくいかない（出せるところまで入ったがレイアウトを制御できてないのとフォントが…）のでまだもうちょっとかかりそう。
heroku使うのも初めてだったんでよくわかんなかったけど、get startedの通りにやったらでけたよ！
とりあえず頑張って作ったんで遊んでみてね～
https://glacial-plateau-76013.herokuapp.com/editor.html
