ウェブ制作・開発時に使用するさまざまな言語・サービスのチートシートをまとめた「OverAPI」を紹介します。 HTML, CSS, jQuery, JavaScriptなどのフロントエンドから、Ruby, PHP, Python, MySQL, Javaなどのバックエンド、正規表現、Gitなども揃っています。
2012年11月24日08:45 カテゴリTipsLightweight Languages Perl & JavaScript - 万能配列操作関数spliceを覚えておこう Perl Cookbook (English) Christiansen / Torkington [邦訳: Perlクックブック] 風邪が全然抜けない…リハビリしなきゃ… 2012/11/23:リストを任意件数ごとにぬるぬる処理する用のモジュール書いた - bayashi.net 鉈でひげ剃り感があるのは、こうも書けるからかな。 use 5.012; sub fizzbuzz { my @fizzbuzz; push @fizzbuzz, ('Fizz')[$_%3] . ('Buzz')[$_%5] || $_ for @_; @fizzbuzz; }; my @hundred = (1..100); whil
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点(2012年11月)では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかも こんにちわ。寒くなってきましたがみなさまお元気ですか? さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。 使い方はとっても簡単です。 まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。 これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での
HOME>jQuery>7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか? String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 どうもこんにちは、フレッシュさに定評のない新入社員のtek_kocです。 初めてのお仕事として「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、2週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 ということで、Titanium Mobileで試しにアプリ開発をしてみた感想を書いてみました。 そもそもTitanium Mobileとは? Titanium Mobileとは、Appcelerator社によるスマートフォン対応アプリケーションの開発環境です。 iPhoneやiPad、Androidを
TIPS 034:ストレージにデータを保存する TIPS 035:ストレージのデータを取得する TIPS 036:ストレージのデータをツールから確認する TIPS 037:ストレージからすべてのデータを取り出す TIPS 038:ストレージ上のデータを削除する TIPS 039:ストレージにオブジェクトを出し入れする TIPS 040:ストレージの登録/更新/削除を監視する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 ストレージは、大きくセッションストレージとローカルストレージに分類できます。両者の違いは有効範囲です。 セッションストレージ(Session Storage)は、ブラウザが起動している間だけ有効です。ブラウザを閉じたタイミングでデータは破棄されますし、異なるウィンドウ/タブ同士でもデータを共有することはできません。 一方、ローカルストレ
TIPS 007:キャンバスを準備する Canvas APIを利用するには、まず図形の描画先(=キャンバス)を準備しておく必要があります。 [リスト1]キャンバスを準備するコード(canvas.html) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色/枠線を指定(3)--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備(1)--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
TIPS 018:キャンバスにテキストを描画する TIPS 019:文字列の横幅を計算する TIPS 020:図形に影効果を追加する TIPS 021:線形グラデーションを表現する TIPS 022:円形グラデーションを表現する TIPS 023:キャンバスに画像を貼り付ける TIPS 024:画像の一部を切り出して貼り付ける TIPS 025:画像を繰り返し表示する TIPS 026:画像の特定領域を切り抜く TIPS 027:特定の座標がパス領域に含まれるかを判定する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 018:キャンバスにテキストを描画する キャンバスにテキストを描画するには、strokeText/fillTextメソッドを利用します。 [リスト1]キャンバスに塗りつぶし文字、枠文字を描画するコード(text.html) wi
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028:画像が重なった場合の処理方法を指定する TIPS 029:キャンバスの設定を保存&復元する TIPS 030:画像を拡大/回転/変形して表示する TIPS 031:キャンバス上の図形の一部を切り出す/貼り付ける TIPS 032:マウスポインタの座標に応じて図形を描画する TIPS 033:キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028:画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
そんな訳で、普段何気なく使っているjQueryですが、そのセレクタAPIについて多少は知っておいたほうが良いよなということで、いくらか調べてみました。けっこう地味な内容なので、「へー、そんな風になってるんだぁ…」と軽く読み流していただければと思います嘘です。割と大事な内容なので、しっかりと把握しておくのがよろしいかと思います。 はじめに - jQueryのセレクタAPI jQueryでは、$('#hoge .fuga');というようにCSSのセレクタを用いてHTML要素を取得します。あまりにも便利な機能で普段意識することはありませんが、内部ではgetElementById();といったブラウザのネイティブAPIを駆使したり、JavaScriptゴリゴリのメソッドを呼びまくって指定どおりの要素を取得してきているわけです。こういった機能のことをセレクタAPIと呼びます。 セレクタAPIの内訳
[前回までの話へのリンク] ・node.js と thread hog の話(1) ・node.js と thread hog の話(2) では、なぜ今頃になって HTTP Server の c10k 問題(もしくは、thread hog 問題)が顕在化したのだろう。 当時(90年代の終わり頃)と比べて、もっとも大きく変わったのはCPUの性能である。クロック数は、数百MHzから数GHzへと一桁増えたし、マルチコア化もしている。CPU 性能だけ見れば、当時の数十倍の能力が出てしかるべきである。 しかし、実際の人生はそう簡単ではない。サーバーのパフォーマンスはCPU性能だけが決めるわけではないからだ。そこで、ボトルネックの一つとして注目されはじめたのが、thread の数なのである。 前回述べた様に、thread 一つあたり 2MB~8MB のスタック領域を仮想メモリ空間に確保しなければならな
先日の「node.js と thread hog の話」には、たくさんのコメントをいただいたが、やはり「イベント駆動型」のプログラミングには抵抗がある人も多いようだ。そこで、JavaScript の無名関数を使ったイベント駆動型のプログラミングの可読性が悪くないことを示すために、「朝7時に目覚まし時計をかけて眠りにつき、朝ご飯を食べ終わったら会社に行く」という典型的な「サラリーマンの朝」をイベント駆動型のJavaScriptで記述してみた。 注目して欲しいのは、素早く出来る「着替える」「顔を洗う」などの動作は割り込み不可な動作なので、通常のプログラミングと同じようにシーケンシャルに実行するが、時間のかかる「朝ご飯を食べる」「駅まで歩く」などの動作は割り込み可能な状態で実行し、"complete" のイベントを受けてから次の動作に移る点だ。 ちなみに、目覚まし時計は 「スヌーズボタン」付きな
node.js のような非同期APIを使ったプログラミングに拒絶反応を示すエンジニアが多い理由の一つが、非同期APIと例外処理の相性の悪さだ。 Javascript の場合、例外処理はこんな感じに記述する。 function f(i) { try { throw new Error('an error #'+ i); } catch(e) { console.log('Error caught:', e.message); } } ところが、これに非同期APIが絡むと、とたんに分かりにくくなる。例えば下の例。 function f(i) { try { setTimeout(function() { throw new Error('an error #'+ i); }, 1000); } catch(e) { console.log('Error caught:', e.message)
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く