テクニカルコラムの今回は「【補完テクニック】アプリヘッダを隠す」です。【補完テクニック】は、Buddyが標準的に提供している機能だけでは実現できない場合に対応するテクニックについてご紹介します。
Buddyで作成したアプリを実行すると、画面の上部にヘッダとして、Buddyロゴ、アプリアイコン、アプリ名、お知らせアイコン、設定アイコン（パスワード変更）、マニュアルアイコン、ログアウトアイコン、が並んだ青い帯が表示されます。
このヘッダの色を変えたいとか、ヘッダそのものを隠してしまいたい、という場合は、Buddyの標準機能「スクリーンテーマ」で可能です。アプリの設計画面で「スクリーンテーマ編集」を選び、クラスの一覧から「APP_HEADER」を選びます。「追加」ボタンをクリックして開くダイアログで「背景色」や「要素の表示方法」にチェックを入れて「追加」ボタンをクリックします。そうすると「属性」に選んだ属性が現れます。背景色であれば「選択」ボタンをクリックして色を選びます。要素の表示方法であれば選択肢から選びますが、ヘッダそのものを表示しないようにしたければ「none」を選びます。値をセットしたら「OK」ボタンで戻り、赤くなっている保存ボタンをクリックして保存し、アプリを生成すると、実行するアプリに設定したものが反映します。
※上記の操作方法は2021年10月に提供を開始した、Buddy2での方法です。旧バージョンであるBuddy1よりも使いやすく、スクリーンテーマで設定できるスタイルも増えているので、ぜひBuddy2をお使いください。Buddy1とBuddy2の切替は画面上部ヘッダの右側にある「1」「2」の数字のボタンでできます。
さて、上記の方法でアプリヘッダを隠すことはできるのですが、この方法ではそのアプリの全ての画面（スクリーン）についてヘッダがなくなります。いくつかあるスクリーンのうちの特定のものについてだけヘッダを隠したい、という場合はどうすれば良いかが今回の内容の本題です。
それには、スクリーンによってアプリヘッダの表示有無を決めるCSSのスタイルをセットしたり外したり、ということをしなければなりません。それをおこなうためのJavascriptのライブラリファイルが noappheader.js です。← このファイル名部分をクリックしてダウンロードしてください。
その noappheader.js を、アプリの files/javascripts/ フォルダに入れます。アプリの設計画面で「アプリメニュー」を選び、管理メニューから「ファイル管理」を選びます。開いたダイアログで、「javascripts」フォルダをクリックし、noappheader.js をドロップしてアップロードします。
これによって、hideAppHeader() と showAppHeader() という二つの関数が使えるようになります。そして、アプリヘッダを隠したいスクリーンのスクリプトで、onLoad で hideAppHeader() を、onUnload で showAppHeader() を実行するようにすればOKです。
var events = {
onLoad: function(){
hideAppHeader();
},
onUnload: function(){
showAppHeader();
},
}
なお、アプリヘッダがあれば、ヘッダのアプリ名部分をクリックすることでアプリのトップページとなっているスクリーンに戻ることができますが、ヘッダを隠してしまうとそれができなくなります。適宜各スクリーンにスクリーン間の遷移ボタンを設けるなどしてください。
（2021/12/7 中島）
