まずはじめに

今日仕事から帰ってきたら自動車税の支払い用紙がポストに入っていました。

私はスマホからさっと支払いを終わらせたのですが、「これって知らない人もいるのでは？」と思ったので内容をまとめることにしました。

ネット銀行の口座を持っている人限定ですが、とても便利な機能ですのでぜひ知ってもらえたらなって思います(^^)

それでは勉強していきましょう！

必要なもの

アプリで払込票支払いをするために必要なものは次の3つです。

• ネット銀行の口座とそれに連動した銀行口座のアプリ
• バーコードや二次元コードが読み取れる端末機器（スマホ）
• バーコードや二次元コードがある払込用紙

振込やATM手数料がネット銀行だと無料で済むことが多いので、その便利さを知っている人はネット銀行の口座を持っている人も多いと思います。

また、このブログの記事を見ているということは、ネット環境にアクセスができているのでスマホの所持も問題ないかと(^^)

残る払込用紙ですが、

• 自動車税や固定資産税などの税金
• 水道やガス、電気代といった公共料金
• ショッピング代金などの払込票

あたりが使用するチャンスです！

使用できる環境が整っているのなら、一度チャレンジしてみるといいでしょう(^^)

操作手順

特に難しくはありませんが、スマホの操作画面を載せておきます。

楽天銀行の場合

ホーム画面下にある支払うをタップします。

楽天銀行コンビニ支払い（アプリで払込票支払）をタップします。

ページ下にある払込票を読み取るをタップします。

カメラが起動するので、払込票にあるバーコードや二次元コードを読み取れば完了です(^^)

住信SBIネット銀行の場合

ホーム画面にある料金等支払をタップします。

モバイルレジで支払うをタップします。

バーコード/eL-QRコード読み取り開始をタップします。

カメラが起動するので、払込票にあるバーコードや二次元コードを読み取れば完了です(^^)

以上です！

ちなみに私は楽天銀行をメインバンクにしていますが、この機能で支払いをしたら10円が振り込まれました笑

なんだろう？

金融機関の窓口やコンビニ支払いをしようとすると人件費がかかってしまうから、その分のお礼ですかね。

この機能はだれも損することがないと思う素晴らしい機能なので、ぜひ一度トライしてもらえたら嬉しいです(^^)

本ブログでは新UI画面で内容をまとめています。

UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)

まずはじめに

今回は、ダッシュボードViewで働くメンバーのスキルを可視化できるアプリを作ってみたいと思います。

スキルマップなんて言われたりもするそうですが、従業員の能力・技能を評価することで、やる気を引き出すとともに、不足する能力・技能について教育計画を立てて、能力向上を図るツールとして活用するのが目的のようです。

こういうのって一回作ると見直しとか更新はしないんだよなー笑

appsheetで作ってみると面白いかも？って思って作ってみたら、それなりのものが出来上がったので記事にしました(^^)

appsheetのテーブル構成を勉強するのにちょうどいいレベルの内容となっているので、ぜひ参考にしてもらえたらなって思います。

それでは勉強していきましょう！

準備するデータについて

今回使用するテーブルは3つです。

それぞれのテーブルに用意したカラムは下図になります。

データタイプの設定

テーブル構成を理解したところで、それぞれのデータタイプの修正を行います。

設定についてはボックス内の写真を参考にしてください(^^)

登録テーブル

IDカラムのSHOW?をはずし、Key値に設定します。

また、LABEL値はスキルにしておきましょう。

評価テーブル

このシートの設定は少し難しいです。最終的なデータ設計は以下になります。

赤枠の部分はさくっと変更しつつ、青枠の部分の設定について説明していきます(^^)

登録IDカラムのTypeをRef、Source tableは登録にします。

続いて、Valid ifに以下の構文を入力します。

登録[ID]-select(評価[登録ID],[メンバー]=[_thisrow].[メンバー])+list([_thisrow].[登録ID])

この記事内では詳しくは説明しませんが、やっていることとしては

全体のリスト：製品[ID] から、すでに登録したリスト：select(評価[登録ID],[メンバー]=[_thisrow].[メンバー]) を除外する。ただし、自分：list([_thisrow].[登録ID]) だけはOK

という表示させるリストの足し引きをしています(^^)

メンバーカラムのTypeをRef、Source tableはアプリユーザーにします。

レベルカラムのTypeをProgress、Valueに以下の値を登録します。

Empty, One Quarter, Half, Three Quarters, Full

データタイプの設定が完了したら、最後にVirtual columnを作成します。

VCカラムのTypeをNumber、App formulaに以下の構文を入力します。

ifs([レベル]=”Empty”,0,
[レベル]=”Quarter”,1,
[レベル]=”Half”,2,
[レベル]=”Three Quarter”,3,
[レベル]=”Full”,4)

レベルカラムの登録された値から、それを数値化するための設定です(^^)

実際のProgressのValueの値とは異なる点に注意しましょう！

アプリユーザーテーブル

まずは赤枠の設定をしましょう。次に先ほど作成したスキルポイントを集計するVCを作成します。

VCのTypeをNumber、App formulaに以下の構文を入力します。

sum(select(評価[スキルポイント],[メンバー]=[_thisrow].[email]))

スキルポイントのVCから、メンバーごとの集計をするための設定です(^^)

以上でデータタイプの設定は完了です。お疲れ様でした(^^)

Viewの設定

続いてViewの設定をしていきます。

私が設定した手順を下記にまとめました。

スキル項目を登録するViewを作成する

