タグ

JavaScriptに関するhiro-rockのブックマーク (314)

  • 使ってはいけないjQueryの機能 5個 : tech.kayac.com - KAYAC engineers' blog

    3 days ago的な時間表記をするサービスは全部嫌いです。agoです。 週末若手IT勉強会に参加させていただきjQuery 1.3.2のイベント周りを読んできたので、それを踏まえて使用すると問題の発生する可能性の高い機能を紹介します。 0 jQuery.browser 1.3からサポート外になりました。 代わりにjQuery.supportを使用しましょう。 ただ、swfの重ね合わせ問題等は単体のJSでは確認できないので、jQuery.browser無しでどう解決すればいいのかよくわかっていません。 1 getData、setDataイベント getData、setDataイベントは1.5系で削除される予定のようです 最新版のjQueryではgetData、setDataイベントが使用可能になっており、以下のようにイベントを設定できます。 $().bind('getData', fun

    使ってはいけないjQueryの機能 5個 : tech.kayac.com - KAYAC engineers' blog
    hiro-rock
    hiro-rock 2009/10/29
    jQueryでやってはいけない事まとめ 適材適所
  • animate(params, options) - jQuery 日本語リファレンス

    前述の指定では第二引数以降で指定していたものを、ハッシュにして第二引数で選択的に渡すことが可能になりました。 第三引数以降を用いたものでは、例えば終了時点の関数のみを指定したくても、全ての引数にデフォルトの値を明示的に指定してやらないといけません。そういった煩わしさを無くすため、連想配列で指定できるようになっています。 指定できるオプションは、以下の通りです。 durationアニメーションの動作期間を指定します。”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。 初期値は”normal”です。 easing値の変化量を調節するカスタム関数の名前を渡します(参考)。ここに独自の関数を指定することで「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」などの変化に富んだ効果

    hiro-rock
    hiro-rock 2009/10/28
    animateのoptionsを知らなかった… 今まではcallbackでゴニョってました…
  • Javascriptでイベントハンドラのコールバック関数に引数を渡す - yummy-yummy

    javascriptでゴリゴリコードを書いていると、最近のライブラリではコールバック関数を渡すのがけっこう日常茶飯事なようで、コールバック関数を渡すのはいいが、その関数に引数を渡してあげたい!!ってことがよくあるのですよ。 今までなんとか引数は諦めてしのいでたけど、どうも納得がいかないんで調べてみた。 例えばとあるボタンのイベントハンドラで、クリックした際にhogeというfunctionが実行されるようにしたいってな場合は、こんな感じで書きます。 var hoge = function(evt) { alert("hogehoge" + evt); } btn3 = document.getElementById("btn3"); btn3.addEventListener("click", hoge, true); しかしこの「addEventListener」に引数を渡したくて、こんな

    Javascriptでイベントハンドラのコールバック関数に引数を渡す - yummy-yummy
    hiro-rock
    hiro-rock 2009/10/27
    引数ありのcallback関数作成
  • javascriptで名前空間を有効活用する方法 - KAYAC Engineers' Blog

    社内の煎り大豆ブームの火付け役。agoです。 今日はjavascriptで名前空間を有効活用する方法をご紹介したいと思います。 1 無名関数の即実行 無名関数をその場で実行することで名前空間を閉じることができます。 (function () { // hogeはこのfunction内のみ参照可能 var hoge = 1; })(); また、newを使用した方法でも実行可能です。 new function () { // hogeはこのfunction内のみ参照可能 var hoge = 1; }; それぞれ違いは以下の通りです。 ()() thisがwindow returnしたものをそのまま受け取れる new thisが空Object Object以外をreturnした場合this 引数を渡す場合、それぞれ以下のようなかたちで渡す事が可能です。 (function (arg1, arg

    javascriptで名前空間を有効活用する方法 - KAYAC Engineers' Blog
    hiro-rock
    hiro-rock 2009/10/20
    無名関数いろいろ
  • Google Maps APIのジオコーディングをサーバーサイドでおこなう方法 - F.Ko-Jiの「一秒後は未来」

    Google Maps API のジオコーディングは GClientGeocoder クラスを使う方法しかないのかなと思っていたのですが、英語のドキュメントを見ると HTTP 経由でもできるみたいです。 簡単に説明すると、以下のような URL でその地名に対するジオコーディング結果を取得することができます。 http://maps.google.com/maps/geo?q=地名&key=APIキー&sensor=false&output=xml&oe=utf8&gl=jp 以下に地名から緯度経度を取得するPHPのサンプルコードを記しておきます。詳しくは「Geocoding – Google Maps API Services – Google Code」のドキュメントを参照してください。 $queries = array(); $queries['q'] = '東京'; $queries

    Google Maps APIのジオコーディングをサーバーサイドでおこなう方法 - F.Ko-Jiの「一秒後は未来」
    hiro-rock
    hiro-rock 2009/10/12
    HTTPリクエストでGEOコーディング結果を取得
  • 「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena

    ASCII.jp:HTML5のcanvasで作る画像フィルター|古籏一浩のJavaScriptラボ こちらの記事をたまたま拝見して、コメント欄もなければトラックバックもできないようなので、どうやって反応を返せばいいのかわからないけれど、もし古籏一浩さんご人が見てくれたらいいなあ、ということで書きます。 全体的にはとても素晴らしい記事なのですが、いくつか言いたいことがあります。 ImageData まず、CanvasRenderingContext2D#createImageData というメソッド。これは知りませんでした。 Opera には window.ImageData というグローバルオブジェクトとして似たものが定義されています。(createImageData と違い、第三引数に配列を渡せるのが特徴ですが) if (window.CanvasRenderingContext2D

    「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena
    hiro-rock
    hiro-rock 2009/10/12
    CANVASで画像にフィルタする
  • jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog

    Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈

    jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
    hiro-rock
    hiro-rock 2009/10/10
    scriptタグで明示的にcharsetを設定する。Fxでデバッグする際にも、IE用にcondole objectを用意しておく。
  • FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム

    はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか? ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ

    FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
    hiro-rock
    hiro-rock 2009/10/05
    JSをしっかり勉強する
  • Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library

    Warning Production applications should not take a hard dependency on CDN assets. Applications should test for the CDN asset referenced, and use a fallback asset when the CDN is not available. The Microsoft Ajax CDN has no SLA above and beyond using an Azure CDN. Use this GitHub issue to report problems with the Microsoft Ajax CDN. Table of Contents ajax.microsoft.com renamed to ajax.aspnetcdn.com

    Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library
    hiro-rock
    hiro-rock 2009/10/03
    MSでもjQueryをCDNしてくれる まぁGoogleAjaxAPIで事足りそうですけどね
  • データ & アナリティクス | アクセンチュア

    データ分析から導き出されたインサイト無しにAI人工知能)の活用は始まりません。私たちは、各業界知識とデータ・アナリティクス技術を駆使しデータドリブン経営を強力に支援します。 データ、アナリティクス、AIは企業にとって競合他社との差別化を図るかつてないほど大きな要因になっています。今日の経営幹部が効率を向上しながら新たな収益源を開拓し、新しいビジネスモデルをタイムリーに構築する方法を模索する中、価値を生み出し成長を続ける企業には「データ活用」という共通項があります。私たちは、無数のデータから企業にとって当に必要なデータを活用するための方法を知っています。 将来を見据えたオペレーション体制を備えている企業の半数以上(52%)は、すでにデータとアナリティクスを大規模に活用しています。データとAIに関する取り組みをビジネス戦略に沿って実施することで投資利益率を迅速に最大化し、最終的にはAIをビ

    データ & アナリティクス | アクセンチュア
    hiro-rock
    hiro-rock 2009/10/02
    JS勉強会の資料 あとで読む
  • Chrome Experiments

    Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.

    Chrome Experiments
    hiro-rock
    hiro-rock 2009/10/02
    HTML5のデモ的なサイト
  • Yahoo Developer Network

    New Sign In With Yahoo An easy and convenient way for your users to create an account and sign into your web or mobile app View guide

    Yahoo Developer Network
    hiro-rock
    hiro-rock 2009/10/01
    UIパターン デザインなど参考にする
  • 最速インターフェース研究会 :: 実践JavaScriptで配列をシャッフルする方法リファクタリング

    JavaScriptで配列をシャッフルする話を見て、そういえばArray#shuffleは以前書いた記憶があるなーと思って調べてみたらコピペだった。 http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html Fisher-Yatesというアルゴリズムだそうです。 Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [1,2,3,4,5]; a.shuffle() // 3,1,5,2,4 a // 3,1,5,2,4 ごく普通に実装

    hiro-rock
    hiro-rock 2009/09/28
    Fisher-Yatesというアルゴリズムで配列の中身をランダムにする。非破壊的・破壊的の実装方法説明。
  • inline-block を使ってプレースホルダ付き入力欄を実装する - Cyokodog :: Diary

    更新履歴 2010-01-22 jQuery.exPlaceHolder.js を Ver 0.1.1 に更新 title 属性(あるいは任意の属性)で、表示するメッセージを指定できるようにしました 専用の css ファイルの読み込みを不要にしました jQuery.exInlineBlock.js ファイルの読み込みを不要にしました 初期値があった場合もメッセージが表示されてしまう不具合を修正しました 記事に使い方を追記しました まずプレースホルダ付き入力欄のおさらいですが、 こういうやつの事をいいます。入力欄にカーソルがあたるとナビゲーションメッセージが消え、カーソルがはずれるとまた表示されるやつです。 HTML5 では <input placeholder="google"> と記述すると自動的にこういう制御をしてくれるそうです。ですが HTML5 の普及はまだ先の話なので JavaS

    hiro-rock
    hiro-rock 2009/09/28
    HTML5のプレースホルダ placeholder
  • グラデーション (Gradient) - スタイルシート・フィルタ

    テキストや画像にグラデーションをかけます。 ただし、画像の場合は透過部分に、テキストの場合は背景部分にかかります。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 また、その他の指定方法はメニューの「基・リファレンス」を参考にして下さい。 → ページ全体に適用する場合(サンプルのためタグごとに効果を変えています。参照) <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- /* 赤〜緑 */ .ft0 { filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffff000

    hiro-rock
    hiro-rock 2009/09/25
    暇なときにjQueryでrgbaを16進数に戻してgradientで疑似的にアルファが使えるプラグインを作成する
  • jQueryを読むために知っておきたい6つの知識 : tech.kayac.com - KAYAC engineers' blog

    夏休みはタイ古式マッサージセミナーに参加してきました。agoです。 先週日曜日若手IT勉強会に参加させていただき、jQueryのコードリーディングを行ってきました。 そこでjQueryのコードを読むときの基礎知識に関して簡単にまとめてみたいと思います。 1 変数の複数同時宣言と代入 まず、JSでは変数の宣言は以下のような形式で行います。 var hoge; この場合は単一の変数の宣言ですが、以下のような記述を行うと複数の変数を同時に宣言することが可能です。 var hoge, huga; また、変数宣言と同時に値の代入を行うことも可能で、その場合以下のような記述になります。 var hoge = 'test'; さらに複数の変数宣言と、値の代入は同時に行うことが可能で、その場合以下のような記述になります。 var hoge = 'test1', huga = 'test2'; jQuery

    jQueryを読むために知っておきたい6つの知識 : tech.kayac.com - KAYAC engineers' blog
    hiro-rock
    hiro-rock 2009/09/16
    最近カヤックでjQueryネタ多いなー 勉強になります
  • jQuery history plugin

    THIS PLUGIN IS NO LONGER MAINTAINED! (2012-02-25) Please use other plugins like jQuery hashchange. About jQuery history jQuery history plugin helps you to support back/forward buttons and bookmarks in your javascript applications. You can store the application state into URL hash and restore the state from it. Download jquery.history.js Supported browsers Internet Explorer 6, 7, and 8+ Safari 4 an

    hiro-rock
    hiro-rock 2009/09/15
    location.hashとiframeでAJAXなサイトでもhistory.back出来るように実装するjQueryPlugins
  • JavaScript/HTML5 Emulators

    JavaScript/HTML5 Emulators Nintendo Entertainment System Emulators JSNES: A Javascript NES emulator CycloaJS: CycloaJS is a NES emulator implemented in JavaScript. FaithJS: FaithJS is a NES emulator which runs on your chrome. nes-js: This is JavaScript NES(Famicom) emulator which runs on browser. flownes: A NES emulator written in ES2015+ with flowtype Weaknes: Weaknes is a NES emulator written by

    hiro-rock
    hiro-rock 2009/09/11
    CANVASでNES
  • DropCatch.com

    hiro-rock
    hiro-rock 2009/09/09
    iPhoneサイトを作成する際に参考になるデータなど metaタグやらなんやら
  • 【ハウツー】jQuery on iPhone - jQTouchを使ったWebアプリ開発 (1) jQTouchとは | エンタープライズ | マイコミジャーナル

    iPhone向けWebアプリケーションの開発において、jQuery使いなら見逃せないプロダクト「jQTouch」のベータ版がリリースされた。同プラグインを使用すれば、ネイティブアニメーションを伴うWebアプリケーションでも簡単に開発できるようになる。jQueryベースのため、強力なAjaxアプリケーションだって可能だ。稿ではjQTouchを使ったWebアプリ開発方法を紹介しよう。 David Kaneda氏は8月30日(米国時間)、jQTouchの最新版であるjQTouch 1.0(beta)をリリースした。jQTouchはThe MIT Licenseのもとで公開されている、iPhone上で動作するWebアプリケーション開発に特化したjQueryプラグイン。デベロッパはjQTouchを使用することで、テーマやネイティブアニメーションをともなうiPhone用Webアプリケーションを簡単に

    hiro-rock
    hiro-rock 2009/09/08
    jQTouchのデモや説明など