NOCODE系のシステムで利用されがちなWYSIWIGシステムについて考える。

2025/03/06

Tool 開発 日記

t f B! P L
eyecatch WYSIWIG(ウィジウィグ)って言いにくいし、あまり聞いた事が無い人も多いかもしれませんが、 WordpressやGoogleBloggerなどのブログシステムのページ登録のエディタページの多くは、WYSIWIGが使われています。 たまに、WYSWIGというスペルで書かれている場合もありますが、正しくh、WYSIWIGだそうです。(wikipediaに書いてありました)
What You See Is What You Get(見たままが得られる) wikipedia
今仕事で大きめのシステムを作っているのですが、その中で、HTMLすらわからない運用担当者達が、Webページを構築できるようにする、 いわゆるノーコード的な要望があったので、WYSIWIGを作って独自の機能をブチこんでやろうと模索中の思考をブログに書いてみたいと思います。

個人的にはWYSIWIGは嫌い

言わずもがなですが、WISYWIGは使いずらいと思う人も少なからずいます。 何故なら、HTMLのソースコードを綺麗に整えたい場合に、思いもよらないDIVタグやPタグなどが入ってくるし、 改行するごとに、想定外のタグがわんさかわんさか入り込んでくるので、DOM構造がカオス状態になる可能性がMAX高いことを知っている人は、WYSIWIG使うより、コーディングした方がいい思考になるんですね。 でも、HTMLがわからん人にとっては、見た目通りに便利にWebページに表示することができるので、便利に使えて恩恵を受ける人もいます。 ということは、HTML書けない人、または書くのがめんどくさい人がWYSIWIG使いがちという様にも考えられるので、無駄なHTMLタグが生成されないWYSIWIGがあれば、みんなから使われるツールになるのではないかと考えました。 ・・・でも、そんなんまず不可能ですね。 さすがの、変態モノづくりエンジニアのユゲタ自身も、そんなWYSIWIG作ってみたいと一度は考えましたが、やはり人の感覚における「良い」「悪い」を超越したシステムを作ることは、最近は避ける様にしています。 なので、せめて、個人的に扱いやすいWYSIWIGというレベルで考えてみたいと思います。

WYSIWIGエディタ・ライブラリ

自分で作らなくても、WYSIWIGのエディタはライブラリがたくさん揃っています。 いつもGoogleBloggerのエディタばかり見ているので、他のエディタも見ておきたいと思います。

Quill

https://quilljs.com/playground/snow
比較的シンプルなエディタです。 HTMLの記述ができないのはエンジニアとしてはNGですけどね。

Trix

https://trix-editor.org/
こちらも、文章を書いて画像を入れる程度の操作しかできない上、HTML記述ができないので、かなり限られたWEBページ構築しかできないっぽいですね。 もちろん、独自に機能を付け足して、お好みエディタに作り上げてシステム導入することになると思うんですが、HTML編集できないのは、今時のノーコードの定番なんでしょうか?

Editor.js

https://editorjs.io/
これは今までのエディタと一味違う感じですね。 書き込んでいる箇所に応じて、ツールメニューがポップアップされるパターンです。 無駄なツールスペースが無くて簡素に作れますが、初心者にはヘルプがないと少しハードルが高いかもしれませんね。 あと、個人的には、操作している時にワチャワチャとツールがでるのは、少しウザい感じです。

自作した方がいいかも・・・

またまたエンジニア魂が疼いてきてしまいました。 なんだか、一昔前の携帯電話のサイト制作などで見かけたWYSIWIGとさほど変わらないエディタだらけです。(ライブラリ系なので、必要最低限の機能ばかりですが) もっとCSS3やHTML5に適用したようなモノがあるかと期待していたんですが、これなら自分で作った方が扱いやすいかも・・・と考え始めてしまいました。 そして、こうしたツールは、ノーコードツールとして、商用に販売することもできるので、うちの会社として手がけておく事でいい商材にもなるんじゃないかとも思われます。 あと、可能であれば、GoogleBloggerの外部エディタとして使える様に、Chrome拡張機能みたいにするともしかしたらブログ書くのがもっと楽になるかも・・・なんて個人的な要望を膨らませてみました。

あとがき

使いやすいWYSIWIGエディタをひとつ持っておけば、最近よく問い合わせが多い、IT苦手だけどWEBページを運用したいという人に、いちいちHTML勉強するように促さなくても良くなるんじゃないかと、相互にWINWINな関係が築けるイメージが湧いてきました。 また、もしかしたら、HTMLがわからない人がHTMLの実装を見て触って勉強にもなるんじゃないかという、3次利用と利便性も思いつきました。 こりゃあ、独自WYSIWIGエディタ作っておいた方が良さそうだね。 というわけで、オレオレWYSIWIGエディタを、構築してみようと思います。 興味のある人いたら、コメントくだされ!

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