テクニカルコラムの今回は「【補完テクニック】アプリヘッダを隠す」です。【補完テクニック】は、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 中島）

今回から「テクニカルコラム」として、Buddyでのアプリ開発にまつわる技術的な話題について書いていきます。内容に順序はなく、ユーザーから寄せられた質問などにもとづいて、開発上で引っかかりやすいポイントや、Buddyの標準的な機能では足らない部分を補うテクニックなどを取り上げます。よろしくお願いいたします。

今回は「【プログラミングの罠】空文字列、null、undefined」です。

「プログラミングの罠」とは、誤りに陥りやすいポイント、というような意味です。Buddyでは基本的にJavascript言語を用い、データベース操作では一部SQL言語の機能を用いますので、JavascriptとSQLでのプログラミングでの注意点ということですね。取り上げるのは、空文字列、null、undefinedというちょっと不思議な存在です。

JavascriptとSQLではちょっと様子が違うので、まずJavascriptの場合を考えます。

まずは空文字列です。Javascriptでは、”” とか ” と書くと空文字列です。”abc” と書けば3文字からなる文字列ですね。でも文字が一つもないのに「文字列」とはこれいかに？日常的な感覚からするとちょっと不思議ですが、プログラミングの世界では空っぽ（長さが0）でも文字列として扱うことにすると便利なので、そうなっています。

次にnullです。nullは「何もない」という意味で、Javascriptでは「値を持たない特殊な状態」のことです。ドイツ語のNullは数値の0（ゼロ）の意味だったりするのでややこしいですが、0とnullは違います。空文字列とも違います。空文字列は「長さ0の文字列という値」、nullは「値を持たない特殊な状態」。うーん…という感じですが、そういうことになっています。プログラミングの中では、0や空文字列と区別してnullがあることは結構重要です。

さて、Javascriptではさらにundefinedというモノがあります。文字通り「未定義」です。変数を定義したが初期値をセットしなかったら、その変数の内容はundefinedです。オブジェクトの存在しないプロパティを読み出すとこれもundefinedです。undefinedがあるのにnullが必要なのか？どう使い分けるのか？という疑問が浮かびますが、とにかくそうなっています。
ちなみに、null + 0 は 0 になりますが、undefined + 0 は NaN というこれまた特殊なモノになります。さらにややこしいですね。undefinedについてはいろいろと突っ込みどころがあるのですが、今回はスルーします。

次にデータベースを操作する言語であるSQLではどうなっているかを見てみましょう。

空文字列はSQLにもあります。SQLでは文字列はシングルクォーテーションで囲むので、” ですね。

nullもあります。しかし、SQLにはundefinedはありません。テーブルのカラムに何も値をセットしていない状態は null です。
ちなみに、SQLでは null + 0 は 0 ではなく null です。「値のない状態」に対して演算を行うことはできず結果もまた「値のない状態」になる、という考え方ですね。比較するときも「… = null」ではダメで「… is null」という特殊な書き方をする必要があります。うっかり「… = null」と書いてもエラーにはならず、比較結果がnullになってしまうというところが罠ですね。

以上はJavascriptとSQLについての一般的なことでした。次にBuddyでのプログラミング、特にデータベース操作で注意すべき点を書いておきます。

例えば「Item」というテーブルに「ID」「name」「price」のカラムがあるとします。IDとpriceは数値型、nameは文字列型です。IDが1のレコードの内容を更新するには、例えば次のように書きます。

	this.tables.Item.updateRecord({
		where: {ID: 1},
		data: {name: '商品A', price: 10000}
	}, function(error, result) {
		if(error) return console.log(error.response.text);
	});

何も問題はありません。nameに’商品A’、priceに10000がセットされます。

では、

		data: {price: 20000}

としたらどうなるでしょうか？
結果は、nameは変わらずそのままで、priceに20000がセットされます。updateRecord()の場合、dataで指定しなかったカラムは更新対象にならないということですね。

次にこんなことをやってみましょう。

		data: {name: undefined, price: 30000}

としたらどうなるでしょうか？
この場合の結果も、nameは変わらずそのままで、priceに30000がセットされます。undefinedだと、そもそも指定しなかった場合と同様の動作になります。

nullをセットしてみましょう。

		data: {name: null, price: null}

としたらどうなるでしょうか？
結果はもちろん、nameもpriceもnullになります。（「もちろん」と書きましたが、これはJavascriptのnullはSQLでのnullとしてセットするように内部で処理されているからです。）

では、空文字列をセットしてみましょう。

		data: {name: '', price: ''}

としたらどうなるでしょうか？
結果はエラーとなり、コンソールに「invalid input syntax for integer: “”」と表示されました。nameもpriceもそのままです。
実は

		data: {name: '商品A', price: '10000'}

のようにpriceに文字列（中味は数値であるような）を与えると、ちゃんとnameに’商品A’、priceに10000がセットされます。これは、Buddyで使用しているPostgreSQLでは、数値型のカラムに文字列をセットしようとした場合、暗黙の型変換が行われて数値に変換できれば成功します。しかし、空文字列は数値に変換できないので、エラーになったわけです。

さて、上記の例ではdataの中に値を直書きしていますが、実際のアプリではnameやpriceを入力するテキストボックスがあって、その値を取ってきてセットするような場合が多いでしょう。例えば、次のようになります。

	var name = this.items.nameTEXT.getValue();
	var price = this.items.priceTEXT.getValue();
	this.tables.Item.updateRecord({
		where: {ID: 1},
		data: {name: name, price: price}
	}, function(error, result) {
		if(error) return console.log(error.response.text);
	});

テキストボックスからgetValue()で得られるのは文字列です。入力内容を削除して空にすると空文字列になります。それがpriceの入力欄であれば、updateRecord()に与えるときにそのままでは上記のエラーになります。空文字列はnullに置き換えて与えるのが、おそらくユーザーの入力意図にも沿った処理となるでしょう。（将来のBuddyで、この置き換えを自動でおこなうオプション機能を提供するかもしれませんが、現時点ではプログラムで書く必要があります。）
また、テキストボックスをクリアするために、setValue(null) や setValue(undefined) とすれば、getValue()で得られるのも null や undefined になります。null であれば意図通り null がセットされますが、間違えて undefined にすると、セットされずに元の値のままになってしまいます。

以上のように、空文字列、null、undefinedについては、いろいろな罠が潜んでいます。注意しましょう。

（2021/11/22 中島）