legacy-knowledge-base
公開されました Jul. 2, 2025

AlloyUIの紹介

written-by

Brett Ripley

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

legacy-article

learn-legacy-article-disclaimer-text

この記事はレガシー記事です。 Liferay製品の旧バージョンにも適用されます。 記事のメンテナンスは終了していますが、情報はまだ通用する可能性があります。

この記事では、3つのことをお伝えしています:

  1. AlloyUIの基本的な説明
  2. Alloyを使用することで得られるメリットを概説し
  3. AlloyUI(およびYUI)プロジェクトの背景を説明します。

解決策

AlloyUIとは?

AlloyUIは、 Yahooの上に構築された、オープンソースのフロントエンドフレームワークです! User Interface Library (YUI) YUIのすべてのモジュールを活用し、さらに最先端のコンポーネントと機能を追加して、素晴らしいUIを構築するのに役立ちます。

  • AlloyUI 2.0は、 Twitter Bootstrapの look & feelを取り入れ、そのHTML/CSSの強力な機能を利用しています。
  • AlloyUIを使用すると、Liferayポータル全体で一貫した外観を提供するモダンなUIコンポーネントを作成することができます。
  • また、AlloyUIはサーバーに依存しないので、どんな技術でも使うことができます。

なぜAlloyUIなのか?

jQueryの人気を考えると、よくある質問は、 なぜLiferayはYUIで構築することを選んだのでしょうか?

Liferay Portal 5.0.xではjQueryを使用していましたが(UIチームもそのコアに貢献しました)、ポータルの継続的な成長に伴い、よりスケーラブルで堅牢なアプリケーションを探すことになりました。

なお、Liferay Portal では jQuery やその他の JavaScript ライブラリを使用することもできますが、AlloyUI はポータル全体に統合されているため、 強く推奨されます。 別のアプリケーションを使用する場合、このライブラリに加えてAlloyUIも読み込む必要があるため、ページの読み込みが遅くなることがあります。

YUIとは?

ヤフーのことです! ユーザーインターフェースライブラリ(YUI)は、Ajax、DHTML、DOMスクリプトなどの技術を使用して、リッチでインタラクティブなWebアプリケーションを構築するためのオープンソースのJavaScriptライブラリです。

YUIは開発を中止しましたが、AlloyUIはここに留まり、YUIの方向性に関わらず開発を続けていきます。 Nate Cavanaugh氏は最近、JQueryへの回帰やLiferay 7.xの下位互換バージョンなど、AUI開発の計画を発表しました。

01.png

なぜYUIなのか?

AlloyUIがYUIで作られたのは、いくつかの理由があります。

  • YUIは、高品質なプロダクションレベルのウィジェットを素早く構築することを容易にします。
  • YUIはエレガントなアーキテクチャを持ち、非常に柔軟で簡単に拡張することができます。
  • 小規模なものから大規模なものまで、幅広くお使いいただけます。

プロジェクトストラクチャー

02.png

File                | Description
:------------------ | :-------------------------------------------------------------
``demos`` | Contains basic examples of the AlloyUI modules.
``build`` | Contains AlloyUI and YUI generated files, once build task has been run. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
``src`` | Contains the source code of the AlloyUI modules.
``tasks`` | Contains the source code of the Grunt tasks.
``.alloy.json`` | Specifies all dependencies and some configurations.
``.editorconfig`` | Specifies the coding style for different editors/IDEs
``.jsbeautifyrc`` | Specifies the coding format rules for JSBeautify.
``.jshintrc`` | Specifies the linting configurations for JSHint.
``.yeti.json`` | Specifies the testing configurations for Yeti.
``CONTRIBUTING.md`` | Defines the contributing information for the project.
``LICENSE.md`` | Defines the license agreement for AlloyUI.
``README.md`` | Explains the AlloyUI project.
``package.json`` | Lists all NodeJS dependencies.

詳しくは、以下をご覧ください:

AlloyUIを支えているのは誰なのか?

AlloyUIは2009年に、以下のような経緯で誕生しました:

  • Eduardo Lundgren(ブラジル)
  • ネイト・キャバノー(アメリカ)

現在では、さらに多くの貢献者がいます。 ツールの例

  • イリヤン・ペイチェフ(スペイン)
  • ブルーノ・バスト(ブラジル)
  • ゼノ・ロシャ(ブラジル)

03.png

did-this-article-resolve-your-issue

legacy-knowledge-base