よくあるAWSサーバーレス構成のシーケンス図をMarkdown（Mermaid）で描いてみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…！ GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成（API Gateway + Lambda + DynamoDB + α）のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま
いまさら聞けないReact、Virtual DOM、JSX超入門
JSXとBabelの使い方 エレメントを生成するコードは「JSX」を使うと、よりシンプルに記述できます。JSXはECMAScript（JavaScript）にXMLライクのシンタックスを追加する言語拡張です。JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。 Webページ内でJSXを使用するには、「Babel」を導入する方法が最も簡単です。Babelは、ECMAScript（JavaScript）の次期バージョンを現行のブラウザ上で実行可能な形式に変換する機能を持つ、JavaScriptコンパイラです。BabelはJSXシンタックスを変換する機能を持っているため、Babelを導入することでJSXシンタックスを使用できます。 通常ではnpmでインストールしてbrowserifyやwebpackを使って変換を行いますが、「babel-standa
Yogurt - React製のドキュメント作成システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でコンテンツを作る際のUIについて悩むことはないでしょうか。一ページずつ作る仕組みにするのがシンプルですが、ユーザにとって使いやすい仕組みとは言いづらいです。 そこで参考にしたいのがYogurtです。Reactを使い、ユーザビリティの高いドキュメント作成が可能です。 Yogurtの使い方 編集画面です。カテゴリはフォルダアイコンで表示され、その中にドキュメント（エントリーと呼びます）を追加します。 カテゴリを選ぶとエントリーの追加ができます。 エントリーを選んで編集できます。 新しいカテゴリを追加します。 ドキュメントの編集はMarkdownが使えます。 こちらは閲覧モード。 MarkdownがHTMLに変換して表示されます。 Yogurtはカテゴリとドキュメントという形式
React Kanban - React製のTrello風カンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました カンバンといえばトヨタの生産システムですが、Webで提供されるカンバンはすでに独自の進化を遂げつつあります。アジャイル的な使い方に限らず、情報を整理する方法としてカンバンを用いるケースがあります。 そんなカンバンとして有名なのはTrelloですが、そのクローンをReactで作成したのがReact Kanbanです。 React Kanbanの使い方 サンプルです。画像を入れることもできます。 新しいリストの作成も。 新しいカードの追加。 そしてカードの移動はドラッグ&ドロップで。 編集モード。Markdownで記述できます。 カラーテーマの変更。 React Kanbanはリストの作成、カードの移動などが簡単にできるのでとても使い勝手が良いです。ノートはMarkdownで記述し、カ
Fusuma - Markdownを使ったHTMLスライド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLでスライドを作る場合、アニメーションやロゴの配置ではなく、コンテンツに集中して作れます。さらに記法がMarkdownであればスライドを作るのが苦手な人であっても問題ありません。さくさくと作れるでしょう。 今回は新しいHTMLスライドのFusumaを紹介します。便利な機能がたくさん詰まっています。 Fusumaの使い方 デモスライドです。 特に良いのがプレゼンテーションモードです。 目次を出す機能もあります。 ターミナル、コードの表示も綺麗です。 メニューです。目次でジャンプもできます。 この手のソフトウェアは幾つもありますが、プレゼンテーションAPIに対応しているものは意外と多くありません。Fusumaを使えばコンテンツはMarkdownでさくさくと、プレゼンテーションモー
Word to Markdown Converter - Doc/DocxからMarkdownに変換 MOONGIFT
社内にはたくさんのオフィスファイルがあると思いますが、開発者にとっては使いやすいフォーマットではありません。テキストベースでバージョン管理に登録したり、編集したいと思うのではないでしょうか。 そこで使ってみたいのがWord to Markdown Converterです。Wordファイル（docx/docとも）をMarkdownフォーマットに変換できるソフトウェアです。 Word to Markdown Converterの使い方 トップページです。ファイルを指定します。 変換されました。見出しがちゃんと認識されています。 変換後、HTMLで表示してくれます。 新しいdocx形式はXMLなので割と簡単ですが、doc形式まで変換できるのは便利そうです。既存資産でWordファイルとして置いておく必要がないものはWord to Markdown ConverterでMarkdownに変換しておく
Notable - 添付ファイルも使えるMarkdown記法のメモ
メモを取るソフトウェアは何を使っていますか。テキストエディタをそのまま使っている人もいるでしょうし、ブログエディタを利用する人もいるでしょう。個人的にはこれまでBoostnoteを使ってきました。 そこにきて強力なライバルの登場です。今回紹介するのはNotable、Markdownベースのメモソフトウェアです。 Notableの使い方 メイン画面です。3カラムの構成になっています。 編集モードです。 添付ファイルが追加できます。 スターを付けてお気に入りに登録したり、ピン止めすることもできます。 タグも自由に設定できます。 Notableの作者は類似のソフトウェア（Boostnoteを含む）を多数比べた上で、自分の気に入ったものがなかったために作成したようです。特にタグのネスト、柔軟な検索、添付ファイルなどが他と比べて特徴的になっています。 NotableはTypeScript製のオープン
repost - みんなで投稿する日報システム MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日報が日本独自のシステムなのか分かりませんが、日々の作業記録をつけるのは大事なことです。記録しておかないと後で振り返ることもできず、自分の成長を知ることさえできなくなります。蓄積は日々行わなければなりません。 そこで使ってみたいのがrepostです。repostは日報システムになります。 repostの使い方 repostのメイン画面です。 中央のペインをクリックすると日報の詳細が読めます。 新しい日報を書きます。Markdownが使えるようです。 プロフィールです。 repostでは恐らく相手を指定したりできるようなのですが（@があるので）、まだ実装されていないのかうまく動きませんでした。日報を通じて仕事で困っている点を共有したり、サポートするのはよくあることです。皆が同じ場所に
Ordinance format jp - Markdownで日本の公文書を記述
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは広く使われるようになっていますが、シンプルな記法だけに簡易的なHTMLへの変換以外のニーズ向けとなると使い勝手が悪いことがあります。そのためグラフを入れられるようにしたり、チャートを描けるようにするソフトウェアが作られます。 今回紹介するOrdinance format jpもその一つです。日本の公文書フォーマットに合わせたMarkdown記法です。 Ordinance format jpの使い方 サンプルです。左側が拡張されたMarkdownで、右側に展開されます。 ラベルが付けられたり、補足情報の記述、リストの番号の付け方が変わっています。 Ordinance format jpを使うことで普段から慣れているMarkdown記法のまま、公文書風に仕上げることが
Docbase - Markdownから生成する開発者向けドキュメント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのドキュメントはDX（Developer Experience。開発者体験）を語る上で欠かせない存在です。ドキュメントが間違っているのはもっての外ですが、さらに可読性が高かったり、機能面においても体験を向上できる要素があります。 そんな中、メンテナンスのしやすさもまた大事な要素になります。今回はMarkdownファイルをベースにしたドキュメントシステム、Docbaseを紹介します。 Docbaseの使い方 利用例です。トップページのデザインも格好良いです。 ドキュメント詳細です。右側に目次、中央にコンテンツが表示されます。 コードは文字が大きく見やすくなっています。 別なドキュメントの例です。ヘッダーやフォントなどをカスタマイズできます。右側のカラムは表示されていません。
openKB - node/MarkdownによるFAQシステム MOONGIFT
Webは疑問を解消するのに使えますが、そのためには疑問（とその回答）をまずどこかに載せておく必要があります。最近ではQ&Aが人気ですが、それでもよくある質問についてはFAQのが役立つ場合があります。 そこで使ってみたいのがopenKBです。自社のFAQシステムを構築するのに使えるでしょう。 openKBの使い方 トップページです。左側にカテゴリ、右側によく見られている記事が並びます。 記事詳細です。Markdown記法で書かれています。下には記事のメタ情報があります。 検索もあります。 openKBを使えばFAQシステムが簡単に構築できます。Markdownベースなので普段から使い慣れている記法で書けるのが便利です。まずデータを蓄積していけばWeb検索で引っかかるようになっていくことでしょう。 openKBはnode/JavaScript製のオープンソース・ソフトウェア（MIT Licen
スタートアップの現場で役立つ開発要件のまとめ方
こんにちは。ハウスマートの高松(@t2kmt)です。 皆さんは開発要件をまとめるのにどんなフォーマットを使っていますか？ 開発要件をいい感じにまとめるのって大変ですよね。 ドキュメント整備せずに開発に着手し始めてしまうと手戻り抜け漏れが出てしまいますが、一方で要件定義書をガチガチなフォーマットにするとドキュメントの作成自体の工数が増えてしまいます。 スタートアップはスピードが命。ドキュメントを書きまくって開発が進まないなんて言語道断です。 開発要件の整理はプロジェクトの成否に多大なインパクトを与えますが、ほとんどの現場では企画を考える人にフォーマットが委ねられていることが多いと思います。 今回は皆さんが快適に開発要件をまとめられるように、ハウスマートで利用している mini spec というフォーマットをご紹介します。 mini spec とは mini spec とは開発の要件をまとめる
Markdownエディタを作って月15万円稼ぐためにやったこと — Inkdrop
自分でもびっくりしてるいぬさん僕はフリーランスをしながら脱受託を目指してアプリを作って生活しています。だいたい1年のうち7割ぐらいをアプリ作りの時間に充てています。本稿では、Inkdropというマルチプラットフォーム対応のMarkdownエディタを一人で開発して月15万円の売上を達成するまでにやった事を包み隠さずにシェアしたいと思います。 Inkdropの月間売上の推移やったこと概要毎日感じるちょっとした問題を見つける自分自身がこれだ！と思えるまでプロトタイプを作るプライベートβ期間でヘビーユーザを作る継続性を重視して価格をつける決済処理はStripeで楽に実装する良いランディングページを作るユーザサポートを最優先にする自分の得た知見を惜しまずブログに書くクオリティで勝負する批判を全て無視する毎日感じるちょっとした問題を見つける僕は別に特別でもなんでもありません。人は意外と同じ事を感じたり
Raneto - node製/Markdownのナレッジベース MOONGIFT
企業のWebサイトなどでよく見られるのがナレッジベースです。FAQ的なものですが、検索がついていたりカテゴライズもされていて、より洗練されたものとなっています。 今回はそんなナレッジベースを作成するためのソフトウェア、Ranetoを紹介します。 Ranetoの使い方 インデックスです。カテゴリ毎にタイトルが並んでいます。 詳細です。左側にインデックスが並びます。 管理者としてログインしました。見た目は特に変わりません。 編集画面です。フォーマットはMarkdownとなっています。 メタデータの編集もできます。 日本語も利用できます。 新しいページの作成も可能です。 Ranetoを使うとユーザ向けによくある質問集をまとめて管理できます。これは社外はもちろん、社内でも使ってみても良さそうです。まずセルフサポートできる形にすれば、より解決が早くなるでしょう。 Ranetoはnode/JavaSc
Getting started with Jekyll, a free and open source static site generator
Jekyll was featured on Opensource.com in February 2016 ("6 reasons to blog in Markdown with Jekyll"). I recently used it to create a website for QEMU, one of the open source projects that I work on at Red Hat. In this article, I will provide tips for first-time Jekyll users, guide readers through the creation of a new Jekyll website, and look at Jekyll's theming and customization features. The sim
DevDecks - Electron製のスライド作成ソフトウェア
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションのためのスライドを作成するソフトウェアと言えばPowerPointやKeynoteが多いでしょう。最近ではMarkdownベースで作成することも増えていますが、もっと便利なソフトウェアを欲しがる声もあります。 そこで使ってみたいのがDevDecksです。その名の通り、開発者（Dev）向けのスライド作成ソフトウェアです。 DevDecksの使い方 メイン画面です。 テキストを追加してスライドを作ります。 スライドの背景を変更できます。 写真の貼り付けもできます。 コードを貼り付けることもできます。 Electronなので開発者ツールを使ったデバッグ、自動処理もできます。 DevDecksはプラグインもサポートしているので、自分で拡張することもできます。コンバーターを
pythonでmarkdownを扱う - Qiita
import markdown md = markdown.Markdown() sample_makedown = ''' An h1 header ============ Paragraphs are separated by a blank line. 2nd paragraph. *Italic*, **bold**, `monospace`. Itemized lists look like: * this one * that one * the other one ''' # makedown -> html print md.convert(sample_makedown) <h1>An h1 header</h1> <p>Paragraphs are separated by a blank line.</p> <p>2nd paragraph. <em>Italic<
【Python】GitHub式MarkdownをHTMLに変換し、更にJavaScriptとかの危険なタグを除去しよう - あのねノート。
2014-09-12 【Python】GitHub式MarkdownをHTMLに変換し、更にJavaScriptとかの危険なタグを除去しよう python やり方 Markdownは最高 僕はMarkdownは最も最高なマークアップ言語の一つだと思います。なぜならGitHubが全般的に採用しているからです。この文章も全てMarkdownで記述されています。こうやってブログを書いていられるのもMarkdownが使えるからだと思っています。 普通にマークダウン python-markdownを使います。pip install markdownしてfrom markdown import markdownしてhtml = markdown(raw)でポコンとHTMLが生まれます。 GFMを扱う そして世の中にはGitHub式Markdownというものがあります。GitHub Flavored M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - completejavascript/markdown-editor: ✏️ A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs, and Create-react-app
django-markdownify · PyPI