投稿日：2019-12-09T23:26:05+09:00

InternetExplorerを拒否するサイトの作り方

InternetExplorer の対応が面倒くさい

私は，HTML・JavaScript の初心者で現在勉強中なのですが，普段は Google Chrome と Edge で動作確認をしており自分の作ったサイトを IE で見てみるとデザインが酷いことになっていました。一応（少なくとも Chrome と Edge では）レスポンシブ対応にしたはずなのですが，色々大きさが変なことになっていました。

ええい！面倒くさい！IE を拒否してしまえ！！ということで，IE を拒否する仕様にしました。

ただし，IE を拒否するとサイトのアクセス数が激減したりユーザーの満足度が下がる可能性があるので注意が必要です。

方法

方法としては，JavaScript を使って，IE でアクセスするとサイトが IE に対応していない旨が書かれたページにリダイレクトされ，Google Chrome のインストールを促すというものです。

IE 判定
IE_boycott.js
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('msie') != -1 ||
    userAgent.indexOf('trident') != -1) {
        window.location.replace("do_not_use_ie.html");
}
これを HTML の中に書き込むか，読み込むかします。

userAgent で IE かどうかを判定し，IE なら強制的に do_not_use_ie.html にリダイレクトしています。

開発者ツールを使って userAgent を書き換えられたらリダイレクト回避されてしまいますが，そんなことをするような人はとっくに別のブラウザに乗り換えているでしょう（たぶん）。

リダイレクト先

正直リダイレクト先は何でもよいですし，直前まで見ていたところに戻すこともできますが，一応メッセージを表示します。
do_not_use_ie.html
<h1>Boycott Internet Explorer</h1>
<p>
    このサイトは，Internet Explorer向けには作られていません。Internet Explorerでは，このサイトのレイアウトが最悪な状態になるでしょう。これは，Internet Explorerを考慮せず，最新のブラウザ向けにこのサイトが作られている為です。<br>
    正しい状態でこのサイトを閲覧したい場合は他の最新のWEBブラウザを使用してください。このサイトでは，Internet Explorerを完全に切り捨てます。
</p>
<p>
    はっきり言ってしまいましょう。Internet Explorerは，<strong>時代遅れ</strong>です。開発したMicrosoftも使用中止を呼び掛けています。<br>
    しかし，Internet Explorerを使っている人がなんと多いことか。そのおかげでWEBデザイナーの人たちが非常に苦労し，迷惑しているんです。最新の技術に対応していない時代遅れでも表示できるようにと。<br>
    本来，これは無駄な労力です。Internet Explorerを使う人が少しでも減れば，彼らが苦労せずに済みます。しかも，あなたも最新の技術で最高のネットサーフィンができます。<br>
    Internet Explorerを使い続けることは，デメリットしかないのです。
</p>
<p>
    この際ですから，あなたのせいで苦労している人たちのために，以下のリンクから最新のカッコいいWEBブラウザ「Google Chrome」（無料！シェア率トップ！)をダウンロードしてしまいましょう！！あなたもWEBデザイナーもWin Winです。
</p>
<p>
    <a href="https://www.google.com/chrome/" target"_blank">あなたのせいで困っている人を助ける！</a>
</p>
超手抜きです。もはや DOCTYPE 宣言もしていません...。適宜書き換えてください。

一番下の「あなたのせいで困っている人を助ける！」というリンクを押すと，Google Chrome のダウンロードページに飛びます。

↓実際の画面です（プライバシー保護のため画像に一部モザイクをかけています）。

手抜き過ぎてなんか怪しいサイトに見えますね...。

ということで，IE を拒否するサイトができました。めでたし，めでたし。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T22:15:24+09:00

電車の発車案内板をHTMLとCSSで作ってみる～実験編～

駅にある電車の発車案内板があると思います（LEDのもの）。これをHTMLとCSSで書けないか試してみる実験です。

禁止事項

HTMLに文字をのっけて、backgroundで調整するやり方はNG。

どうやるのか

こちらのブログを参考に、display:gridでやる方法です。
https://ebifry.jp/css/useless-css-grid

何を考えたか

基本的にDIVが大量生産されるので、力業でやるのはつらいものがあります。そこで、出たのがejs。
テンプレートエンジンです。

題材

いきなり「籠原」とか「新千歳空港」とかは難易度が高いので簡単な品川で。

やってみる

HTML(ejs)

guidedot.ejs

<html>
    <head>
        <link rel="stylesheet" href="./css/style.css"> 
    </head>
    <body>

        <div class="guide">
            <div class="guide-inner">
                <div class="guide-text-char1">
                    <% pix = 1; %>
                     <% for(i=0; i<=30; i++){ %>
                          <% for(j=1; j<=13; j++){ %>
                          <div class="char1-guide__dot<%= pix %>"></div>
                         <% } 
                         pix++;
                         %>
                    <% } %>
                </div>
                 <div class="guide-text-char2">
                    <% pix = 1; %>
                     <% for(i=0; i<=45; i++){ %>
                          <% for(j=1; j<=13; j++){ %>
                          <div class="char2-guide__dot<%= pix %>"></div>
                         <% } 
                         pix++;
                         %>
                    <% } %>
                </div>
            </div>
        </div>
    </body>
</html>

2次元配列っぽい書き方で書いています。

CSS(Scss)

$pixel:3px;
 $pixel2:3px; 
