jQuery Mobile 補足追加
jQuery Mobileについて、ちょっと今週中は更新できそうにもないので小さいネタをメモ。
・div要素は、header、footer要素やsection要素で代用可能。試してないですが、恐らくaside要素とかでもいけます。
・android系端末のtransitionが効かないようなバージョンについてはパフォーマンスが悪いらしい。詳細はまだ追っかけてませんがフォーラムなどに色々と載ってますので興味のある人はご確認を。ついでにissueをあげて貰うとGOOD！
・動的に要素を追加した場合には、要素に対してjQuery Mobileを手動で適用しなければいけない模様。
・追加されたイベント一覧
tap
taphold
swipe
swipeleft
swiperight
orientationchange
scrollstart
scrollstop
pagebeforeshow
pagebeforehide
pageshow
pagehide
pagebeforecreate
pagecreate
animationComplete
・jQuery Mobileの正式リリース時期は来年1月を予定。
・当然まだAlpha版なのでバグはいっぱいあるよ！
今後は、とりあえず来週以降、プロパティの精査とサンプル画像、あと追加されたイベント周りやサンプルアプリケーション、コードレビューなどなどを考えいます。
2010/11/02追記
・ページ遷移のエフェクトのslideは、デフォルトではslideleft(?)ですが、遷移先のdata-role:page要素のclassにreverseを指定すれば逆になります。遷移するたびに設定しないといけないので面倒ですが、恐らく今後のバージョンアップでどうにかすると思われます。
jQuery Mobile リファレンス的なもの
jQuery Mobile のリファレンス的なものを作りました。
取り敢えず叩き台で、ツッコミなどあればコメントください！
※RC2版に対応しました
Page
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | page | ページ |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-fullscreen | boolean | false | フルスクリーン表示（ヘッダーとフッターでdata-position="fixed"を指定する必要がある） |
| data-add-back-btn | boolean | false | 戻るボタンの自動生成 |
| data-back-btn-text | 任意 | "Back" | 自動生成された戻るボタンのテキスト |
| data-keep-native | 任意 | ネイティブで利用するUIをセレクターで指定する | |
| data-dom-cache | boolean | false | ページをキャッシュする |
| data-theme | 任意 | c | テーマ（a-e） |
| data-back-btn-theme | 任意 | 自動生成された戻るボタンのテーマ（a-e） | |
| data-header-theme | 任意 | a | ヘッダーのテーマ（a-e） |
| data-content-theme | 任意 | c | コンテンツのテーマ（a-e） |
| data-footer-theme | 任意 | a | フッターのテーマ（a-e） |
Header
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | header | Pageに含めるヘッダー |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-position | inline | * | |
| fixed | 固定ヘッダー | ||
| data-id | 任意 | 同一のdata-idのヘッダーを持つページ同士の遷移では、ヘッダーを遷移エフェクトに含めずに表示状態のまま固定する（要data-position="fixed"） | |
| data-theme | 任意 | a | テーマ（a-e） |
| class | ui-bar | - | ヘッダーにUIを含める場合の適切なマージンを設定する |
Content
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | content | Pageに含めるコンテンツ |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-theme | 任意 | c | テーマ（a-e） |
Footer
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | footer | Pageに含めるフッター |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-position | inline | * | |
| fixed | 固定フッター | ||
| data-id | 任意 | 同一のdata-idのフッターを持つページ同士の遷移では、フッターを遷移エフェクトに含めずに表示状態のまま固定する（要data-position="fixed"） | |
| data-theme | 任意 | a | テーマ（a-e） |
| class | ui-bar | - | フッターにUIを含める場合の適切なマージンを設定する |
Navigation Bar
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | navbar | Header、Footerに含めるナビゲーションバー 子要素として<ul>要素（<li>要素に各リンクを入れる）を定義する。 |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-iconpos | *1 | top | パネルボタンのアイコンの位置 |
Page Link
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| a | - | - | ページ遷移 リンク先のPage要素を#idで指定するか、URLを指定する。 別ドメインへのリンクか、以下のいずれかを指定すると、通常のリンクとなる。 rel="external" target="[任意]" data-ajax="false" ※ローカル環境での外部ファイルの読み込みはブラウザの制限で動作しない |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-transition | slide | * | ページ遷移のエフェクト |
| slideup | |||
| slidedown | |||
| pop | |||
| fade | |||
| flip | |||
| data-direction | reverse | 遷移エフェクトを逆にする | |
| data-rel | back | ページを戻る | |
| dialog | 遷移先のページをダイアログ表示する | ||
| data-ajax | boolean | true | 自動ajax |
| data-prefetch | boolean | false | ページの事前読み込み |
Dialog
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | page | <a>要素にdata-role="dialog"を指定する（Page Linkの項を参照） |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-close-btn-text | 任意 | "Close" | 閉じるボタンのツールチップ |
Form
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| form | - | - | ajaxでformデータを送信する 送信先のページでページ要素を返す必要がある。 |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-ajax | boolean | true | 自動ajax |
Button
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| input | type | button | ボタン（type="image"の画象は無視される） |
| submit | |||
| reset | |||
| image | |||
| a | data-role | button | |
| button | - | - |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-corners | boolean | true | ボタンを角丸にする |
| data-shadow | boolean | true | ボタンに影をつける |
| data-icon | arrow-l | アイコン種類 | |
| arrow-r | |||
| arrow-u | |||
| arrow-d | |||
| delete | |||
| plus | |||
| minus | |||
| check | |||
| gear | |||
| refresh | |||
| forward | |||
| back | |||
| grid | |||
| star | |||
| alert | |||
| info | |||
| search | |||
| home | |||
| data-iconpos | left | * | アイコン位置（data-iconpos="notext"はアイコンのみの表示） |
| right | |||
| top | |||
| bottom | |||
| notext | |||
| data-iconshadow | boolean | true | アイコンに影をつける |
| data-inline | boolean | false | インライン要素として扱う |
| data-theme | 任意 | c | テーマ（a-e） |
| data-disabled | boolean | false | 有効／無効 |
| data-role | none | ネイティブのUIを使う | |
| class | ui-btn-left | Header要素内に配置したボタン位置 | |
| ui-btn-right | |||
| ui-btn-active | 選択状態 |
Form Elements
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| input | type | text | テキスト |
| password | パスワード | ||
| search | 検索ボックス | ||
| range | スライダー | ||
| radio | ラジオボタン（<label>要素必須） | ||
| checkbox | チェックボックス（<label>要素必須） | ||
| select | data-role | slider | フリップスイッチ（<option>要素を2つ含める） |
| textarea | - | - | テキストエリア |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-role | none | ネイティブのUIを使う | |
| data-theme | 任意 | c | テーマ（a-e） |
| data-track-theme | 任意 | c | スライダー(range)のトラック部分のテーマ |
| data-disabled | boolean | false | 有効／無効 |
Select menus
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| select | - | - | セレクトメニュー カスタムセレクトメニューを使う場合は、data-native-menu="false"を指定する。 すべてのオプションが画面に表示できる場合は、オプション一覧がオーバーレイ表示される。表示できない場合は、オプション一覧がダイアログ表示される。その場合、ラベルがオプション一覧ページのタイトルとなる。 valueが指定されていない<option>要素が見出しとなる。 <optgroup>でオプションのグループ化が可能。 |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-native-menu | boolean | false | カスタムセレクトメニュー |
| data-corners | boolean | true | ボタンを角丸にする |
| data-shadow | boolean | true | ボタンに影をつける |
| data-icon | *2 | arrow-d | アイコン種類 |
| data-iconpos | *3 | right | アイコン位置 |
| data-iconshadow | boolean | true | アイコンに影をつける |
| data-hide-placeholder-menu-items | boolean | false | value属性のない<option>要素をプレースホルダーとしない その場合、<option>要素にdata-placeholder="true"をプレースホルダーとする |
| data-close-text | 任意 | "Close" | オプション一覧ページの閉じるボタンのツールチップ |
| data-inline | boolean | false | インライン要素として扱う |
| data-theme | 任意 | c | テーマ（a-e） |
| data-menu-page-theme | 任意 | c | オプション一覧ページのテーマ（a-e） |
| data-overlay-theme | 任意 | c | オプション一覧のテーマ（a-e） |
| data-role | none | ネイティブのUIを使う | |
| data-disabled | boolean | false | 有効／無効 |
| multiple | boolean | false | 複数選択 |
Fieldcontain
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | fieldcontain | 入力フォームとラベルを囲む。マージンとスプリッターを追加する |
Control Group
| 要素 | 属性 | 値 | 概要 |
|---|---|---|---|
| div | data-role | controlgroup | グループ化する（ボタン、ラジオボタン、チェックボックス、セレクトメニュー） |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-type | vertical | * | 垂直方向で結合する |
| horizontal | 水平方向で結合する |
Grid Layout
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | class | ui-grid-a | class="ui-grid-a"〜"ui-grid-d"で2〜5列となる。子要素に<div>要素を含め、class="ui-block-a"〜"ui-block-e"で各列対応する。行は、対応する子要素を繰り返す。 |
| ui-grid-b | |||
| ui-grid-c | |||
| ui-grid-d |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-theme | 任意 | テーマ（a-e） |
Collapsible block
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| div | data-role | collapsible | 開閉可能なブロック。見出しが必須(h1〜h6要素) data-role:collapsible-setのdiv要素でグループ化することができる |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-collapsed | boolean | true | 初期表示を閉じた状態にする |
| data-theme | 任意 | c | テーマ（a〜e） |
| data-icon-theme | 任意 | c | アイコンのテーマ（a-e） |
List
| 要素 | 属性 | 値 | 備考 |
|---|---|---|---|
| ul | data-role | listview | リスト (List/Read-only List) |
| ol | data-role | listview | 番号付きリスト (Numbered List) |
| 設定 | 値 | 既定 | 備考 |
|---|---|---|---|
| data-inset | boolean | false | 角丸リスト |
| data-filter | boolean | false | 検索フィルタを追加する |
| data-filter-placeholder | 任意 | ... | 検索フィルタのプレースホルダー |
| data-theme | 任意 | c | テーマ（a〜e） |
| data-divider-theme | 区切りリストのテーマ | ||
| data-count-theme | カウントバブルのテーマ指定 | ||
| data-split-theme | 区切りボタンリストのテーマ指定 | ||
| data-header-theme | ヘッダーのテーマ指定 | ||
| data-split-icon | 任意 | gear | 区切りボタンリストのボタンアイコン |
その他
| オプション | 条件 | 説明 |
|---|---|---|
| リンクリスト (Linked List) |
リンク可能なリスト | <li>要素内のすべての要素を<a>要素で囲む。data-icon属性でアイコンを指定可能 |
| 入れ子リスト (Nested List) |
リストが入れ子になっているリスト | <li>要素内に<ul>／<ol>要素を含める。追加したリストにdata-role="listview"は不要 |
| 区切りボタンリスト (Split button List) |
リスト右側にパネルボタンを表示 | <li>要素内に<a>要素を2つ含める |
| リスト見出し | リストの見出しを表示する | <li>要素にdata-role="list-divider"を指定する |
| カウントバブル | リスト右側にカウントバブルを表示する | <li>要素に<span class="ui-li-count">を含む |
| サムネイル | リストに画像をサムネイル表示する | <li>要素に<img>要素を含む |
| アイコン | リストに画像をアイコン表示する | <li>要素に<img class="ui-li-icon">要素を含む |
| 見出しテキスト | アイテムの見出しテキストを表示する | <li>要素に<h1>〜<h6>要素を含む |
| 詳細テキスト | リストの詳細テキストを表示する | <li>要素に<p>要素を含む |
| 補足テキスト | リストの右上に補足テキストを表示する | <li>要素に<p class="ui-li-aside">要素を含む |
2010/11/17 追記
collapsibleのdata-state属性がAlpha2でdata-collapsedに変更された。
2011/03/07 更新
alpha3に対応
2011/05/16 更新
alpha4.1に対応
2011/11/03更新
RC2版対応
jQuery Mobile Alpha 1 がリリース！触ってみた
先日ついにjQuery MobileのAlpha版がリリースされました。
http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/
少し触った内容と簡単な使い方を説明します。
Demos and Documentation
http://jquerymobile.com/demos/1.0a1/
1.準備
現時点では、jQuery Mobileの動作には最新のjQuery1.4.3が必要です。
ダウンロードしたjQuery MobileとjQueryを一緒に読み込みます。
<link rel="stylesheet" href="jquery.mobile-1.0a1.css" /> <script src="jquery-1.4.3.js"></script> <script src="jquery.mobile-1.0a1.js"></script>
この時点でページを表示すると、viewportとloading用のdivが追加されています。
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <!-- 省略 --> <div class="ui-loader ui-body-a ui-corner-all" style="top: 75px; "> <span class="ui-icon ui-icon-loading spin"></span> <h1>loading</h1> </div>
2.ページ構成
jQuery Mobileの各UIは、HTML5のカスタムデータ属性を使用して構成します。
以下のようにdivタグのdata-role属性にUIタイプを指定しています。
page、header、content、footerを指定して基本的なページを構成しています。
<div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page -->
3.ページ遷移
ページ遷移は、1つのHTMLファイル内で複数のページを構成する場合、遷移先のid属性をリンクに指定します。
<div data-role="page" id="foo"> <a href="#bar">bar</a> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"></div>
別のHTMLファイルにあるページを呼ぶ場合は、普通にaタグで指定すれば、自動的にajax通信でページを取得してエフェクト付きで表示してくれます。以下は、エフェクトにfadeを指定して画面遷移する例です。
<a href="foo.html" data-transition="fade">bar</a>
エフェクトは、slide、slideup、slidedown、pop、fade、flipが用意されています。
http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-transitions.html
4.ダイアログ
ダイアログの表示も、aタグを利用し、属性にdata-rel="dialog"を指定するとダイアログになります。エフェクトも前述したものが使えます。
<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
5.ボタン
inputタグのtype属性をbutton、submit、reset、imageを指定すると同じ見た目になります。
http://jquerymobile.com/demos/1.0a1/#docs/buttons/buttons-types.html
・リンクボタン
リンクボタンはdata-role="button"を指定します。
<a href="foo.html" data-role="button" >Linked Button</a>
・インラインボタン
divタグにdata-inline="true"を指定し、ボタンを囲むと、中のボタンが1行で表示されます。
<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a> </div>
6.チェックボックス・ラジオボタン
チェックボックスやラジオボタンは、ラベルを設定します。
<input type="checkbox" name="check" id="checkbox-1"> <label for="checkbox-1">チェック</label>
7.その他のフォームエレメント
その他のフォームエレメントは基本的には、従来通りのマークアップでモバイル用に描画されます。また、rangeやsearchなどのタイプにも対応しています。
まとめ
一部のUIを除き、普通のHTMLとしてマークアップすれば、jQuery MobileのUIとして表示してくれるので特に何も考えずにマークアップして、後から細かいデザインやテーマ等をカスタム属性を使って指定する形で良いと思います。細かい指定については「Demos and Documentation」を参照してください。
jQuery Mobileが非対応の端末に対しても標準のフォームが表示されるため、サイトが使えなくなるということは少なさそうです。今後は、テーマのカスタマイズツール、タブレットやデスクトップ向けのUIも追加されるようですし、将来が楽しみですね。
時間があればリファレンスのようなものも作ってみたいと思います。
第10回HTML5とか勉強会で「jQuery Mobile」について話してきました
9/15(水)に開催された第10回HTML5とか勉強会で「jQuery Mobile」についてライトニングトークしてきました。
「jQuery Mobile 調査報告(仮)」
http://prezi.com/ftfqmwlszidy/jquery-mobile/
jQuery Mobile は、まだリリースされていないのでプレゼン資料のタイトルは(仮)になっています。プロジェクトの概要と各プラットフォームの対応予定なんかをまとめています。リリース予定は、来月(2010年10月)ですのでお楽しみに。
最近は、jQuery Mobile に限らずモバイル関連のライブラリや開発ツールが充実してきていますので、開発者としては、色々と選択肢が増えて嬉しい限りです。
また、今回の勉強会は10回記念ということでデモアプリを作成しており Twitter API + Session Storage 周りとスタッフロールの部分をちょこちょことお手伝いしました。
第10回記念デモアプリ（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/
第10回記念デモアプリ説明（小松さん）（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/slides/#p0
実装自体は、スタッフロールのsection要素をCSS3 transition で下から上に動かすだけという
単純な作りになっています。(デモのコードは、音楽とスクロールを合わせるために少し余計なコードが入っていますが)
staffroll.js
//各パートの高さを計算
var stopPartHeight = document.getElementById('stop-part').clientHeight;
var firstPartHeight = document.getElementById('first-part').clientHeight;
var staffroll = document.getElementById('staffroll');var startY = document.documentElement.clientHeight;
var endY = ((startY + stopPartHeight) / 2) - staffroll.clientHeight;
var firstPartY = -firstPartHeight;//webkit-keyframesを定義
var style = document.createElement('style');
style.innerHTML = '@-webkit-keyframes bottomUpFlow {'
+ '0% { -webkit-transform: translate(0, ' + startY + 'px); -webkit-animation-timing-function: linear; }' //start
+ '22% { -webkit-transform: translate(0, ' + firstPartY + 'px); -webkit-animation-timing-function: linear; }' //first part
+ '88% { -webkit-transform: translate(0, ' + endY + 'px); -webkit-animation-timing-function: linear; }' //stop part
+ '100% { -webkit-transform: translate(0, ' + endY + 'px); -webkit-animation-timing-function: linear; }}'; //fadeout
document.head.appendChild(style);//css適用
staffroll.style.webkitAnimationName = 'bottomUpFlow, fadeout';
staffroll.style.webkitTransform = 'translate(0, ' + endY + 'px)';
staffroll.css
#staffroll {
color: white;
font-size: 30px;
letter-spacing: 0.075em;
padding-bottom: 10px;
text-align: center;
text-shadow: white 0px 0px 10px;
-webkit-animation-duration: 45s;
-webkit-animation-iteration-count: 1;
opacity: 0.0;
}@-webkit-keyframes fadeout {
0% { opacity: 1.0; }
95% { opacity: 1.0; }
100% { opacity: 0; }
}
長々と書いてますが、単純に下から上へ流すだけであれば、以下のようなコードだけで十分です。
@-webkit-keyframes bottomUpFlow {
0% { -webkit-transform: translate(0, 1000px); -webkit-animation-timing-function: linear; }
100% { -webkit-transform: translate(0, -1000px); -webkit-animation-timing-function: linear; }
}#staffroll {
-webkit-animation-name: bottomUpFlow;
-webkit-animation-duration: 45s;
-webkit-animation-iteration-count: 1;
}
こういったエフェクトは、canvas を使って実装することもできますが、canvas は実装するのが割と大変なのでちょっとしたものに css3 transition を使うのは簡単でお勧めです。
MacでWebKitの開発とあれこれ
先日、Macbook Proを購入したのでWebKitをコンパイルしてみました。
Macは初ですが、さすがに元々がアップルが開発したものだけあって、
Windowsと比べてびっくりするくらい、すんなり終わりました。
すんなり終わりすぎて、書くことがないのでついでに開発周りの
あれこれも一緒に調べてみました。
1. XCode のインストール
アップルのHPへ行ってダウンロードしてインストールします。
現時点での最新は、Xcode 3.2.2 Developer Tools のようです。
Tiger以降では、Subversion と Python は入っているようなので
インストールは不要です。
2.ソースの取得
アプリケーション＞ユーティリティ＞ターミナルで以下のコマンドを実行します。
コマンドはWindowsの時と同様です。
#Subversion を使ってソース取得
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
#最新ソースの取得と環境設定
WebKit/WebKitTools/Scripts/update-webkit
3.ビルド
そのままターミナルで以下のコマンドを実行します。
#ビルド
WebKit/WebKitTools/Scripts/build-webkit --debug
#Safari の実行
WebKit/WebKitTools/Scripts/run-safari
以上で終了です。
XCodeでソースの中身をチェックしたい場合は、WebKitのソースツリーの
各フォルダにXCode用のプロジェクトファイルがあるのでそれを開いてください。
例えば、WebCoreをチェックしたい場合は以下のファイルが該当ファイルになります。
WebKit/WebCore/WebCore.xcodeproj
WebKitの開発にあたって
基本的に公式サイトから飛べますが、自分で開発を始める際にも必要で
あろう雑多な情報をメモっておきます。
まだ実際に使ったことがないものもあるのでコメントは適当です。
http://webkit.org/contact.html
・ブログ
Surfin’ Safari
http://webkit.org/blog/
大きな変更や、新しい機能の使い方などが紹介されています。
新しいレビュワーの告知もここでされています。
・メーリングリスト
[webkit-dev]
開発者用のメーリングリスト。
日々活発な議論がされています。
[webkit-help]
ビルド方法やAPIの使い方などを質問できるようです。
RTFMとは言われない、はず。
以下、自動通知用のメーリングリストです。
[webkit-reviews]
Bugzilaに登録されたレビュー待ちのパッチを通知する。
[webkit-changes]
コミットされた変更を通知する。
[webkit-unassigned]
Bugzilaに登録された新しいバグを通知する。
・IRC
サーバ：irc.freenode.net
チャンネル：#webkit
主要な開発者が常駐しているようですが、
まだ入ったことはありません・・・。
・コーディング規約
http://webkit.org/coding/coding-style.html
レビューを受ける前にセルフチェックしましょう。
暗黙的なルールもあるようですが。
・Bugzilla
https://bugs.webkit.org/
パッチを作る際には、こちらからバグを探します。
自分で発見した場合、先に登録してからパッチを作ります。
プライオリティが低く、ステータスがNEWになっているものを選びましょう。
プライオリティが高いものはベテランに任せておきましょう。
・wikipedia
http://trac.webkit.org/wiki
Wikiです。中身は未読です・・・。
・timeline
http://trac.webkit.org/timeline
こちらで各Changesetのタイムラインと概要がわかります。
・buildbot
http://build.webkit.org/
WebKitのビルドは自動化されていますが、Core Consoleや Core Waterfallなどで
各環境でのビルドの状況がリアルタイムで確認できます。
下調べの内容は以上です。
次はHTML5についても触れたいところですが、
先にブログの見た目を整えるのが先かもしれません。
自分で見てて見づらい・・・。
Windows7でWebKitの開発
ご無沙汰してました。
初のまともな記事としてWindows7でのWebKitの開発についてちょこちょこと書いてみたいと思います。
ブログの書き方にも慣れていないので見づらくなってしまうかもしれませんがご容赦ください。
WebKit は、Safari や Google Chrome に使われてるいるオープンソースのHTMLレンダリングエンジンです。についてはこちら。
http://webkit.org/
メニューの「Working with the Code」の中に細かいところは書いてありますので、基本はそれに沿っていきます。
1. Visual C++ 2005 Express Edition のインストール
公式ではもう配布していないことになっていますが、以下のURLからまだダウンロードできます。
- Visual C++ 2005 Express Edition
http://download.microsoft.com/download/8/E/8/8E85D539-2255-4CFD-AA97-440AE6C6F44A/vc.iso
- Visual C++ 2005 Express Edition SP1
- Windows Server 2003 R2 Platform SDK
IMG、ISO形式のファイルはいったんCDに焼くか、仮想化ツールを使ってインストールしてください。インストールが終わったら忘れずに Windows Update で最新にしておきましょう。
2. Cygwin のインストール
ソースの取得や各種スクリプトの実行用に Cygwin をインストールします。
WebKit に必要な Cygwin 本体や必要なライブラリをダウンロードしてくれる cygwin-downloader が配布されているので下記URLでダウンローします。
http://svn.webkit.org/repository/webkit/trunk/WebKitTools/CygwinDownloader/cygwin-downloader.zip
- 任意のフォルダに解凍して cygwin-downloader.exe を実行します。
- ダウンロードが始まり、終わると setup.exe ができていますので、実行してインストールします。
- インストール方法は、さきほどダウンロードしたファイルを使うので「Install from Loacal Directory」を選択します。
- 途中エラーダイアログのようなものがでますが、ただのメッセージなので無視します。
あとはどんどん次へ進めてください。Windows7なのでインストール終了後にプログラムの互換性アシスタント (PCA) のダイアログが立ち上がりますが、「このプログラムは正しくインストールされました」を選択して完了です。
3. Quick Time SDK のインストール
以下のURLから「QuickTime 7.3 SDK for Windows (ZIP)」をダウンロードしてインストールしてください。ダウンロードには Apple ID が必要です。
http://developer.apple.com/quicktime/download/
4. Safari のインストール
動作チェック用に Safari が入っていない人はインストールしておきましょう！
5.ソースの取得
Cygwin を起動して Subversion からソースを取得します。(git を使う方法もありますが、とりあえずドキュメント通りに Subversion を使用します。)
※1.3Gぐらいあるので、手っ取り早くやりたいひとは Nightly Builds のソースを使ってください。(http://nightly.webkit.org/)
#Subversion を使ってソース取得
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
ソースの取得には少し時間がかかりますが、無事に取得が終わったら WebKit Support Libraries.zip をダウンロードして、解凍せずにWebKit/ 配下に配置します。
http://developer.apple.com/opensource/internet/webkit_sptlib_agree.html
次にソースを最新にします。
※このコマンドで、他に必要な WebKitAuxiliaryLibrary.zip の取得や WEBKITOUTPUTDIR 環境変数の設定などを行ってくれるようです。
6. Build
最後に Visual C++ Expression Edition を立ち上げて WebKit/WebKit/win/WebKit.vcproj/WebKit.sln からプロジェクトを読み込みます。
※Visual C++ Express Edition では、ソリューションフォルダが読み込めませんでしたと出てフォルダの中身が見えない状態になるようです。Visual Studio 2005 では普通に読み込みできました。
あとは、事前にインストールした Microsoft Platform SDK for Windows Server 2003 R2 の各種パスを通します。
ツール＞オプション＞プロジェクトおよびソリューション＞ＶＣ＋＋ディレクトリ
- 実行可能ファイル
[Microsoft Platform SDK for Windows Server 2003 R2 インストールフォルダ]\Bin
- インクルードファイル
[Microsoft Platform SDK for Windows Server 2003 R2 インストールフォルダ]\Include
- ライブラリファイル
[Microsoft Platform SDK for Windows Server 2003 R2 インストールフォルダ]\Lib
終わったらデバッグオプションで Debug を選択して、実行してください。
Debug 終了後にプログラムを選択するダイアログが出るので Safari.exe を指定します。
無事に Safari が立ち上がれば成功です！
コマンドラインから行う場合は、Cygwin から以下のコマンドを実行します。
以上で完了です！
あとはソースを眺めるなり、好きにいじくるなりごゆるりと。
次回は、ソースの中身を見れたら良いなということで、今日はこのへんで。
追記：環境次第ではコマンドラインのビルドがうまくいかない可能性があるようです。要追試。
スタイル変更
放置しまくりで、まだ何も書いていない！
スタイルを変更してみたけど、記事がないのでサンプルとは見え方が違いますね。
