タグ

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

  • jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog

    来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの?いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる? 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの? 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ

    jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
    hiro-rock
    hiro-rock 2009/09/06
    jQuery基本編おさらい
  • YUI Dependency Configurator

    YUI Dependency Configurator: Choose the YUI components you want to use on your page; beneath the button toolbars, the text area will update with the sorted dependency list required to power your desired components. By default, we'll use aggregrate (rollup) files where possible and serve the files from yui.yahooapis.com. You can allow rollups and/or set your own base URL path if you choose. The Com

    hiro-rock
    hiro-rock 2009/08/31
    YUIをホスティングして自由に使わせてくれる、Yahoo!謹製のサービス
  • jQuery言語入門 : tech.kayac.com - KAYAC engineers' blog

    先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 (Traversing以外のmethodはインデントを維持します) そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla

    jQuery言語入門 : tech.kayac.com - KAYAC engineers' blog
    hiro-rock
    hiro-rock 2009/08/28
    jQueryの使い方 知れば知るほど便利だなぁー 細かく説明しているのであとで読む
  • Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か? - IT戦記

    はじめに Safari 3.1 には Client-side database storage (SQL API とも呼ばれています。)という新しい仕様が実装されました。 というわけで、この新しい API について色々調べたことを簡単にまとめておきます。 Client-side database storage が使えるブラウザ 2008 年 03 月 27 日現在では、 Safari 系のブラウザのみです。 Safari 3.1 WebKit Nightly Client-side database storage とは Selectors API とは HTML5 で定義された仕様です。詳細に関してはこちらをどうぞ。 簡単に説明すると JavaScript 内でリレーショナルデータベースを使えるということです。 もっと簡単にイメージするために、実際のコードを示すとこんな感じです。 va

    Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か? - IT戦記
    hiro-rock
    hiro-rock 2009/08/23
    WebKitで実装されているSQL APIのまとめ 参考にする
  • 06 | 8月 | 2009 | さくらたんどっとびーず

    hiro-rock
    hiro-rock 2009/08/22
    WPのThemesをAutoPagerizeに対応させる
  • WordPress の更新情報を JSONP 形式で出力 - dogmap.jp

    さて、昨日のエントリの続き。 「Googlle AJAX Feed API なんて外部のサービスに依存したくないんじゃ!」という人のために、昨日と同様のことを自前で行うための方法。 WordPress の更新情報を JavaScript で取得して表示するには AJAX と呼ばれる技術を使います。 しかし、http を通してデータを読み込むための XMLHttpRequest では、制限として別ドメインのデータを読み込むことができません。 これを回避する方法が JSONP です。 hiromasa さんが、昨日のエントリにトラックバックしてくれた静的 HTMLWordPress を埋め込む方法を用いて JSONP 形式で、WordPress の最新記事を取得してみましょう。 まずは JSONP 形式で、WordPress の最新エントリ一覧を取得する方法。 以下のようなコードを ge

    hiro-rock
    hiro-rock 2009/08/21
    WPでJSONP
  • BETKING88: Daftar Situs Judi Slot Online Dan Judi Online

    Situs Judi Online, Dengan Pelayanan Terbaik BETKING88 Judi online bisa menjadi sebuah alternatif terbaik bagi para penjudi yang belum menemukan situs terbaik hingga sampai saat ini. Di zaman yang sudah serba digital seperti saat ini dengan menggunakan koneksi internet saja penjudi dapat bermain permainan game judi online favoritnya yang tentunya dapat diakses setiap saat dan dimanapun saja via pon

    hiro-rock
    hiro-rock 2009/08/21
    jQuery Pluginsの作成方法
  • 【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル

    特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため

    hiro-rock
    hiro-rock 2009/08/18
    HTML5の便利機能などを紹介
  • 細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog

    実は技術部ではなく、演出部所属のagoです。 先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。 1 .addClass, removeClassはスペース区切りで複数のclassを渡せる .addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。 //classの順番は保持します。 //<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。 $('div').addClass('hoge huga'); //<div class="hoge gege huga">があった場合、<div class="gege">になります。 $('div').removeClass('hoge huga'); ただし、hasC

    細かすぎて伝わらないjQueryの機能5選 - KAYAC Engineers' Blog
    hiro-rock
    hiro-rock 2009/08/16
    jQuery Tip's コアソースから、よくあるドキュメントには載っていない細かい話
  • iPhone 3G用のWebページを作る3 [Javascript] All About

    iPhone 3G用のWebページを作る3 [Javascript] All About
    hiro-rock
    hiro-rock 2009/08/14
    iPhone向けサイト作成ライブラリ iPhone(W314xH429) Android(W320xH356)
  • Infinite Scroll

    Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web. The original version of Infinite Scroll was first released by Paul Irish 2008. It was a break-through work of front-end development, granting web developers a cutting edge experience via a user-friendly yet powerful jQuery plugin. That lin

    Infinite Scroll
    hiro-rock
    hiro-rock 2009/08/05
    AutoPagerize的なScriptをWordPressで作ったサイト内に設置する
  • JQueryを利用してTwitterのfriends_timelineを取得するサンプル - NAL-6295の舌先三寸

    今回はBasic認証が必要なTwitterのfriends_timeline(今回は自分のタイムライン)を表示するサンプルです。 ポイントは、$.getだとBasic認証するために必要な情報を送信できないので、より柔軟な$.ajaxを利用している事と、usernameとpasswordを指定しているという事です。 その他の部分は前回のサンプルそのままです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery.js"></script> <script> func

    JQueryを利用してTwitterのfriends_timelineを取得するサンプル - NAL-6295の舌先三寸
    hiro-rock
    hiro-rock 2009/08/03
    jQueryの$.ajaxで、twitterのfriends_timelineを取得する
  • Because I am special

    Ok, I need some help today. I heard the word "disinvestment" and frankly it makes me want to scream. I looked it up and it is in the dictionary and it is a real word. I understand that it is a word, but I am thinking that "divestiture" is a better word that a whole hell of a lot of people use more frequently. So I need to figure out the history of disinvestment. Was it created out of (poor) usage?

    hiro-rock
    hiro-rock 2009/06/22
    jQueryで背景画像のpositionを移動させて変化のあるデザインを演出
  • [JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu

    一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像(クリックで拡大) ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。

    hiro-rock
    hiro-rock 2009/06/21
    CSS SpriteでもアニメーションさせるjQueryPlugins
  • OpenSocial 0.9 の OSAPI 仕様を和訳してみました - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 4 月に公開された OpenSocial 0.9 では JavaScript API が大幅に強化され、「OSAPI」という軽量 API が新たに追加されました。 OpenSocial 0.8.1 までの JavaScript API はちょっと形式ばっていて使いづらかったのですが、この OSAPI はより JavaScript らしい形式で簡単に呼び出せるのが特

    hiro-rock
    hiro-rock 2009/06/17
    オープンソーシャルの仕様
  • [Ajax] Google AJAX Feed APIでRSSを表示する

    Google Ajax APIシリーズ記事その3はFeedについて。 RSS表示に関しては前にPHPで表示する方法を書きましたが、Magpie RSSだとページをPHPにする必要がありました。 Google AJAX Feed APIを利用すると、javascriptファイルを読み込むだけでhtmlファイルに外部のRSSを表示させることが出来ます。 なんでか妙にマイナーな気がするのはきっと難しそうに見えるからに違いないと思い、3ステップで使えるようにしてみた。 ZIPも用意してみたのでお試しあれ! ※Mapはこの記事、Searchはこの記事で解説しています。 使い方 まず、Feedを表示させる要素を用意します。IDをつけてください。 デフォルトはgfeedです。 <div id="gfeed"></div> 必要なスクリプトタグをRSSを表示させたいページに読み込ませます。 <script

    [Ajax] Google AJAX Feed APIでRSSを表示する
    hiro-rock
    hiro-rock 2009/06/14
    Google AJAX Feed APIは便利だけど確かにあまり使われていないなぁ〜 仕事では数回使ってるけどね
  • JavaScriptのオブジェクトについて考察してみた - あと味

    JavaScriptを勉強しているとオブジェクトとはなんぞや?ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について

    JavaScriptのオブジェクトについて考察してみた - あと味
    hiro-rock
    hiro-rock 2009/06/13
    Jsのオブジェクトについて
  • jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」:phpspot開発日誌

    Setting cookies with jQuery jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」。 このjQueryプラグインを使えば、Cookieさえ1行で簡単に設定できてしまいます。 以下のコードを使って、example というクッキーのキーに foo という値を設定することが出来ます。有効期限は見ての通りですが、7日間有効 $.cookie("example", "foo", { expires: 7 }); パスの設定も以下のように行うことができます。 $.cookie("example", "foo", { path: '/admin', expires: 7 }); ブラウザに対するデータ設定として最もお手軽に使えるCookieですが、これはますます活用できちゃいそうですね。 プラグインのページはこちら 関連エントリ Java

    hiro-rock
    hiro-rock 2009/06/12
    jQueryでクッキー設定
  • オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その2 | Takazudo Clipping*

    自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな

    hiro-rock
    hiro-rock 2009/06/11
    JSオブジェクト指向
  • Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法

    Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ

    hiro-rock
    hiro-rock 2009/06/07
    WebSiteの最適化Tips