20200331のHTMLに関する記事は5件です。

bootstrapでプラスからマイナスへ変化するアイコンを作る

最近

最近はコロナのせいで引きこもっています。楽しみがパンケーキを作ることしかないです。何かちょうど良い趣味教えてください。

bootstrapでプラスからマイナスに変化するアイコンを作る

まずはHTML

index.html
<div class="" id="collapseListGroupHeading">
  <a href="#switch" class="collapsed" data-toggle="collapse"></a>
  <div class="collapse" id="switch" aria-expanded="false">
  </div>
</div>

そしてCSS

style.css
#collapseListGroupHeading a[data-toggle="collapse"]{
  padding: 10px;
  text-decoration: none;
  position: relative;
}
#collapseListGroupHeading a[data-toggle="collapse"]::before,
#collapseListGroupHeading a[data-toggle="collapse"]::after{
  content:"";
  width: 8px;
  height: 0;
  border-top: #000000 1px solid;
  border-bottom: #000000 1px solid;
  position: absolute;
  right: 15px;
  top: 12px;
  bottom: 12px;
  margin: auto;
}
#collapseListGroupHeading a[aria-expanded=false]::after{
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition-duration: 0.3s;
}
#collapseListGroupHeading a[aria-expanded=true]::after{
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 0.3s;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

静的サイト(HTML/CSSのみ)をherokuでデプロイする方法

HTML/CSSのみでサイト模写したものをherokuでデプロイする方法をまとめています。

ruby on railsでの簡単なWEBアプリケーションのデプロイ経験がありましたが、
HTML/CSSのみの模写サイトのデプロイの仕方が分からずに苦労しました。

静的サイト(HTML/CSS)のデプロイの仕方がまとめられているものが少なかったので、
以下に備忘録として手順をまとめてみました。

1.composer.jsonを作る。

composer.jsonファイルを作成する。中身は{}のみ

composer.json
{}

2.index.phpを作る

index.phpファイルを作成する。中身は↓

index.php
<?php include_once("index.html"); ?>

ここまでのディレクトリ階層

app
 ├ index.html
 ├ style.css
 ├ composer.json
 └ index.php

ここまでの作業はHTML・CSSだけではアプリケーションとして認識されないようなので、
PHPアプリケーションとしてデプロイする準備。
色々調べてみるとrailsアプリケーションとしてもデプロイできそうだったが、
phpでのこの手順が一番簡単そうでした。

3 herokuでデプロイ

該当のアプリケーションで↓

ターミナル
$ heroku login

アプリを命名する↓

ターミナル
$ heroku create <アプリケーション名>

githubと、作成したレポジトリを紐付けたら
git remoteでherokuが含まれているか確認↓

ターミナル
$ git remote
heroku
origin

リモートに命名したアプリケーションのディレクトリでを設定する↓

ターミナル
$ git remote add heroku https://git.heroku.com/<アプリケーション名>.git
ターミナル
$ vim .git/config

