What's New Qiita

20200327のHTMLに関する記事は7件です。

  • 投稿日：2020-03-27T23:06:54+09:00

[JavaScript] 動的にinput[type=file]を組み立てて画像をアップロードしたらBase64が手に入るコード

画像アップロードする時に、以下のように display: none をつかってブラウザ本来の input[type=file] をみえないようにした上で独自レイアウトのボタンで画像アップロードするような実装を時々みかけます。

<label for="hoge">画像アップロード</label>
<input id="hoge" type="file" style="display: none">

で、 addEventListener でファイル変更検知を行ったりと。
けれど、上記のようにするとマークアップがある程度拘束されてしまいます。やりたいことはボタンをクリックしたら画像をアップロードしてBase64を手にいれるとかそういう話なので、クリックイベントを仕込んで以下のコードを実行すればOKです。

<div style="width: 0; height: 0; overflow: hidden;">
  <input id="browserPhotoUploader" type="file" accept="image/*" />
</div>

public getPictureFromBrowser() {
  /*
   * input[type=file] を組み立て
   */
  const inputFile: HTMLElement = document.querySelector('input#browserPhotoUploader');

  return new Promise(resolve => {
    /*
     * input[type=file] の変更（change）を検知したら、ファイルをアップロードしてresolveする
     */  
    inputFile.addEventListener(
        'change',
        (e) => {
          const file = e.target.files[0];
          const reader = new FileReader();

          reader.onload = (fileInput => {
            /*
             * アップロードされるファイルが画像かを簡易判定
             */  
            if (file.type.indexOf('image') < 0) {
              reject(null);
            }

            return (event) => {
              resolve(event.target.result);
            };
          })(file);

          reader.readAsDataURL(file);
        },
        false,
    );

    /*
     * input[type=file] をクリック
     * イベントリスナーよりあとに実行されるように
     */  
    inputFile.click();
  });
}

このコードだったらHTML側は

<button (click)="getPictureFromBrowser()">画像アップロード</button>

だけで済みますね。 display:none せずにすむのでシンプル！

それでは、また。

おまけ: TypeScript版

any 使ってるのちょっと何ですが・・・。

public getPictureFromBrowser(): Promise<string> {
    const inputFile: HTMLElement = document.querySelector('input#browserPhotoUploader');
    return new Promise(resolve => {
      inputFile.addEventListener(
        'change',
        (e: any) => {
          const file = e.target.files[0];
          const reader = new FileReader();

          reader.onload = (fileInput => {
            if (file.type.indexOf('image') < 0) {
              reject(null);
            }

            return (event) => {
              resolve(event.target.result);
            };
          })(file);

          reader.readAsDataURL(file);
        },
        false,
      );
      inputFile.click();
    });
  }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-27T19:00:01+09:00

100日後にエンジニアになるキミ - 7日目 - HTML - HTMLの基礎2

HTMLの基礎の続きです

タグについて

前回はHTMLの構成要素についてやりました。
今回はタグについてのお話です。

HTML要素を表現するのにHTMLのタグを用います。

HTMLのタグはかなり沢山の種類がありますが
主要な部分を覚えれば
全てを覚えなくてもHTMLファイルを作ることができます。

まずは主要なタグを抑えていきましょう。

HTMLタグ

<!DOCTYPE html>
<html></html>

htmlタグはHTML文書の冒頭に記述し
HTML文書であることを示すために使います。

<!DOCTYPE html>は
この文書がHTML5で作成されたものであることを宣言するために
文書の先頭（<html>タグよりも上）に記述するDOCTYPE宣言です。

<html></html>のタグ直下には
<head>タグ と <body>タグ がそれぞれ一つづつ必要です。

htmlタグでは , lang属性で言語を指定することができ
日本語の場合はlang="ja" , 英語はlang="en"を指定します。

<!DOCTYPE html>
<html lang="ja">
    <head></head>
    <body></body>
</html>

終了タグで閉じるのを忘れないようにしましょう。

HEADタグ

<head></head>
コンテンツに表示しない文書情報で
metaやtitleなどを記述できます。

