はてなブックマーク

こんにちは、ソフトウェアエンジニアが家を建てる話が大好き人間です。 これまでは他人事として記事を楽しんできたわけですが、とうとう自分も家を建てることになりましたので、同志のために記録を残します。 ちなみに、ちょうど同じ時期に家を検討することとなったKuniwak氏と協力しながら進めています。彼の記事も併せてどうぞ。 目次とにもかくにもライフプランライフプランシミュレーターを内製する重要な指標はグラフで可視化家計簿と連携して高速にPDCAを回す住宅ローンについて学ぶ新築 /中古？マンション／戸建て？建売／注文住宅？家づくりの大まかな流れを把握する書籍で流れを掴むScrapboxで情報整理家のコンセプトを定めるハウスメーカーを選定する有名なメーカー、隠れたメーカー実体験は説得力がある土地を探す土地の災害耐性土地の将来性土地は自力で探し出すBlenderで日照シミュレーションよい土地を見つけたら

色を調整するUIのおもしろさ「色」というモデルは、3軸 + 1軸（不透明度） = 4軸分の情報を持っています。軸の取りかたについても、RGB, HSV（またはHSB）, HSL, …など多様な切り口があるので、これらの情報を整理し、ユーザーに適切なUIを提供するのがカラーピッカーの責務です。 表示・設定すべき値がたくさんあるので、どのように見やすく・美しく・機能的に配置するかが腕の見せどころ…というわけです。 いろいろなカラーピッカーまずは世に存在するカラーピッカーたちを観察してみましょう。既存事例は学びの宝庫です。 macOS標準縦長。レイアウトは整っており流石のAppleといったところでしょうか。 色の選びかたが最上部のタブで切り替えられるようになっていますね。直感的に選べる円型ピッカーの色空間はHSVで、暗さのスライダーがひとつと、中心からの角度が色相・距離が彩度の円で構成されていま

コツコツと開発を続けてきた、テキストエディター向けの色テーマ「Iceberg」。開発6年目にして、とうとうGitHubのスター数が1,000を越えました！めでたい🎉🎉🎉

ビジュアルアートを題材に、プログラミングおよびその表現技法の基礎習得を目指すための教材です。 ビジュアルアートは実行結果が視覚的でわかりやすく、プログラミング未経験者・初学者でも直感的に楽しく学んでいけるのが特徴です。 多摩美術大学統合デザイン学科で開講するソフトウェアデザインの講義資料として作成していますが、プログラミング・ビジュアルアート入門者に向けて広くお使いいただけるよう配慮しています。

パラメーター調整用のJavaScriptライブラリ「Tweakpane」について、FlowからTypeScriptに全面移行したので、その理由と所感を。 3行まとめ業界におけるFlowのマイナーさ・不人気を憂い、調査も兼ねてTypeScriptへ移行してみた型の表現力自体はそれほど変わらず、周辺ツールのサポートも特に問題なし複雑だったパッケージの依存関係がシンプルになり、minify後のサイズも小さくなっていい感じJavaScriptと型JavaScriptは明示的な型を持たないプログラミング言語です。コードを気軽に書き捨てられる寿命の短い案件ならそれでも問題ないのですが、大規模かつ長期的に保守運用するプロジェクトには正直不向きでしょう。 JavaScriptに型を導入するための選択肢として挙がるのがFlowあるいはTypeScriptですが、それぞれアプローチが異なっています。 Flow

パラメーター調整用のJavaScriptライブラリ「Tweakpane」を一新しました。内面も外面もパワーアップしたTweakpaneが、さらに手軽に利用できるようになっています。 パラメーター調整用GUIの必要性UIのインタラクションやゲームのエフェクト、ジェネラティブアートなどの実装には、動きや表情を司るたくさんのパラメーターが隠れています。パラメーターの組み合わせ次第で無限のバリエーションが生み出せるので、少しでも綺麗な・気持ちのよい出力を得るために人類は日々調整を繰り返しています。 パラメーター調整は仕上がりの品質に大きく影響するため、できる限り多く試行したいところですが、時間は有限…。変更のたびにリビルド・リロードしていては非効率で、あっという間に日が暮れてしまいます。どうすればよいでしょうか？ 例えば画面上にスライダーのようなものが存在していて、このGUIで数値パラメーターを微

左右分離型のキーボードの橋渡しをしてくれる「TRRSケーブル」。一体どこで売られているんだろう？上質なケーブルを探し求めた旅の記録です。 TRRSケーブルとはこれです。分離型のキーボードの左右を橋渡ししてくれる大事なケーブル。その正体は特別なものではなく、オーディオなどでも利用されている汎用的なもの。ただし、**4極（端子の先端に3本の筋が入って4分割されている）**であるという点には注意が必要です。 ケーブルの仕様については、同じく左右分離型であるErgoDoxについての発表資料が詳しく解説してくれています。 TRRSケーブルを新調したい先日組み上げた自作キーボード「Orthodox」に付属するケーブルは20cmほどしかなく、左右分離型の魅力が半減してしまっています。先輩方のキーボードを眺めていると、ナイロンだったり金属だったりと、とにかくよい質感のケーブルを使われているので、自分もそん

