10月7日、TiltShiftGenerator などのiPhoneアプリで有名な、fladdict 深津貴之氏の講演会に行ってきました。 テーマは「使いやすいUIをつくる基本」。 聴衆の割合はエンジニア1/3、デザイナー1/3、ディレクターまたは経営者1/3でした。その場での挙手のアンケートにより「UIの手触り」「プロトタイピング」に重きをおいて話していただくことになりました。 以下、講演メモです。 確実に失敗できる10個のテクニック はじめは「こうすれば確実にプロジェクトに失敗しますよ」というお話。 裏返すと、「こうすれば成功できる10個のテクニック」ということになります。 ＜確実に失敗できる10個のテクニック＞ 1. リサーチなしにつくる そもそも需要はあるのか？競合は？技術は？ 2. 利用シーンを考えない 3. 競合製品の劣化コピーをつくる 買う理由がない、市場飽和、アップデートの

iOS 7から搭載された新機能「iBeacon」。このiBeaconを使ってアプリを作るエンジニアも少なくないのではないでしょうか。 そこで今回はヤフーでiOSアプリを開発している羽田さんに、iBeaconに関する基礎的な部分からサービス設計、サービス事例などについて、解説していただきました。 by 馬場美由紀 （CodeIQ中の人） ちゃんと理解してますか？Appleの新技術「iBeacon」 ヤフー羽田です。 登場から時間も経ち、サービス化されたり、アプリ化されることも珍しくなくなったiBeacon。 そんな今だからこそiOSに携わる企画者・エンジニアとして「知っておかなければいけないこと」が多々あります。 今回は基礎的な部分からサービス設計を含めたiBeaconに関してエンジニアと企画者が、絶対＋最低限知っておくべきことを紹介します。 この記事で学ぶこと iBeaconに関する以下の

続いてrootに関する設定を行います。 以下ではrootになれるユーザーおよびsudoコマンドの実行ユーザーの設定を行っています。 # vim /etc/pam.d/su # 以下の行のコメントを外す auth required pam_wheel.so use_uid # visudo # 以下の行のコメントを外す %wheel ALL=(ALL) ALL

オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は

TL;DR MVCもレイヤで捉えて関係性の設計をするといいのでは 普通のRubyオブジェクトを積極的に使いたいですね 「パーフェクト Rails」に期待しましょう 長くなって面倒くさくなり、途中から手抜き感が半端ないですが許してください この記事の位置付けなど 7 Patterns to Refactor Fat ActiveRecord Models - Code Climate Blog [翻訳] エリック・エヴァンスのドメイン駆動設計 エンタープライズ アプリケーションアーキテクチャパターン これらの参考文献を踏まえてRailsアプリケーションのリファクタリングをしていて、だいぶ方向性や考え方がまとまってきたので、これからチームに合流する人を想定読者に、Qiitaがどんな感じで作られているのかを文書化したものです。（参考文献の一覧は記事の最後にあります） 内容的には文献[2,3]を踏

フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発

All slide content and descriptions are owned by their creators.

背景を止められない不自由なインターネット - hitode909の日記という記事で最近のブラウザはJavaScript切る程度のことも簡単にできねーから残念だよねーうんこちんちん、的な話が展開されていたのが記憶に新しいけれど、実はChromeに限って言えば、超簡単にJavaScriptを無効化することができる。UserScriptとかもいらない。 設定はたったの3クリック。アドレスバーの左端に表示されているアイコンをクリック→Javascript:→このサイトでは常にブロック、これだけ。設定を反映するためにリロード必要なのがちょっと惜しい。 設定はサブドメイン単位で保存されるっぽいので、影響範囲もほどよく限定されて使い勝手が良い。 えー君たちこんなことも知らないのぉ？(ﾄﾞﾔｧ)的な感じでお送りしたけど、実際知ったのは10分前だし、前はこんなのなかったような気もしたけど、どうやら2012年

HTTPS通信は複数のプロトコル、手法が組み合わされて実現されている。そのため、暗号化手法それぞれのリスク、ブラウザの対応等様々な用件があり、全てを理解するにはちょっと時間とリソースが足りない。結局のところ、我々はどのようにして安全なHTTPS通信を提供できるのか。色々調べていたところ、MozillaがMozilla Web siteに使用する、HTTPSの推奨設定を公開している。 Security/Server Side TLS - MozillaWiki このドキュメントはMozillaのサーバ運用チームが、Mozillaのサイトをより安全にするために公開しているもので、他のサイトにそのまま適用できるかは十分に注意する必要がある。例えばガラケー向けサイトとか。そのまま使えないとしても、HTTPS通信の設定をどうすれば良いか、理解の一助になるはずだ。 この記事は上記MozillaWiki

