What's New Qiita

20190829のHTMLに関する記事は6件です。

  • 投稿日：2019-08-29T23:14:38+09:00

[WordPress]includeしたPHPのソースがブラウザに表示されてしまう

実施環境

  • Windows10
  • xampp
  • WordPress 5.2.2
  • PHP 7.3.7

経緯

独自テンプレート内のindex.phpでhoge.phpをincludeしたところ
hoge.php内のechoで記述したhtmlを認識してしまい、ブラウザ上にPHPのソースが表示されてしまいました。

page-xxx.php
<?php
/**
 * 
 * Template Name:サンプルテンプレート
 * 
 */
get_header();
?>
<?php
  include __DIR__.'index.php';
?>
<?php
  get_footer();
?>
hoge.php
<?php
  function strOutput(){
    echo '<p>hogehoge!</p>'
  }
?>
index.php
<?php
  include __DIR__.'hoge.php';
?>
  <body>
    <div>
      <?php strOutput(); ?>
    </div>
  </body>

解決策

.phpの拡張子を持つファイルをPHPファイルとして認識してもらうためにApacheの設定を修正しました。
xamppがインストール済だと以下に設定ファイルが配置してあります。

C:\\xampp\\apache\\conf\\httpd.conf

ファイルを開き、最下部に以下を追記し保存。

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

Apacheを再起動します。

参考資料

参考にさせていただきました！
http://www.8acrewood.com/wordpress/archives/249

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-29T20:23:57+09:00

inline要素の改行のスペースが気になったので対策を調べた

これはなに

inline要素内で改行するとスペースが入りこむので、見た目的に気になったりする

https://codepen.io/aokiken/pen/vYBLMyv

例えば、以下のような、文章の途中のリンクなどに困る

<p>
  お問い合わせは
  <a href="#">こちらから</a>
  お願いします
</p>

// 出力結果
// お問い合わせは こちらから お願いします

サンプルはあくまで例だが、前後の文章やaタグにclassやattributeなど、内容によっては１行で表現しづらい

vueのカスタムディレクティブを作って解決してみる

https://www.npmjs.com/package/vue-remove-whitespace

<div v-remove-whitespace>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

// 出力結果
// 12345

その他の対応策

改行しなければスペースは入らない

<div>
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

閉じタグの>を改行ればスペースは入らない

<div>
  <span>1</span
  ><span>2</span
  ><span>3</span
  ><span>4</span
  ><span>5</span>
</div>

開始タグの<tag以下を改行ればスペースは入らない

<div>
  <span
    >1</span><span
    >2</span><span
    >3</span><span
    >4</span
    ><span
    >5</span>
</div>

コメントアウトを挟めばスペースは入らない

<div>
    <span>1</span><!--
--><span>2</span><!--
--><span>3</span><!--
--><span>4</span><!--
--><span>5</span>
</div>

jsで改行を取り除けばスペースはなくなる(カスタムディレクティブでも同様のことやってる)

<div id="js_remove_nl">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>
<script>
const removeWhiteSpaceDom = document.querySelector('#js_remove_nl')
removeNlDom.innerHTML = removeWhiteSpaceDom.innerHTML.replace(/\s*<("[^"]*"|'[^']*'|[^'">])*>\s*/g, match => match.trim())
</script>

cssでfont-sizeを0にすれば見た目上スペースはなくなる(コピペにスペースは入り込む)

<div class="remove_whitespace">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>
<style>
.remove_whitespace {
  font-size: 0;
}
.remove_whitespace > span {
  font-size: initial;
}
</style>

float: left(コピペにスペースは入り込む)

<div class='float_left'>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>
<style>
.float_left:after {
  content: "";
  display: block;
  clear: both;
}
.float_left > span {
  float: left;
}
</style>

display: flex(コピペに段落は入り込む)

<div class='flex'>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>
<style>
.flex {
  display: flex
}
</style>

余談

英語圏だと、単語の間にスペースが入るのが基本だから、問題視されないのかなーという

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-29T17:07:58+09:00

サイズがバラバラな画像をレスポンシブで縦横比を揃えて表示させる

やりたいこと

  • サイズがバラバラな複数枚の画像を表示サイズを合わせて表示したい。
  • レスポンシブで縦と横の比率も揃えたい。
  • 画像のトリミングは縦方向も横方向も中央部分が表示できれば良い。

CSS で画像をトリミングする方法

CSS で画像をトリミングするには…で思いつくのは2パターン。
ただしどちらも今回のやりたいことが達成できない:sob:

object-fit を使う方法

object-fit - CSS: カスケーディングスタイルシート | MDN

CSS の object-fit プロパティは、置換要素、例えば <img> や <video> などの中身を、コンテナーにどのようにはめ込むかを設定します。

今やりたいものだと以下のように書く。

img {
  object-fit: cover;
  width: 200px;
  height: 150px;
}

cover という値は、縦横比を維持したまま要素のボックスに収まるように拡大縮小されるとのこと（上記 MDN より）

  • 決められたサイズではみでた部分を非表示にはできる。
  • 縦も横もピクセル数で指定する必要があるのでレスポンシブにならない。

