Liferay 7.0におけるjQuery - Liferay 7.0におけるjQuery - Japan

null Liferay 7.0におけるjQuery
by Yasuyuki Takeo

Liferay 7.0におけるjQuery

画像

Liferay 7.0におけるjQuery実装について、悩んでる方!
こんにちは、日本ライフレイサポータビリティエンジニアの竹生です。

今回は、Liferay 7.0におけるjQuery実装について解説した記事を紹介します。

以下の知識レベルの方たち、ユースケースが対象です。ご参照ください。


    

   ■ 本記事対象の知識レベルとユースケース

  • 上級レベル*
  • Liferay DXP開発に必須の知識

*レベルの定義については、こちらのブログの冒頭で紹介しています。


※本記事はLiferay Community Blogに投稿されている”jQuery in Liferay 7.0”を翻訳したものです。配信元または著者の許可を得て配信しています。
※オリジナルの英記事著者:David H Nebinger氏はサウスカロライナ州のサマーヴィルに住むLiferay, Inc.のSoftware Architect/リードコンサルタントです。彼はLiferay Communityサイトにて、多くの技術情報を投稿するなど精力的に活動しています。

はじめに


本記事で紹介する方法は、”最善”はではないかもしれません。
ただ、わたしの場合はうまくいったためご紹介します。

----

私と一緒に働いたことのある人は、私がテーマ作成をあまり好まない(むしろ嫌いである)ことを知っています。実際にそうですし、私はテーマ作成が、Liferayを正しく利用する上で最も難しいことの1つであるさえと思っています。

私は一日中モジュール構築をすることができますが、デフォルトのボタンの高さを、数ピクセル大きくして色をオレンジ色に変えてくださいと頼まれた日には・・・その方法を探し出すためにソフトウェアドキュメンテーションとコードを漁ることになります。本当です。

つい先日、やっかいなjQueryマスクプラグインを動かそうとしているクライアントと仕事をする機会がありました。彼らはうまく解決できず、私に助けを求めてきました。

様々な試行錯誤の末、(無事?)動かすことに成功しました。jQuery(LiferayがBootstrapに必要とする最小バージョンではなく、完全なjQuery)を含むテーマを作成する方法がわかる、単純明快なガイドが無かったのですが、最低限、私は顧客のために、なんとかMaskプラグインを動作させる必要がありました。

今回の試行錯誤を、せっかくなので、ガイド代わりになるようなブログ記事を書いておこうと思いました。

 

テーマを作成する


私にとって、テーマの作成にあたっては、ソフトウェアドキュメンテーションとツールが頼みの綱です。

幸いなことに、https://dev.liferay.com/en/develop/tutorials/-/knowledge_base/7-0/themes-generatorが一般に公開されています。

私はテーマジェネレータ、バージョン7.2.0を使用しました(バージョン8.0.0は現在これを書いている時点でベータ版ですが、Liferay 7.1を利用される場合はそちらが適しているかと思います)。本プロジェクトではほぼすべて、デフォルト機能を使用しました。Liferay 7.0を対象とし、Styledを使用するところから始めました。これにより基本的なGulpベースのテーマプロジェクトが作成できたので、なかなかよい滑り出しです。

次に、gulp buildコマンドを使って、すべてのベースファイルを含むビルドディレクトリを取得しました。私はsrc/templatesディレクトリを作り、build/templates/portal_normal.ftlsrc/templatesディレクトリにコピーしました。

 

jQueryを追加する


   

Liferayのソフトウェアエンジニアである友人、Chemaのおかげで、jQueryをテーマに含めることについて、2つのルールがあることを学びました。

  1. Liferay / AUIが最小のjQueryをロードした後にjQueryをロードします。
  2. 競合モードを使用しないでください。

加えて、jQueryにネームスペースを使用することをお勧めします。これにより、jQueryをポータル内で行われている他の処理から、自分のコードを確実に分離することができます。

このルールは知っていましたが、ルールを知っていることと、実際にソリューションを実装できることは、別の話です。 

私は、src/templates/portal_normal.ftlファイルで、<head />セクションを次のように変更しました。

<head>
 <title>${the_title} - ${company_name}</title>
 <meta content="initial-scale=1.0, width=device-width" name="viewport" />

 <@liferay_util["include"] page=top_head_include />

 <script src="https://code.jquery.com/jquery-latest.js"></script>

 <script type="text/javascript">
  // handle the noconflict designation, use namespace dnjq for DN's jQ.
  dnjq = jQuery.noConflict(true);
 </script>
</head>

<head />の終了タグが終わる直前に、上記の変更を加えたため、Liferay / AUIがそのバージョンをロードした後にjQueryがロードされます。競合モードも使用していません。仕上げに、わたしはベストプラクティスに従い、私自身のネームスペースdnjqを使用します。

gulp deployコマンドを使用して、テーマを構築し、それらをローカルで実行中のLiferay 7インスタンスにデプロイすることができます(プロジェクトのセットアップ中にフル設定済みでした)。 Tomcatのcatalina.outファイルの末尾にあるコンソールで、私のテーマが正常にデプロイされ、処理され、使用可能になったことがわかりました。

これで、新しいページを作成し、つくったテーマを割り当てることができます。ここまでご自身で作成経験がある人であれば誰でも知っていることかもしれませんが、この単純なテーマを使用してレンダリングされたページは、まぁ、かなりひどいです(笑)。初期の位置、マージンなど、基本的なテーマで期待されるようなものがほとんど抜け落ちていたのです。確かに、Styledは、私の友人であるTravisやAlexなど、フロントエンドのエキスパート向けであることは十分理解しています。そして、彼らはどんな種類のデフォルトも使わないのでしょう。しかし、私にとっては、StyledとClassicの間のどこかにある(よりClassic側に寄せた)別の種類の "Styled ++"ベーステーマがあればよかったです。この議論は、またの機会に譲ることにしましょう。