赤枠を参考にして、習得目標とするスキル項目を登録するViewを作成します。

登録したスキル項目を評価するためのViewを作成する

赤枠を参考にして、スキル項目を評価するためのViewを作成します。

Sort byとGroup byの設定も合わせて行っておきましょう。

アプリユーザーを管理するViewを作成する

赤枠を参考にして、アプリユーザーを管理するためのViewを作成します。

メンバーの入れ替わりが激しくない場合は、Positionをrefにしておくと良いと思います。

登録メンバーのスキル値を可視化するためのViewを作成する

赤枠を参考にして、ユーザーごとのスキル値を集計するためのViewを作成します。

赤枠で囲まれた選択肢をセットします。

スキルを可視化できるダッシュボードを作成する

これまで作成したViewを一つにまとめます。

赤枠部分を参考にViewのセットをして、Interactive modeをONにします。

Viewの設定としては以上です。お疲れ様でした(^^)

アプリ動作の確認

最後にアプリの動作検証を行いたいと思います。

まずスキル項目を登録Viewから行う

メンバーに習得させたいスキル項目を登録Viewから登録していきます。

登録したスキル項目に対してメンバーのレベルを登録する

登録IDは先ほど登録Viewで入力した項目が表示されます。

メンバーごとに求められているスキルレベルを登録していきます。

基本Viewはこんな感じ(^^)

それぞれのViewから遷移する画面を確認する

評価（Table View）の項目を選択すると、Detail Viewにその情報が表示されます。

アプリユーザーViewに登録されたメンバーを選択すると、そのメンバーの情報のみ表示されます。

基本的な使い方は以上になります。

一度登録した情報は、Editボタンを押すことで更新（メンバーがスキルアップした時に）することが可能です(^^)

まとめ

以上、ダッシュボードでスキル可視化ツールを作成するための記事でした。

Valid if（入力制限）に入力した、登録[ID]-select(評価[登録ID],[メンバー]=[_thisrow].[メンバー])+list([_thisrow].[登録ID])や、Virtual column（スキルポイント）を付けることによって、使い勝手のいいアプリへと昇華させることが可能です。

appsheetであまりアプリを作成したことのない人が、作ってみるアプリとしては理解しやすいレベルだと思うので、この記事の内容を参考にしつつ、自身の環境に適したものに変化させてもらえればなって思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

こちらの記事も確認しておくといいと思います(^^)

【簡単設定！】入力制限を設定する方法 【時給を計算】Enumlistを使って自分の時間単価を計算するアプリを作成してみた

本ブログでは新UI画面で内容をまとめています。

UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)

まずはじめに

今回はプライベートでも使える日記アプリの作成についてまとめたいと思います。

先日、母親から「御朱印集めすることにした！」と言われたので、せっかくなら神社巡りの思い出をアプリに保存してもらおうと思い作りました(^^)

普段まとめている「今日から使えるテクニック！！」みたいなものではなく、原点に立ち返って「自分でアプリを作成してみる楽しさ」を思い出してもらえたらなって思います。

ちなみにその時に見せられた写真がこちら↓

めちゃくちゃ賑やかです・・笑

この派手な写真に負けないようなTIPSを盛り込んだアプリに仕上げましたので、ぜひ参考にしてもらえたらなって思います(^^)

また、行ってみたかったお店の食べ歩きや行ってみたかった旅行先を記録するアプリとしても使えます笑

それでは勉強していきましょう！

準備するデータについて

まずは、いつものようにアプリを構成するデータテーブルについて説明します。

下図のようなカラム構成で今回はまとめたいと思います。

続いてappsheetのデータタイプの変更をしていきます。

実際の設定は以下を参考にしてください。

データタイプの設定

赤枠のデータタイプに修正します。ここまでは特に難しい設定はありません。

続いて、緯度と経度のカラムの設定を以下のように行います。

データタイプをDecimal、Display modeをLabelにします。

Initial valueに以下の構文を入力します。

decimal(index(split([緯度経度], “,”),1))

3つの関数をそれぞれ説明します。

split()関数の使い方

split(text, delimiter)

第一引数にテキスト、第二引数にそのテキストを区切る文字を指定

また、split()関数の返り値はリスト型になります。

今回の場合だと、Latlongのデータは 〇〇.〇〇（緯度） , △△.△△（経度）という形を取るので、,（カンマ）で区切るという設定が可能となります。

index()関数の使い方

index(list, which-one)

第一引数にリスト、第二引数にそのリストから取り出したい何番目を指定（リストの一番左が1番目）

使用例) index({“A型”,”B型”,”O型”,”AB型”},2) なら返り値は B型

decimal()関数の使い方

decimal(x)

xは任意の値で、その値が認識可能な場合は同等のdecimal（小数）を返します。

図解で表すと以下のようになります(^^)

経度のInitial valueには、decimal(index(split([緯度経度], “,”),2))を入力すればOKです。

次にチェックカラムの設定をします。

ここでは、行った or 行っていない のフラグ管理が出来ればOKです(^^)

TIPSとして、現在地から目的地までの直線距離を取得するカラムを作成したいと思います。

アプリに導入したい人は以下の手順を参考にしてください。

VCで距離カラムを作成する

• App formulaにdistance([緯度経度],here())を入力
• Show?のチェックを外す
• TypeをDecimalにする

VCで直線距離(km)カラムを作成する

• App formulaに[距離]&”km”を入力
• TypeをTextにする

データタイプの設定は以上です。お疲れ様でした(^^)

