Visio Professional を買いました

ブンブンハローユーチューブ。 今日はちょっと軽めの記事で行こうと思います。

最近、新しいおもちゃを手に入れました。 Microsoft Visio Professional です。

ずっと Visio が欲しかった

理由1: 専用のソフトがあるならそれを使いたい

ここしばらく、ブログにさまざまな図版を投稿してきました。

f:id:tercel_s:20190706160635p:plainf:id:tercel_s:20190720200538p:plain
f:id:tercel_s:20190727135001p:plainf:id:tercel_s:20190803174219p:plain
最近投稿した図版

実は、これらは作図ソフトで描いていたわけではなく、Excel とか PowerPoint とか、たまたま Surface に入っていたソフトを無理やり使っておりました。

ただ、これらはあくまで表計算とプレゼンテーションのためのツールであり、そもそもが作図に適したソフトではありません。

昔、サザエさんの『全自動卵割り機』の回*1で、マスオが『機械で割った卵は一味違う』と述べた通り、やはり専用ソフトで描いた図版は一味違うんじゃないかなーと漠然とした期待が膨らんだわけです。

理由2: SVG 出力機能が欲しかった

続いて、描いた図を SVG 形式で吐き出してブログに張り付けてみたかったのです。

僕の超個人的な好みの話になりますが、ベクタ画像特有の、あのささくれの無い滑らかな質感が大好きなのです。

*1:出典は2007年5月27日放送「父さん発明の母」。

続きを読む

@angular/cdk でグリッドの上をドラッグ & ドロップ

アー 今年もー 夏が来たー (来たね来たよ来たゼ 来たわ来たの)

というわけで、たのしい自由研究のコーナーです。

高すぎる目標

こういうものを作りたかった……。


とりあえずの成果

早速ネタバレしますが、ここまで作るだけで精一杯でした。 ホントゆるしてください

続きを読む

CSSグリッドレイアウトを駆使して英文法の参考書っぽい何かを作る

こんばんは、たーせるです。

少し前に CSS グリッドレイアウトの話をしましたが、今日はもうちょっとグリッドの可能性を追求してみたいと思います。

本日の実験

突然ですが、皆さんは英文法の参考書をご覧になった事がありますでしょうか。 僕は残念ながら未だに何が書いてあるのか全く理解できないのですが、タイポグラフィが実に豊かですし、なんとなくアカデミックでかっこいい感じがします。 これを是非 HTML で表現したいのです。

そこで今日は実際に作例を示しつつ、ついでに作り方について触れていきましょう。

作例

続きを読む

TypeScriptで木構造と遊ぶ

あらすじ

突然ですが、やむにやまれぬ事情により木構造と戯れることになりました。 緊急クエストです。 僕の大嫌いな再帰……


やりたいこと

かなり長くなりそうな予感がするので最終目標から書いておくと、ルートが同じ木構造 2 つが与えられたとき、下図のようにマージする処理を TypeScript で実装します。

f:id:tercel_s:20190720202032p:plain:w500
今日はコードと図版が多め・日本語少なめです。 文章を書くのがあまりにもしんどかったので図解に逃げました。

続きを読む

親要素の幅に合わせて文字幅を自動調整するディレクティブをAngularで作る

おはようございます! こんにちはこんばんは!!

今回は小ネタですが、今までありそうでなかったタイポグラフィのお話をしようと思います。

Excel でセルからはみ出た文字のサイズを自動的に小さくしてくれるアレと同じようなことを Angular アプリケーションで実現するのが今日のテーマです。

f:id:tercel_s:20190713163028p:plain:w350

続きを読む

CSSグリッドレイアウトで番組表(ラテ欄)を試作してみたよ

こんにちはこんにちは。

訳あって CSS のグリッドレイアウト*1で遊んでいます。

お恥ずかしい話、つい最近まで僕は「レイアウトなんて FlexBox で十分だ」などと考えていましたが、グリッドは後発の規格だけあってなかなかどうして便利なことに気付いてしまいました。

そんなわけで、今日はグリッドの素晴らしさについてお話しつつ、ついでに適当に試作したサンプルも晒していきたいと思います。

導入: グリッドはどんなときに使うの?

グリッドは決して特別な道具というわけではなく、ごくオーソドックスなフォームを組むときにも地味に重宝します。

例題) 以下のレイアウト要件を満たすフォームを考えてみましょう。

f:id:tercel_s:20190706160635p:plain
例題: かんたんそうで実は難しいフォーム

一見簡単そうですが、へたくそな人(※ 僕のことです)が作ると、ラベルと入力コンポーネントの位置が揃わずガタガタになってしまったり、ラベルの文字列が見切れていたり、余白のバランスが不自然だったり、とにかく見た目が残念な出来栄えになりがちです。

また、ラベルの幅を適当に 200px とか 10rem みたいに決め打ちしてしまうと、あとからラベルの文字列を変更するたびにレイアウトの微調整が必要になるかも知れません*2

グリッドを使うと、この辺の問題がなんとかなるようになります(※ 語彙力)。

*1:かなり紛らわしいですが、Bootstrap のグリッドシステムとは全くの別物です。

*2:実際、この例題は難問であり、このページのサンプルを見ると、Bootstrap をもってしてもラベルと入力コンポーネントの配置のバランスがいまいち良くない問題は残ったままのようです。

続きを読む

データビジュアライゼーションの教科書を実践してみよう(棒グラフ篇)

こんばんは、たーせるです。

先日、『データビジュアライゼーションの教科書』を買ってきました。

データビジュアライゼーションの教科書

データビジュアライゼーションの教科書

内容は、グラフの選び方や色の使い方といった基礎理論に重きが置かれており、実現手段に関してはほとんど言及がありません。

たとえばビジネスマンが Excel や BI ツールを使って掲載されているグラフをどう描けばよいか・エンジニアがどのようなライブラリを駆使してアプリケーションにグラフを組み込めばよいかといった応用的研究は、読者ひとりひとりに委ねられております。

今回のテーマ

せっかくなので、『データビジュアライゼーションの教科書』を踏まえ、以下に留意した棒グラフをAngular + D3 で描いてみましょう。

  • 5-1.色は強調したい要素に使う
  • 5-10. 無駄な枠線はつけない - 棒グラフ
  • 5-14. 太過ぎず細過ぎず - 棒グラフ
  • 5-16. 目盛り線は控えめに
続きを読む

Copyright (c) 2012 @tercel_s, @iTercel, @pi_cro_s.