そのページは見にくい中身を表示しますが、何度も見たことのある画面だったので、何かが壊れているわけではないのはわかっていました。私はページ上でソースを確認し、portal_normal.ftlへの変更が含まれていることが確認できました。さらに私のネームスペース変数があるのも確認できました。いい感じです。これまでのところ、上手く行っているように見えます。

 

jQuery Maskを追加する


次のステップはjQuery Mask Pluginを含めることです。これは実際には非常に簡単です。jquery-latest.jsを取得する<script />タグの後に次の行を追加するだけです。

<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

デモがうまくいっている、同僚のIgorのサイトから、直接URLを取得したので、問題はないはずです。

テーマを再構築して、バンドルに送信するため、gulp deployを使用しました。コンソールには正常にデプロイされたことが表示され、カスタムテーマのあるページを更新しても引き続き正常に表示されました。

しかし、コンソールにエラーが表示されました。

Mismatched anonymous define() module: function(a){var l=function(b,e,f){...

Everything.jspから出ていると伝えられていました(触っていない領域です)。なので、警告について気にはなりましたが、進捗具合は悪くありません。とりあえず次に進みます。

 

マスクをテストする


テストするために、単純なWebコンテンツを作成しました。HTMLフラグメントビューにするため、"code"モードを使用しました。

以下のような感じです:

<div class="input-group"><label for="date">Date</label>&nbsp;<input class="dn-date" type="text" /></div>
<script type="text/javascript">
  dnjq(document).ready(function() {
    dnjq('.dn-date').mask('00/00/0000');
  });
</script>

特別なことは何もありません。作成したテーマが期待どおり動作するか確認するための単純なテストです。 

Webコンテンツを保存し、自分のページに追加すると、失敗しました。

コンソールでは以下が表示されていました:

Uncaught TypeError: dnjq(...).mask is not a function
  at HTMLDocument. (alt:453)
  at fire (jquery-latest.js:3119)
  at Object.fireWith [as resolveWith] (jquery-latest.js:3231)
  at Function.ready (jquery-latest.js:3443)
  at HTMLDocument.completed (jquery-latest.js:3474)

これはガッカリ。。うまくいくはずだと思っていました。Igorのページでは動いていますし、そして私は本当に何も変更していないのですから。つまり、もちろん、mask()は関数なのです。

 

ソースへダイブ


   

  さて、この問題を解決しなければなりません。同僚のIgorはGithubでプロジェクトを共有していたので、私はIgorのコードを調べまてみました。

結論として、問題を特定するまでに深くコードを調べる必要はありませんでした。以下に部分的なスニペットがあるので、これからどこが問題かを推測してみてください:

// UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
// https://github.com/umdjs/umd/blob/master/templates/jqueryPlugin.js
(function (factory, jQuery, Zepto) {

  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    factory(jQuery || Zepto);
  }

}(function ($) {...

私はこれを見て、問題はAMDローダー、あるいは少なくともスクリプトインポートを自分が正しく理解していないためだと考えました。壊れたjavascript以外、何も手がかりはありません。

 

AMD バイパス

AMDローダーを迂回する方法は知っていました。

jquery.mask.jsファイルをダウンロードし、それをsrc / js / jquery.mask.jsとして私のテーマに保存します。次に、上記のスタンザを以下のように単純化するために変更します。

// UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
// https://github.com/umdjs/umd/blob/master/templates/jqueryPlugin.js
(function (factory, jQuery, Zepto) {
  factory(jQuery || Zepto);
}(function ($) {...

基本的には、AMDローダーに送信される可能性があるものはすべて取り除き、ブラウザとjQueryにプラグインをロードさせるようにしました。

 

マスクの再テスト


マスクプラグインのportal_normal.ftl行を次のように変更します。

<script src="${javascript_folder}/jquery.mask.js"></script>

すると、ウェブからではなく私のテーマから引っ張り、修正バージョンが適応が適応されました。

自分のテーマをgulp deployすると、コンソール上で問題なくビルド、デプロイを開始しました。いい感じです。

ブラウザのページを更新し(シークレットモードを使用すると、キャッシュの心配はありません)、コンソールにエラー表示がないことを確認しました。

表示された入力フィールドに、いくつか数字を入力してテストしたところ、すべてうまく動作しました。

成功です!!

 

まとめ


  

まとめというより、最後に、ですが・・・

今回紹介した方法は、おそらく、あまり正しいやり方ではないと思います。私の同僚のTravis、Alex、Chema、あるいは読んでくださってるあなたが、私の間違いを指摘してくれるでしょう・・・。

少なくとも、今回のケースに関して解決はできたかなと思っています。

 


  

 

本記事は以上です。
いかがでしたでしょうか?

記事に関するご意見、ご感想などございましたら、お気軽にyasuyuki.takeo@liferay.comまでご連絡くだい。

 


■ これまで発信してきた日本語による技術コンテンツを、Qiitaでお読みいただけます。よろしければそちらの記事も合わせてご役立てください。
https://qiita.com/yasuflatland-lf

Doorkeeperのライフレイコミュニティメンバー大歓迎!
コーポレートブログの技術コンテンツ更新情報など定期的におとどけしています。
https://liferay.doorkeeper.jp/

 

業界最高の評価

Gartner

Gartnerレポート:『リーダー』に位置づけ
ライフレイは9年連続で、Gartner社によるデジタルエクスペリエンスプラットフォーム(DXP )分野のマジック・クアドラントにおいて、リーダーに選出されました。

レポートの詳細、ダウンロード