.guide{
  width:400px;
  height: 50px;
  background:#000;

  &-inner{
    width:280px;
    height: 40px;
    padding:5px;
    display:flex;
  } 
  &-text-char1{
    width:40px;
    height: 40px;
   display:grid;
   grid-template-columns:1fr repeat(10,$pixel) 1fr;
   grid-template-rows:repeat(13,$pixel2);
   grid-template-areas:
      "... ... ... ... g01 g01 g01 g01 ... ... ... ..."
      "... ... ... ... g02 ... ... g03 ... ... ... ..."
      "... ... ... ... g04 ... ... g05 ... ... ... ..."
      "... ... ... ... g06 ... ... g07 ... ... ... ..."
      "... ... ... ... g08 ... ... g09 ... ... ... ..."
      "... ... ... ... g10 g10 g10 g10 ... ... ... ..."
      "... ... ... ... ... ... ... ... ... ... ... ..."
      "... g11 g11 g11 g11 ... g12 g12 g12 g12 ... ..."
      "... g13 ... ... g14 ... g15 ... ... g16 ... ..."
      "... g17 ... ... g18 ... g19 ... ... g20 ... ..."
      "... g21 ... ... g22 ... g23 ... ... g24 ... ..."
      "... g25 ... ... g26 ... g27 ... ... g28 ... ..."
      "... g29 g29 g29 g29 ... g30 g30 g30 g30 ... ...";
}
  @for $i from 1 through 30 { 
  .char1-guide__dot#{$i}{ 

      background-color:#afa570; 
    @if $i < 10 { 
      grid-area:g0#{$i}; 
      } @else { 
      grid-area:g#{$i}; 
    } 

   }
  }
  &-text-char2{
    width:40px;
    height: 40px;
   display:grid;
   grid-template-columns:1fr repeat(10,$pixel) 1fr;
   grid-template-rows:repeat(14,$pixel2);
   grid-template-areas:
      "... ... g01 ... ... g02 ... ... g03 ... ... ..."
      "... ... g04 ... ... g05 ... ... g06 ... ... ..."
      "... ... g07 ... ... g08 ... ... g09 ... ... ..."
      "... ... g10 ... ... g11 ... ... g12 ... ... ..."
      "... ... g13 ... ... g14 ... ... g15 ... ... ..."
      "... ... g16 ... ... g17 ... ... g18 ... ... ..."
      "... ... g19 ... ... g20 ... ... g21 ... ... ..."
      "... ... g22 ... ... g23 ... ... g24 ... ... ..."
      "... ... g25 ... ... g26 ... ... g27 ... ... ..."
      "... g28 g29 ... ... g30 ... ... g31 ... ... ..."
      "... g32 g33 ... ... g34 ... ... g35 ... ... ..."
      "... g36 ... ... ... g37 ... ... g38 ... ... ..."
      "g39 g40 ... ... ... g41 ... ... g42 ... ... ..."
      "g43 ... ... ... ... g44 ... ... g45 ... ... ..."
}
  @for $i from 1 through 45 { 
   .char2-guide__dot#{$i}{ 

      background-color:#afa570; 
    @if $i < 10 { 
      grid-area:g0#{$i}; 
      } @else { 
      grid-area:g#{$i}; 
    } 

   }
  }
}

ここではまったのは、grid-template-areas。g~で指定するのですが、g~は四角になっていないと認識されずエラーが出てしまいます。

参考リンク

結果

See the Pen Shinagawa by Saito Keita (@saito-keita) on CodePen.

うーん。ちょっと工夫が必要です。

この後

しばらく研究が必要なので、まずは実験速報として、書かせていただきました。改善出来たら、また投稿したいと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T21:20:57+09:00

初心者によるプログラミング学習ログ 179日目

100日チャレンジの179日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

179日目は

おはようございます
179日目

webサイトコーディング課題
フッター作成（途中）

テンションあがらずあんまりできなかった#100DaysOfCode #早起きチャレンジ #駆け出しエンジニアと繋がりたい
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) December 8, 2019

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T20:52:16+09:00

技術ポートフォリオを作った話

つい先月，自分のgithubアカウントで技術ポートフォリオを作成した．→　tackkyのポートフォリオ
どうしてgitもhtmlも慣れていないのに作ろうと思ったのか，その辺の話も含めて記事にする．

技術ポートフォリオは何に役立つ？

1. 就活で使える

1. 逆求人

これが一番大きい. 特に最近IT系の就活では逆求人(企業様の方から連絡が来る就活)で，まず自分の情報を見ていただく．

例えば，

研究室での研究内容

資格，その他技術的にやってきたこと

など．この場合，研究内容だけ突き詰めて研究している方ならそこを詳しく書けばいいけれど，私などのようにいろんな技術をつまみ食いしているような人には不利になる．githubで公開リポジトリーとしてアップするという手もあるけれど，やはり就活では技術に詳しくない人事の方も見ているので，見た目にも綺麗なwebページが一番企業様へのインパクトは大きい．

2. エントリーシート

このような目的で作成されたポートフォリオは，エントリーシートの作成にも役立つ．
研究内容にも言及していれば，そのポートフォリオ記事を参考に書くことができるし，アピールポイントにこのページのURLを貼ることができる．(後たまに，技術ポートフォリオがあれば教えてくださいみたいな欄があることがある)

2. 勉強になる

最後に，HTMLとCSSを使うので何より勉強になる．私は研究室や講義でHTMLは兎も角CSSは使用したことはないけれど，技術ポートフォリオを作ることはHTMLとCSSの使用経験につながる．

技術的観点から

GitHub

技術者になる者，Github含め，Gitは使えるようになった方がいい．私は研究を他の人と共同でやっていないので研究室としてgitを使用することはないけれど，バージョン管理システムとして少し前から使い始めた．特に共有する相手がいなくてもgitはおすすめ．よく考えなくてもgitは バージョン管理システムである．私が最近使用しているgitの使い道が参考になるかもしれない．

理由１　論文を書くときにも使える．

参考URL：ライトに知りたい人はこちら，しっかり読みたい人はこちら

ナウいヤングは論文執筆にGitHubを使う
まず、学会や学校などのテンプレートを導入して正しくコンパイルされる状態にしたものをfirst commitとしてmasterブランチにコミットします。
次にmasterから1stブランチを切って、GitHub上でmasterブランチにPull Requestを送ります。
PRを送ったら、1stブランチでガリガリ初稿を書いていきます。コミットの粒度は小節毎だったり段落ごとだったりしますが、これは執筆が進んでいくと変わっていくと思います。後半になると修正箇所も少なくなるので「○○先生添削分修正」などとふわっとしてきます。
添削の依頼をして返ってきたら、1stブランチをmasterにマージします。そして2ndブランチを切ってPRを送って……の繰り返しです。

理由２　スライド管理にも使える．
様々な版(学会用，卒業発表用等)とわけることができる．次のページがわかりやすすぎるので説明は割愛．

参考URL：ここのページからスライド管理するようになった

