HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/01/01〜2022/12/07、対象言語は JavaScript および TypeScript です。 なお GitHub がそのリポジトリをなんの言語と見なしてトレンドに掲載したかをもとに集計対象を決定していることにご留意ください。 別言語で書かれた Rust 製の JS 向けのツールや CSS フレームワークなどは基本的に対象外となります。 集計に利用したデータですが、GitHub は過去のトレンドを閲覧する方法を提供していないため、独自の仕組みで GitHub トレンドのアーカイブを生成しそのデータを利用しまし
こんにちは丸山@h13i32maruです。 僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。 というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。 （訳: 楽しかったので、誰かに聞いてもらいたい！） エディタの概要 メンテしやすいテキストパーサ - PEG.js メンテしやすいH
Slack のテキスト入力欄に WYSIWYG エディタが実装され、Markdown のまま編集したい派は悲鳴を上げている人が多数。苦情もたくさん来ているみたいなので、そのうち無効にできるようなオプションが付きそうですが。（→現在開発中とのことです。追記をご確認ください。 →正式に実装されました🙌） 【追記】 WYSIWIG 無効オプションが正式に実装されたようです🙌 詳細設定から「マークアップでメッセージを書式設定する」というオプションを有効にすると、WYSIWYG が無効にできるようになりました！ やり方 クリックで展開（※ご自身で試される場合、自己責任でお願いします）
Rails 6.0正式版がリリース。Action Textでリッチテキスト対応、Action Mailboxでメール処理、マルチデータベース、パラレルテストなど新機能
Rails 6.0正式版がリリース。Action Textでリッチテキスト対応、Action Mailboxでメール処理、マルチデータベース、パラレルテストなど新機能 Ruby言語によるWebアプリケーションフレームワーク「Rails」の最新版、「Rails 6」の正式版がリリースされました。 Rails 6.0: Action Mailbox, Action Text, Multiple DBs, Parallel Testing, Webpacker by default, and Zeitwerk! What a monumental final release. Massive upgrades, intense conceptual compression. Our Best Rails Yet! https://t.co/DQEzRKSChr — DHH (@dhh) Augu
Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre
iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Markdown(マークダウン) とは、文章を記述するための軽量マークアップ言語です。プレーンテキストに対して「# 見出し」「* 箇条書き」などの文書構造を明示し、MarkdownエディタでかんたんにHTML生成することができます。 今回は、無料で使えるオススメのMarkdownエディタを厳選！ Windows/Mac/スマホアプリ対応している定番＆人気エディタを、おすすめポイントと合わせてご紹介します。ブラウザ専用のオンラインMarkdownエディタについては、以下の記事を参照ください。 参考： 【ブラウザ専用】オンラインMarkdownエディタ おすすめ4選 【便利ツール】MarkdownテーブルをExcelライクな操作で簡単に作成できるツール Markdownとは そもそもMarkdownとは、どのよう
和田 優斗（わだ ゆうと） 組版とは，書籍やパンフレットなどを作る際，文字や図をページに配置する作業のことである．Microsoft Wordを使って文書を作る作業は組版であるし，研究論文を書く人ならLaTeXを使う人も多いだろう． 組版ソフトウェアには，大きく分けて2種類ある．文書のテキストに指示を埋め込んでいく文字ベースの組版処理システムと，画面上で組版結果を見ながらそれを操作していくWYSIWYGエディタである．前者にはTeXや（未踏OBの諏訪敬之氏の）SATySFiが，後者にはWordやAdobe Illustrator，InDesignがある． どちらにも利点がある．WYSIWYGはとっつきやすいが，文字ベースにも，文書から分けてスタイルを記述するゆえ再利用性が高かったり，文字ゆえ差分の把握やバージョン管理がしやすかったり，マクロ定義による拡張や自動処理が可能になる，といったさま
Wiki.jsはNode.jsベースのWikiシステムです。モダンな作りとスタイリッシュなデザインで、「とりあえずWikiだけあれば良い」という用途には最善な選択肢のひとつでしょう。今回はそんなWiki.jsをUbuntuにデプロイしてみます。 あなたのWikiはどこから？ 一般的に「Wiki（ウィキ）」と言えば「Wikipedia」を暗黙的に意味することが多い昨今の状況ですが、本連載の読者ならおそらく誰でもご存知のように、現在ではウィキソフトウェアで動いている、ウェブブラウザーで複数のユーザーが共同で編集可能なコンテンツ管理システムの総称です。 生のHTMLを書くのに疲れた人にとって、Wikiの「人に優しいマークアップ言語[1]」は魅力的に映り、現在では非常に多くの環境で様々なWikiが活用されています。その最も成功した例が、Wikipediaを支えているMediaWikiでしょ
こんにちは！SmartHRで文書配付機能の開発を担当している、aanzaiです。 2022年末から2023年2月にかけて、文書配付機能で使用しているPDFのレンダリングライブラリの置き換えを行ったため、具体的にどのように移行したかをご紹介します。 文書配付機能の紹介 文書配付機能（旧:雇用契約）は、SmartHRの最初のオプション機能として開発された機能で、事前に作成した書類テンプレートをもとに、SmartHRに保存された従業員情報を差し込んで書類PDFを作成し、従業員に配付したり、契約書として合意を取ったりすることができる機能です。 書類テンプレートのレイアウトは、ユーザーがWYSIWYGエディタで作成したものがHTMLとして保存されています。書類を配付する際は、このレイアウトHTMLに従業員情報を差し込み、PDFに変換します。 PDFレンダリングライブラリ移行の理由 文書配付機能では、
WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog
まえがきブログや記事を投稿するWebサービスには、殆どの場合、リッチなエディター機能が備わっています。特に、記事を見た目通りに書けるエディターは、WYSIWYGエディターと呼ばれ、記事を書く際には欠かせない機能の一つです。 Wantedly にもストーリーと呼ぶ記事を投稿する機能があり、その記事投稿部分では、WYSIWYGエディターを実装しています。 では、どのようにWYSISYGエディターを開発していくのでしょうか。この記事では、エディターの機能を実際に開発するための基礎知識と実装について書いていきます。 今回話すエディターについて今回記事で指すエディターとは、 WYSIWYGエディターを想定しています。例えば、Dropbox Paper や google docs、Medium、Note などのエディターがそれに該当します。Qiita や Zenn のような 2カラムの Markdow
WebでHTMLをいい感じにコピーさせる - VideoTouch Engineering Blog
こんにちは id:mstssk です。 Webサービスを作っていると、何かしらをユーザーにコピーして使ってもらうというシチュエーションが出てきます。 WebページをシェアするためにURLのコピーボタンが置いてある、なんていうのはよく見かけますね。 しかし、ある程度複雑なコンテンツはHTML情報としてコピーさせたい事が稀にあります。 画像やリンクを含んだHTMLです。 そこで、もう少し欲張って、こういうことが出来ないか調べてみました。 テキストエディタに貼り付けると、HTMLソースコードのテキストとして貼り付け WYSIWYGエディタに貼り付けると、書式情報を保ったコンテンツとして貼り付け 3行まとめ ただのテキストをコピーするだけならクリップボードAPIを使えばOK。 HTMLをWYSIWYGに貼り付ける状態でコピーさせるには、現在非推奨な実装方法を使いつつ一工夫必要になるけど可能。 一行
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
マークダウン、皆さん使っているでしょうか。使っていますよね、GitHub(GFM)やSlack(一部記法）、個人的なメモアプリ等など、マークダウンを使えるサービスは多いので、使ったことがある人は多いんじゃないかと思います。 そして弊社のDocBaseというサービスは、マークダウンを使って情報共有をするサービスです。これも皆さん使っていますね？ この度は、そんなDocBaseのメモ編集画面で、ハイブリッドエディタなるものをリリースしました。これはDocBaseに存在したいくつもの不満、問題を解消してくれるもので、これが一体どういったもので、どうやって作られたのかを書いていきます。 ハイブリッドエディタとは？？ 「ハイブリッド」何やらガソリンと電気を使って動きそうな印象を受ける言葉ですが、もちろんそういった意味はありません。 次の動画を見てください。 左側がマークダウン、右側がHTMLのプレビ
Web制作者にとって、新しいCMSに手を出すときに気になる要素は、テンプレートの作り方、デザインカスタマイズの自由度だと思います。特にいったんクライアントがデザインにGOサインを出したら、実装の都合で変更しにくい風潮があると感じられる日本では特に… デザインカスタマイズについて、いかに最低限のドキュメントだけ読んで何とかなるかという点では、concrete5はCMSの中でもピカイチだと思います。そこで、個人的に「これだけ知っていれば普通のサイトは作れるようになる」と思う知識をまとめてみました。ここでいう普通のサイトとは、concrete5の標準機能でできる範囲のサイトという意味です。 なぜconcrete5は、ドキュメントを読む量が少なくて済むのでしょうか。それは、サイトを作り上げるのに、マウス操作で実現する範囲が他のCMSより多いからだと思います。逆にいうと、テンプレートは少ない知識で楽
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as Code - Qiita
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as CodeMarkdownGitLabasciidocVisualStudioCodekroki これは、 NTTコミュニケーションズ Advent Calendar 2020 25日目の記事です。 昨日は @tnoyama さんの「TEKTONとArgoを比較してみた」でした。お楽しみいただけましたか？ Krokiとは 本記事では、テキストからの図表生成ツール Krokiを紹介します。最新バージョンは0.9.0です。 公式docs: Kroki! GitHub: yuzutech/kroki: Creates diagrams from textual descriptions! 概要 Kroki!は、テキストから統一的なAPIで、 UML C4 データ可視化 その他図表 を、PNG,
はてなブログ独自の集計による人気記事のランキング。7月4日（日）から7月10日（土）〔2021年7月第2週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 日常の失敗も品質管理で解決できる - 本しゃぶり by id:honeshabri 2 はてな出身の文筆家をもう40人ざっと挙げてみる（主に2016年以降） - YAMDAS現更新履歴 by id:yomoyomo 3 リーダーシップの真実について如実に表した本「悪いヤツほど出世する」 - 勝間和代が徹底的にマニアックな話をアップするブログ by id:kazuyomugi 4 伊藤詩織氏と大澤昇平氏との裁判、判決内容が示唆するもの - 荻上式BLOG by id:seijotcp 5 【7/20まで全文公開】『25歳からの国会 - 武器としての議会政治入門』を発売します！ - 読む国会 by id:sirduke 6 4
商用利用できるWYSIWYGエディター5選！Froala Editorの導入方法も解説 - Workship MAGAZINE(ワークシップマガジン)
「Microsoft Officeシリーズの感覚で、HTMLの文字装飾ができればいいのに……」 「Wordpressのような高機能なエディターが欲しいな……」 CMSを開発するとき、このように感じるエンジニアの方は多いのではないでしょうか。 しかしWordpressのような高機能なエディターを自分で作るのには、膨大な工数がかかります。自作という選択肢はあまり現実的ではありませんよね。 そこで便利なのが、「WYSIWYG（ウィジウィグ）エディター」。OfficeのWordのようなドキュメントエディターを、簡単に導入できるフレームワークやプラグインのことです。文字の装飾はもちろん、画像や動画の設置までできる高機能なエディターを簡単に導入できます。 今回は、商用利用が可能なWYSIWYGエディターを5つピックアップしました。CakePHP3で簡単に実装できる『Froala Editor』の導入方
WordPressでは、なぜ固定ページの内容をテンプレートファイルに書いてはいけないのか？ | Cherry Pie Web
最近、WordPress界隈をにぎわしているTwitter上のアンケートがあります。 「WordPressの固定ページの内容は、テンプレートファイル（page-xxxx.php）に書くか？ それとも、管理画面のエディタで書くか？」 というものです。 正直、私はこの質問を読んで『管理画面に書くにきまってるだろう。今どき、こんなことを聞く人がいるのか？』と驚いたのですが、もっと驚いたことに回答した人の中でテンプレートファイルに書くという人の割合がかなり多かったのですね。 結論から言うと、WordPressでテンプレートファイルにコンテンツを直書きするのはやめたほうが良いです。 その理由と、ではどうすればよいのかということを、この投稿では書いておきたいと思います。 テンプレートファイルに固定ページの内容を書くとはどういうことか？ まず、テンプレートファイルに固定ページの内容を書くというのはどうい
はじめに Backlogは昨年（2021年）メンション機能を導入しました。本文中に他のユーザーの名前を書くと、相手に通知が送られるというものです。それにともないこのメンション機能が使える箇所で使うテキスト編集コンポーネント（以下、エディタ）を作り直しました。 編集中のテキストに含まれるメンションを、見た目的にもデータ的にも通常のテキストとは異なるものとして扱えるようにするためです。 Backlogの以前のエディタはtextarea要素で実装されていました。textarea要素はプレーンなテキストしか扱えず、テキストの一部を太字にするとか背景色をつけるといった機能はありません。 ブラウザ上でテキストエディタを実装する手段には、textareaのほかにcontenteditable属性をtrueにした要素を使う選択肢もあります。この場合はHTMLの表現力が使えるのでメンションの表示をいい感じに
◆ Naker.Back https://app.naker.io/back/ 紹介 「Naker.Back」は、インタラクティブなWebサイトの背景画像が作れるWYSIWYGエディターです。 まずはテンプレートを選びます。 続いて、右側にあるコントロールパネルからカスタマイズしていきます。 グラデーションの背景を変えることはもちろん 動き回る粒子の数を変えたり 大きさを変更することも可能。 粒子を一方方向に動かすなど、細かく指定ができるのもGood。 粒子のイメージは、約100種類ほどのテンプレートから選ぶことができます。 exportして背景に差し込むだけで一段クオリティが高いwebサイトが作れそうです。 ◆ Naker.Back https://app.naker.io/back/
【WordPress】ビジュアルエディタでプラグインを使わずHタグにクラスを追加したりリンクを作成したりする方法 | 何もないけどヨロシク。
functions.phpにTinyMCEをカスタマイズしたスタイルセレクトボタンを追加する functons.phpをカスタマイズする。こんな感じ。 functions.php //スタイルセレクトボタンを追加 function tinymce_add_buttons( $array ) { array_unshift( $array, 'styleselect' ); return $array; } add_filter( 'mce_buttons', 'tinymce_add_buttons' ); //スタイルセレクトの初期設定を変更 function customize_tinymce_settings($mceInit) { $style_formats = array( array( 'title' => 'div(段落)', 'block' => 'div', 'clas
【告知】12/1にZennで関数型プログラミングの入門本を公開します 〜 Unknown Unknowns 「知らない事に気づいてない」
【告知】12/1にZennで関数型プログラミングの入門本を公開します 〜 Unknown Unknowns 「知らない事に気づいてない」 この記事は、 2023-12-1にZennで公開予定 関数型プログラミングの入門本 Functional Programming From Scratch 関数型プログラミングをゼロからわかりやすく実用的に幅広い視点から解説！〜 圏論からFRPの構築まで 🔷UNIT 1🔷 OVERVIEW の冒頭部分です。 全UNIT 1 ~ 5のうち、この本は、UNIT 1です ★1. OVERVIEW 関数型プログラミングの一番「外側」を紹介 関数型プログラミングとは何か？ 最新のプログラミングコミュニティの動向、CPUと命令型プログラミング、システム言語における型、構造化プログラミングへの抽象化、関数型言語の紹介、オブジェクト指向と関数型プログラミングの用語と
「静的サイトジェネレーター」について網羅的に説明します
今回はウェブサイト制作のためのツールである 静的サイトジェネレーター について説明します。 必ずしもプログラミングの知識を持たない方を読者と想定し、「静的サイトジェネレーターとは何ぞや」という基礎の部分から、静的サイトジェネレーターが注目を集めている背景、メリット・デメリット、使いどころ、定番の静的サイトジェネレーターライブラリまで、静的サイトジェネレーターに関するあれこれを網羅的に説明します。 記事を書くきっかけは、静的サイトジェネレーターについて説明したよい記事が Google 検索したときに上位に引っかかってこなかったことです。 世界的には静的サイトジェネレーターの利用は年々広がっており「プログラマが個人的に使うもの」から「ビジネス用途でも使われるもの」に変わってきつつある感じがします。一方、日本国内では先進諸国に比べると認知・活用ともに遅れているように感じます。 その一因は適切な知
自社プロダクトとして育てるヘルプセンター｜otapo
こんにちは！ SmartHRでUXライターをしているotapoと申します。 この記事はSmartHR Advent Calendar 2022の16日目です。 この記事では、Zendesk Guideで運用していたヘルプセンターを自社開発のアプリケーションに移行した背景や、ヘルプセンター移行前後で変わったことなどを紹介します。 SaaSのように日々変化のあるプロダクトのサポートコンテンツの作成に関わる方のヒントになれば幸いです。 SmartHRのUXライターの仕事の全体像や、開発チームとの関わり方については、以下の記事などで公開しているので、今回の記事では割愛します。 SmartHRのUXライティンググループが目指すもの｜otapo｜note ヘルプページ作成タスクの透明性を上げたら、UXライターの経験知を共有知に昇華できた話 - SmartHR Tech Blog ライティングガイドライ
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
いまさらだけどContentEditableをいじって、キャレットの扱いがしんどいということがわかったよ - 算譜王におれはなる!!!!
WYSIWYGエディタに憧れてContentEditableをいじってみると、けっこうな底無し沼だと。気づいたときにはどっぷり浸かってるやつ。 ググればそれなりに知見が見つかるし、良い感じのライブラリもある。けど僕がやりたかったことは、自分でコードを書いて実現するのが早いんじゃないかなーと思って、沼にダイブした。 やりたいことは、ワープロソフトみたいなやつというよりも、編集しているテキストのスタイルがリアルタイムに変化するMarkdownエディタっぽいやつ。 つまりユーザがスタイルを当てるんじゃなくて、ユーザが入力したテキストに応じてスタイルを当てたい。 より正確には、テキストの見た目をおしゃれにするだけではなくて、もっと高度な何か、Reactのコンポーネントとか、を埋め込むとかしたかった。 Draft.jsやEditor.jsのような、ContentEditableを扱いやすくしてくれる
若い人材の発掘・育成を目的とした「未踏IT人材発掘・育成事業」にて実施されている「未踏IT人材発掘・育成事業 成果報告会」。ここで、和田氏が「強力なグラフィック機能を備えた日本語組版処理」をテーマに登壇。新しい組版処理システム「Twight」について紹介します。 組版が情報化社会で重要な役割を担う理由 和田優斗氏（以下、和田）：それでは私、和田より「強力なグラフィックデザイン機能を備えた組版処理システムTwightの開発」について発表します。 あらためまして、横浜市立横浜サイエンスフロンティア高校の和田優斗と言います。春からは筑波大学の情報学部に進学します。私の趣味として、グラフィックデザインやタイポグラフィ、Webデザインといった領域に対して興味があり、そこで得た経験や情熱を活かして、未踏事業に邁進してきました。 本プロジェクトでは、新しい組版処理システムを開発しました。そもそも組版とは
JSer.info #477 - React 16.13.0がリリースされました。 React v16.13.0 – React Blog setStateやstyleでの不適切な使い方や廃止予定のref属性に関する警告の追加、 React.createFactoryとReactDOM.unstable_createPortalが非推奨になっています。 また、hydrationに関する警告にコンポーネントスタックを表示するようになるといった改善が行われています。 JavaScriptのCompiler,Bundler,Formatter,Linter(実装中),Test Frameworkなどを包含するツールキットであるRomeがExperimentalで公開されました。 facebookexperimental/rome: An experimental JavaScript toolc
自分好みのアウトライナーを開発した記録
はじめに Twirlinerというアウトライナーアプリを作成しました 既存のアウトライナーアプリと大きな違いはありませんが、自分が欲しい機能を少しずつ追加しています。バグや要望等ありましたら、お気軽にコメントをお願いします。 Demoページ 更新は保存されません。記述記法等の確認に使用してください。 App(Local)ページ 更新は LocalStorage に保存されます ※LocalStorage の容量を超えるデータを格納した場合の動作は保証できません。文字数にもよりますが、15000 行くらいで上限に到達します。 ログイン機能 現在は開放していません 使用技術 フロントエンド Typescript + React(Next.js) バックエンド（現在は停止中） Typescript + Node.js 何故作ったか アウトライナーのすべてを行で表す簡潔さと構造操作の自由度に惚れ込
ソースコード管理をBitbucketからGitHubに移行した話 - i Cubed Systems Engineering blog
こんにちは、サーバーサイドエンジニアの@YusukeIwaki です。 もう半年くらい前になりますが、2020年4月15日に突如としてGitHub Teamプランの値下げが発表されました。 弊社ではBitbucketを使ってソースコードの管理をしていましたが、前々から「GitHubを使いたい」という声も社内でちらほらあったことから、値下げを受けてGitHub移行を決めました。そして3ヶ月間の移行期間を経て2020年の7月28日にGitHubに移行を果たしました。 移行からしばらく経ってしまいましたが、この記事ではGitHub移行を意思決定するまでの課題や、GitHub移行後の状況などを紹介していきたいと思います。 Bitbucket利用時に起きていた問題 そもそも、組織にとってBitbucketがGitHubに比べて使用するメリットが大きいならば、わざわざ乗り換える必要はありません。 「B
プライズ株式会社、チームの文書作成・活用を効率化するSaaS「flouu（フロー）」正式版の提供を開始。 「働くひとの価値を最大化する」をミッションとするプライズ株式会社（本社：東京都渋谷区、代表取締役CEO：内田孝輔）は、2019年10月17日にチームの文書作成・活用の効率化を支援するSaaS型ソフトウェア「flouu（フロー） 」（https://flouu.work）の正式版をリリースいたしました。先立ってリリースしたクローズドβ版では、日報や業務マニュアル、メディアの記事など日々多くの文書を作成される企業様にご利用いただき、機能・UIについてご好評をいただきました。 flouu（フロー）は文書を見ながらできるリアルタイムコミュニケーション機能、同時編集機能つきWYSIWYG（見たまま編集できる）エディター、直感的なドキュメント管理画面など、多くのビジネスパーソンにとって文書作成がし
Advanced Custom Fieldsの基本的な使い方！入力欄を追加し出力する方法【WordPressプラグイン】 | ガリレオ アンド ヴィーナス合同会社
ソリューション 2020.05.14 Advanced Custom Fieldsの基本的な使い方！入力欄を追加し出力する方法【WordPressプラグイン】 通常のWordpress入力欄とは別に、よくつかう項目などのカスタム入力欄をプラグインを使用して追加することができます。 今回はこのプラグイン「Advanced Custom Fields」の使い方をご紹介します。 出力のコードのみ見たい方はコチラの記事がオススメです。 Advanced Custom Fields（ACF）とは WordPressの投稿ページや固定ページ、カテゴリ、コメント欄など任意の箇所へ 入力欄を追加できるWordpressの追加機能（プラグイン）です。 利用にはプラグインの「新規追加」から「Advanced Custom Fields」と検索し、インストールする必要があります。 どんな時に使うの？ 投稿の際に
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す
はじめに WordPress 5.0からGutenbergと呼ばれるブロックエディターがデフォルトのエディターとして採用されました。 そのため、今後はこのブロックエディターによる開発が増えてくると思われます。 個人的には、今までのWysiWygエディターに不満を感じていたわけではありませんが、ブロックエディターという選択肢が増えたことで、できる事の幅が増えてくる と思います。 本記事では、このブロックエディターの新規ブロック（以降、カスタムブロック）の作り方を記載して行きます。 ブロックエディターとは？ ブロックエディターは、名前の通り、HTMLをブロックように積み上げてHTMLを作成していくエディターです。 詳細は、以下を参照ください。 ブロックエディターの特徴の1つとして、上記リンク先のページにも記載がありますが、 実際のサイトと同様に表示されるエディター。 であることです。 これから
Nuxt3 + Tiptap + Y.js でリアルタイム共同編集が可能なエディターを作る | DevelopersIO
NotionやGoogle Docsなど、最近のオンラインドキュメントエディターでは、リアルタイムで複数人による共同編集が可能なサービスをよく見かけます。 便利ですよね、リアルタイムでの共同編集。 自分も日々お世話になっています。 最近、お仕事で上記サービスのような共同編集が可能なエディターを実装する機会があったのですが、そちらで採用した Tiptap というエディターライブラリがかなりいい感じだったので、今回その実装を簡単なサンプルとして紹介してみたいと思います。 なお、今回作成したサンプルのソースコードはGitHubに公開しています。 https://github.com/amotz/nuxt-tiptap-sample 完成イメージ 検証環境 nuxt 3.2.0 tiptap 2.0.0-beta.217 y-prosemirror 1.0.20 y-websocket 1.4.5
【WordPressプラグイン】Smart Custom Fields (SCF) 出力方法一覧 - Meowriosity[ミャリオシティ]
様々なカスタムフィールドを手軽に使い倒せて、【 繰り返しフィールド 】や【 オプションページ 】まで搭載されている「Smart Custom Fields(スマートカスタムフィールド)」。 こちらのページでは、細かい説明はなしで 「Smart Custom Fields」の出力方法を一挙ご案内します。 出力方法をササっと確認したい時にどうぞ^^ 同じテーマの記事 【WordPressプラグイン】Smart Custom Fields (SCF) 出力方法一覧 【WP】Smart Custom Fields 表示条件(投稿)でカスタム投稿タイプの投稿も選べるようにする(投稿IDを表示) 【WP】Smart Custom Fields [関連する投稿][関連するカテゴリー] の枠の高さを変える このページの目次 [基本のキ] フィールドの呼び出し方 投稿に設置したカスタムフィールドを呼び出す
![【WordPressプラグイン】Smart Custom Fields (SCF) 出力方法一覧 - Meowriosity[ミャリオシティ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e44ff88d6c1c7910893120c35b5a4fb67f2fb03b/height=288;version=1;width=512/https%3A%2F%2Fmillmi.com%2Fwp%2Fwp-content%2Fuploads%2F2020%2F02%2F1461.png)
この記事は PowerShell Advent Calendar 2019 の 23日目 の記事だ。 日程が埋まりきっていなかったので、適当な内容で埋めていこう。 あなたは、 PowerShell の短いコードを、 デスクトップのアイコンをクリックするのも億劫なほど、手軽に実行したいと思ったことはないだろうか？ ないって？ 私はある。 例えば、ブラウザなどでコピーして WYSIWYG エディターにペタリと貼り付けるときに、クリップボード内の装飾情報を削除したいとか。 (Get-Clipboard -TextFormatType UnicodeText -Raw) -replace '^[ \r\n\t]*|[ \r\n\t]*$','' | Set-Clipboard PowerShell なら上記のような一行コード実行すれば済む話だ。 しかし、 ウィンドウをシェルに切り替えたり、 ショー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubのトレンドで振り返る2022年のJavaScript/TypeScript
Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
Slack の WYSIWYG を無効にしたい - Qiita
スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
iOSブラウザで快適に書けるエディターを作るの大変すぎ問題
【2024年版】Markdown(マークダウン)エディタ厳選まとめ＜Win/Mac/iOS/Android＞
強力なグラフィック機能を備えた組版処理システムTwight｜情報処理学会・学会誌「情報処理」
第704回 高機能でMarkdownや作図もサポートするWiki.js | gihyo.jp
文書配付機能でPDFレンダリングのライブラリを置き換えた話 - SmartHR Tech Blog
Tiptapでオリジナルエディタをつくろう！
マークダウンエディタをハイブリッドにするために必要なこと
これだけ知っておけばとりあえずconcrete5でサイトを作れるまとめ - Qiita
今週のはてなブログランキング〔2021年7月第2週〕 - 週刊はてなブログ
ProseMirrorで作るちょっとだけリッチなテキストエディタ | 株式会社ヌーラボ(Nulab inc.)
インタラクティブなWebサイトの背景画像が作れる「Naker.Back」
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
美しい組版を実現させる新しい処理システム「Twight」 WYSIWYGへの依拠を回避しつつグラフィカルな媒体を実現
2020-03-02のJS: React v16.13.0、Rome(JavaScript Tool Chain)、Ember Octane
プライズ株式会社、チームの文書作成・活用を効率化するSaaS「flouu（フロー）」正式版の提供を開始。
【WordPress】カスタムブロックの作り方を書いてみた - Qiita
タスクトレイで指令を待ち続ける健気な PowerShell スクリプト | Aqua Ware つぶやきブログ