UXデザインの専門家でない人向けに、何をどうするとUXデザインになるのか、なんのためにやるのかを、ちょー乱暴に解説したスライドです。まだこれ自体が模索中であり、本当におかんが見たら意味がわからないこと請け合い。今後のバージョンアップが期待されます。なお、スライド中の解説について、深く知りたい場合はそれぞれ別個にぐぐるなり何なりして頑張ってください。 (本バージョンはv0.2 CSS Nite Editionです。CSS Nite LP33 Resriseで発表いたしました)Read less

PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得

WebRTC Meetup Tokyo #3の発表資料です。 WebRTCを支えるマイナーなプロトコル�SRTP/DTLS/SCTPを分かった気になる資料です。 P.38 誤記 Under the food -> hood です。 P.43 誤記 DLTS -> DTLSです

ブロックスコープを作る構文をちゃんと性能比較してみました。 ブロック構文の性能比較 前回の記事で書いたcreateScope関数もセットにしました。 function createScope(prev) { var newScope, Scope=createScope.Scope; if (prev instanceof Object) { Scope.prototype = prev; newScope = new Scope; newScope.__outer__ = prev; return newScope; } else { Scope.prototype = null; return new Scope; } } createScope.Scope = function(){ this.my = this }; ひとまずFirefoxでの測定結果をのせます。 ブロック自体の生

デジタルハリウッドSTUDIO by LIG（通称：デジLIG）は弊社LIGとデジタルハリウッドが業務提携し運営しているWebクリエイタースクールです。9万人以上のクリエイターを輩出する社会人向けプロ養成クリエイティブスクール・デジタルハリウッドのカリキュラムを提供します。

BrowserSync livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。 使い方 npmでインストール $ npm install -g browser-sync 手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、 $ browser-sync start --server --files "*.html, css/*css" で、ポート3000番で起動しブラウザ開く。地味に嬉しかったのは3000番が既に使用済みの場合は3001番で起動する（確認してないが多分その後もカウントアップしていき空いてるポート番号で起動するはず） プロキシも--proxyオプションでプロキシしたいホスト名指定するだけなのですごい楽 $ browser-sync start --proxy "プロキシしたいホスト名" --f

新しいWebサービスを作ろうと思った時にはまずデザインにこだわりたいでしょう。最近ではスマートフォン、タブレットデバイスのサポートもあってデザインはさらに複雑になっています。これまでのデザインテンプレートでは対応できない場合も多いでしょう。 そこで使ってみたいのがHTML5、レスポンシブWebデザインに対応したテンプレートです。特にHTML5 UP!ではカスタマイズも考慮された多彩なテンプレートが公開されています。 HTML5 UP!の主なテンプレート HTML5 UP!では全部で21種類のテンプレートが登録されています。今回はその中から幾つか紹介します。 こちらは画面全体に表示されます。スクロールなしです。 Twentyというテンプレートです。 基本的に文字とアイコンなのでカスタマイズが容易です。 こういうのも使いどころが多そうですよね。 フッターにはアイコンも。 minimaxing。

アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i

こんにちは。西山です。 毎日続く炎天と夕方に来襲する豪雨で夏らしさが一気に全開になりましたね。 今回はデプロイツール「Rocketeer」についてご紹介したいと思います。 これは GitHub上で公開されているオープンソースソフトウェア (OSS) です。リポジトリは https://github.com/Anahkiasen/rocketeer にあります。ライセンスは MIT です。 デプロイツールというと、以前の現場で Capistrano を使っていたのですが、これは Ruby 製ですね。 Rocketeer は Capistrano に似た構成を持つ PHP 製のソフトウェアです。普段、PHP の案件に関わることが多いのですが、デプロイツールも同じ PHP で書かれていたほうが安心感（？）がありますよね。 また、Composer や PHPUnit の実行にもデフォルトで対応

近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの

昨日、天下一クライアントサイドJS MV*フレームワーク武道会で話してきた。 以下、そのスライドです。 今日は 自分が現場で使ってきた FWの変遷の軽ーい話をする 元々 Marionette.j... Read more >>

よしこです。 最近転職しまして、7月からアシアル株式会社で働いています。 ちょうど1ヶ月経ったので、ご報告（してなかった）と、入社して初めて触れたものが多かったので振り返りなんてしてみようかなと思いました。 経緯 自分がWebエンジニアとして今後どこを得意分野にしていきたいか、というのは結構ずっと悩んでいました。 サーバーサイドもフロントエンドも浅く広くやっていて、どっちも好きだったので、その中でどこを掘り下げていこうかなーと。 そんなときに、たまたま作って公開したシングルページのポートフォリオサイトへ思わぬ量の反響をいただきまして、かっこいいって言ってもらえたりしてすごく嬉しくて、その嬉しさから、あー自分フロントエンドが合ってるのかもなー、ってなんとなく気持ちを固めることができました。 アシアルのことは技術的なこと調べるときにアシアルブログの記事がよく出てきてたので知って、技術好きな人が

日々誕生しているwebサービス。現在では、どのようなサービスがあるのかわからないくらい膨大な数になっています。そのため、このサービスはどんな機能を持っていて、どのサービスが自分にあっているのかわからないという方も多いのではないでしょうか？ 今回は、その中からフリーランスの方に必ず役に立つサービスを厳選して50個ピックアップしてみました。 ぜひ参考にしてみてください。 オンラインストレージ1.Evernote 日常の細かな気づきをメモすることや様々な形式のファイルをアップすることが可能なサービスです。また、クラウド上でデータを管理しているため、あらゆるデバイスからデータへアクセスすることができます。 利用料金が無料のスタンダードプランは、月に60MBまでアップすることが可能で、総容量の制限はありません。 2.Dropbox ドキュメントや写真、動画などのファイルをアップすることができるサービ

テストしたくないでござる。テストしたくないでござる。 いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。 これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがす

fluent/fluentd-ui https://github.com/fluent/fluentd-ui Fluentd用のWeb UIが出たようです。試しに触ってみます。 インストール READMEのとおりですが、 $ gem install fluentd-ui $ fluentd-ui start Open http://localhost:9292/ by your browser default account is username="admin" and password="changeme" もしくは、 $ git clone https://github.com/treasure-data/fluentd-ui $ cd fluentd-ui $ bundle install $ bundle exec rails s です。 僕はbundlerでいれることにしました