What's New Qiita

20191028のHTMLに関する記事は9件です。

  • 投稿日：2019-10-28T23:05:41+09:00

【jQuery】いい感じのアコーディオンを自作した

はじめに

アコーディオン（開閉メニュー）を実装するとき、jQuery標準APIの slideUp() / slideDown() だと融通がきかなかったりするので簡単なスニペットを作りました。残念ながらjQuery依存です。そしていい感じかはわかりません。

使い方

  1. jQueryとpublic/assets/js/app.jsを読み込む
  2. 対象要素に下記を指定する
class名 カスタム属性
js-accordion-target
→ 開閉する要素		 data-accordion-height
→ 初期表示の高さを指定（初期値: 0）
js-accordion-trigger
→ クリックする要素		 data-accordion-target
→ ターゲットとなる要素を指定

サンプルコード

html
<!-- target -->
<div class="js-accordion-target" id="target" data-accordion-height="50">
  <p style="width: 300px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<!-- trigger -->
<a class="js-accordion-trigger" href="#" data-accordion-target="#target">read more</a>

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

コードの解説

以下、Accordionクラスのコードです。

js
class Accordion{
    constructor() {
        this.targetClass = 'js-accordion-target';
        this.$target = $('.' + this.targetClass);
        this.triggerClass = 'js-accordion-trigger';
        this.$trigger = $('.' + this.triggerClass);
        this.dataTarget = 'data-accordion-target';
        this.dataInitialHeight = 'data-accordion-height';
        this.openClass = 'is-open';
        this.ease = 'swing';
        this.speed = 300;
    }

    /**
     * 初期化処理。下記の場合エラー
     * - トリガー要素に[data-accordion-target]属性が存在しない
     * - トリガー要素に指定した[data-accordion-target]要素が存在しない
     * - [data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない
     */
    init(){
        try {
            if (!this.$target.length || !this.$trigger.length) return;

            this.$trigger.each((i, el) => {
                if ($(el).attr(this.dataTarget)) {
                    if (!$($(el).attr(this.dataTarget)).length || !$($(el).attr(this.dataTarget)).hasClass(this.targetClass)) {                        
                        throw new Error(this.targetClass + ' element does not exist');
                    }
                } else {
                    throw new Error(this.dataTarget + ' attribute does not exist');
                }
            });

            $('[' + this.dataTarget + ']').each((i, el) => {
                if ($($(el).attr(this.dataTarget)).length && !$(el).hasClass(this.triggerClass)) {                    
                    throw new Error(this.triggerClass + ' attribute does not exist');
                }
            });

        } catch (e) {
            console.error(e.message);
            return;
        }

        this.setTarget();
        this.setEvent();
    }

    /**
     * ターゲット要素の初期スタイル指定
     */
    setTarget(){
        this.$target.each((i, el) => {
            let $el = $(el),
                initialHeight = $el.attr(this.dataInitialHeight);

            $el.css({
                height: initialHeight ? Number(initialHeight) : 0,
                overflow: 'hidden',
            })
        });
    }

    /**
     * イベント定義
     */
    setEvent(){
        $(window).on('resize', () => {
            this.resize();
        });

        this.$trigger.on('click', (e) => {
            this.click(e);
            return false;
        });
    }

    /**
     * クリックイベント
     * @param {object} event クリックイベントオブジェクト
     */
    click(event){
        let $target = $($(event.currentTarget).attr(this.dataTarget)),
            initialHeight = $target.attr(this.dataInitialHeight),
            height = this.getHeight($target.contents()),
            h = 0;

        if ($target.hasClass(this.openClass)) {
            h = initialHeight ? Number(initialHeight) : 0;
            $target.removeClass(this.openClass);
        } else {
            h = height;
            $target.addClass(this.openClass);
        }

        this.setHeight({
            $target: $target,
            speed: this.speed,
            height: h,
        });
    }

    /**
     * リサイズイベント
     */
    resize(){
        this.$target.each((i, el) => {
            let $el = $(el),
                h = this.getHeight($el.contents());

            if (!$el.hasClass(this.openClass)) return;

            this.setHeight({
                $target: $el,
                speed: 0,
                height: h,
            });
        });
    }

    /**
     * ターゲット要素の高さ指定
     * @param {object} param 対象要素・スピード・高さ
     */
    setHeight(param){
        let $target = param.$target,
            s = param.speed,
            h = param.height;

        $target.stop().animate({ height: h }, s, this.ease);
    }   

    /**
     * 対象要素の高さを取得
     * @param {object} $el 対象要素
     * @return {number} 対象要素の高さ
     */
    getHeight($el){
        let h = 0;

        $el.each((i, el) => {
            if ($(el).get(0).nodeType === Node.TEXT_NODE) {            
                $(el).wrap('<span>');
                h += $(el).parent().outerHeight(true);
                $(el).unwrap('<span>');
            } else {
                h += $(el).outerHeight(true);
            }
        });

        return h;
    }   
}