<head>
<title>乙py<title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="乙py">
<meta name="keywords" content="乙py">
<script type="text/javascript" src="sample.js">< script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

headタグの中で用いることのできるタグは
以下のようなものがあります。

<title>
タイトルを指定,ブラウザのタイトルバーに表示される

<meta>
文書の情報を定義する

<link>
href属性で指定したファイルとの関係を定義する

<style>
スタイル情報を記述,type属性の記述が必要(text/css等)

<script>
スクリプト を記述,type属性(text/javascript)とmeta要素でスクリプトタイプの宣言をする

titleタグ

<title>タイトル<title>

ブラウザーの上部に表示される情報を記述するタグです。
タグの要素がブラウザーのタブ部分に表示されます。

<title>乙py<title>

metaタグ

<meta>
HTML文書というよりは、WEBサイトの情報を記述する部分です。

metaタグは開始タグのみで終了タグが不要ですが
複数の要素を記述することができます。

書き方は
<meta name="属性名" content="属性値"

というように書きます。

<head>
    <title>タイトルを記述</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="keywords" content="キーワード,内容">
    <meta name="description" content="説明文">
    <meta name="author" content="作者名とか">
    <meta name="robots" content="noindex,nofollow">
</head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">
これはこの文書の文字コードをさしていて、utf-8を指定しています。

属性名としては他に

keywords
description
author
robots

などがあります。

keywordsではこのページの内容で重要なワードなどを書き込みます。
<meta name="keywords" content="キーワード,内容">

descriptionはこのサイトの説明文を書くところです。
<meta name="description" content="説明文">

authorはこのサイトの作者名などを記載します。
<meta name="author" content="作者名とか">

robotsはクローラー(検索エンジンのWEB巡回プログラム)に対する指定です。
<meta name="robots" content="noindex,nofollow">

noindexとは、検索エンジンにページを認識（インデックス）させないために指定する値です。
nofollowとは、クローラーにページ内のリンクを辿らせず
リンク先にページの評価を渡さないために指定する値です。

metaタグを書く順番には特に決まりはなく、書かなくてもそこまで問題はありません。
検索エンジンにに認識してもらうためにはmetaタグを整備しないと
読み取られないため、検索にひっかからなかったするので、整備した方が良いでしょう。

linkタグ

<link>
主にCSSなどのファイルを紐づけるために記述するタグです。
linkタグは終了タグが不要です。

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

外部のファイルを読み込みしたければlinkタグを用います。
CSSファイルの場合はrel属性にstylesheetを指定します。

linkタグはrel属性で何のファイルであるのかを指定し
href属性でリンク先(パス)を指定します。

リンク先は相対リンク、もしくは絶対リンクで書くことになります。

相対リンクはこのHTMLファイルから見たファイルの場所になり
絶対リンクはWEBサイトの構造から見たファイルの場所を記述することになります。

外部のWEBサイトからのlinkはそのファイルのURLを指定します。

faviconというブラウザーのタグの部分につく小さな画像がありますが
それをきちんと表示させたい場合はheadタグ内で指定が必要です。

rel属性でshortcut iconを指定します。
ファビコンの拡張子は.icoとなります。

styleタグ

このページ全体のスタイルをまとめて記述することができます。

<style></style>

