1. Liferay Help Center
  2. Liferay DXP 7.1開発者用チュートリアル
  3. ツーリング

ドキュメンテーション

Dev Studioでのフロントエンドコードアシスト機能の使用

Liferay Dev Studioは、Liferay開発を支援する拡張性の高いフロントエンド開発ツールを提供しています。これまでに、AlloyUI、JavaScript、CSS、およびjQueryのコード推論およびコード補完機能にアクセスできるようになりました。

このチュートリアルでは、Dev Studioのコードアシスト機能の使用方法について説明します。

各言語はそれぞれのセクションで説明されているため、関心のある言語のセクションを参照してください。DevStudioがコードアシストを提供する言語は、上記の4つの言語を含め、多数あります。これは、Dev StudioのTern統合によって提供されます。これらの機能にアクセスするには、使用している言語が想定されているファイル（例: JavaScript、JSP、HTML、CSSなど）で作業する必要があります。

Tern機能を使用するには、プロジェクトで有効にする必要があります。また、使用している言語に基づいて、適切なTernモジュールを有効にする必要があります。たとえば、jQueryファイルを記述している場合は、TernのjQueryモジュールを適用してコードアシストを使用する必要があります。プロジェクトのTern機能を有効にする方法については、Enabling Code Assist Features in your Projectを参照してください。

最初に、AlloyUIコードアシスト機能のテストを開始します。

AlloyUIのコードアシスト機能

AlloyUIのコードを記述する際の生産性の向上に役立つコードアシスト機能がいくつかあります。開始する前に、AlloyUI機能を使用するために必要な以下のTernモジュールを有効にします。AlloyUI、Browser、JSCS、 Liferay、およびYUI Libraryです。以下の例は、プロジェクトのmain.jsでAlloyUIコードアシスト機能にアクセスする方法を示しています。

  1. プロジェクトのmain.jsファイルを開き、以下のコードを入力します。

    AUI().

  2. カーソルをAUI().の右側に置いて、*[Ctrl]+[Space]を押します。これにより、AUI()のグローバルオブジェクトのコード推論が表示されます。AlloyUIフレームワークの独自のAPIドキュメントも表示されることに注意してください。[Enter]*キーを押して、コード補完を使用します。

図1：この図は、JSファイルでのコード推論を表示しています。

デフォルトでは、コード推論はキーストロークの組み合わせによってトリガーされます。ただし、Dev Studioの[設定]メニューで自動アクティベーションを有効にすることができます。自動アクティベーションは、以下の手順に従って有効にできます。

  1. [ウィンドウ] → [設定] → [JavaScript] → [編集] →*[コンテンツアシスト]*に移動します。

  2. *[自動アクティベーションを有効にする]というチェックボックスをオンにして、[適用して閉じる]*をクリックします。

    以下の図は、自動アクティベーションを有効にする方法を示しています。

    図2：*自動アクティベーションを有効にするのチェックボックスは、自動アクティベーション*の見出しの下に表示されています。

前の例に従ってトリガーキーを押すと、すぐにコード推論がアクティブになります。この場合は、.（ピリオド）キーがトリガーキーです。

AlloyUIの一般的なコード推論に加えて、コードテンプレートにもアクセスできます。AUI JavaScriptテンプレートは、<script>および<aui-script>タグを使用する場合、EclipseのJavaScriptエディタとHTML/JSPエディタで使用できます。以下の手順に従って、AUIコードテンプレートを使用します。

  1. main.jsに以下のコードを入力します。

    AUI

  2. *[Ctrl]+[Space]*を押してAUIのコード推論を表示すると、利用可能なすべてのAlloyUIコードテンプレートのリストとドキュメントが表示されます。

    図3：Dev Studioを使って、JSおよびJSPエディタにあるAUIコードテンプレートにアクセスできます。

  3. テンプレートを選択し、*[Enter]*を押してその内容をmain.jsに貼り付けます。

JSファイルのコード推論に加えて、<aui:script>タグを使用してJSP/HTMLファイルのコード推論を使用することもできます。

プロジェクトのJSPのいずれかを開き、まだASP taglibディレクティブがJSPにない場合は以下のようにして追加します。

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

また、[Taglib imports] → [Liferay AUI Taglib Import v6.0]の下にあるスニペットメニュー（[ウィンドウ] → [ビュー表示] → [スニペット]）からインポートを追加することもできます。

  1. JSP内に<aui:script>タグを追加し、以下のコードのように設定します。

    <aui:script>
aui
</aui:script>

  2. auiの右側にカーソルを置いて*[Ctrl]+[Space]*を押すと、コード推論が表示されます。

これで、JavaScriptファイル内でもJSP内でも、ワークフローを改善するコードアシスト機能にアクセスできるようになりました。

次は、Dev StudioのJavaScriptコードアシスト機能について説明します。

JavaScriptのコードアシスト機能

AlloyUIのコードアシスト機能に加えて、生のJavaScriptを使用してコードの推論と補完にもアクセスすることができます。TernモジュールのLiferayが有効になっているため、プロジェクトでこのコードアシスト機能を使用することができるのです。このプラグインは、Liferay Portalでの実行時にポートレットで使用可能な静的JavaScriptオブジェクトであるAPIのコード補完を提供します。EclipseでのTernモジュールの有効化の詳細については、Enabling Code Assist Features in Your Projectを参照してください。

