js

ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

2017-06-03

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。

CSSのフレームワークBootstrap3をお使いの方ならすんなりと入れるかと思います。下記は公式サイト

Validator, for Bootstrap 3

このプラグインは、Bootstrapの中核となるjQueryプラグインに依存しています。bootstrap.jsと一緒に使います。 Validatorプラグインは、主にHTML5の標準属性を介して設定可能な自動フォーム検証を提供します。誰も不気味なフォームを好きではないので、邪魔にならないユーザーエクスペリエンスも提供します。

特徴としてはdata-apiと標準のHTML5属性を使用して設定可能、エラーを通知し、エラーが解決されたことを知らせる、フォームが有効で、すべての必須フィールドが完成するまで、送信は無効です、カスタマイズ可能なエラーメッセージ、 カスタムバリデータ関数、AJAXによる入力フィールドの検証です。

Read more

gmapにエリア範囲指定で色をつける方法

2017-04-08

今回は地図のエリア範囲を色分けしてみたいと思います。材料はgooglemapとgmaps.jsのライブラリを使います。 マーカーを置くというのはありますが、エリア内に色をつけるというのはあまりないと思いますのでご紹介します。

今回は出雲市の市町村合併の様子がわかるようにしたいと思います。平成7年度の出雲市と平成28年度の出雲市を比べてみたいと思います。

Read more

anime.jsの使い方

2017-02-18

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。

anime.jsはとっても軽量でかつ簡単に使えるので去年あたりから人気が出始めているライブラリです。jQuery依存もしていませんのでこのライブラリだけ読み込めばOKです。

⇒anime.js公式サイト

ブラウザサポートはChrome、Safari、Opera、Firefox、IE 10+ですのでモダンブラウザは大丈夫です。

Read more

親要素をクリックしたら子要素のリンクを発動させる方法

2017-02-04

システム上の設定で自動的にはき出すhtmlの場合とかに有効な手段かもしれません。 a要素が複数でてきてその上の要素をクリックしたら下の要素が発動するような仕組みです。

例えばli要素の中にdiv要素とdl要素がありそこのdt要素内にa要素が入っているけどli要素全体をリンクにしたい場合の対処方法です。

cssでやる方法は一つ上の要素を全体リンクにする方法はありましたが子要素のリンクはなかったのでjQueryを使ってご紹介します。

Read more

速さ・時間・距離の計算

2017-01-14

さて、最近は寒くなってきましたね。日本海側は大雪で大変な状態になっています。

外にも出られずちょっとした運動もしずらいですね。室内運動かジムに行くということになりますね。

そんなことを考えてたらマラソンの距離を2時間ほどで走る選手のスピードを計算したくなったので計算式に当てはめて計算してみたところ時速20kmちかくで走ります。駅伝も20kmを1時間ぐらいで距離が短い分少しスピードが速いです。一般人だと100mを15秒ぐらい走ると24kmぐらいのスピードなのでかなり全速で走っていることがわかりますね。

そういえば今年の駅伝は青山学院の3連覇の3冠はすごいですね。原監督の指導方法に秘密があるようですね。余談でした。

Read more

clipboard.jsの使い方

2016-08-13

今回はテキストコピーをボタンひとつで実装する方法をご紹介します。

相手にテキストなどコピーさせたい場合にとても有効です。

clipboard.jsというライブラリを利用すると一発で解決です。使い方も簡単です。ブラウザではChrome、Firefox、IE 9以上、Operaが対象となっており、Safariが対象外となっております。

こちらが公式サイトですclipboard.js — Copy to clipboard without Flash

Read more

CryptJSでの暗号と復元

2016-07-23

今回は暗号文を作ったりそれを復元したりするスクリプトの紹介です。

CryptJSというライブラリを使うと簡単にできます。デモサイトがありますので使ってみてください。

⇒デモを見てみる

もともとはグーグルのプロジェクトでJavaScriptの標準と安全な暗号アルゴリズムの実装crypto-jsからできています。

CryptoJSは、ベストプラクティスとパターンを使用しています。JavaScriptで実装した安全な暗号アルゴリズムのコレクションです。高速であり、一貫性とシンプルなインターフェイスを持っています。

