日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/
3行でまとめ 今週中にもES6が正式公開される予定 => 6/17に公開されました! 6/24発売のWEB+DB PRESS Vol.87にES6特集を書いたので読んでください! YAPCにEffective ES6というトークを応募したので、はてブ&Tweetお願いします! いよいよES6正式公開 今週というか今日6/17〜18にスイスのモントレーで開かれるEcma general assembly meetingを経てECMAScript 6*1がEcma標準として公開される予定!祝! => 6/17に無事正式公開されました! WEB+DB PRESSにES6特集書いた ES6正式公開に合わせて、今月6/24発売のWEB+DB PRESS Vol.87の第1特集でES6特集を書かせてもらった。 内容はこんな感じ。 第1章:ECMAScript 6とは何か: JavaScriptの新たな
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる(あくまで可能になるだけ) なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること(切っても良さそうなんだけど...) 既製品・スクラッチは問わないが極端なリスクは踏めない(納期がシビア) あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から) まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
今話題のマイクロサービス・アーキテクチャについて、本格的に実践中のビズリーチさんに聞いてみた! 馬場 美由紀(HTML5 Experts.jp編集部) 巨大化・複雑化したモノリシックなアプリケーション開発から、サービスを小さい単位に分割し、開発のスピードを上げようとするマイクロサービスが注目されています。アプリ開発のアーキテクチャとして関心はあるのものの、実際にはどのようなメリット・デメリットがあるのかは気になるところ。 そこで、マイクロサービスアーキテクチャを採用して新サービスをリリースしたという株式会社ビズリーチ・CTO室チーフアーキテクトの竹添直樹さんに、お話を伺ってきました。 聞き手は、HTML5 Experts.jp編集部・岩瀬義昌(@iwashi86)さん、HTML5 Experts.jp編集長・白石俊平さんです。 そもそもマイクロサービスって何ですか? 岩瀬:そもそもマイクロ
The document discusses various JavaScript tools and techniques. It covers topics like transpilers like CoffeeScript and Babel, module bundlers like Browserify, task runners like Grunt and Gulp, linting with ESLint, unit testing with Mocha and Assertions, MV patterns like Flux, and components with React. It provides links to documentation and resources for learning more about each topic.Read less
先日、サンフランシスコで行われたUX Survival Guidesに行ってきました。10年以上シリコンバレーでUXデザイナーをしているJoe Prestonから最近のUXトレンド、プリンシパルに関するショートトークを聞くことが出来たので紹介します。(次回はプリンシパルについて書きます) https://www.youtube.com/watch?v=NEKvlVYR0SM&index=5&list=PLGkDzKLOoQkk2VaE_QDnE7h4FKlDbJF4Rミニマリゼーションとも呼びます。私たちがデザインを始めた90年代と比べて、非常に変化してきている流れの一つです。 背景、グラデーションや影、線、ラベル、、すべてのものを取り去ることが美しいデザインと考えられるようになっています。例えばグラフはこのようになります。
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Ansibleを使ってVPS作成後の初期作業を自動化する。 Just Plain Trippy by One-Speed PhotographyThe moving walkway separating the National Gallery of Art’s East and West buildings. Washington D.C. View On Black Ansibleとは? Ansibleはサーバ構築やアプリケショーンのデプロイを自動化するためのツールでAnsibleWorks社によってOSSとして提供されている。 Ansibleでは管理対象ホストをManaged Node、管理する側のホストをControl Machineと呼び、Control MachineからManaged Nodeへsshを通じて処理を行うPush型アーキテクチャを採用している。 Control
Update 2015/5/8: 指摘頂いたタイポや誤訳などを更新しました。 2015/5/8: 構成を一部修正しました。 Intro 4/30 mozaiila のセキュリティブログに下記のようなエントリが投稿されました。 Deprecating Non-Secure HTTP | Mozilla Security Blog エントリはそこまで長くないので、ここに翻訳の全文を記載します。 そして、元エントリのライセンスである CC BY-SA 3.0 に則り、 本エントリも同じく CC BY-SA 3.0 とします。 Deprecating Non-Secure HTTP 原文: Deprecating Non-Secure HTTP 今日は、 non-secure な HTTP から、徐々に廃止していくという方針についてアナウンスします。 HTTPS が Web を前進させる手段である
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは? callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数(メソッド)を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Tom Genoni. Tom built an open source Chrome Extension for analyzing CSS. I’ll let him introduce it. It’s a new web project. You’re starting from scratch. The front end is going to be clean and orderly. You’ve set your defaults. Your CSS files are organized. Y
本記事は2015年1月に開催されたHTML5 Conferenceでお話させていただいた、 「Beyond CSS Architecture」というCSS設計のセッションをフォローアップする記事です。 本記事では、このセッションの概要と補足、またセッション中に説明できなかった点などについて書いていきます。 ※当日のセッションの動画・スライドも公開されているので、文末からご覧ください。 CSSの難しさと、昨今のCSS設計事情 この近年、CSSにおける設計論というのが話題に出てくるようになりました。筆者も拙著『Web制作者のためのCSS設計の教科書』を書いたり、各地でCSS設計をテーマとした講演をする機会が多くありました。 CSSの難しさというのは、石本氏によるCSSコードの評価についての記事にも書かれているのですが、CSSは良くも悪くも厳格なコード規約は少なく、ただ宣言的に書けばいいだけです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く