Showing posts with label Liferay. Show all posts
Showing posts with label Liferay. Show all posts

Monday, September 7, 2020

Liferay 7とMicrosoft365(Office365)を連携させてOfficeファイルをオンライン編集する

こんにちは。おおたにです。

今も昔も仕事でMicrosoft Officeを利用しているユーザは多いと思いますが、今やその月額/年額サブスクリプションサービスであるMicrosoft 365(旧Office 365)をご利用の会社も多いかと思います。今回はそのMicrosoft 365(旧Office 365)とLiferayのドキュメントライブラリ(ファイル管理機能)の連携機能について紹介したいと思います。
なお、この機能はLiferay DXP 7.2で新しく追加された機能になります。実際に試してみたい方はLiferayDXP 7.2以降でお試しください。

また、LiferayはGoogle Drive/Google Docsとの連携機能も備えており、これらのサービスを用いてOfficeファイルをオンライン編集することもできます。具体的な設定方法については別の記事「Liferay 7とGoogle Drive / Google Docsを連携させる」を参考にしてください。

Microsoft 365(Office365)連携機能で実現できること


LiferayのドキュメントライブラリとMicrosoft 365を連携すると、ドキュメントライブラリ上のOfficeファイルをMicrosoft 365を利用してオンライン編集できるようになります。具体的には以下のことができます。
  • Microsoft 365を使い、新規Wordファイル(.docx)、新規Excelファイル(.xlsx)、新規PowerPointファイル(.pptx)をブラウザ上で作成する
  • 作成したファイルをドキュメントライブラリに保存する
  • ドキュメントライブラリ上の以下の形式のファイルをMicrosoft 365を使ってブラウザ上で編集する。
    • Word/テキスト系ファイル(.doc, .docx, .docm, .dot, .dotx, .dotm, .html, .txt, .rtf, .odt)
    • PowerPoint/スライド系ファイル(.ppt, .pptx, .pptm, .pps, .ppsx, .ppsm, .pot, .potx, .potm)
    • Excel/シート系ファイル(.xls, .xlsx, .xlsm, .xlt, .xltx, .xltm, .ods, .csv, .tsv, .txt, .tab)
なお、Microsoft 365でファイル編集を開始するとOneDrive上にファイルがコピーされ、Microsoft 365でファイル編集を終えるとOneDrive上のファイルは削除されます。詳しい説明はLiferayヘルプセンターのこの記事この記事をご参照ください。

Azure PortalでMicrosoft 365の連携設定を行う


では早速設定方法を見ていきましょう。まずはAzure PortalでMicrosoft 365側の設定を行います。具体的には、Microsoft Graph APIをLiferayが利用できるように公開し、Liferay向けにOAuth2.0クライアントIDを発行します。

1. Azure Portalに管理者アカウントでログインする
2. Azure Active Directoryをクリックし、「アプリの登録」->「新規登録」をクリックする 
3. 「名前」にアプリケーション名を入力し(認証時に表示されます)、「アカウントの種類」を適宜選択して「登録」をクリックする
4. 作成が完了すると以下のような画面が表示されるので、「アプリケーション(クライアント)ID」「ディレクトリ(テナント)ID」の値をコピーし、「リダイレクトURIを追加する」をクリックする
5. 「プラットフォームを追加」をクリックして「Web」を選択する
6. 「リダイレクト URI」にhttp(s)://<host or IP>:<port>/o/document_library/onedrive/oauth2と入力して「構成」をクリックする
7. 「証明書とシークレット」->「新しいクライアントシークレット」をクリックし、「説明」と「有効期限」を適宜入力して「追加」をクリックする

8. クライアントシークレットが登録されたら「値」欄に表示されたクライアントシークレットをコピーする
9. 続いて「APIのアクセス許可」->「アクセス許可の追加」をクリックする
10. 「Microsoft Graph API」をクリックする
11. 「委任されたアクセス許可」を選択し、Files.Read.AllFiles.ReadWrite.Allにチェックを入れて「アクセス許可の追加」をクリックする
以上でMicrosoft 365側の設定は終わりです。

Liferayの設定を行う


続いて、Liferay側の設定を行います。

1. Liferay DXP 7.2に管理者でログインする
2. 「Control Panel」->「Configuration」->「Instance Settings」->「Documents and Media」をクリックする(この場合、インスタンス毎の設定になります。グローバルに設定する場合は「System Settings」->「Documents and Media」をクリックします)
3. 「OneDrive」を選択し、Client IDに「アプリケーション(クライアント)ID」、Client Secretに「クライアントシークレット」、Tenantに「ディレクトリ(テナント)ID」を入力して「Save」をクリックする


以上で設定完了です。Liferay側の設定はとても簡単です。

動作確認してみよう


では動作確認してみましょう。ドキュメントとメディアの新規作成メニューをクリックすると、Word、PowerPoint、Excelが表示されるようになります。


これらをクリックしてファイル名を入力すると、Microsoft 365のログイン画面が表示されるので認証情報を入力します。初回はアクセス許可の画面が表示されるので許可します(2回目以降は表示されません)。すると、OneDrive上にファイルが生成されオンラインのOfficeアプリでファイルが編集できるようになります。ファイルを保存すると、OneDrive上のファイルをLiferayに保存し、OneDrive上のファイルは削除されます。

また、アクションメニューの「Edit in Office 365」をクリックすると、OneDrive上にファイルをコピーしてOfficeアプリでのオンライン編集が始まります。