秘密の暗号文を相手に送ったりしてそれを復元したりできます。可逆暗号化をしています。

Read more

日付を扱うJavascriptライブラリmoment.jsの使い方

2016-04-02

今回はJavascriptライブラリのmoment.jsのご紹介です。⇒詳しくは公式サイトにてご確認ください 現在のバージョンは2.12.0です。2016年4月現在

日付を取り扱うアプリケーションを使う場合は必須ですね、あまり使わない場合はdate関数を使っても良いのですが、日付の計算や今日が何曜日とか今年は閏年なのかとかこの日付は期間中の値なのかなど時間や日に関することならこのライブラリーに任せてしまいましょう。

カレンダーとか作る際にも役立ちそうですね。

Read more

Unicodeのコードから文字列変換そしてデコード

2016-03-26

文字コードをユニコードの値から文字列を出力するプログラム関数 String.fromCharCode()というのを使ってプログラムを作ってみます。

これを使うことでちょっとした暗号文が出来ます。暗号って言うほどでもないですが文字を数値に変換してくれるので数値ばかりなので普通に人には分からないと思います。

ただこの数値は分かる人には分かります。しかも文字コード表もありますから見ていけば分かります。簡易の暗号文といったところでしょうか。

Read more

BMI値計算プログラム

2016-03-22

健康志向のブームはいつもありますね。健康に気を使う人多いと思います。

運動してダイエットとかもそうですよね。テレビでもよくやっています。健康な身体作り。

身体が資本というのは病気になって初めて分かるものです。私もあまり運動していないので身体もたるみっぱなしで最近は完全に引きこもり生活です。パソコンでの作業が多いのであまり運動することがないのです。

座りっぱなしもよくないということなのでスタンディングワークしております。何年か前にもやりましたが1ヶ月ほどで1kgはやせました。最近はずっと立ちっぱなしで大変なのでスタンディングワークを多めで座って作業もしています。

病気をしない身体作りというのはとても良いことですね。背筋ともも肉を鍛えるとダイエットには効果的と効いたことがあります。

Read more

簡単にHTMLの年月日のプルダウンを作る方法

2016-03-08

よくフォームなどで年月日のプルダウンを作成するときが多いのでちょっと簡単にプルダンを作成する方法ご紹介します。

1950年から2016年までのプルダウンを書くのはとても大変なのでプログラムを書いて自動化してしまいましょう。

一度書いてしまえばあとは使いまわしていけるのでとても楽です。1〜12月と1〜31日も合わせて作っていきます。ついでに都道府県のプルダウンも作ってみましょう。

Read more

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
とっても簡単なReally Simple CSV Importerの使い方

エクセルやCSVデータでブログ記事を保存していたりする場合にこのプラグインがとても便利です。 大量にデータがあるときに1件1件ちまちま入れていくのはとても大変です。そこでこのプラグインで一括で...

22 Jul 2017

アイキャッチ
この曲ってカバー曲だったんだ!という曲をご紹介

最近音楽聴かなくなりました。。。昔はやたらとCD買ってました、適当に選んだCDが良かったりとよく聞いていたピークは1992年〜1999年ぐらいまでかな?かなり短いですね。 久々に曲を聴くと当時...

15 Jul 2017

アイキャッチ
出雲市にある浜山公園の林間こども広場がオススメ

ここ最近の急成長を遂げている出雲市、よくいきます。人口も増え領地も拡大しているところでございます。 山陰道が整備されて米子からでも1時間ぐらいで出雲市に行くことができます。近くなりました。 ...

08 Jul 2017

アイキャッチ
ブラウザの強力キャッシュと圧縮するデータセーバーのデメリット

アンドロイド7.0(Nougat/ヌガー)の新機能でもあります。この機能のブラウザ版のデータセーバーのご紹介です。 データセーバーを使うとクロームの使用量、通信料などを減らすというものです。だ...

01 Jul 2017

アイキャッチ
新しいことを続ける力を身につける方法

今回は新しく始めるきっかけや物事にどのように取り組むかを考えてみたいと思います。 結構新しいことを始めることって大変だと思います。なかなかの勇気と体力が必要かなと。 例えばダイエットとかを例...

24 Jun 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