業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
5. - 今日の内容 - 1. 立ち上がれAngularの巻 2. moduleは俺のロッカーの巻 3. 依存してしまおうの巻 4. ブラウザ(DOM)に値を表示の巻 5. データ管理はサービスよの巻 6. データの反映は何時？の巻 7. <script src=“//ajax.googleapis.com/ajax/libs/jquery/ 2.1.0/jquery.min.js”></script> ! ! ! <script src="https://ajax.googleapis.com/ajax/libs/ angularjs/1.3.0-beta.7/angular.min.js" ></script> ! ! <div class="jsTestApp" > {{ 1+1 }} </div> AngularJSのライブラリです！ AngularJSの機能で {{ 1+1 }}
「このJavaScriptコードが動かないのは，なぜですか？」というミニクイズ集。 すべて制限時間は１分。 別名，JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年５月現在，全５３記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう （バブリングの対処） オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
CakePHPの1.3rc版がリリースされたので、ぼちぼち試しています。 1.2→1.3のマイグレーションガイドなどを見ながらやってみたら、いろいろと変更しなきゃならない点はありましたが、とりあえずエラーが出なくなるところまでは移行できてきました。 今回は、新しく追加になったJs Helperをちょっと使ってみました。 今までのCakePHPでは、AjaxヘルパーなどでPrototype.jsを使っていましたが、今回のアップデートで新しくなったJs Helperは、使うJavascriptライブラリを選ぶことができます。現時点で標準で対応しているのは jQuery、Prototype/Scriptaculous、Mootoolsで、コントローラからエンジンを選ぶことでどのライブラリを使うかを選択できます。 var $helpes = array('Js'=>array('Prototype
状況はかなり改善した 非同期、setTimeout, Ajax系はSinonJSで簡単に Swarm系のツールでDOMのテストも容易に 環境構築も非常に楽になった PhantomJSはバイナリもあるし、ビルドも簡単 Swarm系のツールならブラウザでURLへアクセスすればすぐテスト開始
[対象: 上級] Ajax利用したコンテンツをGoogleにクロール可能・インデックス可能にさせるための設定方法を今日は取り上げます。 すでにAjaxを理解している人向けなのと自分へのメモを兼ねているのでAjaxに対する細かな説明や用語解説は省きます。 「#」（ハッシュ）がURLに含まれている場合、#以下のURLをGoogleを含む検索エンジンはインデックスしません。 A. http://www.suzukikenichi.com/ajax.html#abc B. http://www.suzukikenichi.com/ajax.html#xyz 上のAとBはどちらも、http://www.suzukikenichi.com/ajax.html というURLをクロールしてインデックスするだけです。 #付きのURLをインデックスすることはありません（終わりに補足説明あり）。 Ajaxでは、
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
Developers need control over their own environment! Cloud9 IDE is aiming to be the IDE for Javascript developers. We have all experienced the Eclipse variants and other Java or C++ IDE's for which webdevelopment and javascript was an afterthought. Extending these applications or customizing them to our needs was done in either Java or C++ and generally very difficult. We are developing application
アジャイル開発に取り組むチーム向けのコーチングや、技術顧問、認定スクラムマスター研修などの各種トレーニングを提供しています。ぜひお気軽にご相談ください（初回相談無料） みなさんこんにちは。@ryuzeeです。 テスト自動化について簡単に教えてほしいと言われることが多いので、以下にまとめました。 テスト自動化/テスト駆動開発についてXPのプラクティスの中で、最も単体で導入しやすいプラクティスの１つであるこのプラクティスのみで１冊の本が書けるくらい奥が深い基本的な方法失敗するテストを書くできる限り早く、テストがパスするような最小限のコード本体を書くリファクタリングをする適用範囲通常では、独立性の高いクラスやファンクションへの適用が良いGUIや分散オブジェクト、自動生成されたコード、DBのスキーマに関するテストは導入が難しい既存システムにおいて、テストが準備されていない場合に、部分的に導入するの
JSONとは何か? JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627（http://www.rfc-editor.org/rfc/rfc4627.txt）」として公開されています。 例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します（図1）。 リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが
iphoneアプリの画面設計をしていて、画面フローの表記をしようとして普通の画面フローチャートだとUIインタラクションを表記しにくいよね、と思ったので考えてみた。 画面フロー図の限界webの画面フロー図は以下のことができないなー、不便だなーと思ってた。 画面展開を表記する記法がない。webだと_blankくらいしかないけどアプリだと不便 画面が内包しているコンポーネントを表記できないので、画面のどのボタンが次の画面につながっているのかわからない。 ↑レベルのを練ろうとするとワイヤーフレーム/プロトタイプをつくる作業になってしまう。プロトタイプだと逆に画面のつながりや展開の法則性がとらえにくく、整合のとれたインタラクションデザインが試行錯誤しにくい そもそも画面展開の種類って網羅的に把握されてる？ 構造化寄りの表記方法は「情報アーキテクチャ、インタラクションデザイン記述のためのビ
Simple AJAX Commenting System ? Tutorialzine 画面遷移なしにAjaxでシームレスに実装できるコメントシステム作成チュートリアル。 書き込むと内容がそのままDOMツリーにアニメーションしながら追加されるという、よくありそうなコメントシステムの実装チュートリアルとサンプルプログラムです。 似たようなものを実装したい場合に参考にできるかもしれません。 フォーム部分もそれなりにスタイルされており、JavaScriptによるブラウザ上バリデートも効いてます。 改善の余地がありますが１から作るよりサクっと実装したい場合に使えそうです。 関連エントリ PHPとjQueryで作るAjaxなグループチャットスクリプト PHP+Ajaxなチャットスクリプト：YShout
Ajaxを使ったクールなインタフェースを持つカレンダー実装スクリプト「PHP Event Calendar」 2010年04月26日- PHP Event Calendar - PHP Scripts - CodeCanyon Ajaxを使ったクールなインタフェースを持つカレンダー実装スクリプト「PHP Event Calendar」というものが公開されています。 UIは次のようにクールで、画面遷移もAjaxによって行われます。 クリックするとLightBox風にイベントがポップアップします。 管理画面もいい感じで、WYSIWYGで予定を編集できます。 有償＄１４となっていますが、１から同じものを作ることを考えるとなかなか安く手に入ります。 改造もPHPなので容易ということで、似たような機能を実装したい場合においては購入してみるのもよさそうですね。 関連エントリ あなたの空き状況が一目でわ
サイト更新情報 2006/12/06 よく使われているページを検索窓から簡単に辿れるようにしました。(検索窓に「prototype」と入力) 2006/11/27 JavaScript入門/応用サイトJavaScriptistオープン！ 2006/11/23 試して確認できるJavaScriptオンラインエディタを公開 2006/11/20 JavaScriptリファレンス、逆引きサンプル集を公開 2006/11/19 JavaScriptライブラリ活用ページ公開 2006/11/15 JavaScriptistベース機能の構築完了 過去のサイト更新情報
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
