ここ数年、Zoomなどを利用したリモート会議が増えた、というより当たり前になりました。それにともない、イベントでの登壇も、オンラインで行うようになりましたよね。筆者が以前から不満に思っていたのは、いわゆる「発表時のパワポの挙動」です。 オフラインでの発表であれば、PCにプロジェクターを接続します。つまり必然的にデュアルディスプレイ環境となるわけです。当然ですが、プロジェクターの画面は、発表のために占有されます。そのためパワーポイントでスライドショーを開始すると、プロジェクターの画面にフルスクリーンでスライドが写り、手元のディスプレイには発表者ツールが表示されます。これは非常に理にかなった動作です。 ですがオンラインの発表の場合、ウィンドウ単位で画面共有が可能なため、画面全体にスライドを表示する必要はありません。というかむしろ邪魔です。そしてシングルディスプレイ環境の場合、画面全体をスライドが占めてしまい、発表者ツールが使えなかったりします。またオンライン会議に参加しているZoomなどのクライアントの操作もしづらくなってしまうでしょう。この問題を解決できるツールがDeskPadです。 Homebrewを使っている場合、以下のコマンドでインストールできます。 $ brew install deskpad DeskPadは仮想的なディスプレイを作成し、アプリのウィンドウとして表示できます。つまりこの仮想ディスプレイに発表用のスライドを表示し、DeskPadのウィンドウを共有してあげればよいわけです。それではやってみましょう。 DeskPadを起動すると、画面収録とシステムオーディオ録音の許可が求められるので、システム設定から許可しておきましょう。 DeskPadを起動した状態です。OSからは、通常のディスプレイが接続されているように見えますので、配置などを調整しておきましょう。 パワポのスライドショーを開始し、Zoomで共有してみた例です。発表用のスライドはDeskPadのウィンドウの中に押し込めたので、このウィンドウを共有してあげればOKです。手元のディスプレイには発表者ツールが表示されているので、発表もしやすいですよね。 ノートPC単体で運用しているような場合、プロジェクター接続前提のパワポの挙動は結構しんどいでしょう。今回はそんな時に便利かもしれない小ネタでした。 [source]

Pleasanterを使いこなしてくると他のデータと紐付けたり1つのテーブルだけでは物足りなくなってきました。もちろん、データを1つの表として集約して管理できると嬉しいことではあるのですが、あらゆるデータを扱おうとするとどこかで無理が生じてしまいます。Excelを使っていてよくぶち当たるのは、どこかで親子関係のようなデータの紐付きが出てきて1つの表では表現できなくなってしまいますね。 そんな時にデータベースやデータに関わる設計や勉強をしたことがある方であれば、「正規化」を思い浮かべるのではないでしょうか。細かい話をしてしまうと奥が深い世界なので語りきれないのですが、大袈裟なことを言ってしまうとExcelで無理が生じている限界の状態はデータベースの正解では非正規系と呼ばれる状態に近いような気がしています。 しかし、正規化はデータベースの世界で最適化する手法であるため、Pleasanterにそっくりそのまま当てはめることはできませんが、頭の片隅に知識として入れておくと、サイトテーブルの設計がスムーズになるかもしれませんね。興味がある方は1度調べてみてください。 少し話が脱線したかもしれませんが、Pleasanterでデータを分割してデータ同士を紐づけるJOINのような機能を紹介します。 リンクとは テーブルの親子関係を設定することで編集画面から紐付く子テーブルのレコードを一覧表示したりすることができます。これにより他のサイトテーブル同士を繋げたり、レコード同士の紐づきを管理することができます。 応用編：リンク | Pleasanter リンクの設定方法 Pleasanterでは分類項目を用いてテーブル間の紐付けを定義します。複雑なことをやろうとするとよく登場する項目ですね。 テーブルの管理：項目：分類 | Pleasanter 1番シンプルな方法はサイト一覧の画面でリンクしたいテーブルを親から子へトラック&ドロップします。または、分類項目の選択肢一覧に[[サイトID]]で指定するとリンクされます。 ダイヤルが表示されてリンク先の項目や項目名を編集できます。今回は既定値のままにします。 実際に紐付ける前に、固定テーブルにいくつか適当なデータを登録してください。 子テーブルの準備ができたら、親テーブルに移動して新規作成画面を開きます。先ほどリンクしたことで、1番最後の項目に分類項目が追加されています。 この分類項目を開くと、先ほど作成した子テーブルの一覧が表示されていることが確認できます。リンクしたい子テーブルのレコードを選択して、作成ボタンを押します。 作成後に編集画面が表示されて画面の下の方を見てみると、リンクが表示されています。一覧表には先ほど選択した子テーブルが表示されています。 これでリンクができました。 リンクのパターン 親:子の関係でいくつかのパターンで試してみましょう。 1:1(他レコードから同じ子テーブル紐付けNG) 単純にリンクしただけでは複数の親から同じ子とリレーション関係をリンクすることができます。1対1の関係にしたい場合は、項目の設定画面(設定 > テーブルの設定 > エディタ > 詳細設定)から重複禁止をONにします。 この設定を有効にすることで、他のレコードで同じ値を選択できなくなります。そうすることで実質的な1:1の関係を維持することができます。 多:1(子テーブルに親テーブルから複数レコードを紐付け) 1:1のパターンで話していた単純にリンクしただけでは...のケースです。親テーブル側では1つの子しか選択できませんが、他の親からも同じ子テーブルのレコードを選択できます。 1:多(親テーブルに子テーブルから複数レコードを紐付け) 子テーブルから複数のレコードを紐付けたい場合のケースです。これは分類項目の設定で複数選択をONにすることで実現できます。 1:多と多:1は、基本的な同じような紐付けになりますが、実際の業務の流れた紐付けが発生するタイミングなどで使い分けることになると思います。 おわりに リンク機能をマスタするとエクセルでは扱いきれなかったような複雑なデータを扱うことができるようになりますね。仕事上で扱うデータなどは1つの表で管理できることはなかなかないので、リンク機能をうまく使って複雑なデータを上手に扱って業務効率化を実現していきたいですね。 [source]

Pleasanterでスクリプトを書いているときに日付や時刻を思い通りに操作したい時があります。そんな時にJavaScript標準で用意されているDateがあるのですが、やりたいことを実現するために少し長いコードを書かなければいけなかったりするため、やや使いにくさを感じています。 Pleasanterでも普段使い慣れているものを使いたいので、備忘録も兼ねて使い方をまとめてみました。 developer.mozilla.org Day.jsとは 軽量で使いやすいJavaScriptの日付操作ライブラリです。Dateと同じような役割ですが、よくやるようなユースケースが関数化されているため、短いコードで簡単に使うことできます。 day.js.org 例: 日付のフォーマット 先に実際にDay.jsを使うとどれくらい日付の操作が楽になるのか見てみましょう。 Dateを使って実際にYYYY/MM/DD形式の日付を取得しようとするとこれくらいのコードを書く必要があります。 const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, ‘0’); const day = String(date.getDate()).padStart(2, ‘0’); const formattedDate = `${year}/${month}/${day}`; console.log(formattedDate); Day.jsを使うとこれくらい短くできます。 const date = dayjs(); const formattedDate = date.format(“YYYY/MM/DD”); console.log(formattedDate); 便利ではあるのですが、使えるようにするためには一手間準備が必要になります。 使い方 Node.jsなどで使用する時にはNPMを使ってインストールします。今回はブラウザで直接呼び出して使用する必要があります。使用するツールによっては、ぶらうざーからの呼び出しに対応しているか事前に確認が必要です。Day.jsはサポートされているので使えます。 Browser · Day.js Day.jsスクリプトの読み込み 最初にPleasanterでDay.jsのスクリプトファイルを読み込む必要があります。通常このスクリプトはHTMLファイルのHeader領域に記述されます。 Pleasanterでは、管理 > テーブルの管理 > HTMLから新規作成画面を開き、タイトルは適当に入力しつつ、挿入位置はHead bottomを選択して次のスクリプトを貼り付けます。最後に作成ボタンを押して反映します。 それぞれのスクリプトで次のコードを最初に1回だけ呼び出してください。 dayjs.locale(‘ja’); これで日本語化対応もできて自由な形式で日付を作ることができるようになりました。 おわりに 外部ファイルをうまく活用しながらスクリプトを書くことでより楽に実装することができるようになります。しかし、今回のようにURLから外部スクリプトを呼び出しすぎると全体的にUIが重くなってしまうこともあるので注意してください。 今回はURLで呼び出していましたが、キャッシュするようにファイルを取得してWebサーバーに直接腹持ちする方法もあります。Pleasanterで静的なリソースファイルをアップロードして保持する方法があれば、そちらを活用した方がパフォーマンス的にはいいかもしれませんね。まだ、この辺りは勉強不足でそういった仕組みがあるのかないのか分からず適当なことと言ってますが、もしあれば、別記事でまとめようと思います。 [source]