HTMLとCSS

…ざっくり仕組み使えるようになりたいなって思ってた，それだけです．講義で扱うのはHTMLだけなのでやっぱり心寂しい．

技術ポートフォリオの作り方

作ってみた流れ．

1.githubでページを作る

GitHub Pagesというサービスがある．これは，Githubに登録したリポジトリーをwebページとして公開することができるGitHubのサービスである．settingにgithub pagesの項目があるのでそこでソースをマスターブランチに登録するだけである．とりあえずhello worldとでも書いたindex.htmlを用意して公開すればいい．

一応：github pagesによる静的サービス公開方法

2.サンプルページを探してくる

結構フリーでHTMLとCSSのソースは落ちている．特にtemplate free engineer portfolioとでも検索すれば，ごまんとフリーテンプレートが見つかる．私は以下のサイトから見つけてきた．(確か．)
50 free portfolio website templates 2019

3.自分仕様に変更する

後はダウンロードしたデータを自分仕様にカスタマイズするだけだ．先のテンプレートサイト等には結構な量のデータがあるので，私のような初心者エンジニアにはいらない部分が多すぎる．なので「いらない部分を削る」作業が必要になる．これには，どこからどこまで削っても問題なく動作するのか判断するために，HTMLの構造を理解している必要がある．CSSは色のテイストや配置などを変えたくなってから触る方が楽なのでとりあえず置いておいて，HTML→CSSの順でカスタマイズするのがおすすめ．

おめでとう！

ここまでのプロセスでやっと技術ポートフォリオをつくることができる．新しいことに取り組むことがあれば，どんどん追加して素晴らしいポートフォリオにしよう．

参考サイト

エンジニア向けのポートフォリオサイトまとめ
 ポートフォリオをGitHub で公開する

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T20:31:43+09:00

jQueryプラグインの実践

jQueryプラグインの実践をしてみた

こんにちは。ちょっとずつ学習したことを実践して投稿します。

やったこと

jQueryとjavaScriptを使って、
1. 画像をクリックしたら、そのフォントサイズを表示する。
2. ボタンをクリックしたらテキストを取得し表示する

コード

部分的にコードを抜粋します。
index.htmlに画像などいろいろと要素を埋め込んでいきます。
jquery.showsize.jsの方へ画像をクリックした際の動作を埋め込んでいき、外部ファイルとして取得します。

index.html


          <button type="button" name="button">
            <p><img src="img/hoge.jpg"></p>
            <div id="cat1-button"><p id="text-a">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehoge.jpg"></p>
            <div id="cat2-button"><p id="text-b">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehogehoge.jpg"></p>
            <div id="cat3-button"><p id="text-c">click</p></div>
          </button>
          <button type="button" name="button">
            <p><img src="img/hogehogehogehoge.jpg" data-size="30"></p>
            <div id="cat4-button"><p id="text-d">click</p></div>
          </button>
        </div>

        </ul>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <script src="jquery.showsize.js"></script>


    <script>
      $(function(){
        $('img').showsize({
        });
      });

{
document.getElementById("cat1-button").onclick = function() {
  document.getElementById("text-a").innerHTML = "hoge";
};
}
{
      document.getElementById("cat2-button").onclick = function() {
        document.getElementById("text-b").innerHTML = "hogehoge";
      };
}
{
      document.getElementById("cat3-button").onclick = function() {
        document.getElementById("text-c").innerHTML = "hogehogehoge";
      };
}
{
      document.getElementById("cat4-button").onclick = function() {
        document.getElementById("text-d").innerHTML = "hogehogehogehoge";
      };
}
    </script>
  </div>

jquery.showsize.js

;(function($) {

    $.fn.showsize = function(options) {

        var elements = this;

        elements.each(function() {

            var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
            $(this).click(function() {
                var msg = $(this).width() + ' x ' + $(this).height();
                $(this).wrap('<div style="position:relative;"></div>');
                var div = $('<div>')
                            .text(msg)
                            .css('position', 'absolute')
                            .css('top', '0')
                            .css('background', 'black')
                            .css('color', getRandomColor())
                            .css('font-size', opts.size + 'px')
                            .css('opacity', opts.opacity)
                            .css('padding', '2px');
                $(this).after(div);
            });
        });

        return this;

    };

    function getRandomColor() {
        var colors = ['white', 'skyblue', 'orange', 'green'];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    $.fn.showsize.defaults = {
        size: 10,
        opacity: 0.9
    };

})(jQuery);

後記

複数のscriptが続く際には、｛｝で括るという初歩的なことが大事だと痛感しました。
このコードをサンプルとしてご自由にご利用ください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T20:20:23+09:00

はじめてぶらうざののべるげーむをつくってみたの！

はじめてぶらうざののべるげーむをつくってみたの！

自分でノベルゲーを作りたくなったので、モチベ維持のためにもQiita記事にしました。
ゆくゆくは簡単にブラウザノベルゲームを作れるソフトでも作りたいなと思ってるので、その下調べ的ななにがしですね。

Qiita記事は初心者なので、なんか書いた方がいいこととかあれば教えてくだせぇ。
それではさっそく行きましょう。

Chapter 0.使用言語

HTML

CSS

JavaScript(JQuery)

Chapter 1.とりあえずタイトル画面つくるかのぅ…。

タイトル画面がないと始まりません。

1.仮でとりあえず作っていきます。
html
<body>
    <h1>ノベルゲーム！</h1>

    <a href="">続きから</a>
    <a href="">最初から</a>
    <a href="">環境設定</a>
</body>
css
*{
    text-decoration:none;
    color:black;
}
h1{
    background-color:rgba(255,0,0,.3);
}
a{
    display:block;
    background-color:rgba(0,255,0,.3);
}
必要なものはこれくらいでしょうか。
これをもとにCSSでデザインを作っていきますが、上の通りbackground-color:rgba(??,??,??,.3);などと背景色をつけるとどの要素がどこにいるかわかりやすいですね。

2.タイトルとメニューは中央寄せにしたいですね。

そこで、text-align:center;をh1とaに対して指定します。
また、それぞれのwidthを10emにしました。

この時点では、h1要素とa要素の中身は中央寄せになりましたが、a要素自体は左に寄っています。これを真ん中に持ってくるためにdisplay:flex;を召喚します。
html
    <div id="felxcontainer">
        <h1>ノベルゲーム！</h1>

        <a href="">続きから</a>
        <a href="">最初から</a>
        <a href="">環境設定</a>
    </div>
css
#flexcontainer{
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
}
すると