上記コマンドを実行し
[remote "origin"]のurlに、githubの該当リポジトリが当てはまっていればOK
[remote "heroku"]のurlに、先ほど命名したアプリケーションのurl
(https://git.heroku.com/<アプリケーション名>.git)が入っていればOK

または、下記のコマンドでherokuとgithubのレポジトリが一致していればOK

ターミナル
$ git remote -v
heroku  https://git.heroku.com/<アプリケーション名>.git (fetch)
heroku  https://git.heroku.com/<アプリケーション名>.git (push)
origin  https://github.com/hoge/<gitのアプリケーション名>.git (fetch)
origin  https://github.com/hoge/<gitのアプリケーション名>.git (push)

これでpushする↓

ターミナル
$ git push heroku master

以上で、実際に起動すれば完了。

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

複数画像をまとめてアップロードして順にフォームリクエストする

とあるクラウド OCR に画像ファイルを API リクエストする際に、仕様が"multipart/form-data"形式で、更にファイル1つずつのみしか受け付けないものだったので、それに合わせ「画像をサイトにまとめてアップロードした後、ボタン押下で画像をひとつずつ順に API リクエストする」処理を作成しました。備忘録に残しておきます。。。

「input type="file"」の multiple 属性と formData オブジェクトと が鍵。

ローカルから Web サイトに複数ファイルアップロードする HTML

index.html
<input type="button" class="btn btn-primary" value="ファイル選択" onClick="start_img_select();">
<input type="file" name="image_data" multiple="multiple" accept="image/*" onChange="change_img(this)" id="image_data">

「input type="file"」の multiple 属性を"multiple"にすると複数のファイルがアップロードできるようになります。

上記 HTML では、「ファイル選択」ボタンをクリックすると、"start_img_select()"関数で「input type="file"」をクリックしたことにし、ファイル選択ウィンドウを開くようにしています。
「input type="file"」を使用するとファイル選択のウィンドウがデフォルトで出てくるので楽です。

JavaScript 処理

index.js
let ocrcount = 0;
let fileList = [];
let fileCount = 0;

// 「ファイル選択」ボタン押下時
function start_img_select() {
    $("#image_data").css("display", "");
    $("#image_data").trigger('click');
}

// ファイルアップロード後処理
function change_img(e) {
    ocrcount = 0;
    fileList = e.files;
    fileCount = e.files.length;
    let fileName = fileList[ocrcount].name;

    // ファイル読み込みでプレビュー表示
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview").attr('src', e.target.result);
    }
    reader.readAsDataURL(fileList[ocrcount]);

    $("#image_data").css("display", "none");
    let fileinfo = `読み込みファイル数: ${ocrcount + 1}/${fileCount}<br>${fileName}`;
    document.getElementById('fileinfo').innerHTML = fileinfo;

    // ファイル送信実行部
    call_execute_form(fileList[ocrcount]);
}

// リクエスト完了後に表示される「次へ」ボタン押下時
function nextOcr() {
    ocrcount = ocrcount + 1;
    let fileName = fileList[ocrcount].name;

    // ファイル読み込みでプレビュー表示
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview").attr('src', e.target.result);
    }
    reader.readAsDataURL(fileList[ocrcount]);

    $("#image_data").css("display", "none");
    let fileinfo = `読み込みファイル数: ${ocrcount + 1}/${fileCount}<br>${fileName}`;
    document.getElementById('fileinfo').innerHTML = fileinfo;

    // ファイル送信実行部
    call_execute_form(fileList[ocrcount]);
}

1ファイル目は、そのまま API リクエスト送信。
2ファイル目以降は、「次へ」ボタン押下時にリクエスト送信。

index.js
// API リクエスト処理
function call_execute_form(file) {
    var url = "https://ocrxxx.jp/execute";
    var content_type = "multipart/form-data";
    var encoding = "UTF-8";
    var method = "POST";
    var data = [];

    $("#api_result").text('OCR送信中 ...');
    var fd = new FormData();
    // リクエストに必要なフォーム値をセット
    fd.append("request_id", 1);
    fd.append("image_format", "JPEG");
    fd.append("image_width", 100);
    fd.append("image_height", 100);
    // ...
    fd.append("image_data", file);

    $.ajax({
        url: url,
        contentType: false,
        scriptCharset: encoding,
        type: method,
        processData: false,
        data: fd,
        dataType: 'JSON'
    })
        .done(function (data) {
            if (data.results.length == 0) {
                $("#api_result").text(data.message);
                return;
            }

            var results = data.results[0];
            var ocr_results = results.ocr_results;
            if (ocr_results.length > 0) {

                // 取得データ処理...
                html += "<table>";
                // ...
                html += "</table>";

                // 結果確認後の「次へ」ボタン
                if (ocrcount !== (fileCount - 1)) {
                    html += '<input type="button" class="btn btn-primary" id="nextbtn" value="次へ" onClick="nextOcr();" />';
                }

                $("#api_result").html(html);
            } else {
                $("#api_result").text(JSON.stringify(data));
            }
        })
        .fail(function (data) {
            $("#api_result").text(JSON.stringify(data));
        });
}