今回の紹介は以上です。Officeファイルをオンライン編集できるメリットは大きいと思いますので、組織でMicrosoft 365をお使いであれば是非お試しください。

Friday, August 28, 2020

gogo shellコマンドを作ってみよう

 とたにです。

今回は実は色々な用途に使えるgogo shellコマンドの作り方を紹介したします。

※本記事はLiferay DXP 7.1を使用していますがバージョン7.0〜7.2でも(おそらく7.3も)問題なく動くと思います。

そもそもgogo shellとは

gogo shellコマンドの前にgogo shellとはなんでしょうか。LiferayはDXP(7.0)以降、アーキテクチャがOSGiベースに刷新されました。gogo shellはそのOSGiランタイムのコマンドラインシェルのことで、正しくはApache felix gogo shellといいます。
Liferayにも、このgogo shellを組み込まれているためgogo shellにアクセスしてさまざまな情報を取得したりOSGiバンドルの操作をしたりすることができます。

gogo shellへの接続方法

gogo shellへの接続方法は大きく2通りあります。
1つ目はLiferayのコントロールパネルからgogo shellにアクセスする方法です。
コントロールパネルの設定からGogo shellをクリックすると以下のようなGogo shellコマンドをWebページから入力できます。


2つ目は、telnetを使って接続する方法です。ただし7.1以降でtelnetを使って接続するためには以下の設定をportal-ext.propertiesに設定しておく必要があります。

 module.framework.properties.osgi.console=localhost:11311

この状態でLiferayを起動すると以下のようにtelnetからgogo shellに接続することができます。

$ telnet localhost 11311
Trying ::1...
telnet: connect to address ::1: Connection refused
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.
____________________________
Welcome to Apache Felix Gogo

gogo shellではさまざまなコマンドが標準で用意され、主にOSGiバンドルの状態確認や調査、状態変更などが行えます。helpコマンドで使用できるコマンドの一覧を確認することができるので興味のある方は確認してみてください。

gogo shellコマンドの作成方法

gogo shellでは用意されたコマンドを使うだけではなく新しくコマンドを追加することができます。
今回は非常に簡単なコマンドを作成してみたいと思います。

step.1 Liferayモジュールプロジェクトの準備

Liferay IDEやbladeコマンドでLiferay workspaceとコマンドを追加するためのモジュールプロジェクトを作成します。プロジェクトの種類はシンプルでよいのでactivator等を選んでおくのが簡単かと思います。

今回はLiferayのサイト一覧とサイトメンバの一覧をコマンドで表示するコマンドを作ろうと思っているので、Liferayのサービスが呼び出せるようにbuild.gradleを以下のようにしておきます。
dependencies {
	compileOnly group: "org.osgi", name: "org.osgi.core"
	compileOnly group: "org.osgi", name: "org.osgi.service.component.annotations"
	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel"	
}

step.2 コマンドクラスの作成

package sample;

import com.liferay.portal.kernel.dao.orm.QueryUtil;
import com.liferay.portal.kernel.exception.PortalException;
import com.liferay.portal.kernel.model.Group;
import com.liferay.portal.kernel.model.User;
import com.liferay.portal.kernel.service.GroupLocalService;
import com.liferay.portal.kernel.service.UserLocalService;
import com.liferay.portal.kernel.util.PortalUtil;

import java.util.List;

import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;



@Component(
        property = {
                "osgi.command.function=listSites",
                "osgi.command.function=siteMembers",
                "osgi.command.scope=sample"
        },
        service = Object.class
)
public class SIteMemberCommand {

    public void listSites() {
    	List>group> sites = this.groupLocalService.getGroups(QueryUtil.ALL_POS, QueryUtil.ALL_POS);
    	
    	sites.stream().forEach(g -> System.out.println(g.getFriendlyURL()));
    	System.out.println("-- Total: " + sites.size());
    }
    
    public void siteMembers(String siteUrl) throws PortalException {
    	
    	Group g = this.groupLocalService.getFriendlyURLGroup(PortalUtil.getDefaultCompanyId(), siteUrl);
    	List>user> users = this.userLocalService.getGroupUsers(g.getGroupId());
    	
    	users.stream().forEach(u -> System.out.println(u.getScreenName() + ", " + u.getEmailAddress()));
    }
    
    @Reference
    private GroupLocalService groupLocalService;
    
    @Reference
    private UserLocalService userLocalService;
}
大した長さではないので、クラスのコードを全部はっています。

一番大切な部分は、クラスに付与されたアノテーションで、osgi.comand.functionとosgi.comnand.scopeプロパティの部分です。
osgi.command.functionはコマンドの名前と対応するメソッド名を定義しています。今回の例だとlistSitesと入力するとこのクラスのlsitSitesメソッドが実行されるようになります。
またosgi.command.functionは複数行記述することで複数のコマンドをひとつのクラスにまとめて定義することができます。

osgi.command.scopeはコマンドの名前空間でコマンド実行時には省略することもできますが、コマンド名が衝突しているケースで[スコープ名]:[コマンド名]のように入力することでコマンドを限定することができます。

コマンドの中身はLiferayの標準サービスを使って簡単な情報を出力しているだけなので詳細は省略しますが、コマンドを実行すると以下のように動きます。

  • listSitesコマンドはLiferay上のサイトのフレンドリURL一覧を出力します。
  • siteMembersコマンドはフレンドリURLを引数にとって、そのサイトの所属ユーザ一覧を出力します。

step.3 結果確認

モジュールをビルドしてLiferayにデプロイしたらコマンドの動作を確認してみましょう。

