ページビューの合計

2016年12月6日火曜日

【第10回】ノーツアプリ作成~メニューとフレームセットの作成~

皆様、こんにちは!!

気付けば12月。
さらに言うと、しばらく本題から外れてしまっており、危うく1ヶ月放置するところでした。

が・・・

まずは宣伝させてください。

12月21日(水)午後に、【Notes/Domino on IBM Cloud テクニカルセミナー】が開催されます。

我が大阪地区でもIBM様大阪事業所にてパブリックビューイングが予定されておます。
加えて終了後は、ask the ノーツコンソーシアムと銘打った、何でもお悩み相談会も行われます。
このイベントはコンソーシアム会員以外でも参加可能ですので、ぜひご検討ください。


さて本題ですが、前回まででおおよそのフォームとビューが使えるようになりましたので、これらをつなぐ要素としてフレームセットを作成し、左側にはビューを行き来できるようメニューを作成します。


まずはメニュー部分から作成します。
早速ですが、「名刺管理」をデザイナーで開き、「共有要素」内の「アウトライン」をダブリクックします。
上部の【新規アウトライン】ボタンをクリックし、アウトラインを作成します。

 名前: メニュー

 別名: menu

とします。




続いて【新規エントリ】ボタンをクリックし、下記のように設定します。


 ラベル: 氏名カナ順

 種類:名前付き設計要素、ビュー
 値: 氏名カナ順
 フレーム: body(こちらの後のフレームのプロパティにも設定しますので、必須ではありません)



同様に「カテゴリ別」も作成してください。

下記のように表示されるはずです。



以上でアウトラインができましたので、保存して閉じます。

続いて先のアウトラインを埋めたページを作成します。

ページをダブルクリックし、【新規ページ】ボタンをクリックします。

 名前: メニュー
 別名: menu

とし、OKします。



新規のページが開きますので、【作成】-【埋め込み設計要素】-【アウトライン】をクリックします。


埋め込みアウトラインの挿入ダイアログが表示されますので、「メニュー」を選択し、OKします。

以上でページにアウトラインが埋め込まれます。



ページを保存して閉じます。

以上でアプリケーションを組み上げる要素が揃いましたので、フレームセットを作成し、配置していきます。

フレームセットをダブルクリックし、【新規フレームセット】ボタンをクリックします。

名前は自由ですが、今回は

 名前: メイン
 別名: main
 フレーム数:2(左メニュー)

としてOKします。


フレームセットが作成されましたので、それぞれのフレームのプロパティを設定します。


まずは左側(メニュー側)のフレームを右クリックし、【フレームのプロパティを開き、下記内容を設定します。

名前: menu
種類: 名前付き設計要素、ページ
値: メニュー
フレーム内のリンクのデフォルト対象; body



続いて右側のフレームのプロパティを下記のように設定します。

 名前: body
 種類: 名前付き設計要素、ビュー
 値: 氏名カナ順


以上で設定完了しましたので、ノーツでプリビューしてみます。


左側のメニューでビューが切り替えられることを確認してください。


さて以上でフレームセットは完成ですが、これだけではユーザーはすぐに利用できません。
アプリケーション起動時に、このフレームセットを開くように設定する必要があります。

【アプリケーション構成】内の【アプリケーションのプロパティ】を開きます。
左から2番目の【起動】タブを選択し、IBM Notesクライアントの起動について、

起動: 指定したフレームセットを開く
フレームセット: メイン

とし、保存して閉じます。

以上で、ユーザーがアプリケーションを開いた際に、メインフレームセットが開くようになります。


基礎アプリケーションの作成としては以上でひとまず完成しましたが、ちょっとちょっと使いにくい部分があるかと思いますので、次回以降で少し紹介させて頂きます。

2016年11月24日木曜日

標準ディスカッションテンプレートをカスタマイズしてみる。

皆様、こんにちは!!

今回はメニューやフレームをと記載しましたが、ちょうど社内で使用しているアプリケーションのカスタマイズ案件が入りましたので、こちらを先に掲載させて頂きます。

今回の案件としては、R9の標準ディスカッションテンプレート「StdR9Discussion/ja」に進捗という項目を追加し、進捗別のビューも加えるというものです。

まず対象となるアプリケーションをデザイナーで開きます。
そのまま要素を開こうとすると、下記のようなダイアログが表示され、設計がテンプレートから継承されていることがわかります。
まずこの継承を外す必要があります。



