Visio Professional を買いました

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

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

ずっと Visio が欲しかった

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

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

最近投稿した図版

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

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

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

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

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

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

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

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

アー 今年もー 夏が来たー （来たね来たよ来たゼ 来たわ来たの）

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

高すぎる目標

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

レイアウト、ビジュアライゼーション、計算幾何アルゴリズムや、それらを駆使したUIコンポーネント実装の文献が充実してほしいなーと思っています(´･ω･`)

たとえば、こういうUIを手作りするときのベストプラクティスってなかなか表に出てこないですよね、、、 pic.twitter.com/40l16jnX7r

— 𝚃𝚎𝚛𝚌𝚎𝚕 (@tercel_s) November 30, 2018

とりあえずの成果

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

CSS Grid + Angular CDK + Angular Animation の練習。のびちぢみ用のハンドルをつけてみる。 #Angular pic.twitter.com/YJ3AExIFQB

— 𝚃𝚎𝚛𝚌𝚎𝚕 (@tercel_s) August 3, 2019

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

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

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

本日の実験

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

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

作例

TypeScriptで木構造と遊ぶ

あらすじ

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

1年生の頃、C言語で難しいと感じたのは、メモリの動的確保と再帰アルゴリズムの実装だった。いまだにメモリ漏れ/2重解放といった致命的なミスを時々やっちゃう。

— たーせる (@tercel_s) 2010年5月26日

やりたいこと

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

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

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

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

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

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

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

こんにちはこんにちは。

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

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

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

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

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

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

例題: かんたんそうで実は難しいフォーム

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

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

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

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

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

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

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

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

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

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

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

今回のテーマ

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

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