linuxBean14.04(120)NetBeans Connector Plugin for Chrome

ラベル: , ,
New Features in NetBeans Connector Plugin for Chrome - YouTubeのビデオのチュートリアルに沿ってやってみます。NetBeans8.1はlinuxBean14.04(117)NetBeans8.1でnvmのNode.jsを使うための工夫で設定した状態です。

前の関連記事:linuxBean14.04(119)NetBeans8.1でNode.jsの設定:もう一つの方法


NetBeans Connector Plugin for Chromeのインストールとチュートリアル


Chromiumのメニューボタンから、その他のツール→拡張機能、他の拡張機能を見る。

「NetBeans Connector」で検索してでてきたNetBeans Connectorをインストールしました。

GeertjanWielenga/Countries: A Knockout example that populates a DataList.

このGitHubリポジトリをクローンします。

これはKnockout.jsの例になっています。

Clone or downloadボタンをクリックしてCopy to clipboardボタンをクリックしてリポジトリのURLをコピーします。

NetBeans8.1のメニュー、チーム→Git→クローン。


リポジトリURL欄にCrtl+Vでペーストします。

クローン先は自動的に入力されました。

「次>」「次>」「終了」をクリックしていくとクローンされます。


プロジェクトを開いてみるとソースフォルダにGitHubリポジトリの内容がコピーされていることがわかります。

サイト・ルート、重要なファイル、BowerライブラリはNetBeansが分類したものです。

プロジェクトフォルダのCountriesを右クリック→プロパティ。


ソース・フォルダと単体テスト・フォルダは自動的に入力されなかったので参照ボタンをクリックしてそれぞれ手動で指定します。


プロジェクトの構成が少し変化しました。

public_htmlファルダがサイト・ルート/ソース、になりtestフォルダが単体テスト、に分類され、重複した表示がなくなりました。

bower.json記載のパッケージを.bowerrc記載のディレクトリにインストール


パッケージマネージャBowerを使ってbower.json記載のパッケージを.bowerrc記載のディレクトリにインストールします。
{
    "directory": "public_html/bower_components"
}
.bowerrcにはこう書いてあるので今回のプロジェクトの場合はサイト・ルート/ソース フォルダ下のbower_componentsフォルダにパッケージがインストールされます。

プロジェクト名を右クリック、Bowerインストール。

NetBeans8.1のオプションのHTML/JSの設定がちゃんとされていればbower.jsonに書いてある依存パッケージがインストールされるはずです。
"/usr/local/bin/bower" "install"
bower                     invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower knockout#3.3.0        not-cached https://github.com/SteveSanderson/knockout.git#3.3.0
bower knockout#3.3.0           resolve https://github.com/SteveSanderson/knockout.git#3.3.0
bower knockout#3.3.0          checkout v3.3.0
bower knockout#3.3.0          resolved https://github.com/SteveSanderson/knockout.git#3.3.0
bower knockout#3.3.0           install knockout#3.3.0

knockout#3.3.0 public_html/bower_components/knockout
完了。
最初の警告はbower.jsonのパッケージ名Countriesに大文字が使われているのが原因です。


knockoutパッケージがインストールされました。

あとはNew Features in NetBeans Connector Plugin for Chrome - YouTubeのビデオに沿って行けば結構いろいろ便利な機能があることがわかります。

エディタの中のリンクはCtrlキーを押すと飛べました。

参考にしたサイト


New Features in NetBeans Connector Plugin for Chrome - YouTube
NetBeansとChromeの連携のビデオチュートリアル。

package managers - Bower update return me invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes - Stack Overflow
上記のビデオチュートリアルの題材のGitHubリポジトリ。

ドキュメント | Knockout.js 日本語ドキュメント
ビデオチュートリアルの題材で使われているライブラリ。

npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ
npmとbowerの違いについての解説。

パッケージマネージャー「Bower」が大変便利で捗りそうです - Mach3.laBlog
bowerの使い方の解説。

次の関連記事:linuxBean14.04(121)Yahoo!ニュースの映像ニュースの動画をFirefoxで見る方法

PR

0 件のコメント:

コメントを投稿