はてなブックマーク

こんにちは、ソフトウェアエンジニアが家を建てる話が大好き人間です。 これまでは他人事として記事を楽しんできたわけですが、とうとう自分も家を建てることになりましたので、同志のために記録を残します。 ちなみに、ちょうど同じ時期に家を検討することとなった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 Advent Calendar 2017 11日目の記事です。前日はkoooooooooooooooooheさんによる「Vim を使い DarkPowerを得る」。 Vimの国際カンファレンス「VimConf 2017」にて、大好きなカラースキームについて発表してきましたが、今回はその舞台裏についてのお話です。 VimConf 2017「VimConf 2017」は、11月に開催されたVimの国際カンファレンス。海外からゲストスピーカーを招き、スライドはすべて英語で用意され、英日同時通訳が入り、昼食には超高級東京風弁当が出るなど、本格的にインターナショナルであることを意識したカンファレンスになっていました。 Creating Your Lovely Color Schemeわたくしcocoponは、高まるカラースキーム愛を共有するために発表枠に応募。たくさんあった（らし

こんにちは、Vimカッコイイ計画実行委員会（総員1名）のcocoponです。コツコツ製作していた新生Vimカラースキームギャラリー「colorswat.ch」を、本日公開します。 前作「Vim Colorscheme Gallery」から3年。見えてきた課題前作「[Vim Colorscheme Gallery][vag]」を公開してから、もう3年が過ぎてしまいました。あれからカラースキームは増え続け、それらを取りまく状況はいくらか変わって、いい感じのまとめサイトもいくつか生まれました。 自分自身といえば変わらずカラースキームが大好きで、ウォッチ自体は継続していました。しかしながら、肝心のサイト更新は滞っていたのです。なぜか？ 運用コストの改善更新が滞った主な原因は、運用コストを甘くみていたことです。ここでいう「コスト」は、主に時間のこと。 前作はカラースキームのデータを抽出するフローが脆

こんばんは、料理大好きcocoponです。最近はスパイスカレー作りにはまっています。カレーは宇宙。 料理レシピの管理方法料理好きな皆さまは、秘伝のレシピをどうやって管理していますか？自分はずっとEvernoteで管理してきました。テキストベースで記録しておけば、いつでも編集できますし、モバイル端末からも簡単に確認できます。 のですが、なんだかサービスの雲行きが怪しい感じで心配です…。 それならば類似のサービス、例えばDropbox Paperに乗り換えればよいのか？というと、Dropbox社がイケイケのうちはよいですが…結局は同じ問題がつきまとうことになります。 友人とそんな話をしていたとき、とあるアイディアが出てきました。 「GitHubで管理すればよいのでは？」 さっそくやってみました。 ひとまずフォーマットはMarkdownにしておきます。レシピのページを開くと…？ プレビュー機能が

やや唐突ですが、「手を動かしながら、ていねいに学ぶOptional」という題で、SwiftのOptionalを学習するためのPlaygroundを作成してみました。 書いたコードがその場で動く「Playground」を利用して、実際に手を動かしながら、SwiftのOptionalについて学ぶことができます。 もくじ現時点でのコンテンツはこんな感じです。 はじめに — なぜOptionalが必要なのか？Optionalってどんなもの？Optionalに対する操作Optionalのもう少し高度な操作暗黙的なunwrap対象読者対象読者はこんな感じです。 Swift初学者Objective-CのころからiOS戦国時代を生き抜いてきたけど、Swiftに苦戦している人「!」とか「?」とか、Xcodeからおすすめされるままにつけてしまう人「俺たちは雰囲気でSwiftをやっている」な人既存の資料が抱えて

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

