Sassのfor文で連番スプライトを管理する | DECONCEPTER

2013/11/21 10 users Sass Compass Mixin 連番 for文

前回のSassで複数のカラーバリエーションクラスを一括で生成するではコレクションをループする方法について書きましたが、単純に連番のクラスを生成したい時にはSassのfor文が便利です。Sassのmixinとextend以外活用していないという方は一歩踏み込んで使ってみると楽しいと思います。 例えばtag1〜8のボタンをcompassでスプライトシートにしてループで8つのボタンのクラスを定義したいと... 続きを読む

JavaScript製の顔認識ライブラリがすごい | DECONCEPTER

2013/09/26 381 users 顔認識ライブラリ JavaScript製

JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識... 続きを読む

古いIEの対応を外したjQuery2.0リリース！IE6/7/8対応の1.x系も継続開発 | DECONCEPTER

2013/04/20 30 users 模様 アプリケーション JavaScriptライブラリ 向上

jQuery 2.0 Released | Official jQuery Blog 多くのWEB製作者必携のJavaScriptライブラリが初のメジャーバージョンアップを発表。IE6/7/8のサポートを除外し、処理の向上と軽量化を図ると共にアプリケーションやプラグイン開発などのウェブサイト以外の利用シーンが意識されていく模様。 jQuery1.10も数ヶ月以内にリリースされる模様です。IE6/7... 続きを読む

レスポンシブデザインの高速プロトタイピングツールAdobe Edge Reflow | DECONCEPTER

2013/02/18 38 users レスポンシブウェブデザイン services ワークフロー

レスポンシブウェブデザインのワークフローを改善するツール 昨年Adobeが発表したEdge Tools & Servicesの中で唯一リリースされずにいたAdobe Edge Reflowが2月15日に発表された。 先行して公開されているEdge Web Fonts や Edge Inspectなどと連携しながら高速にレスポンシブデザインのモックアップ作成が可能となる。 Adobe Develop... 続きを読む

誰のためのHTML5？ウェブとテレビと出版と | DECONCEPTER

2012/12/20 42 users 実益 差異 機種 淡い期待 去年

HTML5はどんな実益をもたらしたのか？正直まだ何ももたらしていないと思う。もたらしたのは「未来への淡い期待とカオスだ」と現状では言わざるをえない。去年から徐々に盛り上がり始めたHTML5は今年に入り一気に熱を帯びて加速した。 言葉の盛り上がりとは裏腹に語られていたメリットを思ったより享受できていないどころか機種やブラウザ依存の差異に苦しんで、コストがかさんでいるのが現状だろう。そんな中仕様策定完... 続きを読む

IE6（すっとこどっこい）でJavaScriptのデバッグをする方法 | DECONCEPTER

2012/12/03 89 users Console デバッグ Firefox 習慣 IE6

JavaScriptはconsoleで確認したい。FirefoxのFirebugプラグインやGoogle Chrome Developer toolsの登場以来、人はその快適さに心を奪われ、consoleの無いブラウザで確認するという習慣を捨てた。 タイトなスケジュールで新規ページを作成する際、ついついIE6/7（すっとこどっこい）の確認をおろそかにしてしまうことがあります。その理由にデバッグの方... 続きを読む

PHPやMySQLやセキュリティ対策が分かった気になる15冊 | DECONCEPTER

2012/11/15 303 users Facebook MySQL PHP 言語 現役

HTML5とかJavaScriptがもてはやされてるけどやっぱPHPだよねっ。一人でWEBサービス作れちゃう人とかカッコイイィィィィ。デザインはTwitter Bootstrapでィィし、やっぱサーバーサイド出来る人が輝いてるぅウィリリリリリ。 みたいな会話が各地で聞こえてくる昨今ですが、PHPはまだまだ現役で活躍していく言語だと思います。Facebookも今のところPHPで作られていますし、何よ... 続きを読む

JavaScriptで作られたレスポンシブな3D猫が凄まじくレスポンシブ | DECONCEPTER

2012/11/13 86 users ウィンドウ ブラウザ 健気 レスポンシブ JavaScript