g! listSites  
/landing1
/landing2
...
/uitest
/personal_site
/template-35187
/template-35237
/template-33896
/template-20154
/template-33875
/template-33851
/template-33862
-- Total: 115

サイトテンプレートなどもサイトのひとつとして表示されていますが、いちおうサイトの一覧は取得できているようです。
次にsiteMembersもためしてみましょう。

g! siteMembers /contacttest
test, test@liferay.com

サイトメンバが1人しかいないですが、サイトのメンバーが表示されていることがわかります。

まとめ

Liferayのサービスと連携したgogo shellコマンドを作成しました。
gogo shellコマンドはこのようにLiferayのサービスやサービスビルダで作成したサービスを呼び出すことができるので、例えば初期データの登録やサービスレイヤーのテストなどさまざまな用途に活用することができます。
作成方法も簡単なのでぜひ活用してみてください。

Tuesday, August 25, 2020

Liferayテーブルを見てみよう〜サイト情報編

こんにちはナクラです。

前回はユーザの情報についてみましたが、
今回はサイトに関連する情報についてみていきましょう。
LiferayではいくつかのWebページをまとめてサイトを構成しています。
表示しているサイトに関する情報はコントロールパネルのサイトのセクションで確認できます。
サイトのセクションでは、サイトの所属するユーザの情報や、
サイト内のWebコンテンツやWiki、ドキュメントなどの情報を確認することができます。
特にサイト自体についての設定情報は
「設定」> 「サイトの設定」になります。

サイト設定では4つタブがあります。

・共通
・ソーシャル
・言語
・詳細設定

それぞれ見ていきましょう。


1.共通タブ

共通タブの画面はこのようになっています。




この画面の設定項目の大半はサイト情報のメインのデータであるGroup_テーブルに含まれている情報です。
(このテーブルも最後に"_"がついてます。)
サイトなのにGroup_という名前になっているので、注意してください。
実は、Group_テーブルには、この記事で取り扱っている"サイト"以外にも
いろいろな"サイト"的なものを登録するテーブルになっていて、
"サイト"自体は、Group_の一部という取扱いになっています。
Group_テーブルの定義は、前回でも確認しましたが、以下のようになっています。
Group_テーブル
+-------------------------------------+------------------+---------+---------+----------+-------+
| Field                                     | Type              | Null     | Key    | Default | Extra |
+-------------------------------------+------------------+---------+---------+----------+-------+
| mvccVersion                        | bigint(20)        | NO     |           | 0           |          |
| uuid_                                    | varchar(75)    | YES   | MUL   | NULL    |          |
| groupId                                 | bigint(20)       | NO     | PRI     | NULL   |          |
| companyId                           | bigint(20)        | YES  | MUL    | NULL   |          |
| creatorUserId                       | bigint(20)        | YES  |            | NULL   |          |
| classNameId                        | bigint(20)        | YES  | MUL    | NULL   |          |
| classPK                                | bigint(20)        | YES  |            | NULL   |          |
| parentGroupId                      | bigint(20)        | YES  |            | NULL    |         |
| liveGroupId                           | bigint(20)        | YES  | MUL   | NULL   |          |
| treePath                                | longtext          | YES  |            | NULL   |          |
| groupKey                              | varchar(150)  | YES  |            | NULL   |          |
| name                                     | longtext         | YES  |             | NULL   |         |
| description                            | longtext          | YES  |            | NULL    |         |
| type_                                     | int(11)            | YES  | MUL    | NULL    |         |
| typeSettings                          | longtext         | YES  |             | NULL    |         |
| manualMembership              | tinyint(4)        | YES  |             | NULL    |         |
| membershipRestriction         | int(11)            | YES  |            | NULL    |          |
| friendlyURL                           | varchar(255)  | YES  |            | NULL    |          |
| site                                        | tinyint(4)         | YES  |            | NULL    |          |
| remoteStagingGroupCount   | int(11)            | YES  |            | NULL    |          |
| inheritContent                        | tinyint(4)        | YES  |            | NULL    |          |
| active_                                   | tinyint(4)        | YES  |            | NULL    |          |
+--------------------------------------+------------------+-------+----------+-----------+--------+

さて、共通タブの項目とデータベースでの設定値との対応についてみていきましょう。

●詳細セクション
・サイトID:groupIdカラム
この値がサイトのプライマリキーになります。 
・説明: descriptionカラム
・メンバーシップタイプ:type_カラム
各設定に対応する値は下記のようになります。
公開
制限付き 2
非公開 3
・手動メンバーシップ管理を許可する:manualMembershipカラム
対応する値は
はい 1
いいえ 2
・親サイト:parentGroupIdカラム 
親サイトを指定した場合は親サイトのサイトID(groupIdカラムの値)が入ります。

●ページセクション

・公開ページ、非公開ページ
ページが存在する場合は、公開ページと非公開ページへのリンクが表示されます。
ページが存在しない場合は、サイトテンプレートを指定できるようになっていて、
それで保存すると、サイトテンプレートに従ってページが作成されます。
ページとサイトの関係については、後日詳しくみることにしましょう。

●カテゴリの設定セクション

・タグ
この設定値はAssetEntries_AssetTagsテーブルに登録されます。
入力したタグが生成されて、tagIdを割り当てらます。
サイトに対しては、アセットとしてみた場合のentryIdが割り当てられており、それを使ってタグとの関連情報が登録されます。
AssetEntries_AssetTagsテーブル
+---------------+-------------+------+-------+-----------+-------+
| Field           | Type        | Null | Key   | Default | Extra |
+---------------+-------------+------+-------+-----------+-------+
| companyId | bigint(20) | NO  | MUL | NULL    |          |
| entryId        | bigint(20) | NO  | PRI  | NULL    |          |
| tagId           | bigint(20) | NO  | PRI  | NULL    |          |
+---------------+-------------+------+-------+-----------+-------+
アセットの情報については
AssetEntryテーブルで確認できます。

