日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。

js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
はいどうも~。 季節の変わり目のせいか咳がずーっと止まらなくて、 予想に反して腹筋力が若干向上してしまった虚弱エンジニアの吉田だよ。 今回は jQuery.tmpl() を紹介してみたいと思うよ。 (今回は口語調で書いてみるけど許しておくれ。この記事は夜中にお酒を飲みながら書いているんだ。) jQuery.tmpl() っていうのを、PHPプログラマ向けに簡単に説明してみようと試みると、 SmartyのJavaScript版みたいなもの、って言えばイメージしやすいかな? つまり、JavaScriptで使えるテンプレートエンジンってこと。 Webアプリケーションを開発するとき、サーバサイドだと技術もかなり枯れてきているから、 例えばPHPなんかだとSmartyを使えばModelとViewを分離するのはそんなに難しくないよね。 でも、フロントサイド(HTMLやCSSやJavaScript)のG
Googleの「mod_pagespeed」にキャッシュ活用支援の新機能が搭載された。初訪問のサイトでも読み込みが高速化する仕掛けだ。 Webページ表示の高速化支援ツール「mod_pagespeed」の最新バージョンに導入された新機能について、米Googleが12月19日のブログで説明している。mod_pagespeedはバージョン1.2.24.1のβ版が12月14日にリリースされた段階。初めて閲覧するサイトでブラウザキャッシュの活用を支援するフィルタなどが加わっている。 バージョン1.2で追加された新機能のうち、「canonicalize_javascript_libraries」は、多くのサイトが使っている主要JavaScriptライブラリを、JavaScriptライブラリホスティングサービスでホスティングされているライブラリと入れ替えるフィルタ。 jQueryやjQuery UIなど
MTSです。 jQueryを使ってWebページの一部を動的に書き換える場合ってありますよね。 こんな感じで。 <script type="text/javascript"> $.ajax({ ~ 中略 ~ success: function(data, status, xhr) { $("#test").append("<div id='hoge'>" + data.num + "</div>"); }; }); </script> 一部分であればこれで十分ですが、書き換える規模が大きくなった場合、JavaScript内でハードコーディングするのは避けたいですよね。 そういう場合、今回紹介するjQuery用のプラグインjTemplatesが便利です。 公式サイト:http://jtemplates.tpython.com/ jsファイル読み込み scriptタグでsrc設定するだけです。
こんにちは、keiです。 今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。 ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。 手軽に実装できる 見た目が今風 (大容量なので)アップロード中にプログレスバーが表示される Uploadify http://www.uploadify.com/ 複数ファイルアップロードが可能なjQueryプラグイン。 HTML5バージョンとFlashバージョンがあります。 長所 豊富なドキュメントとデモ 高いカスタマイズ性 短所 HTML5はライセンスが必要 Plupload http://www.plupload.com/ HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応し
ひねりも何もない代入だけの行でエラーが発生している。 調べてみるとタグのIDと変数名がぶつかっていると発生するエラーということが判明。 なので変数名を変更して解決。 必要ないところでグローバル領域を使用しているのもどうかと思うがIEがID名で変数を作ってしまうのはとても厄介。 はまらないように気を付けよう。 ※ネットで突込みを見つけたので追記 2012/06/06 http://b.hatena.ne.jp/entry/www.crossl.net/blogwww.crossl.net/blog/ie8_err_nothing_prop_method/ referer見てたら見馴れないリンク元があったので見てみたら記事に対する突込みがあった。 ※引用 違うと思う。var で変数宣言しろってのが本筋だと思う。まあID属性値がそのままグローバルオブジェクトのプロパティになるのもどうかと思うけど
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
概要 ▶ 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって本ページはプロモーションが含まれている場合があります 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は
[追記] 2013/9/1 三年前の記事が未だに読まれているようなので、一応書いておきますが、あれから色々変わってもっと良いものも出ています。 QUnit でも別に問題はないですが、今から QUnit を使うよりは http://visionmedia.github.io/mocha/:title=mocha] とかの方が個人的にはお勧めです。とにかく、今は色々あるのでもっと別の選択肢調べて見ることを個人的にはおすすめします。別に QUnit は使わないほうが良いとは言いません。 JavaScriptのテスティングフレームワークはいろいろありますが、自分は今主にQUnitを使っているので、少し使い方をまとめて見たいと思います。 [追記]今回作成したソースを上げました。ninja.js QUnit とは QUnitはもともと、jQueryをテストするために開発されたJavaScript Un
ちょっとしたテクニックなのかもしれないですが、 formのテキストエリアで改行つきの入力をしたときに、 改行を自動的にbrタグになる方法があったので、 メモとしてエントリーしておきます。 改行をbrにするスクリプト 改行をbrにするには正規表現を使う。 調べたところによると、ブラウザによって改行コードが違う可能性もあるので、 二つ指定しておくのがポイントのようだ。 改行は正規表現では「\r\n、\n、\r」らしいので、 これが含まれていたらbrタグに変換すればよい。 必要なスクリプトは下記の通りである。 尚、今回も指定しやすいようにjQueryを利用しています。 ■スクリプト $("textarea").change( function() { var txtVal = $(this).val(); txtVal = txtVal.replace(/\r\n/g, "<br />
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ! 毛根にはこれからもがんばってほしい!いつだって頭を温かいまなざしで見守
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く