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

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

ただいまの
回答率

90.50%

  • jQuery

    6714questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • GitHub

    767questions

    GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

  • Twitter

    661questions

    Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

  • Firebase

    606questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

jQueryを使ってTwitterのWidgetのHeadに外部化したCSSファイルを適用する。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 156

130B84A

score 2

 前提・実現したいこと

jQueryを使ってTwitterのWidgetのHeadに外部化したCSSファイルを適用しようと試みました。

まずはホスティングの段階から苦戦し、FirebaseでのCSSファイルの外部化は諦めました。Github PagesでCSSファイルの外部化をすることにしました(これは以前も使っていたことがあり成功)。

ちなみに貼り付けるTwitterのWidgetはhttps://publish.twitter.comで作成しました。配置する数は2つで1つは@IDのWidget、もう1つはリストのWidgetです。どちらもタイムライン形式を選択しました。

 発生している問題・エラーメッセージ

Refused to apply style from 'https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Google Chromeで確認したところ、上のエラーメッセージが出ていました。要素の検証では下のようにWidgetのHead部分の中に<link>が埋め込まれてはいました。

<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">

しかしTwitterのWidgetには何ら外部化ファイルの内容が反映されていませんでした。

 該当のソースコード

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<a class="twitter-timeline" data-lang="ja" data-height="600" data-theme="light" data-link-color="#E81C4F" href="*Widget1*">Widget1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a class="twitter-timeline" data-lang="ja" data-height="600" data-link-color="#E81C4F" href="*Widget2*">Widget2</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<script>
function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();

  if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
    $twitter_widget_contents.find('head').append('<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">');
  }
  else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();
</script>

 試したこと

Googleでエラーメッセージを検索しました。type="text/css"を書き忘れており、それを書いたら直ったというやりとりは見つかりましたが、ソースコードの通り記載されているので解決しませんでした。
TwitterのWidgetが廃止になる前に私自身が作成したTwitterのWidgetには、今もまだ外部化ファイルのCSSが適用されており、デザインも反映されています。しかし外部化したCSSファイルを適用するという原理は変わらないので関係ないのではないかと思います(素人なのでわかりません)。

エラーメッセージから素人なりに考えたところ、外部化されたCSSファイルを「text/plain」として認識しているためにスタイルが適用されていないのだと思います。しかし「text/css」と指定しているのに何故でしょうか?また、「text/plain」というのもわかりません。

因みに外部化したCSSファイルの中身は圧縮してあります(オンラインサービスを利用)。

 iframeのHeadに外部化したCSSファイルを適用するコード

余談です。気になるので良かったら教えていただきたいです。以下のコードでiframe(TwitterのWidget)に外部化したCSSファイルを適用しようとしたところ、要素の検証ではHeadに<link>が埋め込まれませんでした。これは何故でしょうか?上に貼り付けてある(埋め込みに成功している)コードと何が違うのでしょうか?

jQueryはおろかJavascriptの知識も皆無といっていいのでさっぱりわかりません。

上のコードは何かを条件として適用させようとしているものと推測しています(Timeoutは待ち時間で繰り返す?)。下のコードは有無を言わせずにシンプルにHeadに埋め込むものだと思います。何故下のコードではHeadに埋め込むことすらできないのかが知りたいです。

<script>
$(window).load(function(){
    $('iframe.twitter-timeline').contents().find('head').append('<link href="(URL)" rel="stylesheet" type="text/css" media="all" />');
}
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

raw.githubusercontent.com が配信しているファイルが text/plain、いわゆる普通のテキストファイルの形式の MIME タイプをレスポンスヘッダーに付けて配信していますので、CSS ファイルとして解釈されません。

また <link> タグに type="text/css" を付けても、最近はブラウザのセキュリティの関係で弾かれます。

解決策ですが、Github ページを使ってらっしゃるので、

https://****.github.io/widget.css

を使えば外部向けの URL として良いと思います。また、Github ページでないリポジトリのファイルを使いたい場合は、RawGit を利用すると良いですよ。


iframe の中身を JavaScript で操作するには、基本的に親ページと iframe 内のページが同一ドメインでなければなりません。これもまたセキュリティの関係で、Same-Origin Policy に違反して弾かれてしまうのが理由です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/29 01:54

    凄く申し訳ないのですが、前半部分で仰っていることが理解できません・・・。
    もちろん私の知識不足によるものです。

    しかし、頂いたアドバイスの通りに外部向けのURLを置き換えたところ、無事に反映されました!
    本題はこれで解決してしまいました・・・。
    Githubについての知識もかなり薄いのが原因だったみたいですね。

    もしも良ければですが、余談の部分にも答えていただけないでしょうか?
    できるだけコードをシンプルにしたくて・・・使っているソースコードは最適解でしょうか?

    キャンセル

  • 2018/07/29 01:58

    重ねて申し訳ないのですが、CSSのURLはマスクしていただけないでしょうか?
    マスクし忘れていたのが原因ですが、公開する気が無かったのも事実です。
    同じエラーで見る人もわかる形の範囲で、マスクしていただけると助かります。

    キャンセル

  • 2018/07/29 02:06

    あれ、というか Twitter のウィジェットの中身の iframe って操作できるものなんですか。CORS どうなってんだろう。

    要素の検証というと、デベロッパーツールのコンソールに直打ちした場合ということでしょうか?いまいち私も分かりませんが CORS とかのセキュリティー周りが関係してるのかもしれませんね。

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6714questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    5801questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • GitHub

    767questions

    GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

  • Twitter

    661questions

    Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

  • Firebase

    606questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。