アクションボタンの作成

続いてアプリに必要なアクションボタンの作成をしていきます。

私が実装したいアクションボタンは以下の4つです(^^)

Googleマップで現在地に戻るボタン

目的地までのルート検索ができるボタン

チェックカラムを変更するボタン

目的地の10日間の天気予報を見るボタン

上2つに関しては、データタイプやMap viewを設定するだけで実装ができるので、特に意識しなくて大丈夫です(^^)

まずは簡単なチェックカラムを変更するボタンを作りましょう！

チェックボタンの作成

PositionはInlineでやってみたいと思います(^^)

Attach to columnはチェックを指定します。

他にできることとして

• Only if this condition is trueの条件式を入力
• Format rulesでアクションボタンに色を付ける

あたりかなって思います(^^)

チェックのアクションボタンができたら、次に目的地の天気予報を入手するアクションボタンを作成します。

設定は下図を参考にしてください(^^)

天気予報ボタンの作成

Targetには、以下の構文を入力します。

“https://www.weather.com/ja-JP/weather/tenday/” & ENCODEURL([緯度]) & “,” & ENCODEURL([経度])

このURLは、特定の緯度と経度に対応する場所の10日間の天気予報を表示するためのウェブページへのリンクです。

もう少し具体的に説明すると

“https://www.weather.com/ja-JP/weather/tenday/”

天気予報の10日間表示のベースURLであり、tendayをtodayに変えると本日、weekendに変えると週末など検索の対象期間を設定することが可能

encodeurl([緯度])とencodeurl([経度])

特定の場所の緯度および経度をURLエンコードしています。これにより、緯度と経度の座標がURLに挿入される

それぞれのURLを＆を用いて繋げて、1つのURLとして成立させています。

＆の代わりにconcatenate()関数を使ってももちろん可能です(^^)

アクションボタンの設定は以上です。お疲れ様でした(^^)

Viewを整える

大事なアプリの画面設定をしていきます。

と言っても、特に難しい設定はありませんので下図を参考に編集をしてみてください。

今回はCard ViewとMap Viewを作ってみたいと思います(^^)

Card Viewの設定

まずはLayoutからlargeを選択します。

私の設定では、赤枠の部分には何も情報を入れないほうがすっきりとした見栄えになったので、今回は使わずにいきたいと思います(^^)

下図のようにそれぞれ該当する箇所をクリックして、セットするカラムを選択していってください。

すべての設定が問題なくできていると、下図のようなViewになります(^^)

Map Viewの設定

Map Viewの設定は以上です笑

その他のViewとして、新規作成のためのForm Viewは合ったほうがいいかもしれません。

このあたりはアプリ開発者の好みです(^^)

Format Ruleの設定

アプリの視認性を高めるために、ちょっとしたフォーマットルールを追加したいと思います。

別になくても構わない設定なので、不要な人は飛ばしていただいても結構です。

私が試しに設定してみたものは、以下の6つです(^^)

アプリ動作の確認

最後に作成したアプリの動作検証を行いたいと思います。

このアプリはモバイル（スマホ）を意識して作成しているので、そのViewで確認するのがいいです(^^)

行ってみたい場所 or 行ったことのある場所を登録する

赤矢印の項目を登録していきます。

今回は一度行ったことがある、チェック＝完了 で検証をしてみます(^^)

アプリに登録されている登録地をタップする

登録したデータをタップすることで、Map Viewに画面が遷移します。

作成したアクションボタンの動作確認

アプリのGマップを移動させたあと、最初の登録座標に戻したい場合は赤のマップアイコンをタップします。

天気予報をタップすることで、外部サイトから登録地点の天気予報が取得できます。

車のアイコン（appsheetが自動で作成するアクションボタン）をタップすると、Googleマップのルート検索ができる

まとめ

以上、プライベートでも使える日記アプリについての記事でした。

appsheetが求めているカラムを用意すると完成度の高いアプリが作れますので、こういうアプリから勉強してもらえると楽しく学べていいかなって思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

こちらの記事も確認しておくといいと思います(^^)

【初心者におすすめ】appsheetで簡単に作成できるアプリ 【時給を計算】Enumlistを使って自分の時間単価を計算するアプリを作成してみた

本ブログでは新UI画面で内容をまとめています。

UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)

まずはじめに

今回の記事は、アクションボタンでGカレンダーへアプリの登録情報を送信する設定方法についてです。

内容としては別の記事でまとめた「承認フローにおける差戻しメールの発信機能」と親戚関係みたいなものです。

構文がものすごく複雑なように見えるので詳しく解説していきます。

それでは勉強していきましょう！

差戻しメールの設定については、こちらの記事を参考にしてください(^^)

【超おすすめ！】承認アプリの差戻しメールの設定方法

準備するデータについて

まず本記事の内容を理解することで、下図のような画面をアクションボタンから立ち上げられるようになります。

そのためには準備するデータが大事で、下図のようなデータテーブルを用意するのをおすすめします(^^)

スケジュールテーブル

対象者カラムはアプリユーザーテーブルとref関係を結びます。

アプリユーザーテーブル

このテーブルには予定を共有したい人を登録します。

2つのテーブルの準備ができたら、appsheetにデータを送りデータタイプの設定を行います。

特に難しい設定はないので、データタイプの選択は下図を参考にしてください。

まずは、スケジュールテーブルの設定です。

対象者のEnumlistはBase typeをRefにして、参照先のテーブルをアプリユーザーにしましょう

