タグ

ブックマーク / postd.cc (42)

  • 「フロントエンド開発者」の終焉 | POSTD

    元記事の著者より:この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます(答えは相手によって変わることもあります)。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです(これに関しては、後に詳しく説明します)。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな

    「フロントエンド開発者」の終焉 | POSTD
  • モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD

    「Webサイトやアプリのナビゲーションに ハンバーガーメニュー を使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わされる、すばらしい議論や記事を目にする機会があります。 もし、ハンバーガーメニューの始まりや歴史が気になる場合は こちらの記事 をご覧いただくといいでしょう。 しかし、今回はハンバーガーメニューについて語る気はありません。この記事ではハンバーガーメニューの代わりとなり得る他のナビゲーションを模索し、その説明をしたいと考えています。 なぜこの記事でハンバーガーメニューを扱わないのでしょうか? それは、ハンバーガーメニューは簡単で便利なソリューションであると同時に、以下に列記するような数多くの欠点を併せ持っていると、私が個人的に確信しているからです。 * 効率性の低下(インタラクションが遅くなる) * 視認性の低下(メニューが隠れる) * 不要アイテムの増加

    モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD
  • 会話型UIの未来はハイブリッドインターフェースだ | POSTD

    2016年は何もかもが会話型の年です。世界中でメッセージアプリの会話が飛び交い、アプリストアでの再訪率もエンゲージメント率も信じられないほど高くなっています。全てのコミュニティ、電子マーケット、オンデマンドサービス、デートアプリ、ソーシャルゲーム、eコマースの製品が、現在あるいは近い将来において、再訪、エンゲージメント、使用を急増させるエクスペリエンスの要素としてメッセージングの機能を持つでしょう。 こういう全てのアクティビティにともなって、会話型UIに関して多くの議論が重ねられてきました。また、単純なコマンドと、単純なレスポンス(多くはテキストですが、時には写真と組み合わされることもあります)において、人間とコンピュータのコミュニケーションのパターンでメッセージや音声のやり取りがどのように組み合わされるかを議論しました。私はテキストと写真が好きなことは好きなのですが、リッチでグラフィカル

    会話型UIの未来はハイブリッドインターフェースだ | POSTD
  • 効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD

    画像の出典:form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測(アイトラッキング)、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け

    効果的なフォームをデザインする:構造、入力、ラベルおよびアクション | POSTD
  • ページネーションのベストプラクティス | POSTD

  • Gopherの道を歩む – Node.jsからGo言語への移行 | POSTD

    私は大学時代に、興味位でJavaScriptを始めて、それ以来ウェブページを幾つか作成してきました。JavaScriptは常にC言語やJavaの合間の楽しい息抜きでしたが、アニメーションや、ユーザをあっと言わせるようなちょっとしたことを提供するといった、特殊な目的にかなり限られた言語だと考えていました。JavaScriptは覚えやすく、開発者に具体的な結果をすぐにもたらしてくれるので、コーディングする方法を学びたいと思っている人に私が教えた最初の言語でした。JavaScriptHTMLCSSを少し組み合わせれば、ウェブページが出来上がります。プログラミング初心者には喜ばれます。 その後、あることが2年前に起こりました。当時、私は、主にサーバーサイドのコードとAndroid用のアプリのプロトタイプに取り組む研究職に近い立場にいました。すぐにNode.jsの存在が目に留まりました。バック

    Gopherの道を歩む – Node.jsからGo言語への移行 | POSTD
  • 生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD

    (編注:2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項: 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpackreact-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか?大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で

    生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
  • 倒産した技術系スタートアップ企業から学ぶ7つの教訓 | POSTD

    多くのGoogle社員と同様、私は起業したくてたまりませんでした。Googleで働くのは名誉なことで、大きなメリットがありましたが、”これ”という決定的な何かが欠けていたのです。 私たちの多くは”あの偉業”を成し遂げた”あの人物”と呼ばれたいと思っていますが、既に定評のあるテクノロジ大企業で、そういった人物になるのは不可能です。 その原動力がどこから来るのかは誰にも分かりませんが、私は多くの人々が自分と同じ気持ちを抱いていることを知っています。私はその欲求を満たすために、会社を設立せざるを得なかったのです。 スタートアップでは資産のほとんどは経営陣が持っていて従業員は持ち分が少なすぎると書かれた文章を読んで、がくぜんとしました。それで自分の会社を設立する決心をしたのです。まず、共同創業者と私は、2012年2月頃に仕事を辞めました。私たちには大した計画はありませんでした。取り組もうとしている

    倒産した技術系スタートアップ企業から学ぶ7つの教訓 | POSTD
  • Amazon AWSでユーザ数1100万以上にスケーリングするためのビギナーズ・ガイド | POSTD

    あるシステムを、1人のユーザから1100万人以上にスケーリングするにはどのようにすれば良いのでしょうか。Amazonのウェブサービスソリューションアーキテクトである Joel Williams が AWS re: Invent 2015 Scaling Up to Your First 10 Million Users でスケーリング方法について素晴らしいプレゼンをしています。 AWS上級者のユーザには適さないプレゼンですが、AWS初心者やクラウド初心者、Amazonが次々と送り出す新機能の流れについていけていない人が始めるには素晴らしい内容だと思います。 おおよその見当は付いていると思いますが、このプレゼンはAmazonによって提供されているため、どの問題についても解決策として提案されているものは全てAmazonのサービスになります。amazonのプラットフォームの役割は、印象深く、分か

    Amazon AWSでユーザ数1100万以上にスケーリングするためのビギナーズ・ガイド | POSTD
  • バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD

    (訳注:2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひも読んでみてください。また、FacebookやTwitterSlackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか? 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか? もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです

    バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
  • Rubyにはウンザリ!動的型付け、副作用、およびオブジェクト指向プログラミング全般からの考察 | POSTD

    この記事を書き上げるには、相当長い時間がかかりました。来は今年の年明け、 Rubyの死 やデイヴィッド・ハイネマイヤー・ハンソンの TDDは死んだ がアップされて騒ぎになる前に投稿するつもりだったのです。昨年末に書いたツイートを見てください。 > Rubyにはもう飽き飽きした。理由はいろいろあるが、特にその副作用と、ステータスが可変なせいで大量のユニットテストを書かされるのにはウンザリだ。 @abevoelker Rubyの開発に関しては、大勢の人が心のどこかで何かおかしい、何かが欠けていると思っているようですが、たいていの人は責める対象を間違っています。Rubyで書いたアプリがとんでもない代物になったって? それはあなたがきちんとテストコードを書かなかったか、テスト駆動開発(TDD)の指針に則って開発しなかったからです。もしくは、正しいデザインパターンに切り分けるための知識が不足してい

    Rubyにはウンザリ!動的型付け、副作用、およびオブジェクト指向プログラミング全般からの考察 | POSTD
  • HTTPステータスコードを適切に選ぶためのフローチャート : 難しく考えるのをやめよう | POSTD

    HTTPステータスコードを返すというのはとても単純なことです。ページがレンダリングできた?よし、それなら 200 を返しましょう。ページが存在しない?それなら 404 です。他のページにユーザをリダイレクトしたい? 302 、あるいは 301 かもしれません。 I like to imagine that HTTP status codes are like CB 10 codes. "Breaker breaker, this is White Chocolate Thunder. We've got a 200 OK here." — Aaron Patterson (@tenderlove) 2015, 10月 7 訳:HTTPのステータスコードのことは、市民ラジオの10コードみたいなものだと考えるのが好きです。「ブレーカー、ブレーカー、こちらホワイト・チョコレート・サンダー。200

    HTTPステータスコードを適切に選ぶためのフローチャート : 難しく考えるのをやめよう | POSTD
    mut00tum
    mut00tum 2016/02/18
    ステータスコード
  • Node.jsのセキュリティ・チェックリスト | POSTD

    (訳注:2016/1/5、いただいた翻訳フィードバックを元に記事を修正いたしました。) セキュリティ – 誰もが見て見ぬふりをする問題 。セキュリティが重要だということは、誰もが認識していると思いますが、真剣にとらえている人は少数だと思います。我々、RisingStackは、皆さんに正しいセキュリティチェックを行っていただきたいと考え、チェックリストを用意しました。皆さんのアプリケーションが何千人というユーザやお客様に使用される前にセキュリティチェックを行ってください。 ここに挙げたリストのほとんどは概略的なもので、Node.jsに限らず、全ての言語やフレームワークに適用することができます。ただし、いくつのツールは、Node.js固有のものとなりますので、ご了承ください。 Node.jsセキュリティ に関するブログ記事も投稿してありますので、こちらも是非読んでみてください。 構成管理 HT

    Node.jsのセキュリティ・チェックリスト | POSTD
  • Node.jsのコールバック地獄をPromiseやGeneratorを使って解消する | POSTD

    下のようなコードが、親しみをこめて「コールバック地獄」とか「死のピラミッド」とか呼ばれているのはご存じですよね。 doAsync1(function () { doAsync2(function () { doAsync3(function () { doAsync4(function () { }) }) }) この状態がコールバック地獄かどうかは、意見の分かれるところでしょう。ネストがいくら深くても全く問題がないコードもあるからです。非同期のコードでフロー管理ができないほど複雑になってしまった場合は悪夢ですが。自分のコードがどの程度”ひどい”状態に陥っているかを確認するには、こう自問してみてください。「 doAsync1 の前に doAsync2 が実行された場合、リファクタリングにどこまで労力がかけられるか」と。ここでのゴールはネストの階層を減らすことではなく、モジュール化された(も

    Node.jsのコールバック地獄をPromiseやGeneratorを使って解消する | POSTD
  • 関数型プログラマのためのRust | POSTD

    この投稿はEdward Z. Yangが2010年に書いた OCaml for Haskellers 、私自身が今年頭に書いた Haskell for OCaml programmers の流れに沿っています。 目次 プロローグ なぜRustを学ぶべきか 直接対応が可能なもの トレイト:Rustの型クラス アドホックなオブジェクトとメソッド 安全な参照 寿命と記憶域、そして管理オブジェクト オブジェクトの共有:RcとArc マクロとメタプログラミング リテラル 謝辞 参照 Copyright and licensing 注 : この記事の最新版は下記サイトで見られます。 http://science.raphael.poss.name/rust-for-functional-programmers.html 他のフォーマット: Source , PDF プロローグ C言語プログラマのための

    関数型プログラマのためのRust | POSTD
  • 難しいことを簡単に学ぶ方法 ― 強力なスキルを新たに身に着けるための3つのステップ | POSTD

    ここ数年、私はWeb開発と機械学習の自習に多くの時間を割いてきました。 学習のテーマは、Javascript、Node、ReactからPython、scikit-learn、ニューラルネットワークに至るまで多岐にわたりましたが、全てに対して私は一貫したアプローチで取り組みました。 そのアプローチとは、単純な(陳腐と言ってもいい)3ステップで進める、という手法です。しかし、 Web開発のシロウトだった私が5カ月で、プロだと自覚できるほどになった のはひとえに、このアプローチで臨んだ自習の成果だと思っています。 そこで私は、この自習法がほかの誰かのお役に立てるかもしれないと思い、少し記事を書いてみることにしました。 この記事は、何も分からないままやみくもに挑戦を始めた、2012年当時の自分自身に教えるつもりで書いています。 ステップ1:習うより慣れろ 新しいテクノロジを学ぶためにまず実行する最

    難しいことを簡単に学ぶ方法 ― 強力なスキルを新たに身に着けるための3つのステップ | POSTD
  • WebSocketには注意が必要 | POSTD

    近い将来WebSocketがRailsで使用できるようになると聞くと、デベロッパはみんな舞い上がって興奮します。 しかし、 あなたのユーザは、あなたがWebSocketを使用しているかどうかなんて気にしません 。 ユーザは、”快適なリアルタイムWebアプリ”を求めている。 デベロッパは、”快適でビルドが簡単なリアルタイムWebアプリ”を求めている。 オペレーションは、”デプロイ、スケール、管理が簡単なリアルタイムWebアプリ”を求めている。 上記全ての要望をWebSocketがかなえてくれるのなら素晴らしいことですが、この実装の詳細は高いコストがかかります。 超高性能で全二重なクライアントとサーバ間の通信は、当に私たちに必要なのか? WebSocketは、クライアントに情報を配信するための簡単なAPIと、クライアントからWebサーバへ情報を送信するための簡単なAPIを提供します。 サーバ

    WebSocketには注意が必要 | POSTD
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
  • JavaScriptフレームワークのコストを考える | POSTD

    先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ!」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます!PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。(必要なら、 スライドも入手できま

    JavaScriptフレームワークのコストを考える | POSTD
  • オブジェクト指向UX | POSTD

    (注:2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス(以後UX)のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル(プロアメリカンフットボールの優勝決定戦)の日曜

    オブジェクト指向UX | POSTD