世間一般では、SIerは非効率、プログラマのスキルが酷い、ガラパゴス化している等、評判が悪く袋叩きにあっているようです。実際にはグローバル水準で戦える高スキル者はいるし、特に某親会社の人達はみな頭の回転が速いし、志が高いです。 一方で私の5年そこそこの短い経験の中でも、世間の評判通り、開発現場の信じられないような体たらくっぷりをたくさん見てきました。すごく立派な看板の裏でのしょぼい設計実装、ミス等 etc... (私も人のことを言えないですが・・・) そこで、私の見える範囲の世界で、どうしてこのような現状なのか考えてみました。 (私の見える範囲なので、他社だと全く状況は違うだろうし、他者には違った世界が見えているかもしれません。) SIerの問題点1. 技術力向上のインセンティブが少ない 恐らく最大の原因はこれではないかと思います。要するに、必死に技術力を磨くインセンティブが乏しいのです。

こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/

先月は東京、そして今月は大阪 で、クリーク・アンド・リバー社が主催する Web ディレクター向けのセミナーで登壇しました。私自身、Web ディレクターと名乗っていないので、依頼を受けたときは半信半疑でした。しかし、Web ディレクターをはじめとした「作り出す人」にある共通の話題があると考え、登壇を決めました。 点をどのように線にするか ツールの使い方。マークアップの仕方。コードの管理方法。ペルソナの作り方。コンセプトを固めるためのワークショップの仕方 … などなど。こうした行程の中にある『点（作業）』は、書籍や Web でたくさん見つけることができます。どれも重要ですが、行程全体からみたとき、その手法がどのような意味を持っていて、それを基にどうゴールに向かって走れば良いのか見えないことがあります。 点は理解できたけど、それをどう線にしたら良いか分からないわけです。 例えば社内ワークショップ

どうもです。 今回CSS3で実装されたCreative Button Styleエフェクトが素敵だったのでjQueryで再現してみました。 実装の仕方をご紹介いたします✌(´ʘ‿ʘ｀)✌ HTMLとCSSの準備 今回jQueryで実装するために修正をいたしました( ˘ω˘) HTML HTMLは参考サイトをそのまま使用します( ˘ω˘) <button class="btn btn-1 btn-1b">Button</button> CSS CSS3独自のtransition要素を削除して、ホバーはjsで実装するため削除をしました。( ˘ω˘) 参照元 .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; paddin

Xcodeの便利ツールとかじゃなくて、Xcodeを触る上で知っておいたほうが有利なこと これからも追加してく Double Click Navigation 誰か１度はやるかもしれない Xcodeを起動したらToolbarもAssistant Editorもない、この画面 まさに絶望、やる気をすべて奪う悪魔のウィンドウ 原因はProject Navigatorのファイルをダブルクリックで新しいウィンドウを開いたままXcodeを閉じてしまうこと。 解決にはPrefarence... > Navigation > Double Click NavigationをUses Separate Tabにすること これで、ファイルをダブルクリックしたときは、タブで表示される。 ショートカット 私がよく使うのだけ、他にもいくつかあるけど 編集 Esc 補完機能の呼び出し Cmd + / コメントアウト（

Vue.jsとは Vue.js is a library for building interactive web interfaces. It provides data-driven components with a simple and flexible API. vue.js フォームの操作に合わせてJS側のデータを操作する。JS側のデータ操作の結果をHTMLのあちこちに反映させる。 Vue.jsはこの手の頻発する処理……いわゆるデータバインディングをとても簡単に出来るようにしてくれる。 ざっくり言うと、KnockoutとかAngularJSをよりシンプルにした感じ。 Vue.jsの利点 シンプルなAPIでデータバインディングが実現出来る 学習コストがとても少ない 覚えた所から部分的に使うことが可能 他のプラグインと組み合わせが容易 古いIEを捨てた代わりにシンプルになってる 古

TypeScript本の5章ではコンパイル後のJSファイルを読めるようにJavaScriptの仕様について解説されています。 Object.defineProperty()というメソッド、ご存知でしょうか。 このメソッドは主に書き換え不可能なオブジェクトプロパティを定義するため使います。 これ、今まで知りませんでした・・ ってことで、ここらへんをサイ本を見ながら復習してみます。 Object.defineProperty()とは ECMAScript5からオブジェクトのプロパティに、値以外にある設定を付与することができるようになっています。 設定というのは、 書き込み可能か 列挙可能か 再定義可能か という情報になります。 Chromeのコンソールに以下のコードを貼り付けて実行すると、このような結果が得られます。 // これを貼り付けると Object.getOwnPropertyDesc

2014年5月20日 著 少し前の記事ですが、日経BPコンサルティングスタッフルームに掲載された年寄りを困らせる「レスポンシブWebデザイン」を読んでの感想。確かに、レスポンシブWebデザイン（以下「RWD」）のユーザビリティ上の問題点について指摘はしているものの、その問題点は本当に高齢者に特有のものなのだろうか？　そして、記事中で紹介されている東北大学の対応策は本当に利用者の使い勝手を考えてきちんと吟味し、改善策を実践した結果なのだろうか？　などと疑問に思いました。 RWDを採用した場合、Webページがブラウザの拡大機能に反応してしまうとか、スマホでアクセスすると強制的にスマホ向けのレイアウトで表示されるのは、事実です。しかしいずれも、利用者が高齢者であろうとなかろうと同じ。結局のところ、記憶のなかにある慣れ親しんだレイアウトを頼りに、複数の異なるスクリーンサイズ間で自身の必要とする情報

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント