try! Swift Tokyo 2017 テスト系セッションまとめ #tryswiftconf - やらなイカ？
昨年に続き、3月2〜3日に開催されたtry! Swift Tokyo 2017に行ってきました。 テスト系のセッションが3つあったので、それらについてまとめます。 今年は海外からを含め700人を越える参加者があり、会場になったベルサール新宿セントラルパークの広いホールもこんな感じ（会場の2/3あたり後方から撮影）。 クックパッドアプリのテストを味わう - Tasting tests at Cookpad 初日、クックパッドの松尾さん(@Kazu_cocoa)の講演。全て英語でのプレゼンでした。すごい。 20170302 tryswift tasting_tests from Kazuaki Matsuo www.slideshare.net このセッションでは、UIのテストについて、UIのテストがクックパッドの開発をどうサポートしているかについて語られました。スライドには"Tests"とだ
Finder.js - Finder風UIを再現するJavaScript MOONGIFT
普段使い慣れたUI/UXであれば誰でもすぐに使えるようになります。そこで注目したいのがOSの動きです。OS標準のソフトウェアであれば誰もが使っていますので、そうしたインタフェースであれば違和感なく使いこなせるのではないでしょうか。 今回はMac OSXユーザであればお勧めなFinder.jsを紹介します。Mac OSXユーザも増えてきているので良いかもしれませんね。 Finder.jsの使い方 シンプルなFinder風のUIです。 フォルダをクリックするとドリルダウンできます。 階層の途中でもファイルをクリックすると、その情報が表示されます。 アイコンを追加したり、データをAjaxで取るようにもできます。 矢印キーで移動できるのでさくさく操作できます。 Finder.jsはフォルダ/ファイルに代表されるような階層構造のデータを表すのに便利です。大量のデータがあるとかえって見づらいこともあり
Bootstrapのレスポンシブなテーブルの列の幅を動的に変える - Qiita
やりたいこと Bootstrapのレスポンシブ対応のテーブルで列の幅を自分が決めた幅で動的に変えたい！ bootstrapのバージョン: 3系 使うHTML <div class="alt-table-responsive"> <table class="table"> <thead> <tr> <th>th1</th> <th>th2</th> <th>th3</th> </tr> </thead> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>ddd</td> <td>eee</td> <td>fff</td> </tr> </tbody> </table> </div>
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
Photon
The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why
デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - Qiita
ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文
選ばれるウェブデザインとは
東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見... 詳細を見る
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
公文書作成におけるカラーユニバーサルデザイン・ガイドラインの策定について
色は誰にでも同じように見えるものと思われがちですが、色の感じ方が一般と異なる方の中で一番多いいわゆる色弱者（色覚障害、色覚異常などとも呼ばれます。）は、日本では男性の20人に1人、女性の500人に1人、日本全体では300万人以上いるとされており、また、加齢に伴い、色覚機能が低下する人もあり、高齢化によりその数も増えていくと思われます。 近年、情報の高度化、技術の進展に伴い、見やすさ分かりやすさなどの観点から、刊行物や庁内資料において色による表現が多くなされているところですが、情報を伝達するためには、色による表現は重要である一方で、色の見え方の多様性に着目した「カラーユニバーサルデザイン」の考え方から、情報を確実に伝えるためには、色使い等に配慮した文書作りが必要になっています。 この度、総務局では、職員が紙等で公文書を作成する際の「色の使い方」や「グラフ作りのポイント」などについて、分かりや
iPhone & Android App Design: Developers Cheat Sheet [Infographic]
When you buy through affiliate links in our content, we may earn a commission at no extra cost to you. Learn how our funding model works. By using this website you agree to our terms and conditions and privacy policy. We uphold a strict editorial policy that focuses on factual accuracy, relevance, and impartiality. Our content, created by leading industry experts, is meticulously reviewed by a tea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome!
Flexbox Patterns
Bootstrap 3 truncate long text inside rows of a table in a responsive way
http://uipalette.net/
PCサイトのUIデザインにおける12のトレンド