What's New Qiita

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

  • 投稿日：2020-02-28T23:06:02+09:00

nuxtでDOMException: Failed to execute 'appendChild' on 'Node'エラー

Failed to execute 'appendChild' on 'Node'

nuxt でこんな感じのエラーが出る
因みにdev では出ない。

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild

原因

<template> タグ内に <body> が入ってると起こる
色々なエラーにつながるので原因究明がしづらい。注意。

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

Vue.jsを使って簡単な計算ツールを作った

はじめに

グランブルファンタジーというゲーム内のイベントである古戦場にて、目的の貢献度を貯めるためにはどれくらいのトリガーが必要か？を計算するツールを作りました。
作り自体は簡単なため、初めてVue.jsを勉強&アウトプットするにはいい題材でした。

実際に動かしたもの
http://ayama.main.jp/battlefieldRun.html

コード
https://github.com/guranytou/battlefieldRuns

一番困った部分

battlefieldRun.html
        <fieldset class="inputFieldset">
          <div id="app">
            <div>
              <span>目標累計貢献度</span>
              <input type="text" v-model="input" id="contributionInput"></input>
            </div>
            <div id="trigerDigest">
              <div><span>肉の消化方法</span></div>
              <div>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell95" value="Hell95" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell95">95HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell100" value="Hell100" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell100">100HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell150" value="Hell150" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell150">150HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="both" value="both" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="both">95&100HELL</label>
              </div>
            <div>
              <span>必要なトリガー数：</span><span>{{ output }}</span>
            </div>
          </div>
        </fieldset>
battlefieldRun.js
(function () {
   var triger = new Vue({
     el: '#app',
     data: {
       input: 0,
       trigerDigest: 'false'
     },
     computed: {
       output: function(){
           const Hell95NeedTriger = 10;
           const Hell100NeedTriger = 20;
           const Hell150NeedTriger = 20;
           const ExTriger = 4;
           const Hell95Contribution = 51500 * (Hell95NeedTriger / ExTriger) + 910000;
           const Hell100Contribution = 51500 * (Hell100NeedTriger / ExTriger) + 2680000;
           const Hell150Contribution = 51500 * (Hell150NeedTriger / ExTriger) + 3600000;
           let ans = 0;

           const ThisInput = String(this.input);
           const InputContribution = removeComma(ThisInput);

           function removeComma(value) {
             var num = value.replace(/,/g, "");

             return parseInt(num);
           }

           if(this.trigerDigest === 'Hell95'){
            // 計算式
            ans = Math.floor(InputContribution / Hell95Contribution * Hell95NeedTriger);
            return ans.toLocaleString()
           }else if(this.trigerDigest === 'Hell100'){
            // 計算式
             ans = Math.floor(InputContribution / Hell100Contribution * Hell100NeedTriger);
             return ans.toLocaleString()
           }else if(this.trigerDigest === 'Hell150'){
             ans = Math.floor(InputContribution / Hell150Contribution * Hell150NeedTriger);
             return ans.toLocaleString()
           }else if(this.trigerDigest === 'both'){
            // 計算式
             ans = Math.floor((InputContribution / 2 / Hell95Contribution * Hell95NeedTriger) +  (InputContribution / 2 / Hell100Contribution * Hell100NeedTriger));
             return ans.toLocaleString()
           }else{
             return 0;
            }
         }
     }
   })
}());

振り返り

・カンマをinput/outputにいれるのに地味に困った
→ここは本題ではなかったので、今回はinputに外部のJQueryを利用、outputにはtoLocaleString()を利用した
・computedとmethodsのどちらを利用すればいいのか分からなくて困った
→入れたらすぐに発火するものが作りたかったのでcomputedを採用。またcomputedとmethodsの違いの勉強が出来てよかった
・必要な部分だけさらっと勉強して書き始めたので、まだまだVue.jsへの理解が足りないように感じた
→座学もちゃんと増やす。簡単な題材のアウトプット（FizzBuzz、ToDoリスト作成etc）をする。

・疑問点：Computed内でif文の分岐をしている例文が見当たらなかったが、他の書き方があったりするのだろうか

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

HTML CSS フレックスボックスレイアウト(display: flex;)を使って header, footer を作ってみる（最小？）サンプルコード

HTML CSS フレックスボックスレウアウト(display: flex;)を使って header, footer を作ってみる（最小？）サンプルコード

みなさまこんにちは、ハーツテクノロジーの山崎です。

HTML でヘッダー(header)を作るのは難しくないのですが、フッター(footer)を作るのって意外にも難しくて、ハマりポイントもあったり、いろんな方法を紹介してくれるページもたくさんあります。でも、最近のブラウザでは CSS のフレックスボックス flex （注意：flexboxではない）がサポートされていて「いまとなってはこの方法がベストじゃん」と思うものの、ググってみても情報が多すぎて、最小構成のサンプルがみつからず、、、「ならばわしがっっ！」といった気持ちで到達記念魚拓を残すのです。

まぁ、たいした情報じゃないけど、忘れちゃうので（忘れたいので）備忘録です。

リサイズしたときのスクロールバーに注目！

表示画面を小さくリサイズしていくと、まずコンテンツ部分にスクロールバーが出て、隠れ始めます。「ヘッダ」「フッタ」が表示され続けています（ここがポイント）。さらに小さくリサイズしていくと、全体にスクロールバーが表示されます。

flex-header-footer.gif

コードの解説

解説するほど情報は無いのですが、ポイントを挙げると、メインになるのは以下の４つ。逆に言えば、たったこれだけ。

・display: flex;            /* flex を指定 */;
・flex-direction: column;   /* 縦方向に並べ */;
・flex-grow: 1;             /* この div をがんばって広げる指定 */;
・overflow: auto;           /* コンテンツが増えても、フッタが隠れないようにスクロールを指定 */;

あとは、罠が２つほどあるので、

・html tag も body tag も縦サイズ height が最小になるようにデフォルトで設定されている
・body tag にはご丁寧に margin がデフォルトで設定されている

これを回避する指定をすれば目標に到達できます。

CSS の詳細を知りたいひとはこちらflexへどうぞ。

全コード

<!DOCTYPE html>

<!-- HTML CSS display: flex; を使って header-footer を作ってみるテスト -->

<meta charset="UTF-8">
<html style="height: 100%;  /* まず html タグを広げる必要がある、ってなかなか気が付かない */;">
<body style="
    margin: 0;      /* body のデフォルト margin が 0 以外になっているのも罠だよなぁ、、、 */;
    height: 100%;

    display: flex;              /* flex を指定して */;
    flex-direction: column;     /* 縦方向に並べます */;
    ">
    <div style='background-color: hsla(29, 52%, 72%, 0.5);'>ヘッダ<br>ヘッダ</div>
    <div style='background-color: hsla(106, 23%, 63%, 0.5);'>コンテンツ1タイトル</div>
    <div style='
        flex-grow: 1;       /* この div をがんばって広げる指定 */;

        overflow: auto;     /* コンテンツが増えても、フッタが隠れないようにスクロールを指定 */;

        background-color: hsla(106, 23%, 63%, 0.7);
        '>
        コンテンツ1<br>
        コンテンツ1<br>
        コンテンツ1<br>
        コンテンツ1<br>
    </div>
    <div style='background-color: hsla(202, 32%, 60%, 0.5);'>フッタ<br>フッタ</div>
</body>
</html>

動作を確認したブラウザ

2020-02-28の時点で動作確認したブラウザは以下です。Windowsのみ。MacOS は機会があったら追加します。

Google Chrome 80.0.3987.122

image.png

Firefox 73.0.1

image.png

Microsoft Edge 44.17763.8831.0

image.png

IE 11.1039.17763.0

image.png

みなさまのプログラミングライフの一助になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-28T07:17:57+09:00

ネストしたindexにYoutube動画埋め込み

ネストしたindexへの動画埋め込み備忘録

https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e
上記の記事を参考にしたが、自分はgroupテーブルにYoutube_urlを入れてcreateに定義し、groupでネストしたmessages/indexに埋め込もうとして、コントローラーの差異があり出来なかったと推測する。

routes.rb
  resources :groups, only: [:new, :create, :edit, :update, :show, :destroy] do
    resources :messages, only: [:index, :create, :destroy]
  end

なのでYoutube_urlを生値のまま取り出し、ビュー上で末尾１１桁をとり出すようにした。
※Youtubeは末尾１１桁の文字、数字が各動画に割り当てられている。

手順

まずは、groupにYoutube_urlのカラムを追加する。
ターミナル上で、groupテーブルにyoutube_urlをstring型でカラムを追加。↓

rails g migration AddYoutube_urlToGroups youtube_url:string

追加後、rails db:migrateで実行

次に、コントローラーでYoutube_urlの値をpermitで許可する↓

groups_controller.rb
  private
  def group_params
    params.require(:group).permit(:name, :image, :content, :youtube_url, user_ids: [])
  end

createまたはupdateアクションでurlをテーブルに入れたいのでフォームを作る↓
※_formはnewとeditアクションの部分テンプレート

groups/_form.html.erb
<%= f.text_field :youtube_url, class: "form-control", placeholder: "Youtube_url" %>

そして、ビュー上で末尾１１桁の値をlastメソッドで取り出し、Youtube動画埋め込みのテンプレートにはめこむ↓
<%=(@groups.youtube_url).last(11)%>の部分

messages/index.html.erb
<iframe width="560" height="315" src="https://www.youtube.com/embed/<%=(@groups.youtube_url).last(11)%>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

以上で埋め込み完了
createまたはupdateアクションで入力したurlの動画が埋め込まれる

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

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

100日チャレンジの251日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

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

251日目は、

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

HTMLテンプレートエンジン詰め合わせ 11ty/eleventy を使ってみる

はじめに

本記事では11ty/eleventyの紹介と簡単なサンプル作成に留め、SCSSファイルなどの環境構築については別記事を執筆予定です。
テンプレートエンジンとしてNunjucksを使用しますので、Nunjucksの記法について知見のある方でしたらスムーズに読み進めることができるかと思います。

「Nunjucks？なにそれおいしいの？」という方は以下をご参照ください。
EJSと比較すると独自記法も多いですが、個人的にはかなり使いやすいテンプレートエンジンだと思っています。

Nunjucks 公式ドキュメント
詳解 Nunjucks − Mozilla 謹製テンプレートエンジン

11ty/eleventyとは？

11ty/eleventy（以下11ty）はZach Leatherman氏により制作された静的サイトジェネレーターです。
Gatsby.jsやNuxt.jsなど、JSフレームワークを静的サイトジェネレータとして使用するのとは異なり、HTMLのテンプレートエンジンをベースとして静的サイトを構築することができます。
11tyでの静的ページ生成にはPugやEJS, Nunjucksなどのテンプレートエンジンからマークダウンまで幅広く対応しており、下記テンプレートエンジンを使用されたことのある方はかなり導入しやすいのではないかと思います。

本記事ではNunjucksとマークダウンファイルをベースに、HTMLファイルを作成していきます。

Support Language

  • HTML（.html）
  • Liquid（.liquid）
  • EJS（.ejs）
  • Markdown（.md）
  • Handlebars（.hbs）
  • Mustache（.mustache）
  • Haml（.haml）
  • Pug（.pug）
  • Nunjucks（.njk）
  • JavaScript（.11ty.js）

以下サイトで他の静的サイトジェネレータとの比較を見ることができます。
StaticGen

11tyにはCSSやJSファイル周りのコンパイル/トランスパイルは含まれていないため、この点に関しては自身で環境構築する必要があります。
裏を返せば、スタイルシートやスクリプトの環境が制限されていないので、何を使用するかはプロジェクトや各々の好みによって自由に変更することができるということでもあります。

11tyの環境構築

11ty 公式スタートガイドを辿りながら、ミニマムな11tyプロジェクトの作成から進めていきます。

まずはnpmを使用して @11ty/eleventyパッケージをインストールします。
このとき、node.jsのバージョンは8以上である必要があるので注意してください。

Eleventy is available on npm and requires version 8 of Node.js or higher.

作成するサンプルページは11ty 公式スタートガイドに則って、適当な場所に空の eleventy-sample ディレクトリを用意して進めていきます。

$ mkdir eleventy-sample
$ cd eleventy-sample

