デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
JavaScriptから即時関数を排除する - Qiita
即時関数は関数式で関数を作ったら、即時に実行する関数のことです1。JavaScriptでは有名なテクニックの一つですが、他の言語ではほとんど見かけません。まず始めに、なぜ即時関数が必要だったのかを説明し、そこからいかにして即時関数を取り除くかを考えます。 JavaScriptに即時関数が必要な理由 ES52以前のJavaScriptには次のような問題がありました。 グローバルスコープか関数スコープの変数しかない。 モジュールベースではない。 厳格モードへの切り替えが単なる文字列に過ぎない。 これを踏まえて、即時関数を使わざるを得ないところを見ていきます。 1. スクリプト全体を即時関数で囲む どんなプログラミング言語であれ、一つのファイルに全てを書いていくことは現実的ではありません。いずれJavaScriptを複数のファイルに分割して書いていく必要があるでしょう。そのとき、グローバル汚染が
2017年最新版！プロトタイピングツールのまとめ | Supership Tech Blog
Supership デザイナーの若林です。アプリやWebサイトのUI/UXに携わっています（と言っても3月入社の新人ほやほやです）。 最近プロトタイピングツールが増えていますが、実際どれが一番実務に適しているんだろう？と気になっていたところ、良い機会をいただいたのでデザイナー観点で実際に（ざっくり）触った感想と比較をしてみたいと思います。 代表的なツールと種類・トランジション型（遷移）：Prott、Adobe XD、inVision、CanvasFlip、Marvel ・インタラクション型（アニメーション）：Origami Studio、Framer ・複合型：CRAFT + inVision、protopie、Principle、flinto、atomic 大まかにこのような分類で上記のようなツールが代表的かと思います。現在、当チームでは主に「Sketch」でUI制作、「Prott」でプ
人工知能で配色パターンを自動生成したり写真から色を抽出したりしてカラーパレットを生成しまくることが可能な「Colormind」
By Valerie Hinojosa 人工知能を用いて自動で調和のとれた配色パターンのカラーパレットを生成したり、アップロードした写真から色を抽出してカラー-パレットを生成したりすることができるウェブサイトが「Colormind」です。デザインやイラスト、インテリアなど配色に困った時にさまざまなパターンを提案してくれる便利なサイトになっているので使ってみました。 Colormind - the smart color palette generator http://colormind.io/ トップページから「Generate」をクリックすると、ゼロからランダムで相性の良い5色がグラデーションになったカラーパレットが生成されます。 各カラーの下にはいくつかのアイコンがあります。錠前のアイコンをクリックすると気に入った色を固定でき、再度カラーパレットを生成すると他の色だけ生成されるように
マイクロサービスとは何か？ デジタル変革の時代を生き残るための、テクノロジー入門
社会の急激な変化・開発期間の単位が短くなる傾向から、注目されているソフトウェアのアーキテクチャが「マイクロサービス」です。日本でもLINEやクックパッド、Gunosyなどの人気サービスを抱えている企業がすでに取り入れています。 マイクロサービスとは？ モバイル、ソーシャル、IoT…。デジタルを中心として、ビジネス環境が劇的に変化しています。そのような中で、顧客の変化に気付き、ニーズを汲む姿勢が企業に求められています。 今までのように、全ての要件をかため、長い開発期間をかけてシステム開発を行う「ウォーターフォール」型手法では、この変化の流れに対応することが出来ません。このような状況下で、情報システム部門には、短い期間で繰り返し開発やテストを進める、「アジャイル開発」型でのプロジェクト進行が求められています。 そのような社会の急激な変化・開発期間の単位が短くなる傾向から、昨今注目されているソフ
就活によって虎にメタモルフォーゼしてしまった先輩の話
サークルの先輩になるが、就活中にいろいろと思い悩んだ結果、とうとう発狂して虎にメタモルフォーゼしてしまった男がいた。 彼は極めて優秀な男で、幼少期からご近所でも評判の秀才だった。 大学も一流国公立に現役合格。 なので、彼自身としてもエリート意識というか、周りの奴らとはひと味ちがうんだよなーみたいな気分があった。 そんな彼だったのだが、就活をしている最中に突如失踪し、そのまま行方不明になってしまったのである。 失踪の一年後。 飲み会帰りで酩酊状態にあったわたしは、軽くリバースしようと思って路傍の植え込みに近づいた。 すると、そこから一匹の虎が何の脈絡もなく登場。 虎はガオーとわたしを威嚇したので、ビビった。 しかし、そのガオーをよく聞いてみると、そこには往年の先輩を思い出させるような音色が多分に含有されていたため、わたしは勇気を出して話しかけてみた。 「すみません。ひょっとして、先輩じゃない
初学者としてJavaScriptを学ぶ | さにあらず
はじめに#僕が以前書いたModern JavaScript 概観、そして Electron へは、読んで貰えただろうか？ あれは初学者には全く向いてないエントリだ。 あのエントリは、僕の理解したモダンな JavaScript 全体について概観することを目的としているからね。 あれを読んで、「今の JavaScript ってこんなに大変なのか…」と感じた人は多いだろう。 しかし、ある程度のソフトウェアを開発するために技術全般を概観しようとすれば、ああいう分量になるのは致し方ない。 と言う訳で、今回はちゃんと初心者向けのエントリを書いた。 少し多く感じるかもしれないが、丁寧に説明しようとしたからだと好意的に解釈して欲しい。 開発環境#Thinkpad X1 Carbon 2016 年モデルに Windows10 をインストールしてある。 ハードウェアスペックは、こうだ。 CPU i7 6600
論文からポスターを自動生成 – Learning to Generate Posters of Scientific Papers
学会用のポスターを作るのが面倒くさいという科学者共通の悩みから生まれた、ある意味不真面目（？）な試み。 論文のテキストからコンテンツを抽出した後、各パネル要素（Abstruct, Conclusionなど）の大きさやアスペクトなどを、要素の文字数などを入力として学習済みのベイジアンネットワークに推論させて、読みやすいパネルレイアウトを自動生成することができるらしいです。 コンテンツ抽出後の全体の処理を、 ・大雑把なパネル要素の推定 ・パネルレイアウトの生成 ・各パネルの装飾 の3つに分けて、それぞれで違うアルゴリズムを使って学習させているのが肝みたいです。 下画像の真ん中のポスターが、このシステムで生成したポスターみたい。 下の2つ動画にある、漫画のレイアウトの自動生成の研究が先行研究らしく、こちらも面白いです！ Researchers often summarize their work
GUIアプリケーションアーキテクチャ総合！みたいなやつ書いてる - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く
最近はずっとJSでGUIを書くっていうお仕事をやっていて、その中で様々な知見が溜まってきてます。 そのときにひしひしと感じたんだけど、世の中にはさまざまなアプリケーション・アーキテクチャの話が溢れかえっていて、結構混乱を産んでいるように思います。 MVVMだけ見ても、「MVVMで実装しています」って主張しているものがMVVMパターンと違うパターンで実装されていたり、「軽量MVVM」なんて言葉が生まれていたりという状況があって、これはだいぶ混乱が極まっているぞ、と感じる状況です。 また「最近はClean Architectureが熱いらしい！MVVMを捨ててやってみよう！」とか言う発言を目にしたりして、「Clean ArchitectureとMVVMは矛盾しないからMVVMを捨てる必要はないんだよ！」って思ったりもするわけです。 そういう混乱の中にあるひと（それは知見を貯めるまえの自分のこと
デザイナーに届けたい…マテリアルデザイン事始め Part.2 - Qiita
今回はマテリアルデザインの主なコンポーネントについてです。 前回散々、UIパーツだの要素だの言ってきましたが、そいつらは実際どんなものがあるんだい？ってところを拾っていきます。 いつの日か「ここのUIってこんな感じもどうですかね？」「あー。確かにAndroidってこんな感じのUI多いよね。」「でしょー！」みたいな話ができるようになることを祈って、説明向け資料をまとめていきます。 Part.2 : マテリアルデザインのコンポーネント（小） 前回 Part.1 : マテリアルデザインの概観 次回 Part.3 : マテリアルデザインのコンポーネント（中） コンポーネントってなんなのさ？ 機器やソフトウェア、システムの構成する部品や要素のこと。 今回の場合は、マテリアルデザインを表現するための部品のこと。 コンポーネントを知ると何がいい？ デザインはコンポーネントをうまく組み合わせていくという作
オブジェクト指向って便利なの？ - JavaScript勉強会
プログラミングのやり方って、いろんな方法が考えられてきました。 何かを作るとき、ゼロから作るのは大変だけど、先人の努力や工夫を拝借して作ると、その分だけ楽ができますね！ プログラミングのやり方はまだまだ発展途上＝改善の余地があるんだろうけど、現状はどうなっているのでしょうか？ shokuren.hateblo.jp オブジェクト指向のやってることはわかるけど、説明してる人の何が言いたいのかはわからん 疑問が２つ。 一人で作ってて、小規模な案件なら、むしろ書く量が増えて面倒だったりしません？ なので、そうしないほうがいいこともある？というのが一つ。 腕が上がるとor効率化を図るといつの間にかオブジェクト指向になってるとか？が2つ目。 オブジェクト指向ってどうなのさ？ (1) オブジェクト指向プログラミングを使わない方が良い場合もあるの？ (2) オブジェクト指向プログラミングは効率化に役立っ
【Unity】知っておくと少し便利な Profiler に関する小技集 - テラシュールブログ
今回はプロファイラーの小技についてです。 プロファイラー小技集 CPUとGPUの使用時間を確認 表示する項目を増やす・減らす CPUプロファイラの表示項目を隠す CPUプロファイラの表示順を変更する 負荷のあるオブジェクトがドレかを確認する Timelineで表示する 選択項目に合わせてTimelineの範囲をズームする アセットを参照してるオブジェクトを探す Pforilerのプロファイリング内容をSave＆Loadする 関連 プロファイラー小技集 プロファイラーを使うとゲームのボトルネックになっている場所を探したり出来ます。 今回は、その機能に関しての幾つかの小技についてです。 tsubakit1.hateblo.jp CPUとGPUの使用時間を確認 CPU UsageとGPU Usageが出ている時に、CPUとGPUの使用時間が確認出来ます。 これが16.msを超えてたら60FPSを
Nuxt.js 公式ドキュメント翻訳完了のお知らせと、結城浩さんへの謝辞 - おいちゃんと呼ばれています
Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワークで、その公式ドキュメントの翻訳をはじめたのは 前回お伝えした とおり。 そして翻訳が完了し、昨日、日本語バージョンが公開されたのでアナウンス。 ja.nuxtjs.org Nuxt.js というレール 先日行われた Vue.js Tokyo v-meetup="#3" でも発表したんだけど、Nuxt.js は「レール」を用意してくれている。 これに乗れば、サーバーサイドレンダリングだけでなく、Vue-Router、Vuex、Vue-Meta など Vue.js 関連ライブラリとの統合を Nuxt.js がまとめて面倒みてくれる。したがって（本来やりたかったはずである）Vue コンポーネントの開発に集中することができる。 「レール」という言葉を使ったのは、かつて Rails にはじめて触れたときの感
ターミナルを録画する(ttyrec+ttygif(Go言語版)) | たくのこ Web
技術系ブログなどでコマンドラインの実行コマンドをキャプチャしてgifアニメーションにしてるような記事をよく見かける。 ↓こんな感じの あれ、カッコイイなーと思って調べてみたら、どうやらttyrecというものでできるそうなのでやってみた。 環境 MacOS X 10.10.5 Yosemiteターミナル バージョン2.5.3(343.7) iterm2じゃうまく動作しなかった… (これでむっちゃコケた… iterm2でもうまく動作してくれました！(2018.12.25) ttygif sugyan/ttygif を利用させていただきました． インストール # ttyrecは入力された文字を記録・再生するためのツール brew install ttyrec # 録画したttyファイルからgifアニメーションを生成するためのツール # go言語で作成されているため、goもインストールする。 br
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Goでヤフーの分散オブジェクトストレージを作った話 Go Conference 2017 Spring
Electronで、ファイル保存
monostudio.jp
4つのポイントと3つのステップで始める 仮説検証型デザイン
フォントの選び方・使い方