HTML5で追加されたAPIの一つにGeoLocationがあります。いわゆる位置情報を扱うAPIですが、標準で提供されるものはそれほど機能が多い訳ではありません。
function success(position) {
// 位置情報取得成功時の処理
}
function error(msg) {
// 位置情報取得失敗時の処理
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
このような使い方が多いかと思います。
hifiveでは navigator.geolocation をベースに機能追加を行った h5.api.geo を提供しています。
位置情報をサポートしているかどうか
通常、navigator.geolocationの有無で判定しますがIE9においてはnavigator.geolocationへのアクセスがメモリリークしますのでisSupportedを使うのが安全です。
if (h5.api.geo.geoisSupported()) {
// サポート
} else {
// 非サポート
}
現在位置の取得
現在位置を取得する際には h5.api.geo.getCurrentPosition を使います。Promiseに対応しています。
h5.api.geo.getCurrentPosition()
.then(function(position) {
// 成功時の処理
})
.fail(function() {
// エラー時の処理
});
オプションとして以下が渡せます。
- enableHighAccuracy
- 正確な位置を取得するか (ただし消費電力の増加や応答が遅延する)
- timeout
- 位置情報を取得するまで待機する時間 (ミリ秒)
- maximumAge
- キャッシュされた位置情報の有効期間を指定する (ミリ秒)
位置情報のウォッチ
移動している際などに便利なのが watchPosition です。hifiveでも同じく watchPosition をサポートしています。hifive版ははPromiseが使えます。
h5.api.geo.watchPosition()
.progress(function(position) {
// 定期的に呼ばれます
})
doneではないので注意してください。オプションは getCurrentPosition と同じです。
こちらは上が getCurrentPosition の実行結果、下の地図は watchPosition の実行結果です。
2点間の距離を測る
2つの位置情報館の距離を測定します。
distance = h5.api.geo.getDistance(lat1, lng1, lat2, lng2, geoSystem);
1つ目の緯度経度、2つめの緯度経度を渡します。最後の geoSystem は h5.api.geo.GS_GRS80（世界測地系）と h5.api.geo.GS_BESSEL （日本測地系）のどちらかが指定できます（引数を与えない場合は世界測地系になります）。
h5.api.geo を使うと位置情報の取り扱いがとても簡単になります。ぜひご活用ください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
HTML5では動画の再生をvideoタグによってサポートしています。しかし動画の標準フォーマットは定まっておらず、SafariやIEが推すH.264、Google ChromeやFirefoxが推すWebMと各社の思惑によって採用技術が異なっているのが実情です。
また、標準のvideoタグよりもリッチな機能を提供してくれたり、IE8などvideoタグをサポートしないブラウザ用のフォールバックを提供してくれるライブラリも存在します。今回はそうしたライブラリを紹介します。
maccman/flarevideo
レガシーなブラウザでも対応できるよう、HTML5/Flashを自動的に切り替えてくれます。ブラウザはIE7以降に対応しています。機能としてはCSS/JavaScriptによるカスタマイズ、フルスクリーンサポートとなっています。
HTML5 Video Voting | Playground from ZURB
動画プレーヤに投票機能を追加しています。スペースキーを押したタイミングで投票が行われます。これにより、他の閲覧者がどこで一番楽しいと思ったのかが分かるようになっています。
HTML5 Video Voting | Playground from ZURB
Popcorn.js | The HTML5 Media Framework
動画とスライドなど、HTMLコンテンツと連携した動画再生ができるようになります。プレゼンテーションの再生などに使うと良さそうです。
Popcorn.js | The HTML5 Media Framework
jPlayer : HTML5 Audio & Video for jQuery
jQuery/Zeptoプラグインとして動作する動画プレーヤです。HTML/CSSによるカスタマイズが可能です。HTML5とFlashの自動切り替えに対応しており、IE6からサポートされています。Android/iOSにも対応しています。
jPlayer : HTML5 Audio & Video for jQuery
HTML5 Video Player | Video.js
CDNで配布もされており、スクリプトタグを埋め込むだけですぐに使える手軽さが売りです。jQueryは必須としておらず、全体でも100KB以下の軽量なスクリプトになっています。
Projekktor | The Free Web Video Player
再生前に広告を差し込む、フルスクリーン、プレイリスト、Flash&RTMPサポート、VLC Webプラグインサポート、動画品質選択、HTMLコンテンツ連動といった機能があります。テーマ、JavaScript APIもあり、カスタマイズも容易です。
Projekktor | The Free Web Video Player
etianen/html5media
videoタグをレガシーなブラウザにも対応させます。video/audioタグに対応しています。
video4all – tag support for every browser – Google Project Hosting
IE6、Firefox 2.0以降からvideoタグを使えるようにするライブラリです。実際にはFlashを使います。
video4all – tag support for every browser – Google Project Hosting
いかがでしたか。videoタグの問題としてはレガシーブラウザへの対応があるようです。そのため、各ライブラリともにレガシーなブラウザ対応をきちんと考えています。また、iOS/Androidといったスマートフォンでも問題なく使えるかといった点も大事です。
ちょうど今日リリースされたFirefox 33がOpenH264でH.264コーデックをサポートしました。これで、動画配信のデファクトコーデックはH.264になっていきそうです。配信コーデックを1つにまとめることができるようになれば、制作コストも下がり、videoタグの利用も進みそうです。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
業務システムで必須の機能と言えばテーブルによる一覧表ではないかと思います。テーブルは主に2つの使い方があります。
マスタメンテナンス
売り上げ一覧であったり、商品一覧など検索条件にあったデータを一覧したり、マスタデータのメンテナンスを行うのに使われます。殆どの場合、一つのデータベーステーブルを基準として、マスタの値を表示します。
こうしたテーブルにおいて求められる機能はヘッダーの固定表示、複数行選択、選択した行の一括更新そしてソートではないでしょうか。
最近ではデータ表示においてAjaxを使って動的に読み込んだり、ページネーションをサポートしているケースもあります。
hifiveにおいても一覧表示を行うデモがあります。
上記画面はページネーション機能があり、読み込みはAjaxを使って動的に行われます。ヘッダーは固定表示になっており、ソート機能もサポートされています。行を選択した場合、そのステータスはページネーションしても保持されています。
さらにページネーションをリンクではなく、スクロール状態をとって自動的に追記読み込みするタイプもあります。
下に下にデータが読み込んでいけます。この場合、一番下に別なリンクがあってもクリックできませんので実装時には注意してください。
集計表
もう一つのタイプは集計表です。例えば会計であったり、売り上げデータの分析を行う際の表示などです。基本的に集計された数値を表示しますので、その場で修正するような機能はありません。ドリルダウンするためのリンクがついている場合はあります。
hifiveにおいては次のようなデモがあります。
集計表で求められるのはヘッダーの固定および左側の固定表示だと思います。ヘッダーには日付を使うことが多く、年月が経てば右へ右へと伸びていきます。そのため左側のカラムを固定しておかないと何の数字か分からなくなってしまいます。
ヘッダーについても同様で、数値が見やすいようにスクロールしないように設定されます。
マウスでの横スクロールは一般的にサポートされていませんので、キーボードを使って行うことになるかと思います。
集計表においては隣同士の数値が見やすく、比較できるようになっていなければなりません。素早く正しい経営判断を行うためにも細かくカスタマイズされた集計表を実現したいですね。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
IEの寡占化状態が終わり、Google Chrome/Firefox/Safariなど様々なブラウザによるシェア争いが続いています。さらに各ブラウザともバージョンアップが激しくなっており、バージョンごとのチェックがとても難しくなっていることでしょう。
そこで使ってみたいのがWebブラウザのテストを自動化するサービスです。様々なサービスがありますので、ぜひチェックしてみてください。
BrowserStack
300種類を越えるブラウザをWebブラウザ上で動かすことができます。IE6以降から揃っているようです。スマートフォンにおいてはiOS、Android、Operaといったブラウザが利用できます。
デベロッパーツールもインストールされており、FirebugやYslow、Dragonflyのようなツールも利用可能です。開発補助系ツールが予め入っているのは便利そうですね。
Cross Browser Testing Tool. 300+ Browsers, Mobile, Real IE.
ShouldBee
日本提供のサービスとあって、テストケースを日本語で書けるというのが特徴です。テストケースを書いた後、ブラウザを選ぶとテストが開始されます。
TestingBot
Seleniumのテストをクラウドで行えます。予め設定したテストを定期的に自動実行してくれます。テストは138のブラウザで行われて、管理が免状で結果の閲覧が可能です。
Selenium Testing in the cloud – Run your cross browser tests in our online Selenium Grid
Rainforest QA
特徴的なのはテストが人力で行われるという点です。テスト結果はメールで送られるようになっています。品質管理のエンジニアが担当するため、よりハイレベルなテストが見込めるようです。
Rainforest QA – Never ship bugs to production again
Karma
デスクトップ、スマートデバイスでの実機テストが可能なJavaScriptテストランナーです。テストはJasmine、Mocha、QUnitなどに対応しています。
Karma – Spectacular Test Runner for Javascript
Cross Browser Testing
クラウド上のブラウザでテストをしますが、ローカルと接続することでLAN内のコンテンツでもテストができるようになっています。スクリーンショット撮影機能もあります。
Cross Browser Testing. Real mobile devices & browsers!
BrowserTap
ブックマークレットを実行するだけで、指定したブラウザでの表示を確認できるようになります。ローカルのURLであってもテストが可能です。
Interactive Cross-Browser Testing — BrowserTap
Browser Sandbox – Spoon.net
Seleniumを使ったクラウドテストサービスです。Chrome/Firefox/Firefox mobile/Opera/Opera Mobile/Opera mini/Safari/IEがテストでいます。
Sauce Labs
Seleniumを使ったテストサービスです。iOS/Androidにも対応しています。テスト中の動画、スクリーンショット撮影も可能です。
Sauce Labs: Selenium Testing, Mobile, Cross Browser Testing & More
Ghostlab
Windows、Mac OSX用のソフトウェアをインストールすることで、他のデバイスから同じ画面を同期しながらテストができるようになります。既に実機を持っている場合、手軽にテストができそうです。
Browsera
ブラウザ間における表示誤差をDOM単位で比較できるサービスです。色がつくので、どこにデザイン上の問題があるのかすぐに分かります。
Browsera – Automated Cross Browser Web Application Testing Service
Mogotest
Webサイトの表示の問題、JavaScriptの問題をチェックしてくれます。iPadにも対応しています。人がチェックするよりも75倍以上速いというのが売りです。
Mogotest | Web Consistency Testing Made Easier
BrowseEmAll
各種ブラウザによる問題の発見、モバイルデバイスへの最適化状態、クロスブラウザによる自動化テストなどが行えます。ローカルのHTMLファイルはもちろん、HTMLソースからのテストも可能です。
Cross browser testing solution for your desktop: BrowseEmAll
テスト自動化は主に2パターンあるようです。一つはJavaScript側で、Seleniumを使って行います。もう一つはデザインで、各ブラウザにおけるデザイン崩れがチェック可能です。HTML5でハイレベルなデザインを行うほど、レガシーでの見え方やブラウザのバージョン誤差を気にする必要があるでしょう。
つい安全策としてレガシー側のデザインに寄せたくなりますが、それではユーザの心は掴めません。テストサービスを活用し、先進的な機能を取り入れつつも安心して動かせるWebサービスを開発したいですね。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
2014/10/1追記： iOS 8.0.2で、下記の問題は解決されました。
今日から配布が始まったiOS8.0ですが、<input type=”file”>（HTML Media Capture）とFileReaderやURL.createObjectURL()を組み合わせてカメラやカメラロールの画像を読み込もうとするとエラーにな…る…気がします。
（iOS7.1.2ではFileReaderを使ってふつーにData URLを取得し、Imageのsrcに入れたりできていました。PCのChrome37でも、下記のコードで画像を表示できています。）
ちなみに、Macにつないで開発者ツールを開くと、FileReaderでreadAsDataURL()するとNOT_READABLE_ERRが出ています。
また、Chrome for iOS (37.0.2062.52)で下記ページを動かすと、inputボタンを押して「写真を撮る」を押した瞬間に100%落ちます。
コード例：
<!doctype html>
<html>
<body>
<input id="imgInput" type="file" accept="image/*">
<img id="photoImg" style="width: 300px; height: 300px">
<script>
var imgInput = document.getElementById('imgInput');
imgInput.addEventListener('change', function(event) {
var file = this.files[0];
//alertすると、それらしきURLは生成されている模様
var blobUrl = URL.createObjectURL(file);
var photoImg = document.getElementById('photoImg');
photoImg.src = blobUrl;
});
</script>
</body>
</html>
- acceptをimage/jpeg、image/pngのように指定してもダメでした
- inputタグにcapture属性を付けてもダメでした
- 上記はBlob URLを使った例ですが、FileReaderでreadAsDataURL()してもダメでした
- files.lengthは1と返ってきていて、fileは[object File]になっています
- Mobile Safariのプロセスをkillしたりキャッシュを消したりしてもダメでした
私がミスしているだけならいいんですが、iOS8.0のバグで動かないとかだと、痛い・・・。
とりあえずメモ。
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。
今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。
Twproject Gantt
Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。
jQuery.ganttView
シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があります。シンプルなUIなのでカスタマイズも容易そうです。
JSGantt
タスク同士の関連具合が表現できたり、タスクの進捗度も表示できます。子タスクの集計として親タスクを設定できるなど、こだわった表現が可能です。期間も日、週、月、四半期から選択できます。
FREE javascript gantt – JSGantt HTML and CSS only
dgrid gantt chart
dgridと言うライブラリの一つですが、タスクグループ、進捗表示、タスクの関連表現、ローカライズ表示など機能は多いです。
dgrid – A Dojo grid created by SitePen
jQuery.Gantt
シンプルなUIですが、拡大/縮小やスライダーを使った日付移動がサポートされています。カスタマイズできる要素も多くあります。
Gantt chart for Angular.js
その名の通りAngular.jsを使ったガントチャートです。週末を非表示にしたり、日付などによる並び替え機能があります。
dhtmlxGantt
DHTMLXの一機能として提供されています。かなり高機能で、その場でデータの編集も行えるのがポイントです。タスクの細かなつながりを表現したり、進捗度合い、フィルタリング、時間単位の表示などが可能です。
Editable JavaScript Gantt Chart – dhtmlxGantt
Gantt Add-on
多言語対応しており、日本語やタイムゾーン指定もできます。タスクの表示はそれほど高機能ではありませんが、細かく表示のカスタマイズが行えるようになっています。
Ganttr
シンプルなガントチャートですが、タスク同士の関連、リソース、ステータス表示がサポートされています。左側の表示を固定にできないのが残念な点です。
Timesheet.js
タイムシリーズのデータを表現するのに用いるライブラリですが、ガントチャートにも使えそうです。すっきりとしたデザインなので、他のライブラリとは随分違った印象になりそうです。
Timesheet.js – Open time tables with HTML, JavaScript and CSS …
いかがでしたか。ガントチャートとして必要な要件はまずタスクの表示でしょう。さらに関連やグルーピングができればベストです。多機能なものになるとソートやフィルタリング、さらにその場で編集できると言った機能があります。
基本的に表示についてはJSONデータを使っていますので、システムからタスクの状態をJSON出力すれば良さそうです。要件に合わせて選んでみてください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
データをビジュアル化することで単純な一覧では見えてこなかったトレンド、他のデータとの相関が分かってくることがあります。特にWebではデータのビジュアル化が弱いとされているだけに、Webシステムではグラフ化、ビジュアル化が大事な要素になります。
そこで今回はビジュアル化の中でも若干特殊と言えるヒートマップ表示をサポートするライブラリを紹介します。
heatmap.js
毎秒50万のデータポイントを描画できるというパフォーマンスの高さが売りのライブラリです。フレーム辺り10,000ポイントも問題ありません。描画はWebGLを使って行います。
High Performance JS heatmaps – Codeflow
HeatCanvas
Googleマップ、OpenStreetMap上に重ね合わせて表示もできるヒートマップライブラリです。データはX/Yで追加していく形になっています。
heatmap.js
高速、4万以上のデータポイントのサポートが特徴です。地図上へのマッピングも行えます。データは強度を合わせて、X/Yと値の3つを渡すようになっています。
heatmap.js | Dynamic Heatmaps for the Web
Maplace.js
Googleマップを扱うライブラリですが、その一機能としてヒートマップを提供しています。heatmapオプションを有効にするだけで利用できる手軽さが便利です。
Maplace.js – A Google Maps javascript plugin for jQuery.
gheat
Googleマップにヒートマップ機能を追加します。既に様々なWebサイトで実用されているようです。
gheat – heatmaps for Google Maps – Google Project Hosting
いかがでしたか。ポイントになるデータが膨大である分、その処理速度を考えるとWebGLを使って描画するライブラリが多いようです。また、特に親和性が高いのは地図になっているようです。
とは言えWebサイトの訪問者がクリックする場所、ゲームのクリック、視線のデータを集積することによるユーザビリティ解析などヒートマップは様々な場面で利用できるはずです。それだけにライブラリの存在を知っておくと役立つ場面が多そうです。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
業務システム内でもCMSがあったり、文章を書くと言ったことはあります。そういった時にテキストエリアを使っているのでは表現力に乏しく、ユーザからの不満が出てくるでしょう。そこで検討したいのがWYSIWYGエディタです。
かつてはテキストエリアの上部にツールバーが表示されるものが多かったですが、今では多彩な見せ方が出てきているようです。
trumbowyg : a lightweight WYSIWYG editor
テキストエリアにぴったりくっつく形でツールバーが表示されます。文字装飾やリンクはもちろん、文字の配置を指定できます。
Trumbowyg : a lightweight WYSIWYG editor
neilj/Squire
シンプルなエディタで、文字装飾と配置、リスト表示がサポートされています。
bootstrap-wysihtml5
Bootstrap用のシンプルなエディタです。文字装飾やリスト、画像埋め込み（URL指定）がサポートされています。
Mercury Editor: The Rails HTML5 WYSIWYG Editor
編集モードになると画面上部にツールバーが表示されます。編集できる場所は指定が可能で、並び替えもサポートされています。
Mercury Editor: The Rails HTML5 WYSIWYG Editor
Aloha Editor for Enterprise | Buy an Aloha Editor commercial license.
編集モードになると上からツールバーが下りてきて編集できるようになります。この手のソフトウェアとしては珍しく商用ライセンスで提供されています。
Aloha Editor for Enterprise | Buy an Aloha Editor commercial license.
Summernote – Super Simple WYSIWYG editor on Bootstrap
テーブルの埋め込み、画像アップロード、各種動画サイトに対応したURL貼付けなど多機能なエディタです。Bootstrapに最適化されており、HTMLのクラスもそれに合わせて出力されます。
Summernote – Super Simple WYSIWYG editor on Bootstrap
Sir Trevor JS | Made by Many
ツールバーではなく、ツールチップによる文字装飾をサポートしています。機能は多くありませんが、より手軽に使えます。
Redactor WYSIWYG html editor
画像アップロード機能がついており、動画も埋め込みコードを使って表示させられます。テーブルを埋め込むこともできます。
MooEditable
MooToolsと組み合わせて使うようになっています。画像アップロード機能はありませんが、アラートではないURL指定になっているので若干ユーザビリティが高いと思います。
そのほかにも、比較的昔からあるものとしては
などがあります。
最近の傾向としてはあまり多機能ではなく、最低限の機能を軽量に提供するものが増えているようです。大型なものはカスタマイズも難しいので、業務に必要なものだけを手軽に実装できる方が最適化した修正もしやすいかと思います。
業務システムのユーザビリティを高めるためにもこうしたライブラリを積極的に取り入れていきたいですね。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
(2014/9/1追記)Chromeのバージョンが37.0.2062.94 ⇒ 37.0.2062.102 にバージョンアップしました。
私の環境では、下記DirectWriteの無効化をしなくても、問題なく日本語文字が表示されるようになりました。
Chrome37がstableになり、一般利用者向けのバージョンアップが始まりました。
早速バージョンアップしてみたところ、下の画像のように、日本語文字がまともに表示されなくなってしまいました…。
（Windows7 x64, MEM 8GB, nVidia Quadro FX 380、という環境です。）
Chrome37から文字の描画にDirectWriteが使われるようになったため、ディスプレイドライバが古くてH/Wアクセラレーション周りでバグがあるのだろうか？と思いnVidiaのサイトから最新版ドライバ（340.66）を落として入れてみたのですが、改善せず。
仕方ないので、
chrome://flags/#disable-direct-write
を開き、「DirectWriteを無効にする」を「有効にする」（＝Direct Writeを使わない）と、とりあえず直りました。
Chrome37からは64ビット版もstableが公開されていますが、私の環境では32/64bitどちらでも状況は変わりませんでした。
ちなみに、他の人のPCで試してもらったところ問題ないPCもあったので必ず起きるわけではないようです。
ベータ版のChrome38では直っているという話もあるので、いずれアップデートで解消されるだろうと思っていますが、
取り急ぎ回避策としてはDirectWriteをオフにしてみるのが有効そうです。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifiveはMVCのフレームワークであって、他のフレームワークのようにがちがちなUI機能は提供していません。つまりBootstrapなり、Zurb Foundation、jQuery Mobileなどを自由に選んで利用が可能です。
とは言え、業務系でよくありそうなUIを手軽に実装できる機能は提供しています。今回は h5.ui の3つの機能を紹介します。
インジケータ
まずはインジケータ表示です。詳細はhifiveレシピ：処理中のユーザーの誤操作を防止しようを参照してください。
フォームの送信やAjax処理を行う際に誤操作、二重操作を防止するためにインジケータを表示したいと考える時はよくあると思います。
var df = $.Deferred();
var indicator = h5.ui.indicator({
target: document,
promises: df.promise()
}).show();
このように書くとドキュメント全体にインジケータを表示します。
インジケータではpromiseが指定できます。オプションがpromisesになっている通り、複数渡せます。そして指定したプロミス全体がresolveまたはrejectになるとインジケータが消える仕組みです。これによりAjaxをはじめとする非同期処理の完了をもってインジケータを消すのが簡単に実現できます。
表示、非表示の確認
isInViewというメソッドを使います。以下の例を見てください。
Pタグで囲まれたDOMごとに表示されているか、非表示かを判定しています。
$.each($("p"), function(i, ele) {
console.log(i+"番目の要素", h5.ui.isInView(ele));
});
最初の二段落目までは表示されているのでtrue、その後はウィンドウ外なのでfalseが返ってきています。実際、マウスオーバーすると表示されているかどうかが確認できます。
ブラウザで拡大、縮小を行っている場合などは誤差が生じることがあるため厳密には結果が異なる場合があります。画像や動画の読み込みをはじめとするコンテンツの遅延読み込みを行う場合には表示されているか否かを判定することで表示を高速化できます。
トップに戻る
縦に長いページの場合、ページ最下部にトップに戻るためのリンクを設置することがあるかと思います。その際には一番上にアンカータグを配置しますが、アンカータグで戻ると #top といったハッシュが追加されてしまいます。
h5.ui.scrollToTop();
で戻るようにすれば、アンカータグは不要でページの最上部まで一気に戻れます。
いかがでしたか。小さな機能ですが、どれも何度も繰り返し必要になる機能だと思います。より高機能でユーザビリティに優れたWebアプリケーションを開発するためにもぜひ活用してください。
なお、今回のデモはGitHubのリポジトリにアップロードしてあります。こちらも合わせてご覧ください（/ui.html）。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 