無事真ん中に来ました。

3.背景がなんか寂しいなぁ…。

というわけでネットのフリー画像を背景に指定。
css
body{
    background:url("image/TopImage.jpg");
    margin:0;
    padding:0;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
}
全体的に上に寄っているので、h1とaの親要素（#flexcontainer）のcssに、justify-content:center;を追加します。すると以下の通り全体が真ん中に来ます。

4.あとはこまごま調整して…

最終的にはこんな感じになりました。
html
<body>

    <div id="flexcontainer">
        <h1>ノベルゲーム！</h1>
        <div>
            <a href="">続きから</a>
            <a href="">最初から</a>
            <a href="">環境設定</a>            
        </div>
    </div>
</body>
css
*{
    text-decoration:none;
    color:black;
}
body{
    background:url("image/TopImage.jpg");
    margin:0;
    padding:0;
    position:absolute;
    top:0; bottom:0; left:0; right:0;
}
#flexcontainer{
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    justify-content: center;
    position:absolute;
    top:0;bottom:0;left:0;right:0;
}
#flexcontainer div{
    border:2px solid white;
    border-radius:5px;
}
h1{
    margin:0;
    color:white;
    font-size:11vw;
    text-align: center;
}
a{
    color:white;
    display:block;
    text-align:center;
    font-size:2.5vw;
    line-height:2em;
    width:10em;
}
a:hover{
    background-color:rgba(255,255,255,.5);
}
根気が残っていれば次回以降はゲームの中身の部分を作っていく予定です。

参考サイト

PAKUTASO(ここのフリー画像を使いました。)

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T19:30:41+09:00

Rails6 数値入力時にtypeをnumberにしたのに数値として扱われず困った話

目的

勉強の実施時間を記録するwebアプリ作成の際に数値のinputで詰まり、コミュニティの方に助けていただいた話をまとめる

そもそもセオリーを理解できていなかったので二度とこんなことない様にまとめる。

.to_iを使って数値に変換できることはなんとなく知識としてあったが定着していなかったのでまとめる。

目標

すでにDBに格納されている数値に入力数値を足してDBに格納する。

不動小数点や符号などはとりあえず考えず前述の目標をクリアする。

結論

教えていただいた現役エンジニアさんのお言葉「入力値はtype指定してもStringになってしまうので受け取った側で型を指定して変換する」

問題のコード
下記に問題のコードの一部を抜粋する。
コントローラ
def update
  @post = Post.find_by(id: params[:id])
  @post.study_time = @post.study_time + params[:study_time]
  @post.save
  redirect_to("/posts/#{@post.id}")
end
ビュー
<%= form_tag("/posts/#{@post.id}/update") do %>
  <p>今日つみかさねた時間</p>
  <input type="number" name="study_time">
  <input type="submit" value="今日のつみかさね登録">
<% end %>
詰まったところまでの概要
前述の問題のコードにて「今日のつみかさね登録」ボタンを押したところ下記のエラーが出た。
no implicit conversion of integer into string
エラーの内容から足そうとしている数値の型があっていないことがわかった。

筆者はビューファイルのinputでtype="number"を指定して入力型を数値にしようと試みたが同じエラーが出た。

解決しようと試みたがいろいろ試してくうちに混乱してしまった。
解決方法

コントローラで受け取った値の型を数値に変換すことにより問題は解決した。

正常動作したコード
下記に教えていただいた内容を元に修正を行なったコードを記載する。
コントローラ
def update
  @post = Post.find_by(id: params[:id])
  @post.study_time = @post.study_time + params[:study_time].to_i
  @post.save
  redirect_to("/posts/#{@post.id}")
end
ビュー
<%= form_tag("/posts/#{@post.id}/update") do %>
  <p>今日つみかさねた時間</p>
  
  <input type="number" name="study_time">
  <input type="submit" value="今日のつみかさね登録">
<% end %>
反省

.to_iで数値に変換できることは知ってはいたが使いどころが理解できてなかった。

そもそもセオリーを理解できていなかった。

今考えると諦めなければ自己解決できたかもしれない。

よかったこと

エラー文をコピペで解決することをしなかった。

エラー文から問題箇所を特定することができた。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T16:49:31+09:00

Firefox で mozCaptureStream() すると音が出なくなる

WEB ページ上で Video や Audio を扱うことができる HTMLMediaElement があり、captureStream() メソッドを使用することでメディアをキャプチャできます。

Chrome 等では実際に音をスピーカー等から再生しながらキャプチャできるのですが、Firefox ではキャプチャすると音が出なかった (内部的には再生されていてキャプチャはできる) ため、メモしておきます。

もともと Firefox では captureStream() の実装が仕様に追いついておらず、moz ベンダー接頭辞が付いていますが、MDN にはこの音が出なくなる仕様に関しては書かれていませんでした。

参考「HTMLMediaElement.captureStream() - Web API | MDN」

1. 再現コード

Chrome 77 と Firefox 71 で動作確認。

(Chrome ではセキリティの制限で index.html を file スキームで開くと cross-origin data としてブロックされるため、php -S 0.0.0.0:8080 などでローカルサーバーを立てるなどしてください。)
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>mozCaptureStream() バグ</title>
    <script src="main.js"></script>
  </head>
  <body>
    <video id="video" src="video.webm" controls></video>
    <input type="button" value="mozCaptureStream()" onclick="TEST.captureStream();">
  </body>
</html>
main.js
(()=>{

    const TEST = {};

    TEST.captureStream = () => {

        const videoElement = document.getElementById('video');

        return ( 'captureStream' in videoElement ) ? videoElement.captureStream() : videoElement.mozCaptureStream();

    };

    window.TEST = TEST;

})();
これはバグとして Bugzilla に投げられていました。

参考「1178751 - Calling mozCaptureStream on an HTMLMediaElement should not destroy the AudioSink」