●サイトURLセクション

・フレンドリURL:friendlyURLカラム
サイト作成時にはサイト名からfriendlyURLは自動生成されますが、
この設定で変更することができます。
・バーチャルホストの公開ページと非公開ページ
この設定値はVirtualHostテーブルに登録されます。
VirtualHostテーブル
+-----------------+------------------+-------+------+-----------+-------+
| Field             | Type              | Null  | Key  | Default | Extra |
+-----------------+------------------+-------+------+-----------+-------+
| mvccVersion | bigint(20)      | NO    |        | 0           |          |
| virtualHostId | bigint(20)       | NO   | PRI  | NULL    |         |
| companyId   | bigint(20)       | YES | MUL | NULL    |         |
| layoutSetId   | bigint(20)       | YES |         | NULL    |         |
| hostname     | varchar(200)  | YES | UNI  | NULL   |          |
+-----------------+------------------+-------+-------+----------+-------+
layoutSetIdカラムの値がサイトの公開ページセットのIDおよび非公開ページセットのIDになっており、
hostnameカラムに設定した値が登録されます。

以下の項目はいずれもtypeSettingsカラムで登録されます。
・ディレクトリのインデックスを有効にする
・このサイトでアセットの自動タグ付けを有効にする
・共有
それぞれの設定方法は次のとおりです。
directoryIndexingEnabled=false   
assetAutoTaggingEnabled=true
sharingEnabled=true 


2.ソーシャルタブ

ソーシャルタブの画面はこのようになっています。



●評価セクション

ここでは、サイトのコンテンツの評価方法を設定できます。
項目とデータベースの設定値との対応は以下の様になっています。
「高評価」:like
「スター(縦方向)」:stacked-stars
「スター」:stars
「評価」:thumbs
それぞれの設定情報は
Group_テーブルのtypeSettingsカラムに以下のようなに登録されます。
com.liferay.blogs.model.BlogsEntry_RatingsType=stars
com.liferay.document.library.kernel.model.DLFileEntry_RatingsType=thumbs
com.liferay.journal.model.JournalArticle_RatingsType=thumbs
com.liferay.knowledge.base.model.KBArticle_RatingsType=stacked-stars
com.liferay.message.boards.model.MBDiscussion_RatingsType=like
com.liferay.wiki.model.WikiPage_RatingsType=thumbs

●コメントセクション

・他ユーザーへのメンションを許可する。
これの設定も、typeSettingsカラムで下記のように登録されます。
mentionsEnabled=true


3.言語タブ

言語タブの画面はこのようになっています。


ここでは、サイトのデフォルト言語と切り替え可能な言語を設定できます。
「デフォルト言語オプションを使用します」のラジオボタンが選択されている場合は、
インスタンス設定の"ローカライズ"で設定されている項目が引き継がれます。
「このサイトでのデフォルトの言語と指定可能な言語を定義してください」にラジオボタンを変更すると
デフォルト言語と選択可能が言語の設定が行えます。
ここの部分の設定情報でデータベースでは、
Group_テーブルのtypeSettingsカラムに登録されます。
まず、ラジオボタンの情報が
inheritLocales=true
のような形で設定されています。
「デフォルト言語オプションを使用します」を選択している場合は true
「このサイトでのデフォルトの言語と指定可能な言語を定義してください」を選択している場合は false
になります。
デフォルトの言語は
languageId=en_US
利用可能な言語は
locales=en_US,nl_NL,ja_JP
のように登録されています。
ただし、この設定情報は「デフォルト言語オプションを使用します」を選択すると
初期設定に戻ってしまうのでラジオボタンを戻したときにまた、一から選択しなおす必要があるので注意してください。


4.詳細設定タブ

詳細設定タブの画面はこのようになっています。



このタブの設定項目は全てtypeSettingsカラムに登録されます。
項目と登録方法を一緒に確認していきましょう。

●デフォルトの関連付けセクション

・サイトロール」
defaultSiteRoleIds=34520
・チーム
defaultTeamIds=37534

●分析セクション

・Google アナリティクスID
googleAnalyticsId=XXXXXX
・Piwik
analytics_piwik=XXXXXXX

●地図セクション

・OpenStreetMap
MAP_PROVIDER_KEY=OpenStreetMap
・Google マップおよび「Google Maps API キー (オプション)」
MAP_PROVIDER_KEY=GoogleMaps
googleMapsAPIKey=XXXXXXXX
ラジオボタンでの設定なので
MAP_PROVIDER_KEYはどちらか一方が登録されます。

●ゴミ箱セクション

・ゴミ箱を有効にする
trashEnabled=true
・ゴミ箱内エントリーの最大保存日数
trashEntriesMaxAge=43200

●コンテンツセクション

・このサイトから子サイトの内容を表示できるようにする。
contentSharingWithChildrenEnabled=-1
値については以下のようになっています。
デフォルト値(有効):-1
有効:3
無効:0

まとめ

今回はサイト設定の項目とデータベースとの対応を確認しました。
サイトの情報は比較的Group_テーブルにまとまって登録されています。
特にtypeSettingsカラムに、サイトに固有のさまざまな設定値が登録されます。
また、一部はAssetEntries_AssetTagsテーブルやVirtualHostテーブルにも登録されているデータがありました。