残りの設定は特に注意することはないですが、終了時間のInitial valueにtime([開始時間]+1)と入れるとデフォルトで予定時間が1時間となるのでおすすめです(^^)

アプリユーザーテーブルの方は、emailをkey値、名前をLabel値に変更します。

データタイプの設定は以上です。お疲れ様でした(^^)

アクションボタンの作成

データタイプの設定が完了したら、次はアクションボタンの作成をします。

まずは、下図の赤枠部分を参考にして設定の変更をしてください。

次にこの記事で最も大事な部分であるGカレンダーを立ち上げるためのURLを設定します。

Targetに以下の構文をまずは貼り付けてください。

この構文が表している役割を色分けすると下図のようになります。

まずは知っておくと便利なconcatenate()関数の使い方をマスターしましょう(^^)

複数のパーツを指定する場合は、各パーツをダブルクオーテーションで囲み、カンマで区切ってつなげる必要があります。

図解の赤文字がconcatenate()関数を意味します！

concatenate()関数の基本を抑えたところで、残りのタイトル、開催日時、ゲスト、詳細を指定するURLについて解説します。

タイトル

タイトル部分のURLは、図解のオレンジ文字の部分が該当します。

concatenate(“https://calendar.google.com/calendar/render?action=TEMPLATE&text=”, [予定])

ダブルクオーテーションで囲まれたURL（第一引数）が、Gカレンダーの立ち上げとタイトルに何を入力するか？を表し、第二引数でappsheetに入力された[予定]の文字列を取得しています。

ちなみに、上記のconcatenate()関数を入力した場合は、タイトルのみ入力された状態でGカレンダーが立ち上がります(^^)

開催日時

開催日時部分のURLは、図解の青文字の部分が該当します。

“&dates=”, TEXT([開始日], “YYYYMMDD”), “T”, TEXT([開始時間], “HHmmss”), “/”, TEXT([終了日], “YYYYMMDD”), “T”, TEXT([終了時間], “HHmmss”)

複雑そうに見えるこの部分ですが、やっていることは

appsheetで入力された開始日、終了日のDateタイプのデータをText()関数で変換

appsheetで入力された開始時間、終了時間のTimeタイプのデータをText()関数で変換

これだけです。

ゲスト

ゲスト部分のURLは、図解の緑文字の部分が該当します。

“&add=”, [対象者]

appsheetの設定で、[対象者]にはenumlist（ベースタイプはref）で、対象者のメールアドレスが入力されるようになっています。当ブログの読者の皆さんには、ここは特に難しい設定ではないと思います。

enumlistの使い方については、こちらの記事を参考にしてください(^^)

【これで解決！】Enumlistの使い方

詳細

詳細部分のURLは、図解の紫文字の部分が該当します。

“&details=”,[メモ],”%0A%0A★参考URL：“,”<a href=” ,[参考URL],”>”, [参考URL], “</a>“

この部分の構成は少し複雑ですが、それぞれ意味する部分を色分けしました。

黄色下線の部分は純粋なテキスト情報としてGカレンダーに表示

青色下線の部分の「%0Aは改行」を表す

赤色下線の部分はHTMLで使用されるリンクを作成するためのタグ

赤下線の部分は私もあまり詳しくないのですが、簡単に説明するなら

となります。

今回の場合だと、[参考URL]のリンクをそのままテキストとして表示 という意味になります(^^)

設定の検証

最後に設定の検証を行います。

まずはスケジュールの登録をしてみます。

次にDetail Viewに表示されているGカレンダー転送のアクションボタンをクリックします。

予定、対象者、メモ、開始時間が反映されたスケジュール登録画面が立ち上がります(^^)

まとめ

以上、appsheetで作成したスケジュール管理アプリのデータをGカレンダーに転送する方法についての記事でした。

この構文なら似たようなカラム構成のアプリはデータ転送が可能になるので、ぜひ頭の片隅にでも覚えていてもらえればと思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

まずはじめに

今回の記事は、Looker studioを使ってデータ分析をするなら必修関数であるCASE関数についてです。

この関数を知っているのと知らないのでは、アウトプットの質が天と地ほどの差が出てしまうため、必ず習得してほしい関数です！

CASE関数が要求する引数が何かを知っておけば、そんなに複雑な関数ではないです(^^)

個人の勉強はもちろん、会社の勉強会とかでも使ってもらえたらなって思います。

それでは勉強していきましょう！

Looker studioの使い方に不安のある方は、こちらの記事を参考にしてください(^^)

【初心者向け】Looker studioの基本的な使い方

CASE関数の基礎

まずはCASE関数を使うときはどんなときか？を把握しましょう。ずばり！

取り込んだデータの新しいカテゴリーやグループを作成する場合に使用する

これです。

例えば、生産地が中部地方と関東地方に分けられるような時が使うチャンスです(^^)

使用する場面についてイメージが付いたところで、次はCASE関数の基本形について説明をします。

この基本形を覚えておけばOK！

実際に関数を入力するときに変わるのは、青下線の部分だけです(^^)

CASE関数の入力

CASE関数の基本を抑えたところで、実際に関数を入力して検証してみましょう！

関数が使えるようになるには、実際に使ってみて理解するのが一番です(^^)

今回は以下のようなデータで検証したいと思います。

このデータテーブルをLooker studioに取り込んでみましょう。

データの取り込みが完了したら以下の手順を追ってみてください(^^)

編集画面右下のフィールドを追加から計算フィールドを追加をクリックします。

フィールド名を適当に入力し、計算式に以下の関数を入力します。

CASE
WHEN 地域 IN(“三重”,”愛知”,”岐阜”,”長野”,”静岡”) THEN “中部地方”
WHEN 地域 IN(“神奈川”,”東京”,”埼玉”,”栃木”,”群馬”,”茨城”,”千葉”) THEN “関東地方”
ELSE “その他”
END

計算フィールドを追加 ＝ appsheetのVirtual columnと思えばOKです！！

しれっとIN関数も出てきたので、使い方をここでマスターしましょう(^^)

appsheet的に書くなら、[地域] in (list(“三重”,”愛知”,…)) みたいな感じです。

このIN関数もCASE関数との組み合わせで便利な関数なので、覚えておきたい関数です。

円グラフの作成

CASE関数を使った計算フィールドが作成できたので、その結果を確認したいと思います。

まず、グラフは挿入タブから円グラフを選択しましょう。

次に円グラフのディメンションが地域、指標が出荷量(t)のものを作成します。

スタイルタブから円グラフのスライス数を変更します。今回は20としました。

グラフの見栄えを良くするため並び替えに出荷量(t)をセットします。

この円グラフをコピーして、ディメンションの項目を「地方で集約」に変更する。

左のグラフは地域別のグラフとなっていますが、ディメンションをCASE関数に変更した右のグラフは値が集計された結果となっています(^^)

まとめ

以上、CASE関数の使い方についての記事でした。

CASE関数はLooker studioでデータ分析をするなら、避けては通れない関数だと思います。

もう一度おさらいです。

この基本形さえ覚えておけば、使っているうちに身についてくるかと思います。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

まずはじめに

今回の記事内容はLooker studioについてです。

もともとは、Googleデータポータルと言われていたクラウドベースのBiツール（データの分析が可能なツール）です。

過去のブログ記事で、appsheetで汎用性のある設定でグラフを作成するのは難しいと言っていたのですが、その解決策として「Looker studioを使えばいい」に至りました(^^)

ノーコードアプリ（appsheet）の勉強だけでいっぱいいっぱいだよ・・

そんな読者の皆さんの悩みを解決できるような基本を抑えた記事を作成しました。

個人の勉強はもちろん、会社の勉強会とかでも使ってもらえたらなって思います(^^)

それでは勉強していきましょう！

appsheetでグラフを作成したい！という人はこちらの記事を参考にしてください(^^)

【誰でも簡単】ドリルダウンでグラフを作成する方法 【上級者向け】appsheetで折れ線グラフを作る方法

Looker studioを使う前の準備

まず最初にLooker studioに取り込むためのデータを作成します。

今回は読者の皆さんにも馴染みの深いスプレッドシートを例にします。記事を作成するにあたり、Chat GPTさんにご協力いただきました！笑

ホンマ頼りになる相棒やで(^^)

簡単な使い方はこちらの記事を参考にしてください。

なるべく必要最小限の列情報の方が理解がしやすいと思ったので、この記事では下図の情報でまとめます。

次にLooker studioを使用するためにGoogleアカウントでログインをします（ログインはこちらから）

下図のような画面になっていればOKです。

データの取り込み方

続いて、Looker studioのホーム画面からデータを取り込む方法です。

今回はスプレッドシートで行いますが、おそらくほとんどがこのパターンになると思います。

手順は以下を参考にしてください(^^)

データの取り込み方の手順

まずは空のレポート（カラフルな＋ボタン）をクリックします。

接続先にGoogle スプレッドシートを選びます。

初めて使用するときは接続先の承認が問われるので、上図のように選択します。

Looker studioに取り込むスプレッドシートとそのテーブルを選択します。

上図のような画面になっていればOKです！

別のデータテーブルを取り込みたい場合

1つのLooker studioで複数の分析をしたいニーズもあると思います。

分析したいテーブルが複数ある場合は、以下の手順を参考にしてください(^^)

その後は先に図示した手順と同じです。

取り込んだデータテーブルを削除したい場合

今度は間違えて取り込む必要のないデータシートを削除する方法です。

以下のやり方を参考にしてください(^^)

データソースの列を追加したときの更新

appsheetを使っていると、アプリの構成を再考するときによくカラムの追加（列の追加）をすることがあります。

列を追加したときには、Looker studioでもテーブルデータの更新をする必要があります。

忘れるとグラフや表が表示されなくなるので、注意しましょう！

列情報の更新手順は以下を参考にどうぞ(^^)

列を追加したときの更新手順

追加したい列情報を入力します（何列でも可）

Looker studioの編集画面に戻り、列情報を更新したいデータテーブルの編集を行います。

画面左下にある同期ボタンと適用ボタンをクリックします。

データソースの追加と列情報の更新は、知っておかないと臨機応変にデータ分析ができないのでぜひマスターしておきましょう！

Looker studioの開発画面

次にLooker studioの開発画面について説明します。

どこらへんを触ったらこういうことができる という簡単なイメージを掴んでおくと、何とかなることが多いので記事内の機能は最低限知っておきましょう(^^)

開発画面の基本

まず開発画面のざっくりとした説明をします。

画面上部にある「共有」から、今表示しているLooker studioを誰に共有するかを設定することが可能

この共有設定は、閲覧までや編集も可能など細かく権限を指定することができます。

画面上にある「表示」から、編集と表示画面の切り替えが可能

実際に使用者にはどういうふうに見えるのか？を確認しつつ、編集を行っていきます。

キャンバスサイズの設定

Looker studioで表示させたいものというのは、PCやディスプレイで表示させたいというものが多いと思うので、最初にページの幅と高さを変更しておくといいです。

キャンバスサイズの変更はとても簡単です(^^)

グラフの挿入

最もニーズが高いと思われるグラフの挿入についてです。基本的には

グラフの種類を指定して挿入 → 縦軸/横軸を設定 → スタイル/フォント設定

この流れになります。

この記事では棒グラフを用いて説明しますが、円グラフや折れ線グラフといった別のグラフを使ったとしても基本は同じです(^^)

グラフの挿入手順

上部タブにある「挿入」から縦棒グラフを選択し、画面左の余白部分でクリックする。

挿入されたグラフの手直しをしていきます。

ディメンションはグラフの横軸

指標はグラフの縦軸

まずはこの基本をしっかりと覚えてください！

少しグラフを手直しします。

指標に価格をセット、並び替えには商品名（A〜E）を昇順になるようにセット

グラフの挿入から縦軸と横軸（並び替え含む）の基本的な設定は以上になります(^^)

スタイル/フォント設定

最後にグラフの最大値や最小値、目標値や文字のフォントなどを追加・編集する方法を説明します。

まずは目標値の設定方法です(^^)

目標値の設定方法の手順

目標値を設定したグラフを選択したまま、スタイルタブをクリックし、リファレンス行にある「基準線を追加」をクリックします。

種類や値、軸やラベルといった項目をいじることで、今回だと目標販売価格という指標が設定されました。

次にグラフの最大値と最小値、文字フォントの編集方法をマスターしましょう！

グラフの最大値・最小値の設定、文字フォントの変更手順

スタイルタブを下にスクロールして、左Y軸とX軸の項目で最大値や最小値の設定が可能です。

グリッドの項目から軸やラベルのフォントを設定が可能です。

まとめ

以上、Looker studioの基本操作についての記事でした。

本記事の内容をまずは覚えてもらって

編集画面のどのあたりを触ればやりたいことができそうか

のイメージをまずは掴んでもらうのがいいのかなって思います。

私も最近になってようやく触り始めたので、まだよくわかっていないことのほうが多いですが、勉強していてこれ大事！と思ったことは記事にまとめていきたいと思います。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

こちらの記事もぜひ参考にしてください(^^)

【必修関数】Looker studioで使うCASE関数

本ブログでは新UI画面で内容をまとめています。

UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)

