# イベント用に「カレンダーに追加」ボタンを追加する方法 *スキルレベル: 中級* ## 開始前の準備 * コンピューターでのコピー＆ペースト方法を知っていること * Adaloアプリのデータベースにアクセスする方法を知っていること * この機能を実装するために有料プランは必要ありません ## 手順 {% tabs %} {% tab title="シンプル" %} **1.)** **"Events"** という新しいコレクションを作成します **2.)** コレクション内のテキストプロパティの名前を **"Event Title"** に変更します **3.)** **"Start Date and Time"** という日付と時刻のプロパティを追加します **4.)** もう1つの日付と時刻のプロパティ **"End Date and Time"** を追加します **5.)** 画面テンプレートから新しいシンプルリスト画面を追加します **6.)** **"何のリストですか？"** ドロップダウンメニューから **"Events"** を選択します **7.)** **右側セクション** のドロップダウンメニューを開き、カレンダーに追加ボタンとして使用するボタンアイコンを選択します **8.)** このボタンに **リンク** アクションを追加し、**ウェブサイト** にリンクします **9.)** カレンダーの招待状を生成するために、[Agical](https://blog.teknkl.com/introducing-agical-io-the-smarter-ics-file-generator/) という素晴らしいツールを使用します。招待状を生成するために、まずこのURLをアクションの入力フィールドにコピー＆ペーストします: ``` https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME ``` **10.)** このリンク内のすべての **大文字** のテキスト部分を、現在のイベントオプションの[マジックテキスト](https://help.adalo.com/glossary#magic-text)で適切に置き換えます。たとえば、`MAGICTEXTSUBJECT` の部分を **Events** コレクション内の **Subject** プロパティに置き換えます。リンク内の `reminder` 部分の数字を変更すると、イベントのアラーム時間が異なります。 **11)** マジックテキストの日付にある鉛筆アイコンをクリックし、フォーマットを **"フォーマットなし"** に設定します **例:** ![カレンダー招待状を生成するための設定リンクの例を示すアクションの例。](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d71eaf5f8f7df4d77bdfd700ccbe62d317c942ad%2FScreenshot%202021-07-20%20125039.png?alt=media) {% endtab %} {% tab title="詳細" %} **1.)** **"Events"** という新しいコレクションを作成します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-091e2093d4819a19b22ab0f5f29d216252eb5a57%2Fadd%20events%20collection.gif?alt=media) **2.)** コレクション内のテキストプロパティの名前を **"Event Title"** に変更します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5045f34c9c0eaaa56bb89fa0405e90f46ba22ffb%2Fchange%20title.gif?alt=media) **3.)** **"Start Date and Time"** という日付と時刻のプロパティを追加します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e36cb98303ad96bff0fb7596fd6b9e91f2af9df1%2Fadd%20start.gif?alt=media) **4.)** もう1つの日付と時刻のプロパティ **"End Date and Time"** を追加します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d99c2c227b52ded9c55fdca0522ddf19f66f7a73%2Fadd%20end.gif?alt=media) **5.)** 画面テンプレートから新しい **Simple List** 画面を追加します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5df2f36792b88c269b42ecf2dc47f1bdc7bc9f25%2Fadd%20screen%20list.gif?alt=media) **6.)** 新しい画面上のリストを選択します。 **"何のリストですか？"** ドロップダウンメニューから **"Events"** を選択します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-069dd0f4fe1ce6ff9e4317b1594a1a62bbe26d96%2Fchange%20list%20type.gif?alt=media) **7.)** **右側セクション** のドロップダウンメニューを開き、カレンダーに追加ボタンとして使用するボタンアイコンを選択します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d0ca3a749fee64a2e7c7df999eeda81dd90e0c8a%2Fenable%20right%20section.gif?alt=media) **8.)** このボタンに**リンク**アクションを追加して、**ウェブサイト**にリンクする ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0994c5143b81ee31fb1f128a760bff3b33453358%2Fadd%20link%20action%20\(1\).gif?alt=media) **9.)** カレンダー招待状を生成するために、[Agical](https://blog.teknkl.com/introducing-agical-io-the-smarter-ics-file-generator/)という素晴らしいツールを使用します。招待状を生成するために、まずこのURLをアクションの入力フィールドにコピーして貼り付けます: ``` https://ics.agical.io/?subject=MAGICTEXTSUBJECT&reminder=30&dtstart=STARTDATETIME&dtend=ENDDATETIME ``` ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5133b0d11f9565140dc1c22be87b58d49c4b3599%2Fpaste%20link.gif?alt=media) **10.)** このリンク内のすべての**大文字**のテキストセクションを、現在のイベントオプションからの適切な[マジックテキスト](https://help.adalo.com/glossary#magic-text)で置き換えます。たとえば、`MAGICTEXTSUBJECT`部分を**Events**コレクション内の**Subject**プロパティで置き換えます。また、リンク内の`reminder`部分の数字を変更して、異なるイベントアラーム時刻を分単位で設定できます。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-78f8aad2efa77a63c1abbfd7e2e0862805e28f94%2Freplace%20link%20text.gif?alt=media) **11)** マジックテキストの日付にある鉛筆アイコンをクリックし、フォーマットを\*\*"フォーマットなし"\*\*に設定します ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-3f244cb4422c483a716b1eacaf0e8ea688a54d12%2Fchange%20date%20formatting.gif?alt=media) **例:** ![カレンダー招待状を生成するための可能なセットアップリンクを示す例のアクション。](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d71eaf5f8f7df4d77bdfd700ccbe62d317c942ad%2FScreenshot%202021-07-20%20125039.png?alt=media) {% endtab %} {% tab title="ビデオ" %} {% embed url="" %} {% endtab %} {% endtabs %} ## 結果 リスト内のボタンをクリックすると、ユーザーにイベントを電話のカレンダーに追加するように求められます！Webアプリの場合、ユーザーにカレンダー招待状ファイル（.ics）のダウンロードを促します。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-7077e1085105e4f4424918256278d3c07ca440c8%2Fezgif-3-e5529b931bb6.gif?alt=media) ## もっと詳しく知る * リスト内でないボタンにもこのアクションを追加できます。ただし、ボタンがある画面に現在のイベント[データが利用可能](https://help.adalo.com/glossary#available-data)である必要があります。 * リンクURLには、イベントの繰り返しシリーズ、場所、主催者情報など、さらに多くのカレンダー招待状オプションを添付することもできます。以下に、リンクURLに添付できるオプションの完全なリストがあります。これらのオプションを添付する際には、各オプションの前に\*\*`&`**記号、後に**`=`\*\*記号、その後に使用したい[マジックテキスト](https://help.adalo.com/glossary#magic-text)の値を入れる必要があることを忘れないでください。 | **リンクオプション** | **説明** | | ------------- | --------------------------------------------------------------------------------------- | | `description` | イベントの詳細な説明 | | `organizer` | イベントを主催する人の名前 | | `location` | イベントの場所 | | `attach` | ウェビナーリンクなど、イベントのURLやリンク | | `subject` | イベントの件名やタイトル | | `dtstart` | イベントの開始日（フォーマットなし） | | `dtend` | イベントの終了日（フォーマットなし） | | `recur` | 有効な値は **`weekly`** および **`monthly`** です。 **`recuruntil`** オプションと一緒に使用します | | `duration` | イベントの長さを指定するために **`dtend`** の代わりに使用します。有効な値は **`1H`** は1時間、**`30M`** は30分のようにフォーマットされます | | `reminder` | イベントの開始前にリマインドを受け取りたい時間（分単位）。有効な値は1以上の数値です。例えば、**`15`** はミーティングが始まる15分前にユーザーにリマインドします。 | | `recuruntil` | **`recur`** オプションと一緒に使用します。これは繰り返しイベントシリーズが終了する日付です（フォーマットなし）。 | | `allday` | 終日続くイベントの場合は省略します。終日続くイベントの場合は、このオプションの値は **`1`** である必要があります | | `format` | Android 用の Google カレンダーリンクを生成したい場合は、値として **`gcal`** を入力してください | ## ヘルプ この記事で追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿にはこの記事へのリンクも貼っておいてください！