Flash3D界のスーパースターROXIKからJavaScriptで作られた凄まじくレスポンシブな3Dネコさんがリリースされている。 ウィンドウの幅に合わせてめちゃめちゃかわいいネコさんが多様に変化する。その凄まじくかわいレスポンシブ具合を見ていこう。 ブラウザに合わせて健気に体を伸ばす 楽しそうに首を振りながらブラウザに突っ張ってる。カワイイ。 430px以下にすると。。 ブラウザをモバイルサイ... 続きを読む

WEB制作のIE対策いろいろ チートシートやHTML5/CSS3対応方法など | DECONCEPTER

2012/11/08 567 users チートシート IE対策 Web制作 HTML5

かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できる... 続きを読む

続IT系奥様必見！プログラマのダンナが帰ってこない7つのワケ | DECONCEPTER

2012/10/27 96 users 浮気 プログラマ ダンナ 大抵 わけ

まずわかってあげて欲しい。大抵は浮気してるわけではない ほんのごく数％のリア充プログラマを除いて大抵のプログラマが家に帰ってこない理由は浮気ではない。 今日は新婚早々ダンナが家に帰ってこないあなたのために、なぜプログラマのダンナが家に帰ってこないのかを教えて差し上げたいと思う。 ここに挙げるもの全てが当てはまるというわけではないだろうが、どれか一つは必ず当てはまるだろう。明日から帰ってきた際は優し... 続きを読む

【初心者向け】WEBクリエイターになるための入門7レッスン | DECONCEPTER

2012/10/26 420 users Webクリエイター 初心者向け

無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する... 続きを読む

ここから始めるモバイルパフォーマンス。手軽な画像最適化ツール7選 | DECONCEPTER

2012/10/25 80 users 画像

ユーザーがページ表示に待てるのは2秒までと言われている。WEBサイトパフォーマンス最適化の話は多数上がっており、画像サイズやJavaScript・CSSの最適化、HTML上の外部リソースの読み込み順序、CDNの利用、DNSルックアップを減らす、HTTPリクエストの数を減らす、コンポーネントを圧縮するなどなど対応し始めたらキリがない。 実際の案件でしっかり最適化を行えているWEB製作者の方は意外に少... 続きを読む

IE10とHTML5とCSS3とレスポンシブデザインと | DECONCEPTER

2012/10/24 125 users viewport レスポンシブデザイン IE1 ウェブサイト

ウェブサイトのWindows 8 向け対応 iPad Miniややたら薄いiMacが発表されて賑わっている中恐縮だが、今日はIE10にWEBサイトを対応させるために最低限押さえておきたいポイントを見ていきたいと思う。 スナップモードとデスクトップモードがあるWindows 8のIE10にウェブサイトを最適化させるにはいくつかポイントがあるようだ。 IE10独自のviewport 実はまだviewp... 続きを読む

HTML上で直接CSSを編集！次世代エディタEdge Code | DECONCEPTER

2012/10/23 337 users CSS html上 編集

HTMLコーディングの次世代標準機能を備えるエディタ 先日紹介したAdobe Edge Tools & Servicesのエディタ担当Adobe Edge Codeを紹介します。対応OSはWindowsとMac OS Xで現在プレビュー版で無償で使うことができる。 先行して公開されているオープンソースプロジェクトBracketsをコアに採用しており、革新的な機能が備わっている。次世代エディタの標準... 続きを読む

興味ないけど知っておこう！Windows8の気になる8つのポイント | DECONCEPTER

2012/10/22 46 users アジャイル インターフェース 変貌 Windows 流行

アジャイルな変貌を遂げ続けるOS Windowsの新バージョン 「もうインターフェース変えるの法律で禁止しようや」「タッチUIベースは普通のPCでは使いにくいだろう」などと騒がれる革新的な新OS Windows 8が10月26日発売に発売される。 まるで今流行のアジャイル開発中のように次々とUIが変わるWindows。本当のリリースはいつなのだろうか。興味はないが、仕事上最低限の特徴は知っておかな... 続きを読む

IT系奥様必見！プログラマのダンナにしてはいけない７つの掟 | DECONCEPTER

2012/10/19 523 users Facebook プログラマ ダンナ たん 一言

1. パソコンに向かっているときに話しかけてはいけない プログラマの夫を持ったからには簡単にオフラインで話せると考えてはいけない。もし話しかけたかったらメールもしくはFacebookでメッセージを送ろう。 たった一言「ちょっとだけこっち向いてほしいな」と送るだけで円滑コミュニケーションを伴った円満夫婦生活の始まりだ。 2. SNSを見てるからと言って休憩していると思ってはいけない もしあなたのダン... 続きを読む

