web標準コンテンツ作成支援ツール npirka‘r o - …...© 2009 the seasar foundation and...

© 2009 The Seasar Foundation and the others, All rights reserved.

The Ashikunep Kotan

株式会社グルージェント佐々木久禎

Web標準コンテンツ作成支援ツール

「Pirka‘r （ピリカル）」


Pirka’rを取り巻く人々

2

利用者

Pirka’rの中の人

データ

WebデザイナWebアプリ開発者


Pirka’r

•利用者編

•Pirka’rの中の人編

•マニア編

3

© 2009 The Seasar Foundation and the others, All rights reserved.4

名前の意味

目的

Pirka‘rとは？


Pirka'r（ピリカル）とは？

5

アイヌ語で「良い道」という意味

情報処理推進機構（IPA）のオープンソフトウェア利用

促進事業「互換性の高いWebコンテンツ作成を支援す

るツールの開発」として採択


互換性

対象とするWebコンテンツ

互換性の高いWebコンテンツとは？


互換性の高いWebコンテンツとは？

互換性が高い特定ブラウザに依存しないこと

「Web標準」であること（W3C準拠）

互換性問題が発生するWebコンテンツ HTML

CSS

JavaScript

7


機能

デモ

利用構成

利用者編


ブラウザ互換性チェック

標準準拠チェック

マルチブラウザビュー自動レンダリング

多機能エディタ

Webコンテンツ収集

機能



10

Internet Explorer は Microsoft Corporation の登録商標です。

Firefox は Mozilla Foundation の登録商標です。

Safari は Apple Computer, Inc. の商標です。

Safari™

Firefox®

Internet Explorer ®



11


ブラウザ互換性チェック(裏側)

12

ブラウザ互換性

チェックデータ


アプリケーション




ブラウザ互換性チェック(裏側)

13







株式会社三菱総合研究所が

初期データを作成

その数・・・１００件



14

W3C CSS Validator


Internet

Explorer

Firefox

Safari

マルチブラウザビュー

15

注）IE、Firefox、Safariを表示できるのはWindows版のみです


編集保存

表示

自動レンダリング

16



17

シンタックス

ハイライト

コード

補完

構文

チェック


シンタックスハイライト（多機能エディタ）

18

シンタックス

ハイライト

コード

補完

構文

チェック

HTML

CSS JavaScript


シンタックス

ハイライト

コード

補完

構文

チェック

コード補完（多機能エディタ）

19


シンタックス

ハイライト

コード

補完

構文

チェック

構文チェック（多機能エディタ）

20


画面

21

ブラウザ表示

エディタ表示

問題内容表示

コンテンツ表示



22

http://～

Web

コンテンツ


デモ



マルチブラウザビュー自動レンダリング




Webコンテンツ制作

利用シーン


利用シーン［作成］

25


利用シーン［確認］

26


デモ環境解説

27

利用構成


デモ環境解説

28

クライアントサーバ






2009年3月14日

サイト公開

2009年5月

限定公開(予定)

2009年9月

一般公開

2010年X月

改良版公開

ロードマップ

29


公開サイト

http://pirkar.ashikunep.org/Pirka'rのダウンロードはできませんm(_ _)m

30

Coming Sooooon!!


公開サイト

サイトデザインは合同会社CGFM

・・・カネウチカズコさん

カネウチさんと言えば…

ねこび～ん by カネウチカズコ is licensed under a Creative Commons 表示-継承 2.1 日本 License.

ねこび～ん

31


全体構成

ブラウザ互換性チェックデータ

Pirka’rの中の人編


配信サーバ

互換性チェックサーバ

クライアント

全体構成


Pirka’r全体構成

34

利用者

データ管理者



利用者

利用者

互換性チェックアプリ




項目

スクリプト




ブラウザ互換性チェックデータ項目

• 検証名

• 影響度

FATAL －内容が理解できない（コンテンツ非表示など）

ERROR －なんとか内容が理解できる（レイアウト崩れなど）

WARNING －内容は理解できる（色が違うなど）

• 詳細情報

• 修正情報

• スクリプト

タグや属性など問題の記述を検出するスクリプト。

JavaScriptで記述する。

• サンプルデータ

スクリプトが正しいか検証するためのサンプル。

36



例）blinkタグの検出

• 検証名

blinkタグ

• 影響度

WARNING

• 詳細情報

「<blink>はタグによって囲まれた部分を点滅させるNetscape の

独自要素です。Firefoxは対応していますが・・・」

• 修正情報

「Internet Explorer やSafari では動作しないため削除すべきで

す。」

37




スクリプト

38

(function() {

throw document.getElementsByTagName("blink");

})();

互換性問題となるオブジェクトを例外として投げる。




サンプルデータ

39

<html>

<body>

<div>点滅なし</div>

</body>

</html>

<html>

<body>

<blink>点滅あり</blink>

</body>

</html>

例外を検出しない例外を検出する



40


募集

41

利用者






管理者

管理者


実装技術

マニア編


クライアント

互換性チェックサーバ

実装技術


クライアント実装技術

Eclipse RCP(Rich Client Platform)で実装単体アプリにするため、コンテキストメニューとか

いろいろ隠蔽

ブラウザ表示のためにWinネイティブなAPIを実装（SWT.COMをカスタマイズしてJNIで実装）

詳しくは

外部ツールとの連携 W3C CSS Validator ［標準準拠チェック］

（http://jigsaw.w3.org/css-validator/）

GNU Wget ［Webコンテンツ収集］（http://www.gnu.org/software/wget/）

44

こげつきません検索


互換性チェッククラサバ連携実装技術

Yukara Wisdom(※)を利用ブラウザ互換性チェックのクラサバ通信はWisdomを

カスタマイズ

ブラウザ互換性チェック用のエンジンを実装

45

※ Yukara Wisdom：Yukaraのサブプロジェクト。開発の叡智を蓄積し、容易に利用できるようにする。

http://yukara.ashikunep.org/wisdom/


互換性チェックサーバ実装技術

• ブラウザ互換性チェック用のAPI実装ブラウザ互換性チェックスクリプト(JavaScript)から対象WebコンテンツにアクセスするAPIを作成

46

CSS• 指定プロパティを含んだスタイルオブジェクトを取得

document.styleSheets.properties.color

• 指定セレクタを含んだスタイルオブジェクトを取得

document.styleSheets.selectors.タグ例）.selectors.h1

document.styleSheets.selectors[“#ID”]

document.styleSheets.selectors[“.class名”]

• 指定メディアを含んだスタイルオブジェクトを取得document.styleSheets.medias.screen

JavaScript• 指定条件にマッチした行情報オブジェクトを取得

document.scripts.matched(正規表現, bool)

// 第２引数はコメントや文字列を検索対象から除くかどうか


Irenkaと技術の共有(予定)

Irenka – Javaソースコードを対象

←Pirka’rのHTML,CSS,JavaScriptの解析技術

47

※ Irenka：Ashikunepのプロジェクト。Javaソースのコンパイル時にユーザー実装エージェントの実行を行う。

IPAの2007年度第Ⅱ期未踏ソフトウェア創造事業で採択され、開発者の

荒川氏（株式会社グルージェント）は天才プログラマーに認定。

http://irenka.ashikunep.org/

Irenka2.0（＾＾；


リリース予定

2009年5月限定公開(予定)

2009年9月一般公開

乞うご期待！

48


ご清聴ありがとうございました

Web標準コンテンツ作成支援ツール

「Pirka'r」

web標準コンテンツ作成支援ツール npirka‘r o - …...© 2009 the seasar foundation and...

Documents