以下の例は、コードアシスト機能を使用して、ポートレットプロジェクトの機能に簡単にアクセスする方法です。

  1. ポートレットのmain.jsを開き、以下の関数を追加します。

    function say(text){
alert(text);
}

  2. 次に、以下のボタンをポートレットのview.jspに追加します。

    <aui:button onClick=""/>

  3. そして、onClick属性の引用符内にカーソルを置き、*[Ctrl]+[Space]*を押します。コード推論ダイアログがポップアップし、使用可能なJavaScript関数のリストが表示されます。

  4. *「say」*と入力すると、リストが新しいsay(text)関数に絞り込まれていることがわかります。

    図4：JavaScriptのコードアシスト機能により、関数に簡単にアクセスできます。

  5. say(text)関数を選択すると、関数のパラメータと関数が配置されているファイルパスを提供するドキュメントが添付されていることがわかります。

  6. *[Enter]*キーを押してコード補完を使用し、ボタンに関数を追加します。

このように、JavaScript開発はDev Studioのコードアシスト機能を使用して簡単に行うことができます。これまでに、AlloyUIおよびJavaScriptのコードアシスト機能の使用方法を紹介しましたが、次はCSSのコードアシスト機能の使用方法を説明します。

CSSのコードアシスト機能

Dev Studioは、CSSのコード推論および補完ツールを提供しています。これらのツールを使用するには、追加のプラグインをインストールする必要があります。

以下の手順に従って、Dev Studioにプラグインをインストールします。

  1. [ヘルプ] → *[新しいソフトウェアのインストール…]*に移動します。

  2. 以下のリンクを[作業:]入力フィールドに貼り付けます。

    http://oss.opensagres.fr/eclipse-wtp-webresources/1.1.0/

  3. *[追加…]をクリックし、[WTP HTML-Webリソース]*の横にあるチェックボックスをオンにします。

  4. *[次へ]*をクリックして、インストールの手順に従います。

これでプラグインがインストールされたので、次はプロジェクトでのCSS機能を有効にする必要があります。プロジェクトを右クリックして、[プロパティ] → [Webリソース] → *[CSS]*に移動します。両方のチェックボックスをオンにして、プロジェクトのCSS機能を有効にします。

これで、プロジェクトに新しいCSS機能を正常にインストールして有効にできました。

CSS機能が有効になったので、次はその使用方法を確認します。以下の手順に従って、CSSのコードアシスト機能を使用してCSSクラスを見つけます。また、以下のプロセスを使用してIDを見つけることもできます。

  1. main.cssファイルを開き、以下のクラスを追加します。

    .sample-class {
background-color:green;
}

  2. view.jsp内で<aui:button/>タグを追加し、以下のコードと一致するように設定します。

    <aui:button name="test" value="test" cssClass=""/>

  3. cssClass属性の引用符内で*[Ctrl]+[Space]*を押して、CSSのコード推論を表示します。sample-classと入力して、目的のクラスに絞り込みます。

    図5：CSSのコード推論は、CSSで開発する際のワークフローを改善します。

    コード推論とともに、クラスのスタイリングとクラスが配置されているファイルを表示することもできます。

  4. *[Enter]*キーを押してコード補完を使用し、CSSクラスをJSPに追加します。

CSSクラスのコード推論ダイアログを見ると、独自のCSSクラスに加えて、Liferay PortalにあるBootstrap CSSクラスにもアクセスできることがわかります。

最後に、jQueryのコードアシスト機能について説明します。

jQueryのコードアシスト機能

jQueryでコードアシストを使用することもできます。これを行うには、jQueryのTernモジュールを有効にする必要があるので、ここでは、Enabling Code Assist Features in Your Projectチュートリアルの手順に従って、プロジェクトでTernモジュールを有効にする方法を説明します。

jQueryのTernプラグインは、jQueryフレームワークの型情報を提供します。以下の例では、jQueryのコードアシスト機能をテストします。

  1. プロジェクトのjquery.jsファイルを開きます。

  2. ファイルに、以下のサンプル変数を入力します。

    var form =

  3. *[Ctrl]+[Space]*を押して、宣言している変数のコード推論を表示します。すると、利用可能なすべてのリストが表示されます。また、各メソッドに対してjQueryのドキュメンテーションが利用可能であることにも注意してください。jQueryでコードアシストを使用する例については、以下の図を確認してください。

    図6：jQueryのコードアシスト機能を使用すると、利用可能なものと各オプションの背景にあるドキュメンテーションを表示する手間が省けます。

    さらに、jQueryのコールバックハンドラーでは、パラメータの型情報も利用できます。

    図7：jQueryコードアシストは、パラメータの型情報も表示します。

Dev Studioのフロントエンド開発のためのコードアシスト機能を使用したワークフローの改善方法についての説明は、以上です。

関連トピック

Enabling Code Assist Features in your Project

Liferay Workspace

From Liferay 6 to Liferay DXP 7.1

« プロジェクトでコードアシスト機能を有効にするBlade CLI »
この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています