GitBookメニュー一覧→サブメニューを展開するようなユーザインタフェースを実現する方法はじめにこれまで作ってきたようなQiitaのビューワーアプリケーションのような場合に、メニュー一覧から詳細情報に移る場合には、画面遷移させるのが一般的かと思います。状況によって、画面遷移させずにメニュー一覧からサブメニューを展開するようなユーザインタフェースを実現したい場合も出てくるかと思います。起動時に最小限のメニューを表示しておき、タグから検索という箇所をタッチするとサブメニューのタグ一覧が展開されるようなイメージです。実装におけるポイント先ほどの章で紹介したTableViewSectionで投稿情報別に区切る方法をベースに考えます。メニュー一覧の表示方法としてメニュー一覧にTableViewSectionのheaderTitleを設定するTableViewSectionのHeaderViewにカスタマイズしたものを設定するという2つがあります。前者を採用すると、以下のように領域がかなり小さくなってしまい、使い勝手があまり良いとはいえないものになります。後者のTableViewSectionのHeaderViewにカスタマイズしたものを設定方法を利用することで、メニューの幅の部分も好みのサイズに設定可能になるため、この方法を採用します。実装これまで作ってきたアプリケーションをベースにして、それぞれのファイルを実装してきます。app.jsここはそのまま流用できるのと、説明するべき箇所もないのでコードの記載だけにとどめます。win.open();style.jsここは大きな変更はないのですがタグ一覧のメニューを生成する際に利用するタグのラベルタグのアイコン画像に対応する情報TableViewSectionのカスタムビューに適用するViewとLabelの設定情報について追記してます。}};qiita.js従来あったgetItems()という関数内でアクセスする先のURLをhttps://qiita.com/api/v1/itemsからhttps://qiita.com/api/v1/tagsに変更することでタグ一覧情報を取得する処理が実装できます。外部から呼び出せる関数getItems()getTags()qiita.jsの内部だけで参照できる関数requestToQiitaAPI()という形で実装をしてます。win;};TableViewSectionのカスタムヘッダーに設定したTi.UI.Labelにイベントリスナーを割り当てます。上記割り当てたイベントリスナーで今回はタグから検索がタッチされた時のみイベントを発火させたいため、e.source.textの値をチェックした上で処理を実施qiita.getTags()関数を利用して、QiitaのWebAPIからタグ一覧情報を取得出来て変数tagsに格納されているため、その変数tagsを後述するcreateTagSection()に引き渡して、タグ一覧情報を生成するTi.UI.TablViewのinsertSectionAfter()を利用して、タグから検索の行の後に、タグ一覧の情報を挿入するQiitaのWebAPIから取得したタグの件数(デフォルトでは20件)分、ループ処理して、タグの画像とタグのタイトル名を配置したTableViewRowを生成しつつ、そのTableViewRowをタグ一覧用に表示するためのTableViewSectionに順番に追加していく。