ながーーーーーい文字列を保存できるようにする for 日記アプリ

どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回は長い文字列を保存できるようにする方法を書いてみます。
下記ステップでやっていきます。

• 日記アプリの下地を作る
• 長い文章を入れられるデザインにする
• とりあえず試してみる
• 長い文字列が入るように設定を変更する

日記アプリの下地を作る

ネタバレすると、設定1つ変えるだけで話が終わりなのですが、味気無いので日記アプリを作りながら説明したいと思います。

Start Appから作り、サササッと日記用モデルを作ります。

入力欄は「Page」に作っていくことにしましょう。
Formウィジェットをビシッと置いて作っていきます。途中、「Edit」を指定している点に注意してください。
追加したあと、Contentパネルの縦の長さが足りないと思うので、下にぐいっと伸ばしましょう。

入力した日記を見返せるようにしたいので、見返したい日記を選ぶための一覧も追加していきます。
簡易な説明のため、ここでは一画面に無理やり追加していきます。

まずは、Contentパネルの設定を細工します。
入力画面の横に一覧を追加したいので、横方向のレイアウトに変更します。

変更するとこんな感じに。ちょっとUIがズレ込んでますが気にせず先に進みます。

Listウィジェットを、右の空いたスペースにドラッグ&ドロップします。白いのでわかりにくいですが、下図のように追加されます。

さらにわかりにくいですが、Listの上のほうをクリックすると、1行分のレイアウトを設定するためのウィジェットも入っています。
そこに、日記のタイトルを表すためのラベルウィジェットを追加します。

ここで、ListのデータソースをDiaryに変更します。
そのあと、置いたラベルウィジェットのtextを、DiaryのTitleにバインドされるように設定します。これで、自動的に日記のタイトルがリストに並ぶようになります。

この時点での動作をPreviewで確認してみましょう。フォームをEditで作ったので、データの追加の仕方は癖があります。
空データを作る → データの中身を書き換える
という順番になります。
insertから始めると確認用の詳細画面も必要になり面倒なのでこれで良しとしています。

デフォルトのEditフォームは、各入力フォームの値を即座にDBに書き込むという動きになっていることに注意しましょう。

長い文章を入れられるデザインにする

流れるように作ったものの、肝心の本文が1行だと全然入力できないですよね。
なので、色々入力できる便利なウィジェットの設定と、画面全体のレイアウト調整をします。

調整したものが下記になります。

直前の状態からの変更点を列挙します。

• ListウィジェットのHorizontalのSizeをfixedに変更、Widthを100にして短く。
• FormウィジェットのHorizontalのSizeをfill parentに変更。横幅を大きくとる。
• Formウィジェットにある本文用のTextBoxウィジェットを削除。かわりにText Editorウィジェットを挿入。
• Text EditorウィジェットのVerticalのSizeをfixedに変更。Heightも300に設定。

大体こんな感じです。 めんどくさい 長くなりそうだったので画像は割愛しました。

とりあえず試してみる

沢山の文字を入れる領域ができたので、早速入れていきます。日記書くわけにもいかないので、wikipediaの日記ページから適当に拝借します。

入力して、(保存させるため)フォーカスを外してみると・・・？

Previewの下のコンソールに、何やらエラーが出ています。「Data too long」とか言っているので、長すぎて入らないみたいです。日記はついつい熱が入ると長文になりがちなので、これでは困りますね。

長い文字列が入るように設定を変更する

ということで、めちゃ長い前置きになりましたが、下記の対応によって長文対応ができます。

DiaryモデルのBodyフィールドを選択し、Advancedを押してみます。

すると、下図のように「SQL Type VARCHAR(255)」といういかにも255文字しか入らない設定になっていることがわかります。

なので、これを「TEXT」に変更します。TEXTは何文字でも(容量が許す限り)入ります。便利ですね。
(MySQL的に細かいことを言うと色々ありますが、App Makerの範疇ならとりあえずTEXTでいいかなと思います)

「ながーーーーーい文字列を保存できるようにする」方法は「SQL TypeをTEXTに変える」だけなので、1文で終わる話だったのですが、無駄にノッてしまい長くなっちゃいました。
会社で日記保存できるアプリなんて需要無さそうですが、メール送信機能をつけたりして日報送信アプリにするとかだとそれっぽくなりそうです。件名自動生成したり本文フォーマット選べたり、送信先が固定されてたりとか、かゆいところをお世話してあげると喜ばれると思います。

うまく保存できている様子を載せておきます。 エラーが表示されないようになりました。後半で画面をリロードしていますが、ちゃんと保存されているため、本文が読み込まれている様子がわかります。

以上です。良いApp Makerライフを!