web専門知識ゼロからコーポレートサイトをリニューアルしました（後編）- 採用したweb技術と導入意図 - NBDC
Freepik Storysetのイラストを改変して使用 本稿では、NBDCサイトをリニューアルするに当たって使用した様々なweb技術の概要と導入意図を紹介します。今まさにサイトのリニューアルを検討されている方の参考になれば幸いです。 現代のwebサイトは、多くのセマンティック技術に裏支えされています。ごく簡単ではありますが、その拡がりを知る一助になればとも思います。 なお、NBDCサイトのリニューアルの経緯や設計意図については「web専門知識ゼロからコーポレートサイトをリニューアルしました（前編）- サイト方針検討から情報設計まで」をご覧ください。 レスポンシブデザインでモバイル環境に対応する 新サイトでは、レスポンシブデザインを採用しました。これにより、モバイル端末の小さな画面でも読みやすくなりました。 レスポンシブデザインは、PCのような大きな画面を持つ端末向けのインターフェイスと、
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（ウィズウィグ）と呼ばれることもある。 冒頭でも紹介
ブラウザ上で動作するリッチテキストエディタ「CKEditor 5 v12.3」リリース、文字数カウント機能などが加わる | OSDN Magazine
WYSIWYGエディタ「CKEditor」開発チームは7月18日、Webブラウザ上で動作するリッチテキストエディタコンポーネント「CKEditor 5 v12.3.0」を公開した。文字数カウントなど要望の高い機能を導入した。 CKEditorはポーランドCKSourceが開発するオープンソースのテキストエディタコンポーネント。CKEditor 5はさまざまな用途に使えるWYSIWYGフレームワークで、モジュラー構成、カスタマイズ性などの特徴を持つ。 旧バージョンである「CKEditor 4」系も並行してリリースされており、CKEditor 4は2023年までサポートされる。 CKEditor 5 v12.3は、6月に公開されたCKEditor 5 v12.2に続く最新版。リッチテキストエディタの機能としては、自動テキスト変換（autocorrect）が加わった。事前設定済みのテキストスニペ
週刊Railsウォッチ（20200210前編）Railsのベンチマークジェネレータ、長いバックグラウンドジョブと戦う、Timestamp切り詰めの謎、Open APIツールほか｜TechRacho by BPS株式会社
2020.02.10 週刊Railsウォッチ（20200210前編）Railsのベンチマークジェネレータ、長いバックグラウンドジョブと戦う、Timestamp切り詰めの謎、Open APIツールほか こんにちは、hachi8833です。そういえば明日は祝日ですね。コロナウイルス流行の様子が早速ビジュアライズされたようです。 元記事: コロナウイルスの黙示録的な広がりをリアルタイムで追跡するサイトが公開 | ナゾロジー 「まあこれで何かわかったとしても自分らに打てる手は限られてますし😷」「情報の動き激しくて...😅」（以下延々） 参考: CNN.co.jp : 新型ウイルス、潜伏期間中の感染例は「誤り」 独当局 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっつい
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は、マウス
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
本文書で今回紹介するのはNote, Medium, WordPressのGutenbergのようなブロックスタイルのWYSIWYGエディターのEditor.jsです。シンプルで使いやすそうだったのでどのように設定を行うのか確認しました。 動作確認はMacで行っていますがcdnで利用することができるため動作確認を簡単に行うことができます。 ブロックエディターはWordpressのプラグインにも利用されている Ediror.jsとは Editor.jsのページにはNext generation block styled editorと記述されている通りブロックスタイルのエディターです。 Editor.jsは主に下記の3つの特徴的な機能を持っています。 一つ目の特徴はブロックスタイルエディターということでヘッダー、パラグラフ単位にブロックが割り振られ、ブロック毎に編集を行い、ブロッグ毎に位置の入
君だけに
このブログは2005年の7月に始めたものなので，ちょうど丸2年になる．過疎ブログであってもブログを書くことは大変楽しく，頻繁には無理にしても，細々とは定期的に更新しようと考えていた．ところが，とうとう先月は一つもエントリを書かなかった．このブログの最初に，「 ブログを始めるにあたって - 継続は力 」などという偉そうなエントリを書いたことが恥ずかしく感じられるほどである．気持ちを改めて，できるかぎりの更新を心がけるようにしたい． また無意味に前置きが長くなってしまったが，今回，ロイターの記事に大変勇気づけられる記事があったので，それについて書いてみたい． Australian granny, 94, becomes world's oldest master http://www.reuters.com/article/lifestyleMolt/idUSSYD3300820070802
【WordPress】今更だけど、WysiWygエディタ（ビジュアルエディタ）で書いた記事にCSSを適用する方法をまとめてみた話 - Qiita
【WordPress】今更だけど、WysiWygエディタ（ビジュアルエディタ）で書いた記事にCSSを適用する方法をまとめてみた話 はじめに 未だ世界でも日本でもシェアNo.1を誇るWordPress！！ 我が社においても、WordPressの案件は多い・・・ WordPressの案件をやっていてよく考えるのが、相手にどうやって記事を書いてもらうのか！？です。 WordPressにはデフォルトでWysiWygエディタが搭載されています。 注）現在の最新WordPressのバージョンでは、WysiWygエディタとBlockエディタの両方が搭載されており、デフォルトはBlockエディタになっています。 ただ、WysiWygエディタ（特にビジュアルエディタ）は機能が豊富なので、好き勝手使用されると書いた記事にCSSが適用されず、せっかくデザインしたページが台無しになってしまいます。 というわけで、
リッチな WYSIWYG エディタで CKEditor をカスタマイズする。 前提条件 Rails 5.x CKEditor の v4.2.4 を使用 以下、JavaScriptの処理は Rails に限らず使用できる。 不要なボタンを消す デフォルトの editorConfig を上書きすることで表示項目をカスタマイズできる。 次の例は最低限 WYSIWYG に必要な機能だけ残し、エディタの高さを 380px 固定にした例。 CKEDITOR.editorConfig = function (config) { config.toolbar_mini = [ { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: [ 'NumberedList', 'BulletedList',
始めに WYSIWYGエディタライブラリの一つにProseMirrorがありますが、これはReactやVue.jsを使わないpureなJavaScriptであるため、ProseMirror単体でWYSIWYGエディタを作ることができます。しかし、エディタをカスタマイズするに当たってフォントサイズの変更などのメニューを用意したい場合にUIの実装はReactなどを使った方が作りやすくはあります。そこで今回はReactでProseMirrorを使う方法を先に説明し、その後実際にいくつか機能を盛り込んだWYSIWYGエディタを紹介したいと思います。 実際に作ったもの 今回は以下の装飾機能を持つWYSIWYGエディタを作りました。 太字、斜体、下線の装飾 色変更 文字サイズ変更 テキストの位置指定（左寄せ、中央寄せ、右寄せ） テキストリンク設定 ProseMirrorで動かした内容をReactと連動
「Movable Type Advent Calendar 2018」 9日目の記事です。 久しぶりにMovable Type案件を対応しておりまして、WordPressとの差異に困惑しながら構築を進めております。 そこで、特に気になりました、投稿エディタについて。 WYSIWYGエディタ上部にあるボタン、インストール後の標準では下記になっているかと思います。 パッと見でわかる方もいると思いますが、 要素の配置ボタン（中央寄せや右寄せ）やテーブル生成ボタンがないことにお気づきでしょうか。 テーブルタグについては、ぶっちゃけなくてもいいのですが、配置はよく使うため、なんでないんだろうという疑問でした。 これ、MT5やMT6ではあった気がするのですが、勘違いでしたらゴメンナサイ。 WordPressでは、add_filterで、設定を書き換えているのですが、 あれ、、、Movable Type
AstroでCMSを利用する
コンテンツ管理システムはAstroプロジェクト外でコンテンツの投稿・アセットの管理できます。 これによって、コンテンツを扱う新しい機能を使えるようになります。ほとんどのCMSはビジュアルコンテンツエディター、標準的なコンテンツの種類を指定する機能、他の人との共同作業などの機能を提供しています。 CMSは特定の構造に従ったコンテンツで役立ちます。多くの場合はダッシュボードのような操作性とWYSIWYGエディターツールを提供します。 CMSはMarkdownファイルの代わりとなるCMSのリッチテキストエディターを使ってブログ記事を書けます。もしくは、CMSを利用してEコマースショップの商品リストを管理して、不完全なリストを除外するために特定のフィールドを必須項目にできます。 AstroプロジェクトはCMSからコンテンツを取得して、自分のサイト上の好きな場所に好きなように表示できます。 Astr
はじめに MarkTextというWYSIWYGエディタの開発が停滞してしまったので、代替となるエディタを探しました。(2022年7月中旬ごろの情報です) いろいろ探した結果、UNotesというVisual Studio Codeの拡張が自分のユースケースに合っていそうなので試してみました。 導入方法を紹介します。 私がツールに求めること Markdownの構文を意識せずに文章が書けること Markdownの構文は非常に曖昧なので、その曖昧な部分に意識を奪われたくありません。できれば、MS Wordのように文章の構造に集中して文章を書きたいわけです。 クリップボードから画像を直接ペーストできること 私は、スクリーンキャプチャを張り付けたドキュメントを書くことが多く、いちいちキャプチャした画像の保存先やファイル名に意識を奪われたくありません。ペーストした画像は自動的に、.mdファイルの隣のフォ
ホームテクノロジーWebサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webアプリで入力を受け付けるコンテンツにtextareaタグがある。これは複数行テキスト入力が可能なコンテンツだ。メールフォームなどのフリーテキストの入力を求める場合に設置することが多く、お問い合わせページやアンケートページなどに入力した覚えがあるのではないだろうか。 このtextarea要素は、複数行入力できるとはいってもプレーンテキストであって、文字入力だけ許されている。機種依存ではあるが、絵文字を表現する程度だろうか。 もし太字や文字サイズをカスタマイズするような要件には向かない。というかtextareaで、これらカスタマイズはできない。文字通りテキストエ
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
自分 & 会社のプロジェクトでリッチな機能を持つテキストエディターを使いたい。 色々調べてたらDraft.jsが出てきたので、見てみました。 2020/08/07 追記 本記事に draft-js-plugins-editor を言及しておりますが、現在 draft-js-plugins-editor はメンテナンスされてません。Reactのバージョンによっては色んなエラーを出してくるので、使わない方が良いと思います。draft-js 自体はメンテナンスされ続けているので大丈夫です。 Draft.js Isaac Salier-Hellendag's React.js Conf 2016 talk, "Rich Text Editing with React" is live! Watch it here: https://t.co/yBUkyqCPnx @hellendag — Reac
concrete5 CMSの「コメント機能」でできることのまとめ
現在、一般的なコーポレートサイトではまず使われないマイナーなコメント機能（とか言いつつ、弊社サイトのブログ記事にはconcrete5標準搭載のコメント欄を付けてありますが…）。しかし、会員制サイトでは登場頻度が高い機能でもあります。concrete5で用意されているコメント機能についてまとめました。 どんな機能？ コメント欄はブロックとして用意されているので、どのページにもドラッグ＆ドロップで配置することができます。 いわゆるテキストを書いてコメントを投稿できるだけでなく、画像を添付したり、５段階評価を付けたり、既存のコメントに返信できたりといった高機能なものになっています。 コメント欄で行える設定 設定を変更するだけで、様々なスタイルのコメント欄が実現できます。 フラット表示か、スレッド表示か？ 新着順か、古い順か？ コメントで５段階評価を付けられるようにするかどうか？ 各コメントの評価
WYSIWYGエディタ TinyMCE の設置と使い方
タグを使わずに、文字の装飾やテーブルの挿入ができる HTML エディタを探しいて見つけた javaScript ライブラリ TinyMCE の使い方。 TinyMCE は、 WYSIWYG ( What you see is what you get の略) エディタと呼ばれるものの 1 つ。 メーラーの HTML メール作成画面みたいなのが欲しいと言われ探した。必要だった文字の装飾と、エクセルとかの表をコピペできる機能があったので TinyMCE を使うことにした。 プロジェクトフォルダにファイルを置く TinyMCE ZIP ダウンロード から TinyMCE Community をダウンロードする。 ZIP を解凍して、 js の下にある tinymce フォルダごと、自分のプロジェクトの所定の場所 ( js ファルダ内とか) にコピーする。 ヘッダーや、ボディ閉じタグ直前で、スクリ
Contentful+JAMstackで脱WordPressした話｜Asuka Kamimura
こんにちは! エンジニアをしております上村です。 これはコーポレートサイトならびにRefcomeのプロダクトLPをJAMstackで作り直した際の経験談です。 脱WordPressへのきざし 弊社のマーケターなど開発者以外の人が更新を担当するサイトは、これまでWordPressで構築されていました。 導入当時は、社内にエンジニアが少なかったため、マーケターが外部ベンダーにサイト構築を依頼していました。そのため、社内のエンジニアでは手が入れづらく、新規開発コストが高いという状態が続いていました。当初は適切な選択として採用されたWordPressでしたが、社員や会社フェーズの移り変わりによって、だんだんと様々な問題が現れ始めていました。 なぜJAMstack化するのか JAMstack化計画の背景には、戦略として「今後LPやメディアを増やすことを考えていたこと」や「SEOを強化しようとしていた
Tiptap で標準のExtensionを拡張して独自のオプションや属性を追加する | DevelopersIO
ヘッドレスWYSIWYGエディターフレームワークであるTiptapでは、標準で拡張機能が用意されており様々な拡張機能を追加することでエディターの動作をカスタマイズできます。 このエントリでは、標準の拡張機能をさらに拡張して独自のオプションやアトリビュートを追加して使用する方法を紹介します。 Tiptapとは Tiptap はリッチテキストエディターのツールキットであるProseMirrorのヘッドレスラッパーで、サクッとWYSIWYGエディターを構築できるオープンソースのライブラリです。 公式ドキュメントが充実しており、デフォルトで多くの拡張機能が用意されているためカスタマイズ性も良好なライブラリになっています。（一部の拡張機能は有償としてプライベートレジストリで提供） Tiptap はVue.js(Nuxt.js)/React(Next.js)/Svelteなど、様々なフレームワークで利
この記事は#kubenewsの2021年6月18日の回で話す、@bells17が今週気になったニュース記事をまとめたものです。 自分が気になった今週のKubernetes + Cloud Native + その他なニュースをまるっとまとめておいて、その中から時間内に話せるものを話そうと思ってます。 あと記事はざっと読んで書いてるものが多いので、詳細はリンクとかで貼ってる記事の中を読んでもらった方が正確です。 配信URL: 告知とか Kubernetes Internal #9 @go_vargoさんよりMinikubeの実装やコントリビューター活動についてお話してもらいました。 Minikubeの実装のお話もとても良かったのですが、Minikubeの全体的なアーキテクチャのお話やコントリビューター活動のお話をかなり色々伺うことができて、なかなか聞けないお話が聞ける良い会になったと思うのでま
![[2021/06/18] 今週のKubernetes + Cloud Native + その他ニュース](https://cdn-ak-scissors.b.st-hatena.com/image/square/08eb0a9dc7d4d3dfdb740418a738ffb0eccdaa01/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KtHaFZxh--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2021%25252F06%25252F18%25255D%252520%2525E4%2525BB%25258A%2525E9%252580%2525B1%2525E3%252581%2525AEKubernetes%252520%25252B%252520Cloud%252520Native%252520%25252B%252520%2525E3%252581%25259D%2525E3%252581%2525AE%2525E4%2525BB%252596%2525E3%252583%25258B%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252582%2525B9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Abells17%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dIVHd4RjJlamFSNk52R0h3TEhqRndIaUtXZlZ6ZElSU0dFWEp0RVE9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
GUIエディタのTinyMCEを利用できます PukiWikiを編集するには独自の記述方法を覚える必要があります。 覚えると言っても簡単なものですが、それでもWikiの管理者以外はわからないというのが普通です。 「編集に参加したいけど記述方法がわからない」という利用者も多数存在します。 Wikiの場合、そうした層を取り込めるかどうかが、サイトの質に直結します。 そんなときに求められるのがリッチエディタ（WYSIWYGエディタ）です。 かつてはPukiWiki Plus!用にguieditというプラグインがありました。 ただし本体であるPukiWiki Plus!は開発を終了し、プラグイン配布サイトも閉鎖されています。入手できたとしても、脆弱性のある古いタイプのCKEditorを利用しているため、そのまま利用を続けるのは非常に危険です。 そこで今回、前出のguieditを元に、最新のTiny
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エディタ
シンプルで使ってみたいWYSIWYGエディター Editor.js | アールエフェクト
CKEditorをカスタマイズする - Qiita
ReactでProseMirrorを使ったWYSIWYGエディタの実装
【Movable Type 7】TinyMCEボタンのカスタマイズ
VSCodeのUnotes拡張を使ってMarkdownドキュメントを書く
Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法
Reactでイケてるテキストエディターを使いたい - Qiita
[2021/06/18] 今週のKubernetes + Cloud Native + その他ニュース
PukiWikiをビジュアルエディタ（TinyMCE）で編集できるプラグインを作成