let accordion = new Accordion();
accordion.init()

難しいことはしてないので、コメント読んでいただければなんとなく分かるかと思いますが、一応メソッドごとに解説します。

initメソッド

initメソッドでは初期化を行ってます。
まず、トリガー要素かターゲット要素が存在しない場合は、その後の処理が実行されないようreturnします。

if (!this.$target.length || !this.$trigger.length) return;

その後下記エラーをチェックし、該当すればエラーを投げます。

  • トリガー要素に[data-accordion-target]属性が存在しない
  • トリガー要素に指定した[data-accordion-target]要素が存在しない
  • [data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない
this.$trigger.each((i, el) => {
    if ($(el).attr(this.dataTarget)) {
        if (!$($(el).attr(this.dataTarget)).length || !$($(el).attr(this.dataTarget)).hasClass(this.targetClass)) {
            // トリガー要素に指定した[data-accordion-target]要素が存在しない
            throw new Error(this.targetClass + ' element does not exist');
        }
    } else {
        // トリガー要素に[data-accordion-target]属性が存在しない
        throw new Error(this.dataTarget + ' attribute does not exist');
    }
});

$('[' + this.dataTarget + ']').each((i, el) => {
    if ($($(el).attr(this.dataTarget)).length && !$(el).hasClass(this.triggerClass)) {
        // [data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない
        throw new Error(this.triggerClass + ' attribute does not exist');
    }
});

エラーチェックを無事抜けたら、最後にsetTarget()とsetEvent()を呼び出します。

try {
    // エラーチェック処理
} catch (e) {
    console.error(e.message);
    return;
}

this.setTarget();
this.setEvent();

setTargetメソッド

setTargetメソッドでは、ターゲット要素（ .js-accordion-target ）の初期スタイルを設定します。
height → ターゲット要素が[data-accordion-height]属性を持っていたらその値、なければ0
overflow → アコーディオンを閉じたとき子要素がはみ出さないように overflow: hidden してあげます

this.$target.each((i, el) => {
    let $el = $(el),
        initialHeight = $el.attr(this.dataInitialHeight);

    $el.css({
        height: initialHeight ? Number(initialHeight) : 0,
        overflow: 'hidden',
    })
});

setEventメソッド

setEventメソッドでは、下記のイベント定義を行います。

// トリガーのクリックイベント
this.$trigger.on('click', (e) => {
    this.click(e);
    return false;
});

// リサイズイベント
$(window).on('resize', () => {
    this.resize();
});

clickメソッド

clickメソッドは、トリガー要素がクリックされた際に実行される処理です。
ざっくり以下のような処理を行ってます。
1. ターゲット要素が閉じたとき、開いたときの高さを取得
2. ターゲット要素の開閉状態を見て、値を設定
3. アニメーション

// 1. ターゲット要素が閉じたとき、開いたときの高さを取得
let $target = $($(event.currentTarget).attr(this.dataTarget)),
    initialHeight = $target.attr(this.dataInitialHeight),
    height = this.getHeight($target.contents()),
    h = 0;

// 2. ターゲット要素の開閉状態を見て、値を設定
if ($target.hasClass(this.openClass)) {
    h = initialHeight ? Number(initialHeight) : 0;
    $target.removeClass(this.openClass);
} else {
    h = height;
    $target.addClass(this.openClass);
}

// 3. アニメーション
this.setHeight({
    $target: $target,
    speed: this.speed,
    height: h,
});

resizeメソッド

resizeメソッドは、リサイズ時にターゲット要素に対して行われる処理です。
リサイズ時に子要素の高さが変わるとレイアウトが崩れてしまうので、常にターゲット要素の高さを再計算してあげます。
流れとしては以下です。
1. ターゲット要素が開いたときの高さを取得
2. ターゲット要素が閉じてるときはreturn
3. 高さ調整

resize(){
    this.$target.each((i, el) => {

        // 1. ターゲット要素が開いたときの高さを取得
        let $el = $(el),
            h = this.getHeight($el.contents());

        // 2. ターゲット要素が閉じてるときはreturn
        if (!$el.hasClass(this.openClass)) return;

        // 3. 高さ調整
        this.setHeight({
            $target: $el,
            speed: 0,
            height: h,
        });
    });
}

setHeightメソッド

setHeightメソッドは、ターゲット要素の高さを設定します。
なお、引数で speed / height を渡せるようにしてるので、
resize() の高さ制御も、click()の開閉アニメーションもこの処理を実行してます。

setHeight(param){
    let $target = param.$target,
        s = param.speed,
        h = param.height;

    $target.stop().animate({ height: h }, s, this.ease);
}

getHeightメソッド

getHeightメソッドは、引数に渡ってきた要素の高さの合計値を返します。
ターゲット要素が開いたときの高さ（＝子要素の高さの合計値）を取得するときに使用します。
なお、子要素がテキストノードの場合は高さが取れないので、一旦<span>でwrap → 高さ計算 → <span>をunwrap という荒業を行ってます。（絶対もっと良い方法ありますが）

let h = 0;

$el.each((i, el) => {
    if ($(el).get(0).nodeType === Node.TEXT_NODE) {            
        $(el).wrap('<span>');
        h += $(el).parent().outerHeight(true);
        $(el).unwrap('<span>');
    } else {
        h += $(el).outerHeight(true);
    }
});

return h;

まとめ

大したものでは無いのですが、勉強がてらアコーディオン機能を作ってみました。
小さな機能に関しては自作してしまったほうが早かったり融通がきいたりするので、どんどん自作コードで身を固めていきたいです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-28T22:56:22+09:00

今日から学んできたことを毎日ブログにしていきたいと思います！

　さて、今日から毎日学んだことをブログに記していきたいと思う。

　そのまえに私の今現在の状況とプログラマーを目指すきっかけについて記していこうと思う。私は今現在、某国立大学で化学系のことを学んでいる。しかし、インターンシップなどに参加しても、どうも専攻の職に興味などが一切湧かなかった。それもそのはず、高校から大学までレールの上をただ何も考えずに歩んできたからだ。高校・大学では、何となく受かりそうだから受けてきた。大学に行くのも惰性で行き、人生つまんねえなあと思う日々。アニメ的な展開起きないかなと考える日々。そんな人生を変えることは起きないのも当たり前だ。何にも行動せず、ただ過ぎ行く日々をこなしているからだ。

　というのを毎日考え過ごして来て、これからは多くのことにチャレンジし継続していきたいと思う。きっかけは自分でもあまり覚えていないが、フリーランスになれば家で仕事できるなどそんな甘えた考えだろう。話は戻り、私が今現在継続していることは、プログラミング学習だ。つい一週間位前から始めている。それに加え、ブラインドタッチを三日前から始めている。今、ブログを書くのもブラインドタッチだ。全然思った文字も打てないし、時間もかかり、少しもどかしい気持ちだ。

　前置きが長いな。すみません。今日したことは、ドットインストールのBoostrapを1～7までこなした。プログラミングでインプットしたのはこれだけだ。すごい少ない。自覚はしているが、どうにも身が入らなかった。この原因としては就職について最近焦り初めており、今日はキャリアカウンセリングというのを受けてきた。これは、就職相談みたいなのだ。利用してみた感想としては、「めちゃくちゃ焦りが積もった」この一言につきる。今まで就職について考えてきてないとはいえ、やばいと思った。さらに、今の時期からインターンなどを経て早期面接とか受けている人がいることいにはとてもびっくりした。周りに動いている人がいないし、地方だからとは言え情報不足だった。このような原因で焦りの思考ループにより身が入らなかった。今日一日解決策を考えているが、現状何も思いつかない。明日も考えよう。

　さて話は戻り、今日は下のような画像のように、学んだ単元のことを要約しながら進めた。無題.png

さて、学んだことをアウトプットします。Boostrapによりcssの機能を省ける感じなのかな。br-○やtext-○をhtmlの中に組み込んで省いた感じだ。margin:0 auto;のやり方も覚えた。my-0 mx-autoでいけるみたい。後は高さや幅をhやwで略すのも覚えておきたい。このやり方を22回まで続けよう。

今回の記事で書きたかったことの半分も書けなかった。文章能力もぜんぜんないし、タイピングが思うようにいかないのが原因だろう。こんな短い文章を書くのにも1時間近く経った。明日からは、もう少し短い文章にして継続していこう。

　明日のTo Do List
・Progate　中級道場　上級道場
・ドットインストール　Boostrap 8～15
・参考になるブログを読む　詳しくは明日書きます。
大学もあるけど明日も一日、頑張りましょう！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-28T22:49:55+09:00

[ionic]3分クッキング ~ビンゴマシーン編~

はじめに

こんにちは！
Zizで活動しているkinetukiと申します。
今回は3分でビンゴマシーンを作っていきます。
宴会シーズンにぴったりの品ですね！

用意するもの

  • ionic4で作成したプロジェクト
  • コーヒー(できればブラック)
  • きのこの山 ※たけのこの里では代用不可なので気をつけてください

調理

html

まずはhtmlを調理していきます。
ビンゴの数字とスタート/ストップボタンを作りましょう。

home.html
<ion-content>
  <div class="div-main-display">
    <ion-label>{{displayNum}}</ion-label>
  </div>
  <div class="ion-padding">
    <ion-button *ngIf="!isRunning" expand="block" size="large" (click)="startSlot()">
      スタート
    </ion-button>
    <ion-button *ngIf="isRunning" expand="block" size="large" color="medium" (click)="stopSlot()">
      ストップ
    </ion-button>
  </div>
</ion-content>

scss

次に、先ほど作ったhtmlに下味を付けていきます。
素材の味を生かすために、シンプルな味付けにします。

home.scss
.div-main-display {
    height: 50vh;
    max-height: 50vh;
    width: 100vw;
    max-width: 100vw;
    text-align: center;
    font-size: 70vw;
}

tsファイル

最後にtsファイルを合わせて完成です。

home.ts
export class HomePage {
  bingoNums: Array<number> = Array.from({length: 75}, (_, i) => ++i);
  displayNum: number = 1;
  isRunning: Boolean = false;
  intervalId: any;

  constructor() {}

  startSlot() {
    if(this.bingoNums.length === 0){ return; }
    this.isRunning = true;
    //ドラムロール
    this.intervalId = setInterval(() => {
      this.displayNum = this.getBingoNum(this.bingoNums);
    }, 50);
  }

  stopSlot() {
    clearInterval(this.intervalId);
    //一度出た数字を削除
    this.rmBingoNum(this.displayNum);
    this.isRunning = false;
  }

  getBingoNum(nums: Array<number>) {
    const randomIndex = Math.floor(Math.random() * (nums.length));
    return nums[randomIndex];
  }

  rmBingoNum(num: number) {
    const arr = this.bingoNums;
    const rmIndex = arr.indexOf(num);
    if(rmIndex !== -1){
      this.bingoNums.splice(rmIndex, 1);
    }
  } 
}

完成品

こちらが完成品です。
いかがでしょうか？

bingo_sample.gif

おわりに

ionicどころかフロントサイドを触り始めたばかりなので、
もっとこうしたほうがいいなどあればぜひ教えてくださると嬉しいです。
読んでいただきありがとうございました！

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

せくしょにんぐ・こんてんつ～？①

前回記事の振り返り

2回目まして、あさちゃんです。
前回は
「HTMLの用語の意味を直訳と意訳を交えて解釈する」
という内容で投稿したのですが、
いいねやコメントをくださった方ありがとうございました。

コメントで、とても心の優しいユーザーさんたちから

:relieved::point_up_tone1:　＜　HTMLの歴史を辿ったほうがいいかもね！

といったアドバイスと共に詳しく解説してくださる方もいて、
とても興味深いなと感じたと同時に、

:girl_tone1:　｡ O（　ぽんぽん見知らぬ方からレスが返ってくるQiitaすげえ。アクティブ～！　）

と思いました。

HTMLの歴史については本当に興味が沸いたので、（CERNってワード、トキメキますよね♡）
勉強してまた別の機会に記事にしたいなと思います。
改めてコメントくださった皆さんありがとうございました！

今回のテーマ

月半ばになり、社内では事務職のほうで空き時間が増えてきましたので
とってもありがたいことに毎日たっぷりコーディングの勉強をさせていただいています。

そこで、先輩が貸してくださった参考書に
サラッと記載されていた【セクショニングコンテンツの種類】というタイトル...

:girl_tone1:　＜　せくしょにんぐ・こんてんつ～？

となりまして（タイトル回収）

①そもそも言葉の意味がわからない
②セクショニングコンテンツの種類とは？
③調べてみたらHeader要素とFooter要素はセクショニングコンテンツ組には入ってないらしい
④div要素との使い分けがわからない

など、まだまともにコーディングしたことない初心者には「？？？」なことが多すぎたので
記事にして深堀りしてみることにしました。

HTMLの初心者仲間さんだけでなく
HTML5になってから結局のところよくわかってない...みたいな方にも
ちょっとはお役に立てる内容になるといいな！
という淡い期待を込めて。

①言葉の意味を知る：セクショニングコンテンツ

セクショニングコンテンツという概念はそもそもHTML5から導入された要素のようです。

Web辞書で検索をかけてみると

Section　⇒　区切り　、Contents　⇒　内容物

という意味になっています。
中学で習う英単語ですが私は調べないとパッと出てきませんでした。（大卒）

つまり、『WEBサイトの内容を区切る要素』となりますね！

WEBサイトの内容を区切るというのはつまり、見出しごとに

でもでも、別にあえてHTML上で区切ったりしなくたって、
人間はWEBの内容に『見出し』があれば
「Aの見出しとBの見出しは別の内容」、という風に分けられていることが認識できるし、
新聞のコラムみたいにテーマと少し違う内容が書いてあっても
「ここには蛇足的な内容が書いてあるな」と認識できます。

じゃあなぜ必要なのか。

さらに調べてみると、ちゃんとワケがありました。

セクショニングする理由

コンピューターに理解してもらうため

例えばより多くのユーザーの検索結果に引っかかり、上位に表示させるため、
SEO対策の一つとして、きちんとセクショニングする必要があります。

こちらがWEBサイトが検索エンジンに表示されるまで3つのステップ

STEP1：クローリング（検索ロボットがあらゆるページを巡回･情報収集）
STEP2：インデキシング（集めた情報を整理整頓・データベースに格納）
STEP3：スコアリング（STEP2までの情報を踏まえて入力されたキーワードとの関連度合いを評価・表示順を決定する）

セクショニングが活きてくるのはSTEP2のインデキシング！
きちんとした文書構造で書かれているかも含め、
WEBページの内容の濃さ･正確さなどの観点から
インデキシングの対象となるか否かが決定するみたいです。

:robot:　＜　僕に見つけてほしいなら内側までちゃんと作ってね！

ってことですね！がんばりましょう！

②４つの種類と利用シーン

セクショニングコンテンツには、article・nav・aside・sectionの4種類がありますが
それぞれどんな時に使うのかをしらべました！

article要素

articleは日本語で「記事」という意味
その名の通り、記事のようにまとまった内容..ブログ記事やそのコメントなど
それだけで独立した内容となっているセクションを示すための要素。

aside要素

asideは「余談」とか「脱線」みたいな意味
メインコンテンツの脇で、補足的な情報を載せたいときにつかう要素です。
新聞や参考書の「コラム」とかですね！

nav要素

navはnavigationの略で、WEBページ上のナビゲーションを指します。
ページ上をスムーズに移動するためのセクションをこの要素で囲っておくみたいです。

section要素

他の3種（article・aside・nav要素）のどれにも当てはまらない内容を囲います。

勉強したての私は、4種類の中でsectionが一番よく見る要素！っていう印象なんですが
実際に業務で使い始めたらどうなんだろう？
作るWEBページによって変わるのかな。

次回につづく

文章書くの遅すぎマンなので一旦今回はここまでにして
後半をまた来週頭くらいに投稿したいと思います！

ここまでで間違ってることなどあったらぜひご指導ください！！

私がおすすめしたい、かわいいQiita記事

私にメンターとしてついてくれている先輩が2人いらっしゃるのですが、
おふたりともQiitaでとてもかわいい制作物を紹介してまして...
HTMLとCSSを使ったものばかりで、読むたびに「わたしもいつか...！」とやる気になります。

私のような初心者さんたちもこれを読んだらきっともっと勉強したくなる！

と思うので今回と次回で１つずつシェア！?

[HTML/CSS]チェックボックスの仕組みを使ってえだまめ無限プチプチをつくるぞ

みなさんの【勉強がんばろう！】と思えた
おすすめ記事があったら是非教えてください！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-28T19:05:37+09:00

HTML/CSSの書き方(ちょっとhaml)

html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。
都度更新しておりますのでご了承ください。

いつも参考にさせていただいているサイト

⭐️色の見本
http://www.netyasun.com/home/color.html
⭐️Font-familyメーカー
https://saruwakakun.com/font-family
⭐️命名について
https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506#html%E3%81%A8css%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E5%91%BD%E5%90%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

基本

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <title>サイト名</title>
</head>
  <body>
  <!-- 主にここからコードを書いていく -->

  <!-- ここまでの間にコードを書く -->
  </body>
</html>

リセットCSSが必要な場合は、好みのものを貼り付けてください。

画像の表示

html
<img src="dog.jpg" alt="［写真］">
haml
<%= image_tag 'dog.JPG'%>

画像を背景表示する

  • background-imageを使う
html
  <section class="works" >
    <div class="l-content">
      <h2 class="heading">Works</h2>
    </div>
  </section>
css
.works {
    width: 100%;
    height: 600px;
    background-image: url(画像のパス);
}

背景画像を透過する（テキストは透過しない）

  • opacityだとテキストも透過してしまうため、画像とテキストの間に１つ階層をはさめばOK！
html
  <section class="works" >
    <div class="l-content">　#これを挟む
      <h2 class="heading">Works</h2>
    </div>
  </section>
css
.l-content{
  height: 100%;
  background: rgba(255,255,255,0.5);
}

画像を中央寄せ

  • positionを使う
scss
.top-box {
  background-color: $BaseOrange;
  height: 100px;
  width: 100%;
  margin-bottom: 15px;
  position:relative;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }
}

リスト（li,ul)

    <ul class=contents>
      店名：
        <li class=contents__details>
        ジャンル：
        </li>
        <li class=contents__details>
        住所：
        </li>

//リストの点を消す
  li {
    list-style: none;
  }

要素の加工

要素を丸くする

css
.work-block {
    height: 250px;
    width: 250px;
    border-radius: 125px;
}

/*border-radiusを正方形の半分で指定する*/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-28T16:30:51+09:00

HTMLレンダリングエンジン

目次

  • ブラウザとは(ブラウザコンポーネント)
  • ブラウザとサーバーの通信
  • HTMLレンダリングエンジン
  • JavaScriptエンジン
  • 日本ブラウザシェア率(2016~)

ブラウザとは

ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ブラウザコンポーネント

1_lmbu87mtesvfqqbfmum-ka_m.png

出典: ブラウザはどのようにコンテンツをレンダリングしているのか？

各コンポーネント

  • ユーザインターフェース
    • ユーザは操作できる部分：アドレスバー、戻る/進むボタン、メニューなど
  • ブラウザ エンジン
    • ユーザインターフェースとレンダリングエンジンの間の情報の受け渡しを担当
  • ⭐️HTMLレンダリングエンジン
    • HTMLとCSSを解析し、画面に表示
  • ⭐️JavaScriptエンジン
    • JavaScriptを動かしを担当
  • ネットワーキング
    • HTTPリクエストなどのネットワーク呼び出しを担当
  • UIバックエンド
    • チェックボックスやウィンドウなどのコアウィジェットの描画を担当
  • データストレージ
    • Cookieなどのデータの保存を担当

