Raccoon Tech Blog [株式会社ラクーン 技術戦略部ブログ]

株式会社ラクーン 技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。

JavaScript

JSでmarkdownからカスタマイズしたHTMLを生成する

開発チームの下田です。

普段仕事をしていて、「めんどくさい」と思ったことはありませんか?
そんなときこそプログラミングの出番です。
「めんどくさい」=単純作業であることが多く、簡単なコードを書くとサクッと解決できる可能性が高いです。

私はたった今、このブログの執筆がめんどうくさいです。
どのように面倒くさいかというと少々古めのCGMを使っているため、次のような問題が起きています。

問題点

  • まともな見栄えにするには、HTMLで記述しなければならない
  • コードを貼り付けるときは、エスケープする必要があり、preタグのclassに"prettyprint"を指定しなければならない
  • 見出しはh2タグ、小見出しはh3タグになっている

解決方法

本来はCGMを乗り換えるべきなのですが、やんごとなき事情により実現できない場合があります。
小手先で解決するために、コンテンツはmarkdownで記述して、このブログに合わせたHTMLを作ることにしました。
JSのライブラリMarkedを使って、生成ページを作成します。

完成したコード

こちらが作成したHTMLのソースコードです。
ポイントを後述します。

続きを読む

Vue.jsで作るSPAデータ更新フォーム


開発チームの井川です。


今度とある案件にて、項目数がとても多いデータ更新画面を作ることになりました。
まだ未定ですが200項目くらいはあるかもしれません。
弊社のサービスの管理画面として社内で利用される予定です。
管理画面なのでデザイナーによるデザイン制作はなく、エンジニアがUIを担当します。
そこで、ユーザにとって使い勝手がよく、開発としても余計な画面遷移がなく、繰り返しのコードが少なくなりそうなSPA(Single Page Application)のデータ更新画面を作ろうと考えました。

続きを読む
記事検索