What's New Qiita

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

  • 投稿日：2020-03-16T21:53:41+09:00

Glide.jsでスライドショーを作る

Glide.jsとは

https://glidejs.com/

無料で使用できるオープンソースプロジェクトです。
他のライブラリに依存することなく、軽量なことが特徴です。

インストール

npm

npm install @glidejs/glide

GitHub

https://github.com/glidejs/glide/releases/tag/v3.4.1

読み込み

スクリーンショット (23).png
以下の二つをHTMLで読み込みます。

<link rel="stylesheet" href="./@glidejs/glide/dist/css/glide.core.min.css">

<script src="./@glidejs/glide/dist/glide.min.js"></script>

スライドショーを配置する位置へ以下を記入します。

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">画像１</li>
      <li class="glide__slide">画像２</li>
      <li class="glide__slide">画像３</li>
    </ul>
  </div>
</div>

以下を記入し、初期化します。

<script>
    new Glide('.glide', {
      autoplay: 2000
    }).mount()
</script>

autoplayは指定の時間で自動変更してくれます。上の例では2秒で移ります。

サンプル

ezgif.com-video-to-gif.gif

Glide.jsのサイトのDOCSからその他様々な仕様を見ることができます:slight_smile:

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

部分テンプレートとは？

部分テンプレートってなんなの？？

部分テンプレートとは・・・
複数のビューファイルの中で使われている部分を一つのビューファイルとして管理すること。

つまりどういうことかというと複数回使うビューをテンプレート化してしまうことで冗長な記述が必要なくなるというとっても便利かつ簡単なテクニックです。

部分テンプレートを作成する

