スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jqGridのデモファイルを動かしてみる2

前回のデモで動かなかった部分を一部解消。
その方法を忘れないようにメモ。

Jqgrid_1.jpg

今回やったこと:jqGridのデモファイルを動かす(継続)
1.ローカルのファイルからサーバへのアクセスをしてjsonオブジェクトを受信できるように変更
(前回までだとサーバ上にファイルをアップロードしないとjsonオブジェクトを取得できなかった)
  -「”.htaccess”の作成により、XMLHttpRequestで同一外ドメインからのレスポンスデータを返信できるようにする(Access-Control-Allow-Originというヘッダを出力)

Jqgrid_2.jpg
・同一ドメインからのアクセスしか許さない設定となり、レスポンスがから。
Jqgrid_3.jpg

Jqgrid_4.jpg
・同一ドメインでなくてもアクセスできるよう、.htaccessファイルを作成・配置

Jqgrid_5.jpg

Jqgrid_6.jpg

Jqgrid_7.jpg

上記に関する参考サイト


2.jsonファイルの受取後、データがうまく取得できていない部分の確認と暫定修正
  -配列のキーを引用符ありで指定するように変更
  -php.iniファイルでのE_STRICTの無効化
スポンサーサイト

テーマ : ひとりごとのようなもの - ジャンル : 日記

Struts2 jQuery Plugin をさわってみた

jQueryの利用にあたって各コンポーネントをタグにし、開発者の作業負担や学習コストを下げれないか検討。
Struts2 jQuery Plugin というものがあり、やりたいイメージに近かったので取り合わえずサンプルを動かしてみた。
その際のメモ。

・Struts2の稼働確認
参考としたサイトは以下。
Struts 2入門(1)~基本形で理解する仕組みと構造~
http://codezine.jp/article/detail/2296
@いう間にWebアプリを作れる「Struts 2」入門
http://www.atmarkit.co.jp/fjava/special/struts2/struts2_1.html

ダウンロードサイト
http://struts.apache.org/2.x/index.html

その他、いくつかの参考サイトはあるが、いずれのサイトの情報を参考にしてもうまく動かすことができなかった。
シンプルなアプリケーションで動かす際に必要最低限なjarも不明で、\struts-2.2.3-all.zipのstruts-2.2.3\libのjarをすべて持ってくると、様々なメッセージが出てしまう。
結局のところ、struts-2.2.3-all.zip\struts-2.2.3\apps以下にある、struts2-blank.warをtomcat上に展開して、その中で使われているjarが最低限必要なjarということするのがよさそう。
struts2_blankIMG.jpg

(バージョンが変わると最低限の稼働に必要なjarというのも違うみたいなので・・・)
無事動いた。

以下、参考にしたサイト
・Struts2 jQuery Pluginの稼働確認
こちらはShowcaseのサンプルコード、struts2-jquery-showcase-3.1.0-sources.jar、struts2-jquery-showcase-3.1.0-warを参考にいつくかのコンポーネント(datepicker,Accordion,Tree,Grid)の稼働を自身のeclipse上で確認。
確かにこれならjQueryUI,pluginをあまり意識せずに使えそう。ただ、その反面このタグを独自に作ったり、メンテナンスをしていくのは大変なことは間違いなさそう。
ほとんど問題なく稼働確認はできたが、現在Tree,Gridで使うJSONデータがうまくとってこれていない。(2011/07/31)
なぜ??


Struts2 jQuery Plugin
http://code.google.com/p/struts2-jquery/

Struts2 jQuery Plugin Showcase
http://www.weinfreund.de/struts2-jquery-showcase/index.action

Struts 2にリッチUIを提供する「Struts2 jQueryプラグイン」
http://codezine.jp/article/detail/5500

Struts 2で手軽にJSONレスポンスを扱う「Struts 2 JSONプラグイン」
http://codezine.jp/article/detail/5563


datepickerIMG.jpg

accordionIMG.jpg

treeIMG.jpg

gridIMG.jpg

テーマ : ひとりごとのようなもの - ジャンル : 日記

JavaScript お勉強3(パフォーマンス全般)

ハイパフォーマンスWebサイト――高速サイトを実現する14のルールを読みました。
意外に知らないパフォーマンス改善手段がたくさん書かれていて目からうろこが落ちました。
ハイパフォーマンスWebサイト

以下目次
1章 ルール1:HTTPリクエストを減らす
1.1 イメージマップ
1.2 CSSスプライト
1.3 インライン画像
1.4 スクリプトおよびスタイルシートの結合
1.5 まとめ

2章 ルール2:CDNを使う
2.1 コンテンツデリバリネットワーク
2.2 節減の効果

3章 ルール3:Expiresヘッダを設定する
3.1 Expiresヘッダ
3.2 max-ageとmod_expires
3.3 キャッシュの有無の比較
3.4 画像以外にも適用可能
3.5 ファイル名にバージョンを付加する
3.6 例

