ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」:phpspot開発日誌
PgwBrowser - Browser & OS / platform detection plugin for jQuery / Zepto ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」。 次のようにJSON値でブラウザ、OS、viewport情報を受け取れます。iOS、Androidなどにも対応 関連エントリ ブラウザ上で動くイラストレーターのOSS「mondrian」 SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」
JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita
JavaScriptでグリッド表示を行ってくれるライブラリは色々あるが、その中でも一番しっくりきたSlickGridをご紹介。 ※2016/3現在、SlickGridは更新が停止しています(2014/3/5より)。その代り、6pacという方が主要なバグフィックス(パッチ)を取り込んだalternative masterを運用してくれているので、こちらの方を使うとよいです(オフィシャルからの公認も出ています)。 JavaScriptのグリッド系ライブラリは下表のようにいろいろある。 | ライブラリ名 | 概要 | |:-----------|:------------|: | SlickGrid | 今回お勧め。表示速度・編集機能に優れる | | DataTable |初回の表示速度が若干遅いが、一旦表示したら早い| | jqGrid | 使ったことがないが、Exampleが豊富。ただ、オプ
DOM操作の最適化によるJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
日付を便利に操作するためのJavaScriptライブラリ色々 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptには日付を扱う為の “Date” オブジェクトがありますが、正直なところこれはあまり親切ではありません。 そこで、JavaScriptの日付周りで楽をするためのライブラリのメモをここに。 XDate XDate – A Modern JavaScript Date Library Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。 XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。 var d = new XDate(1977, 10, 25); // 1977/1
クライアントサイドの全文検索エンジン·lunr.js MOONGIFT
lunr.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webサイトを運営していて、煩雑な仕組みになりがちながらも実装を考えなければならないのが全文検索エンジンです。もし作ろうとしているのがWebアプリケーションであれば、いっそのことクライアントサイドで提供してみるのはいかがでしょう。lunr.jsを使えば手軽に実現できます。 デモアプリケーションです。左上に検索ボックスがあるのが分かるかと思います。 検索はインクリメンタルに行われます。ただし全文と言ってもタグとして指定された文字だけに限定されるようです。 インデックスの作り方です。まずindexとしてフィールドを作り、その後addメソッドを使ってオブジェクトを追加していきます。 lunr.jsではテキスト処理部分を別で設ける事ができますので非英語圏では別途分かち書きを行ってインデックス化でき
JavaScriptのテストを開発工数に入れてもらうには？
2013年4月27日、六本木ヒルズ森タワーのグーグルにて「第38回HTML5とか勉強会」が開催された。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやWebデザイナ向けの勉強会だ。今回のテーマはJavaScriptのテストフレームワーク。別室のサテライト会場を用意しなくてはならないほど会場は多くの参加者であふれた。テーマへの関心の高さがうかがわれる。テストフレームワークを使いこなす現場のプロたちの解説により、その最新事情と基本的な使い方が分かった。 JavaScriptテストの必要性と最新事情 サイボウズの佐藤鉄平氏は、JavaScriptのテストの基礎知識と全体像について語った。 公開スライド 佐藤氏は、結合テストやユニット（単体）テスト、そのほかにユーザビリティテストなど、そもそもテストにはどんな種類があるのかを解説した後、ユニットテストの重要性を強調した。技術面で開発チー
JsRender JavaScript と HTML を使用してクライアントの洞察力-
注意 このページにアクセスするには、承認が必要です。 サインインまたはディレクトリの変更を試すことができます。 このページにアクセスするには、承認が必要です。 ディレクトリの変更を試すことができます。 この記事は機械翻訳されたものです。 クライアントへの理解 JavaScript、HTML と共に JsRender を使用する (機械翻訳) John Papa コード サンプルのダウンロード テンプレート コードを削減し、メンテナンスを簡素化する多くの開発プラットフォームを使用し、HTML5 と JavaScript の例外はありません。JsRender 定型文構造を一度定義して、HTML を動的に生成するために再利用することができます JavaScript ライブラリです。JsRender 新しいテンプレート ライブラリは、コードレスのタグ構文をおり、高パフォーマンスする jQuery
クライアントへの理解 - JsRender の高度なテンプレート機能
JsRender は式の評価をサポートしますが、式の割り当てや、ランダム コードの実行はサポートしません。このため、変数の代入を実行する式や、通知ウィンドウを開くなどの操作を実行する式は使用できません。式の目的は、式を評価し、結果をレンダリングするか、結果を基にアクションを起こすか、結果を別の操作で使用することです。 たとえば、JsRender で {{:a++}} を実行すると、変数をインクリメントしようとするため、エラーになります。また、{{:alert('hello')}} も、存在しない #view.data.alert という関数を呼び出そうとするため、エラーになります。 カスタム タグを登録する JsRender には、カスタム タグ、コンバーター、ヘルパー関数、テンプレート パラメーターなど、いくつか強力な拡張ポイントが用意されています。各拡張ポイントを呼び出す構文は、次のと
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
クライアントサイドJavaScriptでのビューの作り方4つ - id:anatooのブログ
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
JavaScriptと非同期のエラー処理
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。前回のコールバック地獄に関する記事では、複雑な入れ子になりやすい非同期処理でも、GeneratorやjQuery.Deferredを使うことで、同期的な見た目に変形できることを示しました。 ところで、非同期処理においてはもう一つ「 エラー処理に例外が使えない 」という問題があります。今回はエラー処理について考えてみたいと思います。 例外を使ったエラー処理 非同期処理の話の前に、一度「例外」についておさらいしておきましょう。JavaScriptに限らず、エラーと言えばよく例外を使って記述されます。 「Web APIから500が返ってきた」とか「入力された値が期待する型
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam
前回書いた 短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ が好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。 ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。 ですが、現在はjQueryで社内システムの 画面をつくる(Ajaxとかを使って)事を任せてもらっています。 なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？ まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。 ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。 これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語
JavaScriptで金額の表記にコンマを付ける | バシャログ。
まだカーテンがこないminamiです。 金額をサイトで扱う場合、コンマを使った表記が必要になる場面もあると思いますが、JavaScriptで自動的に追加する処理を作ってみました。 3桁ごとにコンマをつける サンプルは下記になります。 3桁ごとにコンマをつけるサンプル 肝になるのは下記の処理です。入力した数字（文字列）に対して、（任意の数字）+（下3桁が数字）にマッチする限り繰り返し処理を行います。 // 3桁ずつコンマが振られるまで再帰的に処理 function addComma(num) { var _num = num.replace( /^(-?\d+)(\d{3})/, "$1,$2" ); if(_num !== num) { return addComma(_num); } return _num; } 下記の部分では正規表現を使ってマッチしています。 var _num = n
ajaxzip3 郵便番号検索 株式会社人気組
株式会社人気組, ajaxzip3, 郵便番号検索ajaxzip3 世界一、簡単に設置できる郵便番号検索を目指して！ 設置サンプル このページのHTMLソースコードを確認してみてください。 ajaxzip3は既存のHTMLページにたった2行のコードを加えるだけで設置できます。 プログラミングやサーバの設定は必要ありません。 郵便番号を入力すると自動的に住所が表示されます。 1ボックスで郵便番号7桁を入力させる場合の設定例 都道府県と以降の住所を分ける場合 郵便番号： 都道府県： 以降の住所： 都道府県と以降の住所を分けない場合 郵便番号： 住所： 郵便番号を3桁-4桁形式で入力させる場合の設定例 郵便番号：－ 都道府県： 市町村区： 以降の住所： Powered by 株式会社人気組
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの「this」は「4種類」？？ - Qiita