OCR で返ってきたレスポンス内容を確認して、次の画像ファイルを API リクエストを行うという処理になってます。

「input type="file"」に複数のファイルをアップロードすると、関数に渡ってきたオブジェクトの"files"プロパティに、ファイル1つずつが配列で格納されているので、1ファイルずつ順に処理しています。

元々、form リクエストを行う際に form タグに囲まれた input の内容をそれぞれ入力しておかなければいけない(もしくは Value 属性に値セットしておかなければいけない)と思い込んでいたのですが、formData オブジェクトを使ってリクエストを行えば、同等の効果が得られるようです。

今回は、わざわざボタン押下で次の画像リクエストに行くようにしていますが、for文で次々リクエストしてデータだけ配列に格納して最後に確認とかでもよかったかなと思います。

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

JavaScriptでHTML要素の読み込み順序からみるを取得する時の注意点

Web初学者です。Ajaxで取得したHTML要素に対して、JavaScriptが効かない現象に直面しました。調べてみると、これは”読み込み順番”と、それに適切なメソッドを使っていないことが原因でした。自分自身が振り返るための意味も含めて、まとめたいと思います。

そもそもブラウザは、HTMLファイルの上から読み込んでいる

そもそもブラウザは、HTMLファイルの上から順番に読み込んでいる。
以下の例では、上から順番に読み込んでくる為、「かきくけこ」が読み込まれる前にjsが実行されます。

foo.html
<h2>あいうえお<2>
<script>alert("hogehoge");</script>
<h2>かきくけこp<2>

もし、jsを別フィアルに記述して様々なHTML要素を取得して処理を行うとき、そもそもjsが実行される時点でHTML要素が読み込まれていないのは困りますよね。先にHTML要素を全て読み込んでてもらう必要があります。そこで、</body>タグの直前にスクリプトを記述します。こうすれば全ての要素が読み終わってからスクリプトが実行されます。(スマホ普及により、HTMLとスタイルシートを優先的に読み込ませる意味もあるようです。)

jQueryのready()メソッドは要素の準備ができた段階で実行される

先ほどの例では、上から順番に読み込んでしまうが故に、要素を取得できないことを示しました。しかし、jQueryのready()メソッドを使用すれば、その問題を解決できます。readyメソッドでは、選択した要素が取得できた時点で、処理を実行します。例えば、

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

  <h1 id="piyo">ハローワールド</h1><script type="text/javascript" src="hoge.js"></script>
hoge.js
$(document).ready(function(){
  $("#piyo").css("color","red");
});

スクリプトを①、②のどちらに記述しても実行結果は変わりません。記述場所にかかわらず、要素(id="piyo")がready(準備OK!)できた時点で、実行されるからです。
ちなみに常識だとは思いますが、$(function(){});は、これの省略系です。”おまじない”じゃなりません!僕はしばらくおまじないとして使ってました。笑

本題:Ajaxで追加された要素をどう取得するか

HTML要素は後から追加される場合もある。代表的なのはAjaxによるページの読み込み。追加された新要素に対しては、ready()メソッドだけでは有効ではないです。

そこで使うのが、on()メソッドです。

qiita.html
<h1 id="piyo">ハローワールド</h1>
qiita.js
$(function(){
    $(document).on('click','#piyo',function() {
        $("#piyo").css("color","red");
    });
});

ここではqiita.htmlをajaxで読み込んだと前提します。そのときにon()ならば、無事に要素(id="piyo")を取得できます。on()メソッドは、セレクターが指定した要素(ここでは$(document))の内側にある要素("#piyo")が、クリックされたタイミングで、それがイベント発生する要素かどうか、を判断しているからです。(らしいです。)
 ※たぶん上記のような書き方はしないと思いますが。。あくまでon()の例です。

最後に

jsがうまく働かない場合は、「ちゃんと読み込まれているかな」をまずは疑え!

以上になります。
ご指摘の箇所が多々あると思います。是非コメントよろしくお願いします。

最後まで読んで頂きありがとうございます。
初学者の私ですが、よろしくお願いします。

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

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

100日チャレンジの277日目

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

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