20210413のHTMLに関する記事は8件です。

メールリンクをクリックor タップしてメールソフトを開く方法

<a href="mailto:hoge@mail.com">hoge@mail.com</a> hoge@mail.com 上記のリンクをクリックするとメールソフトが開く
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WEBアプリケーションに画像をアップロードする機能を実装する方法

WEBアプリケーションに画像をアップロードする機能を実装する方法 Javaを利用して作成したWEBアプリケーションに画像投稿機能を実装する際の手順について記載します イメージとしては下記の図のようなイメージになります。 画像のアップロードにはHTMLのformタグとinputタグを利用します フロントエンド <form method="post" > <input type="file" name="uploadImage" /> <input type="submit" value="送信" /> </form> バックエンド側では、Fileクラスを利用して受け取ります バックエンド protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Fileクラスのインスタンス化(保存するディレクトリの指定) File uploadDir = new File("/Users/test/Documents/app/WebContent/images"); // リクエストパラメーターから画像の取得 Part fPart = request.getPart("uploadImage"); // 画像の名前を決める String fName = "testphoto"; // 保存処理の呼び出し save(fPart, new File(uploadDir, fName)); //保存処理 public void save(Part in, File out) throws IOException { BufferedInputStream br = new BufferedInputStream(in.getInputStream()); try (BufferedOutputStream bw = new BufferedOutputStream(new FileOutputStream(out))) { int len = 0; byte[] buff = new byte[1024]; while ((len = br.read(buff)) != -1) { bw.write(buff, 0, len); } } }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

電話番号をクリックorタップして電話をかけさせる方法

<a href="tel:00-000-000">00-000-000</a> リンクをクリックすると次のような画面が出てくる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

静的に入力されたtableの値と、Chart.jsを連携してみた

ある案件で、tableに入力された値と、Chart.jsを連携する実装がありました。 今回は円グラフを使用しましたが、他のグラフでも応用可能だと思います。 参考になれば、幸いです。 はじめに table構造はとてもシンプルです。 (実際の運用では、それぞれの数値に関してhtmlは触らずに、WordPressのカスタムフィールドでの運用を想定しています。) See the Pen table - basic by dan (@___dan) on CodePen. このtableを元に、以下の2つのパターンを実装しました。 カテゴリ毎の合計値 (tableでは年度別の合計値が出力されているが、Chart.js上ではカテゴリ毎の合計値を出力する。) 対合計比 (総計を基準にし、各カテゴリの合計値が何%なのかを出力する。) 実装編 カテゴリ毎の合計値 See the Pen table(total) - chart.js by dan (@___dan) on CodePen. 記述したjsは以下の通りです。 (trをscope範囲とし、それぞれの数値が記入されているtdをtargetとする。) //空の配列を用意 let total = []; $('.scope').each(function () { let target = $(this).find('.target'); let sum = 0; for (let i = 0; i < target.length; i++) { //取得したtextが文字列のため、parseIntで数値型に変換 //sum = $(target[i]).text() * 1 + sum;のように、1を掛けて数値型に変更するのもアリかと思います。 sum = parseInt($(target[i]).text()) + sum; } //push()メソッドを使用して、sumの値を配列でtotalへ返却 total.push(sum); }); console.log(total); //実行結果[60, 30, 6, 96] - カテゴリ毎の合計値が配列に格納 Chart.js内のdataに、作成したtotal変数をセットしてあげて完成です。 data: total なお、optionsの値がブラウザで確認したところ正常に動いていたのですが、 codepenで確認すると丸々抜けているようです、、、。 (本来であれば、円グラフの上に「進学先 人数」というタイトルと、ホバーしたときのラベルが〇〇人と表示されます。) options: { title: { display: true, text: '進学先 人数' }, tooltips: { callbacks: { label: function (tooltipItem, data) { var label = data.labels[tooltipItem.index]; if (label) { label += ': '; } label += data.datasets[0].data[tooltipItem.index] + '人'; return label; } } } } 対合計比 See the Pen table(ratio) - chart.js by dan (@___dan) on CodePen. ※こちらもoptionsの値が動いておりません、、、。 (本来であれば、円グラフの上に「進学先 割合」というタイトルと、ホバーしたときのラベルが〇〇%と表示されます。) 追加記述したjsは以下の通りです。 //空の配列を用意 let ratio = []; //先ほど取得したtotalの値が[60, 30, 6, 96]だが、合計値である96は不必要なのでlengthから-1する for (let i = 0; i < total.length - 1; i++) { //total[i] - totalのi番目、つまり0番目の場合は60を取得 //[total.length - 1] - 配列の最後の値である96を取得(全体の合計値) let calc = (total[i] / total[total.length - 1]) * 100; ratio.push(calc); } console.log(ratio); //実行結果[62.5, 31.25, 6.25] - 合計値に対する、各カテゴリの割合が格納 Chart.js内のdataに、作成したratio変数をセットしてあげて完成です。 data: ratio おわりに 公式サイトでは、設定するdataの値が静的に配列で記述されていますが、 そのdataに、自分で作成した変数をセットすれば様々な要件に対応できるかと思います。 ※Chart.jsの基本的な使い方については、下記のサイトを参考に致しました。 Chart.jsでグラフを描画してみた 参考サイト Chart.js公式サイト Tooltipsの設定値一覧 Chart.jsでグラフを描画してみた pushで配列に要素を追加する方法
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Sass(SCSS)を使って絵を書いてみた