部分テンプレートのビューを作成するときの注意点としてビューファイルのファイル名の先頭の部分に_ (アンダーバー）をつける必要があります。
例えば、呼び出したい部分テンプレートファイルがheader.html.erbだとすると、
_header.html.erbと書き換えましょう。

部分テンプレートの呼び出し方

当たり前ですが、実際に部分テンプレートを呼び出すためのメソッドがあります。それが
renderメソッド　です.

_header.html.erb
render 'ファイル名'  #'ファイル名'で部分テンプレートの呼び出し

render partial: 'ファイル名' #partialはつけてもつけなくても可

このように記述していくことで部分テンプレートが使用できて、同じようなコード再度記述していく必要がなくなります！便利ですよね。

hamlで書くとどうなるのかというと

_header.html.haml
= render 'ファイル名' #=でくくってあげちゃうだけ

renderメソッドにはもっと活用できるオプションがあるみたいなので詳しく知りたい方は検索してみましょう（優秀なエンジニアに丸投げ）

以上です。至らない点があればコメントお願いします。

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

実証済！シャックリをとめるプログラム

はじめに

先日、しゃっくりが止まらなくて困っている同僚に祖母直伝の方法を試したら
ピタリと治ったので、それをフローとプログラムに落とし込んでみます。
決してネタに困って出オチ記事に走っているわけではないです。。

フローチャート

フローチャート.jpg

プログラム

StopHiccup.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>シャックリ停止めます？</title>
  </head>
  <body>
    <h1>シャックリ停止めます？</h1>
    <button id="btn">開始</button>
    <div id="area1">カウントダウン</div>
    <script>
        document.getElementById("btn").addEventListener('click', function() {
        var r1 = window.confirm('シャックリが止まりませんか？\nはい＝OK、いいえ＝キャンセル');
        if( r1 ) {
          //「true」の処理

          window.alert('シャックリ停止シーケンスを開始します。\nまず初めに、めちゃくちゃ息を吸ってみよう！');

          var r2 = true;
          do{
            r2 = window.confirm('限界まで息を吸えてる？（ここが最重要ポイント）\nはい＝OK、いいえ＝キャンセル');
            if( !r2 ) {
              window.alert('まだいける！\nこれ以上吸えないってとこまで頑張ってみよう！');
            }
          }while (!r2);

          window.alert('はい！息を止めて！\nあと少しだよ！がんばってー\nカウントダウン開始');

          document.getElementById("area1").innerText = 10;

          sleep(10, function() {
            document.getElementById("area1").innerText = "お疲れ様でした"
            window.alert('はい！終わりましたー。息はいて大丈夫です。\nお疲れ様でした。これでもうシャックリは出ないはずです。');
          });
        }
      })

function sleep(waitSec, callbackFunc) {
  var spanedSec = 0;
  var waitFunc = function () {
      spanedSec++;
      document.getElementById("area1").innerText = 10 - spanedSec;
      if (spanedSec >= waitSec) {
          if (callbackFunc) callbackFunc();
          return;
      }
      clearTimeout(id);
      id = setTimeout(waitFunc, 1000);
  };
  var id = setTimeout(waitFunc, 1000);
}

</script>
  </body>
</html>

最後に

しゃっくりは横隔膜の痙攣が原因だそうですが、止めるには横隔膜を刺激すれば止まるそうです。
なので、めちゃくちゃ息を吸って大角膜を広げてあげることでシャックリを止めている。
ということでしょうか。

以上、お付き合いいただきありがとうございましたm(__)m

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

入力された値を大文字で表示したい

JavascriptのtoUpperCase();

$('#abc').keyup(function(){
this.value = this.value.toUpperCase()
});

『テスト』と打とうとすると。
『Tテスト』になる。

text-transform: uppercase;

解決

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

input type="number"で表示される矢印を消したいhttps://qiita.com/stock

google chrome

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

IE , firefox

input[type="number"] {
-moz-appearance:textfield;
}

ついでに右寄せ

input[type="number"]{
text-align:right;
}

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

iframe 要素を使ってヘッダー、フッターを共通管理する

はじめに

静的なウェブサイトを構築して配信するとき、ヘッダーやフッターなどのサイト共通パーツの管理が問題になる。

レガシーな手法だと Apache の Server Side Include (SSI) をもちいたり、PHP を導入したりして解決する。このような手法は手軽で要件が整えばとても簡単に導入できるのが利点だ。一方で配信環境が限られる問題がある。

ファイルインクルードを Gulp タスクに任せたり、静的サイトジェネレータ―を使うやりかたも一通り試してきた。状況が許すならば静的サイトジェネレータ―を使うのが一番いいだろう。実際のところ Eleventy の使い心地はかなりいい。

しかしそのための環境構築や技術的キャッチアップは手軽とはなかなかいいづらい。不慣れな人にとってはひとつのハードルになる。

そこで、 iframe を共通パーツのインクルードがわりに使うのはどうなのか？　と思って試してみた。HTML 初学者ならば誰でも当たり前に思いつき、まともなウェブ開発者ならアホかと一蹴する手法だが、実際のところ本当に価値のない手法なのだろうか？

結論としては悪くはないかもしれない。うまく実装すれば、サーバーサイドの助けを得ることなくフロントエンドだけでパーツのインクルードができる。JavaScript が無効な環境でも動作する。

iframe を共通パーツの管理に使うデモ

iframe 要素を使ってヘッダー、フッターを共通管理する方法

動作概要

  • ヘッダーやフッターなど、共通パーツをそれぞれ個別のファイルに分割する
  • iframe を使って共通パーツを読み込む
  • JavaScript が有効な場合、JS をつかって iframe 要素を iframe の内容で置き換える。結果的に読み込み元ページには、iframe がなくなり「共通パーツが最初からそこにあった」かのように表示される
  • JavaScript が無効な環境では、iframe がそのまま表示される

ファイルを分割する

最初に次のような HTML があったとする。header 要素が共通管理したいパーツだ。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Iframe Common Parts</title>
    <link rel="stylesheet" href="/test.css" />
  </head>
  <body>
    <header class="Header">
      <!-- 中略 -->
    </header>
    <main>
      <h1>Hello, World!</h1>
      <!-- 中略 -->
    </main>
  </body>
</html>

header 要素を別ファイルに分割する。DOCTYPE 宣言から全部書いているのは、iframe として読み込まれるため独立した HTML ファイルの体を成している必要があるから。

common/header.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Header</title>
    <link rel="stylesheet" href="/test.css" />
  </head>
  <body>
    <header class="Header">
      <!-- 中略 -->
    </header>
  </body>
</html>

読み込み元は iframe 要素に置き換える。id 属性をつけているのは JS で要素を取得するため。role 属性はつけておくと良いっぽかった（スクリーンリーダーで「フレームコンテンツ」と読み上げなくなった）

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Iframe Common Parts</title>
    <link rel="stylesheet" href="/test.css" />
  </head>
  <body>
    <iframe
      id="HeaderIframe"
      class="HeaderIframe"
      role="presentation"
      src="/common/header.html"
    ></iframe>
    <main>
      <h1>Hello, World!</h1>
      <!-- 中略 -->
    </main>
  </body>
</html>

CSS は雑だけどこんな感じ。

test.css
.HeaderIframe {
  display: block;
  width: 100%;
  height: 60px; /* 固定値で入れとく必要あり */
  border: 0;
}

JavaScript で iframe 要素と iframe の中身を置き換える

JS で iframe の内容を読み取り、読み込み元ページに挿入する。この操作をすることで、読み込み元のページには「iframe がもともとなかった」かのような状況をつくれる。

そのための JS 関数は以下。関数を呼び出したときの iframe の状態によらず、関数を呼び出せばうまく動くようにつくってある。

function inlineIframe(iframe) {
  var onLoad = function () {
    iframe.insertAdjacentHTML('afterend', iframe.contentDocument.body.innerHTML)
    iframe.parentNode.removeChild(iframe)
    iframe.onload = null
  }
  if (
    iframe.contentWindow.location.href === 'about:blank' ||
    iframe.contentDocument.readyState === 'loading'
  ) {
    iframe.onload = onLoad
  } else {
    onLoad()
  }
}

呼び出し方はこう。inlineIframe の引数には iframe の Element を渡す。

inlineIframe(document.querySelector('#HeaderIframe'))

完成品

iframe を共通パーツの管理に使うデモ

実装時のポイント

  • 読み込み後に画面のがたつきが起きないよう、iframe の実寸サイズを iframe 要素の高さに指定する
  • iframe 内部からのリンクには target="_top" を忘れないようにする
  • iframe 要素には role="presentation" を付けてアクセシビリティロールを削除する（スクリーンリーダーが「フレームコンテンツ」と読み上げなくなった）
  • 共通パーツのレスポンスに Cache-Control などキャッシュを制御するヘッダーを適切に設定するとよい

手法の考察

この手法のいちばん気になる点は、表示時のディレイと、iframe の高さを固定値で入れておかなくてはいけない点だ。特に表示時のディレイはユーザー体験におおきくかかわる部分なので慎重にならざるを得ない。

とはいえ、冒頭にあげた課題を解決する手段としては一定の価値がみとめられると思う。なにせほかの手段のハードルがどれも高いのだ。いや、今回紹介の手法もお手軽とはいいがたいけど……。

HTML から別の HTML を読み込む手法は歴史的にも不遇な一途をたどってきた。Frameset DTD の廃止にはじまり、HTML5 策定時に導入されかけた iframe の seamless 属性もついぞ導入されず、Web Components の一部分だった HTML Imports もなくなってしまった。ブラウザの実装上いろいろ困難はあるんだとおもうが、もうちょっと何とかならないのかな、と思う。

そのほかの懸念事項

  • iframe.contentDocument.body.innerHTML をまるごと読み込み元に挿入している。やりかたが雑かもしれない
  • 共通パーツに JS による振る舞いが指定されているばあい、ちょっと工夫が必要そう（なんとでもなるが）
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-03-16T09:25:24+09:00

jQueryでonChange属性にJavaScriptコードを埋め込む

こんな経験ありませんか？

ローコード開発を行っていて「基盤の制約により入力値の変更時イベントが設定できない」こんな経験ありませんか？
今回は「jQueryでonChange属性にJavaScriptコードを埋め込む」方法を紹介します。

方法

画面の初期表示時にクライアントサイドJavaScriptにて、以下のコードを実行します。

$('input[name="%任意のname値%"]').on('change',function(){
    // %任意のJavaScriptコード%
});

結果

これで任意の画面項目の入力値の変更時イベントが設定できます。
その他のイベント属性にも応用できると思いますので、試してみてください。

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

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

100日チャレンジの263日目

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

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

日付別

タグ一覧