表題についてブラウザでエラーがでます。どうすればエラーを解決できるでしょうか？
※補足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
/*
Plugin Name: Show Text
Plugin URI: http://www.example.com/plugin
Description: プラグイン
Author: my name
Version: 0.1
Author URI: http://www.example.com
*/
class ShowText {
function __construct() {
add_action('admin_menu', array($this, 'add_pages'));
add_action('wp_enqueue_scripts', 'my_backend_content_scripts');
}
function my_backend_content_scripts() {
wp_register_script( 'my_js', 'http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js', array('jquery'), null, true );
wp_enqueue_script( 'my_js');
}
function add_pages() {
add_menu_page('AAA', 'AAA', 'level_8', __FILE__, array($this, 'show_text_option_page'), '', 26);
}
function show_text_option_page(){
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<!--
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://localhost/wordpress/wp-content/plugins/show_text/js/handsontable.full.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var container = document.getElementById('hst');
hstdata = new Handsontable(container, {
data: [
['バナナ', '100'],
['リンゴ', '120'],
['イチゴ', '140']
],
colHeaders: ['名前', '値段(円)'],
colWidths: [100,100],
copyPaste: false,
language: 'ja-JP',
licenseKey:'non-commercial-and-evaluation'
});
});
</script>
</head>
<body>
<div id="hst"></div>
</body>
</html>
<?php
}
}
$showtext = new ShowText;
ご教授よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
全体がわからないので、とりあえず、気になっている部分の指摘だけを...
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>でないでしょうか？ ?> が余分だと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.20%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2019/05/22 19:53 編集
MIME タイプについてはcdnでは正しく動いているので問題ないかと...
handsontalbe7.0.3は商用では無料で使用できないようなので、6.2.2を使いたいです。
2019/05/22 20:05 編集
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 から読み込むように変更してどうなるかを確認してみてください。
2019/05/22 20:14
>問題のエラーは、localhost/wordpress/ から JavaScript を読み込むとエラーが出るんですよね？
>読み込み元の サーバーが異なるので、別々の MIMEタイプが設定されている可能性を考えたのですが...
特にApache(xampp)の設定は変えていないです。(ほぼデフォルトです)
そうなんですね。6.2.2のcdnがあるのが知らなかったです。検索したら出てきました。
6.2.2版動きました。
2019/05/22 20:36
読み込みできるようです。