4章 ルール4:コンポーネントをgzipする
4.1 圧縮の通知
4.2 圧縮の対象
4.3 圧縮による減量
4.4 圧縮の設定
4.4.1 Apache 1.3の場合(mod_gzip)
4.4.2 Apache 2.xの場合(mod_deflate)
4.5 プロキシによるキャッシュ
4.6 エッジケース
4.7 gzipの効果

5章 ルール5:スタイルシートは先頭に置く
5.1 プログレッシブ・レンダリング
5.2 sleep.cgi
5.3 「からっぽの白い画面」現象
5.3.1 CSSがページの最後にある場合
5.3.2 CSSがページの最初にある場合
5.4 「FOUC」現象
5.5 フロントエンド・エンジニアはどうすべきか

6章 ルール6:スクリプトは最後に置く
6.1 スクリプトに関する問題
6.2 並列ダウンロード
6.3 スクリプトによってダウンロードが中断される場合
6.4 最悪のケース:スクリプトが一番上で読み込まれる場合
6.5 最善のケース:スクリプトが一番下で指定されている場合
6.6 まとめ

7章 ルール7:CSS expressionの使用を控える
7.1 CSS expressionによる更新処理
7.2 問題への対処
7.2.1 1回限りのCSS expression
7.2.2 イベントハンドラ
7.3 まとめ

8章 ルール8:JavaScriptとCSSは外部ファイル化する
8.1 インラインか外部ファイルか
8.1.1 単純な比較ではインラインの方が速い
8.1.2 ページビュー
8.1.3 キャッシュが空かキャッシュ済みか
8.1.4 コンポーネントの再利用
8.2 実際のサイトにおける典型的な例
8.3 ホームページ
8.4 両方のよいところをとる
8.4.1 onload後にダウンロード
8.4.2 動的なインライン化

9章 ルール9:DNSルックアップを減らす
9.1 DNSのキャッシュとTTL
9.1.1 DNSキャッシュに影響を与える要因
9.1.2 TTL値
9.2 ブラウザの視点から見たDNSキャッシュ
9.2.1 Internet Explorer
9.2.2 Firefox
9.3 DNSルックアップ回数の削減

10章 ルール10:JavaScriptを縮小化する
10.1 縮小化
10.2 難読化
10.3 削減効果
10.4 例
10.5 補足事項
10.5.1 インラインスクリプト
10.5.2 gzipと縮小化
10.5.3 CSSの縮小化

11章 ルール11:リダイレクトを避ける
11.1 リダイレクトの種類
11.2 リダイレクトによるパフォーマンスの低下
11.3 リダイレクトの代替策
11.3.1 末尾のスラッシュの欠如
11.3.2 ウェブサイトの連結
11.3.3 内部トラフィックの追跡
11.3.4 外向きトラフィックの追跡
11.3.5 覚えやすいURL

12章 ルール12:スクリプトを重複させない
12.1 スクリプトの重複は起こりがち
12.2 スクリプトの重複によるパフォーマンス低下
12.3 スクリプトの重複を防ぐ

13章 ルール13:ETagの設定を変更する
13.1 ETagとは何か
13.1.1 Expiresヘッダ
13.1.2 条件付きGETリクエスト
13.1.3 最終更新日
13.1.4 エンティティタグ(ETag)
13.2 ETagの問題点
13.3 ETagは使い込むか削除する
13.4 ETagの使用実態

14章 ルール14:Ajaxをキャッシュ可能にする
14.1 Web 2.0とDHTMLとAjaxの関係
14.1.1 Web 2.0
14.1.2 DHTML
14.1.3 Ajax
14.2 非同期ならば必ず速いか
14.3 Ajaxリクエストの最適化
14.4 Ajaxをキャッシュ可能にする具体的方法
14.4.1 Yahoo! メール
14.4.2 Googleスプレッドシート

15章 米国トップ10サイトの分析
15.1 ページ容量、応答時間、YSlow評価
15.2 ページ評価の方法
15.3 Amazon
15.4 AOL
15.5 CNN
15.6 eBay
15.7 Google
15.8 MSN
15.9 MySpace
15.10 Wikipedia
15.11 Yahoo!
15.12 YouTube

JavaScriptを縮小化・難読化、CSSスプライト等すぐにでも使えそうなもの盛りだくさん。
徐々に検証していきたいと思います。

その他パフォーマンスに関してよくまとまっているサイトをめも

Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳)
http://www.inter-office.co.jp/contents/177/

第30回 JavaScriptの動作を軽くするための工夫
http://feed.designlinkdatabase.net/feed/outsite_81929.aspx

技術者視点のユーザビリティ考
http://feed.designlinkdatabase.net/feed/outsite_81929.aspx

JavaScriptを高速化する31のチェックリスト
http://journal.mycom.co.jp/news/2009/10/29/008/index.html