雨が降るたびに寒さが少しずつ増していくこの時期らしい季節になりましたね。食べ物も美味しく感じられてきて◯◯の秋を楽しめる頃です。 さて、10月が始まりもうすぐ折り返しになる頃ですが、9月のDevOpsニュースをまるっと振り返ってみましょう。 データベース MariaDB Oracle オープンソース 生成AI OpenAI o1 GitHub Copilotへo1-minが利用可能に ツール パスワードマネージャ リリース TypeScript 5.6 Java23 Linux 6.11 データベース MariaDB MariaDB社が投資会社「K1」に買収されると発表。CEOは交代、製品開発と提供は継続 不調が伝えられていたMariaDBが投資会社に買収後、立て直しが図られ今後の行く末が気になるところですね。利用ユーザーからすると目が離せないニュースかもしれないですね。 publickey1.jp Oracle ［速報］オラクルとAWSが戦略的提携で「Oracle Database@AWS」の提供を発表 Oracle Autonomous DatabaseおよびOracle Exadata Database Serviceをマネージドサービスとして提供する新サービスで、顧客はAWS上からこのサービスに接続でき、Oracle Cloudで提供されているのと同じ純正のように使用できるデータベースサービスになるようです。 www.publickey1.jp オープンソース AWSが主導する「OpenSearch」、Linux Software Foundation傘下の「OpenSearch Software Foundation」発足 一時期はザワザワしましたが、事実上の和解にも達して、落ち着きを見せ始めていますね。 www.publickey1.jp 生成AI OpenAI o1 OpenAI⁠⁠、応答前により時間をかけて思考する推論モデル「OpenAI o1」を発表 難しい質問に答える前に長時間考える人間のように、問題を解決する際に「思考の連鎖」をおこなうモデルみたいで、徐々に人間味が増しているような不気味さもありつつも、楽しみもあり今後の発展に引き続き目が離せないですね gihyo.jp GitHub Copilotへo1-minが利用可能に OpenAI o1-preview/o1-miniがVS CodeのGitHub Copilot ChatとGitHub Modelsで利用可能に GitHub Copilotは早期アクセスの頃から使って遊んでいるツールなので、 新しいAIモデルが使用できるようになるのは嬉しいですね gihyo.jp ツール パスワードマネージャ Chromeのパスワードマネージャ、異なるOS間でパスキーの同期をサポートへ。WindowsやmacOS、iOSに対応 www.publickey1.jp リリース TypeScript 5.6 gihyo.jp