親要素で囲う方法

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.image-trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}
  • 親要素で縦方向（高さ）を横方向（幅）の何パーセントと指定することでレスポンシブできる
  • 縦長画像はボックスいっぱいにできる。
  • ただし、横長画像は上下方向に余白ができてしまう。

解決方法は上記2パターンをかけ合わせ

こんな感じ。

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.image-trim img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

サンプル

サンプルとしてサイズがばらばらな画像を用意してみた。

スクリーンショット 2019-08-29 16.53.27.png

（ありえないほどめちゃくちゃだ……）
しかし、縦長の画像も横長の画像も小さいサイズだってご覧のとおり！

スクリーンショット 2019-08-29 16.56.01.png

小さいサイズの画像も拡大されてガビガビに。
レスポンシブかどうかは以下の Codepen でブラウザのウインドウ幅を変えてみてください。

See the Pen responsive trimming image by Beco (@becolomochi) on CodePen.

トリミング位置を変えたい場合は

「トリミング位置を中央じゃなくて他がいい！」というときは、 object-position で変えることができる。

object-position - CSS: カスケーディングスタイルシート | MDN

object-position: left top; /* 左上 */
object-position: 100px 50px; /* 横方向100px 縦方向50px */

初期値が 50% 50% ということで特に指定しなければ縦方向横方向ともに中央になる。

参考

解決の糸口になったCodepen （ありがとうございます…）
Responsive image with picturefill and object-fit

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-29T15:24:02+09:00

Djangoの入力フォームにCSSを適用する方法

はじめに

Djangoのtemplateで入力フォームを

{{ form.username }}

のように作る時、入力フォームにCSSを適用する方法が分からず、調べてみたのでまとめてみたいと思います。

入力フォームにCSSを適用したい

例えば、ユーザー登録をするフォームを作るために、views.pyでUserCreationFormをformという名前でtemplateに渡してフォームの画面を作るとします。
usernameを記入する欄を

{{ form.username }}

のように作ると、class名をつけることができず、CSSを適用することができません。

CSSを適用させる方法

CSSを適用するための方法を解説します。
まず、仮想環境で

$ pip install django-widgets-improved

というコマンドを実行します。

次に、プロジェクトのsettings.pyで

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

のように追加します。

そして、templateの最初の方に以下を追加します。

{% load widget_tweaks %}

そしたら、

{{ form.username|add_class:'class-name' }}

のように書くことでclass名を設定できます。
あとはCSSで自由に装飾してください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-29T15:19:08+09:00

JSで日数カウンター

  • 恋人の誕生日は何日後かな？
  • このタスクの納期まで、後何日あるのかな？
  • 令和になってから何日経過したかな？

等々、今日を基準に、xxは何日後？何日前？と計算する機会は多いと思います。でも月によって日数が違ったりする関係上、計算がやや大変だったりします。そこで、JSでさくっと日数計算をしてみます。

index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>日数カウンター</title>

<input type="date" id="myDate">
<div id="myMSG"></div>

<script>
    (function() {

        document.getElementById("myDate").addEventListener('change', function() {

            var today = new Date(),
                myDate = new Date(document.getElementById("myDate").value),
                myCount = today.getTime() - myDate.getTime(),
                result;

            myCount = Math.floor(myCount / (1000 * 60 * 60 * 24));

            if (myCount > 0) {
                result = myCount + "日経過しました。";
            } else {
                result = -(myCount) + "日後です。";
            }

            document.getElementById("myMSG").innerHTML = result;

        }, false);

    }());
</script>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-08-29T14:47:23+09:00

ローカル(file:///プロトコル)時に毎回マイクやカメラの使用許可をたずねられる問題を回避する

結論

Chromeの起動時オプションに
--use-fake-ui-for-media-stream
を追加する。

が次の許可を求めていますを無視する。
permissionが常に許可されるので留意すること。

参考情報のほうにFirefox版の対処方法も書いているのでそちらも
(現状FirefoxでSpeechRecognitionはできないけれどカメラや普通の音声入出力には使えるはず)

症状

HTTPサーバーに公開していた音声認識

var recognition = new SpeechRecognition();
// var recognition = new webkitSpeechRecognition();

recognition.start();

をするWebページがあった。
http上ではstart()タイミングで一度だけマイクの使用許可を求められ、
以後何度recognition.start()しても再度使用許可を求められることがなかった。

このHTMLをローカル上にダウンロードし、直接ファイルを開いた場合、
file:///C:/hogehoge
recognition.start()するたびに使用の許可を求めるダイアログが表示されてしまった。

解決方法は結論のとおり、常に許可するオプションで最初の使用許可ダイアログすらスキップする方法を取った。
recognition.start()した時点で問答無用で許可されるので、ローカルだが一応カメラとか発言に注意か。
おそらく自動テスト用のオプションに思えるが、用途に合っていたのでOK

試したけどだめだったもの

ローカルなら事前に
MediaDevices.getUserMedia()
などで許可を取っておかないとダメなのかな？と考えたが、特に関係なし。これも毎回許可を求められらた。

参考

SpeechRecognitionに固執していてよい情報が取得できなかった。
「マイク 許可」などであさっていたが、WebRTCというキーワードは自発的に出てこなかったので以後気をかけるとよさそう。

とりたくなかった方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