2. 解決策

理想的なことを言えば Firefox のコードを修正すべきですが、ここでは JavaScript 側で対処します。
main.js (Firefox 対応版)
(()=>{

    const TEST = {};

    TEST.captureStream = () => {

        const videoElement = document.getElementById('video');

        let stream;

        if ( 'captureStream' in videoElement ) {
            stream = videoElement.captureStream();
        } else if ( 'mozCaptureStream' in videoElement ) {
            stream = videoElement.mozCaptureStream();
            // ★
            const audioContext = new AudioContext();
            const mediaStreamSource = audioContext.createMediaStreamSource(stream);
            mediaStreamSource.connect(audioContext.destination);
            // 
        } else {
            console.error('Unsupported: captureStream()');
        }

        return stream;

    };

    window.TEST = TEST;

})();
mozCaptureStream() すると HTMLMediaElement に接続されている AudioContext で音声が再生できなくなる。

別途新しく AudioContext を作成する。

キャプチャーしたストリームからオーディオソースを作成し、AudioContext.destination ¹ に接続する。

キャプチャーしたストリームは、既に音量 HTMLMediaElement.volume を反映しているので、GainNode に接続するような記述は不要です。

ただし、上記の対処法では他のバグ 1443511 の影響を受けます。

参考「1443511 - A small delay occurs when the volume is changed on Soundcloud」(「Soundcloud でボリュームが変更されると、わずかな遅延が発生します」² )

スピーカーなど、最終的な音声の出力先。 ↩

SoundCloud はサイト名。バグ自体はそのサイトに限らず起きる。 ↩

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T16:45:57+09:00

CSSサブグリッドで真のフレキシブルなレイアウトを実現する方法

2019年12月3日、Firefox71がリリースされ、このバージョンから CSS Subgrid が使用できるようになりました。
CSS Subgridは2016年来からW3CのWorking Draftによって勧告されていましたが、今回のFirefoxのアップデートによって遂にユーザーへ提供できるようになりました。
この記事では、CSS Subgridの何が我々をワクワクさせ、どのようにインタフェースの実装を変化させてくれるのかについて紹介したいと思います。

CSS Subgrid とは

CSS Gridのおさらい

CSS Subgridの説明の前に、簡単にCSS Gridのおさらいをします。
CSS Gridとは、2次元レイアウトをCSSを用いて簡潔に組むための仕組みを指します。
任意の要素にdisplay: grid;を適用することで、以下の画像のように対象の要素はグリッドコンテナーとして、グリッドコンテナーの子要素はグリッドアイテムとして扱われます。
<ul style="display: grid;"> 
  <li>ぺんぎん</li> 
  <li>あざらし</li> 
  <li>らっこ</li> 
</ul>
CSS Gridの問題点

CSS Gridを用いることで、グリッドアイテムの高さを柔軟に揃えることが可能となりました。
では、我々の戦いはGridの登場によって終わりを迎えたのでしょうか。

そんなことはありません。グリッドアイテムの中の要素に目を向けるとどうでしょう。
グリッドアイテムの中には画像やテキスト等の複数の要素を設ける必要があります。これらのテキストはコンテンツによって変化するため、実装時には様々な高さへ変化することを想定しなくてはいけません。

しかしながら、グリッドアイテムは以下の画像のように、中の要素の高さまでは揃えることができません。

CSS Subgridの登場

この問題を解決してくれるのがCSS Subgridです。
詳細な実装方法は後述しますが、グリッドアイテム要素に対してgrid-template-columns: subgrid;やgrid-template-rows: subgrid;を指定することで、CSS Subgridを有効化させることができます。
有効化させることで、グリッドアイテムの中の要素をサブグリッドアイテムとして扱うことができ、アイテム毎に高さを可変させることが可能となります。

以下の例ではSubgridを用いてタイトル部分の高さを可変させています。Subgrid未適用時は高さがコンテンツ毎に異なっているのに対し、Subgrid適応時は高さが統一されてるかと思います。

未適用時適用時 (Firefox 71)

Subgridを自在に操ることで、真のフレキシブルなレイアウトを簡潔に実現することが可能となります。

対応環境 (2019/12/07現在)

現在はFifefox 71~ のみ対応しています。

Subgrid | Can I Use...より

使い方

サンプル

See the Pen Sample of CSS Subgrid by oreo (@oreo) on CodePen.

（Firefox 71~で確認してみてください。）

実装方法

Subgridは以下のソースコードで対応することが可能です。
<ul class="gridContaienr">
  <li class="gridItem">
    <img src="https://via.placeholder.com/150" alt="">
    <h3>タイトル</h3>
    <p>テキスト</p>
    <a href="http://example.com/">リンク</a>
  </li>
  <li class="gridItem">
    <img src="https://via.placeholder.com/150" alt="">
    <h3>タイトル</h3>
    <p>テキスト</p>
    <a href="http://example.com/">リンク</a>
  </li>
  <li class="gridItem">
    <img src="https://via.placeholder.com/150" alt="">
    <h3>タイトル</h3>
    <p>テキスト</p>
    <a href="http://example.com/">リンク</a>
  </li>
</ul>
.gridContainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-gap: 1em;
}

/* 以下の記述を追加 */
.gridContainer .gridItem {
  display: grid;
  grid-row: span 4;
  grid-template-rows: auto auto 1fr auto; /* fallback for non-supported browsers */
  grid-template-rows: subgrid;
}
まずは.gridItemへdisplay: grid;を指定することでグリッドコンテナーとして扱う必要があります。
同時に、grid-template-rows: subgrid;を指定することで、グリッドコンテナーをサブグリッド化することができます。

こちらの例ではSubgridに対応していないブラウザ用のフォールバックとして、grid-template-rows: auto auto 1fr auto;を指定しています。
可変させる要素と固定させる要素を明示することで、Subgridに対応していないブラウザでも最低限のレイアウトを担保できるので、未サポートブラウザが多い現在はこちらの記述も必須でしょう。

終わりに

CSS SubgridはFlexやGridだけでは実現できなかったレイアウトを簡潔に実現できる力を秘めていると考えられます。
現在はFirefoxのみが対応していますが、今後より多くのメジャーなブラウザへの実装され、ユーザーへ提供できるようになることを願ってやみません。

