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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

4020閲覧

PHPで動的に生成したCSSだけがHTTPS通信を通らない

pan_nyaa

総合スコア10

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

2グッド

0クリップ

投稿2016/09/15 02:02

編集2016/09/15 03:01

はじめに、環境はheroku(フルhttps) + wordpressです。

PHPでCSSの動的生成をしてみたかったので、wordpressのテーマ内にある既存のstyle.cssを削除、style.css というディレクトリを作成し、その中にcssを記述した

index.php ????ソースコードです

を置くことで、他ファイル内のCSSへのパス変更をせずに普段通り ~~~/style.css にアクセスすることでcssの動的生成を可能にしました。

ですが、Firefoxでページを確認したところ、安全でないコンテンツが混在していると認識されてCSSの読み込みがブロックされてしまいました。

PHPで動的に生成したCSSファイルがhttpsを通っていないと予想しましたが、そのhttpsを通らない原因がわかりません……。

動的に生成したファイルはhttpsを通らないのでしょうか?

::該当のCSSを読み込ませている箇所は

HTML

1<link rel='stylesheet' id='plain-blog-style-css' href='https://panyaa.herokuapp.com/wp-content/themes/plain-blog/style.css?ver=4.6.1' type='text/css' media='all' />

となっております。
CSSファイルをそのまま読み込ませた場合にはHTTPS関連のエラーは発生しませんが、PHPで動的生成するとエラーになってしまいます。

nnssn, YosukeShiraishi👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/15 02:30

何をどうしたのか分からないので、該当のソースコードを記述してください。
pan_nyaa

2016/09/15 02:32

ソースコードは記事内にリンクしてあります
退会済みユーザー

退会済みユーザー

2016/09/15 02:42

直接記述することに問題があるのでしょうか?また、文脈から何処がソースコードか分からないと感じます。
pan_nyaa

2016/09/15 02:53

PHPでCSSを動的生成することで、本来変数の概念が存在しないCSS内で疑似的に変数やforなどの機能を使うことが出来ます。本来の目的はその機能の使用です。 CSS(PHPとして動作させている)内で<?php ~~~ ?>を使っているだけのことなので特に記事内への目立った記述は必要がないと感じていました。 たしかに ~~~index.php~~~がリンクになっていることは色でしか認識できずわかりづらいと思ったのは同意しますので、目立たせておきますね。
退会済みユーザー

退会済みユーザー

2016/09/15 02:55

問題なのはhttpで読み込まれてしまう、という部分だと思いますので、該当のCSSを読み込ませている部分のソースコードが重要なのかなと思います。
pan_nyaa

2016/09/15 03:00

たしかにその通りですね。該当のCSSを読み込ませている箇所の旨を記述した方がよかったですね…記述しておきます。
kunai

2016/09/15 03:05

自動生成したCSSと、そのCSSを読み込ませているサイトは同じホスト内にいるのでしょうか。 同一サーバ内にいても、VirtualHost設定が異なっていたりしますか?
guest

回答2

0

ベストアンサー

恐らくですが・・・

php

1//Load the main theme stylesheet. 2wp_enqueue_style('plain-blog-style', get_stylesheet_uri());

として読み込ませていますが

php

1//Load the main theme stylesheet. 2wp_enqueue_style('plain-blog-style', get_template_directory_uri() . 'style.css/' );

ではいかがでしょうか?いまhttpsをテストする環境がないので、当てずっぽうですが…

投稿2016/09/15 03:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pan_nyaa

2016/09/15 04:11

get_template_directory_uri() を使い、'style.css/' のところを '/style.css/' と記述したところ、CSSがhttpsで通常通り読み込まれました! そのほかにも、get_stylesheet_uri() . "/" とするだけでもCSSがhttpsで読み込まれました。    どうやら、https://panyaa.herokuapp.com/wp-content/themes/plain-blog/style.css?ver=4.6.1 としてアクセスすると https://panyaa.herokuapp.com/wp-content/themes/plain-blog/style.css/?ver=4.6.1 にリダイレクトされるようなのですが、末尾に / を追加するためのリダイレクトの過程でhttpsからhttpになってしまうようです。このリダイレクトを発生させなければ通常通りhttpsとして読み込まれるようです。 (httpアクセスは全て.htaccessでhttpsにリダイレクトさせていますが、この処理が働かずにブラウザに読み込まれたと推測できますね…)    style.cssというディレクトリの中にindex.phpを置けばアクセス側の見かけ上は単一cssと区別がつかずに扱えると思っていましたがこれは誤りで、PHP上ではきちんとディレクトリとして認識されているのでファイルとして扱おうとすると予期せぬ動作をしてしまう……という初歩的な部分を見落としていたのが原因でした。
guest

0

開発ツールを開いて、以下の部分を確認すれば、原因が特定できます。
ここに http と表示されているものがあるはずです。

デフォルトで「Scheme」は非表示になっていますが、タイトル部分で表示設定すれば表示できます。

イメージ説明

投稿2016/09/15 03:06

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/15 04:13

予想通りですね。 そのファイルを指定している部分の記述を確認すれば、解決ですね。
pan_nyaa

2016/09/15 05:00 編集

kuck1u様の回答のほうに記述した通り、 URL末尾に / を付けるためのリダイレクトを行う過程で、.htaccessで行っているhttpsへの強制リダイレクトをすり抜けてhttpとしてブラウザに渡されているようなのです。読み込みがブロックされたCSSのURLをブラウザで直接読み込んだ場合は、末尾に / が追加されるリダイレクトとhttpsリダイレクトが共に働きましたが、html内で末尾に / を付けずにディレクトリのURLを指定した場合はhttpsリダイレクトが働いていないようなのです。   末尾に / を付けるためのリダイレクトを発生させないように、ディレクトリ名末尾に / を予め記述しておくことでhttp通信になってしまう問題は解決できましたが、.htaccessで行っている強制httpsリダイレクトをすり抜けてしまうのは謎ですね……。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問