自分のWebサイトにFientaのイベントを表示する

イベントの表示

Fientaのイベントを自分のWebサイトに直接表示できます。少しプログラミングを加えれば、サイトのデザインや構成に合わせて一覧の見た目を整えることも可能です。

公開API

公開APIはRESTをベースとしており、レスポンスはJSON-encoded形式で返され、標準的なHTTPレスポンスコードを使用します。

エンドポイント

このエンドポイントを使うと、1つの主催者に属する公開済みかつ非公開ではない今後のイベント一覧を取得できます:

GET https://fienta.com/api/v1/public/events?organizer=<organiser_id>

<locale>
イベントの希望言語を示す小文字2文字です。他言語で登録されたイベントも返されます。特定の言語のイベントだけを取得したい場合は、クエリに「locale_strict」パラメータを追加してください。

<organiser_id>
Fienta上の主催者IDです。「設定」ページのURL内で確認できます。
例: 設定ページのURLが /my/organizers/1234/edit の場合、organiser_id は 1234 です。

例: 主催者1234のイベントを、英語優先で取得する場合:

GET https://fienta.com/api/v1/public/events?organizer=1234&locale=en

例: 主催者1234のドイツ語イベントのみを取得する場合:

GET https://fienta.com/api/v1/public/events?organizer=1234&locale_strict=de

利用可能なパラメータはAPIドキュメントをご覧ください。

レスポンス

JSON APIレスポンス例:

{"events": [
   {
    "id": 5678,
    "title": "インディーフェスティバル",
    "starts_at": "2020-12-16 19:00:00",
    "ends_at": "2020-12-16 21:15:00",
    "duration_string": "2020年12月16日(月) 19:00 - 21:15",
    "venue": "ミレニアム・パーク",
    "address": "201 E Randolph St, Chicago, IL 60602",
    "description": "郊外で開催される受賞歴のある週末フェスティバルです。",
    "url": "https:\/\/fienta.com\/indie-festival",
    "buy_tickets_url":"https:\/\/fienta.com\/indie-festival",
    "image_url": "https:\/\/fienta.com\/uploads\/5678.jpg",
    "organizer_name": "Smdith Events Ltd.",
    "organizer_phone": "+81 555 666",
    "organizer_email": "[email protected]",
  },
]}

id
イベントの一意のIDです。

title
イベントのタイトルです。

starts_at, ends_at
イベントの開始日時と終了日時です。

duration_string
開始時刻と終了時刻を整形した文字列です。

venue
会場名です。

address
会場住所です。国名は含みません。

description
イベント説明です。HTMLを含めることもできます。

url
Fienta上のイベントページの完全URLです。

buy_tickets_url
イベントのチケット販売ページの完全URLです。Fienta上で販売している場合は「url」と同じ値になります。外部プラットフォームで販売している場合は、その対応するURLが返されます。チケット販売や登録がないイベントでは空の値が返されます。

image_url
イベント画像のURLです。

organizer_name
主催者名です。

organizer_phone
主催者の電話番号です。

organizer_email
主催者のメールアドレスです。

JavaScriptの例

JavaScriptとjQueryを使ってFientaからイベントを取得し、自分のWebサイトでHTMLとして表示する例です:

<div id="events">
  <!-- このdivの中にイベントが描画されます -->
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
  // イベント一覧を入れるHTML要素
  var container = jQuery('#events'); 
  // Fientaから今後のイベントを取得
  jQuery.getJSON('https://fienta.com/api/v1/public/events?organizer=1234', function(data) {
    // 結果を順番に処理
    data.events.forEach(function (event) {
      // イベントをDOMに描画
      container.append(
        '<div>' +
        '<img src="' + event.image_url + '">' +
        '<h2>' + event.title + '</h2>' +
        '<p>' + event.duration_string + ' @ ' + 
        event.venue + ', ' + event.address + '</p>' +
        '<p><a href="' + event.url + '">チケットを購入</a></p>' +
        '<p>' + event.description + '</p>' +
        '</div>'
      );
    });
  });
});
</script>

<!-- 必要に応じて購入フローを埋め込み -->
<script src="https://fienta.com/embed.js"></script>