LT（ライトニングトーク）ではありますが、久しぶりに発表してきました。「ひとりのエンジニアがフォント沼にハマるまで」というお題です。 Collabo Tips（コラボチップス）Collabo Tips（コラボチップス）は、デザイナーとエンジニアの垣根を取り払いたい！と思う人たちの集うイベント。 今回は恐れ多くもデザイナーという立場から、エンジニアさんがデザインに興味を持ってもらえるような内容を目指して作ってみました。 テーマは「フォント」LTなので、使える時間は限られています。数あるテーマの中から今回は「フォント」にフォーカス、純粋なエンジニアだった自分がどのようにフォント沼（＝際限ないフォント購入への道）にハマったのかをお話しました。 短い時間でも何か情報を持ち帰ってほしいと思い、自分がお世話になった書籍の紹介を中心に構成しました。フォントっておもしろそうかも…なんて感じてもらえれば何よ

こんばんは。テキストエディタが大好物で色々試してみるけど、最後はやっぱりVimに戻ってきちゃうcocoponです。今回は、ナウいテキストエディタ「Atom」向けに、Vimで愛用している自作のカラーテーマ「Iceberg」を移植したので試してみてね、というお話です。 Atomとは「Atom」は、開発者なら誰しもお世話になっているであろうGitHubが生み出した、オープンソースのテキストエディタ。 HTMLやCSS、JavaScriptなどWebの技術でクロスプラットフォームなアプリが作れる「Electron」で構築された、モダンなテキストエディタなのです。 その証拠にほら、Web開発者ならおなじみの開発者ツールも表示できます。 うーむ、何ともいえない違和感。 天下のGitHub製であり、オープンソースであるという安心感。慣れ親しんだWebの技術で拡張できるカスタマイズ性。やや重いと感じるシー

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

年の変わり目だからか、ポエムが書きたくなってしまった。 この年末年始で、プライベートなプロジェクトを2つ上げました。そのうちのひとつが、ポートフォリオサイトのリニューアル。 ポートフォリオを更新するたびに思うことポートフォリオサイトを更新するたびに思うのが、「前のデザインはクソだったな（綺麗に言いなおすと、隙があった）」ということ。外観然り、設計然り。「すべてのコンポーネントは再利用できるようにした！宝石のように美しい部品をまた作ってしまった…」なんて惚れ惚れしながら設計したにも関わらず、結局は毎回フルスクラッチで作りなおしていたりするものです。 「前年のデザインはクソだ」と思わなくなったら終わりだ無論、その瞬間では最大限の力を注いでいます。それでも「前年のデザインはクソだった」と毎年思っていて、この繰り返しはいつ終わるんだろう…なんて途方に暮れるわけですが、優秀な先輩方に話を聞くと皆さん

こんにちは。そろそろUnityを習得すべきという空気をひしひしと感じているcocoponです。今回は「Unity UIデザインの教科書」をお供に、Unity習得に挑戦してみることにしました。Unity初心者は、短時間でどの程度GUIを作れるようになるのでしょうか。 Unityとは「Unity」とは、ゲームを作るときの基礎となってくれる「ゲームエンジン」のひとつ。 ゲームにとどまらず、iOS/Android両用のアプリ開発やインスタレーションのコンテンツ制作などにも用いられる、今アツいエンジンなのです。3D表現やド派手な演出のコンテンツが中心であれば、Unityの採用がひとつの選択肢として出てきます。こいつは覚えておいて損はない！けれども、はじめの一歩がなかなか踏み出せない…！ GUIの作り方を中心に据えた本ゲームを作る予定はないけれども、UnityでUIを扱えるようになっておきたい。そんな

Optional同士の比較演算はなぜできるのか？ 自分も興味を持ったので、さっそく検証用に新しいPlaygroundを作成。Bool?型の変数を2つ用意して、等価演算と大小の比較演算をそれぞれ試してみます。 nilの可能性のある値同士で、等価演算(==, !=)はできるけど、大小の比較(<, >など)はエラーになる。直感的です。 ここまで確認して、noliliさんに返信します。 @nolili nilと等しいかどうかは判定できるから等価系の演算子(==, !=)は定義されている、って感じじゃないでしょうか。大小の比較はできないからエラーになります。 pic.twitter.com/JAHx2vvkJK — cocopon (@cocopon) March 20, 2015