その1みなさま、こんにちは!神戸は昨日、一昨日と少し涼しくなりましたが、まだまだ残暑は続くようです(汗さてひとつ宣伝です。第三回大阪研究会が開催されます。詳しくは上記リンク先をご確認ください。今回は東京からIBMチャンピオンを招待してのセッションも予定されておりますので、ぜひこのチャンスをお見逃しなく!!また会員外の方でも見学が可能です。コンソーシアム事務局へご連絡ください。前回まででスクリプトを使用せず、ノーツクライアントおよびWeb画面でのアプリケーションの作成をご紹介しましたが、弊社ではXpagesモバイルコントロールを使用した、スマホ向けの画面をよく使用しておりますので、今回からはそちらをご紹介させて頂きます。現在までのページをiPhoneで表示した場合、以下のような画面になります。こちらを「NotesワークフローアプリケーションをXPagesでモバイル化するチュートリアル」に従い、モバイルコントロールでリメイクしてみましょう。ついては、上記チュートリアルに従ってください。それではモバイル用のXPageを作成します。「新規XPageの作成」をクリックし、以下の設定を行いOKをクリックします。m_mobile開いたページに、コントロールの「モバイル」から、「単一ページアプリケーション」をドラッグ&ドロップします。続いて、「アプリケーションページ」を先の単一ページアプリケーションのファセット(緑の●)に配置します。アプリケーションページの「すべてのプロパティ」を開き、以下設定を行います。viewpage次に単一ページアプリケーションの「すべてのプロパティ」を開き、以下設定を行います。viewpage続いて、コントロールより「ページ見出し」をアプリケーションページのファセットに配置します。※チュートリアルでは、単一ページアプリケーションのファセットと記載されていますが、正しくはアプリケーションページのファセットになります。続いてページ見出しの「すべてのプロパティ」を以下のように設定します。一覧それではブラウザ起動時の設定を以下に変更し、iPhoneでプリビューしてみましょう。URLは、http://サーバー名/(ディレクトリ名/)ファイル名になります。m_mobile正しく設定できていれば、以下のように表示されるはずです。続きまして日付順のビューを追加します。「拡張ライブラリ」から「データビュー」を選択し、先のページ見出しの右横に配置します。データビューのデータソースの選択ダイアログが開きますので、以下設定しOKします。byDateアウトラインで「ページ見出し」と「デービュー」が同じ階層にあることを確認します。続いてビューとして表示する内容を設定します。チュートリアルではカテゴリ別ビューを作成してありますが、今回は日付順のビューを作成します。データビューの「すべてのプロパティ」を開き、「形式」内「summaryColumn」を選択すると「+」が表示されますので、こちらをクリックし、以下設定を行います。created同様に「extraColumns」を選択し、「+」をクリックし、以下設定を行います。Dsp_Applier続いて出来上がった「viewExraCulumn[0]」の右に表示される「+」をクリックし、列を追加します。新たに「viewExraCulumn[0]」が追加され、先のデータは「viewExraCulumn[1]」に格納されます。「viewExraCulumn[0]」に以下設定を行います。Title以上の設定にて、iPhoneのプリビューでは以下のように表示されます。それらしくなってきましたね。それでは少し各行のスタイルを変更してみましょう。日付のフォントサイズです。「summaryColumn」の項目を開き、「style」項目をクリックすると、下記のようなスタイルエディタが表示されますので、こちらをクリックします。開いたスタイルエディタの「フォント」タブにて以下設定します。※特に指定ではありませんので、お好みで変更してください。同様に「extraColumns」内、ふたつの「viewExtraColumn」についても「style」を変更します。私の例では、以下のような設定しました。以上でプレビューすると、下記のように変化します。設定は、ぜひいろいろと触ってみてください。長くなりますが、もう少し続けます。続いてビューページを初期値として4行表示し、「さらに表示・・・」をタップするごとに4行表示するページャーを追加します。データビューを選択し、「すべてのプロパティ」、「データ」内に以下設定を加えます。4次に「さらに表示・・・」ボタンを追加します。「コアコントロール」内の「リンク」を「pagerBottom」というファセットへ配置します。「リンク」の「すべてのプロパティ」を開き、「基本」内へ下記設定を行います。※チュートリアルの画像では「value」となっていますが、「text」が正解です。次にリンクの設定を行いますが、たいへん申し訳ありませんが、本来の目的である「@関数だけ」では実現できないため、スクリプトを使用致します。先と同じ「基本」タブ内「rendered」を選択し、右側の◆アイコンから「値の計算」をクリックします。スクリプトエディタが起動しますので、以下スクリプトを入力もしくはコピペしてください。スクリプトの意味としては、ビューの行数が4行以上の場合に表示させるというものです。false;続いて「リンク」がタップされた際のイベントを追加します。「リンク」を選択した状態で、「イベント」タブをクリックします。次に「クライアント」タブを選択し、「アクションの追加」をクリックします。「シンプルアクションの追加」ダイアログが表示されますので、以下設定を行います。(追加する行数)以上、iPhoneでプリビューすると、初期画面は以下となります。「さらに表示・・・」をタップすると、4行追加されます。以上、今回は1ヶ所のみスクリプトを記述しましたが、かなり簡単にモバイルのビューページが出来たのではないでしょうか。次回はフォームのページを追加し、ビューとフォームを接続致します。Hagihara当ブログの記事は、私個人の経験談を中心とした見解・判断に基づく内容となります。記載内容や、ダウンロードコンテンツ等については、恐れ入りますが利用者様の自己責任でお願い致します。