サッカー馬鹿なプログラマー
このサイトの掲載内容は私自身の見解です。
ここでの情報を元にメーカー等に問い合わせたりする事は避けてください。
また、サンプルコードを利用する場合は、利用者の責任の元で十分に利用者環境での動作確認や影響度などについて検討の上、ご利用ください。
このサイトに掲載されているソフトウェア、およびファイルの使用、または使用不具合等により生じたいかなる損害に関しましては作者は一切責任を負いません。
全て利用者の自己責任でお願いします。
  • 08Dec
    • Web Speech APIをXPagesに組み込んでみた

      こんばんは12月になりました気温の変化が最近多いですが、皆様体調にお変わりないでしょうかさて、今回は以前に筆者がある探し物をしていた時に見つけたのですが・・・Web Speech API となるものをたまたま見つけたんです何ができるのかなhttps://developer.mozilla.org/ja/docs/Web/API/Web_Speech_APIなんと、Speech To Textが簡単にJavascriptで実装できるとのこと現在、Google Chromeだけ対応のようです(FireFoxもいけそうなんだけど)と言っても、Notesには関係ないので簡単ですが実装してみたので紹介しますまずはこのアプリのトップページ特に何の変哲もないXPageです早速「新規作成」ボタンをクリックしていきます。まぁ、こちらも何の変哲もないXPageなわけで・・・せっかくなんで「開始ボタン」クリックしておきましょうマイクにニュース動画を聞かせると・・・すごくねーーー??「保存する」ボタンをクリックするとトップページに戻ります。Notesクライアントにもちゃんと・・・保存されてますどうせコピペしたんでしょと思いますよねということで、手をプルプルさせながら動画撮りました(音も出てるのかな出てなかったらごめんなさい)若干怪しいのはありますが、なかなかの精度ではないでしょうかこのくらいの性能であれば、議事録の作成補助やヘルプデスクの応対確認など様々な業務が簡素化出来そうですね(事例紹介向けのネタでしたね)注意点がいくつかあります・Google Chromeなので、httpsもしくはlocalhostでしかマイクが許可されませんので確認を。・スマホ等はGoogle Chromeアプリから利用できるそうです(マイク入力できるから恩恵はない)では、今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 27Nov
    • IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-5

      IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-1IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-2IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-3IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-4こんばんは何とビックリ、HTTPRequestで5つ目のブログ内容です本日ノーツコンソーシアムのXPages研究会があったのですが、Notes/Domino V10新機能とXPagesを使った開発ネタを考える時間がありましてそこで筆者が作成したネタを紹介できればと思います今までのブログでは、ボタンをクリックしたりなどとユーザーのトリガーでHTTPRequestを実行していましたが、以下の2点をまだ検証していませんでした。・スケジュールエージェントでHTTPRequestは動くのか?・SSJSで実行できるのか?こんなコンテンツが作れないか考えてみました。毎日1回東京の天気予報を取得し、XPagesで作成されたポータル(もしくはコンテンツ)に表示させるざっくりとですが検証結果とともに紹介したいと思います以下、(手抜きですが)天気予報を取得するコンテンツページだと思ってくださいXPagesで作成しています。テーブルは繰り返しコントロールを使っています。1)スケジュールエージェントを作成するエージェントの内容は過去のブログを参考にしていただければと思います。今回はテスト環境に作成したので、イメージのようなスケジュールになっています。2)スケジュールエージェント実行後、XPageを開いてみる東京の天気予報が取得できていますスケジュールエージェントでもHTTPRequestが動くことを確認できました3)SSJSからエージェントをキックしてみる検証用に「千葉の天気予報を取得」ボタンを作成しました。クリックしてみます。こちらも無事に千葉の天気予報が取得できました。HTTPRequestが使えると、本当に便利に開発が出来ますね実際のJSON※今回使用させていただいたのは、Weather Hacks のAPIですが、商用ではないので気を付けてください。http://weather.livedoor.com/weather_hacks/webserviceP.Sデータが日本語なのに、今回はNode-REDを中継しなくても無事に日本語が取得できている・・・何故今日はこの辺で・・・あでゅー

      テーマ:
  • 10Nov
    • IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-4

      IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-1IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-2IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-3こんばんは本日は、テクてくLotus技術者夜会が開催され、テーマが「IBM Domino App Dev Pack および IBM Notes/Domino V10 最新情報」でしたNotesHTTPRequestのことも触れられていたので何かいいネタないかな??と胸をワクワクさせて参加しましたLotus ScriptからWatson Workspaceにメッセージ投稿のデモ、とっても面白かったので、是非実装してみたいですねーさて、今回もみんな大好きNotesHTTPRequestの話題なのですが、筆者も3回このネタで書いておりますいい加減、世の中のAPIを使った検証をしないと!と思い楽しそうなAPIを探してみましたそしたらあったんですRakuten DevelopersAPI一覧の中に「楽天レシピAPI一覧」というものがあったので、これを使って人気Top3を取得してみようと思いますまずは完成系Rakutenレシピから取得ボタンをクリックすると・レシピタイトル・レシピURL・所要時間上記3つを取得するように作ってみました他にも食材とかいろいろありますが、何がとれるかはAPIの使い方を参考にしてくださいRakuten Developersには使い方もテストフォームも準備されていますちなみに、RakutenAPIを使用するにはDeveloper登録が必要になります。登録するとアプリIDが発行されてAPIが利用できるようになります。ログインした状態でテストフォームに移動すると、アプリIDが自動的にセットされます。GET/POSTボタンをクリックすると、以下のようにJSONで結果が返ってきます。筆者は、まず簡単に値がとれるかを確認したいので、パラメータを追加してレシピタイトルのみ取得してみようと思いましたURLはコピペでとれるので良しとして・・・Notes側はフォーム上のボタンに前回使用したLotus Scriptを記述しましょうか※URLはテストフォームにあるURLの値を利用します~省略~ URL = "<<Rakuten APIに記載のあったURL>>" Set webRequest = session.CreateHTTPRequest returnVal = webRequest.Get(URL$) Set jsonNav = session.CreateJSONNavigator(returnVal)~省略~さあ、レッツ値ゲット何かエラーでた・・・読めんwなんとなくですが・・・日本語をエンコードせいやって言ってませんいやいやいやいやいやいやいやいやいやいやいやいやいやいやいやいや・・・XPagesで作ったJSONの時、何も言ってなかったよね試しに「RecipeURL」に変えたら取得できるし、所要時間を取得するようにしたら、やっぱりこのエラー・・・RakutenAPI側だから何もできないし・・・あ!Node-REDでJSON生成すればいいんだwということで、またNode-RED先輩に力を借りたいと思います。上記赤枠で、RakutenAPIを呼び出しています。上記青枠で、日本語をURI Encodeでエンコード化してます。結果がこちらめっちゃええ感じでは、Lotus Scriptの方も書き換えます。URLの値をRakutenAPIにしていたものからNode-REDのURLに変更。更に、フィールドにセットする前にデコード化してます。。。そして無事このように値がとれるようになったとさ・・・ヨカッタヨカッタNode-RED、チョー便利www次回(こそ)はLotus ScriptのみでWatson Workspaceにメッセージを投稿するDemoを作成したいと思いますw今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 20Oct
    • IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-3

      IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-1IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-2こんばんはサッカー日本代表vsウルグアイ戦を観戦してきてサッカーやりたくてうずうずしていますそんなこともありWorkspaceもこんな感じになってしまいました話を戻しまして・・・とうとう出ましたね、Notes/Domino V10何がそんなに待ち遠しかったかというと・・・NotesHTTPRequestクラスこの機能でどこまで社内の連携が変わるのかと思うとワクワクが止まりませんBeta版と若干変わっているようですがいち早くIBM Championの御代氏がブログでわかりやすくまとめてくださっていますhttp://guylocke.blogspot.com/2018/10/ibm-notesdomino-v102.html実際、どのように使用すれば良いのかたまたま、先日のノーツコンソーシアムのクラウド研究会でNotesHTTPRequestクラスの使い方を教えてもらったので共有したいと思いますヘルプに使い方が載ってないなんて・・・いけずですな前回作成したXPagesのJSONを使って紹介していきます。まずは前回のおさらい Dim session As New NotesSession Dim http As NotesHTTPRequest url = "<取得したいURL>" Set http = session.CreateHTTPRequest() response = http.Get( url ) Msgbox responseこれで以下のように取得できていました実際欲しいのは、Field_5の値だったりするわけです。値をぶん回して取得するそんなことやってられませんよねそこで使用するクラスがNotesJSONNavigatorNotesJSONElementNotesJSONObjectになります使い方は不明なのですが・・・とか実はちゃんと組み込まれていることがわかりましたでは、実際の実装例です1)フォームを作成し、ダイアログボックスとボタンを作成します。ダイアログボックスの選択はイメージの通りです。2)ボタンにLotusScriptを記述します。やりたいことは、ダイアログボックスで選択した値を取得するです。記述例: Dim uiws As New NotesUIWorkspace Dim uidoc As NotesUIDocument Dim doc As NotesDocument Dim session As New NotesSession Dim webRequest As NotesHTTPRequest Dim URL As String Dim returnVal As Variant Dim jsonNav As NotesJSONNavigator Dim jsonElement As NotesJSONElement Dim jsonObj As NotesJSONObject Dim jsonArrElem As NotesJSONElement Set uidoc = uiws.CurrentDocument Set doc = uidoc.Document URL = "<<作成したXPagesのJSONのURL>>" Set webRequest = session.CreateHTTPRequest returnVal = webRequest.Get(URL$) Set jsonNav = session.CreateJSONNavigator(returnVal) Set jsonElement = jsonNav.GetFirstElement Set jsonObj = jsonElement.Value Set jsonArrElem = jsonObj.GetElementByName(doc.label(0)) Msgbox jsonArrElem.Valueポイントを抜粋(為になるかは別)前回、22行目までで終了していましたが24行目でsession.CreateJSONNavigatorの引数として取得したJSONをセットします。25行目のNotesJSONElementには、以下の画像の赤枠部分が入ります(多分)。既にお気づきの方もいると思いますが、GetLast・・・にすれば一番下のエレメントをNotesJSONElementにセットできます。デバッグで値を確認すると・・・よくわかりませんね26行目、NotesJSONObjectには以下の部分がセットされています(多分)。デバッグで値を確認すると・・・これまたよくわからないです28行目、再度別で宣言したNotesJSONElementにNotesJSONElementで指定した値を取ってくるように(今回はラベル名)をセットします。デバッグで値を確認すると・・・おおー!取れてるww(ValueはやっぱりVariant)動作確認ダイアログからラベルを選択し、記述したスクリプトがあるボタンをクリックすると・・・見事に欲しい値が取得できました応用編として以下のような記述を追加するとLoop処理もできます。  Do Until jsonElement Is Nothing Set jsonObj = jsonElement.Value Set jsonArrElem = jsonObj.GetElementByName(doc.label(0)) Msgbox jsonArrElem.Value Set jsonElement = jsonNav.GetNextElement Loop以上、簡単なデモでしたがNotesHTTPRequestの使い方わかりましたでしょうか注意点としては「ヘルプに記載がなかった(?)」ので正しい使用方法なのかは不明ですので自己責任でやってみてください。また、こちらのノーツコンソーシアムのブログにもWatsonと連携する方法が掲載されるはずですので合わせて参考にしてみてくださいhttps://www.notescons.gr.jp/home.nsf/blogs.xsp次回は、筆者もWatsonと連携するクライアントDBを作成して紹介できればと思いますでは、今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 19Oct
    • IBM Domino V10 -ICAAをインストールしたよ!

      こんばんは10月も折り返し地点に入ってしまいましたね今回はIBM Client Application Access(以下ICAA)をインストールしました筆者の会社では、ICAAでNotesを利用していますインストールは特に難しくないので割愛・・・起動おっ、Notesクライアントとなんか違いますね何気に2.0にバージョンアップしています何が違うのか見ていきましょう【HOME】特に見違えるような箇所は思い当たりませんでした【Workspace】な、なんとICAAでも背景画像が変更できるようです何気に嬉しいかも筆者はこんな画像をチョイスしてみましたそして、メールDBにアクセスしたら怒られました当然なんですがねせっかくなのでDBを1つ開いてみます安定のディスカッションDBですが、皆さん若干変わっているのに気付いたでしょうかそうです、ICAAでもアクションボタンが角丸になっていますどうせ新機能はNotesクライアントだけでしょと思っていましたがICAAも手厚くリニューアルされていましたNotes/Domino V10、違いを探すだけでもワクワクしますね1つ残念なことは・・・ICAAもアイコンは青かった次のリリースで黄色くなることを期待していますでは、今日はこの辺で・・・あでゅー

      テーマ:
  • 15Oct
    • IBM Notes/Domino Day 2018 Autumn Tokyoに参加しました

      こんばんはイベント参加ネタです10月10日(水)に、待ちに待った「Notes/Domino V10」の発表がありましたhttps://www.ibm.com/software/jp/cmp/domino-notes.htmlそんな重要なイベントで、僭越ながら1ユーザー企業の代表として、パネルディスカッションに参加させていただきました会場準備の様子500人近くの方々にお越しいただいたとお聞きしました誠にありがとうございますまずはド派手なパフォーマンスから始まり・・・IBM様から今日までのV10に関する活動や今後のお話も・・・そして約1時間ほどの「Notes/Domino V10 ユーザー座談会」で奮闘し・・・(どうやらいつもより大人らしく人前に立つと緊張しているように見られるようでw)基調講演を無事に終えることが出来ました皆様は休憩時間に「Domino Application on iPad」を触れましたかここまでスムーズに動くなら早く手元で使ってみたいですね後半戦には分科会が2ブロックに分かれて開催され、筆者は「Bトラック」のほうに参加しましたBトラック1コマ目はノーツコンソーシアム ザ・ノーツ研究会による「V10ベータ 評価報告会」Bトラック2コマ目はIBM Championによる「開発者が語る 最新Dominoアプリケーション事例」どちらも見ごたえのある分科会でしたイベント終了後は、有志による「Domino v10パーティー」が開催され、Notes好きが集った黄色いパーティーに(IBM Championの国際交流もありました)筆者の感想・・・とても貴重な、そして楽しい1日を過ごさせていただきました残念ながらイベントに行けなかったという方【10月16日大阪、10月19日名古屋】IBM Notes/Domino Day 2018 Autumnがまだありますhttps://www.ibm.com/blogs/solutions/jp-ja/ndday18on/また、今週末に行われるテクてく Lotus 技術者夜会でも簡単ではありますがフィードバックをさせていただきますhttps://www.ibm.com/developerworks/jp/offers/events/techtech/「V10ベータ 評価報告会」が気になった方は、こちらのイベントもお勧めしますノーツコンソーシアム オープンセミナー 2018https://www.notescons.gr.jp/home.nsf/content.xsp?documentId=BF52C6FA52DFA87449258315003868FC検索すると、Notes/Domino V10関連のブログもちらほら出てきてますよねー黄色い旋風、今後もワクワクさせてくれそうです今回は、開発ネタではありませんでしたが、次回はV10関連の記事を書きたいと思いますでは、今日はこの辺で・・・あでゅー

      テーマ:
  • 18Sep
    • IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-2

      IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-1こんばんは前回、 「NotesHTTPRequest」 について書きましたがHTTPリクエストするサイトがとても少ないということで、XPagesで実装してみたという記事を書きました。今回は、そのやり方を書いていきたいと思います。とっても簡単ですので是非やってみてください環境は、RESTサービスを実装するDominoは9.0.1NotesHTTPRequestはV10の機能なので取得するのはV10 Beta2になります。(V10でRESTやってV10で取得しても実感わかないですからねw)まずはDomino9.0.1側の準備です。1)新規XPageを作成します。ここでは「dominoJson」としました。2)データアクセスからRESTサービスコントロールを配置します。3)RESTサービスコントロール>基本の中にあるserviceからxe:viewJsonServiceを選択します。4)defaultColumnsをtrueに設定します。5)viewNameにJSONとして表示するView名を記述します。ちなみに筆者はこのような並びのビューを指定しました。(ビュープロパティのIBM Dominoデータサービスの操作を許可にはチェックはいれていませんでした)6)そして忘れてはいけないのがpathInfoの値です。ここでは「dominoJson」としてみました。設定は以上になります。※サンプルにしたDBはAnonymousアクセスを読者にしています。ではURLを打ってREST出来るか確認します。V10側のサーバー(もしくはPC)でURLを打ってみてください。例)http://<hostname>/dbFile名.nsf/dominoJson.xsp/dominoJson以下のように表示されれば成功かと思います何度も言いますが、このRESTサービスコントロールを配置したDBのサーバーはDomino9.0.1になります。次はNotes Domino v10側の設定です。(もちろん、Domino9.0.1とは相互認証もしていませんしドメインも違います)1)前回の例を参考にNotesHTTPRequestを記述し、プレビューします。2)そうすると、前回のようにJSONが取得でしましたでもでも・・・JSON取得できるけど、ラベル名がField_1とかわかりづらいんだけど・・・そんな時は、列のプロパティになる名前を変更すれば変わりますHTTPリクエストをXPagesで実装しましたが、これなら外部のサービスにHTTPリクエスト出来なくても自社内で検証が出来そうですねRESTサービスコントロールの他のserviceについては他の方々がブログにしていますのでそちらも参考に是非やってみてくださいもっとNotes/Domino V10について知りたい方こちらに参加してみてはいかがでしょうかhttps://www.ibm.com/blogs/solutions/jp-ja/ndday18t/ほぼ世界同時発表のNotes/Domino V10イベントですからもしかすると目からうろこな機能も聞けるかもしれませんでは今日はこの辺で・・・あでゅー

      2
      テーマ:
  • 08Sep
    • IBM Notes V10 新機能「NotesHTTPRequest」を実装するまで-1

      こんばんはタイトルが長すぎて入力制限かかっちまったw出荷が待ち遠しい Notes Domino v10ですそんなNotes/Domino v10の検証をしていて発見した機能で「NotesHTTPRequest」というものがありました。LotusScript class used to make HTTP requests to web servers.このように記載があるように、LotusScriptでHTTPリクエストが出来るらしいのです(すごくね)LotusScriptから実現しようとした場合、今まではJavaをコールして・・・だったのですが筆者自慢ではないですが「LotusScript」と「@関数」ぐらいしか、まともなプログラムを書けないという・・・スキルのなさ(Javaって書いたことほとんどない)それはさておき、Domino v10のコミュニティのWhats NewドキュメントにNotesHTTPRequestクラスの記述例がありました。Dim webRequest as NotesHTTPRequestSet webRequest = NotesSession.CreateHTTPRequest()Call webRequest.get(URL$)※URL$にはリクエスト先のURLを記述したものを格納戻ってくる値としてはVariantでJSON Stringになっているようですめっちゃ簡単やん早速試してみたのですが・・・うまくいかない・・・なんで??調べてみたところ、IBM木村様のブログにも掲載されていますが、リクエスト先がHTTPSリクエストだとうまくいかないとのこと(リリース時には動くことを期待)http://dotnsf.blog.jp/archives/1072063279.htmlそもそも、HTTPでリクエストできるところがこの世の中であるのか少し悩みを持ちつつ、楽しみにしていたNDS2018に参加してきました(すいません、いきなり話がぶっ飛んでw)http://nds2018.jp/top.nsf/pages/NDS2018TDK様の導入事例、各ベンダー企業の製品紹介どれも素晴らしかったのですが、特に筆者の心に響いたのが、IBM Championの御代様のセッションで今の筆者の手助けになる事をお話されていました。・・・そっかXPagesでRESTサービス作ればいいのかと、いうことで家に帰って作ってみた結果がこちら出来た×2NDS2018に参加してよかったーということで、次回どのように実装したかを書いていきたいと思います今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 28Aug
    • 埋め込みビューで知らなかったこと!!

      こんばんは8月ももうすぐ終わりですね残暑にバテていませんでしょうかこの時期になると、楽しみなイベントの予定がたくさん出てきますよねIBM Notes/Domino V10 へのカウントダウンも始まりますhttps://www.ibm.com/collaboration/ibm-domino日本では日本橋三井ホールでイベントがあるようですよhttps://www.ibm.com/blogs/collaboration-solutions/2018/08/22/find-us-world-premiere-domino-v10/まだ予定書いてないけど・・・10時10分に発表するのかな?wwwまた、 IBM Notes/Domino製品に対する要望などを受け付けるサイトもオープンしてますhttps://domino.ideas.aha.io/(英語で) 欲しいと思う機能に投票したり、あらたにアイディアを投稿したりすることができるようです英語に自信がなくて不安だなーと思う方9月に行われるテクてくLotus技術者夜会では毎年恒例の「テクてくCafe」が開催されるとのこと。すでにサイトに投稿されているアイディアを評価し、投票を行ったり新たなアイディアの投稿をしたりするそうです。ここで、集まった方々と中身を理解して投票というのはいかがですかhttps://www.ibm.com/developerworks/jp/offers/events/techtech/index.html#com本当に待ち遠しいイベントばかりですさて、本題へ・・・皆さん、埋め込みビューって使われた事があると思います。筆者、今まで知らなかった事があったので備忘録的に書きたいと思います。まずは完成図すべてのボタンをクリックすると、絞り込みが解除されてカテゴリ別に表示され主菜のボタンをクリックすると・・・主菜だけに絞り込んで表示ができる、便利機能です<今までやってた作成方法>1)埋め込みビュー作成時に、式によるビューの選択をチェックして作成。2)@関数で隠しフィールドの値が・・・というものを書き・・・3)以下のように隠しフィールドに値をセットしてViewRefreshFieldsを行っていました。あとは、単一カテゴリに隠しフィールドの値によって返す値を@関数で記述・・・確かにこれでも実現できるのですが、そもそも・・・すべてを見せるだけのためにビューを作るの??何か無駄な開発しているな・・・と思ったんですそれでイチかバチかでやってみたことを書きます。<やってみた開発方法>1)埋め込みビュー作成時、ベースとなるビューを選択します。2)単一カテゴリも隠しフィールド名を記述しておきます。(ここに入った値が絞り込み時のキーとなる)3)主菜ボタンは先ほどと同じ記述で問題ありません。ここまで特に特殊な設定はしていないと思いますすべてのボタンをクリックしたときは「すべて」をセットするんでしょいえいえ、「すべて」という値をセットすると「すべて」をキーに絞り込みしてしまうので真っ白になります今回、やってみたのはこちら↓4)以下の@関数をすべてのボタンに記述する@SetField("隠しフィールド名";"*");@PostedCommand([ViewRefreshFields])そうなんです*(アスタリスク)をセットしてみたんです理由:だってワイルドカードなんでしょ?(理由になっていない)そうすると・・・期待のものが出来上がってしまったwwこの方法であれば、無駄なビューを作成したり@関数で式を書かなくても簡単に出来ますねもっと早く知りたかった、この機能とても便利なので、もし機会があれば作ってみてください今日はこの辺で・・・あでゅー

      2
      テーマ:
  • 13Aug
    • Node-RED 「node-red-contrib-wws」のお勉強-その2

      Node-RED 「node-red-contrib-wws」のお勉強こんばんは皆様はもうお盆休みに入っていますでしょうか週末は晴れれば猛暑、天気が悪いとゲリラ豪雨というお出掛けするにも難しい日々ですねさて、前回「node-red-contrib-wws」を使ってAction Fulfillmentを実装しかけていました今回、実装してみたので紹介していこうと思います。まずは、IBM Championの吉田さんのAction Fulfillmentのブログを(勝手に)参考にさせていただきました。https://www.ibm.com/developerworks/community/blogs/YoshidaTakeshi/entry/2017%E5%B9%B47%E6%9C%8823%E6%97%A5_14_43_38?lang=en_usこのブログがなかったら実装できなかったです最初に伝えておきます・・・実装はできたんですが・・・「正解ではない気がします」その理由も後にわかると思います・・・1)Watson Assistantの設定を変更するIBM Cloudから Watson Assistant を選択し、今回のAction Fulfillment用に作成したWorkspaceを開き、Entitiesを選択、新しく「開発依頼」を追加します。Value name:開発依頼Synonyms:開発 と 依頼 と Dev  追加します(とりあえず)。次にDialogを開き、「Add response condition」の右にあるメニュー(○3つ)をクリックします。表示された「Open JSON editor」をクリックします。Conversation サービスが response として返す JSON の編集画面になります。https://developer.watsonwork.ibm.com/docs/tutorials/action-fulfillment上記マニュアルを参考に以下のJSONを追記します。{ "output": { "actions": [ "開発依頼" ] }}Watson Assistantの設定は以上です。2)Node-REDの画面に戻り、前回のノードから以下のノードに変更します。まず上の赤枠のノード、Filter Actionsの設定は以下のようにしました。次に下の赤枠のノード、Filter Annotationsの設定は以下のようにしました。3)Filter Annotationsノードに以下のノードを追加しました。switchノードは以下のように設定しました。Filter AnnotationsノードのアウトプットのactionIdを見て処理を分岐します。まずは以下のFunctionノードの設定です。Watson Work Services へプライベートダイアログを表示するように指示します。マニュアルを見るとGraphQL を記述し送信すると書いてあるようです。send GraphQL queryノードが使えそうですね早速、send GraphQL queryノードの説明を見ると・・・こんな風にGraphQL書くんだよーとサンプルがあったので、以下のように書いてみました。conversationIdは出力された中にあるので、そのまま追記しました。targetDialogIdも同じで出力された中にあるので、そのまま追記しました。targetUserIdは見当たらないので、サンプルと出力が一番近い形のものを探してみました。createdByが一番近い形だったので、createdByを記述しました。サンプルを記述しておきます。msg.payload = ` mutation { createTargetedMessage(input: { conversationId:"`+ msg.payload.conversationId + `" targetUserId: "`+ msg.payload.createdBy + `" targetDialogId: "`+ msg.payload.targetDialogId + `" annotations: [ { genericAnnotation: { title: "開発者の選択", text: "誰に開発をお願いしますか?" buttons: [ { postbackButton: { title: "ボタン1", id: "sample1", style: PRIMARY } }, { postbackButton: { title: "ボタン2", id: "sample2", style: PRIMARY } } ] } } ] }) { successful } }`return msg;4)Functionノードの後にsend GraphQL queryノードを繋げます。設定は以下のようにしています。5)次にchangeノードをswitchの「!=開発依頼」の後に繋げます。先ほどGraphQLで記述したボタンIDを書き換えます。例えばIDがsample1だったら表記をサンプル1にするといった感じです。6)changeノードの後ろに続く下記イメージ赤枠のFunctionノードです。こちらもWatson Work Services へプライベートダイアログを表示するように指示しますのでGraphQLを記述します。このGraphQLはどのボタンをクリックしたかを表示させたいので、以下のようにしてあります。変数には前に記述したchangeノードの変換後の値を代入します。conversationId、targetDialogId、targetUserIdは3)で書いた内容と同じです。このノードの後ろにsend GraphQL queryノードを繋げます。設定は先ほどと同じです。7)以下、赤枠のFunctionノードを追加します。Functionノード名が紛らわしいですが、こちらはGraphQLではなくmsg.payloadを書き換えるだけです。変数unamには前に記述したchangeノードの変換後の値を代入します。8)上記Functionノードの後ろにsend messageノードを追加します。前回、画像の追加方法がよくわかっていませんでした。Pictureの欄にある[参照...]ボタンをクリックし、画像を選択し、青枠のアイコンをクリックします。Message Previewに表示されればアップロード成功となります。長かったですが、Node-REDの準備は以上で完了です。デバッグのためにあちこちにDebugノードを追加しておくとわかりやすいかもです。流れは以下のようになります。・WWSで「開発」や「依頼」が含まれるメッセージが投稿されると①で投稿メッセージに下線をつける。・下線をクリックすると、Filter Annotationに流れ②に流れる。・ボタンが表示されボタンをクリックすると③に流れボタンIDが変換される。・④でボタンをクリックした結果表示とメッセージの投稿を行う。WWSで動作確認してみます。「誰にこの開発の依頼をしようかな??」とメッセージを投稿します。メッセージに下線が引かれ、クリックすると開発依頼というアクションが表示されます。表示されたボタンのうち、いづれかのボタンをクリックします(赤枠)。「◎◎さんを選択しました」と確認のダイアログのほかにも、「◎◎さん、開発をお願いします!!」とメッセージが投稿されました(アイコンも変わってるでしょ)おぉ!これで自分もAction Fulfillmentが出来るようになったぞーAction Fulfillment・・・そうです、冒頭で書きましたように「正解ではない気がします」と書きました。勘のいい方は気づいたかもしれません・・・何か余ってる・・・そう、まるで組み立てたプラモデルの1パーツのように・・・そして、使い方もよくわかっていない・・・どなたか、このAction Fulfillmentノードの使い方を、やさしくこっそり教えてください今日はこの辺で・・・・あでゅー

      1
      テーマ:
  • 06Aug
    • Node-RED 「node-red-contrib-wws」のお勉強

      こんばんは毎日暑いですねそろそろお盆ですが、皆様は夏休みどのくらい取得できるのでしょうか筆者はお休みの予定はなく、通常勤務しておりますさて、本題へ・・・今回は「node-red-contrib-wws」を少しだけ勉強しましたので個人的な覚書として書きたいと思います。まずはリンク先→node-red-contrib-wwsIBM Championの吉田さんに「WWSのNode-RED、新しいの出てるよー」って教えてもらいました前回、挫折したことももしかしたら簡単に出来るかもというとても甘い考えで少し触ってみました目標は、以前にもブログで書いたところまでは実装してみようかと・・・・Watson WorkspaceでAction Fulfillmentを実装したい-下ごしらえ編・Watson WorkspaceでAction Fulfillmentを実装したい-続き事前に用意しておくもの・Watson Workspace(My App)・Watson Assistant(Watson Conversation)・IBM Bluemixの環境1)Nodeの追加Node-REDのハンバーガーメニュー>設定>パレット>ノードの追加タブで「wws」で検索すると出ています。このNodeを追加します。追加されるとパレットにNodeが追加されます。2)Webhookを作成するWatson Work ServicesでMy AppsとWebhookを作成します。過去のブログ記事(下ごしらえ編)を参考にしてください。☆オウム返しBOTをつくってみる☆以下のように配置しました。webhookノードの設定値は以下のようにしました。send messageノードは以下のように設定しています。Pictureを設定できるのですが、画像が大きいせいかうまくアップロードできませんでした・・・以上で、Node-RED側の設定は完了なのでデプロイしておきます。◇Watson Workspaceの設定を行う◇1:新規にスペースを作成します。2:スペースが出来たら作成したAppsを追加します。この辺も過去のブログを見てもらえれば参考になるかもです・・・3:では早速メッセージを投稿してみます。おおー、うまくいったようですw▽出力するメッセージを変えてみる▽webhookノードとsend messageノードの間にfunctionノードを追加してメッセージを書き換えてみました。デプロイします。デモと投稿しましたが、「これはテストです。」と書き換えられましたね◎Action Fulfillmentの下ごしらえまで実装する◎次は以下のようにしてみました。webhookノードの中の「Annotation Added」にチェックをつけます。Nodeの下側に口が追加されます。Filter Actionsノードは以下のようにしてみました。Action IdはWatson AssistantのWorkspaces の中で設定したIDです。詳しくは筆者のブログ(続きのほう)を参考にしてみてください。Recognized Actionsのところはカンマ区切りで複数セットできるようですし、ワイルドカード「*」も使用できるとのこと・・・。筆者は「Hello」のみセットしてみました。Filter ActionsノードのOhterwise側の口は以下のようにしてみました。(色変えただけですw)上記まで出来たらデプロイします。Watson Workspaceで「Hello」と「デモ」を投稿してみました。2つとも以下のイメージの赤枠のFilter ActionsノードのOhterwise側に行っているのは筆者の設定が違っているからかもしれません、そうだったらごめんなさい・・・。一応、Hello側は文字の下に紫の線が!!その線(青枠)をクリックすると・・・こ、これは!!!debugノード(青枠)を見てみると・・・Watson Workspace上でAppsをクリックした情報が取得できていますスゲー便利だこのNode・・・ということで、前回ブログで紹介させてもらったところまで実装できました。また時間を見つけて続きをやってみたいと思います(Nodeの設定が違っているとか等あれば、こっそり優しく教えてください)今日はこの辺で・・・あでゅー

      テーマ:
  • 03Aug
    • Notesクライアントで確認ページを再現してみた

      こんばんは気が付けばもう8月ですね猛暑日が続きましたが皆様体調は問題ないでしょうかさて、今回はこんな要望が出たので実装してみましたというお話。(ブログ用に内容はアレンジしてます)依頼者「編集画面から確認ページを表示して登録したいのですが。」筆者「Webページでよくあるやつですね。このDBはWebから登録させる想定ですか?」依頼者「いえいえ、Notesクライアントだけで運用するつもりですが。」依頼者「あと、編集画面と確認ページの表の色や文字も変更したいんです。」筆者「・・・。はい。」ということで、この依頼を受けて再現できるかやってみました(筆者の周りはNotesクライアント好きが多いようでw)まずは完成イメージ画面下にある「確認画面へ」ボタンを押下すると・・・こういう風にするってことだよね(表の色変えるのは後回し)筆者はよく計算結果テキストを使ってこのような表示用のフォームを作るのですが、今回は手抜き効率化するために以下のように開発しました。これが、元の設計です。便宜上、筆者の作成したフィールド名で書きます。1)DspTypeという名前のラジオボタンを作り、以下のように設定。2)DspTypeフィールドを非表示にして、デフォルト値には"Edit"を入れておきます。3)肝心の確認ページは??というと・・・このように下に同じように表とフィールドを配置しました4)確認ページ用のフィールドのすべての名前の後ろに「_Dsp」をつけて、種類は「表示用の計算結果」にします。計算結果の値としては、@GetField(@Left(@ThisName;"_")) としました。5)確認画面へボタンには@SetField("DspType";"Prev");@Command([ViewRefreshFields]);@PostedCommand([EditTop])  を設定入力画面に戻るボタンには@SetField("DspType";"Edit");@Command([ViewRefreshFields]);@PostedCommand([EditTop]) を設定しました。6)仕上げは表示/非表示式編集画面で見せたいところをマウスでなぞり文字のプロパティで以下のように設定。逆に確認ページで見せたいところをマウスでなぞり文字のプロパティで以下のように設定。保存して、動作確認をします。確認画面へボタンを押下すると・・・確認ページに切り替わりました入力画面に戻るボタンを押下すると、以下のように編集画面になります今回触れていませんが、・保存しないで閉じる・登録する・タブの×で閉じさせない 等の実装も必要になってきますがまた機会があればブログにしたいと思います。今日はこの辺で・・・あでゅー

      テーマ:
  • 17Jul
    • XPagesの入力チェック(エラー表示)

      まず最初に、この度の西日本豪雨で被害に遭われた方に心よりご冥福とお悔やみを申し上げます。被災された方々に心よりお見舞いを申し上げ、一日も早い回復と、被災地の早期復旧をお祈りいたします。また、酷暑の中での復旧作業に携わる皆様のご安全をお祈り申し上げます。こんばんは毎日、35度を超える気温で体調お変わりないでしょうか筆者も出社途中にセミの鳴き声を聞き、今年も夏がやってきたんだなと感じましたまた、夜には近所の川で蛍が鑑賞できますもうすぐで学生は夏休みですねー話は戻り・・・「XPagesの入力チェック」って皆様はどのような方法をとっていますか個人的にちょっと興味があったので、色々試してみたので紹介したいと思います。1)オーソドックスなやり方ですが、コントロールの検証タブで行う入力チェック必須フィールドにチェックを入れて、エラーメッセージを記述。長さバリデータもついでに制御したいと思います。<結果>未入力時長さバリデータの設定値以外楽ちんですねー2)エラー表示コントロール/複数エラー表示コントロールを使用する場合1.編集ボックスコントロールの検証タブの設定は1のまま設定した状態のままエラー表示コントロールを配置し、次のエラーメッセージを表示にて、対象のコントロールのID名を指定します。2.編集ボックスコントロールのすべてのプロパティから「disableClientSideValidation」の値を「true」に設定します。3.上記でエラー表示コントロールの設置は完了ですが、ついでなので複数エラー表示コントロールも配置します。<結果>未入力時長さバリデータの設定値以外こちらも案外簡単に配置できました3)CSJSでアラート表示今度はCSJSで、1の検証に近いものが出来ないかやってみました。ボタンを配置し、以下のコードをイベントタブ>クライアントタブに記述します。var str = document.getElementById("#{id:field11}").value;var reg = new RegExp(/^([a-zA-Z0-9]{1,5})$/);var res = reg.test(str);if(str==''){ alert('入力必須です。'); return false;} if(res==false){ alert('1文字以上5文字以下で入力してください'); return false;}注)RegExpとは?<結果>未入力時長さバリデータの設定値以外案外近いものが出来ました(ほぼ同じ?)4)CSJSで入力チェックinnerHTML表示先ほど、エラー表示コントロール/複数エラー表示コントロールを使ってやってみたことをCSJSで実装してみます。ボタンを配置し、以下のコードをイベントタブ>クライアントタブに記述します。var str = document.getElementById("#{id:field11}").value;var reg = new RegExp(/^([a-zA-Z0-9]{1,5})$/);var res = reg.test(str); if(str==''){ document.getElementById("#{id:computedField1}").innerHTML = '入力必須です。'; document.getElementById("#{id:computedField2}").innerHTML = '入力必須です。'; return false; }if(res==false){ document.getElementById("#{id:computedField1}").innerHTML = '1文字以上5文字以下で入力してください'; document.getElementById("#{id:computedField2}").innerHTML = '1文字以上5文字以下で入力してください'; return false;}<結果>未入力時長さバリデータの設定値以外スタイル入れたら、似たようなことも可能他にも、SSJSでエラーチェックしてみたりエージェントでチェックしてみたりと方法はたくさんあると思います。開発したDBに合ったエラー表示をこだわるのもいいかもしれませんね(エラーなんて出ないことが1番だけど)では、今日はこの辺で・・・あでゅー

      テーマ:
  • 23Jun
    • Node-REDを使ってLINE BOT を作ってみた

      こんにちはロシアワールドカップ、日本vsコロンビア観ましたあの強豪コロンビアに勝利ですよ おめでとうございます次のガーナ戦も期待していますそんな日本は、めっきり梅雨の時期になりましたねこんな時は家に引きこもって、Node-REDを楽しむのが一番ですねというわけで、今回はLINE BOTを作ってみたいと思いますまず必要なものとして・LINE Messaging API https://developers.line.me/ja/・IBM Cloud内のNode-REDhttps://www.ibm.com/cloud-computing/jp/ja/・他に追加したい機能があれば【作ろうと思った背景】・社内のプロジェクトとして、IoTやAIを学ぶ勉強会を行っており、手軽で試せるものが欲しかった・ノーツコンソーシアムのクラウド研で教わったことをフィードバックするため・IBM Watson Workspaceでも実装出来るが「IBMだけで構築してるから出来るんでしょ?」と言われるのがシャクだったため・LINEならほとんどの人が試してくれそうだから手始めに・・・Messaging APIを使ってボットを作成するには、まずLINE Developersコンソールでチャネルを作成しなければなりません以下、作成手順です。https://developers.line.me/ja/docs/messaging-api/getting-started/そして出来上がったのはこちら検証用としてはまずまずの出来ですw次はIBM Cloud側に必要になるNode-RED側に移ります。1)オウム返しするボットを作成完成系はこんな感じです。(超シンプル)<httpノード(Webhook)>以下のように「/line_hook」と設定しました。メソッドは「POST」を指定します。LINE Developerで作成したアプリのWebhook URLに「https://<node-redのURL>.mybluemix.net/line_hook」と設定します。<functionノード>ここのノードでは、メッセージを返す処理を行っています。リファレンスを確認するとこのようになっていました。テキストを返す場合リファレンスとグーグル先生を参考に作成したものが以下のものになります。3行目:Bearer値として、アクセストークン値をコピペします。以下の赤枠の値です。7行目~14行目:ただオウム返しするのはつまらないので乱数を発生させて、発生した分だけ「わん」を追加しています18行目以降はリファレンスを参考に作りました。<httpノード(send_result)>URLはリファレンスを参考に設定しました。<httpノード(http)>特に何も設定してませんデプロイして、早速LINEで試してみましょう見事なオウム返しですね筆者、「わん」をランダムでつけることにより、投稿した言葉を犬語に変換!という風にごまかしていますwwとても簡単でしたよね応用編として・・・・スタンプが投稿されたらスタンプを返す・写真が投稿されたらVisual Recognitionで分析結果を返しちゃうとか追加しておくと、ちょっとおシャンティなボットになりますねw今回はNotes/Dominoなお話はなかったですが、投稿されたメッセージからNotesの文書検索とか出来るといいなーって思ってます。某会社が紹介してたLINEでワークフローもできちゃいそうだな・・・きょうはこの辺で・・・あでゅー

      1
      テーマ:
  • 10Jun
    • Bootstrap-DashboardのサイドメニューをXPagesで表現してみた

      こんばんは本日はあいにくの雨模様ですが・・・明日は待ちに待ったThink Japan – Developer Dayですね天候は悪いかもしれませんが、筆者も朝からお邪魔させていただきます今から楽しみでワクワクしていますさて、今回はとある開発をしているときにBootstrapのDashboardみたいな画面が必要だなーと調査していましたこれです個人的にNotesっぽくて好きなんですまた、Bootstrap を流用すれば、カッコいいデザインでXPagesを作成できるので社内でよく活用させてもらっています(見た目がいいとウケもいいw)話を戻して・・・今日紹介させていただくのは、サイドメニューの箇所になります。赤枠のここです当たりまえの話ですが・・・今選択されているメニュー項目には青で選択させていることを表示させ、選択されていないものは何もついていないようにしなければ意味がありませんXPagesを勉強したてだったころ、こんな時どうしていたかなー?と思い出していると、メニュー1が選択されているXPageとメニュー2が選択されているXPage・・・(以下続く)を作っていたのを思い出しました今思えば、なかなか時間のかかることをしていたんだなーと。(わかりやすいんですけどね)なんかいい方法ないかなーと思い、思いついた案が「ViewScopeをうまく使おう」という答えでした(今更かよ!かもしれませんが)簡単ですが1例を紹介します(世の中探せばもっといい方法あるとは思いますが・・・)1)まずはXPageを作成してBootstrapのDashboardサンプルで使用したい部分のHTMLタグをコピペします。2)metaDataにhttp-Equivの設定を行います。BootstrapのDashboardサンプルの5行目にあたる場所を設定しています。3)BootstrapのDashboardサンプルにあるdashboard.cssをDBにインポートし、XPageにセットします。4)必要個所の文言等の修正をして、一度保存しプレビューしてみます。上記のように表示されましたでしょうかでは、ここから少し改造したいと思います。5)スクリプトライブラリにサーバーJavascriptを1つ作成します。内容は以下のようにします。function menuSelect(val , selectVal){ var Select = ''; if(val == selectVal){ Select = 'active'; }; return Select;}第1引数は、呼び出された変数値第2引数は、選択された変数値とし、両引数の値が等しい場合は"active"という値を返すというものです。6)先ほど、BootstrapのDashboardをコピペしたXPageを開き、サイドメニューのタグを以下のように書き換えます。6-1)<ul>タグを囲むようにパネルコントロールを配置します。筆者は「ulPanel」とID名をつけました。6-2)<a>タグをリンクコントロールに変更。6-3)<li>タグにあるclassの値を""にします。7)<li>タグのclassの値に以下を書きます。#{javascript:menuSelect(viewScope.select,'*');}*にはメニューの番号をいれます。今回の例では、上から1、2、3・・・という感じです。こんな感じになっていると思います。8)リンクコントロール>イベント>onclickに以下を記述します。viewScope.select = '*';*にはメニュー番号を入力します。上にあるメニュー項目から1、2、3・・・という感じで割り振っています。部分更新で6-1で作成したパネルIDを指定します。ex)一番上のメニュー項目viewScope.select = '1';ex)上から2番目のメニュー項目viewScope.select = '2';・・・メニュー項目分作業を繰り返します。9)5で作成したサーバーjavascriptを追加します。10)XPage>イベントのbeforePageLoadに以下を書き足します。viewScope.select = '1';以上で設定は完了です。保存してプレビューを確認しましょうページが呼び出されたときには「Overview」が選択されています。Reportsメニューをクリックすると・・・Overviewからカーソルが外れて、Reportsにカーソルが当たりました今回はメニューのカーソル切り替えのみ対応しましたが、ViewScopeの値で右のコンテンツも切り替わるようにすると、いくつもXPageを作成せずにすみそうですまた、8のところもXPageには繰り返しコントロールをうまく使って表現することもできそうですが、それはまた別の機会に紹介できればと思いますでは今日はこの辺で・・・あでゅー

      4
      テーマ:
  • 07Jun
    • 「続きを読む」を簡単に実装

      こんばんはとうとう梅雨入りしてしまいましたちょっと前までは、もう夏なんじゃない?と思うくらいの気温でしたが皆様、体調崩したりしていないでしょうかさて、今回は「続きを読む」をXPagesで簡単に実装できないか探してみました。続きを読むイメージは以下のようなものです。「続きを読む」をクリックすると・・・びよーんとなるアレです元ネタは以下のリンクを参考にさせていただきました。CSSだけで作る超軽量アコーディオン開閉「続きを読む」「もっと読む」JQueryとかなくてもできるんですね作成方法はリンク先にとても分かりやすく記載されているので今回は、HTMLタグをどのようにXPageに実装したかを書きたいと思います今回もいつも通りカスタムコントロールに作成します。プロパティ定義にて、TitleとBodyを作成しました。共に種類はstringです。1) div は パネルコントロールに変更し、StyleClassにクラスを設定。2) チェックボックスやラベルは、それぞれコントロールがあるのでそれに変更。3) タイトル部分には計算結果フィールドコントロールを配置し、値はcompositeData.Titleを記述。4) 本文部分には複数行編集ボックスコントロールを配置し、読み取り専用にチェックを入れ、値はcompositeData.Bodyを記述。 <xp:panel styleClass="accordion-box"> <xp:checkBox id="ac00"></xp:checkBox> <xp:label for="ac00"></xp:label> <xp:panel styleClass="accordion-container"> <h3><xp:text escape="true" id="computedField1" value="#{javascript:return compositeData.Title}"> </xp:text></h3> <p><xp:inputTextarea id="inputTextarea1" readonly="true" value="#{javascript:compositeData.Body}"> </xp:inputTextarea></p> </xp:panel> <!-- accordion-container --> </xp:panel><!-- accordion-box -->5) XPageを用意し、CSSと上記で作成したカスタムコントロールを配置。すべてのプロパティ>カスタムに先ほど設定したプロパティ定義項目があるので、それぞれにテキストを入力します。以上で実装は完了になります。とても簡単ですねーこのカスタムコントロールにCSSを組み込んでおくと、また新たな部品の完成!ということになります利用するシーンが近々来そうなので、個人的に流用するために書きましたもしこのような開発があったら使ってみてくださいでは、この辺で・・・あでゅー

      テーマ:
  • 23May
    • Node-REDでWatson Text to Speech!

      こんばんわ今日はいつものNotes/Dominoの話題から逸れてNode-REDでWatson Text To Speechについて書きたいと思います最近、自社内で「Watson」やら「AI」やら「IoT」の話題があり、だったらみんなで情報交換して面白いアプリ作らない??ということで、筆者も参加しています敷居をいきなり上げると、皆さんやめたくなってしまうので空き時間で簡単に出来るNode-REDを使ったアプリを使ってみては?ということで筆者も久々にNode-REDで開発しました本日のテーマは「お話させてみよう!」ということで、以下のようなものを作りました[いってみよ!]ボタンをクリックすると・・・ページが切り替わり、EMIさんがテキストを読み上げてくれますNode-REDは以下のようになります。参考URL:https://github.com/watson-developer-cloud/node-red-labs/tree/master/basic_examples/text_to_speech(入力フォームを変更したり、日本語の設定にしたり・・・)今後、このNode-REDをベースに色々な機能を拡張させていこうと思いますでは、今日はこの辺で・・・あでゅー

      テーマ:
  • 09May
    • XPagesでplaceholderをやってみた(今更)

      こんばんは気温の変化についていけない方のサッカー馬鹿です久々に髪を短く切ったのに、会う人から決まって言われる言葉は・・・「真っ黒に焼けたね!」まだ一人にしか「髪切った?」としか言われていません(決してタ〇リさんではありません)さて、本日は開発でドハマりしたことを書きたいと思います皆様はplaceholderってご存知ですかざっくり言うと、フォームなどの入力欄にあらかじめ記入されている薄い灰色のテキストのことです今回、Bootstrapを使ったDB開発をしており、ログイン画面作りたいなーと思いまして。(これ使ってやろうと思いましてw)会社のDominoはまだ、Bootstrapテーマがないバージョンのため色々と準備が必要でした過去のブログに手順を書いていますねーXPagesでBootstrap!ということで、下準備を終わらせBootstrapのsigninのHTMLを流用しました赤枠は編集可能コントロールに変更し、青枠はいらないので削除そして、IBM Championの御代氏のブログ「XPagesでplaceholderを実現してみる」を参考にplaceholderを設定していきます。ID(Email)入力用編集可能コントロールの設定Bootstrapのソースを確認すると、type="email"となっているのですべてのプロパティにあるtypeのリストからemailを選択します。パスワード入力用編集可能コントロールの設定先ほどと同じようにすべてのプロパティにあるtypeのリストからpasswordを・・・ってありませんねもしかして手入力ということで、直打ちしてやりましたw保存して、レッツプレビュー♪怒られてしまいましたwなんかパスワードをtrueにしろって書いてありますね・・・あ、これか今度こそ保存して、レッツプレビュー♪って出てこねぇーーーーーーもしかして、何か特殊な設定がいるのかと思い、グーグル先生に聞いてみました以下のリンク先がヒットしましたUse placeholder attribute and password type in Xpages英語読めないのでよくわからないですが、スクリプトブロックコントロールを使って対象のClassのtypeを書き換えちゃう技(?)以下のスクリプトブロックコントロールを追加します。<xp:scriptBlock> <xp:this.value><![CDATA[XSP.addOnLoad(function(){ dojo.query(".passwordInput").forEach(function(eachInput){ dojo.attr(eachInput, "type", "password"); });});]]></xp:this.value></xp:scriptBlock>「特定のタイプの入力(例:passwordInput)を明白にするstyleClassを設定します。」と書いてあるので、CSSに「passwordInput」に対するスタイルを書き足します。パスワードに追加した編集可能コントロールのStyleClassに追記します。注意点として、パスワードのチェックは不要なのでついていたら外します。今度、今度こそ保存して、レッツプレビュー♪出来たー\(^o^)/いつもならここで「めでたしめでたし」で終わるのですが、Bootstrapのテーマが選択できるDominoバージョンでも同じ設定がいるのか試してみました。ID(Email)入力用編集可能コントロールの設定(typeも忘れずに)パスワード入力用編集可能コントロールの設定typeの項目には・・・追加されてませんね懲りずに直打ちしてやりましたw保存して、レッツプレビュー♪期待通りのエラーwwということで、パスワードにチェックを入れました保存して、レッツプレビュー♪どうせ、例のスクリプトブロック追加しないとダメなんでしょ・・・って出来とるやーんやはりDomino内部で持っているBootstrapテーマはXPagesを考慮していることをシミジミ実感(早く会社のDominoにFP当てたいな)ということで、Dominoのバージョンは常に最新にしておかないと便利な機能の恩恵も受けれないというのがわかりました今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 07May
    • フォームの式(NotesView)続き

      フォームの式(NotesView)こんばんはGWもあっという間に終わってしまいました筆者のGWというと・・・基本サッカー絡みでしたお陰様でこんがりと焼けていますさて、前回の続きでフォームの式(View)についての調査結果です。前回は、Formフィールドを作成してブラウザ上でフォーム名を書き換えて保存してみました・・・が!!フォーム名はうまく書き換わっていませんでしたということで、次のパターン@SetFieldを使ってフォーム名を書き換えてみたいと思います早速実行・・・クライアントから確認してみましたが、やっぱり変わっていませんでしたならばエージェント書いて、@Command([ToolsRunMacro])で呼んでやる!!ということで、エージェントを保存して@Command([ToolsRunMacro])をフォームに配置し再びブラウザからアクセスします。ToolsRunMacroボタンをクリックして実行無事、エージェントは実行されたようです。クライアントから確認してみると・・・お書き換わってるということで、筆者のフォームの式の調査結果が終わりました。フォーム名をブラウザから書き換えることがもしあった場合は、LotusScriptで書き換えないと変わらないことがわかりましたこのような事はやらないかと思いますが、もし何か似たようなことをやっている時があれば「アイツ、こんなことしてたなー」って思い出してくださいwでは、今日はこの辺で・・・あでゅー

      1
      テーマ:
  • 30Apr
    • フォームの式(NotesView)

      こんばんはGWに突入しましたね皆様は9連休ですか飛び石連休ですか4月は今日で最後5月も元気にNotes/Dominoの開発をしていきましょうさて、皆様NotesViewにある「フォームの式」ってご存知ですか筆者も10年位前に初めて知ったのですが、ざっくりいうとビューに異なるフォームが選択されていても、フォームの式に書いてあるフォーム名のフォームでビューにある文書を開くことが出来るんです(わかりづらい)当時は、そんなことも知らなかったので例えばですが、管理部門にはFormAのレイアウトで見せたいけど、利用者にはFormBのレイアウトで見せたい時とかありますよねその時、フォーム式に[ADMIN]ロールを持っている人はFormA、それ以外はFormB・・・などと式を書いて簡単に切り替えることが出来たんです。(今はXPagesとかでやるかもですが)そうやって考えると、当時からNotes/Dominoは画期的だったんですねということで、この「フォーム式」について少し調べなければいけなかったので、調査した内容を書いていきたいと思います。(不足分や指摘事項があったら、次回以降にこっそり教えてください)1)フォームを2つ用意します。・FormA→背景を赤系の色・FormB→背景を青系の色※どちらもValフィールド(テキスト、編集可能)を作成して保存します。2つフォームが出来たら、FormBを新規作成しValフィールドに適当な値を入れて保存します。2)ビューを2つ用意します。・すべての文書→選択式も何もなし。1列目の列式は「Form」で昇順ソート・FormAView →選択式は何もなし。フォームの式に「FormA」と記述し1列目の列式は「Form」で昇順ソート以上で準備は出来ました検証FormAViewから1で作成したFormB文書が表示されていると思います。文書を開くと・・・FormAで開くことが出来ました。プロパティを確認してもFormBですねーでは、すべての文書から開いてみましょうこちらはFormBとして表示されます。こんなに簡単に設定できるんですねどうせNotesクライアントからだけなんでしょと思いますよね?ちゃんとURLにViewを指定してあげると、動作するんです超便利10年前の自分に教えてあげたい・・・せっかくなので、次の検証です。FormAフォームとFormBフォームに「Form」フィールドを作成して書き換えたらどんな動きになるんでしょうか早速追加します。Form(テキスト、編集可能、デフォルト値:Form)FormAのフォームを準備します。Valフィールドの値のみ変更し、保存します。FormAViewから、文書を開きます。Valフィールドの値は書き換わっていますが、FormフィールドはFormAを使って文書更新しても書き換わることはないようです。続けて、Formフィールドの値を「FormA」に変更して保存します。すべての文書で確認すると・・・FormAに変わっていますね文書を開くとFormAに変わっていることが確認できます。この機能を使えば、前期のフォームデザインはAだったけど、今期のデザインはBになったっていうことも強制的に変えられますねじゃあ、この機能も当然ブラウザでも出来ちゃうのかなと思い動作確認してみます。フォームの式がないすべての文書をブラウザから開き、FormA文書を開きます。編集モードに変更し、Formの値を書き換えます。書き換えたら、*保存して閉じるボタンをクリックします。*保存して閉じるボタンの中身は@Command([FileSave]);@Command([FileCloseWindow])文書も保存されたし、Formの値を確認してみましょうあれ変わってなくねこの方法ではFormフィールドの値は書き換わりませんでしたでも・・・何としても書き換えたい次回、色々な方法を試してFormフィールドを書き換えできるか検証したいと思います本日は長くなりすぎたのでこの辺で・・・あでゅー

      テーマ:

プロフィール

makoto

自己紹介:
NotesR4.5からずっと携わっています。 「えっ?!これNotes?」と言われるような、 N...

続きを見る >

フォロー

このブログのフォロワー

フォロワー: 0

フォロー

このサイトの掲載内容は私自身の見解です。
ここでの情報を元にメーカー等に問い合わせたりする事は避けてください。
また、サンプルコードを利用する場合は、利用者の責任の元で十分に利用者環境での動作確認や影響度などについて検討の上、ご利用ください。
このサイトに掲載されているソフトウェア、およびファイルの使用、または使用不具合等により生じたいかなる損害に関しましては作者は一切責任を負いません。
全て利用者の自己責任でお願いします。

最近のコメント

Ameba人気のブログ

Amebaトピックス