AirLabs Data API Real Flights

投稿日: 投稿者:

OpenSky のフリーのフライトライブのAPIが2022年5月頃から利用制限がかかるようになり日次で超過すると使えなくなり、他を探していたところ AirLabsのFlight Tracker Real Flightsで同じことができるので使ってます。

AirLabs Home

OpenSkyのフライトライブになかった、フライト番号、出発空港、到着空港なんかも入っていてFlightRadarのデータに近く便利ですが、更新インターバルがやや長く、20秒間隔くらいでアップデートされています。
リクエストパラメーターにバウンズの他、エアライン、空港が使えます。

Flight Tracker API

< リクエストパラメーター >

< 応答例 >

 

 

 

 

 

 

 

 

 

 

 

 

 

< 利用例 >
羽田到着機でフィルター

ANAでフィルター

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空情報 2023年 3月号 [雑誌]
価格：1425円（税込、送料無料) (2023/2/9時点)

楽天で購入

 

 

 

Tabulator コンテキストメニュー

投稿日: 投稿者:

ここで教えていただきました。

< コード例 >

HTML

        <!-- 空港テーブル本体 -->
        <div id="aptable" class="main_table"></div>
        <!-- コンテキストメニュー -->
        <div id="aptable_contextmenu" class="contextmenu-wrapper" style="display: none;">
            <div class="contextmenu-contents apcntxtdiv">
              
                <!-- 出発ライブ -->
                <ul id="cntxt_livemap_ul_arv" class="curpo apcntxt">
                    <img id="cntxt_livemap_icon_arv" src="Img/arrival_48_green.png" width="18" />
                    <span id="cntxt_livemap_arv">Show arrival LiveMap</span>
                </ul>
                <!-- 到着ライブ -->
                <ul id="cntxt_livemap_ul_dep" class="curpo apcntxt">
                    <img id="cntxt_livemap_icon_dep" src="Img/departure_48_blue.png" width="18" />
                    <span id="cntxt_livemap_dep">Show departure LiveMap</span>
                </ul>
                
                <!-- 出発ステータスリンク -->
                <ul id="cntxt_status_ul_arv" class="curpo apcntxt">
                    <img id="cntxt_status_icon_arv" src="Img/arrival_48_green.png" width="18" />
                    <span id="cntxt_status_arv">Open arrival status</span>
                </ul>
                <!-- 到着ステータスリンク -->
                <ul id="cntxt_status_ul_dep" class="curpo apcntxt">
                    <img id="cntxt_status_icon_dep" src="Img/departure_48_blue.png" width="18" />
                    <span id="cntxt_status_dep">Open departure status</span>
                </ul>
                
                
                <!-- SkyVector -->
                <ul id="cntxt_skyvec_ul" class="curpo apcntxt">
                    <img id="cntxt_skyvec_icon" src="Img/skyvector.png" width="18" />
                    <span id="cntxt_skyvec">Open SkyVector</span>
                </ul>
                <!-- Airnav -->
                <ul id="cntxt_airnav_ul" class="curpo apcntxt">
                    <img id="cntxt_airnav_icon" src="Img/airnav.png" width="18" />
                    <span id="cntxt_airnav">Open AirNav</span>
                </ul>
                 <!-- FlightPlan -->
                 <ul id="cntxt_fplan_ul" class="curpo apcntxt">
                    <img id="cntxt_fplan_icon" src="Img/flightplan_icon.png" width="18" />
                    <span id="cntxt_fplan">Open FlightPlan</span>
                </ul>
                 <!-- LiveATC -->
                 <!--<ul id="cntxt_liveatc_ul" class="curpo apcntxt">
                    <img id="cntxt_liveatc_icon" src="Img/liveatc.png" width="18" />
                    <span id="cntxt_liveatc">Open LiveATC</span>
                </ul>-->

            </div>
        </div>

カラムのセルコンテキストイベントから自作メニューを呼ぶ


    // 行番号 //
    {
      title: 'No.',
      field: 'rowno',
      formatter: 'rownum',
      frozen: true,
      width: 16,
      hozAlign: 'right',
      cssClass: 'cell_num',
      cellContext: function (event, cell) {
        //event - the click event object
        //cell - cell component

        const row = cell.getRow()

        $(".apcntxtdiv").show()

        // 通常の右クリックメニューを停止 //
        event.preventDefault()
        // 代わりに自作のメニューを表示 //
        showNoContextMenu(row, event.pageX, event.pageY)
      }
    },

自作メニュー


  /**
   *  No列コンテキストメニュー
   * @param {type} row　行オブジェクト
   * @param {type} posx ページX位置
   * @param {type} posy ページY位置
   * @returns {undefined}
   */
  const showNoContextMenu = (row, posx, posy) => {

    const cm = document.getElementById("aptable_contextmenu")
    
    // 行のデータ //
    const icao = row.getData().cdIcao
    const iata = row.getData().cdIata
    const city = row.getData().nmCity
    const apname = row.getData().nmAirport

    // 非表示をやめて、クリックした位置に表示する
    cm.style.left = (eval(posx) + eval(20)) + 'px'
    cm.style.top = (eval(posy) + eval(10)) + 'px'
    cm.style.display = ''

    // メニューのテキストを列の値で変更 //
    $("#cntxt_livemap_arv").text(iata + " Show arrival LiveMap")
    $("#cntxt_livemap_dep").text(iata + " Show departure LiveMap")

    $("#cntxt_status_arv").text(iata + " Open arrival status")
    $("#cntxt_status_dep").text(iata + " Open departure status")

    $("#cntxt_skyvec").text(icao + " Open SkyVector")
    $("#cntxt_airnav").text(icao + " Open AirNav")
    $("#cntxt_fplan").text(icao + " Open FlightPlan")
    $("#cntxt_liveatc").text(icao + " Open LiveATC")


    $(".apcntxt").show()

    $(".apcntxt").off("click")

    // @@ アイテムをクリックした時 @@ //
    $(".apcntxt").on("click", function (e) {

      cm.style.display = 'none'

      const id = $(this).attr("id")

      // == id別の処理 省略 == //
      


    })

  }

< 画面例 >

Tabulator テーブルの行IDを使えるようにするため

投稿日: 投稿者:

Tabulator で選んだ行などに対して処理を行いたい場合、一意に識別したい場合のIdの使い方です。

詳しくはこちら

< コード例 >

カラムに非表示のID列をセット

// 行ID //
{field: "id", visible: false},

行選択

// テーブル行選択 //
table.selectRow(0) //select row with id of 0

行Id取得

// 行ID取得 //
const rowidx = row.getIndex()

サーバー側

  // パラメータセット //
  $stmt = $dbh->prepare($SQL);
  $stmt->bindvalue(':MINDT', $mindt, PDO::PARAM_STR);
  $stmt->bindvalue(':MAXDT', $maxdt, PDO::PARAM_STR);
  $stmt->bindvalue(':GROUP', $group, PDO::PARAM_STR);
  $stmt->execute();

  $response = new stdClass();

  // 結果格納 //
  $i = 0;
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

    $response->data[$i]["ID_BOOK"] = $row["ID_BOOK"];
    $response->data[$i]["NM_GROUP"] = $row["NM_GROUP"];
    
    // Tabulator行ID //
    $response->data[$i]["id"] = $i;

    // == 省略 == //

    $i++;
  }
} catch (PDOException $e) {
  var_dump($e->getMessage());
}

echo json_encode($response, JSON_NUMERIC_CHECK);