厳しい暑さが和らぎ涼しい日には窓を開けて快適に過ごせる日もありますね。しかし、日によっては夏日ぐらいの暑さになったりと、季節の変わり目で慣れない日々が続きますね。 さて、今月も新しいバージョンがリリースされましたので、リリースノートを眺めて気になったところをピックアップしていきたいと思います。 目次 目次 Visual Studio Code ニューリリース 主なリリース エクスプローラーでの検索 おわりに Visual Studio Code ニューリリース Visual Studio Codeのバージョン1.94がリリースされました。 主なリリース 変更点 変更内容 チャットでの公開コードマッチング(GitHub Copilot) GitHub Copilot チャットでGitHub.comで公開されているコードと一致する可能性があるかどうかを表示可能に チャットでファイルの提案(GitHub Copilot) GitHub Copilot チャットでファイル名の候補を表示可能に チャットのUXを刷新(GitHub Copilot) GitHub Copilot チャットのユーザーエクスペリエンスを刷新 検索でのColilotサポート 検索結果にGitHub Copilotが意味的に関連する検索結果を表示可能に エクスプローラーでの検索 エクスプローラーでの検索機能が改善され、簡単にファイル検索できるように 複数のGitHubアカウントにサポート(プレビュー) 複数のGitHubアカウントに同時ログインできるように ESMへの完全移行 ESM(ECMAScript Modules)への移行が完了し、パフォーマンス改善に寄与 その他詳しいリリース内容については Visual Studio Code September 2024 にアクセスしてください。 ここからは筆者として気になった機能をピックアップして実際に触ってみています。 エクスプローラーでの検索 開発している中でファイルが増えてくるとあのファイルどこだっけ？となることが意外とあり、これまではCommand + Pのショートカットでファイルを名前で検索機能を使って探すでやっていました。 新しいリリースでフォルダーのツリービューからファイルを検索できるようになりました。サブフォルダを掘りながらどこだっけ？と探し回ることも減るので嬉しいアップデートですね。 起動方法はフォルダのツリービュー内で右クリックしてフォルダー内を検索...(ショートカット：Command + Option + F)を押すと起動します。 検索キーワードを入れるとリアルタイムにフィルタしてくれます。 おわりに 今回はGitHub Copilotに関するアップデートが多かったように思いました。また、最近はJupyterを触る機会も増えてきたので、Jupyterのアップデートにも目が離せません。 [source]