参考サイト

Subgrid - CSS | MDN

Grid - CSS | MDN

Subgrid | Can I Use...

Firefox 71: A year-end arrival | Mozilla Hacks the Web developer blog

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T16:08:01+09:00

CSSだけで動的サイトを作れるらしい！！

はじめに

最近まで深層学習の技術ブログを書いていたが、心機一転してWeb系の勉強に戻ることにした。
今までは安定を求めてAIを数ヶ月勉強していたけど面白くなかった。
やはり楽しいほうがいいと思ったので今回Web系に戻ろうと思う。

CSSだけで動的サイトを作る

今まで動的サイトといえばJavaScriptを使わないといけないと思っていたが、実はJavaScriptから提供された変形とアニメーションの機能がCSSにあるらしい。
聞くところによればJavaScriptよりも高速に動くらしいのでこれから是非使っていきたいと思う。

transformプロパティ

cssでtransformプロパティを使うことで、移動・拡大縮小・回転・傾斜の変形を行うことができる。
これらの変形を行うには、transformプロパティで、各トランスフォーム関数をして営してあげることで行うことができる。

transelate(x軸の移動,y軸の移動)
translate関数を使うことで、x軸y軸の移動を行うことができる。
上の様にx軸とy軸の移動する距離を指定してあげることで要素を移動することができる。

scale(x軸方向の倍率,y軸方向の倍率)
scale関数を使うことで要素のx軸y軸方向の拡大縮小が可能です。

rotate(回転角度)
rotate関数で要素を回転させることができます。
どれだけ回転させるかは、角度を指定することで決められます。

skew(x軸の傾斜角度,y軸の傾斜角度)
skew関数で要素に傾斜をつける変形を行うことができます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T15:40:16+09:00

Sortable.jsを使ってスパイダーソリティアを作ってみた

はじめに

現在SIerからWebエンジニアへの転職活動中で、ポートフォリオの一つとして
私の好きなゲームであるスパイダーソリティアをつくってみることにしました。
（スパイダーソリティアのルールはこちらから）

ソース：Git Repo

プレイ：こちらから
※レスポンシブ対応はしていません（PCのみ）

イメージ

終わりに

作成期間は約１か月ほどかかりました

アルゴリズムや、一からのモノ作りを学ぶことができました

SortableJSは結構いろいろな動作をさせることができました

途中ほんとうに挫折しかけましたがなんとか完成させることができたのでとても良かったです！

＜使用技術＞
HTML／CSS／JavaScript／SortableJs／Bootstrap／JQuery　etc

＜参考にしたサイト＞
【jQueryUIを使わずにドラッグ＆ドロップを実装したい】Javascriptライブラリ「Sortable」を使ってみた

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T14:29:28+09:00

HTML CSS Flexboxとは

要素を並べるのにfloat: left;使ってるけど、他にも並べる方法ないかなあ

参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
随時更新します

Flexboxを使ってみよう

FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。

基本

flex_box01.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box01.css">
  </head>
<body>
  <div class="container01">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
  </div>
</body>
</html>

flex_box01.css

.container01 {
    display: flex;
}
.item {
    margin: 10px 10px;
    padding: 2px 4px;
    background: #f8dcdc;
}

display: flex;を親要素に適用し、子要素が横に並んだ。

Flexboxで親要素に指定するプロパティ

htmlは上と同じ。

flex-direction: row;

flex_box02.css

.container01 {
    display: flex;
    flex-direction: row;
}
.item {
    ~省略~
}

右から左へ並ぶ

flex-direction: row-reserve;

flex_box03.css

.container01 {
    display: flex;
    flex-direction: row-reverse;
}
.item {
    ~省略~
}

左から右へ並ぶ

flex-direction: column;

flex_box04.css

.container01 {
    display: flex;
    flex-direction: column;
}
.item {
    ~省略~
}

上から下へ並ぶ

flex-direction: column-reverse;

flex_box05.css

.container01 {
    display: flex;
    flex-direction: column-reverse;
}
.item {
    ~省略~
}

下から上へ並ぶ

flex-wrap: nowrap;

説明のために数を増やした

flex_box02.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ブロックとインライン</title>
    <link rel="stylesheet" href="css/flex_box.css">
  </head>
<body>
  <div class="container02">
    <div class="item">
      アイテム&ensp;1
    </div>
    <div class="item">
      アイテム&ensp;2
    </div>
    <div class="item">
      アイテム&ensp;3
    </div>
    <div class="item">
      アイテム&ensp;4
    </div>
    <div class="item">
      アイテム&ensp;5
    </div>
    <div class="item">
      アイテム&ensp;6
    </div>
    <div class="item">
      アイテム&ensp;7
    </div>
    <div class="item">
      アイテム&ensp;8
    </div>
    <div class="item">
      アイテム&ensp;9
    </div>
    <div class="item">
      アイテム&ensp;10
    </div>
  </div>
</body>
</html>

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: nowrap;
}
.item {
    ~省略~
}

折り返しなしで一行で並ぶ

flex-wrap: wrap;

flex_box06.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
}
.item {
    ~省略~
}

子要素が折り返して複数行になり、上から下へ並ぶ

flex-wrap: wrap-reverse;

flex_box07.css

body {
    ~省略~
}
.container02 {
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap-reverse;
}
.item {
    ~省略~
}

子要素が折り返して複数行になり、下から上へ並ぶ

flex-flow: ;

flex_box08.css

.container02 {
    margin: 10px auto;
    display: flex;
    flex-flow: row-reverse nowrap;
}

flex-directionとflex-wrapを一行で指定できるプロパティ。

justify-content: flex-start;

flex_box09.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-start;
}

10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を水平方向のどの位置に置くか指定。
flex-startは左揃えになる。

justify-content: flex-end;

flex_box10.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
}

flex-endは右揃えになる

justify-content: flex-center;

flex_box11.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: flex-center;
}

flex-centerは中央揃えになる

justify-content: space-between;

flex_box12.css

.container02 {
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
}

最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T10:51:57+09:00