<style>
    body {background-color: #00ff00}
    .container {width: 90% ; text-align: center;}
    .first-sentence {font-weight: bold;}
</style>

タグの固有のstyle属性とは別物になります。
全体のスタイルを記述できますが、通常はスタイルシートをファイルで分けますので
そこまで多用することはありません。

scriptタグ

<script></script>
文書にJavaScriptなどのスクリプトを組み込む際に使用します。

<script type="text/javascript" src="sample.js"></script>

type属性ではtext/javascriptを指定し
src属性でファイルのパスを指定し
外部サイトからのファイル読み込みの場合はサイトのURLを記述します。

またscriptタグはheadタグ以外にbodyタグ内でも書くことができます。

外部ファイルを先に読み込んでおかないと
外部ファイルの関数は動かないので、headタグで読み込んでおきましょう。

noscriptタグ

<noscript></noscript>

あまりなじみのないものかもしれませんが
javascriptが働かない場合に動作するタグになります。

javascriptはブラウザーの方でOn,OFFを切り替えることができます。
javascriptOFFの状態ではjavascriptは動作しません。

javasciprtを動作させる前提でいた場合何もおきない事になり
画面表示がおかしくなったりするケースがあります。

その場合に代わりに動作させるタグを記述できます。

<script type="text/javascript">
    (function () {
        var tagjs = document.createElement("script");
        var s = document.getElementsByTagName("script")[0];
        tagjs.async = true;
        tagjs.src = "//s.yjtag.jp/tag.js#site= AAABBBCCC";
        s.parentNode.insertBefore(tagjs, s);
    }());
</script>
<noscript>
<iframe src="//b.yjtag.jp/iframe?c=AAABBBCCC" width="1" height="1" 
 frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>

最後の部分がnoscriptタグの記述です。

広告用のタグはjavascriptが働くことが前提で書かれているため
javascriptが働かないと画面崩れが起きることがあります。

それを防ぐためにnoscriptタグを併せて記述しています。

まとめ

本日は主にhead内で使用されるタグについて
説明しました。

WEBサイトの情報や外部ファイルの読み込みは
HTMLを構成するのに欠かせないものですので
書き方は押さえておきましょう。

君がエンジニアになるまであと93日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython

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

Googleカスタム検索（サイト内検索）の結果ページから別タブに開かない方法

別タブで開くバージョン

scriptを読み込んだら検索結果を表示するところに下記を挿入する。

<div class="gcse-searchresults-only"></div>

別タブで開かないバージョン

data-linkTarget="_self"を追加する。

<div class="gcse-searchresults-only" data-linkTarget="_self"></div>

公式ドキュメントの一覧ではlinkTargetとしか書いてないのですが、別の場所にちゃっかりプレフィックスdata-をつけてねと書いてあります。ちゃんと読まないとだめですね。

公式ドキュメント：https://developers.google.com/custom-search/docs/element

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

ファイルを DATA URI に変換するフォーム

ファイルを DATA URI に変換するフォーム

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>DATA URI 変換</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <input type="file" id="fileform">
  <br>
  <br>
  <textarea id="datauri" cols="100" rows="30"></textarea>
  <br>
  <button type="button" id="copybutton">コピー</button>
  <script>
    const toBase64DataUri = file => new Promise(resolve => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(file);
    });

    document.getElementById("fileform").addEventListener("input", async (e) => {
      const file = e.target.files[0];
      const datauri = await toBase64DataUri(file);
      document.getElementById("datauri").value = datauri;
    }, false);

    document.getElementById("copybutton").addEventListener("click", () => {
      document.getElementById("datauri").select();
      document.execCommand("copy");
    }, false);
  </script>
</body>

</html>

ファイルを DATA URI に変換してる部分

const toBase64DataUri = file => new Promise(resolve => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.readAsDataURL(file);
});

ファイルを DATA URI に変換してる部分を呼び出している部分

const datauri = await toBase64DataUri(file);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-27T12:54:51+09:00

GAとGTMを駆使してＡ/Ｂテストする方法

こんな方向け

  • 検証期間を同じにして、Ａ/Ｂテストを行いたい
  • 対象となるGoogleアナリティクスのビューでUser ID を有効にしているため、Google オプティマイズが使えない

やれること

  • ボタンのＡ/Ｂテスト
  • ファーストビューのＡ/Ｂテスト

など

前提条件

  • Googleアナリティクスが導入済みであること
  • GTMが導入済みであること

やりかた

手順は４つです。
1. Ａ/Ｂテストしたい部分のＨＴＭＬを、テストパターンの個数ぶん書く
2. ランダムで出しわける部分、ＨＴＭＬを書き替える部分をjQueryで書く
3. 書いたjQueryをGTMに登録する
4. ＧＴＭでGoogleアナリティクスにイベントを送信する

ここでは、ボタンのＡ/Ｂテストを想定して、例を紹介します

以降は、下記ボタンがページにある想定で説明を進めます。

