Electron × Angular ハンズオン! Web の技術でデスクトップアプリをつくろう!

だいぶ古いネタで恐縮ですが、今日は Electron のお話をします。 かれこれ 3 年ぶりくらいの Electron。

続きを読む

Surface こわれました

幼稚園の頃からの友人氏が、基本情報技術者試験に向けてお勉強を始めたらしい。 がんばれー!

それはさておき、今月の中旬頃に愛機の Surface ちゃんを不慮の事故で壊してしまい、ショックのあまりブログの更新もままならない日々が続いております。 Visio を買った直後なのに……

そんなわけで、今の気持ちを動画にしてみました。音が出るので注意。

youtu.be

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

続きを読む

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