初学者が手っ取り早くコーディング練習する方法

こんにちは、たか（@HighHawk5）です。

普通はローカル（自分のパソコン）に開発環境を用意してコーディングしますが、面倒だったりできない場合に便利なのがクラウドIDE。ブラウザ上で簡単にコーディング＆表示確認ができます。

今回は数あるクラウドIDEのなかでも一番ライトに使えるCODEPENをご紹介します。

メリット
・開発環境の構築が不要
・色々なエンジニアの作品を参考にできる

See the Pen 三次元回転体 by たかたか (@koutaka) on CodePen.

これは私のpenですが、このようにコーディング＆表示確認が一画面でできて便利ですよね！
右上のCODEPENアイコンから本サイトに移動し、メニューの「Fork」をクリックすると、私の作品をあなたのワークスペースにコピーしてコーディングすることもできます。模写がボタン一発で！

Vue.jsはこちらのサンプルなんてどうでしょう？
https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

コーディングの上達方法は、見本のコードを模写してイジり倒すこと！

では、より良いエンジニアライフを！

おしまい

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T10:51:57+09:00

初学者が簡単にコーディング練習する方法

こんにちは、たか（@HighHawk5）です。

普通はローカル（自分のパソコン）に開発環境を用意してコーディングしますが、面倒だったりできない場合に便利なのがクラウドIDE。ブラウザ上で簡単にコーディング＆表示確認ができます。

今回は数あるクラウドIDEのなかでも一番ライトに使えるCODEPENをご紹介します。

メリット
・開発環境の構築が不要
・色々なエンジニアの作品を参考にできる

See the Pen 三次元回転体 by たかたか (@koutaka) on CodePen.

これは私のpenですが、このようにコーディング＆表示確認が一画面でできて便利ですよね！
右上のCODEPENアイコンから本サイトに移動し、メニューの「Fork」をクリックすると、私の作品をあなたのワークスペースにコピーしてコーディングすることもできます。模写がボタン一発で！

Vue.jsはこちらのサンプルなんていかがでしょう？

See the Pen Credit Card Form - VueJs by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

コーディングの上達方法は、見本のコードを模写してイジり倒すこと！

では、より良いエンジニアライフを！

おしまい

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T02:44:31+09:00

HTMLでテーブルを使って表を作成してみた

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- ここからテーブル（お仕事） -->
    <table>
        <caption>仕事メニュー一覧
            <details>
                <summary>列の構成</summary>
                <p>仕事メニュー一覧化した表。
                    <br>1列目が出来ること、2列目が詳細、3列目が価格</p>
            </details>
        </caption>

        <thead>
            <tr>
                <th scope="col">出来ること</th>
                <th scope="col">詳細</th>
                <th scope="col">価格</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td colspan="3">2099年1月1日の日本</td>

            </tr>
        </tfoot>

        <tbody>
            <tr>
                <th scope="row" rowspan="2" >残飯処理</th>
                <td>あなたの食べ残しを私が食べます。</td>
                <td>500円～</td>
            </tr>
            <tr>

                <td>あなたの犬の食べ残しを私が食べます。</td>
                <td>500円～</td>
            </tr>
            <tr>
                <th scope="row">週2回のゴミ捨て</th>
                <td>あなたの家のゴミ捨てを代行します</td>
                <td>600円～</td>
            </tr>
            <tr>
                <th>犬の散歩</th>
                <td>あなたのワンちゃんと散歩します</td>
                <td>1000円/1h</td>
            </tr>
        </tbody>

    </table>
    <!-- ここまでテーブル -->
</body>

</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T01:01:19+09:00

FloatとFlexboxについて

はじめに

中一日でAdventcalendarの日がまわってQiita!
今回は、自分がいまいち理解できなかったFloatとFlexboxの違いについてまとめてみました。

本題

みなさんは、要素を横並びにするときに何を使っていますか？？
FloatやFlexbox,FloatにFlexboxなどなどさまざまな方法があると思います。
ということで今回は、FloatとFlexboxって、なにがちがうの？どっちの方を使ったほうがいいのかという２つの観点に目を向けて記事を書いていこうと思います。

今回はFloat・Flexboxを用いて下記のような表示をさせるためにコードを記述していきます。

Float
 <body>
        <style>

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .cleafix::after {
                content: "";
                display: block;
                clear: both;
            }
            .test {
                width: 400px;
                height: 300px;
                margin: 0 auto;
                padding: 5px;
                background-color:aqua;
            }
            .box_A {
                width: 100px;
                height: 100px;
                margin-right: 5px;
                background-color: blue;
                float: left;
            }
            .box_B {
                width: 100px;
                height: 100px;
                margin-right: 5px;
                background-color: yellow;
                float: left;
            }
            .box_C {
                width: 100px;
                height: 100px;
                margin-right: 5px;
                background-color: red;
                float: left;
            }
            footer{
                width: 400px;
                height: 100px;
                margin: 0 auto;
                background-color: purple;
            }
        </style>
        <div class="test clearfix">
            <div class="box_A"></div>
            <div class="box_B"></div>
            <div class="box_C"></div>
        </div>
        <footer></footer>

    </body>
Points

.clearfix::after{}により、回り込みを防ぐ

`::after` セレクタ要素の直後にスタイルや要素を追加するもの

`content: "";` floatされた要素の親要素の直後に空白の要素を挿入

`display: block;`： contentプロパティによって挿入された空白を横いっぱいに伸ばし、壁のようにする。

`clear:both;`： displayプロパティによって作成れた壁にfloatの回り込みを解除するための機能を与える。

`float:left;`： floatさせたい要素にfloatプロパティを記述する。

以上の２点により、Floatプロパティを用いて、要素を横並びにすることができます。

