2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
ばうあーろぐ IT / Web に関するメモ、あるいは Twentyfour あるいは人生の diff2024/06/29 Windows 11 のことを調べ出したら CPU/GPU のことを全然理解できてなかったことが分かった話techComputerGPU2024/06/07 Notion で一括置換する方法techNotion2024/04/21 Infinity Table を作ろう！techFabFusion3602024/03/28 Bluesky のシェアボタンをつけてみた！techBluesky2023/12/26 figma でフォントサイズやエフェクトがリサイズ対応出来なかったのが悩みだったtechfigma最新5件（tech）以外の記事は、下のカテゴリ一覧から探してね
読み込みのタイミングによっては外部 script のdocument.writeは無視される - HAKOBE blog ♨ なるほどなー、と思いながら上記記事を読んでた。 記事を読んでて JS の読み込み周りで気になることがあったので調べた。 DOM 操作で追加された script 要素のスクリプトはどのタイミングで実行されるのか? <!DOCTYPE html> <html> (略) <div id="js-insertion-point"></div> <script> var se = document.createElement("script"); se.src = "test.js"; var te = document.getElementById("js-insertion-point"); te.appendChild(se); </script> (略) 上記のような
はじめに 関数型といえばモナド、モナドといえば難しいという事が巷で言われていますが、いきなりモナドを理解しようとするから難しく思えるだけで、圏論から順序を追って理解していけば全然難しく無いんだよって事を分かって貰えればいいなぁと思い書いて見ることにしました。 ただ、圏論といっても適用範囲がとっても広く、応用編になると分けわかんなくなってくるので、ここではプログラミング分野に特化したFP(functional programing)圏論*1について書きます。 また、説明を簡単にする為に細かい部分をいろいろ省略しています。学術的な定義としては正確ではないので、このエントリの説明は大体合ってる位の気持ちで読んでくださいね。 尚、ぼくは圏論の詳しい事はさっぱり分からないので、学問的な話を振られても回答できませんｷﾘｯ 圏ってなんなの？ 圏論と言えば、圏です。 圏って何なのかというと、対象(obje
各JetBrains IDE製品の対応言語について複数のマシンにインストールすることは可能ですか？コマーシャル
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案
![[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/be8a85a78049a62f12c7fca35a7418bb8dcd8564/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.yoheim.net%2Fimage%2F217.jpg)
no title 久々にRails×初心者向けというテーマを設けて、ついでに発表してみました。 初心者向けブログ記事とかも多数あったりしますし、なるべく独自性のある内容を心がけてみたつもりです。 自分の経験談 初心者向けの話 Railsで仕事したい人向けの話 ＋αとしてテストと英語についての話 と4つのセクションで話してみましたが、対象の幅が広いため伝わりづらい部分もあるかもしれません…。あと思った以上に長く喋ってたみたいでそこも反省ですね＞＜ 補足とか Railsおすすめ書籍 インプレスブックス - 本、雑誌と関連Webサービス このページは存在しません 電子版を購入すると、開発中そのまま調べられたりコピペもできたりするのでいいと思います。 勉強会 Rails勉強会@東京 | Doorkeeper 自分もRails関連ではじめて参加した勉強会(月1開催) Page not found ·
3Dプログラミングの基礎知識(1) はじめに 主にiPhone/AndroidからOpenGL ESを使って3D表現を行う場合に必要となる基礎知識についてまとめていきたいと思います。 基礎の基礎から説明して行くため、言語や3Dライブラリ(DirectX/OpenGL)に依存しない情報が多くなります。OpenGLに限らず「C++ + DirectX」などの環境で開発を行う人もどうぞ。 内容 5回ぐらいに分けて以下のような内容を書いていきたいと思います。 モデルを構成する頂点情報、面情報 画面に描画されるまでの流れ、平行移動・回転・拡縮行列（ワールド変換） カメラ、Zバッファ 法線、ライティング 頂点シェーダ、ピクセルシェーダ（フラグメントシェーダ） 座標系 3D表現を行う為には3次元の座標系をどのように定義するか決める必要があります。 2Dの場合はX軸、Y軸で座標系を表しますが、3Dの場
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
閲覧上の注意 この記事で対象としているバージョン0.5.3は結構古いので注意してください。この記事でいえば、bindは無くなり、現在ではonやlistenToが使われています。 その他の割りと新しい情報は Backbone.js Advent Calendar 2012 などにあります。 （追記ここまで） ネタ切れ感が否めないBackbone.js Advent Calendarですが、今回から何回かに分けて懇切丁寧な入門記事を書いていこうと思います。 以下のように書き進めていく予定です。 Events View Model ViewとModelの連携 Collection ViewとModelとCollectionの連携 RouterとHistory なおここで扱うBackbone.jsのバージョンは0.5.3です。 #Backbone.js入門 「Events」 Backbone.js
IT用語って、何だかとっても難しそう…。この業界に入りたてのひとは、誰しもそう思うのではないでしょうか。 また、言葉としては知っているけど、何のことやらさっぱり…という方も、いらっしゃるのではないかと思います。 業務でそういったお話をさせていただく機会がありましたので、ブログ記事としてもまとめたいと思います:) 今回はWebサイトへのアクセス編。 難しい話はわからない…そういった方や、初心者さんに、読んでいただけたら幸いです:) この記事は、わかりやすさを最優先し、極力簡略化しています。 1.ブラウザ2.IPアドレス3.ドメイン4.DNSサーバ5.Webサイトに繋がる流れ 1.ブラウザ ブラウザとは、Webサイトを閲覧するときに使っているソフトウェアのことです。 ピンとこない方、今、この記事をご覧になられているソフトウェアが「ブラウザ」になります。 ブラウザにはいくつか種類があります。代表
jQueryを使っていると「なんだかもっさりするな。。。」と思う場合があります。こういう場合、書き方を見直す事で、かなり改善する場合があります。今回は「ちょっと高速化」を目標に書き方のポイントを紹介してきます。 ■ 要素選択の記述を見直す jQueryはセレクタやトラバースメソッドを使って要素を選択しますが、書き方によって大幅にパフォーマンスが上がる場合があります。 下記HTMLの中の「※ ここを見つける ※」というテキストを「■■■ 書き換えたよ ■■■」に入れ替えたい場合、どう書きますか？ <script> $(function(){ ○○○.text("■■■ 書き換えたよ ■■■"); }); </script> <div id="wrap"> <div id="content"> <h1>タイトル</h1> <p class="text">テキスト................
先日、仕事で作成しているページの動作が異様に重くなってしまいました。 そのページはjQueryをふんだんに盛り込んでUIをグリグリしているのですが、そのjQueryが重たい様子。 なのでjQueryのチューニングを初めて本気でやってみました。 その前に jQueryの高速化には、最新バージョンを使用する、jsファイルを圧縮する等々いろいろあるのですが、今回はセレクタに観点を絞って検証してみます。 検証する環境は以下のとおりです。 jQueryのバージョン：1.5.1（2011/3/6時点の最新バージョン） ブラウザ：Firefox3.6.15 検証方法 いろいろなパターンのセレクタを10000回ずつループさせます。 それに掛かる時間をFirefoxのアドオンFirebugのconsole APIを使用して計測します。 $(function()){ /* console.time
デザインには意味があります。物を配置するにしても、なぜそれを配置するのか？なぜその色味なのか？なぜそこに置くのか？など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真
最近何度かクライアントサイドMVCフレームワークであるところの、Backbone.jsを使ってコードをかいたりしていたので、その時に感じたことをまとめて Kyoto.js で話してみました。 発表資料 "何がMVCをつなげているのか" Backbone.jsではMVCの各層をつなげるために、Backbone.Eventsというオブジェクトが用意されています。Backbone.jsのModelとViewのインタラクションは、ベースになっているBackbone.EventsによるObserverパターンによって実現されています。実際にBackbone.jsでコードを書いてみると、便利な機能はいろいろあるもののBackbone.Eventsの存在がMVCを実現するのに重要であることがわかります。 そこつきつめると、Backbone.EventsのようなObserverパターンを簡単に実現できるよ
こんにちは、デザイナーの白浜です。 早速ですがみなさん、HDR合成（ハイダイナミックレンジ合成）という手法をご存知でしょうか？ ハイダイナミックレンジ合成（ハイダイナミックレンジごうせい、英語：high dynamic range imaging、略称：HDRI、HDR）、とは、通常の写真技法に比べてより幅広いダイナミックレンジを表現するための写真技法の一種。 出典: Wikipedia：ハイダイナミックレンジ合成 ってむずかしいことを言われてもなんのこっちゃわからないのでHDR合成で画像検索すると出てくるこういうやつです！ HDR合成：画像検索 超ざっくりいうと、明暗のコントラストが強い写真を撮る時、暗いところに露光を合わせると背景が飛んじゃう・・・、逆に空を綺麗に撮ろうすると手前の景色が真っ暗。そんな時に複数枚の露光の違う写真を合成して目で観た像に近い画像を合成する手法・・・て感じです
こんにちは、デザイナーの王です。 みなさんは写真やイラストを見たときに、「色使いうまいな！ どういう色構成をしているんだろう？」と思ったことがあるのではないでしょうか？ デザイナーなら誰しもそう思ったことはあると思います。 プロなら肉眼でもぴんとくるかもしれませんが、もっと正確に色構成を確認したい場合もあると思います。例えば、イラストなら最初から配色はできても、写真ではそれが難しいですよね。そこで色構成をチェックをすれば、より理想に近い配色に直すこともできるかもしれません。また、単に配色を確認して色使いを学ぶこともできますよね。 今回はそんな望みを簡単に叶えてくれる、Photoshopのあまり知られていないが意外と便利な機能をご紹介します。 やりかた 今回はこちらの写真を例に使います。 Step 1 「ファイル」から「web用に保存」を選択します。 ※ショートカットはcommand + a
以前にもMEMOPATCHで紹介した（「優れたアイコンデザイナーまとめ【Dribbble編】」）でも紹介したDribbble、ここに作品を投稿できるのは招待を受けた本当に優れたデザイナーだけです。現在Dribbbleに投稿できる日本人デザイナーは90名弱ほどいるのですが、その中で初めてDribbble投稿者（通称: プレイヤー）になったのが今回インタビューを引き受けてくださったのが、貫井伸隆氏。今回貫井氏にUIデザインについて色々伺ってみたいと思います。 元々はコーダーでサイトの動きを突き詰めいていくうちにUIデザインに出会った ーー貫井さんは日本人初のDribbblerということなのですが、そこに至るまでの経緯を教えいただけますか 中学校まではシェフやパティシエを目指していました。料理の立体造形や色味の美しさ、お皿とのバランスなどに興味があったんです。 その流れで高校は飲食の専門高校を受
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
