wordpressのpluginでのhandsontableの使用について

表題についてブラウザでエラーがでます。どうすればエラーを解決できるでしょうか？

※補足1- handsontalbeのパスをcdnにすると正しく動きますが、handsontalbe6.2.2を使用したいため質問しています。全ソースを載せます。

※補足2 - wordpressとhandsontalbeを使用する場合の記事がありました。なので、このコードも記載しました。
https://stackoverflow.com/questions/23598044/include-handsontable-in-wordpress-plugin

エラー内容
http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js” からのスクリプトが読み込まれました。しかし、この MIME タイプ (“text/html”) は正しい JavaScript の MIME タイプではありません。

環境：windows10
xampp
firefox
wordpress4.9.10
handsontable7.0.3　

PHP
1<?php
2/*
3Plugin Name: Show Text
4Plugin URI: http://www.example.com/plugin
5Description: プラグイン
6Author: my name
7Version: 0.1
8Author URI: http://www.example.com
9*/
10class ShowText {
11    
12    function __construct() {
13        add_action('admin_menu', array($this, 'add_pages'));
14        add_action('wp_enqueue_scripts', 'my_backend_content_scripts');
15    }
16
17    function my_backend_content_scripts() {
18        wp_register_script( 'my_js', 'http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js', array('jquery'), null, true );  
19        wp_enqueue_script( 'my_js');                
20    }
21
22    function add_pages() {
23        add_menu_page('AAA', 'AAA', 'level_8', __FILE__, array($this, 'show_text_option_page'), '', 26);
24    }
25    
26    function show_text_option_page(){
27    ?>
28    <!DOCTYPE html>
29        <head>
30            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
31
32            <!--
33            <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
34            -->
35            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
36            <script src="http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js"></script>
37
38
39            <script type="text/javascript">
40
41            $(document).ready(function () {
42                var container = document.getElementById('hst');
43
44                              hstdata = new Handsontable(container, {
45                                                             data: [
46                                                                ['バナナ', '100'],
47                                                                ['リンゴ', '120'],
48                                                                ['イチゴ', '140']
49                                                             ],
50                                                             colHeaders: ['名前', '値段(円)'],
51                                                             colWidths: [100,100],
52                                                             copyPaste: false,
53                                                             language: 'ja-JP',
54                                                             licenseKey:'non-commercial-and-evaluation'
55                                                            });
56                              });
57        </script>
58    </head>
59    <body>
60        <div id="hst"></div>
61    </body>
62    </html>  
63
64      <?php    
65    }
66
67}
68
69$showtext = new ShowText;

ご教授よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

全体がわからないので、とりあえず、気になっている部分の指摘だけを...

http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js” からのスクリプトが読み込まれました。しかし、この MIME タイプ (“text/html”) は正しい JavaScript の MIME タイプではありません。

MIME タイプは、基本的に Web サーバで設定すると思うのですが、 .htaccess 等でなにか設定していないでしょうか？

wp_register_script('handsontable', plugins_url() . '/js/handsontable.full.min.js');
wp_enqueue_script('handsontable', array('jquery'));

plugins_url() で、出力されるのは、WordPressインストールURL/wp-content/plugins です。

上記の場合、http://localhost/wordpress にインストールしているのであれば、http://localhost/wordpress/wp-content/plugins` になります。

PHPファイルが、 /wp-content/plugins/show_text/show_text.php と仮定すると、plugins_url( '/js/handsontable.full.min.js', __FILE__ ) のような指定で、http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js が取得できると思います・

また、

<script src='http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js' ?>></script>

は、

<script src='http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js'></script>

でないでしょうか？　　 ?> が余分だと思います。

投稿2019/05/21 23:50

CHERRY

総合スコア25234

yoshio197

2019/05/22 11:05 編集

ソースを修正しました。今記載しているのが、実際に動かしてみてエラーが出るコードです。 MIME タイプについてはcdnでは正しく動いているので問題ないかと... handsontalbe7.0.3は商用では無料で使用できないようなので、6.2.2を使いたいです。

CHERRY

2019/05/22 11:07 編集

CDN から読み込みとというのは、 https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.2/handsontable.full.min.css https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.2/handsontable.full.min.js のような URL を指定した場合ですよね？問題のエラーは、localhost/wordpress/ から JavaScript を読み込むとエラーが出るんですよね？読み込み元のサーバーが異なるので、別々の MIMEタイプが設定されている可能性を考えたのですが... localhost/wordpress/ に他の JavaScript ファイルを置いて読み込んだ場合は、エラーは出ないのでしょうか？なお、Apache の場合、MIMEタイプは、サーバーのディレクトリ単位で設定できるので、特定のディレクトリに .htaccess を置いて、AddType などとすれば、そのディレクトリ(と内包されるディレクトリ)だけ変更できます。 ---- また、上記に記載した URL のように cdnjs には、 6.2.2 も用意されているので、CDN 経由でよみこめますので、 CDN から読み込むように変更してどうなるかを確認してみてください。

yoshio197

2019/05/22 11:14

回答ありがとうございます。 >問題のエラーは、localhost/wordpress/ から JavaScript を読み込むとエラーが出るんですよね？ >読み込み元のサーバーが異なるので、別々の MIMEタイプが設定されている可能性を考えたのですが... 特にApache(xampp)の設定は変えていないです。(ほぼデフォルトです) そうなんですね。6.2.2のcdnがあるのが知らなかったです。検索したら出てきました。 6.2.2版動きました。

yoshio197

2019/05/22 11:36

>localhost/wordpress/ に他の JavaScript ファイルを置いて読み込んだ場合は、エラーは出ないのでしょうか？読み込みできるようです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

wordpressのpluginでのhandsontableの使用について

関連した質問