Sassの学習がてら絵を書いてみたので記事にしてみました。この記事を通してSassやCSSで絵を書く楽しさ(ついでにSassの使い方)を伝える事ができれば幸いです。 作品 CodePenなるものを発見したのでQiitaの記事を書くためだけに導入しました。 See the Pen rNjpGBa by すぐひと (@suguhito65) on CodePen. Sass 今回使用したSassの機能を簡単にではありますが解説してみたいと思います。 変数 scss $body: #ffd700; .head { background-color: $body; } キャラクターの体の色を変数$bodyに入れ、使う時はbackground-color等の値のところに代入します。 色を変更したくなった時に変数の値だけ変更すれば、変数が使われている所の全ての色が変更できるので便利です。 @mixinと@include CSSで絵を書く際よく使うプロパティを@mixinでまとめといて、必要になったら@includeで取り出すイメージですかね。 scss @mixin ptlm($margin) { position: absolute; top: 50%; left: 50%; margin: $margin; } .head { @include ptlm(-7em 0 0 -4em); } .left-eye { @include ptlm(-2.3em 0 0 0em); } position〜leftは固定の部分ですがmarginはそれぞれのクラスによって値が違うため、ptlm(任意の名前)の引数に$marginを入れます。そして、いざクラスでptlmを使いたい時は@includeを使用し、()内にmarginの値を入れて使用します。 ちなみに私がCSSで絵を書く際、topやleft(もしくはrightやbottom)でだいたいのあたりをとってからmarginでポジションの微調整をするのが常でしたが、今回はmarginにポジション取りの全権を与えました。その方がmarginひとつを引数にすればいいので、コードがスマートになりました。 ネスト(入れ子)と& scss .tail { @include ptlm(3.2em 0 0 3.6em); @include hw(1.5em, 1.8em); @include border(0.3em); background: #8b4513; transform: skewX(-10deg) rotate(-20deg); &::before { @include ptlm(-3.1em 0 0 -0.4em); @include hw(2em, 2.5em); @include border(0.3em); content: ''; background: $body-s; } &::after { @include ptlm(-6.5em 0 0 0.8em); @include hw(4em, 5em); @include border(0.3em); content: ''; background: $body-s; } .tail-arrange { @include ptlm(-2.85em 0 0 0.7em); @include hw(1.1em, 1.8em); background: $body-s; z-index: 1; &::before { @include ptlm(1.55em 0 0 -1.75em); @include hw(0.5em, 0.83em); content: ''; background: #8b4513; } } } ネストを使う事でtailとtail-arrangeの親子関係がわかりやすいですね。&を使う事でbefore・after等の擬似要素やhover・active等の擬似クラスもネストできます。 ちなみに絵を書く時にbeforeとafterをよく使います。これらを使うと1つのdivタグで3つの図形を作れるので便利ですね。contentがないと反映されないので忘れずに(値は空にします)。 CSSで絵を書くために CSSで絵を書くために一番重要なのは図形の成形でしょうか。思い描く形を作り出す事が難しくもあり、楽しい部分でもあります。 三角形 scss .nose { @include hw(0, 0); /* heightとwidthが0 */ border-left: 0.27em solid transparent; border-right: 0.27em solid transparent; border-bottom: 0.3em solid #000; } 鼻の部分(三角形)の作り方は、heightとwidthを0にしてborderのleftとrightをtransparent(透明)にする事でできます。border-bottomの色がそのまま三角形の色になります。 See the Pen eYgywor by すぐひと (@suguhito65) on CodePen. ↑の図形の方が理解しやすいでしょうか?border-topを記述しない状態が三角形です。 台形 See the Pen dyNJBpg by すぐひと (@suguhito65) on CodePen. 例えば↑のようにtransformを使う事で台形ができます。height・width・background-colorで作った四角形をtransformを使って変形させる事で、いろんな形が作れるので純粋に楽しいです。 transformは他にもいろんな使い方があるようなので、興味のある方はぜひ調べてみて下さい。 丸みのある図形 See the Pen ZELvgPN by すぐひと (@suguhito65) on CodePen. border-radiusを4つに分けて記述した方がわかりやすいと思ったので分けています。 値は、(top-leftの場合)横50px・縦20pxの順番で記述し、その範囲を丸くしてくれます。%を使う事もでき、4つ全てを50%にすると円になります。 transformと組み合わせれば、できる図形の幅が広がります。 アニメーション Sassと同時に今回初めて取り入れてみたので、さほど詳しくありませんが使用した機能だけでも解説してみます。 See the Pen wvgyYyQ by すぐひと (@suguhito65) on CodePen. アニメーションと言えばtransitionとanimationがありますが、今回はanimationを使用しました。animationと@keyframesを使う事でアニメーションを繰り返したり、繰り返す時間の間隔を指定できたりします。 scss .ear2 { animation: ear2-move(アニメーション名) 1s(時間) infinite alternate ease-in-out; } infiniteは無限にアニメーションを再生する設定で、alternateが行ったり来たりの設定です(normalは行くだけ)。ease-in-outはアニメーションのタイミング・進行割合を指定する値の一つです(他にlinear、ease-in、ease-out等)。 scss @keyframes ear2-move { 0% { transform-origin: bottom right; transform: rotate(0deg); } 10% { transform-origin: bottom right; transform: rotate(30deg); } 20% { transform-origin: bottom right; transform: rotate(0deg); } 100% { transform-origin: bottom right; transform: rotate(30deg); } } @keyframesでアニメーションの動作を指定します。今回はtransformのrotateで30度回転させるアニメーションです。transform-originは回転の中心を設定するプロパティで、↑は回転の中心を右下に指定しています(他にcenter等)。0%〜100%は1s(1秒間)の中での動き方を指定するものです。 終わりに HTML&CSSやSassの学習をする際、できる事なら楽しんで学習したいものです。私の場合は、CSSで絵を書く事で楽しく学習できています。興味のある方はぜひ試してみて下さい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

