Front makes you look at things from a different perspectives.
お絵かき大好き、かめです。 あまり上手くはないのですが、最近は画用紙などに落書きして娘のおもちゃを作るのにハマっています。 はじめに 先日、 手順書を書くときに気をつけていること | DevelopersIO でも書きましたが、私は手順書を作成する際になるべくフロー図を書くようにしています。 前職では、フローといえば Visio を使っていたのですが、弊社では Visio を採用していないので、似た操作感のツールを探し、 Draw.io にたどり着きました。 今回はこちらをご紹介します。 Draw.io とは 弊社ブログ エンジニアのための無料で使えるドローイングツールまとめ | DevelopersIO などでも簡単に紹介されていますが、 Draw.io にアクセスするだけで利用できる無料のお絵かきツールです。 魅力1:豊富なテンプレート フローチャートだけでなく、ネットワーク図や ER
draw.ioとはdraw.ioはUMLやブロック図などの説明図を作成することができる無料のwebサービスです。 登録やインストールも必要ないので手軽に利用することができます。 以下の説明図もdraw.ioで作ることができます。(公式サイトより) まずdraw.ioのページにアクセスします。以下のリンクからアクセスできます。 https://www.draw.io/ アクセスすると以下のようなポップアップが現れるので「Create New Diagram」を選択します。 次に以下のようなポップアップが現れるので、テンプレートを選択して「Create」をクリックするとテンプレートを使用することができます。 ここでは何も選択せず「Brank Diagram」を使用します。 何も選択せずに「Create」をクリックすると以下のように白紙の作成画面が現れます。 Aメニューバー:ファイルの保存やヘル
どうも。つじけ(tsujikenzo)です。このシリーズでは「draw.io(ドローアイオー)でデータベース設計のER図をかこう」ということで、全4回でお届けします。今日は1回目で「インストール編」をお送りします。 このシリーズでまなぶことこのシリーズは全編を通して「draw.ioの使い方を学ぼう」という内容になっています。データベースは、「ERモデル」と「IE表記法」という2つの手法を用いることで、初心者でもかんたんに設計図を作成することができます。 しかしながら、半自動的にデータベースの設計図を作成してくれるツールはありません(ERwinやERstudioというソフトがあったようですが、今は情報が更新されていない気がします)。draw.ioはあくまで、アイディアをER図に落とし込む描画ツールです。 また、SQLからテーブルを作成するような手順も、想定しておりません。「ER図とはなにか」
システム構成図を書く時、ツール選びに悩むことってありませんか? システム構成図に限らずとも、情報を分かりやすく表現する手段として、いわゆる「お絵かきツール」はとても需要があるのではないでしょうか。例えば Nulab の Cacoo だったり、MS Visio・Excel・PowerPoint だったりと、人によって・現場によって多種多様だと思いますが、今回はその中でも個人的によく使っている draw.io について紹介し、その使い方について共有したいと思います。 draw.io とは?システム構成図や図面等の作成に便利なお絵かきツールで、ブラウザ上で動くウェブアプリケーションです。オープンソース化(Apache License 2.0)されており、提供元 JGraph の GitHub リポジトリにてソースコードが公開されています。 公式サイトがあるので、合わせてチェックしてみてください。
無料で使えるチャート作成アプリdraw.ioには、Webアプリケーション版とは別に、デスクトップアプリケーション版とGoogle Chrome拡張機能版があります。 なぜブラウザ上で使えるWeb版とは別に、デスクトップ版や拡張機能版も提供するのでしょうか? ここではこれらの違いとユーザーにとってのメリットを紹介します。 Web版とデスクトップ版の違いはウィンドウ Webアプリ版があるのに、なぜわざわざデスクトップ版や拡張機能版を紹介するかというと、単純に使い勝手の問題のようです。 Webアプリ版はブラウザ上で動作するので作業エリアの大きさは、ブラウザのウィンドウサイズによって決まります。 draw.ioの作業画面はできるだけ広くとりたい、でもブラウザをフルスクリーンで使うのはイヤ、ということです。 その点、デスクトップアプリならブラウザとは関係ない独立したウィンドウで動くから使いやすくなり
ごきげんよう 今回はスマスピ関係ない話。 UMLでシーケンス図なりクラス図なりアクティビティ図なりを描く機会は、ITエンジニアのあるあるだと勝手に思っている。 え?そもそもドキュメントをまったく書かない?ドキュメントはmustで必要ではないけど、常に書かない文化だとしたらどうやって共有知にしてるんだろう。教えてほしいです。 で、最近そんな機会がやってきたわけでして、ツールが自由に選べる立場だったのでdraw.ioってのがすごい良かったという話。 公式サイト about.draw.io 何がいいの? 無料である テンプレートが豊富である 矢印とかがサクサクきれいに連結できる ブラウザで使えるけどセキュリティが気になる・・がオフラインモードでも使える!! はまったところ インストーラーが8.8.0.exeだけどインストールすると9.1.Xになっている ダウンロードするページによってインストーラ
みんな大好き draw.io (diagrams.net) の細かいテクニックです。 ちなみに、2020年2月あたりから、セキュリティ上の理由でサイトのドメインを diagrams.net に名称変更し始めているので、アクセス先はこちらに変更したりしましょう。 非圧縮XML形式のデフォルト化 ダイアグラムをファイル保存すると、デフォルトでは圧縮されたXMLになっていますが、これだと差分の確認・バージョン管理がしづらいです。 メニューの「拡張 (Extras)」->「圧縮 (Compressed)」のチェックを外すと非圧縮形式になるので、新しいファイルを作るたびにこれを実行しても良いのですが、忘れないように非圧縮XML形式をデフォルトにすると良いでしょう。 メニューの 拡張 (Extras) -> Configuration で開く設定ダイアログに以下を記載すると、アプリの再読み込み以降は非
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ!オススメだよ!!」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
こんにちは丸山@h13i32maruです。つい先日、devchat.fmというポッドキャストに出演して、「ドキュメント」というお題について話しました。なぜこんなニッチなお題について話したかというと、Ubie Discoveryに入社して5ヶ月の間にいくつか*1まとまったソフトウェアドキュメントを書いたので、自分の中でホットな話題だったからです。 #devchatfm 33回目は、Ubie DiscoveryのSWE @h13i32maru にドキュメントを書くことで得られるメリットや、ポイント・工夫などを聞きました! #33 チームの生産性を上げるドキュメントのすすめ with@h13i32maruhttps://t.co/TrmZd13D91— 久保 恒太 / Ubie CEO (@quvo_ubie) 2021年8月12日 これらのドキュメントは個人的にわりと良く書けたと思ってますし、
「公式ドキュメントを読め」というのが急に話題になっていたので自分なりに整理してみました。 注意: そんなに真面目に推敲していません。フィーリングで書いているので実態に即してない部分もあるかも…… 公式ドキュメントとは何か あなたが使おうとしている道具 (ライブラリ、フレームワーク、プログラミング言語、ミドルウェア、コマンドラインツール、etc.)[1] は必ず誰かによって作られています。ある程度成熟した道具であれば通常、その作った人・組織自身によって公開されているドキュメントがあるはずです。これが公式ドキュメントです。 公式ドキュメントは、OSSにおいてはソースコードと双璧をなす最も信頼できる資料のひとつです。ソースコードが非公開の場合は通常、公式ドキュメントが最も信頼できる資料でしょう。 (以降はOSSを主に想定して説明します) たとえば…… Python のソースコードはGitHub上
概要 職業ソフトウェアエンジニアを目指す方々にオススメしたい書籍トップ10です 以下の観点から選定しました 10年後でも変わらない、流行にとらわれず長く役に立つ、ソフトウェアエンジニアリングにおいて普遍的な知識 特定のプログラミング言語やプラットフォームやツールに精通するのではなく、現代のソフトウェア開発の哲学・文化の全体像が把握できることを優先 200~300ページくらいで初心者でも読破できる 400~500ページくらいの本もあるが、それらは辞書的に使うのがいい あえて10冊に絞り込んだので、ここに含められなかった書籍も当然あります CI/CDやDevOpsに関する本も入れたかった… デザインパターンに関する本も入れたかった… DDDやClean Architectureなどシステム設計に関する本は意図的に入れていない 真・プログラミングスクールに通うくらいならこの本を読め10選を書きま
Gigazineさんでdrawthe.netを取り上げていたので紹介です。使い方はGigazineさんのほうが丁寧なので、気になる方はチェックしてみてください。(2020年12月1日、追記) drawthe.netとは cidrblock/drawthe.netは複雑なネットワーク図も「テキストで書いてブラウザ上でSVGレンダリングできるようにしよう」というコンセプトのもと開発されたツールです。下図のように複雑な構成図も精度高く描くことができます。 拡大してみると情報量が多いこと、またいかに整っているかがわかると思います。 デモサイトも用意されているので、サクッと試したい場合はコチラが便利です。コードはGitHubで公開されています。更新が2017年末で止まってしまっているのが玉に瑕ですが、十分な性能を発揮してくれます。 drawthe.netを使いたい理由 美しい構成図といえばInter
Intro 「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。 確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。 やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。 スコープとしては、ライブラリ、ツール、フレームワークなどではなく、 Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。 Scope 従来からあり、広く認知された API については、情報も多く調査の敷居はそこまで高くないため、今回は議論が始まって
小川 明彦, 阪井 誠 : チケット駆動開発 日本のソフトウェア開発の現場で生み出された「チケット駆動開発」という概念を、数多くの実例を元にモデル化・体系化を試みた最初の本。 小川 明彦, 阪井 誠 : Redmineによるタスクマネジメント実践技法 Redmineによるチケット駆動開発の実践技法に関する最初の本。アジャイルなソフトウェア開発への適用方法、TestLinkによるテスト管理手法についても言及。 清水 吉男: 「派生開発」を成功させるプロセス改善の技術と極意 組込システム開発をベースとして、ソフトウェア開発特有のスタイルである派生開発、特にXDDPについて解説した世界でも稀な本。既存製品を保守するのではなく継続的に機能追加していく昨今の開発では、派生開発特有の問題を意識しなければならない。XDDPはプロセス論だけでなく、要件定義などの上流工程の品質改善にも役立つので注意。 Le
DuckDuckGo(https://duckduckgo.com)はプライバシーの保護に重きを置いている検索エンジンのひとつである。 特筆すべきは、Bangという機能があって、探しものがとてもはかどる。 たとえば「!a 図書館」(ビックリマーク+アルファベットのa+スペース+検索語)と入力するとAmazonを検索してくれる。 こんな風に「!+何か」 で特定のサイトのみの検索ができる機能がBangである。 検索エンジンが使えなくなった(クズみたいなサイトが上位に来て、欲しい情報が見つからない等)と言われて久しいが、探すべきサイトにダイレクトで検索することで、この問題のかなりの部分が解決する。 よく使いそうなのは ! (キーワード) 最初の検索結果へ直接ジャンプ !i イメージ検索 !m 地図検索 !n ニュース検索 !v 動画検索 !w ウィキペディア検索 !pdf PDFファイルだけを検
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く