ブラウザとサーバーの通信

20190413002537.jpg

  1. アドレスバーにアクセス先を入力
  2. ネットワーク経由でサーバーへリクエスト
  3. リクエスト内容より処理してHTMLを生成
  4. CSSとJSファイルなどもクライアントへ返信
  5. レンダリングエンジンとJavaScriptエンジンより画面を表示

出典: Webフロントエンドとサーバーサイドの技術動向をざっくり整理する

HTMLレンダリングエンジン

HTMLレンダリングエンジンとは、ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラムである。HTMLに加え、CSS、XMLなどを解釈できるものが多い。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

主なHTMLレンダリングエンジン

Trident (Internet Explorer、QQ浏览器) - トライデント
    EdgeHTML (Microsoft Edge) - エッジ
Gecko (Firefox) - ゲッコー
    Servo - サーボ
KHTML (Konqueror)
    WebKit (Safari) - ウェブキット
        Blink (Chromium, Chrome, Opera, Microsoft Edge) - ブリンク

HTMLレンダリングエンジンの歴史

スクリーンショット 2019-10-27 17.12.18.png

参照：Browser engine From Wikipedia, the free encyclopedia
補足: EdgeブラウザのChromiumベース移行、マイクロソフトが正式発表

JavaScriptエンジン

JavaScriptエンジンとはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