アプリケーションのプロパティを開き([ファイル]-[アプリケーション]-[プロパティ]もしくはナビゲータ内、[アプリケーション構成]-[アプリケーションのプロパティ])、設計タブを開きます。

「設計のプロパティ」の「継承」にある
「テンプレートから設計を引き継ぐ」のチェックを外しプロパティ画面を変更を保存して終了します。



以上でこのアプリケーションはテンプレートを継承しなくなり、自由に設計を変更することができるようになります。

それではまずはフォームを修正します。
フォーム「メイントピック」を開きます。
今回は「カテゴリ」の下に「進捗」という項目を追加します。



カテゴリ行にカーソルがある状態で、[表]-[行の追加]をクリックします。
続いて左の列にタイトルである「進捗:」と入力し、右の列に「status」というダイアログフィールドを作成します。



続いてフィールドの選択肢ですが、今回は進捗ということで、以下を設定しました。
 1. 発案
 2. 検討中
 3. 実施
 4. 完了
 9. 却下

またデフォルト値に"1. 発案"を設定します。



一旦以上でフォームを保存して閉じ、現在の文書を編集し、「進捗」を記入しておきます。

つづいて「進捗別|status」という新規ビューを作成します。
今回はカテゴリ別のビューのさらに上位に進捗を追加しますので、「コピー元」に「カテゴリ別」を選択します。



一番左に列を追加し、
 フィールド:status
 列幅:1
 展開できる行に三角アイコンを表示する:チェック
 ソート:昇順、カテゴリ別

を設定し、保存します。



次にこのビューを選択できるように表示するための設定を行います。

設計を見ると、IBM Notes クライアントで開いた際には、「MainFrameset」というフレームセットが開くようになっています。



それではMainFramesetを見てみると、この左側のメニュー部分に「進捗別」が追加される必要があります。
フレームのプロパティを確認すると、「Outline Page」というページが表示されています。



ということで、Outline Pageを見ると、「DiscOutline」というアウトラインが埋め込まれていることがわかります。



それではこの「DiscOutline」に「進捗別」を追加してみましょう。

ユーザー名の別名別の下に「新規エントリ」を追加し、
 ラベル: 進捗別
 種類: 名前付き設計要素/ビュー
 値: 進捗別

を設定し、保存して閉じます。

以上で、IBM Notesでアプリケーションを開くと、メニューには「進捗別」が追加され



そちらをクリックすると、「進捗別ビュー」が表示できるようになりました。



本来であれば、WEB用の修正なども行うべきではありますが、当アプリケーションについてはNotesクライアントからのみの利用を想定しておりますので、こちらで完了とさせて頂きます。

内容不十分な点や、玄人の方から見ると、まだまだな点もあるかと思いますが、まずは""初歩レベルのカスタマイズということで、ご了承ください。

もし今後も1カテゴリを追加したアプリケーションを作成することがあるようでしたら、こちらを「テンプレート化」しておくと、次回から簡単に新規アプリケーションが立ち上げられます。
「テンプレート化」については、改めて掲載させていただきます。

なお過去の記事でまだ触れていない「フレーム」や「フレームセット」、「アウトライン」という表現がございますが、「名刺管理」では次回以降に要素を追加致しますので、ご了承ください。

先般のオープンセミナーでも少し述べましたが、この作業(約30分)を行うだけで、アプリケーションの利用価値は大きく変化します。
ぜひお試しください。


ということで、今回飛ばしました名刺管理の続きは、次回実施予定です。

2016年11月19日土曜日

ノーツ・しこく・フェスタ 2016(.nsf 2016) レポ

皆様、こんにちは!!
梅の萩原です!! 

