画像カタログアプリ

Google Sheets APIを使って画像ファイルのカタログアプリを作ります

このチュートリアルでは、Google Sheets APIを使ってGoogleスプレッドシートに入力されたデータを表示するアプリを作ります。複数台のスマホからの同時アクセスも可能ですし、Googleスプレッドシートでデータを変更するとアプリに表示されるデータもリアルタイムで反映されます。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ImageCatalog“と名前を付けます。

Googleスプレッドシートの作成

ここにある手順でGoogleスプレッドシートを作成し、データを入力します。こんな感じで入力しました。クリックするとGoogleスプレッドシートを見れます。シート名は"画像“です。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"画像カタログ"にします。

このアプリではGoogleスプレッドシートから名前、アプリ名、説明、画像URLを取得してアプリで表示するので、表示に必要なコンポーネントを配置します。

上から順に、名前選択用にスピナー（名前選択スピナー）、水平配置内にラベルを２個（ラベル2、アプリ名）、ラベル（説明）、ウェブビュー（画像ウェブビュー）、そして非可視コンポーネントのスプレッドシート（スプレッドシート1） です。それぞれのコンポーネントの名前はカッコ内のものです。

プロパティ設定について

• ラベル2：テキスト="アプリ名："
• スプレッドシート1：使用するスプレッドシートの スプレッドシートID を取得し、それをプロパティのスプレッドシートIDに設定してください

  • スプレッドシートIDは以下の手順で取得できます：

    • スプレッドシートを開く。
    • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
    • よくわからない場合は 1YhL3cK2hcg2HvpgK8FNJEyRkRyak9G3kE-HKAoQsF68 を使ってください。このスプレッドシートのスプレッドシートIDです。

ブロック編集機能を使用したプログラミング