出典：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス

JavaScriptエンジンの種類

ブラウザ レンダリングエンジン JavaScriptエンジン
IE Trident Chakra (Jscript9)
Microsoft Edge EdgeHTML Chakara (JavaScript)
Firefox Gecko SpiderMonkey
Konqueror KHTML KJS
Safari WebKit JavaScriptCore
Chrome, Opera Blink V8

参照：PhantomJSと各ブラウザのJavascriptエンジンまとめ
参照：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス

日本ブラウザシェア率(2016~)

スクリーンショット 2019-10-27 17.48.36.png

補足：Desktop、Mobile、Tabletを含む
[出典：https://gs.statcounter.com]

ご静聴ありがとうございます

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

税込価格8%をまとめて税込価格10%に変更

税込価格、税抜価格が大量に併記されたWebサイトの、税込価格を消費税増税に伴い税率を8％から10%に一括で修正した時のメモ。

<td>税込価格</td>
<td>(税抜価格)</td>

の形でズラッと並ぶ。

perlのワンライナー

税込価格を10%にするには、8%の税込価格を一旦税抜価格に直して（税込価格÷ 1.08）、それを税率10%（税抜価格x1.1）に直せばいい。
（税率8%の税込価格）÷ 1.08 x 1.1 = 税率10%の税込価格

cat hoge.html | perl -pe ‘s/(?<!(?:\x28))([0-9]{1,3}),([0-9]{3})(?!(?:\x29))/(($1 . $2)\/1.08)*1.1/eg’ > replaced.html

以下解説

正規表現で税込価格のみ抽出

(?<!(?:\x28))([0-9]{1,3}),([0-9]{3})(?!(?:\x29))の解説

(?<! ) 　キャプチャしたい対象の数値の直前に任意の文字がない
(?: )　カッコの中の文字はキャプチャしない
\x28　前カッコ
(?<!(?:\x28))の意味は、キャプチャしたい数字の直前に、前カッコ「(」がない場合のみキャプチャする。

(?! )　キャプチャしたい対象の数値の直後に任意の文字がない
\x29　後ろカッコ
(?!(?:\x29)) の意味は、キャプチャしたい数字の直後に、後ろカッコ「)」がない場合のみキャプチャする。
これで前後にカッコを含まない数値だけキャプチャされる = （）内の税抜価格は無視され、税込価格のみ抽出される。

([0-9]{1,3}) 1〜3桁の数値
([0-9]{3}) 3桁の数値
([0-9]{1,3}),([0-9]{3}) は1,000~999,999 のいずれかの数値

抽出した税込価格を一旦税抜価格に直す

($1 . $2)\/1.08の解説

$1　カンマの前の1〜3ケタ
$2　カンマの後の2ケタ
($1 . $2) 結合した数値
\/　÷
($1 . $2)\/1.08 は税込価格を1.08で割った数値＝税抜価格

(($1 . $2)\/1.08)*1.1
税込価格を1.08で割った数値に1.1をかける
すると税込価格が8%から10%に変わる！

このままだと¥00,000のカンマが消えてしまうので、正規表現の検索置換でカンマを追加

coteditorなどの正規表現で検索置換ができるエディターで、htmlファイルを編集
(?<=(?:\¥))([0-9]{1,3})([0-9]{3})を$1,$2で検索置換すると、先頭に¥を含む数字4〜5桁の数字3桁目にカンマを追加

(?<= ) キャプチャしたい数値の直前に任意の文字がある
(?: ) カッコの中の文字はキャプチャしない
\¥ ¥
これで先頭に¥を伴わない、4桁〜6桁の数字列は排除される。
これをやらないと型番の数字なども検索置換されてしまいます。

([0-9]{1,3}) 1〜3桁の数値
([0-9]{3}) 3桁の数値
$1=([0-9]{1,3})
$2=([0-9]{3})
$1,$2で000,000の形式になる

以上です。

計算のやり方はこちらの記事から引用し、やりたかったことに合わせて自分なりにアレンジさせていただいたものです。
perlワンライナー自体の解説はこちらから。
数値計算を含む置換をperlのワンライナーでやってみた

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

Perlのワンライナーで税込価格8%をまとめて税込価格10%に変更

税込価格、税抜価格が大量に併記されたWebサイトの、税込価格を消費税増税に伴い税率を8％から10%に一括で修正した時のメモ。

<td>¥税込価格</td>
<td>(¥税抜価格)</td>
<td>¥税込価格</td>
<td>(¥税抜価格)</td>
<td>¥税込価格</td>
<td>(¥税抜価格)</td>
<td>¥税込価格</td>
<td>(¥税抜価格)</td>
<td>¥税込価格</td>
<td>(¥税抜価格)</td>

の形でズラッと並ぶ。

perlのワンライナー

税込価格を10%にするには、8%の税込価格を一旦税抜価格に直して（税込価格÷ 1.08）、それを税率10%（税抜価格x1.1）に直せばいい。
（税率8%の税込価格 ÷ 1.08) x 1.1 = 税率10%の税込価格

cat hoge.html | perl -pe ‘s/(?<!(?:\x28))([0-9]{1,3}),([0-9]{3})(?!(?:\x29))/(($1 . $2)\/1.08)*1.1/eg’ > replaced.html

以下解説

正規表現で税込価格のみ抽出

(?<!(?:\x28))([0-9]{1,3}),([0-9]{3})(?!(?:\x29))の解説

(?<! ) 　キャプチャしたい対象の数値の直前に任意の文字がない
(?: )　カッコの中の文字はキャプチャしない
\x28　前カッコ
(?<!(?:\x28))の意味は、キャプチャしたい数字の直前に、前カッコ「(」がない場合のみキャプチャする。

(?! )　キャプチャしたい対象の数値の直後に任意の文字がない
\x29　後ろカッコ
(?!(?:\x29)) の意味は、キャプチャしたい数字の直後に、後ろカッコ「)」がない場合のみキャプチャする。
これで前後にカッコを含まない数値だけキャプチャされる = （）内の税抜価格は無視され、税込価格のみ抽出される。

([0-9]{1,3}) 1〜3桁の数値
([0-9]{3}) 3桁の数値
([0-9]{1,3}),([0-9]{3}) は0,000~999,999 のいずれかの数値

抽出した税込価格を一旦税抜価格に直す