まずはじめに

今回の記事内容はアプリのUIを高めるための記事です。

過去にブログ読者の方から「リストの並び替えは需要がある」と言われて、はや半年。。

完全に忘れていました！！（言い訳なし）

もともと個人用の備忘録としてブログを始めたので、自分が困らないと動かないという管理人です笑

先日あったんです、「リストを任意の順番で表示させてほしい」と。

あれっ？そういえば過去にそんなこと訊かれたなーっと思い返すとコメント欄にありました。

記事にまとめます！

って自分で書いたのに忘れているという。。

前書きが長くなりましたが、記事の内容はしっかりとまとめたつもりなので、せひ参考にしてください(^^)

それでは勉強していきましょう！

検証用のデータ

今回の検証に用いたテーブルの情報です。各シートのカラム構成は下図になります(^^)

団体コードシート

入力先シートに送るためのマスターシートです。（一度作成すると基本いじることはないデータ）

作成にあたりこちらのサイト様を参考にしています。

また、リストの並び順の効果を見るために団体コードの並び順は適当にしています。

入力先シート

こちらのデータシートでリストの並び替えを検証します。

各シートの構成カラムの関係性は下図になります(^^)

上図の関係性を参考にしつつ、スプレッドシートのデータをappsheetに取り込み、データタイプの修正を行いましょう！