それではまた、次回は別の設定項目を見ていきたいと思います。




Thursday, August 20, 2020

CentOS7にApache (httpd)の最新版2.4.43をインストールする(IUSリポジトリURLが変わってて若干はまった話)

 こんにちは。おおたにです。


今回はCentOS7にApache HTTP Server (httpd)の最新版をインストールする方法を備忘代わりに書いておこうと思います。

CentOS7向けのhttpdについては、CentOSのBaseリポジトリで公開されているバージョンが2.4.6と古いため、IUSリポジトリからインストールすることが一般的です。

最記事執筆時点ではIUSリポジトリで公開されているバージョンが2.4.43、Apache公式の最新版は2.4.46です。IUSリポジトリで公開されているよりも新しいバージョンが欲しい場合はソースコードからビルドする必要があります。

インストールされている古いhttpdの削除

2.4.6等の古いhttpdがインストールされている場合はアンインストールしましょう。

まず、起動しているhttpdを停止し、systemdへのサービス登録を解除します。

systemctl stop httpd
systemctl disable httpd.service

次に、httpdをアンインストールします。

yum remove httpd
yum remove httpd-tools

yumリポジトリの追加

必要なソフトウェアを入手するために、yumリポジトリEPELとIUSを追加します。

yum -y install epel-release
vi /etc/yum.repos.d/epel.repo
  ([epel]のenabledを0に変更する)
yum -y install https://repo.ius.io/ius-release-el7.rpm
vi /etc/yum.repos.d/ius.repo
  ([ius]のenabledを0に変更する)

これらのリポジトリをデフォルトで無効にしておくためにenabled=0に変更しています。なお、記事によってはIUSのURLがhttps://centos7.iuscommunity.org/ius-release.rpmとなっていますが、これは古いURLなので追加しようとするとエラーが出て失敗します(比較的最近リポジトリURLが変わったようです)。

依存ライブラリとhttpdのインストール

では必要なソフトウェアをインストールしてきましょう。

yum -y install centos-logos.noarch mailcap openldap-devel expat-devel libdb-devel openssl perl
yum --enablerepo=epel -y install nghttp2 brotli
yum --disablerepo=base,extras,updates --enablerepo=ius -y install httpd httpd-devel mod_ssl

以上で必要なソフトウェアがインストールされました。依存ライブラリが足りないよと言われた場合は適宜インストールしてください。

サービス登録と動作確認

最後にsystemdへのサービス登録を行いhttpdを起動します。

systemctl enable httpd.service
systemctl start httpd

start実行時にエラーが出ず、ブラウザでアクセスして It works! と表示されればインストール成功です!yumでインストールした時の設定ファイルのありかは以下のとおりですので参考にしてください。

  • /etc/httpd/conf/httpd.conf : httpd設定
  • /etc/httpd/conf.d/ssl.conf : httpd設定
  • /etc/logrotate.d/httpd : ログローテーション設定

Friday, August 7, 2020

Liferay 7とGoogle Drive / Google Docsを連携させる

こんにちは。おおたにです。

昨今のクラウドサービスの浸透に加えてコロナ禍もあり、オンラインストレージサービスやオンラインオフィスソフトウェアも一般的と言っていいまでに普及しているかと思います。今回は、これらのサービスの代表格であるGoogle Drive / Google DocsとLiferayの連携について紹介します。

Liferayはドキュメントライブラリと呼ばれるファイル管理の機能を持っています。Google Drive / Google Docs連携はドキュメントライブラリとの連携を行うもので、以下の2種類の連携があります。
  • ドキュメントライブラリ上にGoogle Driveのファイルのリンクを作成する
  • ドキュメントライブラリ上のファイルをGoogle Docsを使ってブラウザ上で編集する(=オンライン編集)
1つ目の連携はLiferay MarketplaceのアプリLiferay Plugin for Google Driveで実現できます。詳しい説明はGoogle Driveへのリンクを参照してください。

2つ目の連携はLiferay DXP 7.2で追加された新機能になります。本記事ではこちらの機能の詳細と設定方法を説明します。なお、同様の機能を提供するOffice 365連携も新機能として追加されましたが、こちらは別の機会に紹介したいと思います。

新しいGoogle Drive/Google Docs連携機能の紹介


前述のとおり、ドキュメントライブラリ上のファイルをGoogle Docsを使ってブラウザ上で編集することができます。具体的にできることは以下のとおりです。
  • Google Docsを使い、新規ファイル(Doc, Slide, Sheet)をブラウザ上で作成する
  • 作成したファイルをMS Office形式(Word, PowerPoint, Excel)でドキュメントライブラリに保存する
  • ドキュメントライブラリ上のMS Office形式のファイルをGoogle Docsを使ってブラウザ上で編集する
なお、Google Docsでファイル編集を開始するとGoogle Drive上にファイルがコピーされ、Google Docsでの編集を終えてファイルをLiferayに保存するとGoogle Drive上のファイルは削除されます。詳しい説明はLiferayヘルプセンターのこちらの記事こちらの記事を参照してください。

Google Cloud Platformの連携設定を行う


次に、設定方法を紹介します。Google側とLiferay側の両方に設定が必要ですが、まずはGoogle側の設定を行います。具体的には、Google Drive APIをLiferayが利用できるように有効化し、Liferay向けにOAuth2.0クライアントIDを発行します。

