Udemyを宣伝するために社内Slackでクイズを投稿している話
はじめに 私は現在、SIer企業の人材教育部門で仕事をしています。 Udemyは会社補助で講座を購入できるようになっているのですが、教育部門としてはできるだけこの制度を利用して社員にUdemyを...
0
0
Comment0
38 search resultsShowing 1~20 results
Stocked
You need to log-in
【JointJS】描画される要素の重ね合わせ
この記事ではJointJSで描画される要素の重ね合わせについて説明します。 なぜ重ね合わせを意識する？ SVG重ね合わせでは、基本的に上にあるものが下にあるものを隠す動作になります。 表示で考え...
0
1
Comment0
テストを甘く見るなかれ 〜 Udemyのヒンシツ大学でテストの基礎を学ぼう
エンジニアにとって最も学ぶべき分野は何でしょうか？ 私は10年以上エンジニアとして仕事していますが、エンジニアならテストを学ぶべきと考えます。 今回はテストのことを体系的に学べる「ヒンシツ大学」...
3
2
Comment0
Advent Calendarを25記事埋める技術
はじめに 2023年のJointJS Advent Calenderで、実質ひとりで25記事埋めることになりました。その経験をもとに、25記事をどうやって埋めればよいか？の個人的な知見を残します...
0
0
Comment0
JointJSでAdventCalendarを作成する
ここまで紹介したJointJSの技術をもとにしてAdventCalendarのような図形をJointJSで作成します。 最終的に以下のような図が作成されます。1 コードはこちら。 作成のポイント...
0
0
Comment0
VueでJointJSを使用する
今回はVue.jsでJointJSを使う方法を紹介します。 サンプルとして、Vueで定義したボタンをクリックすると四角形が追加されていくアプリを作成しました。 ソースはこちら。 導入方法 今回は...
0
0
Comment0
【JointJS】Elementにクリック以外のイベントを処理させる
以前の記事で、Elementに対するイベントの設定方法をご紹介しました。 その中で、event属性をつけるとカスタムイベントを発行できることを紹介しました。 joint.shapes.stand...
0
0
Comment0
【JointJS】ドラッグ中のCellのイメージを表示する
通常のHTMLではドラッグ＆ドロップAPIを用いることでドラッグ中のイメージを表示することができます。 以下は画像をドラッグした場合の挙動です。 ですがこのドラッグ＆ドロップAPIは現時点でSV...
0
0
Comment0
【JointJS】defaultRouterによるLinkの描画差異
JointJSではPaperに対してdefaultRouterを指定することでLinkの通るルートのアルゴリズムをカスタマイズすることができます。 例えば、途中に障害物があった場合にどういったル...
0
0
Comment0
【JointJS】DirectedGraphを利用してツリー形式の図を作成する
JointJSにはDirectedGraphという、有向グラフを作成するためのレイアウト機能が用意されています。今回はそちらを使ってツリー形式の図を作成していきます。 完成イメージ 以下のような...
3
1
Comment0
【JointJS】使いやすいカスタム要素を作るコツ
はじめに JointJSでは再利用可能なカスタム要素を定義することができます。 今回は、カスタム要素を作る上で個人的に工夫している / 気をつけているポイントを紹介します。 ※カスタム要素につい...
0
0
Comment0
JointJS解説 〜Highlighters編〜
Highlightersとは Highlightersは名前の通り要素をハイライトするなどの視覚効果を付与できるJointJSの機能です。 オン・オフの切り替えができるので、マウスイベント発生時...
0
0
Comment0
JointJSで描画した図形に手のひらツールを実装する
図形をたくさん置くと描画に必要な領域が広くなり、スクロールが必要になります。 横スクロールは操作し辛いので、手のひらツールがあるとちょっと便利になります。 実際の動作 全体のソースはこちらにあり...
0
0
Comment0
【JointJS】セルが多いときのパフォーマンスに影響がありそうな設定を検証してみた
JointJSでは多くの図形を描画する場合にパフォーマンスへの影響が懸念されます。大量の図形を描画しようとした際に、コード側で対策をすることができるのかがきになるところです。 今回はいくつかの設...
0
0
Comment0
JointJS解説 〜Geometry API編〜
Geometry APIとは Geometry APIは、JointJSに同梱される軽量なライブラリです。主に座標に関する操作を行うための機能が搭載されています。 Geometry APIを使わ...
0
0
Comment0
【JointJS】Anchor設定でLinkの端点位置を指定する
Anchorとは ElementをLinkでつなぐとき、デフォルトではLinkの始点と終点はElementの位置によって自動で決定されます。 ですが、図形によっては始点・終点の位置が自動で決まっ...
0
0
Comment0
【JointJS】ElementToolsを使ってElementを操作できるようにする
以前、【JointJS】LinkToolsを使ってLinkを操作できるようにするという記事を書きましたが、今回はそれのElement版になります。 ElementToosとは LinkTools...
0
0
Comment0
JointJSのViewとは何なのか
今回の記事ではJointJSのViewについて書きます。 JointJSのView JointJSで描画されるすべてのCellには、Cellに対するViewがそれぞれ存在します。 このViewは...
0
0
Comment0
【JointJS】JointJSのイベント処理
JointJSで描画しているSVGにはイベントを設定することができます。今回はどんなイベントが設定できるのかを紹介していきます。 設定単位 JointJSでは、以下の単位でイベント処理を定義でき...
0
0
Comment0
【JointJS】カスタム要素にHTMLのタグを使用する
はじめに この記事はJointJSのカスタム要素で、SVG外の通常のHTMLタグを使用するための方法を紹介します。 この記事を読むためには昨日の記事のカスタム要素の作り方の知識が前提となります。...
0
0
Comment0
38 search resultsShowing 1~20 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles