What's New Qiita

20200626のHTMLに関する記事は10件です。

  • 投稿日：2020-06-26T23:41:47+09:00

プログラミング初心者が人生初のポートフォリオ作りました。

人生初ポートフォリオサイト

https://portfolio.ppmp556.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T23:09:43+09:00

Webページの読み込みが遅い対処方法

プログラミングの勉強日記

2020年6月26日　Progate Lv.148
ポートフォリオ作成中
以前作成したWebページの読み込みに時間がかかってしまうのが気になり、ポートフォリオを作成する前にこの問題に対処する。

読み込みが遅い原因

考えられる原因
　1. GitHubホスティングを利用して公開しているので、GitHubホスティング自体がWebページの読み込みが遅い？
　　　→GitHubは関係なさそう。
　　　　作成したサイトに原因がある、、

　2. 画像が原因で読み込みが遅い？
　　　→たしかに多くの画像を利用しているので、これに原因があるかも！
　　　　そこでlazy loadという方法を用いて解決する。

lazy load

　多くの画像を含むWebページでは、表示速度が遅くなってしまう。HTMLでimgタグを使用して画像ファイルを読み込んでいる。この場合、ページ上のすべての画像がフルサイズで読み込まれている。しかし、下の画面の画像など現時点では必要のない画像もあるので、すべての画像を読み込む必要はない。そこで、画像の遅延ロードを行う。画像の遅延ロードは指定したときにユーザーの画面に画像をロードする。（スクロールの位置に応じて必要な分だけ画像を取得する）

lazy loadの使い方

　まず、GitHub（ https://github.com/tuupola/lazyload ）からlazyload.jsとjQueryを読み込む。

HTMLファイル
<!-- Google CDNからjQuryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- ダウンロードしたlazyload.jsの読み込み -->
<script src="js/jquery.lazyload.min.js"></script>

　imgのファイルパスをsrcからdata-originに変更して、遅延読み込み対象とわかるようにclassをつける。

HTMLファイル
<img class="lazy" src="画像のURL" data-original="画像のURL">

JSファイルを読みこませた記述のあとに挿入する。

JSファイル
$(function() {
    $('img.lazy').lazyload();
});

オプション

　

threshold

　読み込みのタイミングをずらしたいときに使う。マイナスの値を大きくするほど読み込みは遅くなる。

$(function() {
    $('img.lazy').lazyload({
        threshold: -200
    });
});

event

　画像が画像内に表示されたときではなく、指定したイベントが発生したときに表示される。
　clickは画像をクリックしたとき、mouseoverは画像にオンマウスしたときに表示される。

$(function() {
    $('img.lazy').lazyload({
        event: 'click'
    });
});

effect

　画像が表示されるときのエフェクトを設定できる。effect_speedを併用することで、速さも変更できる。

$(function() {
    $('img.lazy').lazyload({
        effect : 'fadeIn',
        effect_speed: 2000
    });
});

感想

　大量の画像を使っていたので、読み込みが遅くなっていた。lazy loadを使うことでWebページの読み込み速度を改善することができた。

参考文献

http://cly7796.net/wp/javascript/plugin-jquery-lazyload/
https://alaki.co.jp/blog/?p=2527

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T23:06:41+09:00

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

100日チャレンジの355日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
355日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T22:46:24+09:00

2020/6/26 学習メモ２　フロントエンド　HTML復習

Udemy プログラミング学習

利用した学習教材

Udemy

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！
https://www.udemy.com/course/web-application-development/

学習範囲

セクション3の19から35まで

学習時間

3時間
（qiitaへ学習メモを残す時間も含めて）

環境構築

・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）

HTML復習

（前回のbody要素からの続き）

インテンド

インテンドとは、字下げのことで
文章の先頭を字下げすることでコード読みやすくする記法。

やり方としては、字下げしたい文章の先頭にカーソルを合わせてtabキー

改行

<br>
breakの略。
改行を行う要素

区切り

<hr>
Horizontal Ruleの略。
段落間などに区切り線を表示することができる

リスト

ul要素（Unordered List)

<ul></ul>
順序のないリスト
ブラウザ上では先頭に ・ がつく。

ol要素(Ordered List)

<ol></ol>
順序のあるリスト
ブラウザ上では先頭に 1.2.3...と数字がつく。

li要素

<li></li>
リストの項目を記述する際に使う要素。

説明リスト

一連の用語と説明が一緒になったリスト

dl要素（Description List）

<dl></dl>
説明リスト自体を作るための要素

dt要素（Description Term）

<dt></dt>
説明したい用語を記述する要素

dd要素（Definition Description）

<dd></dd>
dt要素で定義した要素に対する説明文を記述する要素

技術ドキュメントMDN

MDNとは、Mozilla Developer Networkの略。
Web開発に関する技術情報を公開しているサイト。

情報の質と信頼性も高いので、実務でも参照する方が多い。
プログラミングにおいてわからないことがあったらまずはMDN。

よくあるHTML記述間違い

・全角文字　全角スペース
・終了タグの書き忘れ
・タグのスペルミス
・ファイルの保存忘れ
（現在使っているVSCodeは自動保存の設定をしてあるが他のコードエディターを使う際には注意）

こういった記述間違いを探してくれるサービスもある。
https://validator.w3.org/
W3C　Markup Validation Service

HTMLの規格を管理している団体である W3Cの公式のツールなので、信頼性がある。

HTMLのコメント

<!-- コメント　-->
HTMLファイルには記載されているが、Webサイト上には表示しない機能

使用例として
・注意書き
<!-- ここからhead -->
・一時的に無効にしたい
<!-- <p>テキスト</p> -->

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T20:13:32+09:00

お絵かきできるSNSを作りたい！10

お絵かきできるSNSを作りたい後半戦、１つ前に戻すを作っていきます。

筆跡が分るようにjsonで座標を逐一保存しようかとも考えたのですが、管理が大変そうだったので１ストローク毎にcanvasの中身をスクリーンショットを撮る感じにしました。

まず、対処のボタンにイベントを追加します。

<a href="#" class="btn" onclick="doPrevCanvas();">１つ前に戻す</a>

ローカルストレージを用意し、レイヤー1とレイヤー2をそれぞれ１ストローク毎に保存していきます。

// ストレージの初期化
var myStorage = localStorage;

function initLocalStorage(){
    myStorage.setItem("__layer", JSON.stringify([]));
    myStorage.setItem("__layer2", JSON.stringify([]));
}

function setLocalStoreage(){
    var png = $("#canvas")[0].toDataURL();
    var logs = JSON.parse(myStorage.getItem("__layer"));
    setTimeout(function(){
        logs.unshift({png});
        myStorage.setItem("__layer", JSON.stringify(logs));
    }, 0);
    var png2 = $("#canvas2")[0].toDataURL();
    var logs2 = JSON.parse(myStorage.getItem("__layer2"));
    setTimeout(function(){
        logs2.unshift({png2});
        myStorage.setItem("__layer2", JSON.stringify(logs2));
    }, 0);
}

function doPrevCanvas(){
    var logs = JSON.parse(myStorage.getItem("__layer"));
    if(logs.length > 0){
        logs.shift();
        setTimeout(function(){
            myStorage.setItem("__layer", JSON.stringify(logs));
            ct.clearRect(0, 0, $("#canvas").width(), $("#canvas").height());
            if (logs.length == 0) {
                draw("canvas",logs["png"]);
            } else {
                draw("canvas",logs[0]["png"]);
            }
        }, 0);
    }
    var logs2 = JSON.parse(myStorage.getItem("__layer2"));
    if(logs2.length > 0){
        logs2.shift();
        setTimeout(function(){
            myStorage.setItem("__layer2", JSON.stringify(logs2));
            ct2.clearRect(0, 0, $("#canvas2").width(), $("#canvas2").height());
            if (logs2.length == 0) {
                draw("canvas2",logs2["png2"]);
            } else {
                draw("canvas2",logs2[0]["png2"]);
            }
        }, 0);
    }
}

function draw(target,src) {
    var img = new Image();
    img.src = src;
    img.onload = function() {
        if (target == "canvas"){
            ct.drawImage(img, 0, 0);
        } else {
            ct2.drawImage(img, 0, 0);
        }
    }
}

あとは初期化の中でローカルストレージの用意し、線の書き終わりにレイヤー１と２の情報を保存します。

・[github]修正内容はこちら

次回は小技（ショートカットの実装）を予定しています。
また気が向いたときにお会いしましょう。

最初：お絵かきできるSNSを作りたい！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T15:40:21+09:00

コールバック関数不要「JSONP」取得関数（webページで複数回JSONPを使いたい人に）

Google Apps Scriptで作った複数の疑似APIからのJSONP取得が面倒（コールバック関数をその分だけ用意する必要があるなど）かつjQuery拡張のjQuery-JSONPを使いたくなかったので、コールバック関数無しにJSONPからJSONを取得する関数をピュアなJavaScriptで作ってみました。この関数を使えば、もう、JSONP取得のためにわざわざコールバック関数を用意する必要はありません。

大元のコード

JavaScript
//引数
//url: jsonpのurl
//cbName: jsonpを起動することになっているはずのコールバック関数の名前
function JSONP(url, cbName="callback") {
    return new Promise(function(_r, _e) {
        window[cbName] = function(j) {
            delete window[cbName];
            _r(j);
        }
        var s = document.createElement("script");
        s.src = url;
        document.head.appendChild(s);
        s.onerror = function(e) {
            delete window[cbName];
            _e(e);
            s.remove();
        }
    });
}

minified版

JavaScript
function JSONP(url,cbName="callback"){return new Promise(function(i,r){window[cbName]=function(n){delete window[cbName];i(n)};var u=document.createElement("script");u.src=url;document.head.appendChild(u);u.onerror=function(n){delete window[cbName];r(n);u.remove()}})}

使い方

JSONP関数はPromiseオブジェクトを返すので、返り値はthenで受けます。

分からない方のために念の為補足すると、thenの中に書かれた処理は、JSONPからJSONを取得した「直後」に起動します。

JSONPのURL

JavaScript
var url = "https://script.google.com/macros/s/XXXXX/exec?callback=cbFunc";
//この例では、"cbFunc"がリクエストしたコールバック関数名
//サーバー側でコールバック関数名が指定されている（ヒエッ…）場合は、その名前を把握しておく

使い方

JavaScript
/*使用例その1*/
JSONP(url, "cbFunc")
.then(function(r) {//jsonp読み込み成功時の処理
    console.log(r);//返り値（r）はJSONオブジェクト
})
JavaScript
/*使用例その2*/
JSONP(url, "cbFunc")
.then(function(r) {
    console.log(r);
})
.catch(function(e) {//jsonp読み込み失敗時の処理
  console.log(e);//返り値（e）はonerrorのイベントオブジェクト
})
JavaScript
/*使用例その3-α*/
//ネストであれば、同じコールバック関数名を使ってもヨシ！
//ネストで無いならば、コールバック関数名は被らないように
JSONP(url, "cbFunc")
.then(function(r) {
    console.log(r);

    JSONP(url, "cbFunc")
    .then(function(r) {
        console.log(r);
    })
})

/*使用例その3-β*/
//IEを気にする必要が無いなら、アロー関数を使うのもアリ
JSONP(url, "cbFunc").then(r=>{console.log(r),JSONP(url, "cbFunc").then(r=>console.log(r))});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T15:40:21+09:00

コールバック関数&jQuery不要「JSONP」取得関数（webページで複数回JSONPを使いたい人に）

Google Apps Scriptで作った複数のAPIからのJSONP取得が面倒（コールバック関数をその分だけ用意する必要があるなど）かつjQuery拡張のjQuery-JSONPを使いたくなかったので、コールバック関数無しにJSONPからJSONを取得する関数をピュアなJavaScriptで作ってみました。この関数を使えば、もう、JSONP取得のためにわざわざコールバック関数を用意する必要はありません。

大元のコード

JavaScript
//引数
//url: jsonpのurl
//cbName: jsonpを起動することになっているはずのコールバック関数の名前
function JSONP(url, cbName="callback") {
    return new Promise(function(_r, _e) {
        window[cbName] = function(j) {
            delete window[cbName];
            _r(j);
        }
        var s = document.createElement("script");
        s.src = url;
        document.head.appendChild(s);
        s.onerror = function(e) {
            delete window[cbName];
            _e(e);
            s.remove();
        }
    });
}

minified版

JavaScript
function JSONP(url,cbName="callback"){return new Promise(function(i,r){window[cbName]=function(n){delete window[cbName];i(n)};var u=document.createElement("script");u.src=url;document.head.appendChild(u);u.onerror=function(n){delete window[cbName];r(n);u.remove()}})}

使い方

JSONP関数はPromiseオブジェクトを返すので、返り値はthenで受けます。

分からない方のために念の為補足すると、thenの中に書かれた処理は、JSONPからJSONを取得した「直後」に起動します。

JSONPのURL

JavaScript
var url = "https://script.google.com/macros/s/XXXXX/exec?callback=cbFunc";
//この例では、"cbFunc"がリクエストしたコールバック関数名
//サーバー側でコールバック関数名が指定されている（ヒエッ…）場合は、その名前を把握しておく

使い方

JavaScript
/*使用例その1*/
JSONP(url, "cbFunc")
.then(function(r) {//jsonp読み込み成功時の処理
    console.log(r);//返り値（r）はJSONオブジェクト
})
JavaScript
/*使用例その2*/
JSONP(url, "cbFunc")
.then(function(r) {
    console.log(r);
})
.catch(function(e) {//jsonp読み込み失敗時の処理
  console.log(e);//返り値（e）はonerrorのイベントオブジェクト
})
JavaScript
/*使用例その3-α*/
//ネストであれば、同じコールバック関数名を使ってもヨシ！
//ネストで無いならば、コールバック関数名は被らないように
JSONP(url, "cbFunc")
.then(function(r) {
    console.log(r);

    JSONP(url, "cbFunc")
    .then(function(r) {
        console.log(r);
    })
})

/*使用例その3-β*/
//IEを気にする必要が無いなら、アロー関数を使うのもアリ
JSONP(url, "cbFunc").then(r=>{console.log(r),JSONP(url, "cbFunc").then(r=>console.log(r))});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T15:03:15+09:00

[Javascript]iframeによって読み込まれているか判別する方法

はじめに

自分がiframeによって読み込まれているときだけ行いたい処理があったので、iframeによって読み込まれているかどうかを判別する方法を調べました。
自分用の備忘録も兼ねてまとめます。

結論

初めに結論です。

window != window.parent

で判別できます。
trueならiframeによって読み込まれているということになります。

解説

簡単に解説を書きます。

まず、iframeについてMDNに書かれていることをまとめると次のようになります。

  • iFrameは閲覧コンテキスト（browsing context)を表現する
  • 閲覧コンテキストは、セッション履歴（History）と文書（Document）をもつ
  • 他の閲覧コンテキストを埋め込んでる閲覧コンテキストは親閲覧コンテキストと呼ばれる
  • 最上位の閲覧コンテキストは、Windowオブジェクトで表される

image.png

つまり、
iFrameによって読み込まれている時、window.parentはiframeの親閲覧コンテキストになるので、windowにはなりません。

間違いや指摘があれば、コメントにお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T12:23:34+09:00

GoogleChrome 人のサイトの任意の場所にアンカーリンク＋ハイライト表示

アンカーリンクって知ってる？

アンカーリンク
でページ内の指定の場所に移動するやつ。
ページ内リンク。

通常のアンカーリンクの設定方法

HTMLタグのid要素にごにょごにょ書いて、そこにリンクを指定する。

<h1>
  <span id="アンカーリンク" class="fragment"></span>
  <a href="#アンカーリンク">
    <i class="fa fa-link"></i>
  </a>
  アンカーリンク
</h1>

