Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
会話型UIの未来はハイブリッドインターフェースだ | POSTD
2016年は何もかもが会話型の年です。世界中でメッセージアプリの会話が飛び交い、アプリストアでの再訪率もエンゲージメント率も信じられないほど高くなっています。全てのコミュニティ、電子マーケット、オンデマンドサービス、デートアプリ、ソーシャルゲーム、eコマースの製品が、現在あるいは近い将来において、再訪、エンゲージメント、使用を急増させるエクスペリエンスの要素としてメッセージングの機能を持つでしょう。 こういう全てのアクティビティにともなって、会話型UIに関して多くの議論が重ねられてきました。また、単純なコマンドと、単純なレスポンス(多くはテキストですが、時には写真と組み合わされることもあります)において、人間とコンピュータのコミュニケーションのパターンでメッセージや音声のやり取りがどのように組み合わされるかを議論しました。私はテキストと写真が好きなことは好きなのですが、リッチでグラフィカル
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
スパマのスパムスクリプトを解析してみる : 難読化されたPHPスクリプトに挑む | POSTD
スパムを送るのに使われていたPHPスクリプトを見ていきましょう。こういった種類のスパムは世界中のサーバで走っており、あなたを困らせるスパマの熱意を見通せる力を得ることができるはずです。 スパマは、セキュリティ対策が施されていないWebサイトやアプリケーション内の既知の脆弱性を悪用してサーバに入り込み、大量のスパムを送ることができるスクリプトをインストールします。完全に信頼できる送信者であると確証するのは難しいという理由から、 全ての スパムを取り除くことは困難です。完全に強化されたサーバは、スイスチーズ、つまり後にいくつかのゼロデイ・エクスプロイトになりかねないのです。 評判がいいとは言えないソースからプラグインをインストールしたり、プラグインが最新状態に保たれていなかったりすることで、エクスプロイトが簡単に取り込まれてしまうということは、それなりに人気のあるWordPressのサイトを運
100Mにスケーリング：Key-ValueストアとしてMySQLを使い、NoSQL以上のパフォーマンスを出す | POSTD
100Mにスケーリング：Key-ValueストアとしてMySQLを使い、NoSQL以上のパフォーマンスを出す MySQLはNoSQLよりも優れています。Key-ValueストアといったNoSQLのユースケースを考えてみると、パフォーマンスや使いやすさ、安定性の点でMySQLの方が合理的です。MySQLには、オペレーションや障害に関することからレプリケーションや異なる使用パターンまでと、多くのオンラインマテリアルが用意されおり、堅実なエンジンです。こういった理由から、比較するまでもなく、MySQLは最近のNoSQLエンジンよりも優れていると言えます。 ここ最近では、NoSQLエンジンが主流になってきています。多くの開発者が、MongoDBやCassandra、Redis、HadoopといったNoSQLエンジンをアプリケーション構築の第一候補としており、それらが全て昔からのSQLエンジンを上回
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
難しいことを簡単に学ぶ方法 ― 強力なスキルを新たに身に着けるための3つのステップ | POSTD
ここ数年、私はWeb開発と機械学習の自習に多くの時間を割いてきました。 学習のテーマは、Javascript、Node、ReactからPython、scikit-learn、ニューラルネットワークに至るまで多岐にわたりましたが、全てに対して私は一貫したアプローチで取り組みました。 そのアプローチとは、単純な（陳腐と言ってもいい）3ステップで進める、という手法です。しかし、 Web開発のシロウトだった私が5カ月で、プロだと自覚できるほどになった のはひとえに、このアプローチで臨んだ自習の成果だと思っています。 そこで私は、この自習法がほかの誰かのお役に立てるかもしれないと思い、少し記事を書いてみることにしました。 この記事は、何も分からないままやみくもに挑戦を始めた、2012年当時の自分自身に教えるつもりで書いています。 ステップ1：習うより慣れろ 新しいテクノロジを学ぶためにまず実行する最
コーディングを学ぶこと、それはあなたが考えるよりも大変です | POSTD
要約：全ての根拠が示しているのは、「プログラミングには高い適性を要求されますが、適性を持った人間はわずかしかいない」ということです。最近の流行の短期でコーディングを学べるコースは、デマカセを売り付け、プロのプログラマのスキル不足解消に何ら力になってないのです。 これはイギリスからの観点での記事です。私はこの事象について、とりわけソフトウェア開発者の社会的地位に関しては、他の地域決してこの通りではないと思っています。 メディアが共通して取り上げるテーマは、スキルのあるプログラマの不足です（”プログラマ”も”コーダ”も”ソフトウェア開発者”も、ここでは全て同じものを意図し、区別せずに使用しています）。このコーディング技術のギャップには解決の糸口が見えない心配が多くあります。要は”明日の高品質な仕事”を担う候補者を生み出すことに失敗しているということです。例えば、 The Telegraph の
モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD
「Webサイトやアプリのナビゲーションに ハンバーガーメニュー を使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わされる、すばらしい議論や記事を目にする機会があります。 もし、ハンバーガーメニューの始まりや歴史が気になる場合は こちらの記事 をご覧いただくといいでしょう。 しかし、今回はハンバーガーメニューについて語る気はありません。この記事ではハンバーガーメニューの代わりとなり得る他のナビゲーションを模索し、その説明をしたいと考えています。 なぜこの記事でハンバーガーメニューを扱わないのでしょうか？ それは、ハンバーガーメニューは簡単で便利なソリューションであると同時に、以下に列記するような数多くの欠点を併せ持っていると、私が個人的に確信しているからです。 * 効率性の低下（インタラクションが遅くなる） * 視認性の低下（メニューが隠れる） * 不要アイテムの増加
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
本当に有意義なエラーメッセージを書くには | POSTD
想像してください。あなたは今、オフィスにいます。周りとは仕切られた個別スペースです。今週は、近々新たに展開する予定の製品を紹介するために多くの時間を割いてきました。疲れが溜まり、不機嫌ぎみになっています。今はようやく近づいた週末が待ち遠しくて仕方ありません。 しかしその前に、新製品を紹介するホームページがWindows 10で正常に動かくかどうかを試してみなければなりません。あなたは問題ないはずだと信じています。あなたが信頼を寄せているMacには、Windowsを問題なく実行できるソフトもインストールされています。 ソフトを起動してみると、丁寧にもWindowsがポップアップ通知で可能なアップデートがあることを知らせてくれます。もちろんアップデートを開始するため、あなたは了承します。 すると、こんなものを目にするのです。 訳：何かが発生しました。 何かが発生。 新製品の準備のため期限が迫っ
あなたと働くエンジニアの人生を最悪なものにしないために – デザイナーのための3つの提言 | POSTD
それとも、”私はデザイナーなので、そんなことを知る必要はありません”と言い張るのか 私の職業はデザイナーです。私はエンジニアが好きです。ちょっと度が過ぎるくらい好きかもしれません。以前、Facebookの グループ に参加した時、かなり前からチームのメンバであるiOSのエンジニアと初めて話して、口から泡を吹いたことを思い出します。私はその時、これまでに自分がObjective-Cでコーディングしたものについて、勢い込んで話し始めました。まるで、高校の新入生が、上流階級の生徒に対して、自分が付き合う価値のあるカッコいい人間だと証明しようとしているみたいだと感じました。 デザイナーの多くが、エンジニアとの話し合い方を実はよく分かっていないと思います。もちろん、デザイナーはエンジニアと話しますが、本当の意味で関わろうとしていません。この記事を書いた理由はそこにあります。ソフトウェアエンジニアの懸
30日間で300回のプログラミング面接をしてわかったこと | POSTD
プログラマの採用方法を改善するため、1カ月程前にTriplebyteを立ち上げました。昔から変わらず、履歴書、コードをホワイトボードに書かせるプログラミングテスト、そして直感など、これらを判断基準に面接を行う企業が多すぎます。私たちは、より良い採用方法について最初に考えたアイディアを マニフェスト に記しました。それから1カ月と少しが経過し、この30日間で、300回の面接を行いました。私たちはアイディアを実行に移し、どの方法が有効で、どの方法が有効ではないかを確認し、そのプロセスを繰り返すということを始めたのです。この投稿には、300回の面接を通して私たちが学んだことを書いていこうと思います。 投稿では、細かい内容についての説明が多くなりますが、キーとなる発見は以下の通りです。 私たちが作ったオンラインのプログラミングクイズの結果を見れば、高い確率でプログラミング面接の結果を予測できる。
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
シンプルの心理学 ― 心地良いデザインのために | POSTD
私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し
プログラマ能力指標表 | POSTD
2015年05月27日: 表が見にくいというご意見を頂いたため、原文著者に連絡のうえ体裁を修正しました。 上位のレベルには下位のレベルの知識も蓄積されているということに注意してください。つまり、レベル n であれば n より低いレベルの知識も全てあります。 コンピュータサイエンス データ構造
若手開発者の後悔 | POSTD
(編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) これはある仕事熱心な若手開発者のほぼ実話です。2004年の後半、この若手開発者は小さな会社で働き始めました。条件は全て彼の望みどおりでした。給料はいいし、扱うのは彼の得意とするプログラミング言語、アプローチの複雑性、モデリングのアーキテキチャでした。 彼にとって今回の会社が初めての職場ではありませんでした。しかし、ここでの最初のプロジェクトは結果的に 問題だらけ に終わりました。当時、この若手開発者は、機能は絶対に変わらないものだと思っていました。しかし、それは間違いでした。機能が変更されるたびに完全なリファクタリングを行わなければなりませんし、バグを引き起こして膨大な時間を無駄にしてしまいます。彼は、テストを書くといった実直な方法も試してみましたが、書いたテストはメンテナンスが必要な上、書くのに時間
優れたエンジニアを採用できないワケ | POSTD
あなたは技術者採用の面接が苦手ですね。そう、あなたですよ。間違ったスキルを探し求め、適正の無い人たちを採用して、自分自身と会社に悪い影響を与えているのです。応募者リストを見直さなくとも、今までとは違う人材を採用し、会社の業績を上げ、あなた自身も仕事をもっと楽しめるようになりますよ。 いささか大胆な物言いだということは承知しています。仕事での経験を積み面接を担当するようになってから10年、大小の企業の様々な部署で、技術者を雇うための数多くの面接をしてきました。採用する人材が会社に及ぼす影響についても見てきました。完璧な採用を目指せというつもりはありません。私自身がこれまで何度もしてきたあらゆる失敗をあなたが犯さなくても済むよう、お伝えしたいのです。私がこれまで学んできたことは次のようなことです。 誤った判断基準 1. 応募者の現時点の知識に基づいて採用しない 面接で犯しがちな最初の間違いは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページネーションのベストプラクティス | POSTD