タグ

tipsに関するabtkyのブックマーク (150)

  • javascript - Array.prototype.slice.apply(arguments) // 引数一発配列化 : 404 Blog Not Found

    2010年04月28日22:00 カテゴリLightweight Languages javascript - Array.prototype.slice.apply(arguments) // 引数一発配列化 これなのですが… 細かいJavaScriptの仕様や習慣やテク集 - 三等兵 var func = function() { var leng = arguments.length; for(var i = 0, arr = []; i < leng; i++){ arr[i] = arguments[i] * 10; } alert(arr); }; こう書けます。 var func = function() { var args = Array.prototype.slice.apply(arguments); var arr = args.map(function(n){ r

    javascript - Array.prototype.slice.apply(arguments) // 引数一発配列化 : 404 Blog Not Found
    abtky
    abtky 2011/04/27
    可変長引数を配列として扱うためのtips。かな?
  • fladdict.net blog: イベント・ドリブンなJavaScriptのやり方

    Flashでに学ぶ非同期通信のノウハウのって感じのお話。JavaScriptでオブザーバパターンを用いて、イベントドリブンなコード(addEventListener等)をバリバリ書く方法です。 というかFlashで言うところの、mx.events.EventDispatcherクラスの自分なりの移植なわけですけど。 このEventDispatcherクラスを使うと、W3CのDOM3にそれなりに対応した、イベントモデルを自作のJavaScriptのオブジェクトに実装できます。これで素晴らしきイベントドリブンの世界が楽しめます。 function EventDispatcher(){} /** EventDispatcher.initialize( obj ) オブジェクトobjに、W3C DOM3互換のイベント通知機能を追加します。 これによりobjは、onLoad等のイベントを発行すること

  • 即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように

    JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか? ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、

    即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
    abtky
    abtky 2011/04/25
    javascriptの即時関数
  • ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門

    HTMLCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML/XHTML(以下、HTML)とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素(今回はimg要素)はoverLayer内に配置します。 ▼サンプル01(HTML部分) <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i

    ASCII.jp:jQueryによるLightbox風モーダルウィンドウの作り方|Web制作の現場で使えるjQuery UIデザイン入門
  • overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

    フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ:1 フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか? これは

  • PHPを始めたばかりのころ自分なりにやってた工夫と、それこうした方がいいんじゃないのという提案

    PHPを始めたばかりのころ自分なりにやってた工夫と、それこうした方がいいんじゃないのという提案 2010年12月07日 09:00PHP PHP Advent Calendar jp 2010 に参加しています。 PHP に関する記事を日替わりで書こうというイベントですね。 昨日の slywalker さんに続いて6日目。 さて PHP というかウェブに関することは何もかも独学で 始めたばかりの頃は特に 一般的なやり方というものがさっぱりわかっていなかったので わかることの範囲内で自分なりの工夫をしてました。 そういう経験はとても大切だと思うんだけど、 かなり無駄な手間がかかっていたり やらない方がいいことをやっていたりもしたので 導いてくれる人がいなかったその頃の自分に対して こうやってはどうか、という提案を書いてみようと思います。 「なに、そんな愚かしいことしてたの」 と言いたくなるよ

    PHPを始めたばかりのころ自分なりにやってた工夫と、それこうした方がいいんじゃないのという提案
  • CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 - Fsiki

    CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3

    abtky
    abtky 2010/10/20
    floatした要素のを持つボックスの背景表示 overflow:auto
  • FN1009003 - インスタンスをドラッグで回して動かす - Flash : テクニカルノート

    インスタンスをドラッグして回したり、マウスボタンを放して滑らせるアニメーションについて解説します。以下のwonderflのサンプルはクラスとして定義していますが、稿は要点がわかりやすいようにフレームアクションを基に説明します。 Dragging and rotating a card with the Matrix class - wonderfl build flash online 01 ふたつの課題 このお題では、課題がふたつあります。第1に、マウスクリックした点が中心になるようにインスタンスを回すことです。やり方としては、三角関数で座標を調整するか、変換行列(Matrixクラス)を使うことが考えられます。稿は、3次元座標空間の扱い(Matrix3Dクラス)にも応用の利く後者の方法を採ります。 第2の課題は、マウスポインタの動きをどのように回転の速さに反映させるかです。物理学に

    abtky
    abtky 2010/10/08
    より自然なドラッグの表現方法。あとでよく読む
  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

    abtky
    abtky 2010/09/07
    モバイルページのコーディングTips
  • Firebugの使い方 | THE HAM MEDIA

    Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

    Firebugの使い方 | THE HAM MEDIA
    abtky
    abtky 2010/06/26
    Firebugの使い方
  • GEEKs in OSAKAFlash モーションプログラミング + 大阪てら子

    2009年4月 東京で開催のロクナナワークショップ「 GEEKs Flash モーションプログラミング 」が、「関西でも開催して欲しい!」と多数の嬉しいお問い合わせをいただき、この度 大阪 で開催することになりました。 「GEEKs」は自由な発想でテクノロジーを駆使し、モノを作る楽しさと独創性を刺激するセミナーイベントです。 今回のテーマは、Flash ActionScriptによるモーショングラフィックスです。 イベントでは、ROXIK の 城戸雅行(きどまさゆき)氏と alumican.net の 奥田透也(おくだゆきや)氏をゲストに迎え、ActionScript 3.0で複雑なモーションプログラムを構築するための、考え方や手法をご紹介していただきます。 大阪イベントでは特別に、地元 Flashコミュニティ「 大阪てら子 」協力のもと拡大版として実現!大阪てら子からは、代表の シナチ

  • IDEA * IDEA

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

    IDEA * IDEA
    abtky
    abtky 2010/04/27
    opendirの便利版?
  • MySQLのEXPLAINを徹底解説!!

    以前、MySQLを高速化する10の方法という投稿で「EXPLAINの見方についてはいずれ解説しようと思う」と書いてしまったので、今日はその公約?を果たそうと思う。 MySQLのチューニングで最も大切なのは、クエリとスキーマの最適化である。スキーマの設計は一度決めてしまうとそのテーブルを利用する全てのクエリに影響してしまうためなかなか変更することは出来ないが、クエリはそのクエリだけを書き直せば良いので変更の敷居は低い。そして遅いクエリをなくすことは、性能を大幅に向上させるための最も有効な手段である。従って、アプリケーションの性能を向上させたいなら、まず最初にクエリのチューニングを検討するべきなのである。 最適化するべきクエリはスロークエリログやクエリアナライザで見付けられるが、ではそのようなクエリが見つかった場合にはどのように最適化すればいいのか?そのためにはまず現在どのようにクエリが実行さ

    MySQLのEXPLAINを徹底解説!!
    abtky
    abtky 2010/02/18
    MySQL最適化Tips
  • CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル

    Robert’s talk Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Ch

    abtky
    abtky 2010/02/18
    グラデーション
  • パスワード認証

    スチーム速報 VIP あの夏の日、僕たちは輝いていた。

    パスワード認証
  • Ywcafe.net

    Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Health Insurance 10 Best Mutual Funds Accident Lawyers song lyrics Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy

    abtky
    abtky 2010/02/01
    クライアントサイドでの二重投稿防止
  • Adobe Edge: 2009年11月 大重美幸の「これ見落としてませんか?ActionScript 3.0」 第3回 配列の値の並べ替えをマスターする

    今回のテーマは配列の値の並べ替えです。配列は複数の値を管理したいときに便利な機能です。CS4 からは配列を扱うクラスに Vector クラスが加わりましたが、基的には Array クラスと同じです。配列を使うときに、よく分からなくて、頭の中が混乱していませんか? 配列を使いこなせてこそ一人前。配列を使ってスマートなスクリプトを書きましょう。 サンプルファイル : edge_oshige_03_sample_fla.zip (942KB) 配列の値をソートしよう 配列の値を並べ替えることをソートと言います。メソッドはsort()です。ここで配列を扱うとき注意しなければならないことがあります。さっそく例を見てみましょう。 [sample] Array_sort_1.fla 配列colorsの値を昇順、降順にソートします。 var colors:Array=["green","red","wh

    abtky
    abtky 2009/11/26
    配列の扱い
  • getBounds + Matrixで、もう基準点にはこだわらない。 | _level0 - KAYAC Front Engineer Blog

    最近、getBoundsの存在と、Matrxの便利さにようやく気づきました。 基準点と違う場所を基準にオブジェクトを変形したい場面に遭遇して、 widthやheight、rotationにsin,cosまで持ち出して悩んでたんですが getBounds + Matrixを使うことでさくっと簡単にできちゃうんですね。 手順は (1).Matrix.translate でオブジェクトを移動して、基準点を変えて (2).Matrix.scale,Matrix.rotateでオブジェクトに任意の変形を加えて (3).Matrix.translate でオブジェクトを元の位置に移動してあげる の3STEP。 ここで、基準点を変えるときに役に立つのがgetBounds。 getBoundsは表示オブジェクトの領域を、矩形(Rectangle)で返してくれるメソッドで、 基準点の位置や、オブジェクトの変

    getBounds + Matrixで、もう基準点にはこだわらない。 | _level0 - KAYAC Front Engineer Blog
  • css-lecture.com

    abtky
    abtky 2009/11/16
    注意書きの※印とか、ネガティブマージンとか、よく使うテキスト廻りの処理いろいろ
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。