($1 . $2)\/1.08の解説

$1　カンマの前の1〜3ケタ
$2　カンマの後の2ケタ
($1 . $2) 結合した数値
\/　÷
($1 . $2)\/1.08 は税込価格を1.08で割った数値＝税抜価格

(($1 . $2)\/1.08)*1.1
税込価格を1.08で割った数値に1.1をかける
すると税込価格が8%から10%に変わる！

このままだと¥00,000のカンマが消えてしまうので、正規表現の検索置換でカンマを追加

coteditorなどの正規表現で検索置換ができるエディターで、htmlファイルを編集
(?<=(?:\¥))([0-9]{1,3})([0-9]{3})を$1,$2で検索置換すると、先頭に¥を含む数字4〜6桁の数字3桁目にカンマを追加

(?<= ) キャプチャしたい数値の直前に任意の文字がある
(?: ) カッコの中の文字はキャプチャしない
\¥ ¥
これで先頭に¥を伴わない、4桁〜6桁の数字列は排除される。
これをやらないと、価格ではない型番の数字の列なども検索置換されてしまいます。

([0-9]{1,3}) 1〜3桁の数値
([0-9]{3}) 3桁の数値
$1=([0-9]{1,3})
$2=([0-9]{3})
$1,$2で000,000の形式になる