GoogleChromeの機能

#:~:text=ページ内リンク って指定すると、id設定無くても好きなところにジャンプできるよ！
ページ内リンク
指定箇所が黄色でハイライトされるよ！
指定文字が複数ある場合は先頭にマッチしたところでとまるよ！
長い文章のハイライトにも対応してるよ！
　#:~:text=ごにょごにょ,指定
ごにょごにょ

（追記）
Qiitaで反応しない、、、かなしみ
wikipedia:ケルビン
あとマークダウンでも反応しない、、、かなしみ
動作は以下のリンクで確認してね（）
https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%AB%E3%83%93%E3%83%B3#:~:text=%E7%B5%B6%E5%AF%BE%E9%9B%B6%E5%BA%A6,%E4%B8%89%E9%87%8D%E7%82%B9%E3%81%AE%E7%86%B1%E5%8A%9B%E5%AD%A6%E6%B8%A9%E5%BA%A6

アンカーリンク

これはページ内リンク用の段落です。

Qiitaデビュー

初めて記事を書いたよ。
リンク周りは自分の記事がどういうリンクになるか分からないから暫定で、後で修正するよ。

（追記の追記）いろいろ試す。

マークダウンでアンカー指定のみ
マークダウンでフルURL
フルURL：直書き
https://qiita.com/bracket_i/items/dcc69f0158cddf8e8c85#:%7E:text=%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF

上と同じリンク
マークダウンでwikipedia:ケルビン
直書きでwikipedia
https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%AB%E3%83%93%E3%83%B3#:~:text=%E7%B5%B6%E5%AF%BE%E9%9B%B6%E5%BA%A6,%E4%B8%89%E9%87%8D%E7%82%B9%E3%81%AE%E7%86%B1%E5%8A%9B%E5%AD%A6%E6%B8%A9%E5%BA%A6

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-06-26T00:01:54+09:00

【初心者でもわかる】border-radiusで円を作る方法。一緒にホールケーキを作ろう!

どうも、7noteです。今回はborder-radiusでホールケーキを作るお話。（近々エクレアも作る予定。）

「もう3時か、おやつにしよう。」
「（バタバタ）・・・よし、イチゴのショートケーキができたぞ！」

「・・・しまった、ホールケーキにしたかったのに、丸い型がなくて四角いケーキになっちゃった！」

失敗例

cake.png

「あーーー・・・」
「でも大丈夫！ 何たってフロントエンジニアは[border-radius]で丸くさせることができるからね！！」
みんなも[border-radius]で円を作る方法をマスターして、キレイなホールケーキを作ろう!

ショートケーキの材料はこちら(1人前)

ファイル CSSプロパティ 意味
index.html
style.css border-radius: ~~; 角丸を設定
cake.png 正方形のケーキの画像

作り方

  1. index.htmlに正方形のケーキの画像を用意
  2. style.cssで、ケーキを四角から正円にして出来上がり

1.index.htmlに正方形のケーキの画像を用意

index.html
<div class="dish">
    <img src="cake.png" alt="ショートケーキ">
</div>

2.style.cssで、ケーキを四角から正円にして出来上がり

style.css
    .dish img {
        border-radius: 50%; /* 角を50%丸くして、正方形を正円にしている。*/
    }

＼完成／

cake_ok.png

解説・作り方のコツ

  • [border-radius]にはpxやem、%などの単位が使えます！今回は円にするために、[border-radius: 50%;]と書くことで4つの角をそれぞれ幅や高さの半分まで丸くしたので、丸くなった端同志が繋がって円のように見えています！
  • お皿（dish）じゃなくて、ケーキ自身（img）に[border-radius]を適応させないとうまく丸くならないから気をつけて！
  • このあとエクレアも作るので、もっと[border-radius]について知りたい人はエクレアの作り方も見ていってね！

→→【初心者でもわかる】border-radiusで長方形の左右を丸くして、エクレアを作る

まとめ

やっぱりホールケーキといったらイチゴのショートケーキでしょ。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！
cake.png

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

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

日付別

タグ一覧