XPages.JP はこう作られた！

－テクテク Lotus 技術者夜会－（ 2016 年 6 月 17 日）

株式会社エフ 御代 政彦ケートリック株式会社 田付 和慶

AGENDA

• テーマの選定

• サイトマップ機能

• サンプル APP ギャラリー機能

• 管理機能

• おまけ

＜選定基準＞

1. XPAGES だなってバレないクールなデザイン

2. フリーのデザイン テンプレートから探す

3. Bootstrap を標準で搭載

4. FontAwesome を標準で搭載

テーマの選定

そして見つけたのがこちら ↓

MODERNALicense: freeware

Version: Bootstrap 3.1.0

http://www.bootstrapzero.com/bootstrap-template/moderna

NSF へのデザインテンプレート流し込み作業 （１）

②CSS 以外のテンプレートの全てのファイルを「 WebContent 」フォルダ内にコピー

「① 「 ナビゲーター」を表示させます

NSF へのデザインテンプレート流し込み作業（２）

③CSS フォルダ内のファイルは「スタイルシート」内にインポート

スタイルシートはカスタマイズで編集が頻繁に発生するため「スタイルシート」内のほうが便利と判断。

NSF へのデザインテンプレート流し込み作業（３）

④ ブランクのテーマを作成

XPAGES 標準の OneUI のテーマを無効にするため

⑤ 作成したブランクのテーマを選択

NSF へのデザインテンプレート流し込み作業（４）

⑥ カスタムコントロールを作り、必要なリソースを読み込ませておくと便利

NSF へのデザインテンプレート流し込み作業（５）

⑦ XPAGE にサンプルの HTML コードを張り付け実行。 修正・テスト・修正・テスト・・・・

「環境設定文書」からリンク構造を取得し動的に生成するサイトマップ

サイトマップ機能

サイトマップのソースコード（１）<div class="sitemapContainer tree"> <xp:repeat id="repeat1" rows="5" var="menu" disableOutputTag="true"> <xp:this.value><![CDATA[#{javascript:var menuList = [];for(var i=1; i<=5; i++){menuList.push(docConfig.getItemValueArray("menus_" + i));}return menuList;}]]></xp:this.value> <xp:text escape="false" id="computedField1“ tagName="div" styleClass="sitemapCategory"> <xp:this.value><![CDATA[#{javascript:var html = [];var topMenu = menu[0].split(",");html.push("<div class='sitemapItem top'");if(topMenu[1] && topMenu[1].trim()){html.push(" data-url='", topMenu[1].trim(), "'");}html.push(">");html.push("<span>", topMenu[0].trim(), "</a>");html.push("</div>");for(var i=1; i<menu.length; i++){var childMenu = menu[i].split(",");html.push("<div class='sitemapItem child1'");if(childMenu[1] && childMenu[1].trim()){html.push(" data-url='", childMenu[1].trim(), "'");}html.push(">");html.push("<span>", childMenu[0].trim(), "</a>");html.push("</div>");}return html.join("");}]]></xp:this.value> </xp:text> </xp:repeat></div>

HTML で生成されるとこんな感じ

サイトマップのソースコード（２）

function openUrl(url){if(url.match(/^https?:\/\//)){window.open(url);}else{window.location.href = url;}}

function setCategoryHeight(){if($('.sitemapContainer').hasClass('tree')){$('.sitemapCategory').css('height', function(){return (this.children.length * 50 + 60) + "px";});}else{$('.sitemapCategory').css('height', '');}}

$(function(){$('.sitemapItem').on('click', function(e){var url = this.getAttribute("data-url");if(url){openUrl(url);}e.preventDefault();e.stopPropagation();});

$('.sitemapSection').on('click', function(){$('.sitemapContainer').toggleClass('tree');$('.sitemapContainer').toggleClass('circle');setCategoryHeight();});

setCategoryHeight(); });

【 Javascript ファイル】http://xpages.jp/xpagesjp.nsf/sitemap.js

【 CSS ファイル】http://xpages.jp/xpagesjp.nsf/css/sitemap.css

サンプル APP ギャラリー機能

「ギャラリー文書」からデータを取得して自動生成

サンプル APP ギャラリーのソースコード

<div class="row"><div class="col-lg-12"><ul class="portfolio-categ filter"><li class="all active"><a href="#"> 全て </a></li><xp:repeat id="repeat2" rows="999" indexVar="idx" var="entryCat"disableOutputTag="true"><xp:this.value><![CDATA[#{javascript:@Unique(@DbColumn("","vPortfolioCat", 1));}]]></xp:this.value><xp:text id="listBox1" tagName="li" styleClass="#{javascript:entryCat}"escape="false"><xp:this.value><![CDATA[#{javascript:"<a href=\"#\">"+entryCat+"</a>"}]]></xp:this.value></xp:text></xp:repeat></ul><div class="clearfix"></div>

<div class="row"><section id="projects"><ul id="thumbs" class="portfolio"><xp:repeat id="repeat1"rows="#{javascript:return compositeData.maxNum || 999;}"value="#{vPortfolios}" indexVar="idx" var="entry"disableOutputTag="true"><xp:text tagName="li" escape="false"styleClass="item-thumbs col-lg-3 design"><xp:this.attrs><xp:attr name="data-id"><xp:this.value><![CDATA[#{javascript:"id-"+@Text(idx)}]]></xp:this.value></xp:attr><xp:attr name="data-type"><xp:this.value><![CDATA[#{javascript:entry.getColumnValues().get(5)}]]></xp:this.value></xp:attr></xp:this.attrs><xp:this.value><![CDATA[#{javascript:var imgUrl = getAttachmentImageURL(entry.getDocument(),"thumbnail");var retVal = '<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="&lt;a target=\'_blank\' href=\''+entry.getDocument().getItemValueString("url")+'\'&gt;'+entry.getColumnValues().get(1)+'&lt;/a&gt;" href="'+imgUrl+'">'+'<span class="overlay-img"></span><span class="overlay-img-thumb font-icon-plus"></span></a>';retVal += '<img class="" style="width:260px; height:195px;" title="" src="'+imgUrl+'" alt="'+entry.getDocument().getItemValueString("description")+'" />';return retVal;}]]></xp:this.value></xp:text></xp:repeat></ul></section></div>

管理機能

デモをお見せします

おまけ

1. XPages.JP ドメインは誰が管理しているの？

2. ヘッダーイメージ下の Slack 機能はどうやって実装しているの？