VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
Cursor Proを３日間で300回も使い倒してみた所感
はじめに AI搭載コードエディターCursorが話題なので自分にとって使いやすいのか実験してみました。 まだまだCursorの実験途中ではありますが、CursorProをサブスクしてたった３日でgpt-4に332回聞いてました。 Cursorはプロンプトの会話から現在のコードにDiffで提案してくれたり、エラーを解決してくれたり本当に便利で最高なのですが、頼り過ぎも良くないなと反省することもあったので、やったこと全部と感想をシェアしていきたいと思います。 やったこととしては、Cursorのチャットに質問しながら予備知識のないChatVRMというオープンソースのチャットアプリケーションの追加実装をしました。わりと簡単に実装できたこととうまくできなかったことがあるので例を挙げて紹介していきます。 Cursorとは Cursor(カーソル)とは、VScodeをフォークして作られたOpenAIのg
新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K でAI Edit機能 コードを選択した状態でcmd +
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
共同編集可能で全ブラウザで動くWYSIWYGのリッチテキストエディタを作成できて商用OKなオープンソースの「ProseMirror」を使ってみた
ウェブ上でリッチテキストエディタを構築するためのオープンソースのツールキットが「ProseMirror」です。商用利用可能なライセンスになっており、もともと2015年にクラウドファンディングで約790万円を超える金額を集めて開発が始まったもの。ニューヨークタイムズ・Atlassian・asana・Box・Evernoteなども継続的な開発をサポートしています。共同編集が可能な構造で、プラグイン形式によって独自の拡張を盛り込むこともできる高機能なツールキットになっており、マークダウン形式とWYSIWYMの切替、ツールチップの実装、画像のアップロード、独自メニューの構築、linterによるスキャンでエラー検出してユーザーが修正できるようにする、コンテンツ内に脚注を追加、変更履歴を保持して各ユーザーがここの変更を調べて元に戻せるようにする、などなどウェブアプリ開発で求められる機能が柔軟に追加でき
Dev Containerを使ってステップバイステップで作るPythonアプリケーション開発環境 - 電通総研 テックブログ
みなさんこんにちは、電通国際情報サービス（ISID）Xイノベーション本部ソフトウェアデザインセンターの佐藤太一です。 この記事では、VS CodeのDev Containerを使ってOSに依存しないPythonの開発環境を構築する方法をステップバイステップで丁寧に説明します。 VS Codeの利用経験があり、またPythonによるアプリケーション開発に興味のある方を想定読者として記述しています。Pythonの初心者から中級者向けを意識して書いていますので、意図して冗長な説明をしています。 すでにPythonによるアプリケーション開発に十分に詳しい方は、まずはまとめだけ読んでみてください。私自身それほどPythonのエコシステムに詳しいわけではありませんので、知識の抜け漏れは恐らくあるでしょう。そういった事に気が付いたら、XなどのSNSでこの記事のURLを付けてコメントをしていただけると幸い
Obsidian がすごくいい
Obsidian（オブシディアン） と出会ってまだ3日目ではありますが、ここ最近で一番興味をそそられるアプリだったので紹介します。 A second brain, for you, forever. https://obsidian.md/ 出会いの経緯 を眺めていたときに一つの記事が目に付きました。 私がソフトウェア開発者として Notion から Obsidian に移った理由トップ3 何やら少し挑戦的なタイトルです。私も情報を整理するときに Notion はよく使用しています。不満がないとは言わないものの、Notion の機能を超える情報整理ツールは中々ないことくらいはわかります。 気になった記事は、まず読んでみることです。 読みながらの感想 "Obsidian" ……なんて読むの？ｶﾀｶﾀ……オブシディアン。いやー、スペルも読み方も覚えられないなぁ……。どんな意味なの？ｶﾀｶﾀ……
テキストエディタで使われがちなデータ構造 Piece Table の概要と実装 - A Memorandum
テキストエディタのデータ構造 Gap method Piece Table method Piece Table の構造 Piece Table の実装 Piece Table のメソッド まとめ テキストエディタのデータ構造 テキストエディタで採用されているデータ構造にはいろいろあります。 こちらの論文 Data Structures for Text Sequences では各種データ構造について比較検討されています。 多くは、Gap method や Piece table method をベースにしたものが多いのではないでしょうか(図で言う最下部の中心の丸印に当たります)。最近では Rope なども有名ですね。 Gap method Gap method では、現在のカーソル位置で、テキストバッファを2つに分割し Gap を間に挟み、カーソル位置に対する編集(テキスト追加/削除)を
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
お題: みんなのノートツール | pyspa
ノウハウ管理というか、自分個人用のメモとか。みんな何使ってるの？ notionテキスト、なんか異常に使いづらい。段落に分かれすぎてるっつーか。 / に毎回いちいち反応するしコピペにも弱い。すぐ崩れる。Notionやめてorgに出戻りしてるObsidianorg-roam所詮ローカルファイルなんで同期はなんか自分で用意しないといけない。気づいたらgithubにpushみたいなことになってる。mysyncとかも考えたけど、検索の仕組みまで作るのだるくなってやめた元となったroam researchが気になるbear.appGoogle Driveのフォルダでmarkdownで作業メモとか書いてるGoogle Docsjoplinhackmdhackmdは一覧性あんま良くなかったのでlocalに退避させましたこういう記事もあるので使わないでおこscrapbox共有する必要がない案件で使っているm
novelWriter
A markdown-like editor for novels A markdown-like text editor designed for writing novels and larger projects of many smaller plain text documents. It is designed to be a simple text editor that allows for easy organisation of text files and notes, with a meta data syntax for comments, synopsis, and cross-referencing between files, and built on plain text files for robustness.
VSCodeの拡張開発に入門してみました
こんにちは。GMOアドマーケティングのK.Mです。 最近めっきりVSCode上で過ごすことが多くなりました。 というわけで、今回はVSCodeの拡張の作り方について調べてみました。 もともと便利な拡張がたくさんあるVSCodeですが、自分の作業に特化したかゆいところに手が届くものを自作できるようになることのメリットも大きそうです。 手始めに、エディタの拡張と考えると良い題材かと思われる選択範囲の文字列を見やすく整形して置き換える機能を作成してみたいと思います。 Beautify系の拡張はたくさんありますが、プロジェクト特化なログ文字列とかをサクッと整形したいようなケースで役に立つことを想定します。 プロジェクト準備 ジェネレーターが用意されているため、それを使ってプロジェクトの雛形を生成します。
新しいマークダウンパーサーが必要な理由 | NHN Cloud Meetup
最近の開発者が最も好むドキュメント形式を挙げるとしたら断然マークダウンになるでしょう。マークダウンは、GitHub、GitLab、Bitbucketなど、タスクやイシュー管理に対応するほとんどのサービスにおいて、基本のドキュメント形式として使用されています。また、IntelliJ、VSCode、Vim、Emacsなど、ほぼすべてのテキスト編集ツールでも、プラグインを通じてマークダウン文書の強調構文やプレビュー機能を使用することができます。 TOAST UI Editorはここからさらに一歩進んで、マークダウンエディターとウィジウィグエディターを統合した形式のインターフェースを提供しています。ウィジウィグエディターを使用すると、テーブルなどの複雑な文法をより直感的に簡単に編集することができ、マークダウンに慣れていないユーザーでもマークダウン基盤の文書を簡単に編集できます。特に、開発者と非開発
vscode-drawio/README.md at master · hediet/vscode-drawio
Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor. To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it. .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed. .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better! T
テキストエディタを作る
ここの記事を更新するのは約1年ぶり。夏の間は遊んでいたり秋からは仕事が忙しくなったりの近況だった。 コロナウィルスで自宅に閉じ込められてしまったので、プログラミングの練習のためにテキストエディタを作ってみた。 得られた知見などを紹介しよう。 目標としている機能・実装 練習・教材用として十分な小ささ。 記事のネタになる。また、作っていて飽きない。ひと篭もりするプロジェクトとして適切なサイズ。 昔から、プログラマなら作ってみたいものとして、(1)コンパイラ (2)OS (3)エディタ、がよく挙げられる。コンパイラについては以前に書いた。今回はエディタにチャレンジしてみることにした。 テキストエディタを作る場合、GUIツールキットを使って作成することも考えられるが、今回はviのようにターミナル上で動作するタイプのものを作る。時間があれば、次の様な発展的な目標も検討したい。 設定変更機能を持つ（そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Obsidian.Zenn
「VSCode」を縦書きビューや文字数カウントを備えた原稿エディターにする拡張機能「novel-writer」／青空文庫注記法の注記やルビにも対応。品詞の色分け表示やPDF出力もできる【レビュー】
Macaron | Visual component editor for Web development
Obsidianというアプリをより良く知るための外部リンク集