またまた前回の告知とは異なりますが、昨日行われましたノーツ・しこく・フェスタ 2016に関するレポートを書かせていただきます。 そもそもFBに簡単に書こうと考えていたのですが、ちょっと勿体無いなぁと欲が出てしまったというのが本音です(汗

そもそも神戸からなぜ高松まで出かけたのかから・・・。


  1. 豪華なスピーカーが勢揃い!!
  2. 内容が濃い!!
  3. 高松なんてしばらく行ってない
  4. 神戸からだと、交通費が5000円!
  5. うどんが食いたい
  6. 去年のFBレポが楽しすぎ!!
先週に東京のオープンセミナーに会社から参加させていただきましたので、今回は休暇+自腹での参加ですが・・・。
とにかく6項目すべてに大満足でした。

確かに関西からですとそれほど離れていないということもあるのですが、全く「アウェイ感」がなく、地元の方々ともすぐに打ち解けて情報交換ができました。

セミナーの内容ですが、IBM H様のワークショップでスタート!
私は特に待ち合わせたわけではありませんが、大阪研のh様と一緒に座らせて頂きました。

で・・・最初のお題!

「30秒で右隣の人の似顔絵を描く」・・・・!!!!

なんとh様の似顔絵を描くことに・・・。

そもそも絵心のない私が、尊敬しているh様の似顔絵なんて・・・。
って、30秒に急かされてかなり失礼なしあがりになってしまいました。

もっとも絵の上手下手は全く関係ないのは予想されたのですが・・・。
しかしながらこの30秒は初めての方々との敷居を下げてくれました。

午後からもAI、IoTを中心に本当に充実した時間となりました。
bluemixのメンテナンスがあり、一部トラブルもありましたが、それも含めて大満足な内容でした。

詳しくは・・・。
できれば発表資料を公開いただけると嬉しい限りです。

最後にもH様が講演頂いたのですが、ラストに「2%」の話し。

このようなセミナーで得た情報も、いざ勤務に戻ると2%しか実施されないとか。

確かに私自身、しばらく前まではそうだったのですが、先般の大阪研でP様が付箋をメモ代わりにしているという話を聞き、それ以降3色の付箋を持ち歩いてメモに使っています。
色は優先度を直感で分けています。

会社にもどり、すべての付箋を机に並べて、レポートの作成と試したいことの確認を行ってます。
もちろんすべてはできないのは事実ですが、できなくてもできていないものとしてリストして残しています。
なんとか2%に残れてるのかな。

さて終了後の懇親会。
近くのお店だったのですが、まず最初に驚いたのが、この費用で飲み放題のビールがプレミアムモ○ツ!!
料理も地元料理なども織り交ぜられており、大満足!!

料理だけでなく、多くの方々との交流や情報交換はオフィシャルではできない、貴重な時間となりました。
もちろん雰囲気もサイコー。

来年はじゃんけん大会でconnect招待とか・・・!
みなさま、今から予定空けておいてくださいね。(もっとも日程決まってませんが)

ちなみに個人的には0泊3日の弾丸ツアーとなりました。
木曜の23時過ぎに自宅を出発し、金曜1:00のジャンボフェリーで高松入り。
Macで朝食と朝のルーチン業務を行い、参加。
お昼に念願のうどん。
懇親会終了後、駅前の売店で自宅と職場向けにお土産・・・
職場に醤油豆はどうかと思い、結局「一六タルト」に・・・!!?
その後、土曜1:00のフェリーで自宅には6:15着となりました。

さすがにそのまま昼まで寝てましたが・・・。

※上記激安ルートが「梅コース」です。ちなみに「竹コース」は高速バス、「松コース」はJRです

正直なところ、梅コースはお薦めしませんが、来年は梅コース+現地一泊で土曜のうどんツアー参加を企んでおります。

以上、まとまりのない文章にて失礼致しました。
ブログを書くつもりもなかったので、写真も皆無なのですが、他の皆様が公開されておりますFB等で雰囲気を見ていただければ幸いです。

とにかく本当に参加してよかった。今まで色々と参加していますが、ダントツ一番のイベントでした!!

来年も楽しみにしてます!

2016年11月15日火曜日

【第9回】ノーツアプリ作成~アクションの作成~

皆様、こんにちは!!
先週はせっかくのオープンセミナーをレポートと考えておりましたが、ひとりでアップアップしてしまい、十分な報告ができず、申し訳ありませんでした。

今週のノーツ・しこく・フェスタ 2016 - 人工知能(AI) × IoT × クラウド活用術は、余裕をもってレポートできればいいのですが、やはり楽しみすぎて夢中になってしまうような気がしてなりません(汗

さて本題のノーツアプリ作成ですが、今回は【アクション】を作成してみたいと思います。

【アクション】とは文字通り、何かを実行するような機能になります。

ノーツの場合、メニューバーの【アクション】や、【アクションバー】と呼ばれる上部のスペースにボタンを配置し、実行することが可能です。

そもそもデフォルトで【システムアクション】と呼ばれる主なアクションは準備されており、呼び出すと下記のように表示されます。


もちろんこちらを使ってもいいのですが、今回はあえて主な【アクション】を作成してみたいと思います。

なおアクションの作成する場所ですが、フォームやビューの「アクションペイン」と呼ばれる下記


に直接作成することも可能ですが(表示されていない場合は、[表示]-[アクションペイン]をクリック)、主なアクションは複数のフォームやビューで使用されるため、【共有アクション】というものを作成し、必要な要素に呼び出すことにします。

まずナビゲーター内の[コード]-[共有アクション]を開きます。


上部の【新規共有アクション】ボタンをクリックし、開いたダイアログの名前に【新規作成】と入力し、【OK】してください。


中央部の式には

@Command([Compose];"mainForm")

と記載します。
式の内容としては、「メインフォーム」で新規文書を作成するというものになります。


続いて【共有アクションのプロパティ】を開き表示の
・アクションバーにアクションを含む
・アクションメニューにアクションを含む

がチェックされていることを確認します。

今回はアイコンも設定しますので、アイコンで【Notes】を選択し、中央部分で好みのアイコンを選択してください。


同じように【印刷】
@Command([FilePrint])


【終了】
@Command([FileCloseWindow])


【編集】
@Command([EditDocument])


【戻る】・・・コマンド式は先の【終了】と同じ
@Command([FileCloseWindow])


【保存】
@Command([FileSave]);
@Command([FileCloseWindow])

※コマンド式を続ける場合は、";"で区切り、改行を入れると見やすくなります。



以上を作成します。

以下のように共有アクションが完成しました。



続いて作成した共有アクションをフォームとビューに埋め込みます。

まず「メインフォーム」を開き、アクションペイン上で右クリックし、「共有アクションの挿入」をクリックします。

以下のようなダイアログが表示されますので、【印刷】【編集】【保存】【戻る】を選択し、[挿入]-[終了]とクリックしてください。


以下のように、指定したアクションがアクションペインに表示されます。


フォームを保存して閉じ、続いて「カテゴリ別」ビューにもアクションを埋め込みます。
埋め込むアクションは、【印刷】【終了】【新規作成】【編集】です。
ビューを保存して閉じてください。

同様に「氏名カナ順」にも【印刷】【終了】【新規作成】【編集】を埋め込んでください。

それではプレビューで動きを確認してみましょう。

「氏名カナ順」をIBM Notesでプリビューしてみます。

下記のように上部にアクションが表示されるようになりました。
※アクションメニュー内にも同じアクションが存在することを確認してください。


それでは各ボタンの動きを確認してみましょう。

【新規作成】ボタンでは「メインメニュー」が新規作成モードで開きます。
【印刷】ボタンでは、「印刷」ダイアログが表示。
【終了】ボタンで、アプリケーションが閉じます。
【編集】ボタンについては、▲で畳まれいる文書を開き、1文書が選択された状態でクリックすると、選択された文書が編集可能状態で開きます。

フォームの【戻る】ボタンは前のビュー画面に戻ります。
【保存】ボタンは新規作成したり、編集した内容を保存し、前のビュー画面に戻ります。


以上、少し長くなりましたが、今回は主なアクションを【共有アクション】として作成し、フォームやビューに呼び出す設定を行ってみました。

アクションについては、まだまださまざまな機能が実装可能です。
また見栄えや表示設定なども考慮すべきですので、後日改めて説明させて頂きます。


さて次回は、ある程度形ができてきましたので、アウトラインを使ったメニューや、そのメニューを使ったフレームセットでレイアウトを整えてみます。


長文にお付き合い、ありがとうございました!!

2016年11月11日金曜日

ノーツコンソーシアム オープンセミナー(2016/11/9)

皆様、こんにちは!!

11月に入り、さまざまなイベントで本業がおろそかになりそうな勢いです。

さて今回は9日に開催されましたノーツコンソーシアム オープンセミナーについてのレポートをと予定していたのですが、完全に舞い上がってしまい、写真すら撮り忘れた次第です。

・・・申し訳ありません。


ということで、関連するサイト等へのリンクを掲載させて頂きます。

まず資料公開サイトですが、

http://www.notescons.gr.jp/confapps/merged.nsf/

ログインが必要となりますので、ご注意ください。


ソーシャルのリンクです。
当日は#notescons を使用した投稿が呼びかけられておりました。

FB
https://www.facebook.com/hashtag/notescons?source=feed_text&story_id=1287791077910999

Twitter
https://twitter.com/search?q=%23notescons&src=typd


さて個人的な感想ですが、一番インパクトあったのが、サイネージです。
LIVENESS Rooms with OnTime による会議室入り口の案内には驚きでした。


弊社ではそれほど会議室管理には困っていないのですが、使いたい!!と思う製品でした。

セミナーですが、発表される皆様のノーツへの熱い思いが突き刺さるようなものばかりでした。
今回はハンズオンには参加できませんでしたが、いずれも大盛況だったようです。


終了後の懇親会も、会場の熱気で、暑い暑い。

Notes OK!! の証拠写真もFBにアップされ(すいません、参加者しか理解できないと思います)、今後にも多いに期待されるものとなりました。

当日は神戸まで帰らなければなりませんでしたので、二次会以降は失礼させていただきましたが、会場の熱気のせいで、外の寒いこと!!

とにかく私にとっては収穫の多い1日となりました。

皆様、ほんとうにありがとうございます。


さて本日の午後は大阪研究会+忘年会です。

また来週はノーツ・しこく・フェスタ 2016

まだまだ熱いイベントが続きます!!


さて次回ですが、まだ内容を決めきれておりませんので、現時点では差し控えさて頂きます。
ご了承ください。

※今回の掲載について、リンク等各所承諾を得ずに掲載してあるものがございます。
もし問題ございまたら、至急修正致しますので、ご連絡ください。

2016年10月31日月曜日

【第8回】ノーツアプリ作成~カテゴリビューの作成と、フォームの拡張~

皆様、こんにちは!!

ノーツコンソーシアムオープンセミナーを来週に控え、まだ発表準備ができていない萩原です。
今週はそちらに集中しようかと思ったのですが、来週のほうが厳しいということで、がんばってみます!

さて前回はフォームの体裁を整えましたが、ひとつ簡単に拡張できるフィールド項目の拡張を行ってみたいと思います。

拡張するのは、フィールド【カテゴリ】を選択肢化するというものです。

カテゴリのような項目は、ある程度限られた選択肢として利用されるものであるため、手入力するよりも選択肢として提供することで、ユーザーの利便性を向上することができます。
加えて例えば「カテゴリ」と「カテゴリ」では別のものとして扱われてしまうような事例から回避するためにも有効な手段となります。


それでは早速ですが、【カテゴリ別】というビューを新しく作ってみましょう。

デザイナーのビューを開いて頂き、【新規ビュー】ボタンをクリックします。
ビューの作成ダイアログが開きますので、
・ビュー名に【カテゴリ別|bycategory】と入力します。


新規ビューをいちから作成してもいいのですが、既に【氏名カナ順】というビューがありますので、こちらの設計を元にビューを作成してみます。
【コピーするスタイル】の右にある【コピー元】ボタンをクリックします。

【コピーするスタイル】ダイアログが開きますので、【氏名カナ順】を選択し、【OK】。


さらにビューの作成ダイアログも【OK】してください。



新しく【カテゴリ別】のビューが作成されました。

※デザイナーのビュー一覧で、【氏名かな順ビュー】を選択し、Ctrl+Cでコピーし、同じ位置にCtrl+Vで貼り付け、F2で名前を変更しても同じ結果が得られます。

デザイナーで【カテゴリ別】を開いて頂くと、


【氏名カナ順】と全く同じ設計の状態となっていることがわかります。

今回は新たに1列目に【カテゴリ】を追加します。

1列目選択し、【作成】⇒【列の挿入】をクリックするか、1列目の列タイトルを右クリックし、【列の挿入】をクリックします。

1列目が選択された状態で、下部の【フィールド】から【category】を選択します。


続いて列のプロパティを表示し、
タイトル・・・[空白]
幅・・・1
とし、【展開できる行に三角アイコンを表示する】にチェックします。


続いて【ソート】タブに移動し、
ソート・・・昇順
種類・・・カテゴリ別


を選択します。


ノーツでプレビューすると、


カテゴリ別で内容がソートされていることがわかります。


次に、メインフォームの【category】フィールドの設定を変更します。

メインフォームを開き、【category】フィールドを選択し、プロパティを開きます。
種類を【テキスト】から【ダイアログリスト】に変更します。


続いてひとつ右の「制御」タブを選択し、下記を設定します。
【式で選択肢を設定】
【@DbColumn("":"nocache"; ""; "bycategory"; 1)】



式について、詳しくはノーツのヘルプで【@DbColumn】を見ていただくとして、簡単な意味合いは
@DbColumn(  class  :  cache  ;  server  :  database  ;  view  ;  columnNumber  ) 

cache部分を【nocache】とすることで、キャッシュを使用せずに、現在の選択肢をピックアップします。
viewにカテゴリ別ビュー【bycategory】とし
※ビュー名を"で囲むことに注意
columNumberで抽出する選択肢の列番号である【1】を設定します。

つまりカテゴリ別ビューの1列目の値を取得するということになります。

ノーツでプレビューし、【カテゴリ】フォームの右にある▼をクリックすると、【キーワードの選択】ダイアログが表示され、キーワードとして過去に登録のあるキーワードが表示されます。

このままですと、カテゴリは既存のものしか使用できないため、新規のカテゴリを受け付けるように設定します。

もう一度【category】フィールドの制御タブで、【リストにない値も可】のチェックボックスをONにします。

再度ノーツでプレビューすると、このように下部に「新しいキーワード」が入力できるように変更されました。


今回はひとつ、式(ノーツでは@式[アットマーク式])というものを利用してみましたが、ちょっとした設定で使いやすいデータベースに仕上がることが理解頂けたかと思います。


さて次回は少し息抜きに、ノーツコンソーシアムのオープンセミナーに関して書ければと考えております。

長文にお付き合い、ありがとうございました。

2016年10月24日月曜日

【第7回】ノーツアプリ作成~フォームの調整~

皆様、こんにちは!!

10月も下旬に差し掛かり、そろそろオープンセミナーの準備も詰めなければと焦っております。
そんな中、ノーツ・しこく・フェスタ 2016 - 人工知能(AI) × IoT × クラウド活用術の案内もあり、現在休暇を取って、強行日程での参加をたくらんでおります。

さて前回はノーツのビューを少し見やすく設定してみましたが、今回は手付かずのフォームを触ってみたいと思います。

現在の設定ですと、下記のようにかなり間延びした表示になっています。



それではデザイナーで「メインフォーム」を開いてください。


まずは各行のタイトルの幅が長いので、短くします。

表のプロパティを開きたいので、表の中をクリックすると、ツールバーに【表のプロパティ】アイコンが表示されます。


もしくは表内を右クリックし、【表のプロパティ】をクリックしても同じです。


この表のプロパティにて幅や高さ、色などを設定します。

まず幅ですが、調整したい列(今回は1列目)をクリックし、プロパティの【幅】を3cmの【固定幅】にしてみましょう。


ノーツでプレビューすると、


実に簡単ですよね。

せっかくなので、2列目の設定を確認しておきましょう。
2列目をクリックしていただくと、
※もしプロパティが【表】以外になってしまいましたら、右側の▼をクリックして、【表】を選択してください。


幅は私の端末では【22.373cm】になっています。
こちらはその上の【表】幅の設定として、【マージンに合わせる】・・・余白に合わせる・・・が選択されており、【固定幅】にチェックがされていないため、ディスプレイ幅に合わせた値が自動で設定されます。

つまり表示するディスプレイの余白にあわせて、自動で列幅が変更されます。
※逆に常に幅を固定したい場合は、表の【幅】で【固定幅】を選択することで可能になります。

続いて内容の最重要項目を分かりやすくするため、氏名と会社名の文字サイズを変更します。

まず表の1行目を選択、プロパティを【文字】に切り替えます。
【サイズ】を"14"、【スタイル】に"太字"を選択します。


同様に3行目を選択し、【サイズ】を"12"、【スタイル】に"太字"を選択します。

あわせて行のタイトル列の文字を別の色に変更してみてください。


ノーツでプレビューすると(ノーツ文書を開いた例もあわせてます)


以上、少しの設定で、それなりに見やすいフォームになります。
もちろん色やサイズはお好みで自由に設定頂けます。

さて次回は新しいビューとして、【カテゴリ別】というものを作成します。
またこのカテゴリ別のビューを利用し、フォームのカテゴリをチューンナップします。