短期的なイベントハンドラー(短命なイベントハンドラー)は5秒未満

原文で言うa short-lived event handlerの定義が不明だった。 JavaScriptによるクリップボード操作にはユーザーの許可を得ずに実行できるパターンがある。 それがユーザー生成の短期的なイベントハンドラー内での実行であるが、 ユーザー生成の短期的なイベントハンドラーでないときにパーミッションを取らずに実行するとFirefoxの場合下記の警告が出力される。(コピーは失敗する) document.execCommand(‘cut’/‘copy’) はユーザー生成の短期的なイベントハンドラーの内部からの呼び出しでないため拒否されました。 今回は一般的に短期的なイベントハンドラーとして紹介されるclickイベント内で警告が出た。 今までの実績ある実装との違いは、 async functionである awaitを使っている fetchを使っている (fech処理の関係上)クリックからexecCommand実行まで時間が空く であった。 順番にテストした結果、およそ5秒を過ぎるとclickイベント内でも短命とみなされず失敗するという結果が得られた。 察するに、 ユーザー操作に対する短命なイベントハンドラー(例えば click ハンドラー) の「例えば click ハンドラー」は「ユーザー操作に対する(イベントハンドラー)」にかかっており、「短命」かどうかはユーザー操作関係なく、コード量にも関係なく、字面どおりに「短時間」であることが必要かと思われる。 私は「ユーザー操作に対するイベントハンドラー」≒clickイベント自体が「短命なイベントハンドラー」だと解釈していた。 コード <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="test">copy</button> </body> <script type="text/javascript"> function sleep (ms) { return new Promise((res) => { setTimeout(res, ms)}) } document.querySelector('#test').addEventListener('click',async () => { await sleep(5 * 1000) document.execCommand('copy') console.log('copy') }) </script> </html> await sleep(5 * 1000)では失敗 await sleep(4 * 1000)では成功 await sleep(4800)あたりから成功 参考 クリップボードとのやりとり - Mozilla | MDN document.execCommand をユーザー操作に対する短命なイベントハンドラー(例えば click ハンドラー)のなかで実行することで、特別な許可なしに"切り取り"や"コピー"などのクリップボード操作が可能になります。 Interact with the clipboard - Mozilla | MDN The document.execCommand() method's "cut" and "copy" commands can be used to replace the clipboard's current contents with the selected material. These commands can be used without any special permission if you are using them in a short-lived event handler for a user action (for example, a click handler). How to copy a large amount of html content to clipboard in javascript without timeout - Stack Overflow In my browser the countdown stops after around 5 seconds. If I press Ctrl+C after the chain of copy handlers was broken, the copy handler is invoked again by a user generated event then it goes for 5 seconds again. 任意の文字列をコピーするテクニック - Qiita
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Flex.boxの基礎を理解すると。

初心者が独学1年では理解できなかったFlexboxを プログラミング学校に通ったことによってめちゃくちゃ理解できたのでご報告いたします。 Flex.boxを理解するためには『HTML,CSS』を理解している必要があるなと実感 『HTML』を装飾するためのツールの一つとしてFlexboxが存在する 『Flexbox』を理解するために用意するモノ ・CSS Flexbox チートシート (ダウンロード) 以上。 文章で表現は難易度高いので、Flexboxを使って次回から『国旗』を作ります 今回は以上です! ありがとうございます
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

フロントで利用する単位について

職場で、単位についての研修があったので、それのまとめです。 タグの大きさ指定 px 1dot(ドット)=1px(ピクセル) パソコンの画面の表示は小さな点の集合体で構成されていて、その最小単位が1dot % 親に対して何%の表示をするか vw(viewportwidth) 画面幅に対して何%の表示をするか 文字の大きさ指定 % 親に対して何%の表示をするか 何もしていなければHTMLの初期値からの倍率 HTMLの初期値=16px em 1em=1文字 ※現在はスマホやPCの表示に柔軟に対応できないため、利用されるケースは少ない rem emの上位互換 htmlタグを親として倍率調整する。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む