さわらブログ

さわら(@xhiroga)の技術ブログ

無料かつWindows対応のデスクトップ版が存在するBootstrapエディター、Pingendo

f:id:hiroga_cc:20170930150920p:plain

レスポンシブWebデザインな感じでサイトのプロトタイプ作ってみたら大変だったので、エディタの導入を検討中。

調べるとWebアプリだったりMacのみ対応だったりなんだけど、現在無料で使えてマルチプラットフォーム対応のPingendo(ピンジェンド)というのがあるようだ。 Electron製のため、Mac/Windows/Linuxをカバーしている。その上Web版もある充実っぷり。

ちなみに名前の由来はラテン語の"Painting"から。Twitterで尋ねたら教えてくださった。気さくだ...!

価格とライセンス

Bootstrap4対応の最新版はbeta期間中は無料とのこと。3系対応の旧版もWebで公開されており、自由に使えるとある。
ライセンスはインストール時に確認可能。無償のベータ版であり、サポートも保証しないことに同意することが使用条件とある。

Pingendoで作ってみた

  • フォームなど、一部の部品はPingendoで生成したものではないです。 gist.github.com

あくまで個人的に、手書きに比べて効率4~5倍くらい?
bootstrap初心者・レスポンシブWebデザイン初心者として手書きでHTML作成→1日(11時間49分)
Pingendo導入後、初回のHTML作成→2時間20分

導入のメリット

  • (他のエディタにも共通して言えるが)HTMLを編集しながらプレビューが見られるため、開発効率が上がる。
  • コンポーネントにマウスオーバーすると当該のソースがハイライトされるので、bootstrap初学者の学習効率が上がる。
  • 既存のコンポーネントや別のページのコンポーネントをコピペできるため、コードの品質が上がる。
  • 画面で編集してHTMLをエクスポートするのではなく、HTMLをそのまま編集→表示できる。
  • よって、HTMLを自分で編集しても問題ない。

導入のデメリット

  • 現状bootstrap以外のフレームワークには対応していない。
  • デフォルトの部品の種類が少なく、結局自分で書くことになる(その場合でも、一度書いたらコピペができるのは良い)
  • GUIで部品を削除すると、不要なdivタグが残っているのに気がつかないことがある。