Flexbox
 <body>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .f-container {
                width: 400px;
                height: 300px;
                margin: 0 auto;
                padding: 5px;
                display: flex;

                flex-flow: row wrap;
                background-color: aqua;
            }
            .item_A {
                width: 100px;
                height: 100px;
                margin-right: 5px;
                background-color: blue;
            }
            .item_B {
                width: 100px;
                height: 100px;
                margin-right: 5px;
                background-color: yellow;
            }
            .item_C {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            footer {
                width: 400px;
                height: 100px;
                margin: 0 auto;
                background-color: purple;
            }
        </style>
        <div class="f-container">
            <div class="item_A"></div>
            <div class="item_B"></div>
            <div class="item_C"></div>
        </div>
        <footer></footer>
    </body>
Points

Floatでは、小要素にFloatプロパティを書き、回り込みを防ぐために、`.clearfix::after{}`を記述していましたが、Flexboxでは、親要素に`display:flex`と記述するだけで、Floatと同じような表示ができます。

親要素に`flex-flow: row wrap;`という記述をしていますが、これは、itemの並び順と折返しを一括指定しています。今回表示させたいものには、直接関係はありませんが、親要素のコンテナに使用できる便利なプロパティとして紹介させていただきました。

詳しい情報はこちらから

まとめ

近年では、上記で記したようにflexboxのほうが、非常に簡単に要素を横並びにすることができます。
みなさんもぜひ、Flexboxを使って楽にコードを書いてみてはいかがでしょうか。

参考資料

こちら(flexbox)：https://webdesign-trends.net/entry/8148

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-09T00:00:06+09:00

headタグ内におけるcharsetの挙動について

アプリケーション(サーバサイド)エンジニアから駆け出しフロントエンドエンジニアに転向したさむとるです。
今回はブラウザにおける文字コードの解釈・挙動における疑問を調べた結果をまとめました。

あらまし

WHATWGの規格書によると、
<script>タグはデフォルトの場合、htmlのパースを止めてjsのダウンロードと実行を行います。

そのため我々フロントエンジニアはしばしasyncやdeferを用いたりすることで、速度向上を行おうとします

そこで私は疑問に思ってしまったのです

charset="utf-8"の前にutf-8で記述されている<script>を置いてしまった場合、文字化けするのではないか？と
※locale langageがja(日本語)の場合、デフォルトで文字コードはshift-jisになる->WHATWGの規格書

確認

確認するために下記のコードを適当に用意しました
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="foo.js"></script> 
    <script src="bar.js"></script> 
    <meta charset="utf-8">
</head>
<body></body>
</html>
foo.js
alert('アラート1'); // utf-8
bar.js
alert('アラート2'); // shift-jis
結果

文字化けしませんでした



理由としては

The user agent may wait for more bytes of the resource to be available, either in this step or at any later step in this algorithm. For instance, a user agent might wait 500ms or 1024 bytes, whichever came first. In general preparsing the source to find the encoding improves performance, as it reduces the need to throw away the data structures used when parsing upon finding the encoding information. However, if the user agent delays too long to obtain data to determine the encoding, then the cost of the delay could outweigh any performance improvements from the preparse.

とあり、英語が読めないなりにざっくりと解釈したところ
1024byte分事前捜査し、そこに文字コードの指定があれば使用する
感じらしいです。勉強になりました。

追加検証

500ms/1024byteよりあとに<chaeset>をしたら文字化けするのでは？と思い追加検証を行いました。

chromeは頭が良すぎたのでIEで実行しました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="foo.js"></script> 
    <script src="bar.js"></script> 
    <script>// byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi</script>
    <script>// byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi</script>
    <script>// byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi byte kasegi</script>
    ...
    <meta charset="utf-8">
</head>
<body></body>
</html>
みたいな感じでbyte数稼ぎを行います

実行結果



<charset>が解釈されていないalartが実行された後に、再度文字コードが正しく解釈されたalartが表示され、計4回のアラートが表示されました
実行時のコンソールを確認したところ、2回目のalartの後に

とあり、パーサーが文字コードを解釈した地点で先頭から再実行を行っていることが判明しました。

総括

<charset>の前にscriptを仕込むと2重で実行されてしまう可能性があり、
少なからずパフォーマンスに影響が出たり、計測系だったら2重送信されてめんどくさい場合が無きにしも非ずなので
基本何があっても初手<charset>したほうがいいかもしれません

　 Tweet
Qiitaで続きを読む

20191209のHTMLに関する記事は17件です。

InternetExplorerを拒否するサイトの作り方

InternetExplorer の対応が面倒くさい

方法

IE 判定

リダイレクト先

電車の発車案内板をHTMLとCSSで作ってみる～実験編～

禁止事項

どうやるのか

何を考えたか

題材

やってみる

HTML(ejs)

CSS(Scss)

結果

この後

初心者によるプログラミング学習ログ 179日目

100日チャレンジの179日目

技術ポートフォリオを作った話

技術ポートフォリオは何に役立つ？

1. 就活で使える

1. 逆求人

2. エントリーシート

2. 勉強になる

技術的観点から

GitHub

HTMLとCSS

技術ポートフォリオの作り方

1.githubでページを作る

2.サンプルページを探してくる

3.自分仕様に変更する

おめでとう！

参考サイト

jQueryプラグインの実践

jQueryプラグインの実践をしてみた

やったこと

コード

後記

はじめてぶらうざののべるげーむをつくってみたの！

はじめてぶらうざののべるげーむをつくってみたの！

Chapter 0.使用言語

Chapter 1.とりあえずタイトル画面つくるかのぅ…。

1.仮でとりあえず作っていきます。

2.タイトルとメニューは中央寄せにしたいですね。

3.背景がなんか寂しいなぁ…。

4.あとはこまごま調整して…

参考サイト

Rails6 数値入力時にtypeをnumberにしたのに数値として扱われず困った話

目的

目標

結論

問題のコード

詰まったところまでの概要

解決方法

正常動作したコード

反省

よかったこと

Firefox で mozCaptureStream() すると音が出なくなる

1. 再現コード

2. 解決策

CSSサブグリッドで真のフレキシブルなレイアウトを実現する方法

CSS Subgrid とは

CSS Gridのおさらい

CSS Gridの問題点

CSS Subgridの登場

対応環境 (2019/12/07現在)

使い方

サンプル

実装方法

終わりに

参考サイト

CSSだけで動的サイトを作れるらしい！！

はじめに

CSSだけで動的サイトを作る

transformプロパティ

Sortable.jsを使ってスパイダーソリティアを作ってみた

はじめに

イメージ

終わりに

HTML CSS Flexboxとは