WYSIWYGエディタって何？ 「What You See Is What You Get（見たままが得られる）」エディタ。うぃじうぃぐって読むらしけど誰が読めるんやろう。 ユーザー側からタグ付けとかスタイリングとかをさせることなく、 簡単に良い感じに文章が作れるエディターです。 イメージでいうとQiitaとかWordpressの投稿のエディタ画面みたいな感じです。 これを簡単に実装できる方法を紹介します CKEditor vs Draft.js 実装しようと思い、調べましたがものすごく種類あるみたいですね。 https://qiita.com/rana_kualu/items/fc752de7d4f2224b29ee 最終2候補で悩みましたが、結局表題の通りCKEditorを使用しました。 理由はReact案件ではないことがメインです。（Reactが入ってるか否かで使い分けてもいいかも）
概要 オープンソースのサンプラー／シンセサイザーソフトHISEにはHiseScriptというJavaScriptをベースにした独自言語が用意されています。 HISEはモジュールをツリー状に積み重ねて楽器を構成します。スクリプトはそのモジュールごとに作成することができるため、小さな機能単位でモジュール化されたロジックを書くことができます。 用途 NoteOnなどのイベントに対応してサウンドエンジンのパラメータをカスタマイズしたり、タイマーイベントで音を鳴らしたりするのが典型的な使い方ですが、Webアクセスをはじめ非常に多くのAPIが用意されているため、可能性としてはそれだけにとどまりません。 Script FXは音声信号データを直接操作することが可能で、いわゆる信号処理を記述することができます。 GUIの作成やカスタマイズ、コールバックロジックなどもスクリプトで書くことができます。またGUI
JSer.info #537 - 次期LTS候補となるNode.js 16がリリースされました。 Node v16.0.0 (Current) | Node.js Node.js 16 available now. We are excited to announce the release… | by Node.js | Apr, 2021 | Medium Node.js v16 の主な変更点 - 別にしんどくないブログ V8 9.0へアップデート、timers/promisesの追加、Apple Silicon向けのprebuiltバイナリの配布に対応しています。 また、fs.rmdirのrecursiveオプションの非推奨化、process.bindingを使ったアクセスの非推奨化module.createRequireFromPathの削除なども含まれています。 Node.js
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であればMarkdownのようにテキストベースで記述する方が簡単かも知れませんが、開発者でない人たちはWYSIWYGなエディタを使った方が簡単に感じるはずです。 使い勝手の良いWYSIWYGエディタを探している方はWix Rich Contentを使ってみましょう。Wix製の使いやすいUIを持ったエディタです。 Wix Rich Contentの使い方 デモでは左右に分かれています。左がエディタ、右側がプレビューです。 普通の文章を書きます。 ツールバーからコンポーネントを追加できます。これは水平線の例。 スライドショー。 アニメーションGIFの追加はGIPHYを検索して行うようです（デモではエラーになってしまいましたが）。 Googleマップも埋め込めます。 作成した内容は
週刊Railsウォッチ:TruffleRubyでdig_fetchを実装、ruby/debug gem、AWSハンズオン教材ほか（20210901後編）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。遅ればせながら私もRubyKaigi Takeout 2021のTシャツを注文しました。 衣服を買ったのは久しぶりな気がする…… pic.twitter.com/JgCRafrFdL — yancya (@yancya) August 25, 2021 参考: Novelties - RubyKaigi Takeout 2021 週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。Tec
GitLab 15.2 製品アップデートニュースレター #GitLab #GitLabjp - クリエーションライン株式会社
2022年7月にリリースされたGitLab 15.2の製品アップデートをお知らせします。同月に追加された40以上の新機能のうち、主なものを抜粋して紹介しています。この内容はGitLab社のリリースブログを要約したものです。 本リリースでは、GitLab SaaSをご利用のお客様お待ちかねの「Git over SSH の IP アドレス制限の適用」の他、Web UIの使い勝手が向上する機能追加が複数含まれています。 GitLab SaaSでのGit over SSHのIPアドレス制限の適用 / Enforce IP address restrictions for Git over SSH 信頼できるIPアドレスからのリクエストにアクセスを制限することで、セキュリティを向上させることができます。GitLab Self-managedと異なり、SaaSでは、これまでこのようなアクセス制限をサポ
学費無料のオンライン大学、University of the PeopleでMATH1201-College Algebra（大学代数学）を履修したのでその感想を書きます。 前回までのあらすじ コンピューターサイエンスの学位（学士）を取るために、University of the Peopleという学費無料の米国オンライン大学に入学してみたよ。 英語の学力要件はパスできたけど、正式な学部生（Degree-seeking student）になるためには、2つ以上の基礎コースを修了する必要があるよ。 1つ目の基礎コースOnline Education Strategiesは無事終了したよ。 コロナ禍で在宅勤務 with kidsの最中だったからクソしんどかったよ。 2つ目の基礎コースはCollege Algebra（大学代数学）を受けることにしたよ。 これまでのUoPeople関連の記事はこち
JavaScriptのClipboard APIでリッチテキスト（書式付きテキスト）をコピーする - Make組ブログ
クリップボードにリッチテキストをコピーする方法を説明します。今回はとくにClipboard APIという現在推奨された方法で実装します。 「リッチテキストをコピー」というのは、ペーストしたときにWYSIWYGエディターへ書式が有効なまま入力されることを言っています。たとえばWordでコピーをすると、見出しや太字などを含めてコピーされるのと同じことです。 Clipboardを使ってリッチテキストをコピーする 標準のClipboard APIを使ってリッチテキストをコピーするには、以下のようにします。 const body = '<h1>見出し</h1><strong>太字</strong>' const blob = new Blob([body], { type: 'text/html' }) const blobPlain = new Blob([body], { type: 'text
Reactベースで動作するWYSIWYGエディタ
始めに Next(React)、TypeScript、Material UI環境で扱えるWYSIWYGエディタを調査し、実際に使用し、どのエディタが一番適しているかを調査しましたので、その結果をご紹介します。 WYSIWYGエディタとは 「WYSIWYGエディタって何？」と思われる方向けにWYSIWYGエディタって何かを簡単にご説明させていただきます。 What You See Is What You Get（見たままが得られる）の頭文字をとったものでWYSIWYGと呼ばれます。 最近では、コンテンツマネジメントシステム(CMS)などでよく使われているエディタです。 実際のコンテンツそのものを編集しながら確認することができ、そのままをウェブページなどで表示する事が出来ます。 （実際は環境（ブラウザ等）に依存するので必ずしも全く同じ結果が得られるわけではないみたいですが。。。） 使用する側か
屋号付きで個人事業主をやっているので、せっかくだしドヤ顔ポートフォリオサイトでも作りたい。まあドヤ顔は冗談にしても、デベロッパーたる者、ふらっと牛丼を食べるがごとく技術力のアピールは普段からやっていかなければならない。フラペチーノ屋さんでMacドヤをしても仕事は来ないが[要出典][独自研究?]、ポートフォリオはいつだって頼れるピッチ資料になる。 さりとてポートフォリオサイトというのはいつも、普段やらないWebフロントをやるには丁度いい題材でありつつ、あるはずだった「ポートフォリオの更新」がやってくることなくたいてい一日坊主になる。 開業よりも前に作った 3939.moe（ミクミク・ドット・モエ） は前述のような経緯でデプロイされ、やはり更新がされないまま。手塩にかけた愛ある手書きHTMLも、一度野に放ってしまうと感情が冷めてしまい、次のデプロイはなくなってしまう。 これを乗り越えるべく、新
オープンソースのコンテンツ管理システム（CMS）「Drupal」を開発するDries Buytaert氏は7月3日、最新のメジャーリリースとなる「Drupal 9.0.0」公開を発表した。 DrupalはPHPで作成されたオープンソースのコンテンツ管理プラットフォーム。WYSIWYGエディタなどコンテンツのオーサリング機能を持ち、Webサイトやアプリケーションを構築できる。ライセンスはGPL。約12万人のユーザーを持ち、ドイツLufthanzaなど企業の導入事例も多数ある。 Drupal 9は、2015年に公開されたバージョン8に続くメジャーリリース。Drupal 9はDrupal 8を土台としており、容易にアップグレードできる。一方で非推奨となったAPIもあり、検出できるツールでチェックできる。 ページデザインを容易にできるレイアウトビルダー、WYSIWYGで操作できるメディア管理システ
今回は、Advanced Custom Fields（アドバンス カスタムフィールド）のテキストエリアに 「リンクの付け外しだけ」を追加したい！」 を WYSIWYG エディター を使って実現します。 ただ、カスタムフィールドの WYSIWYGエディター を使うと、触られたくない無駄なツールがたくさんありますよね。 そこで、ツールバーに表示する機能を制限すれば良いというわけです。 デフォルトのWYSIWYGには「Full」と「Basic」がある カスタムフィールドの WYSIWYGエディターを作成することで、2つの標準メニュー（「Full」と「Basic」）が表示されるようになっています。 それぞれのツールバーを見ていきましょう。 WYSIWYGの「Full」 WYSIWYGの「Basic」 WYSIWYGエディターのツールバーを任意の機能のみ表示する では、ここから無駄なツールを取り除い
技術書・専門書に特化した本選びや読書管理、レビュー、マークダウン記法での読書メモとかができる読書コミュニティTecuTecu - テクテク - を作って公開したので、機能の説明や使用してる技術を書きます。 作ったもの はじめに 技術書や専門書特化のレビューコミュニティサイトが欲しいなと思ったのが動機です。今この記事を読んでる方はもしかしたら、Zenn や Qiita, 公式ドキュメントを読んで、あまり技術書とか読まないかもしれません。しかし、体系的に知識を入れたいとか、マネジメントやデザイン、資格取得など、プログラミング系以外の分野を勉強したい、といったときなど、本で学習したいときはあるのではないでしょうか。 そんなとき、技術書や専門書など学びを目的とした書籍に特化したサービスがあれば、質の高いレビューが集まるのでは、という仮説のもと作りました。これから紹介する機能などをみていただくとわか
ここ数日、自分にとっては懐かしい話題がTwitterで盛り上がっていました。 「WordPressで、固定ページの内容はエディタで編集させるようにすべきか？ それとも、エディタに入れずにPHPのテンプレートファイルに書くべきか？」 という命題です。Web関係のクリエイターを多くフォローしていると、こういうニッチな話題もTwitterで盛り上がっているのを観測できるものです。 この話題、WordPress 2.x の頃はそんな話もしてたなぁという印象ですが、まさか2019年にもなってまた見かけるとは思っていませんでした。とはいえ、当社を設立してからはWordPressを扱うこともめっきり少なくなりましたので、界隈の話題についていけていないだけかもしれませんが。 案の定、私の知り合いは口々に「エディタに書くべき！」と指摘していました。理由はいくつかあります。 エディタにコンテンツを入れないと、
WYSIWYGエディタに入門する
最近、QuillというWYSIWYGエディタのライブラリを触ったので忘れないうちに記事にしています。 Markdownに関する記事は比較的多いですが、WYSIWYGエディタはあまり見かけなかったです... この記事では、以下のことについて解説していきます。 WYSIWYGエディタとMarkdownの違い よく使われているWYSIWYGエディタ WYSIWYGエディタの勘所 おまけ: pluginを作る WYSIWYGエディタとは WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See Is What You Get（見たままが得られる）の頭文字をとったものであり、「is」を外したWYSWYG（ウィズウィグ）と呼ばれることもある。 冒頭でも紹介
Vue.jsライブラリ リンク集 回転、拡大縮小、ズームできるvue用の画像ビューア「v-viewer」 v-viewerは、回転、拡大縮小、ズームなどができるvue用の画像ビューアコンポーネントライブラリです。 Viewer.jsを素に作られており、42のオプション、23のメソッド、9つのイベントを使用できます。 >>記事はこちら コイツ動くぞ？！的なアニメーションが付けられる「vue-kinesis」 vue-kinesisは、インタラクティブなアニメーションを作成できるコンポーネントライブラリです。 テキストや画像（jpgやSVG）などに、マウスの動きやスクロールに合わせてアニメーションさせたり、audioに合わせてアニメーションさせることもできます。 >>記事はこちら マウスカーソルをポインターみたいなドットにする「vue-cursor-fx」 vue-cursor-fxは、マウス
週刊Railsウォッチ（20200210前編）Railsのベンチマークジェネレータ、長いバックグラウンドジョブと戦う、Timestamp切り詰めの謎、Open APIツールほか｜TechRacho by BPS株式会社
2020.02.10 週刊Railsウォッチ（20200210前編）Railsのベンチマークジェネレータ、長いバックグラウンドジョブと戦う、Timestamp切り詰めの謎、Open APIツールほか こんにちは、hachi8833です。そういえば明日は祝日ですね。コロナウイルス流行の様子が早速ビジュアライズされたようです。 元記事: コロナウイルスの黙示録的な広がりをリアルタイムで追跡するサイトが公開 | ナゾロジー 「まあこれで何かわかったとしても自分らに打てる手は限られてますし😷」「情報の動き激しくて...😅」（以下延々） 参考: CNN.co.jp : 新型ウイルス、潜伏期間中の感染例は「誤り」 独当局 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっつい
unified を使う前準備
以前、 Markdown ベースの WYSIWYG エディターを作りましたが、ここで使っている remark について何も知らなかったので、調べた結果をまとめます。 が、全部書くとすごい量になるので、ちょっとずつわけて書く予定です。まずは unified を理解するための前準備の記事です。 この記事をスタートとして、最終的に自分で Markdown を拡張する方法も書いていますので、興味があればぜひどうぞ。 unified とは remark について調べていたのにいつの間にか unified の話しになっていた。何を言っているか（以下略）。 調査した結果、 remark は unified というもっと大きな枠組みの中の Markdown 担当ということがわかりました。なので、 unified について調べてみました。 unified は大雑把に言うと、テキストと構文木や AST と A
Markdown EditorはMarkdown用のオープンソースのWYSIWYGエディタです。Web向けもデスクトップアプリ向け（Electron）もあります。 入力エリアとプレビューエリアの2ペインUIとなっており、メニューバーから見出しやリンク、画像の挿入、リストやテーブルの他、絵文字や任意の定型文（ライセンスの文言など）の挿入ボタンも用意されています 凄くいいと思うんですが、もう少し名前を探しやすいものにしてほしかったです・・ ライセンスはMITとのこと。 Markdown EditorOn GithubFor Electron
ユーザにHTML編集を任せる場合、何らかのツールバーやWYSIWYGなエディタが欲しいと思うでしょう。そういったツールは多々ありますが、なかなか使いやすいものに出会えません。 今回紹介するSmartBlockはブロック単位での編集が可能なエディタです。並び替えもできて使い勝手はよさそうです。 SmartBlockの使い方 リスト部にマウスを当てた場合です。 テキストだけの場合はツールバーの内容が変わります。 文章全体では右側に並び替えも出ます。 表の場合は列や行の追加も出ます。 SmartBlockの便利なところは、Reactのコンポーネントとして単純なHTMLテキストを適用するだけで使えることです。専用のブロックなど気にする必要はありません。色変更などはありませんが、カスタマイズして実装すればよさそうです。 SmartBlockはReact用TypeScript製のオープンソース・ソフト
Action Text の概要 - Railsガイド
本ガイドでは、リッチテキストコンテンツの扱いを始めるのに必要なものをすべて提供します。 このガイドの内容: Action Textの設定方法 リッチテキストコンテンツの扱い方 リッチテキストコンテンツにスタイルを付ける方法 1 はじめに Action Textを使って、Railsにリッチテキストコンテンツと編集機能を導入できます。Action Textに含まれているTrixエディタは、書式設定/リンク/引用/リスト/画像埋め込み/ギャラリーなどあらゆるものを扱えます。 Trixエディタが生成するリッチテキストコンテンツは独自のRichTextモデルに保存され、このモデルはアプリケーションの既存のあらゆるActive Recordモデルと関連付けられます。 あらゆる埋め込み画像（およびその他の添付ファイル）は自動的にActive Storageに保存され、includeされたRichText
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WYSIWYGエディタをCKEditorで作ってみた - Qiita
HISE HiseScript - DTMプログラミング言語探訪 - Qiita
2021-04-27のJS: Node.js 16.0.0、Chrome 91 beta、Prisma(Ready for production)
Wix Rich Content - 多彩なパターンに対応したWYSIWYGエディタ
UoPeopleでCollege Algebra（大学代数学）を修了した振り返り - えんぴつぶろぐ
Notion Blogは銀の弾丸ではないがブログのBoilerplateとしては便利 - Zopfcode
APIファーストを強化、容易にアップグレードできる「Drupal 9」が公開 | OSDN Magazine
ACFのWYSIWYGエディターをリンクの付け外しだけにするカスタマイズ - Qiita
【個人開発】技術書特化の読書管理&コミュニティ「TecuTecu」を支える技術
Twitterで流れてきたWordPress界隈の話題を見て、やっぱり一度はconcrete5を試してみてほしいなと思った話
【2019年9月】Vue.jsライブラリ記事まとめ | カバの樹
Markdown用のオープンソースのWYSIWYGエディタ・「Markdown Editor」
)
SmartBlock - ブロックベースのReact用WYSIWYGエディタ