さいきん一部の界隈でアツい自作キーボード。人間とコンピューターの境界で重要な役目を果たしているキーボードの自作なんて楽しいに決まってる！ということで、未経験者がはじめて自作キーボード「Orthodox」の制作に奮闘した記録（build log: ビルドログ）です。同じ境遇の人の助けになれば。 あらすじ：自作キーボード沼に足を踏み入れるまでOrtholinearなキーボードに一目惚れ自作キーボードが流行っているという噂は何となく聞いていたものの、MacBookのキーボードに満足していた自分には縁遠い話だと思っていました。そんな日常が、この写真を見て一変します。 えっ…かわえええ？！！！キーボードって綺麗に整列するだけで、こんなにもかわいらしくなるものなんだ…尊い…。 「Ortholinear」というのが、この綺麗に配置されたキーボードの総称のようです。キーボードのキーは少しずつずれているもの

ジェネラティブデザイン伝説の書『Generative Design』の日本語版が発売されてからもう2年。このたび、JavaScript版であるp5.jsに対応した新版が発売されることになりまして、今回も監訳を担当いたしました！ （💡蔦屋家電で刊行記念ワークショップも開催します！お知らせは記事の一番最後に） 「p5.js」採用でWebの世界へ前書で扱っていたプログラミング言語「Processing」は、統合開発環境とセットになっています。開発環境の構築が楽という利点で学習用には最適ですが、モバイル端末やWeb上で動かすとなると難しい…といった特徴があります。 本書では、そんなProcessingをJavaScriptベースで再構築した「p5.js」を採用して、すべての作例を書き換え。 JavaScriptの性質上、掲載されているスケッチはそのままWebブラウザー上で動作しますので、例えばポ

前回は、PWAの基礎知識について説明しました。今回は実際に制作してみたPWAに触れてもらいつつ、その内側・技術的側面について解説していきたいと思います。 今回の題材：光る電卓「Llumino（ルミノ）」2013年にiOSネイティブ版をお披露目したLluminoは、「計算をもっと楽しく」がコンセプトの電卓アプリ。当時は世界中で話題になりました。（もう5年前…！） 当時の制作過程については連載としてまとめていますので、興味がありましたらどうぞ。（👉 連載：Lluminoができるまで） 今回のチャレンジは、そんなLluminoを最新のWeb技術で再現・PWA化してみようというものです。 まずは実物を触ってみてください制作したWebアプリは https://pwa.llumino.app/ に配置しました。まずは実物を触って体感してみてください！ （昨日解禁になったばかりの「.app」ドメインだ

Web界隈でにわかに盛り上がりを見せている「PWA」。いったい何者なのか？Webの技術でどこまでできるのか？本当にネイティブアプリの代替になり得るなのか？ 実際にアプリを開発してみることで、そのプロセスを通じて現状や可能性を探ってみます。第1回目は導入編。 PWAとは何なのか？さいきんよく耳にするようになった「PWA」。Progressive Web Appの略称です。 旧来のWebページ・アプリは、表示に必要な情報をネットワークの向こう側から都度取得していました。山奥や地下、フライト中など、オフライン環境下では利用できないのが当たり前。 オフライン環境での利用や、ユーザーへの効果的なアプローチ手段であるプッシュ通知などの機能は、いままでネイティブアプリが独占してきた強みでした。それらをWebアプリでも使えるようにしてしまおう！という技術要素の総称がPWAです。 なぜいま注目されているのか

こんばんは。Vimがないと戦闘力が10%程度まで低下してしまうcocoponです。シンプルなファイル操作プラグイン「Vaffle」を新たに開発しまして、今回はその紹介記事です。 Vim標準のファイラー「Netrw」Vimには、「Netrw」という名前のファイラーが標準で付属しています。例えば :e . （カレントディレクトリを開く）のようにディレクトリを開くと、Netrwが起動します。 これがちょっと使いづらいのです。慣れの問題もあるのかもしれませんが、ファイル操作がサクッと直感的にできない。 例えば、 ~/foo.txt を ~/bar/ に移動しようと思ったら、 ~/ を開いてファイル一覧を表示移動先 bar/ を mt でターゲットに設定移動対象 foo.txt を mf で選択選択した移動対象を mm でターゲットに移動という操作になります。うーむ…。 ネットワーク越しのファイルを

itchynyさんのブログ記事を読んで、人のカラースキームの配色戦略を見るのはとても楽しい！と思ったので、自分も書いてみることにしました。 暗青系の落ち着いた配色でまとめています。 全体のコントラストを控えめにする感じ方は人によって様々ですが、真っ黒の背景に真っ白の文字では、個人的には目がチカチカして疲れてしまいます。 このため、Icebergではコントラストを落として、チカチカを防いでいます。背景は真っ黒ではなく、やや明るくした色を使用。前景は真っ白ではなく、やや暗くした色を使用しています。 背景には、うるさくならない程度に彩度を落とした色を敷いて、カラースキーム全体の雰囲気を出しています。 色数を絞るカラースキームを作る際にやってしまいがちなのが、色を使いすぎてしまうこと。 Vimでは、色を設定できる対象（＝ハイライトグループ）がたくさん用意されています。 これだけ充実していると、「使

