技術 - WYSIWYGの記事一覧
Edtr.io - React製のWebページ編集コンポーネント
Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr...
Free email template builder - HTMLメールをビジュアル的に作成
HTMLメールを作成する方法は幾つかあります。Webブラウザで表示するHTMLと基本的には変わりませんが、JavaScriptや外部ファイルが使えないと言った違いはあります。メールアプリケーションによって表示が多少異なるので、その点も注意が必要です。そこで使ってみたいのがFree email template buil...
Markdown - Markdown記述をサポートするツールバー
Markdown記法はそれほど複雑ではないものの、括弧の順番を忘れてしまったり、テーブルの文字寄せの書き方を調べたりすることがあります。慣れていない人にとってはまだまだ難しい記法と言えるでしょう。そこで使ってみたいのがMarkdown（以下、Markdown（WYSIWYG）とします）です。同名のライブラリなのが気にな...
Wix Rich Content - 多彩なパターンに対応したWYSIWYGエディタ
開発者であればMarkdownのようにテキストベースで記述する方が簡単かも知れませんが、開発者でない人たちはWYSIWYGなエディタを使った方が簡単に感じるはずです。使い勝手の良いWYSIWYGエディタを探している方はWix Rich Contentを使ってみましょう。Wix製の使いやすいUIを持ったエディタです。##...
Editor.js - ブロック単位で編集するWYSIWYGエディタ
WYSIWYGなエディタは長い歴史があります。CKEditorのような重厚なものが好まれた時期もあれば、現在はWebページ上でインラインで編集できるものが好まれる傾向にあります。様々なソフトウェアがありますが、今なお決定的なものがありません。今回紹介するEditor.jsはブロックベースという特徴を持ったWYSIWYG...
MiraiNotes - WYSIWYGにも対応したMarkdownノート
Markdownをベースにしたノートアプリはたくさん出てきています。多くは純粋なMarkdown記法に則っており、それ以外の記法（HTMLなど）をサポートしていないことも多いです。そんな中紹介したいのがMiraiNotesです。柔軟な記法とWYSIWYGに対応したMarkdownノートです。## MiraiNotesの...
tiptap - Vue.js向けのリッチなWYSIWYGエディタ
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...
HTML Notepad - 昔懐かしい雰囲気のHTMLエディタ
HTMLを書くとき、どう行っていたでしょうか。最初はメモ帳などでHTMLタグを手打ちして、しばらくするとタグ入力を補助してくれるソフトウェアが出てきました。さらにWYSIWYGでHTMLを書けるソフトウェアが登場し、最近ではまたタグ入力に戻っています。そんな懐かしいタグ入力補助ツール風のソフトウェアがHTML Note...
DrawerJs - Web上で組み込んで使えるドロー
Webサービスの中にイラスト機能を追加したいと思ったことはないでしょうか。掲示板でも使えますし、作業内容を写真と合わせて記録するのにも向いています。テキストで書くのとはまた違った情報が入れられるでしょう。そこで使ってみたいのがDrawerJsです。Webサイトの中に組み込めるドローソフトウェアです。## DrawerJ...
vuegg - Vue.jsプロジェクトの画面を作成
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。## v...
MediumEditor - Medium風に文字装飾を行う
Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...
SimpleMDE - シンプルなMarkdownエディタ
Markdownのシェアが広まるのに合わせて、より慣れていない人たちが使いやすくなる環境が必要になっています。WYSIWYGで入力支援できるツールはもちろんのこと、プレビューなども必要です。今回紹介するSimpleMDEはシンプルなUIのMarkdownエディタになります。決して多機能ではありませんが十分なエディタとな...
Lite Editor - とてもシンプルなWYSIWYGエディタ
Web上でユーザにコンテンツを作ってもらう場合に便利なのがWYSIWYGエディタですが、あまり多機能なものはユーザを混乱させてしまうだけです。本当に必要なものだけに絞り込むのがいいでしょう。今回紹介するLite Editorは、本当にごく簡単な機能だけに絞り込んだWYSIWYGエディタになります。## Lite Edi...
TOAST UI Editor - WYSIWYGとMarkdown両方をサポートしたWebエディタ
開発者にとってMarkdownは便利な記法ですが、それ以外の人たちにとってはルールを覚えなければならず、面倒に感じられてしまいます。かといってWYSIWYGなツールバーを設けると開発者が邪魔に感じてしまうでしょう。そこで使ってみたいのがTOAST UI Editorです。MarkdownとWYSIWYGを切り替えられる...
KEditor - 複雑なデザインもこなせるWYSIWYGエディタ
技術者以外の方でWebページを作成する時にはオーサリングツールを使うのが一般的です。また、ちょっとしたコンテンツの修正であればWYSIWYGエディタを使いますが、あまり凝ったデザインには対応できません。そこで使ってみたいのがKEditorです。Webベース、ドラッグ&ドロップで自在にコンテンツを作成できます。## KE...
Mobiledoc Kit - 好みのWYSIWYGエディタを作る
世の中には多くのWYSIWYGエディタが存在します。どれもそれぞれに特徴があり、選択が多くて迷ってしまうでしょう。しかし、それでもなお自分の目的にぴったりと合っていないことがあるかも知れません。そこで使ってみたいのがWYSIWYGビルディングキットです。今回はMobiledoc Kitを紹介します。## Mobiled...
Megadraft - Draft.JSをベースにしたリッチテキストエディタ
Facebookが開発している、WYSIWYGエディタのベースになるDraft.JS
RichText - シンプルなWYSIWYGエディタ
自分の見たままに編集する、いわゆるWYSIWYGな環境を提供するソフトウェアは開発者以外の方には必須のソフトウェアです。Markdownがいかに分かりやすい記法とは言え、開発者以外の方には使いづらいはずです。今回はjQueryプラグインのRichTextを紹介します。シンプルなデザインのWYSIWYGエディタとなってい...
pell - 1KBの軽量なWYSIWYGエディタ
Webでコンテンツを公開するのが当たり前になっている一方、HTMLを習得している割合はそれほど高くありません。そのため、コンテンツを作成する負荷を軽減するためWYSIWYGエディタの存在は大事になっています。今回はpellというエディタを紹介します。わずか1KBという軽量なライブラリです。## pellの使い方こちらが...
Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ
一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。## Oryの使い...