[Drupal]この画面を閉じるボタンの作り方

やりたいこと

クリックすると現在の画面を閉じるボタンを作りたい

やり方

ボタンの作成

フォームもしくはレンダリング配列にボタンの配列を追加する。JS側で目印にするため任意のクラスを付与しておく

class Button

$form['actions']['close_tab'] = [
    '#type' => 'button',
    '#value' => 'この画面を閉じる',
    '#attributes' => [
      'class' => ['js-close-tab'],
    ],
  ];

この時点でボタンが表示されているかチェックするのがおすすめ。

JSファイルの作成

先程指定したクラスを持つボタンをクリックすると画面を閉じるJSを作成してモジュールやテーマ直下のjsディレクトリに配置する。

置き場所

# モジュールの場合
modules/custom/my_module
└── js
    └── close-tab.js

# テーマの場合
themes/custom/my_thems
└── js
    └── close-tab.js

close-tab.js

(function ($, Drupal) {
  Drupal.behaviors.myModuleCloseTab = {
    attach: function (context, settings) {

      // js-close-tabというクラスを持つボタンをクリックすると画面を閉じる.
      $('.js-close-tab').once('close-tab').on('click', function () {
        window.close();
      });

    }
  };
})(jQuery, Drupal);

JSライブラリの作成・添付

パフォーマンス上の理由で、DrupalではJSファイルを作成しただけでは読み込まれないようになっている。読み込ませるには

• ライブラリを作成
• フォームレンダリング配列にライブラリを添付

という作業が必要。

Defining a library

ライブラリの作成

libraries.ymlを作成してモジュールもしくはテーマのルートディレクトリに配置する。

置き場所

# モジュールの場合
modules/custom/my_module
├── js
│   └── close-tab.js
└── my_module.libraries.yml

# テーマの場合
themes/custom/my_theme
├── js
│   └── close-tab.js
└── my_theme.libraries.yml

.libraries.yml

close-tab: # 任意の名前
  version: 1.x
  js:
    js/close-tab.js: {} # モジュールもしくはテーマのルートから見たJSファイルの相対パス
  dependencies: # 依存ライブラリ
    - core/drupal
    - core/jquery
    - core/jquery.once

ライブラリの読み込み

さきほどボタンを追加したフォームやレンダリング配列に以下の行を追加する。#attachedやlibraryのタイポに注意

 $form['#attached']['library'][] = 'my_module/close-tab'; // モジュール名orテーマ名/ライブラリ名

Attaching a library to pages

キャッシュクリアして画面をリロードし、ボタンをクリックして画面が閉じれば完成！

ボタンが反応しない場合のトラブルシューティング

この画面を閉じるボタンをクリックしても画面が閉じない場合は以下の項目をチェック

• ボタンにJSクラスが付与されてるか？ → ブラウザの検証ツールでチェックして、付与されていなければレンダリング配列のボタンの配列にタイポが無いかチェック
• JSファイルが読み込まれているか？ → close-tab.jsにalert()やconsole.log()を書いてブラウザをリロードし、反応するかチェック。読み込まれていなければ以下の項目をチェック
  • ファイル名やディレクトリ名にタイポが無いか
  • libraries.ymlの内容にタイポが無いか
• そもそもwindow.close()で閉じることのできる画面か？→私が見たところ、target="_blank"で自動的に開かれたタブの場合は閉じることができましたが、自分でリンクをクリックするなどして開いた画面は閉じることができませんでした。window.close()の挙動について詳しくはこちらの記事がおすすめです。