Jenkins ユーザ・カンファレンス 2012 東京のメモ
あとでまとめます。
Jenkinsプロジェクト現状報告とこれから(さったホール)
1000人超え!
現状
プラグインの拡大
本体のチケット総数・解決済みチケットも増加
世界中で使われている(アフリカやハワイでも)
新機能
週1でリリースしている
UIの改善
リンクホバーでのメニュー表示(ワンクリックで目的の動作)
ヘッダ・フッタの固定(ページが長くなっても目的の動作をすぐできる)
プラグイン画面
検索機能
機能をインストールしたらすぐ使える
バックエンドの改善
REST APIの改善
コマンドラインクライアントの改善
→プラグイン開発を便利にするため
BuildHive
GitHubとJenkinsの連携
OAuthでログインすると、プロジェクトが出てくる
ある程度自動的にプロジェクトを判定してくれる
法律関係の整備
Software in the Public Interestに加盟
寄付金集め
ライセンス関係などの明文化
今後の展望
プラグイン開発者を助ける
スイートスポットの拡大
より大規模環境で快適に
導入を簡単に
増え続けるプラグインへの対応
Amazonのようにおすすめ機能
Java開発用などのセット
計算機を湯水のように使えるようにしたい(中長期的に)
SIerのJenkins事情(S406)
NTTデータ社内展開
・自動ビルド
・静的コード解析
・自動テスト
・カバレッジ
・自動デプロイ
・規模計測
目論見
・品質向上
・コスト削減
・プロジェクト状況の見える化
取り組み
・SDワークベンチという社内ブランドとして展開
開発環境ツールセットにJenkinsを追加した
事例
10年間の長期運用
1.2Mstep
Java
ウォータフォール
月一のリリース
経緯
自動化を推進したい
リスクヘッジ
定常リリースに影響が少ないところで実施したい
結果
お客様に気に入ってもらえた
テスト自動化により品質担保・業務効率化
結果の見える化
長期運用案件では、定常業務に影響を少なくする
仕組み
SVNから取得し、解析などを行う
デプロイなどは従来通り(手作業)
工夫した点
動作環境の違い
ジョブごとにミドル環境を設定
Seleniumでブラウザテストを自動化
自動化範囲の選択
ビジネスへのインパクトが大きな機能
結果レポートの共有
品質管理チームが開発LANから切り離されていたため、Web画面を直接参照できない
レポートのポータビリティが必要
今後の展開
テストにブラウザバリエーションを拡大
自動デプロイ
→お客様の理解を得れたので進めていける
- プロジェクトK
3〜4ヶ月
120人
250kstep
Java
ウォーターフォール
使い方
ビルド・リリース・デプロイで利用
ポイント
Maven+Nexusで共有
ライブラリの共有・管理
定期的なビルド→リリース
各アプリのビルドをジョブとして管理
テスト環境へデプロイ
SCPで資材転送→リモートコマンドでデプロイ
デプロイ先が20面
1面に対して1日4,5回
担当者2名
効果
速度向上とコスト削減
ビルド・リリースの自動化
テスト環境へのデプロイの自動化
自動化で1回のビルド→デプロイのスピードが向上
- プロジェクトB
2年10ヶ月
1200人
4Mstep
Java
ウォータフォール
経緯
最初は計画していなかった
共通業務などの自動化
ビルドスクリプト作成などによる自動化
開発会社は複数
結合テスト
Jenkinsで各ビルドスクリプトを整理
結合テストに入り、内部リリースの頻度が増大した
→自動化が必須になった
各ビルドスクリプト用のジョブを作成
Jenkins用にカスタマイズ
実行条件・スケジュールをJenkinsで制御
使い方
ファイル転送・デプロイで利用
運用
1日4回の定時デプロイ
間に合った修正のみデプロイ
ビルド作業の効率化
小さなスクリプトが多数あった
ビルドラインの制御
40台位上のマシンへのデプロイを制御
作業待ち時間が大幅に削減
ジョブが開始してから1時間後にデプロイ完了
ビルド失敗の影響は大きいのでは?
段階的なリリース
まず1つの環境にデプロイ
30分動かして問題なければ全環境にデプロイ
貸し出し返却について
凍結された資材を取得することを貸出という
修正した資材を管理対象の資材に登録することを返却という
目的
構成管理対象物に意図しない変更を検知・防ぐ
デメリット
スピードの劣化
防げるエラーが限定的
ファイル名・ファイル数・ファイルサイズなどが主な確認ポイント
貸出返却を撤去した
1000人規模で防げるエラーが2件しか発生しなかった
うまくいった点
リリース頻度の向上
段階的なリリース
貸出返却の撤廃
まとめ
目論見に対して
ビルドとテスト環境へのデプロイで活用された
テスト環境の面数が多数存在
メトリクス自動取得やテストの自動化から導入を始めた
既存プロセス
ポータビリティがある結果レポート
SIの現状に合うプラクティスを取り入れていけば、開発スピードはまだまだ上がる
目的にあわせてプロジェクトに入れやすい形を模索していこう
愛されるJenkins氏になるために(S406)
ゲームで使用されている技術と課題
・サーバ
Perl
MobaSiF
・クライアント
JavaScript
ngCore
課題
超高速リリース
iOS特有の制限によるスケジュールの縛り
歴史的経緯のソースコード
全サポート端末で安定性の確保
Jenkinsの導入
・発端
手動テストの限界
各自の環境でサーバサイドの自動テスト
他の環境でバグが出たり・・・
とりあえず、自動テストを常に流す
自動テストの活用の改善
複数ブランチでの並行開発
イベント=ブランチ
安定ブランチに対してジョブを実行していた
git-flowによる解決策
→無理でした
全部ランチの自動テストをJenkinsで実施
iPadをXFDに(一覧で見やすいものを)
直列ジョブ詰まる問題への対応
Build-timeout Plugin
誰でも簡単に作れるジョブ
ブランチ名を変更すればOK
落ちるテストの対処
DBスキーマに依存するテストコード
落ちているテストは一旦無効化
テストごとにスキーマとフィクスチャを作成
→グリーンにすることが重要!
クラスとテストをテンプレート化し、自動生成
新しいソースは綺麗に作ろう
XFDによる即座の修正
必ずテストを書く
自分でJenkinsのジョブを書く
Jenkinsへの要望が増えた
サーバの状態監視
最初の改善
Perlcritic on Jenkins
アーキテクトUさんの改善
既存のコードは直さないという割り切り
新規はテストに組み込む
ベストプラクティスは守っておいたほうがいいよね、という認識への変化
今後やっていきたいこと
・自動テストの並列実行
Catalyst+proveで実験
・クライアントサイドの自動テスト
jasmine-node
マルチステージ型継続的インテグレーションのすすめ
テクマトリックス株式会社
継続的インテグレーションのメリット
・手戻りの削減・品質の維持
・いつでもリリースが可能
・作業コストの削減
・属人性の排除
・開発データの蓄積
バグ予測
メリットを享受できていますか?
・結合ビルドで行う
複数チームで複数モジュール
それぞれで結合までの手順が異なる
ビルドエラーの影響が他チームに及ぶ
結合できるレベルでないソースが構成管理に格納されている
→改善策
次の視点で見直すことが必要
・チーム・モジュール構成
・開発プロセス
デモムービーによる説明
サイトで確認できるらしい
おわりに
毎日が憧れの新築、反復可能なデリバリーによる常時新築システム(さったホール)
富士通研究所
背景
エクセルでの手順化より、人間が実行している
構築などは1回しかやらない
手順書の間違い・変更が更新されない
cleanの既存プラクティス
make all→make clean all
数ヶ月おきにOSクリーンインストール
運用でも適用したい
PaaSの環境開発
愚直に自動化
Chef Solo
手順書を記載
Rubyで記述
セットアップが簡単
パッケージの集約
OSバージョンとビットごとにビルドサーバを用意
Matrix Jobでビルド
ビルド後にパッケージ集約ジョブを呼び出す
Parameterized Trigger Plugin
ビルドジョブからアーティファクトをコピー
Copy Artifact Plugin
マシンの用意
各種Cloud Plugin
任意のタイミングでのVM制御が必要
デプロイ手順としてリブート
Java, Git, Ruby, Chef-soloをインストールしたテンプレートVMを用意
テンプレートからVMを作り、そこにデプロイ
電源を入れるジョブの例
Power CLIより実行
デプロイの実行
ノードをまたがって逐次実行するジョブ
Parameterized Trigger Plugin + NodeLabel Parameter Plugin
スローデプロイ問題
デプロイに60分かかる
スローテスト問題は、テストケースを分割して並列実行が1つの解
デプロイ所要時間の分析
・VMスナップショットへの復元
10分→3分
制約は増えるが速度のほうが重要
・インターネットからの分離
rpmやgemのダウンロードが遅いので、事前にアーティファクト化
45分から2分に
yum -y install --downloadonly libxml2
...
createrepo
外部影響の原因追求
インターネット接続がない環境へのデプロイ
・自前と既成の分割と冪等性
f(f(x)) = f(x)
・自前パッケージ
自分のソースからビルドするパッケージ
・既成パッケージ
他者が作ったパッケージ
更新頻度・インストール所要時間に違いがある
・デプロイスクリプトを分割
・冪等なデプロイスクリプトを作成する
自動化と高速化による変化
・早い失敗を目指す
パイプラインのなるべく早い段階でエラーとなるように
Fail fast
設定ファイルではなく、設定ファイル作成プログラム
設定ファイルの入力チェックなどを行える
・環境の使い捨て
本番と同じ環境で開発
高速なデプロイと冪等なスクリプトのおかげ
・ブランチごとにデプロイ
毎回新規に作られる環境による安心感
デプロイまで行うので試用ができる
まとめ
自動化できるものは自動化
・デリバリーも自動化しましょう
・クリーンと冪等で反復可能に
自動化をより高速に
・高速化の検討すべき
・迅速なフィードバック
・速ければ使い方も変わる
執事のJenkinsさんは万能
・CI以外もこなせる
・執事を遣い倒そう
LT大会:書籍執筆における継続的デリバリー
Kinect本執筆時の話
SPHINX
Pythonで動く
テキストベース
PDFにはビルドが必要
→Jenkinsを利用
どこで動かす?
CloudBees
基本Javaのみ動作
Virtual Pythonというのがあるらしい
githubへpush→CloudBeesでePubへ→編集者が確認
時間切れ。。。
LT大会:英語Jenkinsコミュニティの解説
(スライドなかったので、話を聞いてるとメモとれなかった)
英語コミュニティにぜひ参加してください
LT大会:Flash(ActionScript3.0)開発でもJenkinsを導入しよう
antがあれば何でもできる
でも大変。
Maven3プロジェクト
Flexmojos
コンパイルオプション、依存関係はpom.xml
JenkinsサーバにFlash Playerインストール
新規ジョブにMavenを
Xがないと動作しない
xvfb上でFlash Playerを実行
64bitOS上での動作が不安定
Flash自体の動作が不安定
実行時間が遅い
時間切れ。。。
LT大会:普通のSIerのJenkinsのある暮らし
ビルドパイプライン
社内フレームワーク
サポートしている環境の組み合わせが多い
(JDKは1.5〜7、DBも複数製品・複数バージョン)
組み合わせはマルチ構成
Join Plugin
自動デプロイ
Antを実行しているだけ
組み合わせによるバグを検出できる
自動化することで精神的に安定する
LT大会:運用でも使えるJenkins
Jenkinsのイメージ
開発に使う
ビルドに使う
バッチ処理
DBダンプ
ファイルのバックアップ
とか定時実行
→cron
エラーに気づかない
Jenkinsでできる
メールはもちろん
結果も
履歴も
REST APIで処理時間
スレーブ機能の活用
ちょっとしたジョブフロー
Join Plugin Build Flow Plugin
運用の手間が減らせる
利用
from numpy import array a = array([1, 2]) sum = a + a
これにより、sumには
array([2, 4])
が設定されます。
Google App Engineでnumpyを利用する
Python2.7より、いろいろなサードパーティライブラリを利用できる模様。
https://developers.google.com/appengine/docs/python/tools/libraries27?hl=ja
共円にて、行列計算が必要なため、実装してみたのでメモ。
とくに、numpy自体をインストールする必要がない?
ただし、どこにインストールされているか不明。
app.yamlに宣言
application: my-android-server version: 2-0 runtime: python27 api_version: 1 threadsafe: false handlers: #略 libraries: - name: django version: "1.3" - name: numpy version: "1.6.1"
runtimeをpython27にする必要があるので、古いバージョンからバージョンアップする場合はいくつか変更が必要。
https://developers.google.com/appengine/docs/python/python27/migrate27?hl=ja
librariesにnumpyを追記。バージョン番号は下記より。
https://developers.google.com/appengine/docs/python/tools/libraries27?hl=ja
SwapSkillsDoubbble(vol.6)に参加しました
同じ会社の人が登壇するというきっかけがあり、
また、会社から金が出るということで(大事)、出席しました。
以下、要点と感想。
CSS3で作成するインタラクティブアニメーション
・CSS3(CSS4)はどこへ向かっているのか
SVGからの導入が多い。SVGに近づいている?
・Connecting Dots
複数のプロパティを組み合わせていく
一つ一つのプロパティを使えるのは当たり前として、
複数のプロパティをいかに組み合わせていくかが大事。
→ネット上にサンプルはいろいろあるから参考に。
Box Modelは大事。
どのプロパティがどこまで反映されているかを知ることは重要。
filterなど、一部のブラウザのみで実装されているプロパティもたくさんある。
→ブラウザ依存となってしまうため、業務では利用できない?
→Chrome Web Storeなど、ブラウザを特定できれば利用価値あり。
WebGLを使った画像処理と3Dグラフィックス
Chrome, Firefoxはサポートされているが、
それ以外のブラウザはこれから+オプション扱い。
Android、iPhoneで利用できない。
→ただし、今のうちに学んでおいたほうが得。
また、Chrome Web Storeであれば、利用価値あり。
実装は大変。手続きがたくさん。
→DirectXプログラミングっぽい?
→昔、これを読んだのを思い出した。
![DirectXゲームグラフィックスプログラミング Ver. 2.0 DirectXゲームグラフィックスプログラミング Ver. 2.0](http://ecx.images-amazon.com/images/I/517X6BY2EVL._SL160_.jpg)
DirectXゲームグラフィックスプログラミング Ver. 2.0
- 作者: N2Factory
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2004/10/30
- メディア: 単行本
- 購入: 6人 クリック: 156回
- この商品を含むブログ (18件) を見る
→画面表示時にコンパイルが必要なのは、実行環境によってバイナリがことなるから?
画像や動画をテクスチャに貼れる
→マッシュアップとかで利用できる?
手続きのめんどくささは、ライブラリを利用しよう。
three.js - JavaScript 3D library の紹介。
うまく隠蔽されているので、比較的直感的に利用できる。
その他、いろいろなデモの紹介。
ネイティブアプリは更新が障壁となる。
Webなら、最新のアプリケーションを提供できる。
近い将来、WebGLがその役割の一端を担うであろう。
Webアプリケーションのオフライン対応
オフラインで動作するWebアプリケーション
スマホなど、ネットワーク環境が不安定な場面で力を発揮。
サーバ停止時にも動作可能。
キャッシュによって、ネットワーク遅延を回避し、高速動作
1.シンプルな構成
・コンテンツのキャッシュ→AppCache
・DBをブラウザ側に持つ→Web Storage
Application Cacheの利用方法
・manifestを作成
・htmlタグの属性にmanifestを追加
Application Cacheの特徴
・manifest属性を付与したHTMLは、自動的にキャッシュされる
・1つでも404などエラーがあると、全てがキャッシュされない
・キャッシュを変更するには、manifestの更新が必要(更新日時などをコメントで記載する)
・20〜30MBぐらいキャッシュできる
・更新直後は1つ前のバージョンが表示される(JSで再読み込みさせれる)
manifest生成ツールやバリデータツールを活用しよう。
Web Storage
・文字列の保存
・KVS
・localとsessionがある
sessionは別タブなどと共有できない
・Same Origin Policyによってデータが保存される
httpとhttpsでは別々に保存される
・容量は5MBぐらい
・個人情報などの機微データは保存しないほうがよい
Web SQL Database
・RDBMS
・Android, iPhoneなどでは利用可能
IEは未実装
→スマホ限定サイトではあり
Indexed DB
・JavaScriptオブジェクトを保存可能
・非SQL
・トランザクションを利用可能
・APIはまだ扱いづらい
2.データの同期
バックグラウンドプロセスでサーバ内DBと動機する
完全なデータ同期を行おうと思うと大変。
ある程度、仕様で諦める必要が出る(コストと相談)
利用するであろうAPI
・Shared worker
・ネットワーク情報を取得するAPI、イベント
ただし、LANのみか、インターネットまでつながっているかは取得できない
→とりあえず、リクエストを投げてみる?
→LANのみ→インターネットに接続のイベントは取得できる?
・XHR2、WebSocket
Shared worker
バックグラウンドでJSを動作
メッセージ駆動
3.ファイルの保存
ファイル操作が可能
File APIs
DESIGN IT AND BUILD IT デザインしろ、コーディングをしろ
→英語を聞き取れないため、情報がたくさん欠落している気がする
現在の構図
designer vs coder
designer + coder = HYBRIDな人間が必要となってくる。
ハイブリッドである利点
・それぞれの仕事を理解することでコミュニケーションを円滑に進められる
・相手が必要としている形式などを理解することで、仕事を円滑に進められる
・両方を理解することでアイディアが生まれる
技術的に実現可能なデザインを構築できる
デザイナーへ
・コードを学べ
どういったものか知ることから始めよう
・技術を知ることで、効率的な開発ができる
・新たな発見・発想につながる
コーダへ
・ビジュアルに対して繊細になろう
JavaScriptのライブコーディング
内容は CreativeJS for Designers on Vimeo と殆ど同じ。
・キャンバスの塗りつぶしを透過色で行うことで、残像を表現できる
・パラメータを変えるだけで、まったく違う見え方になる
素晴らしいデザインがWeb上で閲覧できる。
Who will pay me to do this?→NO ONE. (yet)
個人的プロジェクトを完結させた人は少ない
・問題に直面する
・目指すものが高すぎる
・時間がない
↓
・小さなところから公開してみる
・改良を加えていく
・考え方を変えてみる(粒子の移動→アステロイドの移動→オンラインゲーム風アステロイド)
実際にやってみるところから始めてみよう
そしてシェアしよう
以下、聞きながらとったメモ
* CSS3で作成するインタラクティブアニメーション
・Webがプラットフォームになっていっている
メトロ・車などのAPIが提供され始めている・CSS3
transform transition gradient regions filter
SVG(XML)からの導入が多い
SVGは大きくなりすぎた。・Connecting Dots
複数のプロパティを組み合わせていくbox model→どのプロパティがどの要素に適用されるかが重要(margin, padding, border)
border
RGBa
background-clip:padding-box(背景色の適用範囲)transision
:after
:hover
→ナビゲーション(マウスの動きに追随する)transform2d
filter(Chromeのみ)
ギャラリーの、ホバーされていない要素をグレイスケールふーろーてーと?
CSS4?色味を変更、アニメーションと組み合わせるCSS4では親要素を指定できる?
CSSでJavaScriptを置き換えられる?
→//速度的にどうなの?
* WebGLを使った画像処理と3Dグラフィックス松井 健
ブラウザサポート
・Chrome
・Firefox
・Safari(Option)
・Opera(次からOption)
・iPhone, Androidはこれから。Chromeは対応しているので、Chrome Web Storeで出せばよい?
GPUを利用できる。
頂点シェーダー→ラスタライズ→フラグメントシェーダー
→//DirectXなどを勉強しておくと楽?JavaScriptの頂点配列
↓
GLSL→頂点シェーダー
↓
ラスタライズ
↓
GLSL→フラグメントシェーダー
videoをテクスチャに貼ったりできる。
利用方法
Webだから?コンパイルが必要
→//環境がわからないから、表示のたびにコンパイルが必要となる?
WebGLは難しい?
めんどくさい
→ライブラリを利用して、効率良く開発しよう。
ただし、裏で何が行われているかは知っておいたほうがよいthree.js
・3Dライブラリ
・直感的に操作できる
webgl grobe
・データビジュアライゼーション
更新の容易さなどを考えるとネイティブアプリから、
Webアプリへ移っていく可能性がある。
WebGLはそのときの有力な候補となる。
* Webアプリケーションのオフライン対応吉川徹
オフラインで動作する
キャッシュするので高速動作
UXの向上1.シンプルな構成
・キャッシュさせる→AppCache
・DBをブラウザに持つ→Web StorageApplication Cahe
・manifestを作成
・htmlにmanifestを読み込む・HTMLは自動的にキャッシュされる
・1つでも404などがあるとキャッシュされない
・ファイルの更新時にmanifestの更新が必要
・20〜30MBぐらいキャッシュできる
・更新直後は1つ前のバージョンが表示される(JSで再読み込みさせれる)manifest生成ツールあり。
バリデータあり。
Web Storage
・文字列を保存できる
・KVS
・localStorage, sessionStorage
・オリジンごとにデータが保存される(Same Origin Policy)
・5MBぐらい
・機微データは保存しないほうがよい
Web SQL Database
・RDBMS
・モバイルでは利用可能
・IEとかは無理indexedDB
・JavaScriptオブジェクトを保存可能
・非SQL
・トランザクションを利用可能
・APIが扱いづらい
2.データの同期
バックグラウンドプロセスでサーバDBと同期するShared worker
ネットワーク情報を取得するAPI、イベント
(インターネットに接続されているかは不明)
XHR2、WebSocketNetwork Information API
ネットワーク速度、課金の有無を取得できる
実装が追いついていない(依存する)Shared Worker
バックグラウンドでJSを動作させられる
メッセージ駆動
3.ファイルの保存
File APIs
ブラウザ内のファイルシステムHTML5 terminal
filer.js
* PIXELS, PEOPLE AND PLAYSeb Lee Delisle(セブ・リー・デリスル)
desiner vs coder
desiner + coder = HYBRIDが必要。
小さなオフィスで隣り合わせで開発する分には問題ない
大きなオフィスでは別フロアなどになっているhybridity yourself
ハイブリッドである利点
・コミュニケーションを円滑に進められる
・形式の齟齬などが発生しづらい
・両方を理解することでアイディアが生まれる
現実的なデザインが構築できるデザイナーへ
コードを学べ
どういったものかを知ることから始めましょう
テクノロジーを知ることで効率的な開発ができる
新たな発見につながる
Flashはよい導入になったコーダーへ
ビジュアルに大して繊細になる
コモド64
2行で幾何学模様が作成できる
JavaScript
残像を透過背景色を重ねることで表現する
パラメータを変えることで様々な見え方をする
Who will pay me to do this?
→NO ONE (yet)個人的プロジェクトを完結させた人は少ない
→問題に直面する
目指すものが高すぎる
時間がない
↓
小さなところから公開してみる
→改良を加えていく
→考え方を変えてみる(particleの移動→アステロイドの移動)実際にやってみるところから始めてみよう
PLAY
CREATE
SHARE
Xcode4.3にて、macportsでインストールしたSVN1.7を利用する
参考ページ
http://tgoode.com/2012/03/31/use-svn-1-7-in-xcode-4-3/
sudo port install subversion cd /Applications/Xcode.app/Contents/Developer/usr/bin/ sudo mkdir bup sudo mv svn* bup/ sudo ln -s /opt/local/bin/svn* ./
yamlを編集するプラグイン(yedit)を導入
http://dadacoalition.org/yedit
をよりインストール。
色がつくので見やすい。
以上。
mac(Lion)でnodeをインストールし、UglifyJS、sqwishもインストール
ほとんど、このページを参照
http://d.hatena.ne.jp/mollifier/20110221/p1
sudo port install wget
- nvmをインストール
git clone git://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
(.profileに設定が必要)
- nodeをインストール
nvm install v0.6.19
nvm use v0.6.19
(.profileに設定が必要)
node --version
- javascript圧縮ツール(UglifyJS)をインストール
npm install uglify-js
インストール先は
./node_modules/uglify-js
になるようです。
圧縮したいjsのディレクトリに移動し、
対象のjsファイル名が「common.js」の場合
~/node_modules/uglify-js/bin/uglifyjs common.js > common.min.js
とすることで圧縮完了。
- css圧縮ツール(sqwish)をインストール
npm install sqwish
インストール先は
~/node_modules/sqwish
になるようです。
圧縮したいcssのディレクトリに移動し、
対象のcssファイル名が「common.css」の場合
~/node_modules/sqwish/bin/sqwish common.css
とすることでcommon.min.cssが作成される。
-
- strictオプションを追加することで、重複などを削除してくれるらしいが、
厳密には異なるcssが作成されるため、レイアウトが微妙に異なる箇所が発生する。
オーバレイ表示をするjQueryプラグイン
特定の領域をオーバレイ表示するjQueryプラグインを作って見ました。
共円のページで、問題を表示する際に利用しています。
http://my-android-server.appspot.com/page/list.html?open=1
以下はテスト用のサンプル。
http://dl.dropbox.com/u/8518065/sample/20120119/test.html
プラグイン部分です。
(function($) { $.fn.overlay = function(overlayConfig) { var $target = $(this); var defaultOption = { position: 'fixed', bottom: 0, left: 0, right: 0, top: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', }; var option = $.extend(defaultOption, overlayConfig); var $overlay = $('#overlay_area'); if (!$overlay.length) { // 存在しない場合は作成 $overlay = $('<div />').attr({ id: 'overlay_area', }); $('body').append($overlay); } $overlay.css(option); $overlay.append($target); $overlay.click(function(){ // オーバレイ領域がクリックされた場合は隠す $overlay.hide(); $target.hide(); }); $target.click(function(e) { // ターゲット領域がクリックされた場合はイベントの伝達を止める e.stopPropagation(); }); $overlay.show(); $target.show(); } })(jQuery);
以下、サンプル用のHTML。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テスト</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/overlay.js"></script> <script type="text/javascript"> $(function() { $('#overlay_button').click(function() { $('#overlay_target').overlay(); }); $('#overlay_button2').click(function() { $('#overlay_target2').overlay({ backgroundColor: 'rgba(255, 0, 255, 0.4)' }); }); }); </script> <style> .target { position: initial; margin-top: 5px; margin-left: auto; margin-right: auto; display: none; } </style> </head> <body style="background-color: #8ae"> <input id="overlay_button" type="button" value="オーバレイ表示" /> <input id="overlay_button2" type="button" value="オーバレイ表示2" /> <div id="overlay_target" style="width: 300px; height: 400px; background-color: #eee;" class="target"> テストです。 <span style="background-color: #f00">背景色のテスト</span> </div> <div id="overlay_target2" style="width: 300px; height: 400px; background-color: #efe;" class="target"> テスト2 </div> </body> </html>
以下のようにすることで、id="overlay_target"のdivタグをオーバレイ表示します。
$('#overlay_target').overlay();
また、オーバレイ領域の色を変更したい場合などは以下のようにします。
$('#overlay_target2').overlay({ backgroundColor: 'rgba(255, 0, 255, 0.4)' });