CSS3 Drop Shadows GeneratorはCSS3を使ったボックスに対する影付け処理をビジュアル的に行えるサービスです。 CSS3を使えばテキストやボックスに対して影を付けるのが簡単です。とは言え細かくカスタマイズされた影をつけるのは非常に手間ひまがかかるでしょう。そこで使ってみたいのがビジュアル的に設定ができるCSS3 Drop Shadows Generatorです。 トップ画面です。 影の設定です。パラメータを色々いじるだけで表現が自在に変更できます。 ボックスの大きさも変えられます。 最後にスタイルの出力です。CSSとSASSで出力できます。 こんな感じに斜めの影も設定できます。 左右に付けるとちょっと膨らんだ感じに。 ボックスの大きさはもちろん、影の方向やぼかし具合、大きさも自由に変更ができます。基本的にスライダーがから選択するだけなので、簡単でしょう。そしてプレビ

bowerが0.9.2になり、gitリポジトリが変更になりました。 twitter/bower=>bower/bower 基本 bowerとは、WebのJavaScript package managerです。 npmやgem、cartonのように、jqueryやd3、angularなど、プロダクトのwebで必要なpackageを管理するツールです。 インストール $ npm install -g bower 以上 使い方 $ bower install <package> $ bower install <package>#<version> <package>ではいろいろ指定出来ます jqueryのように、Bowerで登録してあるパッケージ名 gitのpublic/privageのエンドポイント 例) git://github.com/someone/some-package.git

ドットインストール代表のライフハックブログ

4. JSのオブジェクトは 連想配列みたいなもの 1 // 空のオブジェクトを作成 2 var dog = {}; 3 4 // プロパティをひとつ追加 5 dog.name = "Pochi"; 6 7 // ブラケットでもアクセスできる 8 dog['breed'] = "Shih Tzu"; 9 10 // 関数をひとつ追加 -> メソッド 11 dog.getBreed = function () { 12 return this.breed; 13 } 5. JSのオブジェクトは 連想配列みたいなもの 1 // 同じものをオブジェクトリテラルで表記 2 var dog = { 3 name: "Pochi", 4 breed: "Shih Tzu", 5 getBreed: function () { 6 return this.breed; 7 } 8 }; 6. クラスっぽい

Sencha Touch is a JavaScript framework for developing mobile applications. It uses an MVC architecture with models for data, views for presentation, and controllers for handling events and application logic. The document discusses how to implement MVC patterns in Sencha Touch, including defining models, views, controllers, and handling events. It also covers challenges of splitting logic between c

Backbone.jsの情報を探していると英語の記事に当たることが多いので、ここはむしろ割り切って最近読んだBackbone.jsについて英語で書かれたページをまとめておきました。 なんか英語の記事読むと「やってやったぜ！」という気持ちにもなるし シンプルなスライドもの Client-side MVC with Backbone.js ごく初歩の「なんでBackbone使ったらいいの？」から、アーキテクチャの説明や利用例、モデルの関連を作るtipsなどページ数は多いけどどんどん読める系。 Unit Testing JavaScript and Backbone.JS BackboneのModelとかViewとかを単体テストする方法を分かりやすく紹介してくれるプレゼンテーションスライド。 前半でごく明快にテストが必要な理由や箇所、後半にBackboneを使うとどういう風に簡単できれいに書ける

TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。 最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。 グレースケールを基調としたはっきりとした見た目のUIです。 ウィジェットは数多く提供されています。 フォーム系。 スライダーなどもあります。 スピナー。効果的に青が使われています。 こちらはモバイル。スマートフォンで使えます。 アイコンとラベルのセット。 テキストエリアとチェックボックス。 基本的に濃淡2色のバックグラウンドが選択できます。 オーバーレイ表示。これも色々使えそうです。 TopCoatはデスクトップとモバイルのそれぞれにデザインが提供されています。グレー系が約6色、青系が2色程度で構成されています。

5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、

Processing.js で水滴っぽいものを描いてみました。 描画ごとに円を大きくしていって、それに合わせて透明にしているだけ。 全画面対応しています。 <script type="application/processing"> int field_width = screenWidth; int field_height = screenHeight; float radius_min = 30.0; float radius_max = 100.0; float radius_unit = 0.7; int master_r = 255; int master_g = 191; int master_b = 255; WaterDrop water_drops = new WaterDrop[ 100 ]; void setup() { size( field_width, fie

いつ見ても「Latin」という著者名が気になる kimoto です。別に社内でラテンっていうあだ名で呼ばれてるわけでもないのに…。 本日は CakePHP の小ネタです。 バリデーションルールを model に書きますが、チェックボックスが最低でも1つ以上チェックされていることを確認するにはどのように記述するか？というお話です。 だらだら前置きを書いても仕方ないのでさらっとコードを書きますが、以下のようにすると実装できます。 'intereste' => array( 'rule' => array('multiple', array('min' => 1)), 'required' => true, 'message' => '興味のある物を選択してください', ), これで、「少なくとも1つ以上選択されていること」という条件でバリデーションできます。 また、ここで「'min' => 1

twitter facebook hatena google pocket リンクなどをクリックする前にどんなページか示したりしたいですよね。 また、画像に付加情報を省スペースで出したくもなるものです。 そんな時、Tooltipster - The jQuery Tooltip Pluginを使用すると吹き出しを与えてくれます。 sponsors 使用方法 Tooltipster - The jQuery Tooltip Pluginからファイル一式をダウンロード。 <link rel="stylesheet" type="text/css" href="tooltipster.css" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="jquery.tooltipster.

ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用

昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Google Chrome Canary（正確にはV8）に、ついにGenerators（yield）が入った。これを上手に使うと、エラー処理を含む非同期コードを同期的に書くことができるようになり、見通しが極めて良くなるので、ここで紹介する。 ここで紹介するものはいずれNode.jsでも使用できるようになるので、Webとの互換性を気にする必要のないNode.jsでは近いうちに活用できるようになると思う。 下のコードを動かすためには、最新のGoogle Chrome Canaryで、chrome://flagsからexperimental javascriptを有効にしておく必要がある。 ES6 HarmonyのGenerator構文について functionではなくfunction*というキーワードを使うと、yieldキーワードが使えるようになる。 function* range(begin

ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