jQueryより20倍速い！最強トゥイーンライブラリTweenMaxJS | DECONCEPTER

2012/10/19 436 users jQuery

Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述） まずはその圧倒的パフォーマンスを体感してくださ... 続きを読む

たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER

2012/10/18 1703 users レスポンシブ・ウェブデザイン NHKスタジオパーク 話題

簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプル... 続きを読む

あなたはいくつ当てはまる？デキるWEBディレクター7つの特徴 | DECONCEPTER

2012/10/16 65 users 特徴 いくつ当てはまる あなた

WEBディレクターは平均点の高いゼネラリストである WEBクリエイティブのディレクションという仕事の範囲は多岐に渡る。提案段階では見積もりの依頼対応から、要件にあった技術とデザイン、実現可能なWBSの作成、運用フローの策定などプロデューサーと相談しながらプロジェクトの骨子を決める役割がある。 プロジェクトがスタートすれば常に進捗管理に目を配り、クライアントの追加要望に対する調整業務も発生する。上が... 続きを読む

IE8切り捨て準備はいいか？jQuery2.0 2013年リリース予定 | DECONCEPTER

2012/10/14 147 users

さようなら、InternetExplorer8 2012年も後3ヶ月を切りました。今年6月に出たアナウンスの予定で行くと来年jQueryは初のメジャーバージョンアップを迎えます。 jQuery2.0の主な機能等はまだ特にアナウンスされていませんが、注目はなんといってもIE8以下をサポート対象から外すという点です。 HTML5の時代が本格的に到来 これまでjQueryがWEB開発の世界にもたらしたメ... 続きを読む

爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER

2012/10/13 174 users

まずはSublime Text 2の無敵たる所以の3つのショートカット コマンドパレットを表示 コマンドパレットはシンタックスの切り替えや、スニペットの呼び出しなどここが全ての起点になると言っても過言ではありません。パッケージコントロールをインストールすれば、様々なプラグインがここを基点にインストール管理ができます。 Cmd + Shift + P 同じ文字列を一括選択・編集（１つずつ） これもS... 続きを読む

この順番で読めばOK！JavaScriptを理解するための14冊 | DECONCEPTER

2012/10/10 1924 users jQuery ダントツ 一択 順番 ステップ

JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としては... 続きを読む

HTML5でFlashに近づけるか？Adobe AnimateをJavaScriptで制御する | DECONCEPTER

2012/10/10 74 users Edge Animate アニメーション 記述 手順 再生

手軽なHTML5アニメーションを作るならこれがベストかも 前回Adobe Edgeの雑感を書いたが、今回は実際にEdge Animateを使ってみる。アニメーション自体を作るのは簡単だが、クリックしたら再生など、ちょっとしたインタラクティブ性を加えるにはJavaScriptの記述が必要になる。手順としてまずAdobe Animateでアニメーションを作り、さらにJavaScriptで制御してみたい... 続きを読む

TypeScriptでjQueryを使ってJavaScript MVCメモ帳を作る | DECONCEPTER

2012/10/09 121 users jQuery TypeScript MVC メモ帳 保存ボタン

jQueryを使ってメモ帳アプリを作る jQueryの定義ファイルは公式サンプルのいくつかに同梱されている。jQueryUIの定義ファイルと合わせて下記にもコミットした。今回はなんちゃってMVCでメモ帳を作る。機能は保存ボタンを押したらlocalStorageにデータを保存して一旦とじてもメモ帳として使える簡易Webアプリとする。 TypeScriptをjQueryで使う方法 TypeScript... 続きを読む

なぜ次々とJavaScriptコンパイラが生まれるのか。 — DECONCEPTER

2012/10/05 236 users TypeScript ファーストインプレッション 若干敷居

最もJavaScriptに近いJavaScriptコンパイラ 先日MicrosoftからTypeScriptというJavaScriptコンパイラが公開されました。ファーストインプレッションとしては今までのJavaScriptコンパイラと比べると若干敷居が低く感じます。まず驚いたのはドキュメントがWordファイルだったこと。早速ダウンロードしてみたら一部文字化けしていました。さすが。PDFも用意され... 続きを読む