Adobe XDとFigmaの違い｜松下 絵梨
Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット図形ツールスタックとオートレイアウトリピートグリッドの代わりに・・・Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画像をドラッグして配置する機能がありません。 下記の工程で、「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaですることができます。 （リピートグリッドの便利さにはかないませんが・・・） 「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaでする方法🍀 Illustratorみたいに「⌘ + Dで繰り返し」ができるのが嬉しい😊 画像の配置：shift + ⌘ + Kも早めに覚えてしま
Google純正の構成図作成ツールが登場したので早速使ってみた
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
手書き風UIを実装できるJavaScriptライブラリー
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ ↑私が10年以上利用している会計ソフト！ Rough Notation Webサイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
CSS Section Separator Generator
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」
isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそうですね 操作性や機能性は非常にシンプルなものなので凝ったアイソメ図には対応できませんが、学習コストも必要なさそうなのでこれはこれでアリかなぁと思います ライセンスはMITとの事です isocity
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。 使い方Pinker.jsを読み込みます <script src='Pinker.js'></script>preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。 <pre id="Source01">Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </pre>canvasを
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
15+ CSS Flowcharts
Welcome to our collection of hand-picked free HTML and CSS flowchart code examples. These examples have been carefully selected from a variety of sources including CodePen, GitHub, and other resources. This collection has been updated as of July 2023 with 3 new items. CSS flowcharts are a visual representation of a process or algorithm, designed using HTML and CSS. They are used to illustrate step
CSSスニペット：CSSで横向きのフローチャート | かちびと.net
Result 横向きのフローチャートです。家系図とかにも使えそう コードは固定的で現在の環境下ではやや汎用性に欠けるかもしれません css.branch { position: relative; margin-left: 250px; } .branch:before { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -100px; top: 50%; margin-top: 1px; } .entry { position: relative; min-height: 60px; } .entry:before { content: ""; height: 100%; border-left: 2px solid #eee9dc; position: absolute
blocks.js - 複雑なデータフローの可視化 MOONGIFT
システムには何らかの入力があって、それが処理されて出力されます。処理は一段階に限らず、複数のステップを経ることもあります。さらに入力ソースが複数名こともあります。 そうした複雑なデータフローを表現するのに向いたライブラリがblocks.jsになります。 blocks.jsの使い方 メイン画面です。各ノードが線でつながっています。 ノードはドラッグできます。 メタデータの編集画面です。 線をつなぎ替えたり、ノードの削除もできます。 コンテクストメニューです。 blocks.jsを使うことでNode-Redのようなインタフェースであったり、Yahoo! Pipesのようなサービスを作ることもできるでしょう。汎用的なインタフェースなので、様々なデータフローをビジュアル化するのに使えるはずです。 blocks.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
)
Pencil.js - インタラクティブな2Dオブジェクトライブラリ MOONGIFT
https://codepen.io/stoumann/full/abZxoOM?__cf_chl_jschl_tk__=0e6e3f3b1905b07bb78d32fa4f79bc2b5d6f6578-1607305353-0-Ac279wWqPk0lbRDIguXSlM-0SHwCDpyRUtCxon24kgmF1UIuAWqjLWfNOR53gVTtmAAK1YpFQ3sqWOEUQyyVZrmMjhxl-mx3sgZQ8tU7V6uhmUXePJny28EBHdxzs1ONfrzFn8RrexvkZLcGDKUZ_ENQeSNAfoFhHdgH14uk_8qrwjDD-sInVjmHaa_jq-CLptdj51n-qWAyi8XLoWclm9wkWoaMyDUXuOa3UeqnR0p-xFyLJWWucyErHmc4csyOLdjRJEM75zbAPKjw6fqD5pivorFdiwV_PgPvJROoqRyv_witDcd3f04_heTyHcuwWfs6skvYiXFfUKhWNnrb5xtCuiwOmAgoxZgPrk7xGaq5TYkafz2y0aCJYJPEefcqKFOsNUJvlhWIAtFOQ4V8P4E
CSSと1つのdiv要素で出来る表現いろいろ
Regulex：JavaScript Regular Expression Visualizer