JavaScriptのTween Engine選定は迷う。 今までそんなに必要なかったもんな〜 jQuery.animateで足りてたし。 HTML+JavaScriptでFlashなみに動きを求められるとjQueryだと物足りない、もうちょい機能が欲しいところ。 ActionScriptには数々のTween Engineが存在します。 その中の一つGreenSockのTweenMax / TweenLiteにJS版ができたと聞き使ってみました。 Announcing GreenSock Animation Platform (GSAP) v12, now with tangy JavaScript flavor! Jump Start: GSAP JS 簡単、軽快 すぐに使い始められる。 Tweenの対象がJavaScript Object, DOMElement, jQuery Ins
Takazudo/jQuery.ImgLoader - GitHub に、XHR2が利用可能な場合、画像のプリロードをXHR2で行い、進行経過をより細かくとれるようにした。 デモ 新しめのブラウザで見ると、ファイルが読み終わるまでにいくつもprogressが取れてるのが分かります。これでかなり細かくロード状況を画面に出すことができそう。
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪Yuki Okada
Advent Calendar 1日目だよ ってことで、Backbone.js Advent Calendar 1日目を書かせていただきます。本当は先日公開したFAQの日本語訳を一発目にしたかったのですが、公開したい欲に負けた次第。 何とかして現状を振り返るアウトプットの機会にしたかったので、今やっているプロジェクトで書いたコードの大まかな構成と局所的なパターンの紹介をします。 いま手元で作成しているものは、スマートフォン向けのシングルページなWebアプリケーションです。専任で大量のJavaScriptをスクラッチするの初めて。Backbone自体も割と初挑戦。 ここでいうシングルページは、HTML1枚のみで、ページ遷移はbodyの中をJavaScriptで書き換えていく構成のアプリケーションを指しています。 今のプロジェクトから抽出されたクラス構成 下記のような構成に落ち着き、抜本的なリ
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script>コアとプラグインを読み込み。 $('.foo').videoBG({ position:"fi
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた!ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射!やっていくYO! これまでの: パフォーマンスからみるSass/Compass 第1回:Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編:MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. サンプルは jsdo.it で作成しております. Table of contents サンプルについて ソースコードの解説 DOM 要素をクエリで取得 イベントリスナをさくっと登録! 一度しか実行しないイベントを登録する スタイルをサクッとセット 属性をサクッとセット tmlib.js hackthon #1 やります! サンプルについて 左上のボタンを押すとモーダルウィンドウが表示さ
前職を退職してもう半年以上経ってしまいました。おかげさまで、レガシーなコードとのバトル等色々お仕事しています。 さて、先日のPHP Matsuri2012での@ryuzeeさんの発表を聞いて、開発環境や手法を改善するべく、今月から始まったプロジェクト用の環境を構築しています。 CakePHPは最新で! CakePHPの最新stable版は 2.2.3 ですが、既に 2.3.0-beta が公開されています。幾つか2.3.0-betaの機能で使いたかったものがあったのと、今回のプロジェクトのリリース時期が来年の5月という事もあって、2.3.0-beta を使って開発をしています。来年の5月なら2.3.0Stable版がリリースされるんじゃないかとの読みです(^^;さて、どうなるでしょうかw? 出来る限り公開されているPluginを使う 前職の職場では、ある程度蓄積された自前のPluginがあ
jQuery.Shapeshiftは自分でドラッグ&ドロップできるグリッドライブラリです。 最近増えたのがPinterestのように高さの異なるボックスを並べて表示するUIです。そしてさらに自分で並び替えまでできるようにしたのがjQuery.Shapeshiftです。 最初の表示です。 ドラッグして移動できます。その時、ちょっと斜めの表示になるのがいい感じです。 全てを猫に! jQuery.Shapeshiftではオプションが色々あり、ドラッグ時のアニメーション可否やそもそもドラッグ可否も指定できます。たとえ同じコンテンツであっても見せ方を工夫することでユーザ体験は全く違ったものになります。さらにユーザ自身による並び替えがあればカスタマイズ性が大きく向上するでしょう。 jQuery.ShapeshiftはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがラ
expressに疲れてなんか別の候補ないかと探した結果を貼る。 ウェブブラウザネイティブな言語特性をいかしてクライアントサイドも兼ねてるのが流行っているみたい。 Framework Stars Memo Express 8,104 Sinatra-like Meteor 6,046 Server+Client Brunch 1,923 Backbone-base, Server+Client Derby 1,567 Server+Client Geddy 1,171 Rails-like? Batman.js 1,119 CoffeeScript Tower.js 1,112 Rails-like, CoffeeScript RailwayJS 961 Rails-like, Express-base Zappa 949 CoffScript, Express-base Flatiron
CSS おれおれ Advent Calendar 2012 – 01日目 文字の色やら背景色やらでよく使っていると思うのですが、まとめてみました。 アルファ系なんか便利かなーって思います。box-shadowの色が濃いときにrgba(0,0,0,0.5)とかやったりします。 さてさて。 RGBで指定 光の三原色(赤緑青)で指定します。 #rrggbb これが一番一般的。16進数で各2桁、合わせて6桁で指定します。 16進数はわかりますか? 普通の10進数で0が16進数の0、9が9、10がA、11がB、15がF、16が10になります。2桁なので0からFF、つまり0から255までの数値を指定できます。 アルファベットは大文字ABCDEFでも小文字abcdefでも構いませんが、CSSの仕様書では小文字で例が記述されているので、そちらが標準みたいです。 #rgb 16進数各1桁で指定します。
軽めのjQuery Advent Calendar 2012 に参加させていただきました。 この記事は2日目を担当しています。 題名の通り、似ているけど微妙に違う紛らわしいjQueryのAPIをざっとまとめてみました。 項目 比較
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
ちょっとお勉強したことの備忘録。はてなブックマークに登録されたページの情報(タイトル、URL、ブックマーク数、コメントなど)をはてぶのAPIを利用してjavasciptで取得する方法を調べました。 【追記】関連記事書きましたのでこちらも参考にどうぞ。 RSSフィードをJSONとして受け取る方法~Google Feed APIの応用 はてブの情報はJSONではてぶされたページの情報は はてなブックマークエントリー情報取得API – Hatena Developer Center このページの解説にあるようにJSON形式のデータとして取得することができます。 いやちょっと待って、そもそもJSONとはなんぞや?という話ですが JSON(ジェイソン、JavaScript Object Notation)は、JavaScriptにおけるオブジェクトの表記法をベースとした軽量なデータ記述言語である。
現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
tmlib.js で DOM 操作 tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. 詳しい解説をしている関連エントリーはこちら Links tmlib.js とは 以前セミナーで発表させていただいたスライドです. GitHub tmlib.js は GitHub で管理しています. Documents こちらのドキュメントで機能を把握することができます. 【TechBuzz】tmlib.js hackthon #1 近々ハンズオンやります! みんなで tmlib.js を使ってゲーム作りましょう♪ // forked from phi's "tmlib.js 0.1.3 template" http://jsdo
RequireJSて便利! 読み込みJSのロード管理を依存関係を維持しながらやってくれる。 しかもロードするJavaScriptファイルをキャッシュしリクエスト削減にも貢献してくれる様子。 でも、開発期間はこのキャッシュ機能がじゃま。 ファイルを更新しても読みこみファイルが変わらないので、すこぶるテストがしにくい。 絶対キャッシュさせない – 開発環境 RequireJS API http://requirejs.org/docs/api.html#config-urlArgs configに下記のスクリプトを追加すると、キャッシュはされないと書いてある。 パラメタにタイムスタンプ付与する王道ですね。 During development it can be useful to use this, however be sure to remove it before deploying
@fladdict さんの分析した iTunes11 のアルバム情報表示アルゴリズムをとりあえず実装してみました。 詳細は http://fladdict.net/blog/2012/11/itunes11_colorpicker.html で公開されています。 - 減色の色数は 512 色 - 減色アルゴリズムは 32 で割って小数部を切り捨て32を掛けて16を加算するだけの単純なもの - 文字色は背景色と色相の差が 120 以上のもの、かつ明度の差が96以上のもので出現回数の一番大きいもの - 動作確認は Google Chrome のみ 実物を見ないで実装したので大きく異なっている可能性があります。全然違ったらゴメンナサイ。 window.addEventListener('DOMContentLoaded', function() { var style = document.cr
デモコード index.html <!DOCTYPE html> <html lang="ja"> <head> <title>goog.ui.ColorMenuButton</title> <meta charset=utf-8> <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script> <script> goog.require('goog.ui.ColorMenuButton'); goog.require('goog.ui.CustomColorPalette'); goog.require('goog.ui.Component.EventType'); goog.require('goog.ui.Menu'); goog.require('goog.ui
CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ&ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装
BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 2012年11月30日- jQuery Plugin for Cartoon-like Background Image Sprite Animation ? AniDG ? (alernative to animated Gif) HTML, HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web application BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」。 1枚の画像をJavaScript を使い、背景画像を順番に切り替えていくことでアニメーションさせられます background-image の書き換えなので、要素の中に何か入っていてもよい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く