1. Google Cloud Platform Consoleにアクセスし、管理ユーザでログインする
2. 適当なプロジェクトを選択する。もしくは新しいプロジェクトを作成する
3. 「APIとサービス」に移動し、「APIとサービスの有効化」をクリックする


4. Google Drive APIを検索し、「有効にする」をクリックして有効化する


5. 「APIとサービス」の「OAuth同意画面」に移動して同意画面を設定する(最低限アプリケーション名を入力すればOK)
6. 「APIとサービス」の「認証情報」に移動する
7. 「認証情報を作成」の「OAuthクライアントID」をクリックする


8. 以下のとおり入力して「作成」をクリックする
  • アプリケーションの種類 : ウェブアプリケーション
  • 名前 : アプリケーション名を入力する(認証時に表示されます)
  • 承認済みの JavaScript 生成元URI : LiferayサーバのURL(http://<host or IP>:<port>)
  • 承認済みのリダイレクトURI : http(s)://<host or IP>:<port>/o/document_library/google/oauth2


9. クライアントIDとクライアントシークレットが表示されるので、それらを手元に控える

以上でGoogle側の設定は完了です。

Liferayの設定を行う


続いて、Liferay側の設定を行います。

1. Liferay DXP 7.2に管理者でログインする
2. 「Control Panel」->「Configuration」->「Instance Settings」->「Documents and Media」をクリックする(この場合、インスタンス毎の設定になります。グローバルに設定する場合は「System Settings」->「Documents and Media」をクリックします)


3. 「Google Drive」を選択し、Client IDとClient Secretに先ほど控えたクライアントIDとクライアントシークレットを入力して「Save」をクリックする



以上です。とても簡単ですね!

動作確認してみよう


では早速動作確認してみましょう。ドキュメントとメディア(管理者向けでもページ上に配置されたユーザ向けポートレットでもOK)で新規作成メニューをクリックすると、Google Doc、Google Slide、Google Sheetが表示されるようになります。


これらをクリックするとGoogleアカウントの認証画面に遷移するので認証情報を入力します。初回はアクセス許可を行う必要があり、それが完了するとLiferayユーザとGoogleアカウントが紐づき、次回からは聞かれないようになります。そして、Google Drive上にファイルが生成されGoogle Docsでオンライン編集できるようになります。


「Save and Return to Liferay DXP」をクリックするとGoogle Drive上のファイルをLiferayに保存し、Liferayの画面に戻ります(この時Google Drive上のファイルは削除されます)。アクションメニューの「Edit in Google Docs」をクリックすると、Google DriveにファイルをコピーしてGoogle Docsでのオンライン編集が始まります。



今回の紹介は以上です。簡単な設定でGoogle Drive / Google Docsを使ったファイルのオンライン編集が実現できますので、是非みなさまも試してみてください。

Friday, July 17, 2020

Liferayの表示ページテンプレートを使ってみよう

こんにちは、かわべです。
最近は家の周りでやたらと工事が行われており、Web会議に参加すると騒音に驚かれることしばしばです。

この記事ではLiferay DXP 7.1から追加された表示ページテンプレート(Display Page Templates)の使い方を紹介します。表示ページテンプレートはコンポーネントやセクションなどのページフラグメントを使ってコンテンツページを作るのと同じ要領で、特定のコンテンツ種別の個々の表示ページを作ることができるという機能です。
これはDXP 7.0までのバージョンではFreeMarkerでWebコンテンツテンプレートを記述しなければ実現できなかったことです。FreeMarkerで思い通りの画面を作るにはコーディング知識が必要になってくるので、開発知識がなくても簡単にコンテンツを表示するためのページが作れるようになったのは画期的です!

それでは使い方を順を追って見てみましょう。Liferayを利用する旅行会社が旅行の目的地をWebコンテンツとして作成し、それを表示するための個別ページを作りたい、という単純なシナリオに沿ってやっていきたいと思います。
利用バージョンはLiferay DXP 7.2 SP2です(少し前のバージョンだと落とし穴がありました…それは最後に書きます)。

1. 表示させるコンテンツタイプ(エンティティ)の作成

表示ページテンプレートを適用可能なのは、デフォルトで

  • Webコンテンツ
  • ドキュメント
  • ブログのエントリ

の3種類のコンテンツです。
今回は旅行の目的地を取り扱いやすいように、専用のWebコンテンツストラクチャーを新規で作成します。
管理者としてログインし、コントロールパネル→コンテンツ→Webコンテンツ→ストラクチャに移動し、追加ボタンから「旅行目的地」という名前で以下のストラクチャーを追加します。



さて、これまではWebコンテンツのストラクチャを作成したらもれなくペアとしてWebコンテンツテンプレートを作成していたのですが…今回はWebコンテンツテンプレートは作らずに、表示ページテンプレートの作成に進みます。
(Liferayを使っていると何種類かの〇〇テンプレートが出てくるので、混乱しないように気をつけてくださいね)

2. 表示ページテンプレートの作成

コントロールパネルからサイトビルダー→サイトページを開き、表示ページテンプレートタブを開きます。

[+]ボタンで新規追加画面を出して、名前を「旅行先表示」と入力し、コンテンツ種類としてWebコンテンツ、サブタイプに旅行目的地を選んで保存します。


すると、フラグメントを利用したコンテンツページ作成とほぼ同じ編集画面が開きます。
まずは、セクション配下の基本セクションからバナー(中央)を編集中のページに配置してみましょう。



コンテンツページ作成でお馴染みですが、セクションやコンポーネントで編集可能となっているエリアは自由にテキストなどの編集が可能です。


(バナータイトルの編集部分を「自由にタイトルを入力」に変えてみました)

しかしそれだけではなく、コンテンツ表示ページテンプレートでは表示対象のコンテンツが持つ要素を編集可能エリアにマッピングすることができるのです。

左の「編集」アイコンではなく右の「マッピング」(翻訳がおかしいですが…)アイコンを選ぶと、


表示対象のコンテンツ(今回の場合は先程作成した「旅行目的地」)が持つマッピング可能な要素が選択できます。



下の方にある「名前」と「説明」がWebコンテンツストラクチャに定義した要素ですね。今回は上部のタイトル部分に「名前」、その下の文章部分に「説明」をマッピングします。そして背景画像には同じ要領で「画像」をマッピングしてみます。

マッピングが設定された部分は薄紫色で囲われます。


(リンクボタン部分は、今回はストラクチャにリンクURLを要素として持たせるのを忘れたので、ひとまず表示文言だけ編集して「詳しく見る」に変えておきました。)

これでコンテンツのマッピングは完了です。その他はコンテンツページと同じ要領で、作りたいページやデザインに応じて適宜ウィジェットやコンポーネント、セクションなどを配置して編集・設定してください。

3. コンテンツの作成

それでは「旅行目的地」コンテンツを追加し、表示ページテンプレートを使って表示されるように設定してみましょう。
コントロールパネル→コンテンツ→Webコンテンツに移動し、[+]から「旅行目的地」を追加する画面を開きます。
タイトル、名前、説明に適当に入力し、画像をアップロードします。


そして右側の設定ペインの「表示ページテンプレート」で「特定の表示ページテンプレート」をプルダウンで選択し、選択をクリックすると開くポップアップ画面で先程作成した「旅行先表示」を選択します。



そしてフレンドリURLはデフォルトだとタイトルに引きずられるので、URLとしてわかりやすい英数字にしておきます。


このURLは全体をメモしておきましょう。
ここまで入力できたら保存(公開)します。

4. コンテンツ表示の確認

先ほどメモしたURLをアドレスバーに貼り付けて移動してみると、



設定通り、画像を背景にして名前と説明を載せたページとしてコンテンツが表示されました!
テンプレート言語を一切記述していないのにこのようにコンテンツをレンダーして表示することができるなんて、昔のバージョンから知っている者としては感慨深いものがありますね。

今はアドレス直打ちで移動しましたが、従来のようにアセットパブリッシャーで集約表示した一覧をクリックしてコンテンツを全表示するときにも利用できます。その場合、アセットパブリッシャーの設定でアセットリンクの振る舞いを「コンテキストの参照」にしてください。「全内容の表示」にするとこのように



Webコンテンツのテンプレートを使ってレンダーされたコンテンツが表示されます。今回はWebコンテンツテンプレートを作っていないので、項目が箇条書きで表示されています。

従来のようにデフォルトアセットパブリッシャーを配置したページをWebコンテンツの表示ページに指定する機能も残っているので、そちらがお好みの場合は引き続き利用可能です。アップグレードも問題なさそうですね。

5. まとめ

表示ページテンプレートにコンテンツをマッピングして表示ページをつくる方法について説明しました。テンプレート言語なしでも自由度の高いページ作成が可能なので、対応しているエンティティを利用する場合はぜひ利用を検討してみてください。

ちなみに古いバージョンだと…

DXP 7.2の少し古いバージョン(GA1かな?)だと、表示ページテンプレートを使う部分がすべて非公開ページ扱いとなり、Guestで見ようとすると以下のようにログインを求められるという悲しいことになりました…



SP2を触る限り修正されていたので、安心してくださいね。

Wednesday, July 15, 2020

Liferayで成功メッセージを画面上部に表示する

こんにちは。おおたにです。

今回は、ユーザフィードバックのメッセージ表示位置に関するTIPSを紹介します。なお、以下のサンプルスナップショットやコードはLiferay DXP 7.1でのものです。

成功メッセージとエラーメッセージ


Liferay上で何かしらの処理を実行した場合、ユーザフィードバックとしてメッセージが表示されます。例えば処理が成功した場合は、以下のような成功メッセージが表示され、



処理が失敗した場合は、以下のようにエラーメッセージが表示されます(併せて汎用エラーメッセージ「処理に失敗しました。」が画面左下に表示されることもあります)。


画面左下の表示はトースト(toast)と呼ばれる自動的に消えるメッセージで、画面上部の表示は自動的に消えない画面埋め込み(embed)のメッセージです。通知の目的が処理の状況や成否を通知することだけなのか、それ以上の具体的なメッセージをユーザに伝えることなのかに応じて使い分けることが多いです。
Liferayではこれらのメッセージの実装に<liferay-ui:success><liferay-ui:error>を使いますが、普通に実装すると前者がトースト、後者が埋め込みとなります。

成功メッセージを埋め込みで表示したい


メッセージの表示形式はembed属性でコントロールできます。例えば、成功メッセージを埋め込みで表示する場合はこのように指定します。

<liferay-ui:success key="success_message_key" message="msg.success" embed="<%=true %>" />

成功メッセージの表示は以下のようになり、成功メッセージとエラーメッセージを同様のUIで提供するような要件に応えることができます。


この他にも<liferay-ui:success><liferay-ui:error>には表示をコントロールする属性がいくつか定義されていますので、こちらこちらのドキュメントを参考に色々と試してみてください。

Tuesday, July 7, 2020

Liferay 7をインストールしてみよう

こんにちは。おおたにです。

今回はLiferay 7のインストール方法について紹介します。

本ブログでもたびたび取り上げているLiferayは、オープンソースのデジタルエクスペリエンスプラットフォーム(DXP)製品です。従来はエンタープライズ向け情報ポータル(Enterprise Information Portal)と呼ばれていたジャンルですが、よりユーザ体験や顧客体験にフォーカスするために現在はDXPと呼ばれています。

企業のインターネット向けサイトやイントラネット向けサイト、代理店/販売店ポータルなどに代表される組織/企業間、コミュニティポータルなどに代表されるユーザ同士など、様々な形での情報発信/情報共有の場を構築することに利用されています。さらにはバックエンドにあるシステムの情報や他のサービスを通して得られる情報を統合し、B2B/B2C、パブリック/プライベート問わず様々なWebサイト上で最適なユーザ体験を提供することができるプラットフォームです。

エンタープライズ向けと銘打たれているのでインストールの敷居も高いのではないかと思われるかもしれませんが、そんなことはありません。もちろん実運用を考えると諸々の設定やチューニングを行う必要がありますが、とりあえずインストールして使ってみようという限りではとても簡単にセットアップすることができます。

CE(Community Edition)とDXP(Digital Experience Platform)


LiferayにはCE(Community Edition)とDXP(Digital Experience Platform)の2つのエディションがあります。

CE : 無償利用できるけどLiferay社のサポートが受けられないバージョンです。記事執筆時点ではLiferay Portal 7.3.2 CE GA3が最新のバージョンです。

DXP : 有償のサブスクリプションが必要だけどLiferay社のサポートを受けられるバージョンです。セキュリティ関連を含む修正パッチの提供が受けられる他、クラスタリングやAudit等の構成/運用面で助けとなる機能が提供されます。記事執筆時点ではLiferay DXP 7.2 SP2が最新のバージョンです。

なお、DXPをご検討中の方やご質問/ご相談のある方はこちらのフォームから弊社までご連絡ください。

Javaのインストール


Liferayの動作にはJavaが必要です。CEはこちら、DXPはCompatibility Matrixで必要なJavaのバージョンが確認できます。
Liferay Portal 7.3 CEやLiferay DXP 7.2であればOracle JDK 8が必要です。こちらからダウンロードしてインストールしてください。

Liferayのダウンロード


CEはLiferay Community Downloadsの「Liferay Portal」から、DXPはLiferay Help Centerからダウンロードできます。Bundled with Tomcat (tar.gz)もしくはBundled with Tomcat (7-Zip)を選択してダウンロードします。
Apache Tomcatが同梱されて必要最低限の設定も行われているため、さくっと動かすにはこのパッケージがお勧めです。

Liferayのインストール


次に、先ほどダウンロードしたLiferayのファイルを展開します。liferay-ce-portal-7.xxxxもしくはliferay-dxp-7.xxxxというフォルダが作成され、その中に必要なファイルがコピーされます。なお、このフォルダは<LIFERAY_HOME>と呼ばれ、Liferayの設定や運用に際して重要なフォルダとなります。

以上でLiferayのインストールは終わりです。簡単!

なお、実運用を考えると別途データベースを用意したりJVMをチューニングしたりなどの設定が必要ですが、ひとまず動けばOKということであればデフォルトのままで十分です。

[DXPのみ] ライセンスファイルのコピー


DXPの場合はLiferay社から提供されるライセンスファイルを<LIFERAY_HOME>/deployフォルダにコピーします。Liferay起動時にライセンスファイルが読み込まれ、認証をパスして初めてLiferayが使えるようになります。

Liferayの起動と初期設定


では、早速Liferayを起動してみましょう。Liferayを起動するためには、以下のTomcat起動スクリプトを実行します。

Windows : <LIFERAY_HOME>/tomcat-xxxx/bin/startup.bat
Linux (or Mac OS X) : <LIFERAY_HOME>/tomcat-xxxx/bin/startup.sh

Liferayが正常に起動すると、ブラウザが自動的に起動してhttp://localhost:8080にアクセスします。起動しない場合はブラウザを起動して先のURLにアクセスしてみてください。以下のような画面が表示されればOKです。


これは初回起動時のみ表示される設定画面で、ポータルの名称やデフォルト言語、管理者ユーザの情報、データベース接続を設定することができます。デフォルトでは組込みDBのHypersonicが使われますが、お試し用途であればこのままでOKです。
Email欄に管理者のメールアドレスを入力して「Finish Configuration」をクリックします。しばらく待つと設定が完了して利用規約が表示されるので、「I Agree」をクリックします。



続いて管理者ユーザのパスワードを入力して「Save」をクリックします。


最後にパスワードリマインダ(パスワードを忘れた時の秘密の質問)を入力して「Save」をクリックします。


設定が完了すると、以下のランディングページが表示されます(上がLiferay DXP 7.2、下がLiferay Portal 7.3 CE)。



以上でLiferayが使える状態になったかと思います。みなさまも是非Liferayをインストールして実際に触ってみてください!

トラブルシューティング


Liferayが正常に起動しない場合は、以下のログの内容を確認してみてください。

<LIFERAY_HOME>/logs/liferay.xxxx-xx-xx.log
<LIFERAY_HOME>/tomcat-xxxx/logs/catalina.xxxx-xx-xx.log

また、LiferayをインストールしたPCのメモリも確認してください。Liferayはデフォルトでヒープに2.5GB、MetaSpaceに768MB使う設定となっています。PCのメモリは4GBだと厳しいかもしれません。少なくとも6GBは欲しいところです。