次にpackage.jsonの生成と、11tyパッケージのローカルインストールを行います。

$ npm init -y
$ npm install --save-dev @11ty/eleventy

初期状態では 11ty のコンパイルタスクがないので、package.json の scripts に

"serve": "eleventy --serve"

を追加しておきます。

  • コンパイルタスク追加後のpackage.json
{
  "name": "200225_eleventy_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "eleventy --serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^0.10.0"
  }
}

（2020/2/25日現在、eleventyのバージョン0.10.0がインストールされます。）

これで 11ty の使用準備が整いました。

サンプルページの出力

eleventy_sampleディレクトリ以下に index.njk と README.md の二つファイルを追加します。
11ty 公式スタートガイドのサンプルが寂しかったので若干追加しています。

  • index.njk
<!doctype html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <p>Hi</p>
  </body>
</html>
  • README.md
# Page header

## Heading

Text Sample

前章で package.json に追加した

$ npm run serve

を実行すると、HTMLの出力 + ファイル監視タスク が走るようになっています。

デフォルトの設定では _site ディレクトリとコンパイル後の HTMLファイル が追加され、ローカルサーバーが立ち上がります。
また、index.html と README/index.html が _site/ に作成されていることが確認できるかと思います。
入出力のディレクトリ名は設定ファイルに記述することで変更が可能ですが、こちらは別記事で。

11ty 公式スタートガイドベースのサンプル作成は以上です。

が、11tyでは各ファイルにYAML形式の front-matter という記法で変数やテンプレートファイルを設定することができます。
本記事では front-matter を使用した変数のセットとテンプレート継承まで紹介します。

front-matterの使用

front-matter は以下のように —- で区切ってYAML形式で記述します。

---
pageTitle: Hello 11ty
txt: <p>Hi</p>
---

変数のセット

front-matter の記述は変数として使用することが可能です。
Nunjucksであれば、マスタッシュ構文で変数を出力することができます。

---
pageTitle: Hello 11ty
txt: <p>Hi</p>
---

<!doctype html>
<html>
  <head>
    <title>{{ pageTitle }}</title>
  </head>
  <body>
    {{ txt | safe }}
  </body>
</html>

{{ pageTitle }} には front-matter に記述した Hello 11ty が表示されます。
また、body内の {{ txt | safe }} には、txt変数として定義されている <p>Hi</p> が safeフィルターによってHTMLタグごと出力されます。

11tyのテンプレート継承を利用する

front-matter による設定で、拡張子の異なるファイルをテンプレートとして使用することができます。

テンプレートとして以下のような layout.njk ファイルを作成します。
テンプレートファイルは _include ディレクトリ以下に配置する必要があります。

  • layout.njk
<!doctype html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

マークダウンファイルから生成されるHTMLタグは自動エスケープしてほしくないため、Nunjucksの内蔵フィルターである safe をつけておきます。
テンプレートとして上記のファイルを使用したい場合、front-matterにYAML形式で読み込むテンプレートファイルを記述します。

  • README.md
---
layout: layout.njk
---

# Page header

## Heading

Text Sample

コンパイルしてみると、 layout.njk をベースとして README/index.html が変更されているはずです。

EJSでもテンプレート継承してみる

本来であればextendsはサポートされていないEJSですが、11tyではNunjucksと同様テンプレートとしての利用が可能です。

  • layout.ejs
<!doctype html>
<html>
  <head>
    <title>EJS Template Sample</title>
  </head>
  <body>
    <%- content %>
  </body>
</html>
  • README.md
---
layout: layout.ejs
---

# Page header

## Heading

Text Sample

<%- content %> 内に README.md が配置される形のHTMLファイルが出力されます。

個人的な感想

HTML周りに関してはできることが多く、JSがあまり得意でない身としてはかなり使いやすい静的サイトジェネレーターだと感じました。
他にもJSONファイルを使用したデータの分離や、データからのページ構築など、中~大規模の静的サイトを構築する上ではかなり強力な機能があります。CSS, JS周りの環境を整えることができれば、個人的にはどんどん使っていきたいところです。少しずつ紹介していければと思います。

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

日付別

タグ一覧