<div id="abcd-button">
    <a target="_blank" href="ページＵＲＬ">
        <img src="ボタン画像パス.png">
    </a>
</div>

１．Ａ/Ｂテストしたい部分のＨＴＭＬを、テストパターン数分だけ書く

下記２つを書き分けたＨＴＭＬを用意してください

  • idの値
  • ボタン画像

テストパターンＡのＨＴＭＬ

<div>
    <a target="_blank" href="ページＵＲＬ" id="abcd-button-abtest-a" class="abcd-button-abtest">
        <img src="Ａパターンのボタン画像パス.png">
    </a>
</div>

テストパターンＢのＨＴＭＬ

<div>
    <a target="_blank" href="ページＵＲＬ" id="abcd-button-abtest-b" class="abcd-button-abtest">
        <img src="Ｂパターンのボタン画像パス.png">
    </a>
</div>

２．ランダムで出しわける部分、ＨＴＭＬを書き替える部分をjQueryで書く

<script>
    $(function() {
        //手順１で作成したテストパターンのＨＴＭＬを変数に代入します
        var htmlA = '';
        var htmlB = '';
        //テストパターンのＨＴＭＬを代入した変数を配列にします
        var testList = [htmlA,htmlB]
        //テストパターンの中からランダムで１つ選びます
        var quantity = testList.length;
        while (quantity) {
                var j = Math.floor( Math.random() * quantity );
                var t = testList[--quantity];
                testList[quantity] = testList[j];
                testList[j] = t;
            }
        //spliceの値は右の値をパターン数から１個引いた値を入れてください
        //今回は２パターンのテストなので、2-1=1となり、１になります
        testList.splice(1,1);
        var abtest = testList.join('');
        //オリジナルのボタンのＩＤ名を値に入れます
        var $content = $('#abcd-button');
        //ランダムで１つ選んだものを、オリジナルと差し替えます
        $content.replaceWith(abtest);
    });
</script>

３．書いたjQueryをGTMに登録する

下記手順で、ＧＴＭに新規タグを登録します。

  1. タグ新規作成
  2. タグタイプで「カスタムHTML」を選択
  3. HTMLの入力欄に、手順２で作成したスクリプトを貼り付ける
  4. トリガーを新規作成
  5. トリガータイプで「ページビュー」を選択
  6. トリガーの発生場所で「一部のページビュー」を選択
  7. 「Page URL」「等しい」を選択し、値はボタンがあるページのＵＲＬを入力
  8. トリガーを保存する
  9. タグを保存する

４．ＧＴＭでGoogleアナリティクスにイベントを送信する

下記手順で、ＧＴＭに新規タグを登録します。

  1. タグ新規作成
  2. タグタイプで「Google アナリティクス: ユニバーサル アナリティクス」を選択
  3. トラッキング タイプで「イベント」を選択
  4. カテゴリ、アクション、ラベルを任意で入力
  5. 値で「Click ID」を選択
  6. 詳細設定＞タグの順位付け＞●●が発効する前にタグを配信にチェックを入れる
  7. 手順３で作成したタグを選択
  8. トリガーを新規作成
  9. トリガータイプでクリック＞「リンクのみ」を選択（「すべての要素」でも良い）
  10. 「Click Classes」「等しい」を選択し、値は手順１でリンク要素に記述したクラス名を入力（例ではabcd-button-abtest）
  11. トリガーを保存する
  12. タグを保存する

以上で設定終了です。
Googleアナリティクス＞行動＞イベント　からクリック数を見て、Ａ/Ｂどちらが良かったか、比較することができます。

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

【HTML】inputのボーダーに変なくぼみが...【CSS】

inputに予期せぬくぼみや影が付いてる?

そんなあなたのブラウザは、GoogleChromeではないでしょうか？

こんな時は、

「-webkit-appearance:none;」

をCSSに書き込むのが定番です。

しかしながら、これでも解決しないこともあります。そんな時は、大人しく「border」を設定しましょう。

取り敢えず、これで解決します笑

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

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

100日チャレンジの274日目

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

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

日付別

タグ一覧