Formatic-UI の API を使うには？

/ Fomantic-UI / By
ショコラ
ショコラ

Formatic-UI の API を使うには？

謎の項目 API。いったい何ができるのでしょうか？
↓こちらの話です。
https://fomantic-ui.com/behaviors/api.html#/usage

もっさん先輩
もっさん先輩

まず、fomantic-ui でボタンを作ってみました。↓

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
</head>
<body>
  <div class="ui container">
    <div class="ui basic segment">
      <button class="ui primary button">通常のボタン</button>
      <button class="ui primary button" id="button1">アクションボタン１</button>
    </div>
  </div>

<script>
$.fn.api.settings.api = {
  'create user':'/create',
}
$('#button1').api({
  action:'create user',
})
</script>

</body>
</html>

「通常のボタン」を押しても何も起こりませんが、「アクションボタン１」を押すと、/create に GETのリクエスト が飛びました。

受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。

Route::get('/create', function(){
  \Log::debug('create');
});

ルートパラメータを与えられるか確認してみます。

<script>
$.fn.api.settings.api = {
  'create user':'/create',
  'add user':'/add/{id}',
}
$('#button1').api({
  action:'add user',
  urlData: {id:22},
})
</script>

受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。

Route::get('/add/{id}', function($id){
  \Log::debug('add');
  \Log::debug($id);
});
[2022-11-22 00:52:02] local.DEBUG: add
[2022-11-22 00:52:02] local.DEBUG: 22

「API アクションとデータは、メタデータでも指定できます。」とのことなので、これを確認する為に「アクションボタン２」を追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
</head>
<body>
  <div class="ui container">
    <div class="ui basic segment">
      <button class="ui primary button">通常のボタン</button>
      <button class="ui primary button" id="button1">アクションボタン１</button>
      <button class="ui primary button" id="button2" data-action="add user" data-id="23">アクションボタン２</button>
    </div>
  </div>

<script>
$.fn.api.settings.api = {
  'create user':'/create',
  'add user':'/add/{id}',
}
$('#button1').api({
  action:'add user',
  urlData: {id:22},
})
$('#button2').api();
</script>

</body>
</html>

「アクションボタン２」を押すとログファイルに add と 23 が来ました。

[2022-11-22 00:59:13] local.DEBUG: add
[2022-11-22 00:59:13] local.DEBUG: 23

「on:’now’」を付けると、画面を表示した時点で（ボタンを押さなくても）リクエストが送信されました。

$('#button2').api({on:'now'})

fomantic-ui の API がちょっとづつ見えてきました。

実は今までやった送信は GET でした。次、POST 送信に行ってみます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
</head>
<body>
  <div class="ui container">
    <div class="ui basic segment">
      <button class="ui primary button">通常のボタン</button>
      <button class="ui primary button" id="button1">アクションボタン１</button>
      <button class="ui primary button" id="button2" data-action="add user" data-id="23">アクションボタン２</button>
      <button class="ui primary button" id="button3">アクションボタン３</button>
    </div>
  </div>

<script>
$.fn.api.settings.api = {
  'create user':'/create',
  'add user':'/add/{id}',
  'post':'/post',
}
$('#button1').api({
  action:'add user',
  urlData: {id:22},
})
$('#button2').api({on:'now'})
$('#button3').api({
  action:'post',
  method:'POST',
  data:{
    _token:'{{ csrf_token() }}',
    name:'Joe Henderson',
  },
})
</script>

</body>
</html>

↑POST送信は、Laravel なので data に csrf_token を渡しています。
受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。

Route::post('/post', function(){
  \Log::debug($_POST);
});
[2022-11-22 13:23:34] local.DEBUG: array (
  'name' => 'Joe Henderson',
  '_token' => 'HTsMb9eJ6wmI7gHcKE42vPKijIesBGewB1H5yYx4',
)

POST で送信することができました。次に送信する時に、ルートパラメータ、postの値を書き換えることができるようですので確認します。

送信する前に beforeSend で urlData を書き換えることが出来ます。

$('#button1').api({
  action:'add user',
  urlData:{id:22},
  beforeSend:settings => {
    settings.urlData = {id:32}
    return settings;
  }
})

送信する前に beforeSend で post の値を書き換えることが出来ます。

$('#button3').api({
  action:'post',
  method:'POST',
  data:{
    _token:'{{ csrf_token() }}',
    name:'Joe Henderson',
  },
  beforeSend:settings => {
    settings.data.username = 'New User';
    return settings;
  }
})
[2022-11-22 13:45:30] local.DEBUG: array (
  '_token' => 'HTsMb9eJ6wmI7gHcKE42vPKijIesBGewB1H5yYx4',
  'name' => 'Joe Henderson',
  'username' => 'New User',
)

ひとまずここまでです。

以上

Scroll to Top