-
Notifications
You must be signed in to change notification settings - Fork 0
Help
Help.js は、ブラウザと連携した、新しいスタイルのオンラインリファレンス(オンラインで使えるヘルプシステム)です。
まずは、こちらのスライド を参照してください。
WebModule/clone コマンドで作成された WebModule をベースとしたモジュールには基本的に Help.js が組み込まれています。
Help.js には 2つの機能があります。
- ブラウザの DevTools で利用する Help コマンドを提供します。
- ソースコードとドキュメントを分離し、ドキュメントを新鮮に保つ仕組みを提供します。
Help コマンドは以下の情報を表示します。
- 関数の内容をクイックダンプします。引数, 型, 戻り値などの情報を素早く確認できます
- API のリファレンスページ( GitHub/wiki ページ)やリポジトリへの直リンクを表示します
- Google や MDN でキーワードを検索するリンクを表示します
Help コマンドが表示するリンクは Chrome, Safari, Opera.next でクリックできます。
Help.js をローカルにクローンし、必要なモジュールをインストールします。
$ git clone git@github.com:uupaa/Help.js.git
$ cd Help.js
$ npm install
ブラウザで Help コマンド説明用のページを2つ( before.html, after.html )開いてください。
$ open test/before.html
$ open test/after.html
before.html は、Help.js を組み込む前の Foo.js (ファイル名は before.js)を読み込んだページで、
after.html は、Help.js を組み込んだ後の Foo.js (ファイル名は after.js)を読み込んだページです。
before.js と after.js のソースコードの相違点 も参照してください。
before.html で DevTools を開き、以下の Foo.help
コマンドを実行すると、以下の内容がコンソールに表示されます。
> Foo.help function Foo(value) { // @arg Number - the value. this._value = value; } Google.search( Foo in github.com ): http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=site%3Agithub.com%20Foo Google.search( Foo ): http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=Foo
表示されるリンクはクリックが可能です。
リンク | 機能 |
---|---|
Google.search( Foo in github.com ): | Google で github.com 以下から Foo を検索する |
Google.search( Foo ): | Google で Foo を検索する |
Help.js を組み込んでいない場合は、残念ながらあまり有益な情報は表示されません。
次に、after.html を DevTools で開き、先ほどと同じコマンドを実行します。
> Foo.help function Foo(value) { // @arg Number - the value. this._value = value; } GitHub repository: https://github.com/uupaa/Foo.js GitHub wiki page: https://github.com/uupaa/Foo.js/wiki/Foo#wiki-foo Google.search( Foo ): http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=Foo
before.js とは表示されるリンクが違っています。
リンク | 機能 |
---|---|
GitHub repository: | リポジトリのURL |
GitHub wiki page: | リファレンスページへの直リンク |
Google.search( Foo ): | Google で Foo を検索する |
Help.js を組み込んでいる場合は、より的確な情報を表示します。
HelpCommandExamples を参照してください。
こちらも合わせてご覧ください