団体コードシート

団体コードシートの設定で一番大事になってくるのは、LABELの項目を何にするか？を決めることです。

次に示す入力先シートとref関係を結ぶにあたり、Key値を参照してアプリで表示させる値がLABEL値になるので、この設定を忘れずにしましょう(^^)

入力先シート

今回の記事内容の検証カラムである団体名にはrefを設定します。

Source tableには団体コードシートを選択しましょう。

まずは、この状態で入力先シートからデータを登録しようとしたときの画面を見てみます。

都道府県に三重県を選択したときの団体名は・・

団体名には三重県だけではなく、東京都や福岡県の選択肢も表示されています。

これでは入力者にとって優しくない仕様となっているので、入力補助をしていきましょう！

refリストの設定

まずは基本設定として、直前に選んだ都道府県に紐ついた選択肢のみ表示させる設定をします。

団体名のSuggested valueに以下の関数を入力します。

select(団体コード[団体コード],[_thisrow].[都道府県]=[都道府県])

上記関数がぱっと思いつかない方は、こちらの記事を参考にしてください(^^)

【脱初心者！】select()関数で依存型ドロップダウンリストを作成する方法

この関数を入力すると、都道府県に三重県を選択した場合は・・

三重県に関係する市名のみ表示されるようになります(^^)

次にこの記事でまとめたいorderby()関数について説明します。

orderby()関数の使い方

第一引数にKey値のリストを送る必要があるので、orderby()関数はデータタイプrefとセットで使う関数と覚えておいてください(^^)

refのKey値＝アプリ上ではLABEL値で表示されるので！

このorderby()関数を使って、先ほどの関数に修正を加えてみたいと思います。

団体名のSuggested valueに以下の関数を入力します。