以上です。

計算のやり方はこちらの記事から引用し、やりたかったことに合わせて自分なりにアレンジさせていただいたものです。
perlワンライナーでの計算自体の解説はこちらから。
数値計算を含む置換をperlのワンライナーでやってみた

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

web入門（３）

はじめに

JavaScriptとは、webサイト上で、htmlとcssでは表現できない機能を実装する言語です。
よく、jsって略されます。Javaという言語と名前は似てますが、全然違うので、気をつけてください。また、jQueryとは、JavaScriptをより扱いやすくしたフレームワークのことです。

フォルダー構成

デスクトップ上に、js-pracというフォルダーを作り、その中でindex.htmlとmain.jsを作る。

/Users/(ユーザー名)/Desktop/js-prac
                            |-index.html (表示用)
                            |-main.js (機能面)
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

JavaScript(jQuery)を使う

html上に直接JavaScriptを書く方法もありますが、今回は別ファイルに分けて読み取る方法を採用します。
また、jQueryを使用する方法は、ダウンロードをする方法とCDNを用いる方法がありますが、今回はCDNを用いる方法を採用します。
CDN（Content Delivery Network）とは簡単に言うと負荷を肩代わりしてくれるレンタルサーバのようなものです。下図のように一部の負荷を肩代わりしてもらうおかげで自分のサーバの負荷が下がり、安定してサービスを提供できるようになります。
スクリーンショット 2019-10-27 14.30.31.png

では、index.htmlを以下のように修正します。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>

    <!-- CDNの読み込み -->
    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <!-- main.jsの読み込み -->
    <script src="./main.js"></script>
  </body>
</html>

これで、jQueryを使う準備は終わりです。では、実際にjQueryを使ってみましょう。

まず、index.htmlのh１にid属性をつけます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <!-- idを追加する -->
    <h1 id="hello">Hello World</h1>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>

次に、main.jsを編集していきます。

main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });
});

$("#hello")で、htmlで指定したidを取得し、click()でクリックした時どうするか、function() {$(this).text("こんにちは、世界");}で、id="hello"を指定した要素のテキストを 「こんにちは、世界 」 に置き換えてるという流れです。

chromeで開いて確認してみましょう。Hello World をクリックすると、こんにちは、世界 が表示されることが確認できます。

大まかに説明すると以下のような形になります。上の例では、idを取得していましたが、class,タグ（a, h2 など）もcssと同様に取得することが可能です。

$("#idの名前").jQueryのイベント(function() {
  // メソッド
});

$(".classの名前").jQueryのイベント(function() {
  // メソッド
});

$("htmlのタグの名前").jQueryのイベント(function() {
  // メソッド
});

それでは、よく使うパターンをまとめておきます。

1. クリックしたら、フェードアウトする

main.js
$(function() {
  $("#hello").click(function() {
    $(this).fadeOut();
  });
});

2. ホバーしたら、色が変わる

main.js
$(function() {
  $("#hello").hover(function() {
    $(this).css("color", "red");
  });
});

3. ホバーしたら、色が変わり、離したら色が元に戻る

main.js
$(function() {
  $("#hello").on({
        'mouseenter' : function(){
            $(this).css("color", "red")
        },
        'mouseleave' : function(){
            $(this).css("color", "#000")
        }
    });
});

4. ボタンを押したら、数字が足されていく

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="txt" type="text" value="0" readonly />
    <input id="btn" type="button" value="add!" />

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>
main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    let value = $("#txt").val(); // id="txt"のvalue属性を取得して、変数valueに代入
    value = parseInt(value); // 変数valueの型をstring型->int型にキャスト
    $("#txt").val(value + 1); // id="txt"のvalue属性にvalue+1を入れる
  });
});

5. ドロップダウンメニューの実装

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="btn" type="button" value="表示する" />
    <div
      id="menu"
      style="background-color: #ddd; height: 200px; padding-top: 20px; display: none"
    >
      <p>ドロップダウンメニューです。</p>
    </div>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>
main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    if ($(this).val() == "表示する") {
      $(this).val("非表示にする");
      $("#menu").slideDown(1000); // 引数に秒数指定（単位：ミリ秒）
    } else {
      $(this).val("表示する");
      $("#menu").slideUp(1000);
    }
  });
});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