サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
大そうじへの備え
t32k.me
表題の通り理系男子大学生になった。今年40歳になるというのに、また16~17年かかってようやく奨学金の返済を完了したところなのに、まさか自分がまた大学に行くとは思っていなかった（通信だが）。 自分は都内でデザインエンジニア（UI寄りなWebフロントエンドエンジニア）の肩書で、デザイン部に所属している。はじめの大学も文系のデザイン専攻で卒業後、Webデザイナーとして働いてたらHTML/CSSコーディングが好きだったので、徐々にフロントエンドよりになり、今に至っている。自分のアンカーとしてはやはり今もデザイナーな気持ちがある。 ただ現在勤めている会社のミッションが『データによって人の価値を最大化する』というもので、実際作っているプロダクトでもSQLの知識を必要とされているものだったりして、 デザインエンジニアだがUI（フロントエンド）という領域だけでは、問題は正しく理解できないように感じていた
気づいたら、入社してました。社内を見渡すとツヨツヨなエンジニアばかりでガクブルですが、自分はデザイナー職での採用でした。といってもWebフロントエンドのコード(front-of-the-front-end)も書くのですが、いわゆるデザインエンジニアって感じです。最近は、デザインエンジニアって何するんだろう？と思いながら、下記の記事を訳してました。 【翻訳】私ってデザインエンジニアかも... - MOL といってもこれはクライアントワークを主とするClearleft社のデザインエンジニアの話なわけで、KARTEを提供するSaaS会社のデザインエンジニアにはまた違った側面があったりするんだろうなと思ったり、難しい。 自分でデザインしてコーディングするぶんには問題ないわけですが、バックエンドも書くエンジニア（ややこしい）の皆さんも不慣れなUIコードを書くわけで、そこでいかに負担をかけずにデザイナ
Original：I think I might be a design engineer…（2021-02-17）by Trys Mudford この記事はデザインエンジニアリングについてのシリーズの一部です。Web開発者の役割の変化やデザインとエンジニアリングの違いについて議論していきたいと思います。長くなりそうだったので、この記事を補足するために Prototyping、Systemised design foundationsとThe designer & developer relationshipに記事を分けました。それでは始めましょう。 数年前から、自分がWeb開発のどの領域に当てはまるのか考えてきました。自分のキャリアを振り返れば、ある種の仕事に収束しているのを感じていましたが、それが何という名前なのか、今までは分かりませんでした。 Web開発者はWebサイトを構築するのか
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
古い本だが、知ったのはonyourmarkの雑誌を読んでいたら、マフェトン理論という単語が出てきたからだ。 なんとか理論と難しく聞こえがちだが、覚えるのは以下の180公式だけだ。 180 - (年齢) 上記の公式から導き出される数字を最大エアロビック心拍数として、それを超えないように運動するだけだ。私なら36歳なので、だいたい134 ~ 144の心拍数を維持してランニングするだけ。 運動慣れしている人、病み上がりの人でこの公式の数字はプラスマイナス10くらいするが、まぁ、だいたいこれくらいの心拍数を維持する。やってみれば分かるが、運動したらこの心拍数にすぐ達してしまうので、走っては歩いて、走っては歩いて、というかほんとうにゆっくり走る（ときには歩いてる速度と変わりないくらいに）。 ゆっくり走る練習といえば、LSD(Long Slow Distance)が有名だが、実際私も知ってたし、それっ
TLDR: Material Designをカスタマイズして利用した話 最近、デザインシステムって言葉よく聞きますよね。airbnbではDLSというデザインシステムを持っていたり、UberはBase Webというデザインシステムを持っていたり、アメリカ連邦政府も持ってたりします。国内のIT企業でもデザインシステムを作成しているとの事例もよく耳にします。 デザインシステムとは？ デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 デザインシステムの定義と作成方法、導入事例 | UX MILK では、デザインシステムってのはどういったもんなんでしょうか？これまでも、スタイルガイドやコンポーネントライブラリといったものは聞いたことがありますが、デザインシステムというのはそれらも含めたもう少し大きなモ
最近、サブスクリプションサービスを提供する企業が多くなった。Amazon Primeで商品を配達してもらい、Netflixで映画・ドラマを見、Spotifyで音楽を聞くといったように、自分もいくつかのサービスを定期購読している。 本書の著者は、SaaSの雄Salesforceの創業期から参加して、自らもSaaS企業を立ち上げたZuora CEOのティエン・ツォ氏。前半の第一部はサブスクリプション経営に移行しているさまざまな業種・業界を解説。後半の第二部はサブスクリプション経営をするための考え方や戦略を解説している。 昔、Kaizen Platform(デザインリソースのSaaS)で働いてたとき「壁に棚を付けたいと思ったとき、ほしいのは電動ドリルじゃない。穴だ。」という話をよく聞かされた。結局、サブスクリプションというのは、モノや道具を売るというのではなくて、結果の共有なんだと本書を読んで改
Shipped! @GoogleFonts now let's you control web font loading using font-display. Say hello to the display parameter 🎉 What's font-display? https://t.co/Q7RDeESwkm pic.twitter.com/sn27ySza1B — Addy Osmani (@addyosmani) May 15, 2019 Google I/0 2019に参加してきたのだが、Google Fontsがfont-display: swap;に対応するとかで盛り上がってるのを横目で見てた（5/15の時点で対応済とのこと）。 最近はCSSもなにもコードを書いていないので、世間に疎くて困るのでリハビリする。 The font display timeline 図
私のキャリアのはじめはWebデザイナーだった。Webデザイナーと言っても簡単なHTML/CSSコーディングもするデザイナーだった。というわけで、自分が作ったUIカンプを自分でコーディングするのだが、どうしてもデザインしているときに後々のコーディング工程を意識してしまうので、できるかぎり角丸は避けたり（当時はCSSのborder-radiusなどなかった）していた。でも世の中的にはWeb 2.0の丸っこいアクアボタンが流行ってたときだ。こうゆうのはよくないなと思いつつも、納期との兼ね合いだったり、いろいろ妥協せざるを得なかった。 時が経ちフロントエンドエンジニアになった私は、ここで初めてUIデザイナーと分業に入るわけだが、デザイナーからあがってくる無限に増殖するボタンであったり、無限に増殖するカラバリに苦悩する。当時はコーディング都合でUIのクリエイティビティも阻害してはいけないと思っていた
この記事はCoffee Advent Calendar 2018の9日目です、知らんけど。 最近、山登りが好きになってきたのだが、そうなると以前から好きなコーヒーとの掛け算で自然と “登山 x 珈琲“という可能性を思考せざるを得ない。 そうゆうわけで、友達と行った初めての山、丹沢大山の山頂でも水筒に家で淹れたコーヒーを飲んだ。11月中旬だったこともあり山頂はとても寒く、温かいコーヒーが身に染みて格段に美味しく感じたものだった。
昔フロントレンドで、環境光の明るさによってCSS変えられたらおもしろいよね的なことを@simuraiが彼の作ったAtomのテーマを解説しながら言っていた。環境光については@girlie_macが2014年に記事を書いていたので、CSSスゴイ！ほえー！と思ってた。 HTML5で実現できる！環境光に合わせたレスポンシブなUI | HTML5Experts.jp media feature luminosityはlight-levelに名前を変えたが今も実装の気配なさそうだ。一方で、2018年、macOS Mojaveがリリースされ、ダークモードが利用できるようになった。自分も流行りに乗って自宅のMacで利用している。 Paul Miller — Using dark mode in CSS with MacOS Mojave そして、どうやらSafari Tech Preview 68からダー
これまではHugoで生成したHTMLをWerckerでGitHub Pagesにデプロイしていたんだけど、定期的にWerckerのアップデートかなんかで動かなくなる・修正するを何回かやった結果、疲弊して、めんどくさくなった。 最近ではすっかりブログ書かなくなったのもあって、手元でHugoを動かしてdocsフォルダにHTMLを直接コミットするという体たらくである。先の記事で購入したWEB+DB PRESSの特集の一つがCircleCIだったので、ちゃんとCIでデプロイしてみようとした話。 まぁ、そうゆうわけで、Hugo + CircleCI + GitHub Pagesの構成で動かしたかったわけだけど、うまいことコレ！ってのがなかったので、以下の記事を参考にかけ合わせた感じ。 Automate Your Static Site Deployment with CircleCI - Circl
なにかのフレームワークやライブラリを説明するときに、メリットは紹介しつつも『xxxは決して銀の弾丸ではない〜』という表現をよく見かける。私もそうゆう文章をよく書いた気がする。知らんけど。そうゆうわけで、オブジェクトベースUI設計は銀の弾丸だ！と断言している本特集に惹かれて購入した。 オブジェクトベースUI設計とはタスクベースUI設計と対になるもので、『名詞』–> 『動詞』の順序で操作になる。つまり、名詞となるオブジェクトを選択してから、それに対して何らかのアクションが起こる。プログラミングを嗜むものなら、慣れ親しんだ考えだろう。 それに対して、タスクベースUIは『動詞』–> 『名詞』となる。本特集で例に出ているのが、どこかのピザ屋のアプリUI。ユーザーが一番最初にアクションを起こす画面には、『注文する』というボタンがデカデカと存在している。それから、いつ配達するか、氏名・電話番号を入力して
【ggg】白井敬尚特別講演「グリッドシステムの成立とその意味」開催のお知らせ 少し前だが上記のセミナーに参加した。デザイン系、しかもWeb系でないセミナーは久しぶりだったが、講演者の白井さんはムサ美の教授ということもあり、とてもわかり易い大学の講義のような充実した2時間だった。 講演タイトルのグリッドシステムのみならず、活版印刷の歴史からは、各種有名フォントの成り立ち・有名デザイナーの紹介なども丁寧に解説してくれて、さしずめデザイン史・総おさらいといった感じだった。 グリッドシステムと言えば、ヨゼフ・ミューラー＝ブロックマンを語らずよりほかない。講演でも本書の紹介があった。いわゆるスイス派の重鎮、スイス派は国際タイポグラフィー様式ともよばれ、幾何学的なグラフィックにストイックで簡潔なタイポグラフィが印象的だ。 今見ると、すこし味気ないグラフィックにも見えてしまうが、大学生のときにデザイン史
最近、Vue.jsを触っている。そんで、UIデザインは外注していて、アニメーションの納品はどうしますか？と聞かれたので、聞きかじった程度の知識で「After EffectsでBodymovinでちょちょいのちょいですよ！」とテキトーに答えてしまって、後に引けない感じになったので実際に触ってみることにした。 After Effects ご存知の通り、Adobe製品。モーショングラフィックとか作るときに用いるツール。Adobe Premiere Proというのもあるが、こちらは動画編集メインで、今回のような込みいった短めのアニメーションなど制作するのはAfter Effectsが適している。 かくゆう、私も大学生の頃、VJというものに興味があり、本ツール（v5.5くらいかな？）を使い、いろいろモーショングラフィックを作成していたものだ。そして今回一万と二千年ぶりにAfter Effects開い
去年から無職を続けていたけど仮想通貨が絶賛暴落中なので、さすがに真面目に働こうと思った。ので働く。 Japan Digital Design株式会社に4月からお世話になることになった。 個人的に今後、数年間はFinTechの分野に身を置いておきたいと考えていて、FinTechと言ってもまぁいろいろあるわけで、それこそブロックチェーンなど今よくわからんけどイケイケなものもあったりする。でも冷静になって考えてみると、もっとやるべきことが他にあるんじゃないかと思う。例えば、銀行のUIとかフローとかもっとマシなもの作れるんじゃないかとか。 そういうわけで、JDD（Japan Digital Design）は、MUFGグループ会社なので、三菱UFJ銀行はもちろん、パートナーとして32の地銀さんと協力して、既存の金融の体験を改善・創造していく。いろんなプロトタイプを作ってスピーディに検証し、成功すれば
気づいたら、我が家にやたらリモコンが多いことに気づいた。最近流行りの、Google Homeで音声コントロールすれば良いのかもしれないけど、Nature Remoを友達に譲ってしまったので、どうしようもできない。 そもそもモード切替とか小難しいのを音声コントロールするのには、いろいろ難があるし、声出したくない時とか不便だし。やっぱリモコンをまとめる物理リモコンが欲しいのだと思った。
タイトルの通り、チャットデプロイしたい。 開発環境 masterブランチ QA環境 deployment/qaブランチ 本番環境 deployment/production ブランチ 自分のところは、上記みたいに環境とブランチがマッチングしていて、そのブランチにコミットなりマージするとCircleCIのほうでデプロイしてくれる。 例えば、開発環境でおおかた確認してQA環境に反映したいときはmasterからdeployment/qaにPRを作成しマージして、デプロイしてた。それめんどいので、そこをボットでやらせたいと思った。要はこうゆう感じ。 slack上から任意の言葉でbotにデプロイを指示する slackのbotがGitHub APIでプルリクエスト作成・マージを実行する CircleCIがGAEにデプロイする 3.はもう出来てるので、1.2.を見てみよう。 1. Slack Bot S
前回の記事で、CircleCIからGAEにNode.jsアプリをデプロイ方法を説明したのだけど、もっといい方法があるのではないかと思ってた。 version: 2 jobs: build: working_directory: ~/repo docker: - image: circleci/node:8 steps: - checkout - run: name: System information command: | echo "Node $(node -v)" echo "Yarn v$(yarn --version)" - run: name: Install dependencies command: yarn - run: name: Build command: yarn run build - run: name: Test command: yarn test - s
最近のFinTechは銀行業務（融資とか決済とか）をアンバンドリング（切り出し）して、サービスを成り立たせているが、この本の話は、銀行そのものをつくった話。ただの銀行ではなく、インターネット専業銀行である。 今でこそ、ネットを介していろいろなサービスを利用することは普通になってきてるが、本書の主役であるジャパンネット銀行が設立された2000年当初は、インターネットがようやく普及しはじめたという時代だ(17年前何してただろう..iモードとか？)。そのころから店舗を持たないインターネット専業の銀行を作ろうとしたのは、よほどの先見性やチャレンジ精神を併せ持っていたのだろうと感心する。 信頼の塊みたいな銀行を店舗をもたないでやることでどうやって信頼を担保するのか？と思いがちだが、結局は、実利は信頼に勝るということだと本書を読んで理解した。もちろん、セキュリティなど基本的な基盤は普通の銀行もネット銀
2017年買ってよかったモノとかやりたかったのだけど、今年はイヤホンばっかり買ったような気がするので、せっかくなので過程を紹介したい。 1月: Beats Powerbeats3 Wireless
超速! Webページ速度改善ガイド 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) @1000chから頂いた。 昔、HTTPリクエストを減らすためにという一連の記事を書いた（もう4年も前になるのか…）。当時はCSSの表現力が弱かったので、画像をてんこ盛りにしたようWebサイトが一般的だった。そのため、その画像をいかに減らすかが、Webサイトのパフォーマンスを決定する大きな要因だった。なぜならHTTP/1.xではホストごとのコネクション数に制限があったからだ。多くの画像をダウンロードするには、先にリクエストした画像がダウンロードされるまで、あとの画像リクエストは待たなければならず、これが体感速度に大きな悪影響を及ぼしていたことが多かった。 時代は移り、ときに2017年。HTTP/2の普及が進み、リクエストとレスポンスの多重化が可能になり、以前よりはHTTPリクエストに
この記事は、ブロックチェーン Advent Calendar 2017の 3 日目です、たぶん、知らんけど。なんだか前の人と記事の内容が被ってる気もするが、がんばってやっていき。 Proof of Work みんな、マイニングしてるか！僕はイーサリアムだけどちょっとやってた。ブロックチェーンはその名の通り、ある程度のトランザクション情報をまとめたブロックをチェーンのように繋いでいく分散型台帳システム。 そのブロックを繋げる際に、ビットコインであれば proof of work（PoW）というコンセンサス（合意）アルゴリズムを採用しているので、莫大な計算量（Work）を用いて、新たに台帳に記載されるブロックが正しいかどうか承認する作業（Proof）が行われる。 この作業を一番早く正しく終えた人が、その報酬として一定量のビットコイン(2017 年現在：12.5BTC)とブロックに含まれるすべて
基本、ずっとTravisかWerckerを使ってたんだけど、CircleCIデビューしてみた。今年の7月にCircleCI 2.0がリリースされ、config.ymlの記法も刷新されたとかで、ググって出て来るのは1.0の記法ばかりで苦労したので、メモ代わりに残しとく。 CircleCI2.0事始め -新しいcircle.ymlとworkflows編 · tehepero note(・ω<) 2.0 基本は上記のブログがわかりやすい。 version: 2 jobs: build: working_directory: ~/repo docker: - image: circleci/node:8 steps: - checkout - run: name: System information command: | echo "Node $(node -v)" echo "Yarn v$(
お金をもっとなめらかに。 ジャケ買いならぬ、タイトル買い。『お金をもっとなめらかに』って言葉がいいなぁと思い購入した。あと、家入さんという人が、どういう人なのか、知りたかったというのもある。 なぜ『なめらかに』という言葉が好きなのかは、本書を読んでいて理解できた。なめらかというのはグラデーションなのだ。本書では大きい経済圏と小さい経済圏と説明していたが、大きい経済圏 では、ゼロかイチか、白か黒か、その境界線がハッキリしている。良い方に入れなかったら何も得られない。家入さんはそうゆう世界に対して可能な限り選択肢を増やそうとしている。 クラウドファンディングのCAMPFIREが、最近の活動だが、例えば、画家志望の人がいても必ずしもその人達全員が画家として生活していけるわけではない。実力はもちろん、需要と供給であったり、運であったり、いろいろな理由で諦めざるを得ない。だがクラウドファンディングの
年初に立てた目標であるANA SFC獲得を早々に達成してしまい、生きる意味を失いかけていた。幸い、最近は仮想通貨にご執心で日々デイトレーダーのごとく生活していた。ただ、豆腐メンタルな自分にとって、デイトレは命を削るようなもので、こんなこと続けられない。まっとうに生きようと思い仮想通貨のマイニングを決意した2017年の夏である。 仮想通貨と聞けばビットコインを思い出すだろうが、ビットコインのマイニングに関しては専用のマシンを使い、工場などで大規模に行うのが主流であり、なおかつ中国のような電気代が安い国でやるのがセオリーであり、個人ではどうこうできるものではない。 ただEthereumなどの他のいくつかの仮想通貨に関してはグラフィックボードを複数積めば、そこそこ稼げるという噂を聞き手を出して見た次第である。 Windows PCの準備 コスパよくグラボを複数積むために、まずデスクトップWind
最近、Reactを触っているのだけど、Reactコンポーネント外から任意のReactコンポーネントを操作したい事情に駆られた（何を言ってるのか分からねぇと思うが俺も（ｒｙ）。 export default class Hoge extends Component { constructor(props) { super(props); this.state = { text: '' }; this.handleClick = this.handleClick.bind(this); } handleClick(e) { this.setState({ text: 'unko' }); } render() { ... } } 普通のケースだと、こんな感じでHogeのコンポーネントのどっかをクリックしたら、stateのtextにunkoをセットすることによって、renderがはしるみたいな、
ジムで走ってるときにスポーツ用のイヤホンが欲しかったのだ。Apple W1チップ搭載ということで、とてもシームレスにiPhoneと繋げることができ、ランニング中は安心してポッドキャストを聞いている。耳から外れることもなくだ。すごく満足している。 そういうわけで、同じBeats by Dre製品であるBeatsXにも興味を持ち始め、発売日に購入した。 Powerbeats 3も同じワイヤレスイヤホンだが、耳掛けがあったり電源ユニットがイヤーピース部分にあるので重く、疲れるため、普段使いのイヤホンが欲しかったのである。 率直に言えば、まぁまぁな印象。 BeatsXもApple W1チップを搭載にしているので、接続はスムーズだ。問題ない。 音質はQC20より良い感じがするが、バランスが良いと言えば聞こえはいいが、もう少し低音が強ければ良かった気がする。 オフィスではQC20を使い、朝と夕方の通勤
ずっと積読していたままだったが、弊社の人事や福利厚生がこの本から多くのことを取り入れているという記事を最近読んだので、手にとってみた。 メルカリがマネるGoogle採用の極意とは？ | 東洋経済オンライン Googleさんのおエライ人事さんが書いた書籍で、Googleが成長にするにつれての採用方法や会社の制度の変化について、詳細に書かれている。 前半の採用に関しては、さすがのGoogleさんで、採用までにかかったステップ数や時間、出身大学等あらゆるデータを精査し、それがよい人材を得るのに相関があったのか確認し、トライ・アンド・エラーを繰り返している。統計学とか心理学とか行動経済学とか、もう人事の枠超えてるんじゃねーの！って感じでただただ頭が下がる思い。後半は、入社してからの評価や育成、会社の福利厚生などについて書かれている。 読んでいると『それはGoogleだからできることでしょ！』と思っ
次のページ
このページを最初にブックマークしてみませんか？
『Koji Ishimoto - t32k.me』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