とあるチャンネルでフィルタの全選択をしたいという話を見かけてできそうな気がするけどな。と思いながら、半分諦めたのですが、こういう時にWikiのマスターデータ活用が使えるのか！と新たなが発見があったので忘れないようにまとめてみました。 目次 目次 一覧画面のフィルタとは？ 実現方法の検討 標準機能でやる(×→◯) スクリプトでやる(△) サーバースクリプトのみでやる(△) サーバースクリプト + Wikiのマスターデータ活用(◯) おわりに 一覧画面のフィルタとは？ 一覧表の上にあるフィルタのことです。このフィルターを選択すると、一覧表から条件にマッチするレコードのみに絞ることができます。 例えば、状況を全て選択しているとこの状態です。 これを実現するためにどのようにやればいいのか調べてみました。 実現方法の検討 標準機能でやる(×→◯) [2024/10/09_修正] 現在のプリンターの機能や設定でデフォルト全選択のような設定はできないようです。 コメントで助言頂きまして、ビュー機能を活用することでフィルタ設定する手間を限りなく減らすことができます。 テーブルの管理：ビュー | Pleasanter 管理 > テーブルの管理 > ビューを開きます。 必須項目の名称を入力したら、フィルタタブに移動します。 フィルタを適用したい項目を選択して、追加ボタン(白)をクリックします。今回は状況に適用します。 一覧画面と同じような入力項目が表示されるので、条件を設定して下部中央にある追加ボタン(青)をクリックして反映します。(更新ボタンもお忘れなく) 設定の反映ができたら一覧画面に戻り、右上を確認するとビューが選択できるリストダウンが表示されています。 リストから先ほど作成したtestを選択します。 設定しておいたフィルタ条件が適用されます。多少の手動操作を許容できるようなシーンではビューを使って運用するのも手軽でいいですね。 あまり、スクリプトを書いてメンテナンスなど気を使いたくないという方にとってはおすすめの使い方かもしれません。 スクリプトでやる(△) 複雑なことやろうとするとスクリプトもしくは、サーバスクリプトでやることになると思いますが、まずはスクリプト実現できるのかを試してみました。 まずは画面要素を見てみます。フィルターの入力項目をクリックすると、リストが表示されて、チェックをつけていくと選択した項目がフィルターされます。最上部にある全て選択をクリックすると全ての項目が選択され、全て解除を選択すると選択中の項目が全て解除されます。 ブラウザの開発者ツールからHTML要素を見てみます。HTMLでみると<a>タグが使われていてリンクであることがわかりました。 リンクはJavaScriptからクリックメソッドを使ってクリックさせることができます。ざっくり書くとこんな感じです。 document. getElementById(“hoge”).click(); HTMLElement: click() メソッド - Web API | MDN 次に、クリックするためのHTML要素を特定する必要があります。1番都合がいいのはid属性です。もう1度開発者ツールからHTMLを見てみましたが、id属性は割り当てられていませんでした。 一応、selectorを取得(タグ上で右クリックしてコピー > selectorをコピー)してみましたが、このように相対的なパスでしか取得できませんでした。 body > div:nth-child(58) > div > ul > li:nth-child(1) > a Pleasanterでは設定などを変えるたびに一覧画面の要素が動的に変わってしまうため、パスが深い相対的な参照は壊れやすいので、いいやり方とは言えませんでした。 もし、心配がなくてやれるとしたらこのような形で書くとで目的は達成できますが、先ほど言ったように壊れやすいのであまり採用したくない気持ちです。 window.addEventListener(“load”,function(){ const query = “body > div:nth-child(58) > div > ul > li:nth-child(1) > a”; const element = document.

Pleasanterの新しいリリースが通知されましたね。 弊社では新しいバージョンに上げるフットワークが非常に軽いので、検証環境をバージョンアップしてもらいました。噂の機能を早速触ってみようと思います。 リリース概要 今回のリリースはこのような感じみたいです。 対応データベースにMySQLを追加。 サイトパッケージのインポート時にスクリプト／サーバスクリプト内のIDを置換する機能を追加。 スタイル／スクリプト／HTML／サーバスクリプトをコードエディタで入力する機能を追加。 サイトパッケージのインポートでダッシュボード内のID置換が行われない問題を解消。 サイトパッケージのインポートで1対多でリンクしたレコードが復元されない問題を解消。 サイトパッケージのインポートでリンクされていない項目の値がIDとして置換される問題を解消。 拡張フィールド機能でTypeNameをDateTimeに設定するとエラーが発生する問題を解消。 新UIテーマのレイアウトを調整。 プリザンターの直近のバージョンアップ情報 | Pleasanterより 新機能ピックアップ スクリプトなどのエディタUI刷新 パートナー向けなどのイベントなどで予告されていた機能の中で普段からスクリプトを書いていた方は待ち望んだ機能ではないでしょうか？ スタイル／スクリプト／HTML／サーバスクリプトが対象でUIが刷新されました。これまでのUIと見比べながら新しいUIを早速触ってみようと思います。 これまでのUI これまでのUIでは見ての通りのテキストエリアでした。タブ押すと次の入力項目に移ってしまったりと、エディタ慣れした人からするとエンジニア泣かせなところでした。 新しいUI Webエディタのような形でサポートされました。通常のJavaScript構文であれば入力補完などもサポートされているので、エディタと同じくらい直感的に操作できるようになります。 試しにfunc..と入れるとJavaScriptのシンプルな入力補完もしてくれるようです。 サジェストされたものをエンターで選択すると補完してくれました。 インデントもTabやShift + Tabで上げたり下げたりできますし、Alt + ↑(または↓)で行単位の移動もできるので、普段使っているショートカットも直感的に使えそうでした。 これはスクリプトを書くのがかなり捗るのではないでしょうか。 なかなか新しいバージョンへ上げることを許してくれないところもあると思いますが、ぜひ試してみてくださいね！ [source]

これまで「パートナーになったので〜」シリーズで基本的なテーブル作成からスクリプト活用までの一連の流れを学んできました。 前回までのシリーズは一区切りにしまして、これからは気になった機能や最近触った機能などを中心にブログにまめていければと思っていますので、引き続き一緒にPleasanterを学んでいきましょう。 過去の連載： devops-blog.virtualtech.jp devops-blog.virtualtech.jp devops-blog.virtualtech.jp 今回の話 今回は、テーブル作成後の運用フェーズに入ってから活用すると便利そうな「通知機能」について学んで、使いこなせるようになってみましょう。 通知機能とは？ メールまたはチャットなどに対して通知を飛ばす機能です。普段からあまり意識していないと思いますが、システムやサービスで変更や新規作成をした後にメールが飛んでくるのもがまさに通知です。 Pleasanterでは通知を画面上から設定するだけで飛ばすことができるため、定期的にテーブルを確認して追加や変更がないかを確認せずとも、メールやチャットの通知をきっかけに作業や手続きを進めることができるので、業務効率化に繋げやすいですね。 pleasanter.org 事前準備 早速始めたいところですが、通知機能でメールを使用する際の注意点としてインフラでの設定が必要になります。 メールサーバー(SMTP) メール機能を使用するためには、事前にメールサーバーの準備や設定ファイルの変更が必要です。使用するサーバーやサービスによって記述方法や必要な情報を見つけるのは非エンジニアの方にとっては慣れない作業で難しいポイントとなりやすいです。事前にPleasanterを担当している社内のエンジニアや弊社を含めたパートナー企業にご相談ください。もし、ご自身で設定してみたい方は公式ドキュメントを見ながら進めてみてください。 プリザンターからメールを送信できるように設定する | Pleasanter 使い方 既に記録テーブルが作成されているところからのスタートとさせてください。管理 > テーブルの管理 > 通知 > 新規作成を開き、通知の作成画面を表示します。 今回使用している項目の入力例： 項目 説明 通知種別 メールやSlack、Teams、LINEなどから選択可能 メール 件名 メールの件名 新しい図書が追加されました アドレス メール送信するアドレス (あとで詳しく) 通知タイミング 作成後や更新後などの通知タイミング 作成後のみ 変更を監視する項目 変更されたかどうかをチェックする項目を指定 既定値 一通りの項目が入力できたら追加ボタンを押します。 アドレスの指定方法 初めてみた時にアドレスに指定できる内容は固定のメールアドレスのみと思ったのですが、ドキュメントを読んでみると色々なバリエーションで指定できるようです。 基本的な記述方法は、このようなフォーマットになっており、複数件まとめて書くときはカンマ(,)区切りにします。 example＠example.com, [担当者], [内容] パターン 説明 設定例 メールアドレス メーリングリストなどを直接指定 example@example.com 関係者 レコードの作成者、更新者、管理者、担当者のいずれかに該当するメールアドレスを指定 [RelatedUsers] 個別指定 レコードの作成者、更新者、管理者、担当者を指定 [管理者]、[担当者]など ユーザID ユーザに割り当てられているIDを指定 [User1] 組織ID 組織IDを指定。組織に所属しているユーザ全員に通知 [Dept1]

前回のVol.2でワークフロー機能を取り入れて、より図書管理みたいなことができるようになりました。 さらに使い勝手のいいものを作ろうとすると避けては通れないのが、スクリプト機能ですね。スクリプト機能を活用することで標準機能では提供されていない独自の機能を追加してより使いやすいPleasanterを作ることもできます。 devops-blog.virtualtech.jp スクリプトとは？ スクリプトは、標準機能では実現できない操作を実現できるようにするために独自でプログラムを書いて拡張する開発者向けツールです。非エンジニアからすると難易度が高くなります。スクリプトでは、JavaScriptを使って記述するため、JavaScriptやフロントエンド系の開発したことがある方にとっては、そこまで学習コストが高くなく扱えます。むしろ、フロントエンド系の知識やテクニックが大活躍するかもしれませんね。 pleasanter.org スクリプトの種類 スクリプトは、Pleasanterの画面上ではフロントエンド向けの処理を書く部分を差しますが、少し広い意味でのスクリプトから学んでみます。 既にWebアプリケーションの基本について理解されている方にとっては難しくない話だと思いますが、知らない方向けにフロントエンドとバックエンドで処理を実行するときの注意点を簡単に説明します。 フロントエンド(Pleasanter: スクリプト、独自実装) ブラウザからローカルリソースへのアクセスや画面の入力項目への操作(値の取得や設定など)ができる 重い処理を書くとクライアント側のマシンスペックやネットワーク環境影響されブラウザ動作が重くなりやすい アプリケーションエラーが発生したとしても該当のスクリプトだけが実行できなくなる ブラウザの開発者ツールからソースコードの閲覧が可能 バックエンド(Pleasanter: サーバースクリプト) クレデンシャル情報を隠すことができる 外部システムとの連携処理に適している アプリケーションエラーが発生した場合に作成や保存など特定の機能が使えなくなる Pleasanterのスクリプトの種類を見てみましょう。 スクリプト: フロントエンド向けのスクリプトで画面描画時に実行される サーバースクリプト: バックエンド向けのスクリプトで作成や保存ボタンを押した際にバックエンドで実行される 独自実装(HTMLタブ): フロントエンド向け。拡張HTMLのところで<script>タグを用いて定義でき、独自ボタンとの組み合わせやプロセスのOnClickなどで利用できる それぞれを上手く使いこなすのは慣れが必要そうですが、どこに書くとどこで作用するのかについては理解できました。 今回やりたいこと 再び図書管理の話に戻りましょう。今回やりたいことについて整理ました。 新規作成時にISBNを入力して書籍情報取得ボタンをクリックしたら、外部APIを使って書籍情報を取得 取得した書籍情報から書籍名などを取得し、入力項目に設定する 作ってみる では、実際に作ってみます。どこで作ってみようかとあれこれ考えながらしばらく試していました。 最初に拡張HTML + 独自実装(HTMLタブ)で入力フォームの横にボタンを置いて作ってみようと画像みたいなイメージで作ってみました。 画面サイズを変えた時に思ったような場所に要素が表示されなかったり、レイアウトが崩れてしまったりするのでCSSのテクニックが必要そうでした。今回は作り込みたくはなかったので早々に見切りりをつけて次の方法へ。 次に考えたのがプロセスを使って実現する方法です。プロセスには2回目で紹介を省略したOnClickの機能を使うことで、ボタンクリック時に独自関数を実行させることができるみたいです。 各項目で設定している内容はこんな感じです。 項目 説明 値 名称 プロセス名を設定 getBookInfo 表示名 プロセスの表示名を設定。画面に表示されるもの 書籍情報取得 画面種別 プロセスを適用する画面 新規作成 現在の状況 プロセスを表示する状況 *(すべて) 変更後の状況 プロセス実行後に変更する状況 *(変更しない) 説明 プロセスの説明 (お好みで) ツールチップ ボタンにマウスオーバーした際に表示される説明 (お好みで) OnClick 実行させたい処理※1 getBookInfo(); アクション種別 保存や作成など標準的な操作を指定できる。無しの場合は、標準的な処理を実行しない 無し

前回の記事でテーブルを作って書籍情報を登録できるようになりました。 Pleasanterでは色々なことができるようになるので、次のステップとして貸出管理機能を追加してみます。 devops-blog.virtualtech.jp プロセスとは？ Pleasanterを使いこなしている方から「プロセス」を使って！とヒントを頂いたので、プロセスについて学んでみましょう。 プロセスは、よくあるいい方をすると稟議申請等に使う承認ワークフロー機能です。状況による制御機能と組み合わせることで項目の表示/非表示や読取専用などの細かい制御もできます。 pleasanter.org 動かしてみる テーブルに関するあれこれは左端にあるナビゲーションメニュー > 管理 > テーブルの管理から表示します。少し画面レイアウトにも慣れてきましたね。 テーブルの管理ページが開けたら、タブの一覧からプロセスを選択します。今は何も登録していないので空っぽです。 一覧表の左上あたりの新規作成ボタンをクリックします。 プロセスの設定画面が表示されます。いろいろと設定項目はありますが、全般のみを変更してみて動きを確認します。 どんな項目がどんな役割か全くわからない状態だとどこを変更していいのか分からなかったので、ドキュメントを読みつつ変更してみる項目を決めてみました。 項目名 説明 設定例 名称 必須項目。内部的な名称。 貸出 表示名 実際に画面に表示される名称。 借りる 画面種別 新規作成と編集から選択可能。(アクション種別が追加したボタンのみ) 編集 現在の状況 プロセス管理対象とするステータス *(すべて) 変更後の状況 プロセス処理後に更新するステータス *(すべて) ツールチップ マウスカーソルを合わせた際に表示されるもの 図書を借りる申請 確認メッセージ ボタンを押した後に表示される確認ダイアログ 借りたい図書は本棚から手元にありますか？ 成功メッセージ プロセス処理後に表示されるメッセージ 貸出申請しました 実行種別 プロセス機能を実行する方法設定 追加したボタン アクション種別 プロセス機能で追加されたボタンのアクション種別を設定 保存 これらの項目をすべて設定したら、保存ボタンを押します。 何もなかったところに、先ほど作成したプロセスが追加されました。一覧画面の下にある更新ボタンを押します。これで先ほど追加したプロセスが反映されます。 トップ > 図書管理 > (任意のレコード)にアクセスして編集画面を表示します。すると先ほど追加した借りるボタンが表示されます。 ボタンの部分を拡大するとこんな感じです。 ツールチップを知らない方にとっては何？と思うかもしれませんが、ボタンにマウスカーソルを合わせた際に表示されるものです。普段何気なく使っているけど、名前で言われるとピンのこない名前ですね。 他の項目も順に確認します。まずは、確認ダイアログです。 次に、サクセスメッセージ。 今回は、特に複雑なことはやってないので、通常の保存ボタンと同じような処理が実行されて終了します。 だいぶ、プロセス機能の雰囲気が掴めました。 貸出管理 今回やろうとしている図書管理に話を戻します。真面目に整理しようとすると色々と要件が出てきてブログとしては分かりにくくなりそうなので、ステータスに応じた制御くらいで留めておきます。 要件1: ステータスは、貸出可能、申請中、貸出中の3種類 要件2: 貸出可能では、借りるボタンが表示され、ボタンを押すとステータスが申請中に変更される 要件3: 申請中では、アクセス権限が付与された人のみに承認ボタンが表示され、ボタンを押すとステータスが貸出中に変更される 要件4: 貸出中では、返すボタンが表示され、ボタンを押すとステータスが貸出可能に変更される 用件が整理できたらプロセスを組む前にステータスを整えて、要件1を満たしましょう。1回目の記事で作った時に状況のステータス一覧をデフォルトのままにしていたので、要件1に合うように変更します。