アー 今年もー 夏が来たー （来たね来たよ来たゼ 来たわ来たの）
というわけで、たのしい自由研究のコーナーです。
こういうものを作りたかった……。
レイアウト、ビジュアライゼーション、計算幾何アルゴリズムや、それらを駆使したUIコンポーネント実装の文献が充実してほしいなーと思っています(´･ω･`)
— 𝚃𝚎𝚛𝚌𝚎𝚕 (@tercel_s) November 30, 2018
たとえば、こういうUIを手作りするときのベストプラクティスってなかなか表に出てこないですよね、、、 pic.twitter.com/40l16jnX7r
早速ネタバレしますが、ここまで作るだけで精一杯でした。 ホントゆるしてください。
CSS Grid + Angular CDK + Angular Animation の練習。のびちぢみ用のハンドルをつけてみる。 #Angular pic.twitter.com/YJ3AExIFQB
— 𝚃𝚎𝚛𝚌𝚎𝚕 (@tercel_s) August 3, 2019
こんばんは、たーせるです。
少し前に CSS グリッドレイアウトの話をしましたが、今日はもうちょっとグリッドの可能性を追求してみたいと思います。
突然ですが、皆さんは英文法の参考書をご覧になった事がありますでしょうか。 僕は残念ながら未だに何が書いてあるのか全く理解できないのですが、タイポグラフィが実に豊かですし、なんとなくアカデミックでかっこいい感じがします。 これを是非 HTML で表現したいのです。
そこで今日は実際に作例を示しつつ、ついでに作り方について触れていきましょう。
突然ですが、やむにやまれぬ事情により木構造と戯れることになりました。 緊急クエストです。 僕の大嫌いな再帰……
1年生の頃、C言語で難しいと感じたのは、メモリの動的確保と再帰アルゴリズムの実装だった。いまだにメモリ漏れ/2重解放といった致命的なミスを時々やっちゃう。
— たーせる (@tercel_s) 2010年5月26日
かなり長くなりそうな予感がするので最終目標から書いておくと、ルートが同じ木構造 2 つが与えられたとき、下図のようにマージする処理を TypeScript で実装します。
今日はコードと図版が多め・日本語少なめです。 文章を書くのがあまりにもしんどかったので図解に逃げました。
こんにちはこんにちは。
訳あって CSS のグリッドレイアウト*1で遊んでいます。
お恥ずかしい話、つい最近まで僕は「レイアウトなんて FlexBox で十分だ」などと考えていましたが、グリッドは後発の規格だけあって中〻どうして便利なことに気付いてしまいました。
そんなわけで、今日はグリッドの素晴らしさについてお話しつつ、ついでに適当に試作したサンプルも晒していきたいと思います。
グリッドは決して特別な道具というわけではなく、ごくオーソドックスなフォームを組むときにも地味に重宝します。
例題） 以下のレイアウト要件を満たすフォームを考えてみましょう。
一見簡単そうですが、へたくそな人（※ 僕のことです）が作ると、ラベルと入力コンポーネントの位置が揃わずガタガタになってしまったり、ラベルの文字列が見切れていたり、余白のバランスが不自然だったり、とにかく見た目が残念な出来栄えになりがちです。
また、ラベルの幅を適当に 200px とか 10rem みたいに決め打ちしてしまうと、あとからラベルの文字列を変更するたびにレイアウトの微調整が必要になるかも知れません*2。
グリッドを使うと、この辺の問題がなんとかなるようになります（※ 語彙力）。
*1:かなり紛らわしいですが、Bootstrap のグリッドシステムとは全くの別物です。
*2:実際、この例題は難問であり、このページのサンプルを見ると、Bootstrap をもってしてもラベルと入力コンポーネントの配置のバランスがいまいち良くない問題は残ったままのようです。
こんばんは、たーせるです。
先日、『データビジュアライゼーションの教科書』を買ってきました。
内容は、グラフの選び方や色の使い方といった基礎理論に重きが置かれており、実現手段に関してはほとんど言及がありません。
たとえばビジネスマンが Excel や BI ツールを使って掲載されているグラフをどう描けばよいか・エンジニアがどのようなライブラリを駆使してアプリケーションにグラフを組み込めばよいかといった応用的研究は、読者ひとりひとりに委ねられております。
せっかくなので、『データビジュアライゼーションの教科書』を踏まえ、以下に留意した棒グラフをAngular + D3 で描いてみましょう。
こんばんは、たーせるです。
ずっと Angular 単独ネタばかり書いてきましたが、ときには別なライブラリと組み合わせてみたくなることがあります。 でも、使いたいライブラリと Angular の相性が必ずしも良いとは限りません。
今日はそんなシチュエーションに遭遇したときのためのお話です。
Copyright (c) 2012 @tercel_s, @iTercel, @pi_cro_s.
