タグ

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

  • SVGアニメーションの現状 | POSTD

    SVGScalabe Vector Graphics)の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の(そして未来の)SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL(Syn

    SVGアニメーションの現状 | POSTD
  • オブジェクト指向UX | POSTD

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

    オブジェクト指向UX | POSTD
  • ワイヤーフレーム、モックアップ、プロトタイプの違いとは? | POSTD

    開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を当に理解しているでしょうか? ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか? まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し

    ワイヤーフレーム、モックアップ、プロトタイプの違いとは? | POSTD
  • ソフトウェアのための統計学 – 前編 | POSTD

    ソフトウェア開発の原点は可能性の追求であり、不可能を可能にすることです。ひとたび ソフトウェア が開発されると、エンジニアは次に 程度 という課題に向き合うことになります。企業向けのソフトウェアであれば、「速度はどれくらいか」と頻繁に問われ、「信頼性はどの程度か」という点が重視されます。 ソフトウェアのパフォーマンスに関する質問に答え、さらには正しい内容を語る上で欠かせないのが統計学です。 とはいえ、統計学について多くを語れる開発者はそうはいません。まさに数学と同じで、一般的なプロジェクトで統計学が話題に上ることなどないのです。では、新規にコーディングをしたり、古いコードのメンテナンスをしたりする合間に、手が空くのは誰でしょうか? エンジニアの方は、ぜひ時間を作ってください。近頃は、15分でも貴重な時間と言えるでしょうから、 こちらの記事をブックマークに追加 しておいてもいいでしょう。とに

    ソフトウェアのための統計学 – 前編 | POSTD
  • Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD

    Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、1つ1つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の1つに取り組んでいますが、React+Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React+Fluxの組み合わせ

    Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
  • CSS Variables(カスタムプロパティ): なぜ、関心を持つべきか? | POSTD

    (編注:2016/7/29、頂いたフィードバックを元に記事を修正いたしました。) CSS Variables、もっと正確に言うとCSSカスタムプロパティが、Chrome 49でサポートされました。CSS Variables は、CSSで値の繰り返しを減らすのに有効です。また、テーマの切り替えなどの実行中の強力なエフェクトや、将来のCSS機能をもしかすると拡張/ポリフィルすることにも役立ちます。 CSSの散乱 アプリケーションを設計するとき、アプリケーションの一貫した外観を維持するために再利用される独自のカラーセットを設定するのが一般的です。残念ながら、このようなカラー値をCSSに何度も何度も繰り返し設定することは面倒なだけでなく、エラーが発生しやすくなります。カラーを何カ所か変更する必要がある場合、思い切って、全部「検索して置換」することもできますが、大きなプロジェクトでは、危険な事態を招

    CSS Variables(カスタムプロパティ): なぜ、関心を持つべきか? | POSTD
  • CSSモジュール ― 明るい未来へようこそ | POSTD

    ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible(一歩先にある可能性) を探ることの一例であるのなら、Ch

    CSSモジュール ― 明るい未来へようこそ | POSTD
  • 1