脱XPagesはじめました。スマートフォン用の表示で見る脱XPagesはじめました。De.XPages.この広告は、90日以上更新していないブログに表示しています。利用のご紹介をサンプルDBを基に行います。サンプルDBのダウンロードXpagesDay2016でも利用した本ブログで使用するサンプルDBをgithubへアップしました。GitHub<ダウンロード方法>上記リンク先にて「Download」ボタンを押すとダウンロードできます。jQueryに必要なライブラリをDBに設置する場合は、下記を参考にしてみてください。上のURLの内容をする必要はありません。必要なライブラリ(jquery-xx.js、bootstrap.min.js、bootstrap.css)を読み込む。クラスを指定したHTMLを記述。該当のXpageをブラウザで起動して、「F12」キーを押して見ましょう。すると、Dominoが変換してくれたHTMLソースとCSSが表示されます。dropdown-toggle"・・・と記述されている部分にカーソルを当ててみると、BootStrapのスタイルが当たっていることが分かります。BootStrapのサンプルサイトを参考にするだけで、ある程度の画面デザインは実現できます。あとは、いろいろなサイトを参考にしながら、HTMLやCSSの基本知識を学ぶことでUIについては、実現していくことができます。「"taro"というIdをもった要素に対して、色を赤色にする。」ということをしています。"red");になります。$("")の中にターゲットとなる要素の情報(セレクタ)を記述し、その要素に対して行いたいメソッドを指定することで、DOM操作を実現することができます。複数の要素に対してメソッドを当てるといったこともできます。併用それでは、2)のBootStrapSampeを使って、jQueryのクリックイベントを実装してみます。Ph1_BootStrapSample.xsp<ソース>Ph1_BootStrapSample.xspの最後の方(</xp:view>の前)に下記のようにクライアントサイド用のscriptを記述します。")});</script></xp:view>ドロップダウンリストでは、「リンクのリスト1」~「リンクのリスト3」が<li>要素を使ってリスト化されています。このイベントは、全ての<li>タグに有効になります。イベントの中ではクリックした要素内の<a>タグに書かれたテキストノードを「btnName」という変数にセット。取得した値をメッセージボックスで表示。いったことをしています。結果は、下記のような感じで、各ボタンのアクションを1つのソースで実現することができます。次回は、「Ph3_Ajax_Sample.xsp」を使ったajax通信の話をしていきます。2016にセッションスピーカーとして参加しました。http://xpagesday.com/xpagesday.nsf/home.xsp今回のセッションでは、本ブログで記述していこうと思っていた部分の7,8割を話してしまいました...今後はしばらく、セッション資料をベースにブログの投稿数をちびちび稼ごうと思っています。セッションを既に聞いて下さっていて、落ちも分かっている方は、面白くない内容かもしれませんがご了承ください。セッションを聞いていない方で、落ちまで見たい方は、下記をご覧ください。JavaScriptを中心とした情報をNotes/Xpages開発者視点で紹介していこうと考えています。今回は、Founderフレームワークにおけるアーキテクチャ図とその説明を記述します。本フレームワークでは、Xpage用に用意された標準コントロールは基本使用せず、一般的なWebアプリ開発の手法を利用していきます。部品としてXpage上にペタペタ貼っていきたいのでXpage、カスタムコントロールの設計要素は利用していきます。1)アーキテクチャ図UI/デザインXPage内には、BootStrapをベースとしたHTMLで見た目を実現していきます。OutputもjQueryを使って画面に反映(描画)していきます。Xpages上へスタイルの直書きは行わず、カスタムコントロールごとのCSSに記述します。操作:標準コントールで表示・非表示を実現した場合、サーバーサイドへ要求を投げ、戻ってきた部分HTMLを描画するといった無駄な通信が発生します。そこで、jQueryを用いて画面の表示・非表示や動きを実現させ、無駄な通信を抑えます。ユーザーへのストレス軽減、マウス移動やクリック操作をできるだけ抑えた操作性を実現します。トランザクション:javascriptを用いたプログラムにより開発を行い、Xpage上での@関数やシンプルアクションは利用しません。DOM操作も含め、トランザクション用のソースを一元管理します。NotesDBへのアクセス、文書の参照/更新は、HTML通信(jquery.$ajax)にて実行します。(命令⇒結果)データ:便利性、汎用性を考え、データのやり取りや文書上に保持するデータは、JSON形式で行います。Xpageの標準コントロールは、使用しないので薄っぺらく表現しました。この構成で実現した場合、Xpagesの知識は、不要となります。Notesとしての知識は、NotesDatabaseやNotesDocumentクラス等、LotusScriptのプログラム知識があればよいです。逆に、HTML、CSS、JavaScript等の一般的なWebアプリ開発をする為の知識が必要になってきます。こちらについては、有識者やweb上の情報も多く、将来的にNotes以外の開発をするとなった時にも役に立つと思います。標準コントロールの利用しない理由Xpagesは、Dojoフレームワークを使った多くのコントロールが存在しますが、下記のような弊害があります。クライアント向け開発に比べ、複雑なプロパティ設定が必要で、EUCができるレベルの開発ではない。参考文献が少なく、あったとしても基本的なレベルのものであり、従来レベルのアプリ開発しか実現できない。コントロール内のそれぞれのプロパティに設定することで、ロジックが煩雑化してしまう。「設計」タブ(デザイナー上でのプレビュー)で、GUIが実現できておらず、結果的にソースレベルでの構築が早い。Dominoのバージョンによって、非互換が発生しやすい。Xpages特有の「<xp:XXX>」タグが使われることで、webアプリ構築向けサイトからのソースが流用しずらい。Dojoのバージョンアップも乏しく、参考文献も少ない。結果、jQueryに吸収された。ついてHTML、CSS、Javascriptからなるフレームワークの1つです。見た目や動きについて、はじめからある程度用意してくれている「ライブラリファイル」。class等の属性に決められた値をセットするだけでリッチなデザインを実現できます。(Xpages標準では、One-UI)同じようなフレームワークとして、MaterialUIやFoundationなど様々なものがありますが、下記の理由から、BootStrapを採用しました。グリッドシステムによって、レスポンシブ・ウェブ・デザインを実現。利用する端末によって画面レイアウトを調整することができる。統一されたデザインにすることでリッチなデザインを実現。パターンCSSを変えることである程度、時代やユーザー思想に合わせたデザインに切り替えることができる。参考文献が豊富にある。ついてウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。開閉式のメニューを作ったり、指定したタグ内の色や値を変えるといったDOM操作から、POSTなどのHTML通信まで容易に実現できます。BootStrap内でも利用されており、文献や派生ライブラリも多く存在します。Notation」の略。テキストフォーマットの一種です。{}や[]などを使って連想配列の形ができるイメージです。データ送受信についてjQuery.ajaxを用いてデータの送受信を行います。非同期通信を行うことで、レスポンスを待っている間の不快感を低減します。このフレームワークでは使っていません。「RESTコントール」については、下記に詳しく書かれています。take-the-xpages.blogspot.jp次回は、「HTTP通信(ajax)」についてもう少し詳しく書いていきます。サンプルDBも公開できるようにします。次回は、BootStrapとJQueryについて、サンプルを交えながらもう少し書きたいと思います。23:17アーキテクチャ:基本構成Tweet広告を非表示にするコメントを書くもっと読む2016-10-11アーキテクチャ:コンセプトここ最近、少しずつではありますが、より効率的にXPages開発するために「Founder」というフレームワークを開発しています。カスタムコントロール等で構成された部品群です。このブログでは、この「Founder」フレームワークで使われているアーキテクチャを通して、下記の開発者向け視点で話をして行こうと思います。【開発者レベル】Notesクライアント向けの開発経験があるXPagesの基本的知識があるWEB開発についてあまり知識がないコンセプトこのフレームワークでは、XPages標準で欠けているであろう3つのポイントを克服する目的で考えられました。1)操作性XPagesアプリを開発するにあたって、クライアント動作しているDB*1をWEB向けに焼き直しするという話は少なくはありません。簡単なアプリであれば、標準コントールを使って、ナビゲータやビューの一覧を表示させることは可能でしょう。Notesクライアント自体があまりにも素晴らしい出来である為、Web化した時に操作性で劣化してしまう部分が多々あります。クライアントでビュー表示をした場合、全対象文書が一覧で表示されるにも関わらず、XPagesの場合はページャーでページを切り替えなけれならない。XPagesでビューの文書を選択する際、1件1件チェックボックスでチェックしなければならない。リッチテキスト機能が劣化する。お金を掛けてWEB化した結果、機能そのままどころか、劣化してしまうことに何の意味があるのでしょうか。Pluginや別のグループウェアに移行した方が良いのでは?と思ってしまいます。FacebookなどのSNSをはじめ、世の中のWEBサイトは、ユーザーへのストレス軽減を操作性を考慮したアプリが溢れています。操作性が劣化したアプリを提供していては、「Notesは古い」というイメージを脱却する事はできません。加藤様のブログにもありますが、せっかくWeb化するのであれば単純な焼き直しではなく、よりよいアプリを作ろうではありませんか。クライアントで実現できるUI/UXは限られていいますし、社内向けのDB開発なのでデザインにに対して深く意識することは無かったりすると思います。ユーザーからすると「Notes」という感覚は無くなり、facebookやブログサイトのような1つのWEBサイトに捉えられます。他のWEBベースでできたグループウェアと比較しても、昔作ったDBは見劣りしてしまいます。Notesは、互換性があり過ぎなのです。互換性があり過ぎるせいで、DBがリニューアルされず、デザインが古く見えてしまう。青色ベースの最新クライアントになったところで、各アプリは古いままなのです。デザインには、流行り廃り、逆に操作しずらい、どのデザインが主流になっていくか読めない等あり、難しいところもありますが、Notes4.5時代に作ったような古臭いデザインのままよりは、少しでもこだわった方がよいのではないでしょうか。用意されており、設定だけでポップなデザインにすることができますが、そのデザインもちょっと古くなってきています。どんなデザインがよいのでしょうか。最近のデザインのトレンドは、SNSやGoogleサイト等を見ればだいたい分かってきます。前まではフレームに丸みを帯びたものが流行っていましたが、最近はフラットデザインが流行っています。Designをはじめ多くのWebアプリ向けのデザインフレームワークがあり、ガイドラインに沿ったタグ記述やClass定義をすることで、デザインセンスに自身がない人でもオシャレなページを実現できるようになっています。XPages上でこのフレームワークを使うにはいろいろと厄介な点が出てきます。(この点は、今後の話で記述していきます。下記は、私がメインで担当したQA9サイトの質疑・回答画面のXpages設計です。</div>javascriptもXpagesも経験が浅い状態で作ったので非常に汚いソースでお恥ずかしい部分もありますが、ご了承ください。設計タブですが、繰り返しコントロールやパネルなど複数のコントロールが入り乱れており、非常に分かりづらい状態となりました。どこにどういうコントロールを配置したのか分かりませんし、修正したいコントロールを選択しようとしてもなかなか選択できません。なってくると、ソースタブで開発をしていく事になるのですが、こちらは、HTMLタグ、XPages独自タグ*2をはじめ、javascript(ボタン等の処理)やCSS(色や幅等のデザイン)が入り乱れています。XPagesの各コントロールプロパティ上でもアクションイベントやスタイルを定義できるようになっているわけですから、おそらくこれまでの開発同様、プロパティ内にアクションを記述したり、色を付けたりすることでしょう。結果、ソースタブには複数の言語が入り乱れ、ソースの管理が難しくなります。そこで、それぞれのソースの記述を綺麗に分離させ、後から読みやすくカスタマイズ性を持たせる必要がでてきます。ここに関しては、フレームワークと言うより開発ルールになってきますが、より効率よい開発をするにあたって重要な部分になります。「操作性」、「デザイン性」、「カスタマイズ性」。「Founder」フレームワークは、この3つをコンセプトにアーキテクチャを組みました。次回は、アーキテクチャの概要と基本ルールについてまとめたいと思います。*1:XPagesアプリと区別する為にあえて古い呼び方のDBとしています。23:26アーキテクチャ:コンセプトTweet広告を非表示にするコメントを書くもっと読む2016-10-04はじめに:本ブログについて初めまして。Notesをこよなく愛するSEの一人です。クライアント上で動くLotusScriptを使ったプログラムがメインで活動してきました。以前から興味の持っていたXPagesについて勉強を始めました。ビューコントロールを用いて実現する方法」をパートナー会として発信しています。その後、メンバーでXPagesを駆使して、Notes開発者向けのQAサイト「qA9サイト」を開設しました。このQAサイトでは、これまでのよくあるNotesDBのデザインではなく、stackoverflowのようなリッチで使い易いアプリをめざして開発しました。ゼロから初めてXPagesのアプリの開発をしてみて、感じたことは、XPagesムズイ!!!です。XPagesの思想としては、これまでクライアント向けDBの開発をしてきた開発者が、違和感なく開発ができるよう設計されている気がしますが、Webアプリは、そんな甘いものではないと感じました。私のようにクライアント向けDBの開発出身者は、このXPagesには非常に苦労し、このままではXPagesは発展できないのではないかと考えています。このブログでは、上記経験を経て、私が行きついたXPagesでの開発手法について、投稿していきます。題して「脱XPages」です。※「脱XPages」としていますが、XPagesを否定するものではありません。※100%脱はしていません。インパクトを付ける為に書きました。2016にセッションスピーカーとして参加しました2016-10-18アーキテクチャ:基本構成2016-10-11アーキテクチャ:コンセプト2016-10-04はじめに:本ブログについて脱XPagesはじめました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。