「Visual Studio Code」に日本語テキストの校正機能を追加する拡張機能「テキスト校正くん」／「Visual Studio Code」でドキュメントもブログも書いてしまう人に是非お勧め【レビュー】
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム
Markdoc is a powerful, flexible, Markdown-based authoring framework. From personal blogs to massive documentation sites, Markdoc is a content authoring system that grows with you. View docs
概要 Word や Excel でのドキュメント作成を回避し、なるべく生産性高く、かつ、OS 環境依存なく、すべて基本無料で構成できるツールで、Markdown ベースで設計書を作成することを考えてみます。 GitHub 上で閲覧できる形でドキュメントを作成することを前提に、VSCode（＋プラグイン）を用いて、テキスト文書、表（テーブル）、図（構成図など）、キャプチャ、などをスピーディに作成し、PullRequest ベースで運用していけるように、プラグインを構成および、レギュレーションを作成してみました。 GitHub の README.md や Wiki に書いて使えるかと思いますので、併せて markdown 形式および、vscode のプラグイン推奨設定ファイル形式でも載せておきます。 もし、もっとこのプラグインを使うと良い、などアイデアなどありましたら教えていただけると幸いです
Code at the speed of thoughtZed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. It's also open source. Stay in FlowProductive coding starts with a tool that stays out of your way. Zed combines the power of an IDE with the responsiveness of a lightweight editor for productivity you can feel under your fingertips. Engineered for performanceZed efficiently le
1. 概要 2024年の1月24日にZedがOpen source化しました! ということで、Zedとは何か、実際に使ってみてどうだったかというのを簡単にご紹介できればと思います。 2. Zed とは何か? AtomとTree-sitterのクリエイターによる、Rust製のコードエディターで、OSS (オープンソースソフトウェア) であり、 Githubのリポジトリ こちらで公開されています。 公式サイトから一部抜粋すると下記のような特徴があるようです。 2.1 パフォーマンスを重視した設計 2.2 インテリジェンス系のサポート Github Copilotのサポート GPT-4 を使用して、自然言語のプロンプトを入力することで、コードを生成したりリファクタリング可能 2.3 言語対応 入力時にすべてのバッファの完全な構文ツリーを維持し、正確なコードハイライト、自動インデント、検索可能なア
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ
マイクロソフト、WebIDEの「Visual Studio Codespaecs」を「GitHub Codespaces」に統合へ マイクロソフトはWebブラウザで利用可能な統合開発環境、いわゆるWebIDEの「Visual Studio Codespaces」を、GitHubで提供を予定しているWebIDEの「GitHub Codespace」へ統合することを発表しました。 Visual Studio Codespacesは、2019年5月に行われたMicrosoft Build 2019でVisual Studioファミリーのなかで、Web版のVisual Studioの位置づけとなる「Visual Studio Online」として発表され、その1年後の今年2020年5月に「Visual Studio Codespaces」と名称変更され、パブリックプレビューとして利用可能になりまし
Check out this cool AI-powered 3D animation editor and mocap tool that you can use for free. If you are an aspiring animator looking for a software you can proudly call your favorite, here's one you should definitely consider. Meet Plask, a web-based, AI-powered 3D animation editor and motion capture tool. Plask allows you to seamlessly record, edit, and animate your projects without leaving your
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
How We Made Bracket Pair Colorization 10,000x Faster In Visual Studio Code
Register now for a full day of community, learning, and all things Visual Studio Code Bracket pair colorization 10,000x faster September 29, 2021 by Henning Dieterichs, @hediet_dev When dealing with deeply nested brackets in Visual Studio Code, it can be hard to figure out which brackets match and which do not. To make this easier, in 2016, a user named CoenraadS developed the awesome Bracket Pair
自分の日本語を、 信じない 日本語のAI校正・相互レビュークラウドShodo（ショドー）。 もう目を皿にして誤字脱字や二重敬語をチェックする時代は終わりです。メールやプレスリリース、原稿を書くときの無駄をなくします。 Shodoを始めよう 日本語をチェックする手間を減らしませんか？ Googleアカウントでログインして、Shodoを無料で始めましょう。
Monaco Markdown Editor For GitHub GitHubでMarkdownを書くときにテキストエリアがVS Codeみたいになるブラウザ拡張 chrome.google.com 機能としては Markdownとコードスニペットのシンタックスハイライト Tabでインデント、Shift+Tabでインデントの戻し マルチカーソル F11でフルスクリーン フルスクリーンモードでは、十分な領域があればプレビューを表示 etc github1s GitHubのリポジトリのURLに1sを追加するだけで、VS Codeでリポジトリを読むことができるサービス 例えば、VS Codeのリポジトリ https://github.com/microsoft/vscode を見たい場合は、 https://github1s.com/microsoft/vscode を開くだけ。 なんだけど、
大きなコードベースを持ったプロジェクトでコードを書くとなった時に、書くのと同じくらい(またはそれ以上に)コードを読むことになると思います。 なので、コードの検索ツールの良し悪しは生産性に直接的に影響してくると言えるでしょう。 VSCode へのお気持ち 僕は普段はIntelliJを使っていて、その検索ツールの出来(もちろんそれ以外も)に非常に満足していますが、諸々の事情からVSCodeを使いたいという気持ちになることが多々あります。 しかし、どうしてもVSCodeの検索ツールが好きになれず移行する気持ちになれないでいました。 具体的に何が好きになれないかと言うと、Open in Editorを使用しない場合は、検索結果の周辺コードのプレビューを見るためにファイルをポコポコ開いていく必要がありツライです。Open in Editorを使用する場合は、周辺コードの情報量の調整が面倒でツライです
A CMS With Version Control Built-inTina is a fully open-source headless CMS that supports Git
VSCodeの拡張開発に入門してみました
こんにちは。GMOアドマーケティングのK.Mです。 最近めっきりVSCode上で過ごすことが多くなりました。 というわけで、今回はVSCodeの拡張の作り方について調べてみました。 もともと便利な拡張がたくさんあるVSCodeですが、自分の作業に特化したかゆいところに手が届くものを自作できるようになることのメリットも大きそうです。 手始めに、エディタの拡張と考えると良い題材かと思われる選択範囲の文字列を見やすく整形して置き換える機能を作成してみたいと思います。 Beautify系の拡張はたくさんありますが、プロジェクト特化なログ文字列とかをサクッと整形したいようなケースで役に立つことを想定します。 プロジェクト準備 ジェネレーターが用意されているため、それを使ってプロジェクトの雛形を生成します。
【入門】Electron完全に理解した
Electronとは Electronとは、GitHubが開発したオープンソースのフレームワークです。macOS、Windows、Linuxといったクロスプラットフォームに対応したデスクトップアプリを開発することができます。 ChromiumとNode.jsを使用しているため、HTML、CSS、JavaScriptなどのWeb技術を駆使してデスクトップアプリをつくれるのが大きな特徴のひとつです。 エンジニアにはお馴染みのVSCodeやSlackをはじめ、FigmaやTwich、Microsoft TeamsなどのデスクトップアプリにもElectronが採用されています。 そんなElectronを完全に理解するために、お約束のHello Worldから入門してみました。 WindowsでHello Worldしてみる 本記事ではWindowsでの環境構築とアプリのインストーラー作成までの流れ
DeepL Write is leaving beta soon. You’ll be able to purchase a paid version for unlimited usage and maximum data security.
JavaScriptでファミコン風2Dゲームが作れる無料のWeb開発環境「Bitmelo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上に2Dゲームを開発できる環境を提供してくれる無料のWebサービスをご紹介します。 ゲームを作るのに必要なキャラクターの作成や効果音などの音作りから、ステージの作成やゲームロジックのプログラミング・ファイルへの書き出しまですべて統合されているのが大きな特徴です。 ゲームを作ってみたいと考えている人は、ぜひ参考にしてみてください！ 【 Bitmelo 】 ■「Bitmelo」の使い方 それでは実際に使いながら、どのようなサービスなのかを見ていきましょう！ 「Bitmelo」は面倒なユーザー登録などは一切不要で、以下のURLにアクセスするだけですぐにブラウザ上にゲーム開発環境が起動します。 ＜BitmeloURL＞ https://bitmelo.com 「Bitmelo」はゲーム開発に必要となる以下の要素をすべて自由に作れるのが大
由来で覚えるlinux用語集 - Qiita
随時更新予定。。。 ls = list | list segments(コメント欄参照) ln = link mv = move cd = change directory cp = copy rm = remove mkdir = make directory rmdir = remove directory chown = change owner chmod = change mode cat = catenate || concatenate tac = catの逆コマンド(ファイルを逆から出力) grep = "g/RE/p" || globally search a regular expression and print ping = 潜水艦などで使われるアクティブソナーの発する音波 sh = shell bash = Bourne again shell su = subs
手軽に始められる知識整理ツールいろいろ
情報過多時代に必要な知識の整理を始めようで紹介した Roam Research をはじめとした知識整理 / 管理ツールは、2019 年から今年にかけて登場したものばかり。それぞれ特徴があって面白いですが、未熟なものばかりです。幾つか検討した末 Roam Research を使うことに決めましたが、スタートアップに投資するような気持ちで課金しています。 新しいものに飛び込む前に、今できること、今あるもので知識の整理をしてみたい方もいると思います。Roam Research や Obsidian をはじめとした知識管理を目的としたツールと同じようにはいきませんが、工夫次第でそれぞれ独自の強みを活かした自分だけのデータベースが作れます。 Evernote 機能が豊富で、いきなりサービスがなくなる心配がないのを選ぶなら Evernote 一択。前世代感がありますが、あらゆる情報をひとつのデータベー
GitLabは、これまでGitLabが自社で開発し提供してきたWebIDEを、Visual Studio CodeベースのWebIDEへ移行していくと表明しました。 Here's what's coming next to GitLab Web IDE. https://t.co/1iHQrvR46a — GitLab (@gitlab) May 24, 2022 GitLabには以前から、Webブラウザの画面からコードを管理しつつ、そのままコードの編集などを可能にするWebIDE機能が統合されていました。このWebIDEはオープンソースのMonaco EditorをベースにGitLabが開発してきたものと説明されています。 今回の発表は、このWebIDEをVisual Studio CodeベースのWebIDEに置き換えるというものです（ちなみにVisual Studio CodeもMo
If you’re looking to restore (or introduce) a little order to your life, Craft will fall somewhere between “immediately helpful” and “enough to bring a tear to your eye.” This productivity app is so versatile that it’s hard to define: It’s for taking notes, writing to-do lists, organizing important documents, organizing unimportant documents, stashing away random scraps and, ultimately, transformi
Intro 長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、 RFC 9239 として公開された。 これにより、推奨される MIME タイプが text/javascript に統一されることになった。 かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。 JavaScript MIME Types HTTP で Response する際に指定する Content-Type は、その内容がなんであるかを Client に Indicate し、適切な処理を促すために使用される。 例えば HTML が text/html であったりするように、 JS も内容はテキストなので text/javascript が自然に思える。 しかし、例えば MS が実装していた JS 互換の JScript
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
テキストエディタを作る
ここの記事を更新するのは約1年ぶり。夏の間は遊んでいたり秋からは仕事が忙しくなったりの近況だった。 コロナウィルスで自宅に閉じ込められてしまったので、プログラミングの練習のためにテキストエディタを作ってみた。 得られた知見などを紹介しよう。 目標としている機能・実装 練習・教材用として十分な小ささ。 記事のネタになる。また、作っていて飽きない。ひと篭もりするプロジェクトとして適切なサイズ。 昔から、プログラマなら作ってみたいものとして、(1)コンパイラ (2)OS (3)エディタ、がよく挙げられる。コンパイラについては以前に書いた。今回はエディタにチャレンジしてみることにした。 テキストエディタを作る場合、GUIツールキットを使って作成することも考えられるが、今回はviのようにターミナル上で動作するタイプのものを作る。時間があれば、次の様な発展的な目標も検討したい。 設定変更機能を持つ（そ
API excellence made easy.All of the benefits of innovation without the headaches. Create a Successful API ProgramTake a proactive approach with your API programs to efficiently create consistent productivity and avoid the underbelly of delays and overages. Reduce Risk and Improve ROIConnected Software is mandatory for today’s consumers. Avoid disorganized development efforts that cause significant
先日、VPS上にVSCode Serverをインストールしようとしたところ動かなくなっており、詳細を調べているうちにこのスレッドにたどり着きました。 ここをみると、どうもVSCode Serverの機能はRemote Extensionに統合されたので、もはや提供されなくなったようです。（setup.shでダウンロード可能なバイナリが無くなっている） じゃあどうすればいいのか？ サーバ上でVSCodeを動かして、ブラウザでエディタを立ち上げたい、iPadで開発したいという皆さんは、引き続きVSCode本体で簡単に実現することができます。 サーバ上に普通のVSCodeをインストールして、code tunnelと打ち込むだけで、github.devのドメインでトンネルがホストされてブラウザ上でもローカルのVSCodeとも接続可能な状態になります。 daemon化して常時起動したい それも簡単で
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。 今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。 5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension") by Mohmed Ishak 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ファイルを常に新しいタブで開くようにする 2. コメントのカラーを変更する 3. コードを大きく表示する 4. カ
ムービー作るのにおすすめ！ Final Cut Proの代わりになる無料アプリ6つ2020.06.21 22:0035,197 David Nield - Gizmodo US ［原文］ （ 山田ちとら ） 内なるオスカー受賞監督を解き放て…！ 動画編集のハードルがかつてないほど低くなっています。ちょっと前までは高価だった動画編集ソフトも、いまや値段が下がる一方。 無料編集アプリもいろいろと出てきています。まともな素材が揃ってさえいれば、無料アプリを使いこなしてプロ顔負けの動画を作るのも夢ではないかも。 以下、米GizmodoのDavid Nield記者がオススメする無料動画編集アプリ6選です。 iMovie（macOS）Image: Gizmodo US数ある動画編集アプリの中で、AppleのiMovieが特に優秀だとは言いません。WindowsやAndroidでは使えませんし。でも、A
『Visual Studio Code完全入門』重版出来記念、全文無料公開キャンペーン - インプレスブックス
いま急速にユーザー数が増えているVisual Studio Code（VSCode）。人気の高さゆえ、ほかのテキストエディタからの乗り換えも進んでいますが、その反面、新世代エディタ特有の高機能さがハードルになっていることもあります。本書は、そのハードルをなくすことを目指した「やさしい、役立つ解説書」です。VSCodeを使ってみたい／使っているユーザーが、もっと便利に使いこなせるようになることを目指し、基本からカスタマイズ、効率アップにつながる操作方法、さらにVSCodeが標準サポートしているGitの使い方まで丁寧に解説しています。
Screen Recorder for macOS. Beautiful videos in minutes | Screen Studio
Beautiful Screen Recordings in MinutesCreating high quality videos as easy as taking a screenshot. Designed for macOS.
無料で文章やコードを校正できる「textlint」にブラウザ拡張機能「textlint editor」が登場したので使ってみた
論文やマニュアルを書く場合の表記揺れや誤字脱字、読みにくいため好ましくないとされる表現などを検知して、文章全体の質を上げるための校正ツール「textlint」が、2021年5月27日にバージョン12へのアップデートをリリースしました。合わせて、textlintを任意のウェブサイトで動かせるFirefoxとChromeのブラウザ拡張をベータリリースしたことも告知されています。 textlint v12.0.0 · textlint https://textlint.github.io/blog/2021/05/24/textlint-12.html textlint 12リリース、ブラウザで動くtextlint editorをベータリリース | Web Scratch https://efcl.info/2021/05/27/textlint-12-editor/ textlintとは、az
Mac OSで作業する場合、ターミナルエミュレータといったらデフォルトのターミナルかiTerm2を使うことが多いんじゃないかと思います。 自分は「みんな使ってるからなんか嫌」という理由でiTerm2は頑なに使わずデフォルトのターミナルを使い続けて来た（まあ不満はなかった）のですが、ついにこの度、長年求めていたものを発見しました。 それがRust言語製の新世代ターミナルエミュレータ、Warpです。 Warpは多くの便利機能に加え、モダンでかっこいいUIとコードエディタのような使い心地で、一度使ったらもう今までのターミナルには戻れなくなりました。 本当にテキストエディタのような操作感で、コマンドの入力と出力が1つのブロックになっており、非常に見やすく、コピペなども楽ちん。コマンドの補完等もめっちゃスマートです。 デフォルトで何も設定をいじらずともgitのブランチを表示してくれるのもいいですねー
Monaspace
Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen. Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user inter
Isoflow | Network Diagrams
🎉 Isoflow v2 has landed 🎉 Customers with accounts created before 7th November 2023 (2 months ago), please read this.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる
A powerful, flexible, Markdown-based authoring framework
GitHub+VSCodeでのMarkdownドキュメンテーションのプロジェクトルールを考える
Zed - Code at the speed of thought
Atom の作者達が作った Rust 製エディタ Zed (OSS) - Qiita
それ、Canvaで作れます。Web開発者が知っておくべき10のスゴ技！ - paiza times
Plask: A New Free Tool for Extracting 3D Motion From Videos
Shodo（ショドー）：自分の日本語を、信じない。AI校正・誤字脱字チェック、相互レビュークラウド
GitHubと併せて使うと便利なツール - it-engineer’s blog
僕の考えた最強のTUI grepツールを作った - ぴょこぴょこブログ
The Markdown CMS | Tina
人気テキストエディター「Notepad++」が検索エンジンBingをブロック、その理由が波紋呼ぶ【やじうまWatch】
DeepL Write: AI-powered writing companion
「Visual Studio Code」2020年8月更新、「Git」でのトラブルを防止する新オプションを追加／デバッグコンソールにフィルタリング機能も
編集履歴をたどれるようになった「Visual Studio Code」2022年3月更新（v1.66）／現在のファイルと比較したり、元に戻すことが可能
GitLabがVisual Studio CodeベースのWebIDEへ移行すると発表
Craft – The Future of Documents
JavaScript のメディアタイプと RFC 9239 | blog.jxck.io
Solutions for API Design and Management | Stoplight
VSCode Serverがなくなって本体に統合されていた - Qiita
コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
ムービー作るのにおすすめ！ Final Cut Proの代わりになる無料アプリ6つ
新世代ターミナルエミュレータWarpが最高なのです - Qiita