テーマ : ひとりごとのようなもの - ジャンル : 日記

JavaScript お勉強2(圧縮、難読化)

javascriptのパフォーマンス改善ということで圧縮ツールを調べてみました。
まずはこのサイトをチェック。

JavaScriptとCSSを圧縮・軽量化するオンラインツール集
http://coliss.com/articles/build-websites/operation/javascript/334.html

実案件適応を考えるとバッチ処理で圧縮を行いたいので、別途調査。
いろいろ見てみると
「dojo ShrinkkSafe」「YUI Compressor」「JSMin」等がメジャーな模様。

ShrinkSafe本家サイト
http://dojotoolkit.org/docs/shrinksafe

Dojo shrinksafe使い方
http://www.syboos.jp/webjs/doc/dojo-shrinksafe.html

YUI Compressor本家サイト
http://developer.yahoo.com/yui/compressor/

YUI Compressorで簡単にjavascriptとCSSを圧縮
http://d.hatena.ne.jp/cos31/20080116/1200504657

Web/DB プログラミング徹底解説
http://keicode.com/script/scr21.php

JSMin本家サイト
http://crockford.com/javascript/jsmin

JavaScript ファイルサイズ縮小化ツール JSMin を使う
http://setupwin.blog109.fc2.com/blog-entry-37.html

番外編 google compressor
Google Closure Tools - GoogleによるリッチなWebアプリ開発のJavaScriptツール群
http://www.syboos.jp/opensource/bookmark/detail/google-closure-tools.html

Closure Compiler Documentation(google提供コンパイラ)

http://code.google.com/intl/ja/closure/compiler/docs/overview.html

縮率比較サイト

各JavaScript圧縮ツールでその圧縮率を比較
http://compressorrater.thruhere.net/

ShrinkSafeはデフォルトで難読化。YUI Compressor、CSSも適応OKという売り込みあり。どのツールもオプションも含め実際案件適応の場合には再度調査要

テーマ : ひとりごとのようなもの - ジャンル : 日記

JavaScript お勉強1(概要)

最近、Ajaxを少し触っていたが、JavaScriptの基本があまりわかっていない部分も多いので改めてお勉強。

JavaScript:
主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、ウェブページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。

主な歴史
JavaScriptの正式名称はECMA-262(標準化団体仕様)によるとECMAScript。現在、JavaScriptはブラウザに1.5と1.6のインタプリタを実装したブラウザが多い。
2000年?2003年にかけて、JavaScript 2.0 を作ろうとした動きがあったが、ネットスケープコミュニケーションズとマイクロソフトの対立でまとまらなかった。その後 ECMAScript 4 の策定が進められ、2006年の時点でMozilla Foundation はこれに基づいて JavaScript 2.0 を作成することを表明していた。
ただその後ECMAScriptの標準化作業が、Mozilla / Adobe / Opera / Google らが推す ECMAScript 4 と、Microsoft / Yahoo! らが推す ECMAScript 3.1に事実上分裂してしまった影響から、2008年8月に大きな方針転換が有り、JavaScript 2.0のベースを策定するプロジェクトとして新たに「ECMAScript Harmony」が発足した。同プロジェクトでは ECMAScript 3.1をベースとしつつも、ECMAScript 4 に入る予定だった機能のいくつかを取り込む形で標準を策定する予定となっている。なお、ECMAScript 4 で導入された名前空間・パッケージなどの機能は導入されない。

よく話題なる問題点:
セキュリティ制限(クロスサイトドメイン):
XMLHttpRequestや、IFRAMEを使った通信では、ダウンロード元のサーバ以外のURLにアクセスすることが出来ない。 そのため、一般的には、サーバを経由して他のドメインのリソースにアクセスすることが多いが、動的scriptタグの生成などにより、他のドメインのURLにアクセスすることが可能となっている。

互換性問題:
JavaScriptの登場当初は、ブラウザベンダー間で言語仕様の独自拡張競争が繰り広げられたためブラウザ間の互換性が極めて低かった。しかし、現在ではECMAScriptの登場により言語の実装に関する互換性は極めて高くなり、DOMなど関連仕様の実装に関する互換性も比較的高くなっている。ただ、現在でもECMAScript以前の古い書式やブラウザ独自のDOMを使ったコードが使用されている場合が多く、互換性が完全に解消されたとは言えない状況である。

参考サイト:
JavaScript提供: フリー百科事典『ウィキペディア(Wikipedia)』
http://ja.wikipedia.org/wiki/JavaScript

テーマ : ひとりごとのようなもの - ジャンル : 日記

プロフィール

ogatomi

Author:ogatomi
部署移動に伴い、SE8年目にしてホストマシーンからオープン系システムの転身。
一からの勉強しなおしの記録を出来る範囲でブログにつづりたいと思います。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
全記事表示リンク

全ての記事を表示する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。