iOSエンジニアの皆さん、ゴリゴリSwift書いていますか？サクサク書ける反面、コンパイルにやたら時間がかかってストレスフルですよね。今回は、激遅だったコンパイル時間が「ちょい遅」くらいまで改善したお話です。 あらすじ「ナウでヤングなiOSエンジニアはやっぱSwiftだよね！」ということで、半ば強引にSwiftを採用して直近のプロジェクトを進めていました。 補完機能が頻繁に落ちたり、ブレークポイントの位置がおかしかったり、変数の中身が見られなかったり、謎のエラーでビルドできなかったり、…などなど、まだまだバグはてんこ盛りですが、それらを見なかったことにできる程度にはいい感じです。型推論はそこそこ賢いし、何より簡潔に記述できます。ただの可変長配列のために、もうNSMutableArrayなんて長々と書かなくてもええんやで。 プロジェクトが進むにつれて見えてくる問題プロジェクトが進んでソースコ

OS Xをメインでお使いの開発者な皆さま、Alfred + Dashのコンボで爆速リファレンス引きライフを満喫していますでしょうか。今回はこの快適環境を拡張するべく、自分でDash用のドキュメント(= docset)を作ってみました。 「Alfred、Dashって何？」な方のためにそれぞれどういうアプリなのか知らない方のために、簡単に解説しておきますね。 まず、「Dash」は高速なドキュメントブラウザです。iOSやJava、Ruby、Processing、…ありとあらゆる言語のリファレンスが「docset」として用意されており、1クリックでインストールできます。自分の使う言語分をすべてインストールすれば、すべてのリファレンスが一所から引けるようになるのです。無料でお試しできるので、使ったことがないなら今すぐインストールすべし。

ビジュアルコーディングにおいて、気持ちよい動きを実現するために必須ともいえる「easing関数」。今回は、有名なRobert Penner氏のものをProcessingに移植して、勉強会のメンバーが使えるように仕上げてみました。 こういう動きが作れるようになりますものを動かす方法突然ですが、ここに丸があります。ボールです。 このボールをとにかく動かせ！と言われたとき、あなたならどう実装しますか？ 例えば、毎フレーム2ピクセルずつずらしていく…みたいな感じが、最も簡単でしょうか。 void draw() { background(255); ballX += 2; ellipse(ballX, ballY, ballSize, ballSize); } コードはこんなイメージ。 動きがわかりやすいように、絵のほうは往復させています。 これは「等速直線運動」といって、ずっと同じ速さで移動する動

「ターミナル」、あるいは「Terminal.app」。開発用にOS Xをバリバリお使いの皆さまは、お世話になる機会も多いかと思います。 今回は、Vim用に作成した「Iceberg」というカラースキームをTerminal.app用に移植したのでお知らせします。 Iceberg「Iceberg」は、南極をテーマに作成した暗青系のカラースキーム。深海をイメージした深い青を背景に、目にやさしく読みやすい色合いを目指しています。ダウンロードは公式サイトから。 使ってみる！！まず、公式サイトの下の方にあるボタンを右クリックし、設定ファイルをダウンロードしてください。 次にTerminal.appを起動し、「ターミナル→環境設定…」と進みます。 設定用のウィンドウが表示されたら、「設定」タブをクリック。 ウィンドウ左下にある歯車アイコンのボタンをクリックし、「読み込む…」を選択。先ほどダウンロードしたフ

Vim Advent Calendar 2013 35日目の記事です。昨日の記事は、kamichiduさんの「uniteでfile_include的な挙動を実装する」。 【またカラースキームか】Vim Advent Calendarへの参加はこれで5回目ですが、そのうち4つ、つまり8割はカラースキーム関連の記事でした。好きなんです。 1回目の記事「おしえる」1回目の記事は、お気に入りのカラースキームの紹介記事でした。

Vimの設定を少しずつ.vimrcに加えはじめた当時は、mapとnoremapの違いがわからなかった。 情報はWeb上にたくさんあったが、当時の自分にとってはどれも説明が難しくて、しばらく曖昧なまま放置してしまった記憶がある。 そんな昔の自分に向けて、この記事を書いてみる。 — この記事は、 Vim Advent Calendar 2012 の328日目の記事です。 昨日の記事は、 @raa0121 さんの「Jenkinsとvimenvで最新版のVimを自動で手に入れよう」。 mapの話をする前に: 便利なCTRL-A, CTRL-Xmapの話をする前に、ひとつだけ。 CTRL-A と CTRL-X を使ったことがあるだろうか。 もし初耳であれば、便利なのでこの機会に覚えてしまおう。 適当な数字を入力し、ノーマルモードに戻る。 入力した数字にカーソルを合わせて、 CTRL-A を押してみよ