コピペ帳アプリの作り方解説!リスト機能の上手な使い方【テンプレート付き】

皆さんはコピペ帳アプリを使っていますか?

忘れやすいログインIDやパスワードなどを登録しておき、タッチしたらコピーしてくれる便利なやつです。

スマホのストアにあるものだとフォルダの追加や広告の削除に課金が必要になる場合がありますが、自分で作ればなんとタダです!

今回は、コピペ帳アプリをもとにGlideのアプリ作成でよく使う「リスト機能」をうまく活用する方法を解説していきます。

完成品のテンプレートリンクを用意しているので、ここはどうやって作ってるのかな、など参考にしてください。アプリを公開してそのまま使うこともできます。

目次

コピペ帳アプリの概要

はじめに、今回作成するアプリの概要をざっくり紹介します。

  • フォルダ名をリストで一覧表示
  • フォルダの中にコピペしたいデータをリストで一覧表示
  • アイテムをタッチしたらクリップボードにコピー
  • 好きなところに貼り付け

いろんなサイトに登録していて、IDやパスワードの管理が大変な方は便利に利用していただけると思います。

また、Glideの基本的な操作や機能の使い方を覚えるのに丁度良い簡単なアプリなので、実際に作ってみたりカスタマイズして操作を覚えるのにも役立ちます!

データテーブルの用意

それではさっそくアプリのデータを用意しましょう。

今回は、フォルダごとにコピペデータを振り分けられるようにするため、フォルダ用とコピペデータ用で二つのテーブルを作成します。

フォルダテーブル

フォルダを表示するためのデータでは、RowIDとフォルダ名、2つの列を用意します。

RowID列は、列の名前をダブルクリックしてから、列タイプを以下の手順で設定することで作成できます。

RowID:重複しない値を自動生成してくれる列の種類。行を指定したい場合に使用する。1つのテーブルにつき、1つしかRowID列は作成できない。

これで一つ目のデータ作成はOKです!

コピペデータテーブル

お次はメインとなるコピペデータのテーブルです。

こちらはシンプルに、タイトル、コピーしたいデータ、フォルダIDの3つを用意すれば完成です。

リスト機能でフォルダ一覧を表示

リスト機能追加

データの追加が完了したら、フォルダを表示するためにCOMPONENTSタブからリスト機能を追加しましょう!

この手順で追加できます。

リストの見た目を整える

リストが追加できたら、不要な表示は削除して見やすくしていきます。

このリストにはフォルダ名の表示だけが必要なので、ITEM DATAから不要な部分を削除しましょう。

今回はタイトルだけでOK。

フォルダ追加ボタンを整える

リスト機能には、デフォルトで「+Add」とアイテムを追加するボタンが右上についているので、日本語にしておきましょう。

この手順でAddの部分を選択すると、文字を変えることができます。

フォルダの中身を作る

リストの表示を良い感じにすることができたら、次は肝心なフォルダの中身(コピペデータ)を作成します。

フォルダ名をタッチした時の表示修正

作成したフォルダ名をタッチすると、「フォルダ」テーブルの情報を確認できるようになっています。

デフォルトでCOMPONENTSタブに色々と機能が入っていますが、

コピペ帳アプリでは、「フォルダ」テーブルではなく、「コピペデータ」テーブルの情報を表示したいため、今表示されているCOMPONENTSタブの機能はすべて消してください。

コピペデータを表示するリスト機能を追加

COMPONENTSタブが空になったら、ここにリスト機能を追加します。

ここで追加したリスト機能は、デフォルトで「フォルダ」テーブルを参照しているので、以下の手順で「コピペデータ」を参照するように設定します。

まだコピペデータは用意していないのでリスト表示されませんが、データが追加されるとちゃんとリスト表示されるようになります。

コピペデータ追加フォームの編集

次に、右上の+Addボタンを押したときに表示されるフォーム部分を編集します。

アイテムのタイトル、コピーしたいデータ、フォルダIDという、データ作成時に用意した3つの入力欄が表示されます。

ここで、追加するデータが、どのフォルダで作成したものかを指定するために、フォルダIDが初期値で入力されるように設定します。

  • COMPONENTSタブからフォルダIDの入力欄を選択
  • デフォルト値のアイコンを選択
  • フォルダデータで作成した、RowIDを選択

この手順で、アイテムを追加するときはいつでも開いているフォルダのRowIDが自動的に入力されるようになります。

フォルダIDの入力欄を非表示にする

自動的に入力されるように設定したため、このフォーム画面にフォルダIDの項目があると邪魔になってしまいます。

なので、入力は自動でされるけど使用者は見えない、という設定にしましょう。

  • COMPONENTSタブでフォルダIDが選択されている状態で、Optionを選択
  • 非表示にする条件を追加
  • 条件を設定

今回は常に非表示にしたいため、タイトルに入力されたが「 ^ 」という文字に完全一致しないとフォルダIDの入力欄が見えなくなる設定にしています。

フォーム入力時にデフォルト値を設定したい場合、非表示の機能はよく使うのでぜひ覚えておいてほしい設定です!

リストの見た目を調整

コピペデータが無事追加されたら、リストの見た目を整えていきます。

このように、タイトルとコピーされるデータがすぐにわかるように修正しました。

ここはお好みのデザインで設定してください。

アイテムをタッチした時にコピーをする設定

リストで表示されているデータをタッチした時、コピーされるように設定を行います。

  • COMPONENTSタブでリスト機能を選択
  • Actionを選択
  • 高度なアクション設定を開く
  • アイテムクリック時のアクションを編集
  • アクションの選択
  • Dataの機能一覧から
  • クリップボードにコピーを選択

クリックする箇所は多いですが、やっていることはタッチした時にどのアクションを実行するか選んでいるだけです。

クリップボードにコピーのアクションを設定することで、タッチ時にコピーが実行されます。

コピーするデータを選択して、設定完了です。

フォルダごとに表示するアイテムを制限する設定

今のままだと、追加したコピペデータはどのフォルダを選択しても表示されてしまいます。

フォルダごとにアイテムを表示したい場合は、リストで表示されるデータに制限をかける必要があります。

  • COMPONENTSタブでリスト機能を選択
  • Optionを選択
  • フィルタする条件を追加

条件は、データ追加時に自動入力されたコピペデータのフォルダIDと、開いているフォルダのRowIDが一致する

という内容で設定することで、フォルダ内で追加したデータのみが表示されるようになります。

Option内の非表示機能とフィルタ機能の違い:

非表示機能
機能そのものを条件によって非表示にする。特定の条件時に機能を使わせたくない、見せたくない場合に使用。

フィルタ機能
機能で扱われるデータを条件によって非表示にする。今回のように、特定の値を持つ行だけを対象にデータを表示したい場合などに使用。

コピペ帳アプリ完成!

ここまで解説を読んでいただきありがとうございます。これでコピペ帳アプリが完成しました!

Glide無料枠の25,000行分のコピペデータを登録できるので、IDやパスワードの管理には困らなくなると思います!

今回はリスト機能をメインに、非表示機能やフィルタ機能、アクションの編集など、よく使う機能を紹介しました。

別の記事でもGlideの機能について解説しているので、分からない部分があればぜひ参考にしてください。

この記事は以上です、それではまた別の記事で!

よかったらシェアしてね!
  • URLをコピーしました!
目次