とある地味なブログ

プログラミングとお絵かきに関する雑記。

PlantUML Previewer 更新しました

f:id:sujoyu:20180521123452p:plain

だいたい 1年スパンで更新してるPlantUMLのオンラインエディタです。

Online Plant UML Editor

今回は、

  • CodeFlaskエディタを追加
  • CodeFlaskにPlantUMLシンタックスを追加
  • UML画像にドラッグスクロールを追加
  • 複数保存、読み込み、削除機能を追加

しました。

LocalStorageに残っている古いバージョンのデータの関係で表示が壊れたらごめんなさい。 教えていただければ直します。

引き続きAceエディタも使えます。ボタン横のドロップダウンからエディタを選択してください。

でもAceエディタ日本語対応してないからCodeFlaskがおすすめやで。

おすすめオンラインコードエディタを教えていただければ組み込むかも。

実装の話

RollupとVue

プレーンなJSでかいてたけど、いろいろ機能追加するにあたり、jQueryでやるのかこれ...って感じになったのでnpm, Rollup, Vueで書き直しました。

Rollupは新しめなせいかドキュメントも先人たちの知恵も少なく、Vueのコンパイラのクライアントへの組み込みを断念しました。

Vueのドキュメントには、

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

インストール — Vue.js

こうすりゃええやんって書いてあったけど、rollup.config を上記のようにしてもだめでした。何があかんかったんやろ。

まぁ、単一ファイルコンポーネントで全部かけたのでお行儀良いコードになりましたが。

VueとMaterialize-css

Materialize-css、デザインがすきなのでよく使ってたんですが、Vueとの相性最悪っぽかったので、Vuetifyに乗り換えました。 VuetifyはMaterialize-cssに比べて不足分がほとんどないので、いい感じです。いい感じのFooterがなかったりしたのがちょっと悲しいですが。

GitHubのリポジトリは↓

github.com