もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
Obsidianは最高のマークダウン『メモ』アプリである
僕は今までマークダウンエディタを資料作成ツールとして使ってきました。見出しやリスト、表を簡単に記述でき、それをCSSで整形して表示できるマークダウン記法は、ブログの下書きや業務で使うPDFなど、「他人に見せるための資料を作る」という役目にピッタリです。 逆に言えば、個人的なメモには向いていないと思っていました。 その固定概念をぶち壊したのがObsidian(オブシディアン)です。今回はマークダウン『メモ』アプリとして無くてはならない存在となったObsidianの特徴と、一般的なマークダウンエディタとの使い分けについてお話ししたいと思います。
README がキチッと書かれているプロジェクトって、どんなに小さくても立派に見えますよネ。 GitHub の場合、大抵はマークダウン記法で書かれた README.md とか README.markdown とかいう名前のファイルが、HTML に変換 （マークアップ） されて表示されていることはご存知でしょう。 マークダウン記法自体はとても簡単なのですが、GitHub では GitHub Flavored Markdown （略して GFM） という GitHub 用にアレンジされたマークダウン・エンジンが採用されていて、一般のマークダウン・エディタでチェックしてからコミットしても、意図通りの見た目にならないことが多々あります。私 （もちろん GitHub 初心者です！） の場合、README ファイルだけで10回以上もコミットしてしまいました。「マークアップ （レンダリング） を気にして
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
最初に見つけたのがこのユーザー会さんのページです。こちらにマークダウンとは「文章の書き方」とあります。なるほど簡単。軽量マークアップ言語よりは、かなり柔らかくなりました。ただ、むしろ簡単になりすぎて今度は具体的なイメージが沸かないか？ 次に見つけたのは、こちらのブログです。 ここでは、「手軽にドキュメントを装飾できるフォーマット」とあります。うんうん、なんとなくイメージしている説明に近づいてきました。 そして最後に見つけたのが https://wa3.i-3-i.info/word16753.html 単なる「ファイルの書き方ルールの１つ」ですよと。これですかね。 人間社会に「日本語」「英語」「ドイツ語」などの様々な言語があるように、デジタル世界でも、HTMLとかXMLとかPDFとか、いろいろな言語(ファイルの書き方ルール)がある、そのうちの１つがマークダウンという言語。それ以上でも以下で
最近の開発者が最も好むドキュメント形式を挙げるとしたら断然マークダウンになるでしょう。マークダウンは、GitHub、GitLab、Bitbucketなど、タスクやイシュー管理に対応するほとんどのサービスにおいて、基本のドキュメント形式として使用されています。また、IntelliJ、VSCode、Vim、Emacsなど、ほぼすべてのテキスト編集ツールでも、プラグインを通じてマークダウン文書の強調構文やプレビュー機能を使用することができます。 TOAST UI Editorはここからさらに一歩進んで、マークダウンエディターとウィジウィグエディターを統合した形式のインターフェースを提供しています。ウィジウィグエディターを使用すると、テーブルなどの複雑な文法をより直感的に簡単に編集することができ、マークダウンに慣れていないユーザーでもマークダウン基盤の文書を簡単に編集できます。特に、開発者と非開発
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
Posted 1月 21st, 2012 by codechord. 9 Comments Tweet Tweet つい先日から、ようやくgithubを使い始めました。 gitのことはあまり勉強してないので右も左もわからず、とりあえず、公開されてるレポジトリのクローンを作りまくってニヤニヤ閲覧しています。 で、そろそろ自分もリポジトリを作りたいなと思って、作り方を調べてたんですが、 「README.md」ファイルというものの存在を知りました。 拡張子「.md」？何の事かさっぱりわからず、ドットモジュールって勝手に思ってたんですけど、全然違いました。「マークダウン」の略でした/// マークダウンとは マークダウンファイルとは何ぞや。調べました。 普通のテキストファイルを、ちょっとした法則にならって書くだけで、HTMLマークアップせずに、自動的にHTMLコードとして変換して出力してくれるという
「マークダウン記法」というのをご存知でしょうか。 例えばHTMLで文字を強調しようと思うと、文字をstrongで囲うと思います。ですが、いちいちコードを書くのは面倒ですよね。パソコンならスニペットを使えばいいでしょうが、iPhoneなどのモバイル端末では面倒極まりない作業です。 そこで「マークダウン記法」。これは、ある法則に従って記号を使えば、後からHTMLに変換される。文字装飾が行える。そんな簡易文字装飾フォーマットなのです。 ちなみにWikipediaによると… Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、John GruberとAaron Swartzによって考案された。[1] Markdownの記法の多くは、電子
さんざん悩んだマークダウンエディタの最終決定は「Atom」快適に使えるようにする設定と必須のパッケージ 厳選18個 | kotalog
原稿やHTMLの草案を書く際に、とても重宝するのがマークダウンエディタです。特定の記号を付与することにより、文章に構造的な意味を付与し、視認性・再利用性を最大限確保した状態で文章を書くことができます。 マークアップはもとより、ビジネス文章やレポート文章を記述する感覚に近いので、社内の共有文章としてもオススメです。 世の中にはマークダウンで書けるテキストエディタがいっぱい ライティングとプレビューマークダウンのための78のツール 海外の記事ですが、78ものマークダウンエディタに対応したツールを紹介しています。 78 Tools for Writing and Previewing Markdown Mac専用、マークダウン対応エディタ35個 Mac専用のマークダウンエディタ集です。 35+ Markdown Apps for the Mac « Mac.AppStorm これらの中およびその
MISSION 整理整頓された 情報の森を作る Treeは文章の整理整頓を行いやすくすることを一番重要なミッションとして運営しています。 Treeの使用例 USECASE マインドマップ ストーリーや 企画構成のABプラン 思考の深掘り ビジネス戦略 プランニング 情報を 分解、分析、整理 その他、カスタマージャニーマップ作成など。
Vue.js + Electron でマークダウンエディタをサクッとつくってみた - dev.kokushin
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。 Vue.js + marked.js でマークダウンエディタ本体を作る 公式サイトのサンプルをそのまま引用します。 アプリ名は「MarkDown Visual Editor」にします。 jp.vuejs.org せっかくなので webpack を使ってみる せっかく覚えたので積極的に使っていくスタイル。 以下、現時点でのディレクトリ構造です。 mdve/ ├ app/ │ ├ app.js │ └ index.html ├ package.json └ webpack.config.js app.jsに「Vue.js」の処理を書きます。 Vue.js インストール $ npm install vue --save marked.js イン
github.comをgitprint.comにするだけでマークダウン文書をPDFに変換『GitPrint』 | 100SHIKI
なにこれ便利。 GitPrintでは、github.comのURLにちょいと細工するだけでマークダウン文書（.md）をPDFにしてくれる。 使い方は簡単で、github.comをgitprint.comにするだけだ。 ちゃんとコード部分にはアイコンがついたり、見出しには下線がついたら、読みやすいし、印刷フレンドリーでもある。 もちろんPDFにはリンクも組み込まれている。 かなり便利だと思うのだがいかがだろう？
無料でEdgeがなくてもチャットAI「Bing Chat」をWindows・macOS・Linuxで単体起動でき会話履歴の画像・PDF・マークダウン形式保存やショートカットキーも駆使でき便利なアプリ「BingGPT」を使ってみた
Microsoftは2023年2月に検索エンジンのBingにチャットAIの「Bing Chat」を統合し、2023年5月に一般公開しました。Bing ChatにアクセスするにはMicrosoft Edgeを起動するか、あるいはウェブブラウザでBingにアクセスする必要がありますが、ブラウザを起動しなくても単体でBing Chatにアクセスできるツール「BingGPT」が公開されたので、実際に使ってみました。 GitHub - dice2o/BingGPT: Desktop application of new Bing's AI-powered chat (Windows, macOS and Linux) https://github.com/dice2o/BingGPT 上記のGitHubページにアクセスし、右にある「Relaese」にある最新版をクリック。記事作成時点で最新版はバージ
書き方の簡単な説明 ◇一行目に、列の最上段に記載する項目を記入します。 ◇列を分けるときは「 | 」（縦線／バーティカルバー）を使います。 ◇二行目に、その列のテキストの寄せを決定します（後述）。 ◇三行目から、各項目を書いていきます。 右寄せ・左寄せ・中庸寄せ 対象の列のテキストを右・左・中央に寄せるためには、マークダウンで表組みを作った時の二行目で調整します。 ◇「|:-----|」 列が左寄せになります。 ◇「|-----:|」 列が右寄せになります。 ◇「|:-----:|」 列が中央寄せになります。 簡単な話、寄せたい方向に「 : 」（コロン）を入れれば、それで完了です。真ん中の「 - 」（ハイフン）の数は適当でOK。１つでも構いません。 マークダウンからHTMLへの書き出し マークダウンで書いたテキストをブログ記事に上げても、そのままではもちろん表組みにはなりません。改めてHT
All slide content and descriptions are owned by their creators.
プロダクトのヘルプサイトをマークダウンに移行した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！開発部テクニカルコミュニケーショングループの仲田です。 皆さんマークダウン使ってますか？（唐突） 文書記法の一つで、プログラマーにとっては馴染みがあるものだと思います。サイボウズのプロダクト仕様書もマークダウンで書かれることが多くなっています。 ですが、公式ドキュメントを作る用途として採用される例はまだ少ないように思います。数ヶ月前になりますが、プロダクトのヘルプサイトをマークダウンに移行しましたので、今回はその話をします。 なぜ移行したのか マークダウンに移行した動機は、一言で言うとヘルプサイトの制作や更新を効率化するためです。 サイボウズでは、プロダクトのアジャイル開発化を進めています。アジャイル開発では、ウォーターフォール開発と比べてリリース間隔が短縮されます。パッケージ製品がメインだった頃には、リリースは年単位で、短くても数ヶ月ごとというスパンでした。ところが、クラウド
VSCode拡張機能 Draw.io Integration導入方法 先人の方がまとめて下さってます。⇒ VSCodeでDraw.ioが使えるようになったらしい！ Draw.ioでsvg形式のファイルを作成する 拡張子を.drawio.svgまたは.dio.svgにしてファイル作成すると、Draw.ioに関連付けられ、svg形式のファイルを作画＆作成できます。 mdファイルにsvgを埋め込む mdファイルに以下のように作成した画像（.drawio.svg)を埋め込むことができます。 マークダウン構文またはimgタグで記述します。 mdファイルの編集画面からDraw.io画面を開ければ... マークダウン構文で記載した場合、画像ファイルを cmd + クリック で開くことはできますが... 残念ながら、テキストエディタが開いてsvgのソースが表示されます。 Draw.i
Windows・Mac(OS X)・LinuxといったあらゆるOSで使用でき、マークダウン記法でプレゼン資料を作成できるソフトウェアが「Marp」です。無料で使えて日本語での記入やスライドのPDF化なども可能なので、実際に使ってみました。 Marp - Markdown Presentation Writer https://yhatt.github.io/marp/ Marpをダウンロードするには、トップページの「Download v0.0.8」をクリックして使用するOSを選択。今回は「Windows 64bit」をクリック。 「OK」をクリックするとダウンロードがスタート。 ダウンロードした「0.0.8-Marp-win32-x64.zip」をExplzhなどのツールで解凍。 解凍したファイルの中にある「Marp.exe」をクリックして起動します。 起動したこれが「Marp」。赤枠部分
たたき台の資料や簡単なまとめ資料を作る時、どのようなアプリケーショを使っていますか？ こうした場合、時間をかけて丁寧に作るのは得策ではないですし、ミーティングなどの結果を踏まえて資料を再作成することもあるはずです。 シンプルなエディターを使って手短に書き、あとでまとめるのもいいでしょう。ただ、自分以外の誰かに見せるのであれば、ポイントとなる部分を強調したいでしょうし、見出しには少し大きなフォントを使いたいと考えるはずです。 こんな時、私はMarkdown記法が使えるエディターを使っています。 「Markdown」（マークダウン）という言葉を初めて聞く人もいるかもしれません。覚えやすく簡単で、手早く使えるので、その記法と使っているアプリを紹介します。Markdownとは、文章を記述するためのマークアップ言語で、HTML文章への変換を前提として作られています。マークアップ言語と言われると、小難
Markdown(マークダウン)形式でスライドが作成できる無料のスライド作成・公開サービスが「slideship」です。ユーザーはフォントのスタイル・サイズ・余白などを気にせず、スライドの内容に集中して作成することができるとのことなので、さっそく使ってみました。 slideship.com https://slideship.com/ slideshipのトップページにはサービス紹介スライドが埋め込まれており、赤枠部分をクリックしてスライドをチェックすることができます。 slideshipはプログラミングコードをきれいに見せることも可能。 もちろん複数のスタイルが用意されており、好みのスタイルを選択できます。 プログラミングコードだけでなく、数式もきれいに表示可能。 さらに、スライドの背景はプレーンなもの以外にグラデーションのかかったものまであります。 ブラウザ上から使用するアプリケーショ
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Markdown(マークダウン) とは、文章を記述するための軽量マークアップ言語です。プレーンテキストに対して「# 見出し」「* 箇条書き」などの文書構造を明示し、MarkdownエディタでかんたんにHTML生成することができます。 今回は、無料で使えるオススメのMarkdownエディタを厳選！ Windows/Mac/スマホアプリ対応している定番＆人気エディタを、おすすめポイントと合わせてご紹介します。ブラウザ専用のオンラインMarkdownエディタについては、以下の記事を参照ください。 参考： 【ブラウザ専用】オンラインMarkdownエディタ おすすめ4選 【便利ツール】MarkdownテーブルをExcelライクな操作で簡単に作成できるツール Markdownとは そもそもMarkdownとは、どのよう
マークダウンファイルから日本語音声付き動画を作成できる「Video Puppet」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、単純なマークダウンファイルから動画を生成してダウンロードできるWebサービスをご紹介します！ ブログ記事を書くようにテキストデータを動画に変換できるうえ、自然な日本語音声も自動生成してくれます。また、画像や音楽などのメディアも挿入できるので、チュートリアル動画やPR動画などさまざまな作品を作ることができます。 現在はベータ版で全機能を無料で使えるため、動画作成にご興味がある方はぜひ参考にしてみてください。 【 Video Puppet 】 ■「Video Puppet」の使い方 それでは、最初に「Video Puppet」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら、画面上部にある【SIGN UP】ボタンから無料のユーザー登録をしておきます。 （※登録しなくても制限付きで利用することは可能です） ユーザー名
LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述！ - 移転→hapilaki.net
ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字（「-」「 」「1」「.」）の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。 見本 まずは見本を見せてよ。 OK。 こんな感じ。 これが4文字の組み合わせでできるの？ この会話例は2文字の組み合わせなんだぜ。 半角ハイフン（-）と半角スペース（ ）だけ。 まぁ、ステキ💕 解説：見本の記述例を図解 上の会話例を入力するときは次のように記述した。（下の記述例はキャプチャー画像） 分かりやすいように、拡大して補足説明を入れるよ。 各行ごとの説明。 改行だけ 半角ハイフン（-）3つで改行 改行だけ 半角ハイフンの後に半角スペース（ ）で改行 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容 4行目と同じ 5行目と同じ 5行目と同じ 特徴：
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術 | ゆっくりと…
行政文書をマークダウン化しよう！ところでマークダウンって何？｜METI-DX 経済産業省DXオフィス
新しいマークダウンパーサーが必要な理由 | NHN Cloud Meetup
VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
README.mdファイル。マークダウン記法まとめ | codechord
マークダウン記法をマスターするためのサイト・チートシート・ツール。 - あなたのスイッチを押すブログ
Tree - ツリー状に書く、マークダウンドキュメント。
HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
「マークダウンで作る岩波新書」高瀬拓史氏(イースト)/20190731t - Speaker Deck
VSCode上のマークダウン とDraw.ioでドキュメントを作成する - Qiita
無料でプレゼンのスライドをマークダウン記法で作成できる「Marp」
読みやすいマークダウン記法を始めてみませんか？ | ライフハッカー・ジャパン
無料でマークダウン形式で簡単にプレゼン用スライドが作成できる「slideship」
【2024年版】Markdown(マークダウン)エディタ厳選まとめ＜Win/Mac/iOS/Android＞