orderby(select(団体コード[団体コード],[_thisrow].[都道府県]=[都道府県]),[団体コード],false)

この関数を入力すると、先ほどのリスト表示と異なることがわかります。

oederby()関数の方は、団体コードが1〜6の順番で市名が並ぶようになっています(^^)

まとめ

以上、orderby()関数についての記事でした。

繰り返しになりますが、

第一引数にKey値のリストを送る必要があるので、orderby()関数はデータタイプrefとセットで使う関数

ということは覚えておいてください。ちなみに

orderby(select(団体コード[団体コード],[_thisrow].[都道府県]=[都道府県]),[ふりがな],false)

とすれば、あいうえお順でリストの表示をソートすることも可能です。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事は、知っておくと便利なTIPS: 用紙サイズA4を横向きにしたときの余白を無くす方法についてです。

書類を自動PDF化するアプリの作成中、ページを横向きにすると不自然な余白が生じることがわかりました。

この余白を何とかしたいな(^^)

色々設定をいじってみたらそれが解決したので、備忘録としてその設定を残しておきます。

それでは勉強していきましょう！

対策なしの場合

まず管理人が失敗した設定（おそらく一度はこの設定にしてしまう）ですが、以下になります。

この記事では過去に紹介した電子印アプリを例にしています。

Automationにファイルを添付する設定をする

AutomationにあるAttachment Content Typeから添付ファイルの拡張子を選択します。

※この記事ではPDFを例としています。

添付するファイルの設定を変更する

Attachment Page OrientationでLandscape（横向き）を選択し、Attachment Page SizeをA4にしています。

ちなみに初期設定のPortraitは縦向きを意味します。

受信したメールに添付されたPDFを確認する

Gメールに添付されたPDFをを確認すると下図のように不自然な余白があると思います。

設定上は何も問題ないように思えますが、これでは不格好なPDFとなっています。

対策ありの場合

対策なしの設定ではPDFに不自然な余白が生じてしまったので、それを解消する設定方法は以下になります。

添付ファイルを作成するドキュメントのページ設定を変更する

Attachment TemplateのViewをクリックします。

画面上部にあるファイルタブからページ設定をクリックします。

ページの向きを縦、用紙サイズをTabloidにします。

Attachment Page SizeをLetterにする

次にappsheet側の設定を変更します。

Attachment Page SizeをLetterにするだけでOKです。

受信したメールに添付されたPDFを確認する

Gメールに添付されたPDFをを確認すると不自然な余白が消えています(^^)

まとめ

以上、用紙サイズA4を横向きにしたときの余白を無くす方法についての記事でした。

特に知らなくても問題のない知識ですが、知らないと設定できない内容だと思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事は、アクションボタンによる差戻しメールを送信する設定方法についてです。

決裁者が申請内容に対して承認というステップを踏む際に、許可ができないため差戻すことがあります。

この時にどういう仕様であれば、アプリ利用者が受け入れてくれるか？

そこで考えたのが、Gmailによるメールの発信でした。

特に年配の方は、自分の慣れ親しんだ仕組みややり方を貫こうとしますので・・

私の職場にはそういう人たちがいっぱいいます・・笑

そういう人たちにも極力寄り添うわかりやすい仕組みとなっていますので、ぜひ参考にしてください(^^)

それでは勉強していきましょう！

検証データについて

今回用いた検証のデータです。

登録案件シート

この記事の設定を行うために必要な項目として、

• メールの件名に入れたい案件名
• 申請者と承認者（決裁者）のメールアドレスを取得すること
• ステータスカラムをもたせること

この3点は必ず設定してください(^^)

アクションボタンの設定

差戻しメールを送信するためのアクションボタンの設定の説明です。

まずは、Behavior → Actionsと進みます。

次に、Do thisにExternal go to a websiteを選択します。

Targetに以下の構成でURLを指定します(^^)

https://mail.google.com/mail/u/0/?fs=1&tf=1&source=ig&view=cm&to=（宛先のメールアドレス）&cc=（CCのメールアドレス）&su=（メールの件名）&body=（メール本文の文章）

上記のURLで立ち上げるメールを思いどおりに設定することが可能です(^^)

これを今回のカラム設定に置き換えると、以下のURLになります。

concatenate(“https://mail.google.com/mail/u/0/?fs=1&tf=1&source=ig&view=cm&to=”,[申請者],”&cc=”,[承認者],”&su=”,”【差戻し】”,[案件],”&body=”)

concatenate()関数でテキストをつなげることが可能です

設定の確認

最後に設定の動作検証を行ってみます。

登録したデータは上図です。

アクションボタンの差戻しメールをクリックすると、

宛先、CC、件名が入力された状態でメール作成の画面が立ち上がります(^^)

連絡手段がメールであるため、任意で写真や添付資料、参照リンクなどを本文に入れることも可能です。

まとめ

以上、差戻し処理を汎用的に設定する方法についての記事でした。

この方法に加えて、ステータス移行をするアクションボタンをグルーピングすることで、ステータス移行をさせつつ、メールを送信することも可能です。

こういう仕組みを作って上げることで、万人に受け入れてもらえると思います(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事は、ガチ実践です！

appsheetを学び続けて1年が経過しました。

そんな私の今の実力を記録として残すべく、記事にその内容をまとめました。

そういえば見積書作成アプリをきちんと記事にまとめていなかった・・笑

そんな中で思いついたのが今回の企画(^^)

別の記事でそれとなくまとめてはいたので、今回の記事は要所のみを説明します。

かなり内容のレベルが高いと思うので、ついてこられた人は免許皆伝です！笑

それでは勉強していきましょう(^^)

refの基本を先に学んでおくと理解しやすいです

アプリを構成するシートの設定

今回のアプリを構成するデータシートは3つです。

見積書シート

見積書詳細シート

商品シート

• 見積書シート：このアプリの親テーブル（アプリの幹の部分）
• 見積書詳細シート：見積書シートの子テーブル（アプリの枝の部分）
• 商品シート：入力補助のため用意（アプリの葉の部分）

これらのスプレッドシートの構成でappsheetにテーブル情報を送り、初期設定を行います。

それぞれのテーブルにおいて、カラム設定は以下のようにしました。

商品シートの設定

注意することとしては、LABELのチェックボックスを2つ用意することです。

appsheetでは、テキストと写真の2つをラベルとして表示することができます。

見積書詳細シートの設定

1. refのSource tableを間違えずに設定
2. Initial valueにref構文をセット

商品価格を変えることがない場合は、App formulaに入力でOK！

商品の値引きを考えた場合、Initial valueのほうが汎用性が高いです。

また、個数のInitial valueに1を入力しておきましょう(^^)

見積書シートの設定

見積書シートでは、合計金額のカラムに

sum([Related 見積書詳細s][合計金額]) を忘れずにセットしておきましょう。

PDFカラムのEditable?にfalseを入力することも忘れずに！

Editableに関数を入力することで、編集に制限をかけることが可能です

キーとなるアクションボタンの作成

まずは、おおもとの見積書に明細をつけるためのアクションボタンを作成します。

見積書に明細を付与するアクションボタン

次に、見積書に明細を書き終えたものをPDF化するためのアクションボタンを作成します。

※このアクションボタンとAutomationの組み合わせでPDF化を実装します。

見積書をPDF化するトリガーのアクションボタン

メールの送信と見積書のPDFを仕組み化する

Automationを作成する前に、アプリの構成を微修正します。

アプリを作成している中で、「取引先も選択にして楽したい」と思ったので寄り道です(^^)

スプレッドシートに取引先シートを追加します。

取引先の会社名とメールの宛先に使うemailがあれば便利です。

Key値はemail、LABEL値は取引先にしましょう！

dataペインのtableタブからシート情報を読み込み、カラムタブから見積書シートをリジェネレイトします。

リジェネレイトが完了したら、見積書シートにある取引先カラムをrefでつなぎます。

仕組みを構築しているときに機能のちょい足し、、、あるあるです！(^^)

続いてAutomationの設定に移ります。少し複雑なのでここは以下の手順を参考に(^^)

Automationの発火条件を決める

値が更新されたときに発火するUpdates onlyとその条件式を入力します。

メール宛先の設定

赤枠の部分を参考に設定をします。

取引先カラムはrefによる参照（key値はemail）からメールアドレスが取得可能(^^)

送信するメールの内容を作成

見積書の書式を作成

Attachment Templateで見積書のテンプレートの作成とAttachment Archiveでメールに添付かつGoogle driveに保存を選択する。

ちなみに今回はこんな感じで書式を作成(^^)

アプリの動作確認

アプリの中核をなす部分の開発が完了したので、動作の確認を行います。

アプリが思いどおりに動いてくれることが望ましいですが、一発クリアは中々難しいです。

ちなみに、この記事をまとめる前に検証した際には、Automationのエラーが3回起こっています！笑

そのエラーの原因が何なのか？を探り、解決することが重要(^^)

設定したAutomationが動かないときの確認方法

Automationエラーの確認方法

これを覚えておくとアプリの検証が非常に楽になるため、ぜひ覚えておきましょう(^^)

エラーメッセージを確認することで、何が原因でAutomationが動かないのか？が一目瞭然になります(^^)

アプリの動作確認

それでは気を取り直してアプリの動作確認をします。

データを新規に登録

作成日、見積書番号、取引先を入力し、保存します。

見積書に明細を追加する

明細をつけるボタンは、見積書発行のアクションボタンを押すまで何回でも押すことが可能です。

見積書発行ボタンを押してメール送信を行う

見積書発行ボタンを押すことで、登録されているメール本文で自動でメールが送信されます。

ちなみに添付されている見積書は↓

いい感じやん！！

アプリのViewを整える

アプリの動作検証は問題がなかったので、最後にアプリの見栄えを整えます。

アプリ開発者のセンス次第で、UIやUXは変化します。

誰が触ってても直感的に使うことができ、また使いたいと思わせる

これが目指すべきゴールだと思います。

今回のアプリでは、下図のVewで落ち着きました(^^)

見積書の作成

まずは、新規の見積書を作成するために必要なForm Viewを設定

次に、新規で見積書を発行したあとに明細を付与するための導線を作っておきます(^^)

また、ViewタブのアイコンをわかりやすいものにすることでUIを高めることが可能です。

商品の登録

ここは特に難しい設定はないため、説明は割愛します。

取引先の追加

ここも特に難しい設定はないため、説明は割愛します。

発行した見積書

これまでに発行した見積書を確認するためのTable View

グルーピングやソート機能を使い、登録されている情報をよりクリアにしましょう(^^)

まとめ

以上、見積書アプリの作成（ガチ実践）の記事でした。

記事にまとめている最中にも、追加したいと思える機能が浮かび上がり、まとめるのが大変でした・・

すでにアプリをいくつも開発したことがある読者のかたは、真似してみると新たな発見があるかも？です。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)