JavaScriptプログラムに関する各種メモ書き

Mapオブジェクトの .set() と コンストラクタの違い

● Mapオブジェクトの .set()

const myMap = new Map().set('myData', { name: 'lang', value: 'japanese' })

● Mapオブジェクトの コンストラクタ

const myMap = new Map([
  ['myData', { name: 'lang', value: 'japanese' }]
]);
No.2476
02/27 09:35

edit

javascript の 実行時間を計測して表示する console.time()

● javascript の 実行時間を計測して表示する console.time()

以下のように使用します

console.time("MyFunction 実行時間")
MyFunction()
console.timeEnd("MyFunction 実行時間")
No.2449
01/19 16:38

edit

JavaScript の Symbol.for() とは?

● Symbol()

Symbol("mySymbol") と Symbol.for("mySymbol") は似ていますが、実際には異なる動作をします。 この違いは、シンボルがどのように作成され、格納されるかに関係しています。

Symbol("mySymbol"): これは毎回新しいユニークなシンボルを生成します。 たとえ同じ文字列を使って複数回呼び出しても、それぞれの呼び出しで異なるシンボルが生成されます。

let sym1 = Symbol("mySymbol");
let sym2 = Symbol("mySymbol");

console.log(sym1 === sym2); // false

● Symbol.for()

Symbol.for("mySymbol"): これはグローバルシンボルレジストリを使用してシンボルを作成または取得します。 同じ文字列で Symbol.for を呼び出すと、同じシンボルが返されます。

let sym1 = Symbol.for("mySymbol");
let sym2 = Symbol.for("mySymbol");

console.log(sym1 === sym2); // true
No.2442
01/14 08:40

edit

Javascriptで文字列を JSON としてパースしJavaScriptの値にする。さらにエラーの場合にエラー補足をする

● JSONをパースし、エラーの場合にエラー箇所を表示する(方法1. )

JSON.parse の 第二引数の reviver を使用します。

const json = '{"name":"テスト太郎", "age":42"}';

const obj = JSON.parse(json, (_key, value) => {
  try {
    return JSON.parse(value);
  } catch (e) {
    return value;
  }
});

● JSONをパースし、エラーの場合にエラー箇所を表示する(方法1. )

const json = '{"name":"テスト太郎", "age":42"}';

const obj = JSON.parse(json);
if (obj instanceof SyntaxError) {
  console.log(obj);
}
No.2430
12/18 17:28

edit

キーボードショートカット「/」で検索フォームにフォーカスし、「esc」でフォーカスを外す

<input type="text" id="q">へフォーカスします。

// キーボードショートカットのハンドラー
function handleShortcut(event) {
	if (event.key === "/" && !isInputOrTextArea(document.activeElement) ) {
	  event.preventDefault();
	  document.getElementById('q').focus();
	}
	else if (event.key === "Escape") {
      document.activeElement.blur();
    }
}

// フォーカスされている要素がテキスト入力またはテキストエリアかどうかを判定
function isInputOrTextArea(element) {
	return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
}

// キーボードイベントをページ全体で監視
document.addEventListener('keydown', handleShortcut);
No.2389
08/24 11:12

edit

javascriptでURLの ?以降 #以降 を取得する

javascript で URLの ?以降 (#は含まれない)を取得する

const queryString = location.search;

javascript で URLの #以降を取得する

const fragmentIdentifier = location.hash;
No.2291
03/09 10:05

edit

正規表現マッチ結果をbooleanで返す test() メソッド

● 正規表現マッチ結果をbooleanで返す test() メソッド

const regex = new RegExp('foo*');
const result1 = regex.test('football');
console.log( result1 );    // true

以下のように書いても同様です

const result2 = /foo*/.test("football");
console.log( result2 );    // true
No.2267
12/23 13:03

edit

javascriptの無限ループ

● while

while (true) {
    // 無限ループ
}

● for

for (;;) {
    // 無限ループ
}

● for Infinity

for (var i = 0; i < Infinity; i++) {
    // 無限ループ
}
No.2261
12/14 23:42

edit

javascript で UUID や ULID や CUID を生成する

● javascript で UUID を生成する

crypto.randomUUID() // dc690eb0-6526-475d-8cb5-02d482fa468c

● javascript で 時系列でソート可能な ULID を生成する

ULID パッケージをインストールする

npm i ulid

ULIDを生成する

import { ulid } from 'ulid'
 
ulid() // 01ARZ3NDEKTSV4RRFFQ69G5FAV

ULIDは26文字のIDです。さらに短いIDを検討する場合は XID(英数小文字20文字)を検討すると良いでしょう

● javascriptで時系列でソート可能な XID を生成する

npm install xid-js

● Goでで時系列でソート可能な XID を生成する

https://github.com/rs/xid

const xid = require('xid-js');
xid.next(); // b0xzcjjhcjkbqnpwz150

● javascript で 時系列でソート可能な cuid を生成する

npm install --save @paralleldrive/cuid2
import { createId } from '@paralleldrive/cuid2';

const ids = [
  createId(), // 'tz4a98xxat96iws9zmbrgj3a'
  createId(), // 'pfh0haxfpzowht3oi213cqos'
  createId(), // 'nc6bzmkmd014706rfda898to'
];
No.2237
11/11 11:38

edit

javascriptでhtmlからimgタグを抽出する

● javascriptでhtmlからimgタグを抽出する

DOMParser を使用します。

// Aタグのリンクを抽出する
const html = '...................'
const dom = new DOMParser().parseFromString(html, 'text/html')
const imgs = dom.querySelectorAll('img')

imgs.forEach(img => {
	console.log('● img.src')
	console.log(img.src)
})
No.2236
11/10 16:39

edit

javascript でブラウザから fetch を使ってmultipart/form-data でファイルアップロードを行う

● javascript でブラウザから fetch を使ってmultipart/form-data でファイルアップロードを行う

(xhr いわゆるajax)で通信します。

    const fileUpload = async () => {
      const url_1 = 'https://hogehoge.jpg'
      const url_1 = 'https://fugafuga.jpg'

      const file_1 = await urlToFile(url_1)
      const file_2 = await urlToFile(url_2)

      var formData = new FormData()

      formData.append("file001", file_1);
      formData.append("file002", file_2);

      const result = await fetch('/file-upload-backend-url', {
        method: 'POST',
        body: formData,
      }).then((response) => {
        return response.url;
      })

      return result;
    }

urlToFile メソッドはこちらを使用します
URL から File オブジェクトに変換する|プログラムメモ

実行

fileUpload()
No.2235
11/09 17:23

edit

base64からFileオブジェクトに変換 / URL(https://xxxxxxxxxxx) から Fileオブジェクトに変換する

● base64 から File オブジェクトに変換する

function dataURLtoFile(dataurl: string, filename: string) {
  const arr = dataurl.split(",");
  if (arr.length === 1) return;

  const result = arr[0].match(/:(.*?);/);
  const mime = result ? result[1] : "application/octet-stream";
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

使い方

const base64 = "xxxxxxxxxxxxxx";
const resizedFile2 = dataURLtoFile(base64, "myfile,jpg");

● URL(https://xxxxxxxxxxx) から Fileオブジェクトに変換する

    /**
     * get random strings
     * 
     * @returns {string} 
     **/
    const getRandString = () => {
      const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
      let rand_str = '';
      for (var i = 0; i < 8; i++) {
        rand_str += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return rand_str;
    }

    /**
     * URL to FileObject
     * 
     * @param   {string}    url 
     * @returns {Promise<File> | Promise<null>}
     **/
    const urlToFile = async (url) => {
      const fileName = url.match(".+/(.+?)([\?#;].*)?$")[1];
      const rndString = getRandString();
      const getFile = await fetch(`${url}?${rndString}`)
        .then((response) => {
          if (!response.ok) {
            console.error('ファイル取得エラー');
            console.error(response);
          }
          else {
            return response.blob()
          }
        })
        .then((blob) => {
          if (blob === undefined) {
            return null;
          }

          return new File([blob], fileName)
        })

      return getFile
    }

● 使い方

(async 関数の中から使用します)

const url_1 = 'https://xxxxxxxx.jpg'
const file_1 = await urlToFile(url_1)

console.log( file_1 );
No.2234
01/31 13:41

edit

javascript オブジェクトのキーを変数で指定する

● javascript オブジェクトのキーを変数で指定する

・方法 1.

const key = "fullName"
const obj = {}
obj[key] = 'hogehoge'

・方法 2.

const key = "fullName"
const obj = {[key]: 'hogehoge'}
No.2233
11/02 14:07

edit

javascript の Generator の使いどころ?

https://qiita.com/uhyo/items/cc68e66e4008a66f3d94

しかし、イテレータには配列には真似できない点がひとつあります。それは無限イテレータを作れるという点です。

● ジェネレータの基本

引用 : https://qiita.com/kura07/items/d1a57ea64ef5c3de8528

// 1~20の数を順番に取り出す
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
for(var num of ary) console.log(num);

  ↓

// ジェネレータ関数を使って1~20の数を順番に取り出す

// ジェネレータ関数(function* と書きます)
function* generate20Number(from,to) {
  while(from <= to) yield from++;
}
// ジェネレータ
const generator = generate20Number(1, 20);
for(var num of generator) console.log(num);

https://ja.javascript.info/generators

ジェネレータ関数は通常の関数とは異なり、コードを実行しないことです。それらは “ジェネレータ工場(ファクトリー)” として機能します。 function* の実行はジェネレータを返し、その後、ジェネレータに値を要求します。

● ジェネレータ関数の yield* も便利

function* generate3Chars(from,to) {
  yield* ['aaa','bbb','ccc'];
}
const gen = generate3Chars(1, 20);
console.log( ...gen ); // aaa, bbb, ccc 
No.2216
09/20 10:04

edit

「意地でもconst」 は 可読性も悪くない

「意地でもconst」とは、即時関数を定義してその場で実行することで、const の 代入文に条件分岐がある場合でも1行で書く方法です。
意外と可読性も悪くないのでおすすめします。

意地でもconstを使う方法 - Qiita

● switchの例( let を使用)

let num = 0;
switch (flag) {
    case "A":
        num = 1;
        break;
    case "B":
        num = 2;
        break;
    case "C":
        num = 3;
        break;
}

● switchの例( const を使用)

const num = (() => {
    switch (flag) {
        case "A": return 1;
        case "B": return 2;
        case "C": return 3;
        default : return 0;
    }
})();
No.2204
08/25 13:42

edit

console.log ()

● console.log()

    console.log(data)
    console.table(data)
    console.log(JSON.stringify(data, null, 2))
No.2201
08/10 16:48

edit

svelte + vite + typescript + vitest のはじめ方

アプリ svelte-vite-jest の初期化

npm init vite@latest svelte-vite-jest -- --template svelte-ts
cd
npm install

サンプルとしてクリックすると数値が1ずつ増えていくボタンが設置されています。

src/App.svelte の余計なコードを削除して以下のようにしておきます

<script lang="ts">
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div class="card">
    <Counter />
  </div>
</main>

Counter.svelte は次のように修正しておきます

<script lang="ts">
  let count: number = 1
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

● vitest , testing-library , happy-dom のインストール

npm install -D vitest
npm install -D @testing-library/svelte
npm install -D happy-dom

vite.config.ts

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  test: {
    environment: 'happy-dom',
  },
});

ディレクトリ tests にテストファイルを作成する
src/tests/app.svelte.test.ts

import { describe, expect, test } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import App from '../../src/App.svelte';

describe('App.svelte', () => {
  render(App);

  test('1+2は3になる ', () => {
    expect(1 + 2).toEqual(3);
  });

  test('アプリをマウントすると count is 1 が表示される', () => {
    expect(screen.getByRole('button').innerHTML).toEqual('count is 1');
  });

  test('ボタンをクリックするとカウントの数値が2になる', async () => {
    const button = screen.getByRole('button');
    await fireEvent.click(button);
    console.log(button.innerHTML);
    expect(screen.getByRole('button').innerHTML).toEqual('count is 2');
  });
});

● vitestの実行

npx vitest --reporter verbose
No.2196
08/04 12:25

edit

javascript で Objectの長さ length を知る

● javascript で Objectの長さ length を知る

function objectLength( obj ) {
  let objectLength = 0;
  for (let key in obj) {
    objectLength++;
  }
  return objectLength;
}
console.log( objectLength({}) ); // 0
console.log( objectLength({a:'hoge',b: 'fuga'}) ); // 2
No.2195
08/02 15:14

edit

javascriptの条件付き動的import

case009.js

export const Case009 = [
    'hoge' , 'fuga'
];
    if (true) {
      import('./case009.js')
        .then((module) => {
          console.log(module.Case009);
        });
    }

No.2194
07/28 16:21

edit

svelte + TypeScript のはじめ方

● svelte のインストール

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
node scripts/setupTypeScript.js
npm install

● ポートを5001に変更する(macの場合)

package.json

    "start": "sirv public --no-clear",

  ↓

    "start": "sirv public --no-clear --port 5001",

● 起動する

npm run dev

● Svelteコンポーネントを作成する

src/components/Header.svelte を以下の内容で作成する

変数を export することによってプロップスとして受け取ることができます

<script lang="ts">
  export let headerTitle: string;
</script>

<div>
    <h1>app header ({headerTitle})</h1>
</div>

App.Svelte から呼び出す

<Header headerTitle="タイトルのテスト"/>

● ビルドする

npm run build

index.html のパス表記を相対パスにするとサーバーなしで起動することができます。

● アプリの適用htmlタグを指定する

デフォルトではbodyタグにアプリが展開されますがタグを指定することができます.

main.ts

const app = new App({
  target: document.body,
});

  ↓

main.ts
id="svelteapp" のタグに展開する

const app = new App({
  target: document.querySelector('#svelteapp'),
});

● htmlからpropsを渡す

const app = new App({
  target: document.querySelector('#svelteapp'),
  props: {
    titleFromHtml: document
      .getElementById('svelteapp')
      .getAttribute('data-title'),
  },
});

とすると

	<div id="svelteapp" data-title="タイトル流し込み"></div>

の値を渡すことができます。

● Storeを使用する

Storeの定義 stores.ts

import { writable } from 'svelte/store';

export interface UserStore {
  code: string
  name: string
}

export const userStore = writable<UserStore>({
  code: "user0001",
  name: "hogefuga"
});

Storeのsubscribe(ストアのオブジェクトに変更がある度に指定したコールバックが呼ばれます) App.svelte

	import {UserStore, userStore} from './stores.ts';
  
	// userStore
	let user:UserStore;
	userStore.subscribe(u => {
                // コールバック
		user = {
			code: u.code,
			name: u.name,
		};
	});

Storeから取得した値の参照 App.svelte

	<div style="font-weight: bold;"> code: {user.code} </div>
	<div style="font-weight: bold;"> name: {user.name} </div>

Storeの更新 App.svelte

  userStore.update((s) => {
    return {
			code: ’code999’,
			name: 'テスト太郎',
		};
  });

● スコープされていないグローバルなcssを適用する

<style>
    :global(div.content) {
        height: 690px;
    }
</style>

参考 : https://zenn.dev/miruoon_892/articles/2c9efd2c302c56bd41a6
引用 : https://zenn.dev/dictav/articles/sapper-web-app#store
参考 : https://qiita.com/tonio0720/items/88e62e6beffa9adc1a7f
参考: https://qiita.com/tonio0720/items/34ecaae10a67fab3ab16

No.2193
08/24 10:09

edit

ts-node より高速な tsx による typescript ファイルの実行

● ( tsx ) 準備

npm i -D tsx

● ( tsx ) 実行

npx tsx <typescriptファイル名>

以上です。

 

ts-node を使いたい場合はこちら。

● ( ts-node ) 準備

npm install --save ts-node

● ( ts-node ) プロジェクトの初期化も行う場合

npx tsc --init --target es2015

tsconfig.json

"module": "esnext",

  ↓

"module": "commonjs",

● ( ts-node ) 実行

npx ts-node <実行したいtypescriptファイル名>

● ( ts-node ) 既存の tsconfig.json を変更せずに実行したい

そのまま実行すると以下のようなエラーとなることがあります

(node:42851) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

その場合は実行用の tsconfig.json を作成してその設定ファイルを明示的に指定しながら実行します。

tsconfig.cli.json

{
  "compilerOptions": {
    // ts-node対応 esnext → NodeNext
    "module": "NodeNext",
  }

  // ts-node
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

--project <設定ファイル名> を加えて実行します。

npx ts-node --project tsconfig.cli.json src/sample.ts
No.2191
01/31 09:53

edit

typescript 引数の書き方

interface Props {
  hoge: string,
  fuga: string
}

// propsで受けたい場合
function myfunc01( props:Props ){
  console.log(props.hoge)
  console.log(props.fuga)
}

// 「props.」 が邪魔な場合はこのように書ける
function myfunc01( {hoge,fuga}:Props ){
  console.log(hoge)
  console.log(fuga)
}
No.2188
07/19 13:59

edit

typescript

type="module"を記述してimport / export をそのままの javascript で使用する

● type="module"を記述してimport / export をそのままの javascript で使用する

<script type="module">

これにより次のようなことが起こります

・1. this のデフォルト が window ではなく undefined になる。
・2. 実行タイミングが body の後になる(  $(document).ready よりかは前 )。
・3. コードは常にStrictモードで実行される。
・4. import / export が使用できるようになる。
・5. 動的なモジュールの読み込みが可能になる。
・6. 同じ   <script type="module" src="myfile.js"></script> は何時出しても1度しか実行されない

● サンプル

(通常の script)

https://pgmemo.tokyo/livedemo/javascript_type_module/default.html

(通常の type="module" としたscript)

https://pgmemo.tokyo/livedemo/javascript_type_module/type_module.html

<script>
	window.addEventListener('DOMContentLoaded', (event) => {
		document.getElementById( 'jstext' ).innerHTML += '● 3. DOMContentLoaded ';
	});
</script>

<script type="module">
	console.log( '● this' );
	console.log( this );

	document.getElementById( 'jstext' ).innerHTML += '● 2. jsによる出力(type="module") ';
</script>
<div>javascriptのテストを行います。</div>

<script>
	document.getElementById( 'jstext' ).innerHTML += '● 1. js text ';
</script>

引用 : https://qiita.com/azukiazusa/items/98845e79807fff0dd3cb
https://hidekazu-blog.com/javascript-module/#toc11

● モジュールの通常のスクリプトの間のその他の違い

  • ローカルでテストしようとするときは注意してください。ローカルから (つまり file:// URL を使って) HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。
  • また、モジュール内部で定義されたスクリプトの動作は、通常のスクリプト内部のものと異なるかもしれません。これは、モジュール内部では自動的に Strict モード が使われるからです。
  • モジュールのスクリプトを読み込むときに defer 属性 を使う必要はありません。モジュールは自動的に遅延実行されます。
  • モジュールは、複数の <script> タグで参照されていても一度しか実行されません。
  • 最後ですが重要なこととして明らかにしておきますが、モジュールの機能は単独のスクリプトのスコープにインポートされます。つまり、インポートされた機能はグローバルスコープから利用することはできません。それゆえ、インポートされた機能はインポートしたスクリプトの内部からしかアクセスできず、例えば JavaScript コンソールからはアクセスできません。文法エラーは開発ツール上に表示されますが、使えることを期待するデバッグ技術の中には使えないものがあるでしょう。

https://mzl.la/3PV9jPk

● type="module"の時にグローバル変数を作る方法

windowsオブジェクトに勝手にプロパティーを追加してグローバル変数とします

window.globals = {変数名: 値}

引用 : https://qiita.com/17ec084/items/75c9970ca37c5dd1b788

No.2187
07/25 11:52

edit

jest で new Date() のモック

npm i mockdate
import MockDate from 'mockdate'
  test('new Date() は同じ日付が入る', async () => {
    const date = new Date();

    await new Promise(resolve => setTimeout(resolve, 1000)) // 1秒待つ

    expect(date).toEqual(new Date());
  });
No.2186
07/15 15:10

edit

JSDocで javascript ファイルにも少しだけ関数の引数の型をつける

● 以下のようにjavascriptの関数にもJSDOcで形をつけておくと VS Codeでのコーディング時に候補が絞り込まれます

/**
 * @param { ('parent' | 'child') } target
 */

● TypeScript の様に独自の型も作れます(コメント上だけですが)

    /**
     * ・型定義
     * @typedef {Object} GraphDataObj
     * 
     * ・GraphDataObjのプロパティ
     * @property {number}  id
     * @property {string}  name
     * @property {Date}    updatedAt
     * 
     * ・引数の型
     * @param {GraphDataObj} graphDataObj
     */
    function create(graphDataObj) {
        ................
    }

https://zenn.dev/azukiazusa/articles/c89d4bdc7dacf2
https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html

添付ファイル1
No.2185
07/27 15:00

edit

添付ファイル

Javascriptでの正規表現

Javascriptでの正規表現マッチには .match を使用します。 Perlと同じように カッコで挟むと $1 に入ります。

こちらの RegExp.$1 は廃止予定です。

const file_name='http://www.test.com/aiueo/kakikukeko.gif';
alert(file_name);
const r = file_name.match(/([a-zA-Z0-9_.]+?)\.gif$/);
alert(r);
alert(RegExp.$1);

このように記述します

const file_name='http://www.test.com/aiueo/kakikukeko.gif';
const regexp = /([a-zA-Z0-9_.]+?)\.gif$/;
const r = regexp.exec(file_name);
console.log( r[1] );
No.556
07/20 17:39

edit

正規表現

TypeScriptからのトランスパイルを試す

●TypeScript tscコマンドのインストール

npm install -g typescript
tsc -v

Version 4.7.4 などとバージョンが返ってきます

mkdir test-transpile-typescript
cd test-transpile-typescript
tsc --init

フォルダ「test-transpile-typescript」に「tsconfig.json」が作成されます

sample.ts の作成

class Hoge {
  private _id: string;

  constructor(id: string) {
    this._id = id;
  }

  get id(): string {
    return this._id;
  }
}
const hoge = new Hoge('MY-CODE');
console.log(hoge.id);

typescript → javascript トランスパイルの実行

tsc

typescriptのエラーがなければトランスパイルが行われます。「sample.js」が生成されます。

● 同じことはオンラインでできます。

・TS playground
https://www.typescriptlang.org/play

・StackBlitz
https://stackblitz.com/

No.2183
07/07 10:10

edit

vanilla javascriptのDateTimeFormat で DBフォーマットで日付を取得する

● vanilla javascript の DateTimeFormat で DBフォーマットで日付を取得する

console.log(new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })) // 2023/10/15 10:43:15
console.log(new Date().toLocaleString("ja-JP", { timeZone: "UTC" })) // 2023/10/15 1:43:15

● vanilla javascriptのDateTimeFormat で日付をフォーマットする

console.log(new Intl.DateTimeFormat("ja-JP", { dateStyle: "full", timeStyle: "short", }).format(new Date()))
// 2023年10月15日金曜日 10:44

● 2023_12_01 形式で日付をフォーマットする

const options: Intl.DateTimeFormatOptions = {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
}
const formattedDate = new Intl.DateTimeFormat("ja-JP", options)
  .format(new Date())
  .replace(/\//g, "_")
console.log(formattedDate); // 2023_12_01
No.2180
12/01 09:31

edit

浮動小数点で誤差が出る計算式

console.log((0.1 + 0.2) + 0.3);
// 結果 : 0.6000000000000001

ちなみにこの場合は正しい結果が得られます

console.log(0.1 + (0.2 + 0.3));
// 結果 : 0.6
console.log(0.3 + 0.6)
// 結果 : 0.8999999999999999
console.log(0.1 + 0.1 + 0.1)
// 結果 : 0.30000000000000004
let valueA = 0
const add = 0.1
for (let i = 1; i <= 10; i++) {
  valueA += add
}
console.log(valueA)
結果 : 0.9999999999999999
No.2173
05/25 13:41

edit

一度だけイベントを登録する

一度だけイベントを登録する

element.addEventListener('click', myClickHandler, {
  once: true,
  passive: true,
  capture: true
});
  once: true,

を指定すると一度だけ実行されます。

引用 : https://qiita.com/kozy4324/items/85831e2c990d92b8397b

No.2172
05/18 16:35

edit

JavaScriptでブラウザの戻るボタンまたはリロードボタンで画面遷移してきたことを判定する

● JavaScriptでブラウザの戻るボタンまたはリロードボタンで画面遷移してきたことを判定する

function isBrowserBackOrReload() {
    // 1: 再読み込み  2: 戻るボタン
    if (window.performance.navigation.type === 1 || window.performance.navigation.type === 2 ) {
        return true;
    }
    return false;
}

● 使い方

if ( isBrowserBackOrReload() ){
  alert('戻るボタンで戻ってき場合は何もしません');
}
else {
  // 何かしらの処理
}
No.2171
05/09 11:45

edit

JavaScriptで Date型 の判別

console.log( Object.prototype.toString.call(undefined) );				// object undefined
console.log( Object.prototype.toString.call(null) );					// object Null
console.log( Object.prototype.toString.call(123456) );					// object Number
console.log( Object.prototype.toString.call(Infinity) );				// object Number
console.log( Object.prototype.toString.call(NaN) );						// object Number
console.log( Object.prototype.toString.call('hoge') );					// object String
console.log( Object.prototype.toString.call(true) );					// object Boolean
console.log( Object.prototype.toString.call([]) );						// object Array
console.log( Object.prototype.toString.call({aaa:'bbb'}) );				// object Objec
console.log( Object.prototype.toString.call(new Date()) );				// object Date
console.log( Object.prototype.toString.call(new Map()) );				// object Map
console.log( Object.prototype.toString.call(new Set()) );				// object Set
console.log( Object.prototype.toString.call(function() {}) );			// object Function
console.log( Object.prototype.toString.call(new String('hogehoge')) );	// object String
console.log( Object.prototype.toString.call(new Number(123456)) );		// object Number
console.log( Object.prototype.toString.call(new Boolean(true)) );		// object Boolean
console.log( Object.prototype.toString.call(Math) );					// object Math
console.log( Object.prototype.toString.call(JSON) );					// object JSON

引用 : shorturl.at/uT013

No.2148
01/29 23:30

edit

JavaScriptの日付Dateオブジェクトを比較する

● JavaScriptの日付Dateオブジェクトを比較する

JavaScriptのDateオブジェクトはそのまま比較することができません

次のように getTime() メソッドを使って数値として比較します

const dt1 = new Date('2020-01-01');
const dt2 = new Date('2020-01-01');

console.log(dt1 === dt2);    // ● 1. false になります。NG ×
console.log(dt1.getTime() === dt2.getTime());        // ● 2. true になります。OK!

valueOf() も同じです。

No.2145
01/21 09:52

edit

Javascriptで「1. 日付が正しいか?」「2. 実際に存在する日付かどうか」をチェックする

● Javascriptで「1. 日付が正しいか?」「2. 実際に存在する日付かどうか」をチェックする

2021/04/31 などの存在しない日付の場合も false を返します。

/**
 * 渡された文字列の「1.日付が正しいか?」「2.実際に存在する日付かどうか」をチェックする
 *
 * @param   string      date_str        (例:2021/01/15)(例:2021-01-15)
 */

function is_date_valid( date_str )
{
    const date_obj = new Date(date_str);

    // 日付が Invalid Date の場合は false
    if ( dateFns.isValid(new Date(date_str)) === false ){
        alert(`日付 ${date_str} が正しくありません`);
        return false;
    }

    if ( date_str.match(/[0-9]{4}\/[0-9]{2}\/[0-9]{2}/) ){
        var ar = date_str.split('/');
    }
    else if ( date_str.match(/[0-9]{4}\-[0-9]{2}\-[0-9]{2}/) ){
        var ar = date_str.split('-');
    }

    var year = ar[0];
    var month = ar[1];
    var day = ar[2];

    var check_month = date_obj.getMonth() + 1;

    console.log( '● year/month/day ● check_month' );
    console.log( `${year}/${month}/${day}  : ${check_month}` );

    if ( parseInt(month) !== parseInt(check_month) ){
        alert(`日付 ${date_str} は存在しません`);
        return false;
    }

    return true;
}
No.2105
11/30 09:53

edit

JavaScriptで オブジェクトの配列(コレクション)から 重複する 項目を削除する

● JavaScriptで オブジェクトの配列(コレクション)から 重複する 項目を削除する

tag_name が重複するものを配列から取り除きます


const tag_array = [
  {
    id: 1,
    tag_name: 'ほげほげ'
  },
  {
    id: 2,
    tag_name: 'ふがふが'
  },
  {
    id: 3,
    tag_name: 'ほげほげ'
  },
]

const unique_tag_array = tag_array.reduce((a, v) => {
  if (!a.some((e) => e.tag_name === v.tag_name)) {
    a.push(v);
  }
  return a;
}, []);

console.log( '● tag_array' );
console.log( tag_array );

console.log('● unique_tag_array');
console.log(unique_tag_array);
No.2101
11/18 11:27

edit

Cookie の Secure属性 / HttpOnly 属性

HTTP Cookie の使用 - HTTP | MDN

Cookie へのアクセス制限 クッキーが安全に送信され、意図しない第三者やスクリプトからアクセスされないようにするには、 Secure 属性と HttpOnly 属性の2つの方法があります。

● Set-Cookieの書式例

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
path=/; domain=.numd.me; secure; samesite=strict

● SameSite属性

引用 : https://bit.ly/3p0thOl

SameSiteの値 意味
Strict
  • 他のドメインへのリクエストを送る際、Strict が指定されたクッキーはセットされません。
  • 例えば、Aサイトでログイン中だった場合に、Bサイト上に用意されたAサイトへのリンクをクリックした場合、Aサイトにクッキーが送られませんので、Aサイトに対して未ログイン状態の扱いでページの遷移が行われます。当然、この動作は不便な面もあります。
  • Lax よりセキュリティが高いので、銀行サイトなどでは有効な値です。
Lax
(デフォルト。指定がない場合は lax となる)
  • top-level navigation(*1) で、且つ GETメソッドであれば、他のドメインへのリクエストであってもクッキーをセットします。
  • 例えば、Aサイトでログイン中だった場合に、Bサイト上に用意されたAサイトへのリンクをクリックした場合、ログイン状態でページの遷移が行われます。
  • POSTメソッドを使ったフォーム、imgタグ、iframe、XMLHttpRequests などによる他ドメインへのリクエストにはクッキーはセットされません。
  • Strict より条件が緩い(lax)です。
  • 通常は、こちらを使うことになるでしょう。
None
  • 従来どおりの動作(クッキーを送る)

● Secure 属性

Secure 属性がついたクッキーは HTTPS プロトコル上の暗号化されたリクエストでのみサーバーに送信され、安全でない HTTP では決して送信されないため、中間者攻撃者が簡単にアクセスすることはできません。(URL に http: を含む) 安全でないサイトは、 Secure 属性を使用してクッキーを設定することができません。ただし、Secure によってクッキー内の機密情報へのアクセスをすべて防げると思ってはいけません。例えば、クライアントのハードディスクへアクセスすることで読み取られる可能性があります。

● HttpOnly 属性

HttpOnly 属性を持つクッキーは、JavaScript の Document.cookie API にはアクセスできません。サーバーに送信されるだけです。例えば、サーバー側のセッションを持続させるクッキーは JavaScript が利用する必要はないので、 HttpOnly 属性をつけるべきです。この予防策は、クロスサイトスクリプティング (XSS) 攻撃を緩和するのに役立ちます。
No.2076
10/15 10:00

edit

JavaScript オブジェクトから FormDataへの変換。FormDataの中身を表示する

● JavaScript オブジェクトから FormDataへの変換。FormDataの中身を表示する

const formData = new FormData();
for (var key in data) {
    formData.append(key, data[key]);
}

● FormDataの中身を表示する

console.log('● data');
console.log(data);

console.log('● formData');
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]);
}
No.2069
10/12 11:36

edit

無名関数とアロー式

● 無名関数からアロー式への変化

let getTriangle = function(base, height){
 return base * height / 2;
};

   ↓  => 記法で記述します

let getTriangle = (base, height) => {
  return base * height / 2;
};

   ↓  1行にして一番最後のセミコロンを省略します

let getTriangle = (base, height) => { return base * height / 2; }

   ↓  return と {} を省略します

let getTriangle = (base, height) => base * height / 2

引用 : https://bit.ly/3l6CBOe

注意 「return と {} を省略」の時に return だけ省略すると 結果は undefined になります。

let getTriangle3 = (base, height) => { base * height / 2; }
console.log('三角形の面積は' + getTriangle3(3,4));

↓ 結果

三角形の面積はundefined
No.2059
10/05 10:29

edit

Promise の then() / catch() / finally() と async await

● Promiseを返す関数の例

  function myPromiseFunc() {
    return new Promise((resolve, reject) => {
      var min = 1;
      var max = 10;
      var result = Math.floor(Math.random() * (max + 1 - min)) + min;
      console.log(result);
      if (result === 1) {
        resolve('Success!')
      }
      else {
        reject("失敗です")
      }
    })
  }

  // 実行
  myPromiseFunc().then((result) => {
    console.log(result)   // 文字列 Success! が返る
  }).catch((error) => {
    console.log(error)    // 文字列 失敗です が返る
  })

● Promise / them() と async await

・ 1. Promiseの状態

pending: 初期状態、実行中。成功も失敗もしていない
fulfilled: 処理が完了した状態。then メソッドを呼び出す
rejected: 処理が失敗した状態。then メソッドと catch メソッドを呼び出す。

Promiseのコンストラクタ
Promiseのコンストラクタは、2つの関数(resolve, reject)を引数に取ります。

・1番目の関数(resolve)に引数を渡して実行すると状態がfulfilledになり、引数の値がPromiseオブジェクトが保持する値になる
・2番目の関数(reject)に引数を渡して実行すると状態がrejectedになり、引数の値がPromiseオブジェクトが保持する値になる
・関数が例外を投げた場合も状態がrejectedになり、投げた値がPromiseオブジェクトが保持する値になる

引用 : https://bit.ly/3TxbKst

・2. Promise の then() / catch() / finally() とは何か?

then()  は、 Promise のインスタンスの状態が fulfilled となったときに実行する関数を登録できるインスタンスメソッドです。
catch()  とは、 Promise のインスタンスの状態が rejected となったときに実行する関数を登録するインスタンスメソッドです。
finally() は、処理が成功しても失敗してもいずれの場合でも最後実行される関数を登録するインスタンスメソッドです。

then() は、以下のように定義されています。

Promise.prototype.then(onFulfilled, onRejected)
onFulfilled : fulfilled の状態のとき(resolve が呼ばれたとき)に実行される関数
onRejected : rejected の状態のとき(reject が呼ばれたとき)に実行される関数

catch() は、以下のように定義されています。

Promise.prototype.catch(onRejected)
onRejected : rejected の状態のとき(reject が呼ばれたとき)に実行される関数

使い方としては今まで try / catch を使っていたような場面で、かわりに await/catch を使います。 https://qiita.com/akameco/items/cc73afcdb5ac5d0774bc

finally() はES2018(ES9) から登場しました

finally() は処理が成功しても失敗してもいずれの場合でも最後実行される関数

● then(f,f) と then(f).catch(f) の違いは何か?

then の最初の関数(fullfilled)で)でエラーを発生させた時に .catch があるとそれを捕捉できる。
import axios from "axios";
axios("/list.json")
  .then(response => {
    const list = response.data;
    if (list.length === 0) {
      return Promise.reject(new Error("Empty list!"));
    }
    return list;
  })
  .catch((err) => {
    console.log(err.name + ': ' + err.message)
  });

実行結果

Error: Empty list! 

https://bit.ly/3D2FeXm

● async とは何か?

非同期関数を定義する関数定義です。
async function で非同期関数を定義できます。
async function は Promise インスタンスを返却します。

async による関数の定義

async function MyFunc() {
  return 'HOGEHOGE';
}

定義した非同期関数の実行

MyFunc()
    .then(value => console.log(value));

● setTimeout を await で使う

function waitSleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
}

5秒待つ

await waitSleep(5000)

1行で書くなら

await new Promise(resolve => setTimeout(resolve, 5000)) // 5秒待つ

ealush/wait

https://github.com/ealush/wait

Timers Promises API が最高

https://www.pandanoir.info/entry/2021/04/21/234305

● よくあるエラー(Unexpected reserved word 'await'.)

・async ではない関数内で await している
・Promise を返さないものを await している。

をチェックしましょう

● thenとawaitは両方併用可能

    console.log( '● start' );
    
    await myfuncAsync().then((result) => {
      console.log( result );
    })

    console.log( '● end' );

● async関数内で reject をしたいときは

Promise.reject を使用します

async function foo() {
    await wait(1000);
    return Promise.reject(new Error('Whoops!'));
}

● Javascriptエンジンについて

Node.js / Deno / Google Chrome 内で使われているのは V8
Firefoxで使われているのは SpiderMonkey
Safariで使われているのは JavaScriptCore

です。 JavaScriptエンジンによる違いも認識しておくとさらに良いでしょう

● Promise内で resolve の代わりに return すると何もせずに終了します。

function fooBarAsync(){
  return new Promise((resolve) =>
    'fooBar'
  );  
}

async function example() {
  console.log('example() function start');
  const result = await fooBarAsync(); // 永遠に待ち続ける
  console.log( ['● result',result] );

  console.log('This line will never be reached');
  console.log('example() function end');
}


console.log('・script start.')
example();
console.log('・script end.')

結果

node test.js 
・script start.
example() function start
・script end.
No.2053
08/28 12:07

edit

moment.js の 次 date-fns 使用 を使用する

● moment.js の 次 date-fns 使用 を使用する

cdnで使用する

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js" integrity="sha512-F+u8eWHrfY8Xw9BLzZ8rG/0wIvs0y+JyRJrXjp3VjtFPylAEEGwKbua5Ip/oiVhaTDaDs4eU2Xtsxjs/9ag2bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

dateFns が作成されるので、これを利用します。

console.log( dateFns.isToday(new Date()) );
console.log( dateFns.format(new Date(2017, 6, 6), 'MM/DD/YYYY') );

dateFns.format メソッドで使用できるパラメーター

https://date-fns.org/v2.22.1/docs/format

● Dateオブジェクトとの比較

console.log(d);    // Wed Mar 09 2022 02:45:54 GMT+0000 (Coordinated Universal Time)

console.log(d.toLocaleString('ja-JP'));    // 2022/3/9 2:45:54

console.log(d.toLocaleString("ja-JP", {timeZone: "Asia/Tokyo"}));    // 2022/3/9 11:45:54
No.2048
03/09 12:59

edit

ContentEditable で エンターキーを無効にする

● ContentEditable で エンターキーを無効にする

$("[contentEditable]").keypress(function(e){
	if ( e.which == 13 ){
		alert('enter');
		return false;
	}
	return true;
});
No.2011
06/18 22:25

edit

fullcalendar で 次の月 / 前の月 クリック時にイベントを追加する

● fullcalendar で 次の月 / 前の月 クリック時にイベントを追加する

var calendar;
calendar = new FullCalendar.Calendar(calendarEl, {
    ........
});

関数を追加

$(document).ready(function(){

  // console.log( '● calendar' );
  // console.log( calendar );

  // calendar#2021-06 の形式の場合は移動させる
  var moveTo = new String(location.hash);
  if ( moveTo != '' ){
    moveTo = moveTo.replace(/^#/, '');
    console.log( 'カレンダーを移動します:' + moveTo );
    calendar.gotoDate( moveTo );
  }

  // 「前へ」「次へ」を押した時に URLを書き換える
  $('body').on('click', function (e) {
    var jq_obj = $(e.target);
    if (jq_obj.hasClass('fc-prev-button') || jq_obj.hasClass('fc-next-button') ){
      var m = moment( calendar.getDate() );
      console.log( '● m' );
      console.log( m.format('YYYY-MM') );
      var url = location.href;
      url = url.replace(/#(.+)$/,'');
      history.pushState('', '', url+'#'+m.format('YYYY-MM'));
    }
  });

});
No.1991
04/30 18:10

edit

JavaScriptでカーソル位置に指定したテキストを挿入する

● カーソル位置に指定したテキストを挿入する

function insertHtmlAtSelectionEnd(html, isBefore) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);

            // Range.createContextualFragment() would be useful here but was
            // until recently non-standard and not supported in all browsers
            // (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(isBefore);
        range.pasteHTML(html);
    }
}

引用 : https://bit.ly/3eebMTB

No.1987
04/19 11:43

edit

No.1944
01/18 09:44

edit

javascript 現在のウィンドウ アクティブかどうか(ユーザーが見ているかどうか)を調べる

● javascript 現在のウィンドウ アクティブかどうか(ユーザーが見ているかどうか)を調べる

 document.addEventListener("visibilitychange", onchange);

https://mzl.la/2LuXWSh

No.1931
12/11 17:46

edit

JavaScriptでIPアドレス情報を取得

● JavaScriptでIPアドレス情報を取得

fetch('https://ipinfo.io?callback')
  .then(res => res.json())
  .then(json => console.log(json.ip))

引用 : https://bit.ly/2VXpoK8

No.1928
12/09 20:58

edit

Javascript でオブジェクトの for

● Javascript でオブジェクトの foreach

こちらの方が若干早いようです

Object.keys(model).forEach(function (k) {
  console.log( '● key => value' );
  console.log( k + ' : ' +data[k] );
});

● Javascript でオブジェクトの foreach

こちらは少し遅くなります

for (const k of Object.keys(data) ) {
  console.log( '● key => value' );
  console.log( k + ' : ' +data[k] );
}
No.1920
12/16 16:42

edit

input type="text" の 候補リストを JavaScript で動的に変更する

● input type="text" の 候補リストを JavaScript で動的に変更する

html

	<input type="" name="" list="my_datalist">
	<datalist id="my_datalist">
		<option value="aaa" label="テスト項目A"></option>
		<option value="bbb" label="テスト項目B"></option>
		<option value="ccc" label="テスト項目C"></option>
	</datalist>

javascript

    var dataList = document.getElementById('my_datalist');
    var jsonOptions = [
    	{
	        "value" : "123",
	        "label" : "テキスト1"
	    } ,
	    {
	        "value" : "456",
	        "label" : "テキスト2"
	    }
	];

    json_to_datalist( dataList , jsonOptions) ;

    function json_to_datalist( datalist_dom_obj , json) {
        if ( ! json ){ return; }
        json.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item.value;
            if( option.label ){ option.label = item.label; }

            datalist_dom_obj.appendChild(option);
        });
    }

No.1878
10/10 15:53

edit

javascriptでオブジェクト メンバ変数やプロパティの存在をチェックする

● javascriptでオブジェクト メンバ変数やプロパティの存在をチェックする

var obj = {
  id: 1,
  name: 'hoge'
};
if ( 'name' in obj ) {
    // メンバ変数「name」は存在しています
}
No.1870
02/06 12:56

edit

Javascript で moment.js を使って2つの日付の差を求める

● Javascript で moment.js を使って2つの日付の差を求める

var m1 = moment('2012/10/20 15:30:50');
var m2 = moment('2011/09/20 15:30:50');
 
m1.diff(m2); // 34214400000
m1.diff(m2, 'years'); // 1
m1.diff(m2, 'months'); // 13
m1.diff(m2, 'weeks'); // 57
m1.diff(m2, 'days'); // 396
m1.diff(m2, 'hours'); // 9504
m1.diff(m2, 'minutes'); // 570240
m1.diff(m2, 'seconds'); // 34214400

引用 : https://bit.ly/3lV5tau

alert( date.format("YYYY-MM-DD hh:mm:ss")  );
No.1853
02/18 21:33

edit

JavaScript で正しく小数点計算を行う

● JavaScript で正しく小数点計算を行う

浮動小数点では正しく小数点計算ができないのでライブラリを利用します。以下の3択で容量の小さい順に

  • big.js
  • bignumber.js
  • decimal.js
  • decimal.js-light (decimal.jsの軽量版)

です。 作者は同じなので使い方はどれも同じです。

decimal.js-light を使ってみましょう。

1. decimal.min.js を読み込む

<script src="https://cdn.jsdelivr.net/npm/decimal.js-light@2.5.1/decimal.min.js"></script>

2. 小数点計算を行う

var total = new Decimal( 1.5749 );
var d = new Decimal( 2.75 );

console.log( total.plus(d) );
console.log( total.minus(d) );
console.log( total.times(5) );

などなど、

3. メソッド一覧

absoluteValue
comparedTo
decimalPlaces
dividedBy
dividedToIntegerBy
equals
exponent
greaterThan
greaterThanOrEqualTo
isInteger
isNegative
isPositive
isZero
lessThan
lessThanOrEqualTo
logarithm
minus
modulo
naturalExponential
naturalLogarithm
negated
plus
precision
squareRoot
times
toDecimalPlaces
toExponential
toFixed
toInteger
toJSON
toNumber
toPower
toPrecision
toSignificantDigits
toString
valueOf

http://mikemcl.github.io/decimal.js-light/

No.1808
11/17 16:54

edit

JavaScriptのHTMLCollection を ループさせる

● JavaScriptのHTMLCollection を ループさせる

クラス名 "my_loop" 要素をループさせます

        var my_loop = document.getElementsByClassName("myclass");

        for (var i = 0; i < my_loop.length; i++) {
            var v = my_loop[i];
            console.log(v);
        }
No.1785
06/12 16:56

edit

WEBサイトに自由にショートカットキーを設定できる mousetrap

● WEBサイトに自由にショートカットキーを設定できる mousetrap

https://github.com/ccampbell/mousetrap

● mousetrap設定方法

<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>
// esc を押したとき
Mousetrap.bind('esc', function() { alert('escape'); }, 'keyup');

// ctrl + pを押したとき
Mousetrap.bind('ctrl+p', function () {
    alert('ctrl + p を押しました!');
    return false;
});

// command + p を押した時
Mousetrap.bind('command+p', function () {
    alert('command + p を押しました!');
    return false;
});

return false でデフォルトの動作を kill しています。

● デフォルトでは1行テキストなどのフォーム部品にフォーカスがあたっているときはショートカットが有効になりません

クラス mousetrap をつけます

<input type="text" class="mousetrap" >
No.1771
06/05 17:09

edit

Web Font Loader で webフォントを遅延ロードする

https://github.com/typekit/webfontloader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>
No.1762
05/24 22:49

edit

送信ボタンをボタン連打や二重送信を防止しつつ「送信中」を表示する

● 送信ボタンクリック時にボタン連打や二重送信を防止しつつ「送信中」を表示する

● html

classnotrepeat を追加

<button type="submit" class="notrepeat">データ送信</button>

任意のテキストとアイコンをセットすることもできます。

<button type="submit" class="notrepeat" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中ですしばらくお待ちください。 ...">データ送信</button>

● js

以下の js を読み込ませる

jquery.notrepeat.js

$(function() {
  $('.notrepeat').each(function(index, element){    
    $(this).on( 'click', function () {
      alert('x');
        if ( $(this).data('loading-text') ){
            $(this).html( $(this).data('loading-text') );
        }
        else {
            $(this).html("<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中 ... ");
        }
        var jq_obj = $(this);
        setTimeout( function() {
            jq_obj.attr('disabled', true);
        }, 1, jq_obj );
    });
  });
});

lodash を使用する方法もあります。 https://qiita.com/gizumon/items/8288142ecd7c57e05dae

No.1681
06/28 10:00

edit

Angular8 の インストールと Hello World

● Angular8 の インストールと Hello World

● yarn のインストール

brew install yarn
brew upgrade yarn
yarn -v

● angular のインストール

yarn global add @angular/cli

● angular のプロジェクトを作成する

cd <任意のディレクトリ>
ng new test-angular-app

● angular のテストアプリを起動する

cd test-angular-app
ng serve

http://localhost:4200/
にアクセスします。

● Hello World と Angular のバージョン表示

app.component.scss

.version {
  th,td {
    border: solid #999 1px;
  }
}

app.component.ts

import { Component } from '@angular/core';
import { VERSION } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component2.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public versionInfo = VERSION;
  title = 'タイトルテスト Hello! Angular';
  desc = '説明文です';
}

app.component2.html

<h1>{{ title }}</h1>
<div>{{ desc }}</div>

Angularバージョン
  <table class="version">
    <tr>
      <th>full</th>
      <th>major</th>
      <th>minor</th>
      <th>patch</th>
    </tr>
    <tr>
      <td>{{versionInfo.full}}</td>
      <td>{{versionInfo.major}}</td>
      <td>{{versionInfo.minor}}</td>
      <td>{{versionInfo.patch}}</td>
    </tr>
  </table>

でバージョンが表示されます。

No.1645
12/25 17:16

edit

IE11でも使用可能な Promise

● IE11でも使用可能な Promise

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
    var promise = new Promise(function(resolve){
        setTimeout( function() {
            console.log('HELLO !!!');
            resolve();
        }, 500 );
    });

    // アロー関数は動作しません。 無名ファンクションで置き換えましょう
    // promise.then((result) => {
    //     console.log('PROMISE');
    // })

    promise.then( function(){
        console.log('PROMISE');
    });

● メソッドを Promise 対応にする

function my_func1()
{
    return new Promise(function(resolve){
        setTimeout( function() {
            console.log('(my_func1)hello !');        
            resolve();
        }, 1500 );
    });
}

function my_func2()
{
    return new Promise(function(resolve){
        console.log('(my_func2)promise world!');
        resolve();
    });
}

呼び出し方

my_func1().then( my_func2 );

呼び出し方( my_func2 に 引数を使う場合)

my_func1().then(function(){
    return my_func2( arg1, arg2 );
});

呼び出し方(無名関数を使う場合)

my_func1().then(function(){
        return new Promise(function(resolve){
            console.log('メッセージ');
            resolve();
    });
});
No.1601
10/15 13:38

edit

JavaScript で フォームに入力可能な文字を限定する

● JavaScript で フォームに入力可能な文字を限定する

・ バリデーションではなくそもそもフォームに限定したキーしか入力 できないようにします

<input type="text" class="numAndDot">

● jQuery 使用

    $(".numAndDot").keypress(function(key){
        if(key.charCode == 46 ){ return true; }
        if(key.charCode < 48 || key.charCode > 57) { return false; }
    });
No.1585
09/06 14:36

edit

No.1584
09/27 16:46

edit

canvas に描画した画像をファイルとしてダウンロードさせる

● canvas に描画した画像をファイルとしてダウンロードさせる

canvas.toDataURL を使わないので、Google Chromeで2MB以上の画像ファイルもダウンロードできます。

/**
 * <canvas id="canvas_download"></canvas> の画像を画像ファイルとしてダウンロードさせます
 *
 * @param   string      canvas_id_name          ダウンロードさせるのキャンバスのID
 * @param   string      download_file_name      ファイル名
 *
 */
function CanvasDataDownload( canvas_id_name, download_file_name ) {
    var canvas = document.getElementById( canvas_id_name );
    var type = 'image/png';
    var dataurl = canvas.toDataURL(type);
    var bin = atob(dataurl.split(',')[1]);
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
    }
    var blob = new Blob([buffer.buffer], {type: type});

    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = download_file_name;
    link.click();
}
No.1581
09/03 13:41

edit

HTML5 Canvas を操作するJavascript ライブラリ

● pixi.js Github STAR = ★26,036

https://github.com/pixijs/pixi.js canvasを使ったアニメーションが得意

● konva Github STAR = ★3,962

https://github.com/konvajs/konva

canvasをシンプルに扱えるライブラリ。

例えば画像を扱うにはこちらのメソッドを使用します。
https://konvajs.org/api/Konva.Image.html

No.1563
08/02 08:49

edit

HTML5 Canvas の toblob を全てのブラウザで使用する

● blueimp/JavaScript-Canvas-to-Blob

https://github.com/blueimp/JavaScript-Canvas-to-Blob

var canvas = document.createElement('canvas')
/* ... your canvas manipulations ... */
if (canvas.toBlob) {
  canvas.toBlob(function(blob) {
    // Do something with the blob object,
    // e.g. creating a multipart form for file uploads:
    var formData = new FormData()
    formData.append('file', blob, fileName)
    /* ... */
  }, 'image/jpeg')
}
No.1561
07/25 16:57

edit

Javascript で ある値を配列から削除する

● Javascript で ある値を配列から削除する (underscore.js を使う例)

myArray から 5 を削除した配列のリストを返します

var myArray = [1,2,3,4,5,6,7];
var del_no = 5;
myArray = _.without(myArray, del_no);

● Javascript で ある値を配列から削除する (jQuery を使う例)

myArray から 5 を削除した配列のリストを返します

var myArray = [1,2,3,4,5,6,7];
var del_no = 5;
var idx = $.inArray(del_no, myArray);
if(idx >= 0){
	myArray.splice(idx, 1); 
}
No.1557
07/19 16:37

edit

Javascript で スマホのフリック操作を制御する

● flipsnap.js

(The MIT License) http://hokaccha.github.io/js-flipsnap/demo.html

● Swiper

The MIT License (MIT) http://idangero.us/swiper/demos/

● Flickity

シェアウェア(有償) https://flickity.metafizzy.co/

No.1527
06/07 17:46

edit

Summernote で コピペするときに プレーンテキストでペーストする

● Summernote で コピペするときに プレーンテキストでペーストする

https://github.com/DiemenDesign/summernote-cleaner

● インストール方法

1.

ダウンロードして、解答した中のファイル「summernote-cleaner.js」をsummernote.js が存在するディレクトリと同じディレクトリにコピーする

2.

<script src="/summernote/summernote-cleaner.js"></script>
No.1510
05/14 13:25

edit

JavaScriptの便利なライブラリ

● 画像ギャラリー , 画像ビューワー , 画像拡大

https://photoswipe.com/

https://fancyapps.com/fancybox/3/
商用利用は有料($29)です。

● スクロールすると表示やアニメーション

lax.js

https://github.com/alexfoxy/lax.js?ref=producthunt

scrollreveal (商用は有料)

https://github.com/jlmakes/scrollreveal

● カレンダー

https://fullcalendar.io/

● エクセルのような表

https://handsontable.com/

● moment

https://github.com/moment/moment
日付・時刻・時間計算

● Mikhus/domurl ( url.min.js )

https://github.com/Mikhus/domurl
URL

● Underscore.js

https://underscorejs.org/
便利関数集

● HTMLリストを検索、ソートする ( list.js )

https://listjs.com/ すでにあるテーブルを検索、ソートしたい時に便利です。

● グラフ、チャート

APEXCHARTS
https://apexcharts.com/javascript-chart-demos/column-charts/

Chartjs
https://www.chartjs.org/

● 画面上部に通知を出す

https://github.com/jaredreich/notie

● 高機能ドロップダウンリスト

Select2

https://select2.org/

Select2 Tips

https://bit.ly/39ZMPuN

select2-dependent-cascading-select-list

http://ajaxray.com/blog/select2-dependent-cascading-select-list-reload/

Selectize ( jQuery )

https://github.com/selectize/selectize.js
タグ入力もできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js" crossorigin="anonymous"></script>
<script>$('#myselect').selectize();</script>

ui5-webcomponents

https://sap.github.io/ui5-webcomponents/playground/components/ComboBox/

Selectize ( Vue.js )

https://github.com/isneezy/vue-selectize

● 画像に注釈をつける marker.js

https://github.com/ailon/markerjs

● HOWLER.js

https://howlerjs.com/
オーディオ操作

● Socket.IO

https://socket.io/
ソケット

● jPList

https://www.jplist.org/
ソート、ページネーション、フィルタリング

● lightgallery.js

https://sachinchoolur.github.io/lightgallery.js/
画像ギャラリー

● JavaScriptでグラフを書くならこれ

https://apexcharts.com/

● ダイアログ(リサイズ、ドラッグ、スナップ、など)

https://interactjs.io/
https://daybrush.com/moveable/
https://www.cssscript.com/resizable-draggable-dialog/
https://jspanel.de/index.html

● 画像拡大

https://imgix.github.io/luminous/

# ● 画像スライダー https://haniwaman.com/swiper/#i-9

● JavaScript ライブラリ検索サイト

http://searchlibs.com/
http://microjs.com/

● ES Module 検索

https://www.pika.dev/

● jQuery ライブラリ検索サイト

https://www.jqueryscript.net/

No.1505
03/07 10:06

edit

JavaScriptでWEBサイトからのプッシュ通知を行う

● JavaScriptでWEBサイトからのプッシュ通知を行う(Edge, Chrome, Safari, Firefox)

function start_notification() {
    if ( ! window.Notification) { return false; }
    if (window.Notification.permission === 'denied' || window.Notification.permission === 'default' ) {
        window.Notification.requestPermission().then(function() {
            exec_notification();
        });
    } else {
        exec_notification();
    }
}

function exec_notification() {
    var notifyTitle = '通知タイトル通知タイトル通知タイトル通知タイトル通'; 		// 25文字まで表示される
    var notifyBody  = '通知内容のテストです通知内容のテストです通知内容のテス';	// 27文字まで表示される

    var options = {
        'body': notifyBody,
        // icon: notifyIcon
    }
    var n = new Notification(notifyTitle, options);
    setTimeout(n.close.bind(n), 5000);
}

start_notification();

● デモ

デモはこちら

● IE に対応するには

https://github.com/ttsvetko/HTML5-Desktop-Notifications

No.1417
01/16 15:42

edit

javascriptでファイル名から拡張子を取り除く

● javascriptでファイル名から拡張子を取り除く

function baseName(str)
{
   var base = new String(str).substring(str.lastIndexOf('/') + 1); 
    if(base.lastIndexOf(".") != -1)       
        base = base.substring(0, base.lastIndexOf("."));
   return base;
}

● 使い方

var filename = 'my-picture.jpg';
var basename = baseName( filename );
alert( basename );

結果

my-picture
No.1410
01/08 15:01

edit

JavaScript で実現する WYSIWYGエディタ

無料のwysiwygエディタ

● blocknote

https://www.blocknotejs.org/

● jodit

https://xdsoft.net/jodit/examples/intergration/angular-jodit.html

● quilljs

https://quilljs.com/

● msx editor

https://github.com/mdx-editor/editor

● Trix

ライセンス MIT
商用利用OK
https://github.com/basecamp/trix
https://trix-editor.org/

● Trumbowyg

ライセンス MIT
商用利用OK
プラグイン多数あり
エクセルからテーブルをコピペできます

https://github.com/Alex-D/Trumbowyg
デモ: https://alex-d.github.io/Trumbowyg/

● Summernote

ライセンス MIT
商用利用OK
Bootstrap , Bootswatch 対応
エクセルからテーブルをコピペできます
https://github.com/summernote/summernote/

サンプルはこちら https://github.com/summernote/summernote/blob/develop/examples/external-api.html
設定の参考 https://goo.gl/SnsVm9

プラグイン
https://eissasoubhi.github.io/summernote-bricks/
https://codepen.io/asiffermann/pen/EKvMMm
https://github.com/DiemenDesign/

テーマ https://github.com/DiemenDesign/summernote-themes

● SunEditor

https://github.com/JiHong88/SunEditor

スッキリした見た目のおすすめなエディタです。

Pasting from Microsoft Word and Excel.
Custom table selection, merge and split.
Media embeds, image uploads.
Can use CodeMirror.

● jodit

https://xdsoft.net/jodit/ ライセンス GNU GENERAL PUBLIC LICENSE Version 2,

● TOAST UI Editor

ライセンス MIT
商用利用OK
エクセルからテーブルをコピペできます
http://ui.toast.com/tui-editor

Markdown書式を自作できるようです
https://github.com/nhnent/tui.editor/blob/master/docs/writing-your-own-extension.md

● 有料のwysiwygエディタ

● CKEditor 4

ライセンス GPL or LGPL or MPL
商用利用有料
https://github.com/ckeditor/ckeditor-dev

● CKEditor 5

ライセンス GNU General Public License Version 2
商用利用有料
https://github.com/ckeditor/ckeditor5

● textbox

https://textbox.io/
ライセンス 非商用なら Creative Commons CC BY-NC-ND 4.0 license
商用利用有料

● imperavi Redactor

有料
デザインがGood
https://imperavi.com/redactor/

● stacks editor

https://editor.stackoverflow.design/
https://github.com/StackExchange/Stacks-Editor

添付ファイル1
No.1400
07/25 18:25

edit

添付ファイル

JavaScriptでスクロールして要素が画面内に入るとアニメーションする ScrollTrigger

● ScrollTrigger

https://github.com/terwanerik/ScrollTrigger
https://terwanerik.github.io/ScrollTrigger/

● 使い方

1. JavaScriptを読み込む

<script src="./ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger();
});
</script>

2. アニメーションさせたい要素に data-scroll をつける

<div>テスト</div>

 ↓

<div data-scroll>テスト</div>

これだけで、準備完了です。

・要素が画面内に入ってないときは class="invisible"
・要素が画面内に入ったときは class="visible"

が自動的につけられます。 クラス名を変更したい時は次のようにオプションを変更します

3-A. オプションを変更する( 個別に設定する場合 )

<div data-scroll="toggle(after, before)">テスト</div>

とすると、要素が出現した時に「.after」クラスがつけられます。

・要素が画面内に入ってないときは class="before"
・要素が画面内に入ったときは class="after"

3-B. オプションを変更する( まとめて設定する場合 )

document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger({
    toggle: {
      visible: 'cls-animate',
      hidden : 'cls-before_animate'
    },
    offset: {
      x: 0,
      y: 100
    },
    addHeight: true,
    once: true
  }, document.body, window);
});
オプション 説明
toggle 表示/非表示の時につける class 名 を好きなクラスに設定します
offset 何ピクセル手前で発火するかを指定します。
addHeight 要素が完全に表示された時に表示が発火します
once 1度だけアニメーションさせます

4. アニメーションcssクラスを探す

アニメーション用のcssクラスを探して気に入ったのをつけます

ライブラリ名 リンク
Motion CSS http://pavlyukpetr.com/awesome/
Animate.css https://daneden.github.io/animate.css/
Wicked Css Animation http://kristofferandreasen.github.io/wickedCSS/
cssanimation.io https://cssanimation.io/
mimic.css https://erictreacy.me/mimic.css/
Vivify http://vivify.mkcreative.cz/
Magic https://minimamente.com/example/magic_animations/
OBNOXIOUS.CSS http://tholman.com/obnoxious/
It's Tuesday. https://shakrmedia.github.io/tuesday/
EFFECKT.CSS https://h5bp.github.io/Effeckt.css/
CSShake https://elrumordelaluz.github.io/csshake/
Hover.css https://ianlunn.github.io/Hover/
imagehover.css http://www.imagehover.io/
animista http://animista.net/
WAIT! ANIMATE http://waitanimate.wstone.io/
No.1291
09/04 15:31

edit

JavaScriptでスムーズにするするとスクロールさせるやつ (jQuery非依存)

● smooth-scroll

https://github.com/cferdinandi/smooth-scroll

1. 「data-scroll」をリンクにつける

<a href="#">ページの先頭へ戻る</a>

  ↓

<a href="#" data-scroll>ページの先頭へ戻る</a>

2. JS コードを追加する

<script src="./assets/js/smooth-scroll.polyfills.min.js"></script>
<script>var scroll = new SmoothScroll('a[href*="#"]');</script>

以上です。 カスタマイズは公式サイトのドキュメントに詳しく記述があります。

No.1286
09/04 10:35

edit

javascriptで全てのチェックボックスにチェックをつける・外す

● javascriptで全てのチェックボックスにチェックを「つける」「外す」

・デモはこちら

https://pgmemo.tokyo/livedemo/all_checkbox_check/all_checkbox_check.html

javascript

function checkbox_all_check( _this, checkbox_name, form_name) {
	var check_flag = _this.checked;
	var form_dom;
	if ( form_name ){ form_dom = document[form_name]; }
	else{ form_dom = document.forms[0]; }

	if ( ! form_dom[checkbox_name] ){
		console.error( checkbox_name + ' という名前のチェックボックスが指定したフォーム内に存在しません' );
		return false;
	}

	for (var i = 0; i < form_dom[checkbox_name].length; i++) {
		form_dom[checkbox_name][i].checked = check_flag;
	}
}

html

<form name="FM" method="post">
		<label><input type="checkbox" id="data_all" onclick="checkbox_all_check(this, 'data_list[]','FM');">全てをチェック</label>
	<ul>
		<li><label><input type="checkbox" name="data_list[]" value="1"></label>データ1</li>
		<li><label><input type="checkbox" name="data_list[]" value="2"></label>データ2</li>
		<li><label><input type="checkbox" name="data_list[]" value="3"></label>データ3</li>
		<li><label><input type="checkbox" name="data_list[]" value="4"></label>データ4</li>
		<li><label><input type="checkbox" name="data_list[]" value="5"></label>データ5</li>
	</ul>
</form>

呼び出し方 1

checkbox_all_check(this, 'チェックボックスの name' ,);

例 :

checkbox_all_check(this, 'data_list[]');

呼び出し方 2 (フォームが複数ある場合)

checkbox_all_check(this, 'チェックボックスの name' ,'フォームのname' );

例 :

checkbox_all_check(this, 'data_list[]', 'FM');
No.1285
08/07 10:36

edit

フォーム

JavaScriptでオブジェクトの配列をランダムにシャッフルする

● オブジェクトの配列をランダムにシャッフルする

function obj_array_shuffle(list) {
	for (var i = list.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		if (i == j) continue;
		var k = list[i];
		list[i] = list[j];
		list[j] = k;
	}
	return list;
}
No.1255
06/20 11:15

edit

配列

JavaScriptで配列を参照渡しではなく実際にコピーする

JavaScriptで普通に配列をコピーすると配列を参照渡しでコピーされます。 つまり、コピーした配列に何らかの操作をするとコピー前の配列も影響を受けます。 そこで、JavaScriptで配列を参照渡しではなく実際にコピーしたい時は次のようにするといいでしょう。

引用元 : https://byuzensen.com/javascript-object-pass-by-value

● JavaScriptで配列を参照渡しではなく実際にコピーする

var new_array = old_array.concat();

オブジェクトの場合は次のようにすると良いようです

● JavaScriptでオブジェクト(連想配列)を参照渡しではなく実際にコピーする

var new_obj = JSON.parse(JSON.stringify(old_obj));
No.1254
06/20 11:09

edit

配列

Javascript の 命名規則(スタイルガイド)のケース(記法)について

JavaScript自体には厳格にに決まった命名規則は存在しないので各社独自の命名規則を設けています
その中でどの記法( PascalCase , camelCase , snake_case )が使用されているのかをざっくりまとめました

● Airbnb Javascript-style-guide

引用 : https://github.com/airbnb/javascript

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : キャメルケース
・exportされる定数 : すべて大文字
プライベートなプロパティ名は先頭にアンダースコア _ を使用してください。

● Felix's Node.js Style Guide

引用 : https://github.com/felixge/node-style-guide

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : すべて大文字

● Google

引用 : https://google.github.io/styleguide/javascriptguide.xml

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : すべて大文字
・private なプロパティ、メソッドには名前の末尾にアンダースコアをつけてください。
・protected なプロパティ、メソッドには(publicと同様に)末尾にアンダースコアをつけません。

だいたい基礎となる命名は同じですね。もっと細かく決められていますのでそれぞれのドキュメントをお読みください。

No.1245
06/13 15:05

edit

JavaScriptの array.map

● JavaScriptの array.map

var myArray = ['A', 'B', 'C', 'D', 'E'].map(function(element, index, array) {
	console.log(element, index, array);
	return element+'X';
});

console.log( myArray );

結果(ブラウザの console に次のように表示されます)

A,  0,  ["A", "B", "C", "D", "E"]
B,  1,  ["A", "B", "C", "D", "E"]
C,  2,  ["A", "B", "C", "D", "E"]
D,  3,  ["A", "B", "C", "D", "E"]
E,  4,  ["A", "B", "C", "D", "E"]
 ["AX", "BX", "CX", "DX", "EX"]
No.1213
04/27 14:28

edit

vue.js の ミニマルな形

デモはこちら

● v-if / v-else

<v-btn v-if="isPersistedUser" @click="showUpdate">更新する</v-btn>
<v-btn v-else                 @click="showCreate">追加する</v-btn>

● 変数の表示

<h1>※変数の表示</h1>
<div id="my_template">
<p>変数を出力します : {{ text }}</p>
</div>
<script>
new Vue({
  el  : '#my_template',
  data: {
    text: '日本語の文字です'
  }
});
</script>

● 選択

<h1>※選択</h1>
<div id="my_template_selected">
<select v-model="my_value_selected">
	<option value="">=== 選択してください ===</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
</div>
<script>
new Vue({
	el      : '#my_template_selected' ,
	data    : {
		my_value_selected: ''
	}
})
</script>

● データのループ

<h1>※データのループ</h1>
<div id="my_template2" v-if="view_flag">
<transition name="fade">
    <ul>
        <li v-for="(item, index) in my_loop">
            {{ index }} - {{ item }}
             <span v-if="index == my_loop.length - 1">last item</span>
        </li>
    </ul>
</transition>
</div>
<script>
new Vue({
  el: '#my_template2',
  data: {
    view_flag: true ,
    my_loop: [
      'ほげほげ',
      'フガフガ',
      'ほげふがほげふが'
    ]
  }
});
</script>

● 指定回数のループ

<h1>※指定回数のループ</h1>
<div id="my_template_loop" v-if="view_flag">
	<div v-for="n in 5" style="border:1px solid black;">
	    {{ n }}
	</div>
</div>
<script>
new Vue({
  el: '#my_template_loop',
  data: {
    view_flag: true ,
  }
});
</script>

● 表示のアニメーション

<h1>※表示のアニメーション</h1>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <h2 v-if="show">こんにちは! Vue.js</h2>
  </transition>
</div>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}
</style>
<script>
new Vue({
  el  : '#demo',
  data: {
    show: false
  }
})
</script>

● 選択による表示の切り替え(リストメニュー選択時に引数を渡す)

<h1>※選択による表示の切り替え(リストメニュー選択時に引数を渡す)</h1>
<div id="my_template_change">
	<select v-model="my_value_selected" v-on:change="my_method(my_value_selected)">
		<option value="">=== 選択してください ===</option>
		<option value="2">2個表示</option>
		<option value="1">1個表示</option>
		<option value="0">表示しない</option>
	</select>
	<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
    <div v-for="(item, index) in my_loop" style="border: 1px solid black;">
        {{ index+1 }} - {{ item }}
    </div>
</div>
<script>
var v = new Vue({
	el      : '#my_template_change' ,
	data    : {
		my_value_selected: '' ,
	    my_loop: [
	      '宛先01',
	      '宛先02',
	      '宛先03'
	    ]
	} ,
	methods:{
	    my_method: function (arg) {
	    	v.my_loop = [];
	    	for (var i = 0; i < arg; i++) {
				v.my_loop.push('HOGE'+arg)
	    	}
	    }

	}
})
</script>
添付ファイル1
vue.html ( 3.0 KBytes ) ダウンロード
No.1165
09/16 09:14

edit

添付ファイル

vue.js

iMacros for Google chrome で htmlからマクロを動作させる

● iMacros for Google chrome で htmlからマクロを動作させる

http://bit.ly/2nY6fYn

<html>
   <body onload="window.setTimeout('document.getElementById(\'criimlaunch\').click();', 1000);">
      <script>
         var macroCode = '';
         macroCode += 'PROMPT HELLO!\n';
         macroCode += 'URL GOTO=http://imacros.net/\n';
         macroCode += 'PROMPT BYE!\n';

         function launchMacro()
            {
            try
               {
                  if(!/^(?:chrome|https?|file)/.test(location))
                  {
                     alert('iMacros: Open webpage to run a macro.');
                     return;
                  }
			   
                  var macro = {}; 
                  macro.source = macroCode;
                  macro.name = 'EmbeddedMacro';
			   
                  var evt = document.createEvent('CustomEvent');
                  evt.initCustomEvent('iMacrosRunMacro', true, true, macro);
                  window.dispatchEvent(evt);
               }
            catch(e)
            {
               alert('iMacros Bookmarklet error: '+e.toString());
            };
         }
      </script>

      <a id="criimlaunch" href="javascript:launchMacro();">Launch CR iMacros</a>

   </body>
</html>
document.createEvent('CustomEvent');

でイベントを作成し発火させています。

https://developer.mozilla.org/ja/docs/Web/API/Document/createEvent

参考 : http://toolmania.info/post-8421/

No.1117
04/05 11:01

edit

iMacros

javascript 難読化する

オンラインでjavascript 難読化するには下記のようなサイトがあります。

● Javascript Obfuscator

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

● jjencode

http://utf-8.jp/public/jjencode.html

● aaencode

http://utf-8.jp/public/aaencode.html

● /packer/

http://dean.edwards.name/packer/

● JSFuck

http://www.jsfuck.com/

No.1116
04/04 17:46

edit

😊😊😊iPhoneの絵文字をWindowsで表示・入力する

● 【emoji表示ライブラリその1】jQueryEmoji による絵文字の表示

表示したい絵文字を、Aopple絵文字、Twitter絵文字、Microsoft絵文字から選択できます。
https://github.com/rodrigopolo/jqueryemoji
デモ : https://rodrigopolo.github.io/jqueryemoji/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jQueryEmoji.js"></script>
<link href="css/style.css" rel="stylesheet">
<script>
$(function(){
    $('p').Emoji({
        path:  '/emoji/jqueryemoji/img/apple72/',
        class: 'emoji',
        ext:   'png'
    });
});
</script>

● 【emoji入力ライブラリその1】wedgies/jquery-emoji-picker による絵文字の入力

https://github.com/wedgies/jquery-emoji-picker

デモ : http://wedgies.github.io/jquery-emoji-picker/demo.html

使い方

<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.css">
<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojis.js"></script>
<script>
$(document).ready(function(){
	$('.emoji').emojiPicker({
	height: '300px',
	width:  '450px'
	});
});
</script>

inputタグを下記のように変更します。

<input type="text">

  ↓

<input type="text" class="emoji">

● 【emoji入力ライブラリその2】OneSignal/emoji-picker による絵文字の入力

https://github.com/OneSignal/emoji-picker
デモ : http://onesignal.github.io/emoji-picker/

特徴

  • <input type="text"> タグの上の表示用レイヤーを作成するのでブラウザによる見え方の違いがありません。
  • 上記理由により動的に入力タグのサイズを変更するスクリプトとは相性が良くないです。

・使い方

<link  href="{$config.root_uri}/emoji-picker/lib/css/nanoscroller.css" rel="stylesheet">
<link  href="{$config.root_uri}/emoji-picker/lib/css/emoji.css" rel="stylesheet">
<script src="{$config.root_uri}/emoji-picker/lib/js/nanoscroller.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/tether.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/config.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/util.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/emoji-picker.js"></script>

<script>
$(function() {
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath        : './lib/img/',
    popupButtonClasses: 'fa fa-smile-o' ,
    xoffset : 500 ,
  });
  window.emojiPicker.discover();
});
</script>

inputタグを下記のように変更します。

<input type="text">

  ↓

<input type="text" data-emojiable="true">
No.1103
08/08 16:08

edit

JavaScript の querySelector の書式入門

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);

・その他いろいろな指定方法

window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");

・残念ながら使えない指定方法(文字列●●●を含む要素)

window.document.querySelector( 'tag:contains("●●●")' );

↑これは使用できません。 (Xpathなら取得できるのですが)

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

No.1050
08/31 14:09

edit

iMacros
jQuery
DOM
xpath

JavaScriptのメモリ使用量を知る

Google Chromeの起動

 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --enable-memory-info
	console.log( performance.memory );

jsHeapSizeLimit: 使用可能なJavaScriptヒープのメモリサイズ(bytes) totalJSHeapSize: その内、既に割り当てられたメモリサイズ(bytes) usedJSHeapSize: その内、現在使用中のメモリサイズ(bytes)

参考 : http://bit.ly/28nfmBW

No.1039
07/31 13:25

edit

JavaScript( node.js )でAES暗号を使う

■ cryptoJS

https://www.npmjs.com/package/crypto-js

● 1. インストール

npm install crypto-js

● 2. AES暗号化復号化のテスト

ファイル名 : test_node_aes.js

var AES = require("crypto-js/aes");
var CryptoJS = require("crypto-js");
// 暗号化キー
var txt_key = "0123456789ABCDEF0123456789ABCDEF";
// 暗号化したい元データ
var txt_plain = "元テキストです。";
console.log('txt_plain: ' + txt_plain);
var utf8_plain = CryptoJS.enc.Utf8.parse(txt_plain);
// 暗号化
var encrypted = CryptoJS.AES.encrypt( utf8_plain, txt_key );
var encrypted_strings = encrypted.toString();
console.log('encrypted_strings: ' + encrypted_strings);

// 復号化
var decrypted = CryptoJS.AES.decrypt(encrypted_strings, txt_key);
var decrypted_strings = decrypted.toString(CryptoJS.enc.Utf8);
console.log('decrypted_strings: ' + decrypted_strings);

● 3. 実行

node test_node_aes.js

● 4. 結果

txt_plain: 元テキストです。
encrypted_strings: U2FsdGVkX1+VR07vpJ+z0oKnSjrz0bT7uD3/lDdFgfhZI9HnlM8XKUEMusvCWKGQ
decrypted_strings: 元テキストです。
No.1038
05/25 19:58

edit

node.js

ES6( ECMAScript 2015)フレンドリー + 他ライブラリ非依存のスムーススクロール sweet-scroll.js

● sweet-scroll.js

http://webdesign-dackel.com/2015/12/17/sweet-scroll/

  • MIT ライセンス
  • 動作が軽快
  • 他の JavaScriptライブラリに依存しない
  • 設置も超カンタン
  • webpackやbrowserify対応
  • スムーズスクロール(イージング)対応

のことから使わない理由がみつかりません。おすすめです。

単独で使用するには

<script src="sweet-scroll.min.js"></script>

で読み込んで

const sweetScroll = new SweetScroll({
});

で、実行。簡単です。

オプションも豊富です

{
 trigger: "[data-scroll]",       // トリガーとなる要素をCSSセレクタで指定
  header: "[data-scroll-header]", // 固定ヘッダをCSSセレクタで指定
  duration: 1000,                 // アニメーション再生時間のミリ秒
  delay: 0,                       // アニメーション開始までの遅延ミリ秒
  easing: "easeOutQuint",         // イージングのタイプ
  offset: 0,                      // スクロール位置のオフセット
  verticalScroll: true,           // 垂直方向のスクロールを許可
  horizontalScroll: false,        // 水平方向のスクロールを許可 (デフォルトでは無効)
  stopScroll: true,               // ホイール・タッチイベントが発生した時にスクロールを停止
  // call back function
  beforeScroll: null,             // スクロールが始まる前 (return falseでキャンセル可)
  afterScroll: null,              // スクロールが終わった時
  cancelScroll: null              // スクロールがキャンセルされた時
}
No.1036
01/03 19:31

edit

背景画像の遅延読み込み(lazy load)をするlazysizes.js

● lazysizes.js

https://github.com/aFarkas/lazysizes

画像を画面に表示される直前に読み込む lazysizes.js 軽量でjQueryも必要ありません。

 

<script src="/js/lazysizes.min.js" async=""></script>

CDNで読み込むには  https://cdnjs.com/libraries/lazysizes
こちらから取得します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" integrity="sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg==" crossorigin="anonymous"></script>

背景画像を遅延読み込みするには下記のようにします。

lazysizes.js は クラス名「lazyload」が付いたエレメントがブラウザに表示される直前に画像を読み込みクラス名を「lazyloaded」に変更します。
なので、

html側 : クラス名「lazyload」
css側 : クラス名「lazyloaded」

で処理をすればokです。

html

<div class="my-image-001 lazyload">test</div>

css

  .my-image-001.lazyloaded {
    background-image: url("my001.jpg");
  }

● lazysize.js で画像を読み込み時にフェードインさせる

cssに以下を記述して読み込ませます

.lazyload, .lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 1000ms;
}
No.1026
01/14 17:22

edit

画像

アニメーションライブラリ velocity.js の記述方法

● 1. velocity.jsの読み込み(jQueryは読み込まなくても可能ですが、共存することもできます)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,(ハッシュ) アニメーション時間(ms), オプション(ハッシュ),  終了時実行関数(関数) )

例1:

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2:opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ1つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

No.1020
06/26 12:05

edit

css
jQuery

Copyrightの今年の年をJavaScriptで表示させる / 今年の年を表示させるWebComponentsを作る

毎年変更するのが面倒なCopyrightの今年の年をJavaScriptで表示させる

2024をJavaScriptで表示

<script>document.write(new Date().getFullYear());</script>

 ↓

2024

よくあるコピーライトをJavaScriptで表示

© <script>document.write(new Date().getFullYear());</script> hogehoge.com

 ↓

© 2024 hogehoge.com 

● 今年の年を表示させるWebComponentsを作る

my-copyright.js

class MyCopyrightElement extends HTMLElement {
    static observedAttributes = ['text'];
    connectedCallback() {
        const text = this.getAttribute('text');
        this.innerText = `Copyright ©${new Date().getFullYear()} ${text}`;
    }
}
customElements.define('my-copyright', MyCopyrightElement);

html

  <my-copyright text="株式会社 テストテストカンパニー"></my-copyright>
  <script src="my-copyright.js"></script>

↓ このように表示されます

Copyright ©2022 株式会社 テストテストカンパニー
No.1016
05/14 16:49

edit

日付

このウィンドウはx秒後に自動的に閉じられます

「このウィンドウはx秒後に自動的に閉じられます」と表示してカウントダウンしていくやつ。

<pre>
このウィンドウは <span id="close_button_count"></span>秒 後に自動的に閉じられます。
</pre>
<script>
close_count_down(5);
function close_count_down(sec){
	if (sec <= 0){ window.close(); }
	document.getElementById('close_button_count').innerHTML = sec;
	setTimeout( function() {
			close_count_down(sec-1);
	}, 1000 );
}
</script>
No.1014
03/18 15:56

edit

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

jQuery(Javascript)で表示中のディスプレイが retina対応か判別する

jQuery(JavaScript)でRetina対応ディスプレイかどうか判別して、出力する画像(プリロードする先読み画像)の種類を分けたい時があります。

JavaScriptのみで対応可能です。 以下のように判別します。

var retinaCheck = window.devicePixelRatio;
if(retinaCheck >= 2) {
	alert('retina対応ディスプレイです。');
}
No.1004
02/08 16:51

edit

画像
jQuery

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

jQueryを使用しできない環境でjQueryメソッドを使用したい時に参照するサイト

■ YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com

例えばjQueryで `fadeIn()` を使用したかったらJavaScriptのみでこのように書けばいいよ、を教えてくれます。

No.992
01/05 10:13

edit

JavaScriptでオブジェクト、配列の要素数を取得する

JavaScriptで配列の要素数を取得するには( .length )

var ar = [111,222,333];
console.log(ar.length);    // 3

JavaScriptでオブジェクトの要素数を取得するには( Object.keys(オブジェクト名).length )

var obj = {
  a: 111 ,
  b: 222
};
console.log( Object.keys(obj).length );    // 2

とします。

No.987
12/18 15:05

edit

ドラッグ&ドロップで複数ファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

● Dropzone.jsを使ってドラッグ&ドロップアップロード + 進捗バー

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

・ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

・ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

・ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	umask(0);									// 権限(パーミッション)を厳格にしたい時はこちらを変更
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

・ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
02/04 16:14

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScriptで文字列を指定バイト数で切り取る

JavaScriptを使って長すぎる文字列を指定バイト数で切り取って「...続きを読む」みたいにするには以下のようにします。

function substr(text, len, truncation) {
  if (truncation === undefined) { truncation = ''; }
  var text_array = text.split('');
  var count = 0;
  var str = '';
  for (i = 0; i < text_array.length; i++) {
    var n = escape(text_array[i]);
    if (n.length < 4) count++;
    else count += 2;
    if (count > len) {
      return str + truncation;
    }
    str += text.charAt(i);
  }
  return text;
}

使い方

var text = '長い長い日本語の文字列。English English English ';
var text2 = substr(text, 10, '...続きを読む');
alert('text2:' + text2);
No.980
11/05 11:39

edit

日本語

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

prototype.js の フォーム操作

1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ prototype.js
$F('hoge');

オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ prototype.js
$F('hoge');

ラジオボタン(id="radio_id")の値の取得

// ◆ prototype.js
var data = $A(document.FM.radio_id).find(function(v) {return v.checked;});

単一チェックボックス(id=cb1)の値の取得

<label><input type="checkbox" id="cb1_id" name="cb1" value="あいうえお" />あいうえお</label>
// ◆ prototype.js
alert( $F('cb1') );

No.973
09/09 14:37

edit

prototype.js
フォーム

IE8以下で console.log がエラーになる問題の対処

IE8以下で JavaScriptで console.log() を記述しているとエラーとなってしまいます。 そこでIE8以下でもとりあえずエラーが出ないようにする対策

対策1. consoleオブジェクトがあるかどうかを調べてから console.log() を使用する

console.log( my_obj);

  ↓ このように変更する。

if(console && console.log) { console.log( my_obj); }

対策2. 何もしない空のconsoleオブジェクトを作成する

(function () {
    if (typeof window.console === "undefined") {
         window.console = {}
    }
    if (typeof window.console.log !== "function") {
         window.console.log = function () {}
    }
})();

引用 : http://goo.gl/czcLY3

No.972
09/09 10:42

edit

jQuery
エラー対処

ブラウザ自動運転iMacrosの使い方と細かいテクニック

・コメントアウト【 .iim ファイル】

' 先頭がクォーテーションはコメントと見なされます
' コメント 
' コメント

・2秒間ウェイトする(待つ)【 .iim ファイル】

WAIT SECONDS=2

・全てのコマンド実行時に x秒間ウェイトする(待つ)【 .iim ファイル】

SET !REPLAYSPEED SLOW
SET !REPLAYSPEED MEDIUM
SET !REPLAYSPEED FAST
SLOW   : 2秒待つ
MEDIUM : 1秒待つ
FAST    : 0秒待つ(待たない。)

・コマンドライン(URL,検索バー)からの実行

マクロ「mymacro.iim」を実行します。

 imacros://run/?m=mymacro.iim

実は拡張子 .js のマクロも実行できます

 imacros://run/?m=mymacro.js

フォルダ「myfolder」の中に入った「mymacro.iim」を実行するには「/」を「%5C」で置き換えます

 imacros://run/?m=myfolder%5Cmymacro.iim

Aタグを使ってHTMLから起動することもできます

<a href="imacros://run/?m=myfolder%5Cmymacro.iim">マクロ起動</a>

・JavaScriptからのマクロ実行【 .js ファイル】

var test;
test = "CODE:";
test += "URL GOTO=www.google.com \n";
var rt = iimPlay(test);
alert(rt); // 1 以下の時エラー

・iMacrosの .js からDOMオブジェクトを操作する【 .js ファイル】

window.content.document.getElementById("xxx");

・iMacrosの .js からconsole.log で出力する【 .js ファイル】

window.console.log( 'TEST!!!' );

・iMarcorsにエラーがあった時に止まらないようにする

SET !ERRORIGNORE YES

・iMacrosの1命令ごとのタイムアウトを設定する

(ステップごとのタイムアウトを 2秒 に設定する)

SET !TIMEOUT_STEP 2 

・重いページを読み込む時にページの読み込みを待たない

(ページ読み込みのタイムアウトを 1秒 に設定する)

SET !TIMEOUT_PAGE 1

・フォームの入力テキストにスペースを入力する

(スペースの代わりに <SP> を入力します。)
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:myform.php ATTR=* CONTENT=日本語<SP>太郎

・XPathで要素を指定してクリックする

普通に xpath が使えます (xpath式はダブルクォーテーションで囲むこと)

 TAG XPATH="//*[@id='my_id']/tr/td[3]/div/a"

・target="_blank" のリンクでウィンドウを開くとタブ番号がおかしくなる

firefoxで新規ウィンドウをタブで開く場合 target="_blank" をマクロで踏むとタブ番号がおかしくなりその後のマクロでエラーが出ることがあります。 この場合はリンクを押す代わりにリンク先を取得して imacros で画面遷移しましょう

・iMacrosでスクリーンショットを撮る

http://qiita.com/nori4k/items/2e55bc346062d5c490b8

リファレンス http://imacros.doorblog.jp

No.971
05/19 09:38

edit

iMacros
エラー対処
DOM
Firefox

iMacrosでマクロによる変数代入とJavaScriptによる変数代入

iMacrosではマクロ内で変数 (VAR1 〜 VAR9)が使用できます。
が、そもそもJavaScriptも使用できるので変数を使用したい場合はJavaScriptで扱うのもいいと思います。

iMacrosで変数を扱うサンプル ( imacros_debug.html )

表示用のHTMLページを用意してどこかのサーバにアップしておきます

<html lang="ja">
<head>
<meta charset="utf-8">
<title>iMacros debug</title>
</head>
<body>
<form action="test.cgi" name="FM">
!VAR1 : <input type="text" name="var1" id="var1" size="30"><br>
!VAR2 : <input type="text" name="var2" id="var2" size="30"><br>
!VAR3 : <input type="text" name="var3" id="var3" size="30"><br>
</form>
</body>
</html>

iMacrosで変数を扱うサンプルマクロ(拡張子は .js で使用すること) ( set_var.js )

ページ xxxx.xxxx.com/imacros_debug.html を開いてその中のフォームに変数を代入します。

var test;
test = "CODE:";
test += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
test += 'SET !VAR1 "テスト 太郎"' + " \n";
test += 'SET !VAR2 "てすと たろう"' + " \n";
test += 'SET !VAR3 "000-111-2222"' + " \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var1 CONTENT={{!VAR1}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var2 CONTENT={{!VAR2}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var3 CONTENT={{!VAR3}} \n";
iimPlay(test);
alert('imacrosで変数をフォームに代入しました');

test2 = "CODE:";
test2 += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
iimPlay(test2);
window.document.getElementById("var1").value = 'ジャヴァ スクリプト';
window.document.getElementsByName("var2")[0].value = 'じゃば すくりぷと';
window.document.getElementsByName("var3")[0].value = '000-999-8888';
alert('JavaScriptで変数をフォームに代入しました');

Firefox(やChrome)を立ち上げ、そこからiMacrosを立ち上げてそこから set_var.js を起動すると、1回目はマクロでフォームに変数を代入します。2回目はJavaScriptで代入します。

No.970
09/02 17:00

edit

iMacros
Firefox

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

JavaScript(jQuery)でギターのタブ譜を表示する

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

No.945
09/14 00:43

edit

jQuery
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

ドロップダウンリスト(オプション・メニュー)のスタイルを変更するjQueryプラグイン【jquery.customSelect】

<i class="fa fa-github fa-2x"></i> jquery.customSelect

https://github.com/adamcoulombe/jquery.customSelect

ダウンロードするには【Download ZIP】のアイコンをクリック

<select>の後ろに<span class="customSelect">というタグを追加することによりドロップダウンリスト(オプション・メニュー)のスタイルを変更するプラグインです。

■ 使い方

<select class="my_form">
<option value="">選択してください</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>

というHTMLを用意して

<script src="jquery.min.js"></script>
<script src="jquery.customSelect.js"></script>
<script>
$(function(){
    $(".my_form").customSelect();
});
</script>

で実行します。

■ 動的に値を書き換える(ドロップダウンリストの状態を変更する)場合

動的に<select>の値を変更しても、jquery.customSelectによって生成された<span>の状態までは書き換えられません。

そこで次のように「trigger('render')」を使って書き換えを行います。

$(".my_form").val('土曜日');
$(".my_form").trigger('render');
No.931
03/07 11:48

edit

jQuery

ブックマークレット作成に便利なサイト

ブックマーク作成サイト

http://userjs.up.seesaa.net/js/bookmarklet.html

http://www.eonet.ne.jp/~wdf/software/bookmarklet_creator.html


作成したブックマークレットを戻して再編集するときに使用するサイト

http://home.kendomo.net/board/decode/decode2.php

http://jsbeautifier.org


ブックマークレットでjQueryを使う

http://goo.gl/3vzBSS

No.930
03/05 11:20

edit

Bookmarklet

jQueryでのクラス表示方法・クラス指定方法

あるタグ(jQueryオブジェクト)のクラス,IDを取得し表示

<div id="hoge" class="red big long" >テスト</div>
// そのタグが持つクラスを取得し表示
alert( $('div').attr('class') );
// そのタグが持つIDを取得し表示
alert( $('div').attr('id') );

複数のクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div class="foo bar">テスト</div>
// 間にスペースはいれない
$('.foo.bar')

// +をつかった書き方(こちらのほうが見やすいと思います)
$( '.foo' + '.bar' )

あるIDとあるクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div id="myID" class="myCLASS">テスト</div>
// +をつかって書く
$( '#myID' + '.myCLASS' )

あるクラスまたは別のあるクラス【OR検索】

<div id="myID" class="testA">テストA</div>
<div id="myID" class="testB">テストB</div>
// クラスの間にカンマをはさみます
$('.testA,.testB').each(function(){
    alert( $(this).attr('class') );
})
No.929
12/21 17:44

edit

jQuery

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}

● フォームが送信され、バリデーションが実行され、その結果がOKだった場合に処理を行う

例 : #submit_button を非活性にします。

  submitHandler: function(form) {
    // ボタンを非活性
    $('#submit_button').prop('disabled', true);
    form.submit();
   }

● 複数あるテキストの全てが空の場合にエラーを出す

・やり方 1.(フォームの nameを同じにして require にする。 )

<input type="text" name="myform[]">
<input type="text" name="myform[]">
<input type="text" name="myform[]">
rules: {
	'myform[]': {
		required: true
	}
} ,
messages: {
	my_name: { required: '少なくともどれか1つに入力してください。' } 
}

・やり方 2.(フォームの nameを別にしたい場合は、 group_require を定義する。 )

クラス .group_require_1 のうちどれか1つに入力があるとヴァリデーションOKとなります。

<input type="text" name="textA" class="group_require_1">
<input type="text" name="textB" class="group_require_1">
<input type="text" name="textC" class="group_require_1">
jQuery.validator.addMethod("group_require", function(value, element, selector_name) {
  var v = '';
  $(selector_name).each(function( index ) {
    v += $( this ).val();
  });
  if ( v ){ return true; }
  else { return false; }
}, "このフィールドは必須です。");

rules: {
	'student_no[]': {
		group_require : '.group_require_1'
	} ,
messages: {
	my_name: {
		group_require: '少なくともどれか1つに入力してください。' 
	} 
}

● バリデーションルールの追加

validate()メソッドで初期化を行った後でルールを追加するにはadd()を使用します。

$("input[name=other_name]").rules("add", { required: '#other_radio:checked' }); //other_radio にチェックが有る時は必須とする

ルールとバリデーションエラーメッセージを合わせて追加する

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});
No.928
12/30 11:50

edit

フォーム
jQuery
エラー対処

JavaScriptでアルファベットの大文字と小文字を区別せずソートする。

一般的に文字列でソートすると大文字と小文字は区別されてしまいます。

そこで大文字の(A)も小文字の(a)も同じ(a)としてソートする方法がこちら

var text_array = ['AAA','aaa','bb','BBB','zzzz']
// ソート(大文字と小文字を区別しない)
text_ary = text_ary.sort(function (a, b) {
	a = a.toString().toLowerCase();
	b = b.toString().toLowerCase();
	return (a > b) ?  1 :
		   (b > a) ? -1 : 0;
});
alert(text_array);

引用元 : https://gist.github.com/ishiduca/1215718

No.921
02/12 10:18

edit

配列

JavaScriptで全角→半角変換を行う

● JavaScriptで全角→半角変換を行う

    function zen2han(input) {
        return input.replace(/[!-~]/g,
            function(input){
                return String.fromCharCode(input.charCodeAt(0)-0xFEE0);
            }
        );
    };

引用 : https://bit.ly/310vgFY

● jQueryで全角→半角変換を行う

JavaScriptで全角→半角変換を行うのにとても便利なjQueryのプラグインがあります

・ jQuery Super Text Converter

https://github.com/megazalrock/jquery-supertextconverter

使い方

var my_text = '全角のテキスト1233456';
var conv = $.SuperTextConverter();
my_text = conv.toHankaku(my_text);
alert(my_text);

です。

No.916
08/17 18:01

edit

最も簡単にYouTube動画を貼り付けるjqueryプラグイン

■ jQuery.tubeplayer.js ↓(ダウンロードは下記サイトの画面右下【Download ZIP】から)

https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin

コードは下記のようになります

<script src="jquery.js"></script>
<script src="jQuery.tubeplayer.min.js"></script>
<div id='player'></div>
<script>
jQuery("#player").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "[some video id]", // the video that is loaded into the player
	preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
	onPlay: function(id){}, // after the play method is called
	onPause: function(){}, // after the pause method is called
	onStop: function(){}, // after the player is stopped
	onSeek: function(time){}, // after the video has been seeked to a defined point
	onMute: function(){}, // after the player is muted
	onUnMute: function(){} // after the player is unmuted
});
</script>

簡単ですね。

No.914
11/06 16:34

edit

YouTube
jQuery

JavaScriptでPHPのin_arrayのような関数を作る

JavaScriptにはin_arrayのようにある数値や文字列が配列の中に存在するかどうかを判別する関数がありません。

そこで以下のようにして作成します。

Array.prototype.in_array = function(val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == val) {
			return true;
		}
	}
	return false;
}

これで、配列のメソッドとして in_array が使用できるようになります。

var my_array = new Array('hogehoge','fugafuga');
if ( my_array.in_array('hogehoge') ){ alert('存在します'); }
No.900
10/25 18:14

edit

配列

JavaSriptで入力値のサニタイズ(PHPの htmlspecialchars()関数 )

JavaSriptで入力値のサニタイズを行いたい時があります。

まず PHPの htmlspecialchars() の互換関数 を作成します。

function htmlspecialchars(str) { 
	str = str.replace(/&/g,"&amp;");
	str = str.replace(/"/g,"&quot;");
	str = str.replace(/'/g,"&#039;");
	str = str.replace(/</g,"<");
	str = str.replace(/>/g,">");
    return str ;
}

htmlspecialchars()関数では対応できない文字を追加で変換する html_sanitize関数を作成します

function html_sanitize(str) { 
	str = str.replace(/;/g,"!___escape_semicolon___!");
	str = htmlspecialchars(str);
	str = str.replace(/!___escape_semicolon___!/g,"&#59;");
	str = str.replace(/\//g,"&#47;");
	str = str.replace(/\\/g,"&#92;");
	str = str.replace(/=/g,"&#61;");
	return str ;
}

使い方の例

var a = 'ABCDEFG\\=/<script>alert("XSS");';
var b = html_sanitize(a);
alert(a);
alert(b);
No.888
09/18 12:50

edit

正規表現

SWF Object 不要。jqueryのFlashムービー(swf)貼り付けプラグイン

http://jquery.thewikies.com/swfobject/

$('#hogehoge').flash({
  swf: "http://www.youtube.com/v/"+video_id+"&autoplay=1",
  width: 600,
  height: 600,
  bgcolor:'#000000',
  hasVersion: 10,
  hasVersionFail: function (options) {
   alert('version error');
   return false;
  },
  encodeParams: true,
  flashvars: {
   allowfullscreen: 'true'
  },
}
);
No.886
05/17 10:51

edit

jQuery

jQueryで<ul><li>の最後の要素を選択する

jQueryで<ul id="test"><li>の最後の要素を選択するには下記のようにします。

	$('#test li:last');

コーディング例:最後の要素のIDを表示します。

HTML

<ul id ="test">
<li id ="test1">あああ</li>
<li id ="test2">いいい</li>
<li id ="test3">ううう</li>
</ul>

JavaScript

alert( $('#test li:last').attr('id') );
No.885
05/07 14:48

edit

jQuery

JavaScriptでBlowfish暗号を利用する

不可逆可能な暗号化で広く使われているBlowFishをJavaScriptで使うための方法。

■ こちらのblowfish.js を使用します(MITライセンス)

https://pgmemo.tokyo/data/filedir/882_1.js

使い方(全角文字を使用する時は escape , unescape などを使用します。)( encodeURI , encodeURIComponent でも可 )

var bf = new Blowfish("some key"); // 任意の暗号・復号化キー
var ciphertext = bf.encrypt64( escape("日本語の文字列") );
var plaintext = unescape( bf.decrypt64(ciphertext ) );
alert( ciphertext );
alert( plaintext );

添付ファイル1

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素"が画面内にあるかどうかを判別するには 要素のページ内での位置( Y座標)、 現在のスクロール位置( Y座標)、 要素の高さを見て判別します。

function is_in_sight(jq_obj) {
	var scroll_top    = $(window).scroll_top();
	var scroll_bottom = scroll_top + $(window).height();
	var target_top    = jq_obj.offset().top;
	var target_bottom = target_top + jq_obj.height();
    if (scroll_bottom > target_top && scroll_top < target_bottom) {
    	alert('in sight');
    } else {
    	alert('not in sight');
    }
}

$(function() {
    $(window).on('load scroll', function() {
        is_in_sight($('.my-class'));
    });
});
No.879
09/05 12:27

edit

jQuery

IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン

CSS3で追加された background-size。値は以下のとおり指定します。

<b>auto</b> 自動的に算出される(初期値)
<b>contain</b> 背景領域に収まる最大サイズになるように背景画像を拡大縮小する
<b>cover</b> 背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
<b>xxx px</b> 背景画像の幅・高さを指定する
<b>xxx %</b> 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

とこれが Windows IE8 7 6 ではこのプロパティは認識されません。

そこで以下のjQueryプラグイン

■ jquery.backgroundSize.js

(要 jQuery バージョン1.7.0以降 )

http://louisremi.github.com/jquery.backgroundSize.js/demo/

■ 使い方(<div class="hoge">に { background-size : cover; } を適用する。)

<script type="text/javascript" src="jquery.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="jquery.backgroundSize.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('div.hogehoge').css({backgroundSize: "cover"});
    });
    </script>
<![endif]-->

No.872
05/30 10:08

edit

jQuery

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更する

以下のようにウィンドウサイズによって画像サイズを変更したい時があります。

・画面サイズ(横幅)が800px 以下の場合は 800px固定

・画面サイズ(横幅)が800px 以上の場合は 100%(横いっぱい)

jQueryを使って以下のようにします。

<img id="hogehoge" src="./test.jpg" width="800" />
<script>
function liquid_image(){
	var wh = jQuery(window).height();
	var ww = jQuery(window).width();
	if (ww > 800){
		jQuery('#hogehoge').css("width", "100%");
	}
	else{
		jQuery('#hogehoge').css("width", "800px");
	}
}
jQuery(document).ready(function(){
	liquid_image()
});
jQuery(window).resize(function(){
	liquid_image()
});
</script>

jQueryのウィンドウサイズ変更を検知するイベント

jQuery(window).resize(function(){
// ここに処理を記述
});

jQueryの画面スクロール変更を検知するイベント

jQuery(window).scroll(function () {
// ここに処理を記述
});
No.869
01/26 19:25

edit

画像
jQuery

iPad, iPhone, スマートフォン用にviewportをJavaScriptで設定する

下記の用に JavaScriptで端末を判別してからそれぞれにセットしたい viewport を追加します。

下記の例では

iPhoneの時 499px

iPad の時 999px

にセットしています。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') > -1){
        jQuery("head").append(jQuery('<meta name="viewport" content="width=499, user-scalable=yes" />'));
    }
    else if(navigator.userAgent.indexOf('iPad') > -1){
        jQuery('head').append('<meta name="viewport" content="width=999, user-scalable=yes" />');
    }
});
</script>
No.867
12/01 23:19

edit

jQuery

ある日にちからの経過日数(経過時間)を取得する

ある日にちから今日までの経過時間を取得するには下記のようにします。

function calc_elapsed_days(last_modified_date){
	var pass_day  = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60*60*24));
	var pass_hour = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60*60));
	var pass_min  = Math.floor(( (new Date()) - (new Date(last_modified_date)) ) / (1000*60));
alert('pass_day:'+pass_day+'   pass_hour:'+pass_hour+'   pass_min:'+pass_min);
	return pass_day;
}

呼び出し方は

// '2012/01/15 16:00:00' から 今日までの経過日数を取得
var elapsed_days = calc_elapsed_days('2012/01/15 16:00:00');
No.862
11/02 16:31

edit

JavaScriptで xx日前の日付け、今日の日付を求める

● JavaScriptで 10日前の日付を求めるには以下のようにします。

var date = new Date();
date.setDate(date.getDate() + 10);
console.log(date.toString());

● moment.jsを使用するのもオススメです

https://momentjs.com/

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/locale/ja.js" defer></script>
var m = moment();
var text = m.format('MM/DD(dddd)') + "\n";
結果例 : 
12/17(月曜日)

次の日はこのように求めます

m.add(1, "day");	// 次の日

● JavaScriptのみで今日の日付を求めるには以下のようにします。

/**
 * 今日の日付を求める
 */
function getNow() {
  let nowdate = new Date();
  let year = nowdate.getFullYear();
  let mon = nowdate.getMonth() + 1;
  let date = nowdate.getDate();
  let hour = nowdate.getHours();
  let min = nowdate.getMinutes();
  let sec = nowdate.getSeconds();
  if (mon < 10) {
    mon = "0" + mon;
  }
  if (date < 10) {
    date = "0" + date;
  }
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (min < 10) {
    min = "0" + min;
  }
  if (sec < 10) {
    sec = "0" + sec;
  }
  return `${year}/${mon}/${date} ${hour}:${min}:${sec}`;
}
var now_day = _get_now();

結果例

2018/12/17 15:30:45
No.858
03/17 10:08

edit

JavaScriptに sptintf 関数を実装する

JavaScriptにはsprintfがありません。

そこで自前で実装する方法

引用 : http://d.hatena.ne.jp/uupaa/20091214/1260737607

/*!{id:"uupaa.js",ver:0.7,license:"MIT",author:"uupaa.js@gmail.com"}*/
window.sprintf || (function() {
var _BITS = { i: 0x8011, d: 0x8011, u: 0x8021, o: 0x8161, x: 0x8261,
              X: 0x9261, f: 0x92, c: 0x2800, s: 0x84 },
    _PARSE = /%(?:(\d+)\$)?(#|0)?(\d+)?(?:\.(\d+))?(l)?([%iduoxXfcs])/g;

window.sprintf = _sprintf;

function _sprintf(format) {
  function _fmt(m, argidx, flag, width, prec, size, types) {
    if (types === "%") { return "%"; }
    var v = "", w = _BITS[types], overflow, pad;
    idx = argidx ? parseInt(argidx) : next++;
    w & 0x400 || (v = (av[idx] === void 0) ? "" : av[idx]);
    w & 3 && (v = (w & 1) ? parseInt(v) : parseFloat(v), v = isNaN(v) ? "": v);
    w & 4 && (v = ((types === "s" ? v : types) || "").toString());
    w & 0x20  && (v = (v >= 0) ? v : v % 0x100000000 + 0x100000000);
    w & 0x300 && (v = v.toString(w & 0x100 ? 8 : 16));
    w & 0x40  && (flag === "#") && (v = ((w & 0x100) ? "0" : "0x") + v);
    w & 0x80  && prec && (v = (w & 2) ? v.toFixed(prec) : v.slice(0, prec));
    w & 0x6000 && (overflow = (typeof v !== "number" || v < 0));
    w & 0x2000 && (v = overflow ? "" : String.fromCharCode(v));
    w & 0x8000 && (flag = (flag === "0") ? "" : flag);
    v = w & 0x1000 ? v.toString().toUpperCase() : v.toString();
    if (!(w & 0x800 || width === void 0 || v.length >= width)) {
      pad = Array(width - v.length + 1).join(!flag ? " " : flag === "#" ? " " : flag);
      v = ((w & 0x10 && flag === "0") && !v.indexOf("-"))
        ? ("-" + pad + v.slice(1)) : (pad + v);
    }
    return v;
  }
  var next = 1, idx = 0, av = arguments;
  return format.replace(_PARSE, _fmt);
}
})();
No.857
10/10 11:37

edit

jQueryで画像やリンクのクリック状態(マウスイベント)やキーボード入力状態を強制的に作り出す

https://api.jquery.com/trigger/

.trigger() メソッドを使って強制的にイベントを作ることができます。

// id=hoge の要素をクリック状態(onclick)を作り出す
jQuery('#hoge').trigger("click");

// id=fuga の要素にマウスオーバーさせる(onmouseover)
jQuery('#fuga').trigger("mouseover");

注意

<input type="text" name="hoge" id="hoge_id">
のフォームがあるとき
$("input[name='hoge']").trigger("focus"); // 動作しません ☓ NG
$("#hoge_id").trigger("focus"); // 動作します ○ OK

となりますので注意。

指定できるのは次のイベントです

 blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup

*キーボードの入力状態を強制的に作り出す

var evt = $.Event('keydown');
evt.keyCode = 39;    // キーボードの右矢印(→)入力
$('#hoge').trigger(evt);

jQueryのkeycodeはこちらで調べられます

http://goo.gl/HO6ong

keycode一覧表

http://goo.gl/5UwW2

No.853
05/11 13:39

edit

jQuery

配列かどうかを判別する

JavaScriptである変数(hogehoge)が配列かどうかを確認したい時があります。その時は

if ( hogehoge instanceof Array) {
	alert('配列')
}
else{
	alert('スカラー')
}

とします

No.852
05/30 10:09

edit

配列

JavaScript(jQuery)でスマートフォン(iPhone, iPad, Android)を判別する

jQueryでスマートフォン(iPhone, iPad, Android)を判別するには下記のようにします

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		alert('スマートフォンです:' + agent);
	}
});
</script>
No.846
04/24 15:55

edit

jQuery
iPhone

JavaScriptの正規表現で変数を使う

● JavaScriptの正規表現で変数を使う

JavaScriptの正規表現で変数を使うには

  • RegExp オブジェクト
  • lodash の escapeRegExp関数 を使用します。
// 検索文字列とチェックしたいターゲット
const expected = `/myurl?hoge=hoge`;
const target = `/myurl?hoge=hoge&data=aaa`;

// 特殊文字をエスケープ
const escapedExpectedUrl = _.escapeRegExp(expected)
console.log( '● escapedExpectedUrl' );
console.log( escapedExpectedUrl );

// 正規表現検索の実行
const re = new RegExp(escapedExpectedUrl)
const result = re.test(target)
console.log( result ); // true 
No.844
10/20 09:40

edit

正規表現

GoogleによるJavaScriptホスティング(CDN)を使用する

# ● GoogleによるJavaScriptホスティング(CDN)を使用する

https://developers.google.com/speed/libraries/


### 使用方法( jQuery 2系を呼び出す )

```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

```


### 使用方法( jQuery 3系を呼び出す )

```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

```

No.795
06/22 18:50

edit

Google
jQuery
prototype.js

jQueryのテンプレートプラグイン【 jQuery.tmpl 】を使用する

jQuery Plugin .tmpl()

http://api.jquery.com/jquery.tmpl/

ダウンロードはこちら

https://github.com/jquery/jquery-tmpl

ソースは以下のとおり

手順は

1. jqueryとjquery.tmpl を読み込む
2. テンプレートを定義する(<!-- template -->で囲まれたところ)
3. データを定義する( var data = ..... ; のところ)
4. テンプレートを表示する ( $tmpl ....... のところ )

です。

簡単ですね。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
</head>

<body>
<div id="target"></div>

<!-- template -->
<script id="template" type="text/x-jquery-tmpl">
  <li>${name}</li>
</script>
<!-- /template -->

<script>
var data = [ { "name" : "HOGE hofe" }, { "name" : "FUGA fuga" } ];
alert( $.tmpl( $('#template'), data ).html() );
$.tmpl( $('#template'), data ).appendTo( "#target" );
</script>

</body>
</html>
No.843
04/09 14:02

edit

Ajax
jQuery

JavaScriptファイル自身のURLを取得する。またドキュメントルートを取得する。

JavaScriptファイル自身のURLを取得する。

またローカル環境下でドキュメントルートを取得するには以下のようにします。

ファイル名【local_or_server.js】でディレクトリ【js】に保存します。

// ここのパラメーターを書き換える ↓↓↓↓↓
var set_js_path = '/js/';		// JavaScript設置パス(絶対パス表記)
var set_script_name ='local_or_server.js';	// スクリプト名
// ここのパラメーターを書き換える ↑↑↑↑↑

// 1. パスを取得
var script_path;
var re = new RegExp( '(.+)'+ set_script_name + '$', "i");
var scripts = document.getElementsByTagName("script");
var i = scripts.length;
while (i--) {
	var m = scripts[i].src.match(re);
	if ( m ) {
		script_path = m[1];
		script_path = script_path.replace(/\/$/,'');
		break;
	}
}
alert('js格納ディレクトリは: '+script_path);
// 2. ドキュメントルートを取得
set_js_path = set_js_path.replace(/\/$/,'');
var re = new RegExp( set_js_path +'$', "i");
var document_root = script_path.replace(re,'');
alert('ドキュメントルートは: '+ document_root);

参考:http://goo.gl/j2v05

No.842
04/10 00:48

edit

文字列型を数値型(整数型)に変換する(parseInt)

JavaScriptで文字列型をint型にするには以下のようにします。

var a = "123.45";
a = parseInt(a);
b = a + 10;
document.write(b);
No.838
03/16 13:35

edit

jQueryでオブジェクト(HTMLタグ要素)の存在、表示、アニメーション中を判別する

jQueryでオブジェクト(HTMLタグ要素)の存在を判別するには <b>.length</b>や <b>.is()メソッド</b> を使用します。

●<div id="hoge">が<b>『存在するかどうか?』</b>を調べるには

if($('#hoge').length) {
    alert('存在します');
}

とします。

●<div id="hoge">が<b>『表示中か非表示か?』</b>を調べるには

// 方法1. 「透明度」と「visibility」両方を確認する(おすすめ)
  if ($('#hoge').css('opacity') > 0 && $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法2. 「visibility」のみ確認する
if( $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法3. 「visibility」のみ確認する
if ( $('#hoge').is(':visible') ){
    alert('表示中です');
}

●<div id="hoge">が<b>『CSS3アニメーション中かどうか?』</b>を調べるには

    console.log( $('#hoge').css("transform") );
    console.log( $('#hoge').css("transition") );
    console.log( $('#hoge').css("opacity") );

など、CSSのプロパティを取得してきて変化中の値を見るといいでしょう。

●<div id="hoge">が<b>『JavaScript(jQuery)アニメーション中かどうか?』</b>を調べるには

// 方法1.
if ( $("#hoge:animated").length ){
	alert('アニメーション中です');
}
// 方法2.
if ( $("#hoge").is(":animated") ){
	alert('アニメーション中です');
}

.is() メソッドを覚えておくと色々便利です。

上記の例以外にも

// 要素にフォーカスがあたっているなら
if ($("#hoge").is(":focus") ){
    alert('フォーカスしています');
}

// 要素が最後の要素であれば
if ( $(".fuga").is(":last-child") ){
    alert('最後の要素です');
}

// 要素が表示中なら
if( $("#hoge").is(":visible") ){
    alert('表示中です');
} 

// 要素が非表示なら
if ( $("#hoge").is(":hidden") ){
    alert('非表示です');
}

// 要素がfugaクラスを内包しているなら
if ( $("#hoge").is(":has('.fuga')") ){
    alert('.fugaクラスを内包しています');
}
 
No.829
06/05 15:17

edit

jQuery

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、

フォームの横の文字もクリック出来るようにしておくととても便利です。

それを実現するのが<label>タグなのですがIEでは以下の2つの不具合があります。

■ 1.IE6では<label></label>でテキストを囲んだだけでは動作しない

以下のコードはIE6では動作しません。

<label><input type="checkbox" />チェックボックス1</label>
<label><input type="checkbox" />チェックボックス2</label>

以下のように全ての<checkbox>にidをセットして、<label>タグでそのIDを指定します。

<input type="checkbox" id="label_1" /><label for="label_1">チェックボックス1</label>
<input type="checkbox" id="label_2" /><label for="label_2">チェックボックス2</label>

■ 2.IE6, IE7, IE8では<label>タグ内に画像があった場合その画像をクリックしても何も起こらない

IE9では修正されていますが、IE6,7,8では以下のコードの時画像をクリックしてもチェックボックスにチェックはつきません。

<input type="checkbox" id="label_1" /><label for="label_1"><img src="photo.jpg" /></label>

それを修正するにはJavaScript(jQuery)プラグインを使用します。

$(function () {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
});

これを「jquery.ie678label.js」で保存してサーバーにアップロード。

条件付きコメントでIE8以下のブラウザにのみ読み込ませます

<!--[if lte IE 8]>
<script type="text/javascript" src="jquery.ie678label.js"></script>
<![endif]-->

これhtmlは何も書き換えずにIE6,7,8,で<label>内画像をクリックできるようになります。

No.826
04/03 14:45

edit

jQuery

Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

● Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

PHPや.Net などで動的に出力されるページにGoogle Mapsを埋め込む場合、 「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」 をやっていたのでは面倒な場合があります。

そこでGoogle Maps API を使用して簡単に地図表示を行います。

● 1. Google Maps PlatformでAPIキーを作成する

アカウント作成(GoogleアカウントがあればOK)が必要です。 ここにログインし、APIキーを作成します。

* APIキーの作成

・新しいプロジェクトを作成する
・作成したプロジェクトで「Maps JavaScript API」「Geo Coding API」を有効にする
・「API」→「Google Maps Platform」を選択し「認証情報」タブを選択する
・「API とサービスの認証情報にアクセスして行います」のリンクをクリックしてAPIキーを作成する
・「認証情報を作成」→「APIキー」を選択すると新しいAPIキーが作成されます。
・「キーの制限」を適宜設定します。

● 2. Google Maps を住所から自動生成するサンプル

html内に Google Map を表示するDIV タグをセット

<div id="my_map" style="width: 600px; height: 600px"></div>

JavaScriptから呼び出す

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&callback=initMapWithAddress" async defer></script>
<script>
var _my_address = '表示させたい地図の住所';
function initMapWithAddress() {
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
      {
        'address': _my_address,
        'region': 'jp'
      },
      function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            var latlng = result[0].geometry.location;
            my_google_map.setCenter(latlng);
            var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
            google.maps.event.addListener(marker, 'dragend', function(event){
                marker.setTitle(event.latLng.toString());
            });

        }
      }
    );
  }
</script>

なお、地図のサイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。

添付ファイル1
No.824
01/30 12:06

edit

添付ファイル

jQuery
Google

任意の範囲のフォーム項目をリセットするjQueryプラグイン【jquery.clearform.js】

任意の範囲のフォーム項目をリセットするjQueryプラグイン【jquery.clearform.js】

以下のようなhtmlの時に

<form>
	<div id="my_form_1">
	<input type"text" name="hoge">
	</div>
	<div id="my_form_2">
	<input type="text" name="fuga">
	</div>
</form>

ID my_form_1 以下のフォームをすべてリセットする

$('#my_form_1').clearForm();

添付ファイル1

jQueryのアニメーションにイージングをかける

■ jQueryのアニメーションにイージングをかけるplugin
http://gsgd.co.uk/sandbox/jquery/easing/

イージングサンプルはこちら
http://semooh.jp/jquery/cont/doc/easing/
No.820
10/12 10:59

edit

jQuery

jQueryで画像にマスクをかける画像ギャラリー【mbmaskedgallery】

■ mbMaskedGallery.js (要jQuery)

http://pupunzi.open-lab.com/2009/02/16/mbmaskedgallery/

サンプルは以下のとおり

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="mbMaskedGallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#id名").mbMaskGallery({
		type:"normal",			// または "random"
		transition:"crossfade",		// または "normal"
		galleryMask:"photo.png",	//マスクする画像
		galleryColor:"black",		//マスクの背景色
		galleryLoader:"loader.gif",	//ローディング画像
		loaderOpacity:.3,		//ローダーの透明度
		loader:true,			// または "false"
		fadeTime: 200,			//フェードの時間
		navId:"",
		nextPath:"",
		prevPath:"",
		slideTimer: 2000
		changeOnClick:false,

	});
});
</script>
<body>
<div id="sample">
<img src="g/sky.jpg">
<img src="g/muuu_01.gif">
<img src="g/muuu_02.gif">
<img src="g/muuu_03.gif">
</div>

No.819
10/04 13:54

edit

jQuery
画像

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現する

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現するjQueryプラグイン

■ jQuery Smooth Animated Search Field Freebie

http://thefinishedbox.com/freebies/scripts/jquery-animated-search/

デモはこちら

http://thefinishedbox.com/files/freebies/jquerysearch/index.html


No.797
05/16 14:03

edit

jQuery

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する
■ slidernav
http://devgrow.com/slidernav/
デモ
http://devgrow.com/slidernav-jquery-plugin/

No.796
05/27 13:50

edit

jQuery
iPhone

Googleサジェストライクなプラグイン

入力テキストの値を補間するGoogleサジェストライクなプラグイン

● Bootstrap combbox

http://jsdo.it/mottsu/qqoq

デモ
http://logic.moo.jp/livedemo/bootstrap_combo_box/test.html

● jquery.ajax-combobox

https://github.com/sutara79/jquery.ajax-combobox/

・デモ

http://logic.moo.jp/livedemo/jquery_combo_box/mydemo.html

$(function() {
  $('#foo').ajaxComboBox(
    'mydemo.json',
    {
      db_table: 'name',
      per_page: 20,
      navi_num: 10
    }
  );
});

mydemo.json の中身はこんな感じにします

{
  "result":[
    {"name":"りんご"},
    {"name":"オレンジ"},
    {"name":"みかん"},
    {"name":"メロン"},
    {"name":"グレープフルーツ"},
    {"name":"すいか"},
    {"name":"もも"},
    {"name":"洋梨"},
    {"name":"いちご"},
    {"name":"マンゴー"}
  ] ,
  "cnt_whole":"10"
}

● typeahead.js

https://github.com/twitter/typeahead.js/

● jquery.autocomplete.js

http://docs.jquery.com/Plugins/Autocomplete

サンプルコード

$(function() {
	$("#Keywords").autocomplete('/ajax_suggest.php?flag=amazon', {
		delay : 50
	}).keydown(function(event){
        if( event.keyCode == 13 ){
            if( !event.isDefaultPrevented() ){
                return false;
            }
			else{
				document.form1.submit();;
			}
        }
    });
});
No.794
11/18 15:49

edit

jQuery
Ajax

JavaScriptでクリップボードを操作する【zeroclipboard】

クリップボードを操作できるJavaScriptライブラリ【zeroclipboard】

http://code.google.com/p/zeroclipboard/

解説:http://d.hatena.ne.jp/replication/20110405/1302014971

HTML5のClipboard API

http://www.w3.org/TR/clipboard-apis/

No.791
04/18 14:10

edit

HTML5

JavaScriptでヒアドキュメントもどき + ヒアドキュメントライブラリ

JavaScriptには残念ながらヒアドキュメントがありません。

が楽して複数行テキストを記述する方法はあります。以下のとおり。

ヒアドキュメントもどきの記述方法

var text = "\
あ\
い\
う\
";
alert(text);

var text2 = "\
か\n\
き\n\
く\
";
alert(text2);

出力結果

あいう
か
き
く

と出力されます

「各行の最後に ¥ を付ける」と、これだけです。

改行を入れたい場合は「¥n¥」を入れます。

ヒアドキュメント作成ツール

http://flatsystems.net/js_heredoc.html

こちらに文字列を入れるとJavaScriptヒアドキュメントコードを生成します。

No.786
07/03 15:42

edit

リファラー(REFERRER)を消して外部ページに移動する

外部ページに移動するときに リファラー(HTTP_REFERER)をサーバに送りたくない時があります。そんなときは次のやり方で行けます。

動作サンプルはこちら

https://pgmemo.tokyo/data/filedir/569_1.html

Safari5 , Chrome で有効な方法

<a href="data:text/html;charset=utf-8,%3Chtml%3E%0D%0A%3Cscript%20%3E%0D%0Alocation.replace(%22http%3A%2F%2Fwww.teria.com%2F~koseki%2Fmemo%2Freferrer%2Fview.php%22)%3B%0D%0A%3C%2Fscript%3E%0D%0A%3C%2Fhtml%3E%0D%0A">リファラ消し</a>

Firefox4 , IE6,7,8 で有効な方法

<a href="javascript:document.open();document.write('<meta http-equiv=\'refresh\' content=\'0;url=http://taruo.net/e/\'>');document.close();">3. リファラ消し</a>

ただしOperaではうまく動作しません。

その場合苦肉の策としてGoogleを経由するという方法を使います

<a href="http://www.google.com/url?q=http://taruo.net/e/">4. リファラ消し(Using Google)</a>

HTML5の rel=noreferrer を使用する方法

<a href="http://taruo.net/e/" rel=noreferrer>5. リファラ消し</a>

◆ 外部リンク時にリファラーを消すjQueryプラグイン【jquery_kill_referrer.js】

https://pgmemo.tokyo/data/filedir/569_3.js

これを jquery_kill_referrer.js という名前で保存して

jQueryとともに読み込ませます(jquery.jsは各自用意してください)

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

読み込ませるだけで、そのページ内の外部リンク全てにreferrerを消す処理を付け加えます

(ただしOperaは未対応)

添付ファイル1
添付ファイル2
No.569
03/28 10:15

edit

添付ファイル

jQuery

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

● JQUERY SORTABLE

http://jqueryui.com/demos/sortable/
http://jqueryui.com/download ←ダウンロードはこちら

js

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

html

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。
オプションは

revert: true , // アニメーションあり
cursor   : 'move'  // 移動中は十字カーソルに変更,
tolerance: 'pointer' , // 要素が重なった瞬間に入れ替え判定

がオススメです。

オプションの解説 : http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/

No.713
07/31 09:54

edit

jQuery
DOM
Ajax

JavaScriptでPHPのisset関数みたいなものを使う

JavaScriptには変数になんらかの値が入っているかどうかを検知する関数【isset】がありませんので

下記のようにして作成しておくと何かと便利になります。

function isset( data ){
	return ( typeof( data ) != 'undefined' );
}

検証コード(JavaScript)

var A = 0;		check_isset(A,'Aをテスト:');
var A = -1;		check_isset(A,'Aをテスト:');
var A = false;		check_isset(A,'Aをテスト:');
var A = null;		check_isset(A,'Aをテスト:');
var B;			check_isset(B,'Bをテスト:');
var C=[];		check_isset(C,'Cをテスト:');
var D=new Array;	check_isset(D,'Dをテスト:');
var E=new Object;	check_isset(E,'Eをテスト:');
function isset( data ){
	return ( typeof( data ) != 'undefined' );
}
function check_isset( data, text ){
	if (typeof text == 'undefined') { text=''; }
	if (isset(data)){
		alert(text+'存在します:'+isset(data)+':'+data);
	}
	else{
		alert(text+'存在しません:'+isset(data)+':'+data);
	}
}

JavaScriptの null と undefined は違う

JavaScriptの null と undefined は概念的には違うものでそれぞれ定義されています。

undefined - 変数(未定義型)の未定義値
null - オブジェクト型の未定義値

がこれを厳密に区別してコーディングすることはあまりないので特に意識はしなくていいと思います。

No.765
03/23 18:43

edit

JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】

JavaScriptで外部サイト(別ドメイン)のファイルを取得しようとすると、crossdomainの制約にひっかかってエラーとなります。
そこでCross-Domain-Ajaxプラグインを使用します。
これはYahoo Query Language (YQL)を使用してクロスドメインの壁を越えようというものです
(ですのですべてのサイトのデータが取得できるわけではありません)

● jquery.xdomainajax.js

https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

● 例1:Yahooのトップを取得します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
	uri = 'http://www.yahoo.co.jp/';
	$.get(uri, function(data){
		alert(data.responseText);
	});
</script>

● 例2:Yahooのキーフレーズ抽出APIを呼び出してみます。

appid は各自用意してください。 ajaxメソッドを呼び出していますが、【type:'POST'】は使用出来ません。 【type:'GET'】の時のみ正常に動作します。

    // Cross Domain Ajax ajax()メソッド
    jQuery.ajax({
        url: 'http://jlp.yahooapis.jp/KeyphraseService/V1/extract',
        type: 'GET',
        data: {
            appid    : 'XXXXXXXXXX',
            sentence : '庭には二羽鶏がいる',
            output   : 'json'
        },
        success: function(data) {
            alert( jQuery(data.responseText).text() );
        }
    });

簡単ですね。 おすすめです。

No.759
06/12 10:43

edit

Ajax
jQuery

jQueryによるAjax操作の基本

jQueryによるAjax操作の基本

  • きっかけとなるボタン
  • 結果を表示するDIVタグ を用意します。

● jQuery の ajax(GETメソッド)で動的にjson読み込みをした後にタグにjsonの内容をテキストに変換して表示する

<button type="button" class="btn btn-primary btn-sm" onclick="get_stripe_invoice_json('{{ $v->id }}' , this );">Invoice Json</button>
<textarea class="json_detail" id="ajax_123456789"></textarea>                    
function get_stripe_invoice_json( id, btn_obj ){
    $.ajax({
        url: 'ajax取得するURL' ,
        type:'GET',
        data:{
            'id':123456789,
        }
    })
    // on Success
    .done( (data,status) => {
        json_string = JSON.stringify(data,null, 4);
        $('#ajax_' + id).html( json_string ).fadeIn();
    })
    // on Error
    .fail( (data) => {
        alert('Ajax Error');
    })
}

● 要素の内容を書き換える( .html() )

$("#hoge").html('<p>書き換える要素</p>');

● 要素に追加する( .append() )

$("#hoge").append('今ある要素のいちばん後ろに追加します');

● 要素を動的に( test.phpを読み込んで) に追加する( .load() )

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

● 要素を削除する( .remove() )

$("#hoge").remove();

● (class="hoge"な要素の)CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

● 親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速
$(this).parent().find('.myclass'); // 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass'); // 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

● 要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

● セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}

$(function(){

$('.my_ajax_btn').on('click',function(){
    $.ajax({
        url:'./request.php',
        type:'GET',				// GET または post
        data:{
            'id':$('#userid').val(),
        }
    })
    // on Success
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Failed
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Always
    .always( (data) => {
    });
});

});

No.754
12/03 10:26

edit

jQuery
Ajax

HTML5またはcssまたはJavaScript(jQuery未使用)で画像の先読み(プリロード)を行う

● CSS、HTMLのみでプリロードを行う(全ブラウザOK)

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}
<div id="preloadedImages"></div>

● HTML5のみでプリロードを行う

IEに対応しなくていい場合は 次の link rel="preload" が簡単でいいと思います。
<head>〜ないにタグを1つ加えるだけです。これでプリロードが行われます。(表示はされません。)

<html>
<head>
 <link rel="preload" href="path/to/image1.png" as="image">
</head>
asに指定する値 ファイルの種類
audio 音声ファイル。
document <frame> や <iframe> の中に埋め込まれる HTML 文書。
embed <embed> 要素の中に埋め込まれるリソース。
fetch ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
font フォントファイル。
image 画像ファイル。
object <embed> 要素の中に埋め込まれるリソース。
script JavaScript ファイル。
style スタイルシート。
track WebVTT ファイル。
worker JavaScript ウェブワーカーまたは共有ワーカー。
video Video file.

● JavaScript(jQuery使わず)でプリロードを行う(全ブラウザOK)

var img_folder = "./assets/img/common";

var preload_images = [
	img_folder + "/pc-small-header__top--on.png" ,
	img_folder + "/pc-small-header__info--on.png" ,
];

document.addEventListener('DOMContentLoaded', function(){
	for (var i = 0; i < preload_images.length; i++) {
	    var img = new Image();
	    img.src = preload_images[i];
	}
});

No.740
09/05 21:21

edit

jQuery

オブジェクト(クラス)のメソッドを SetInterval する

■ Kazuho@Cybozu Labs: setTimeout をオブジェクト指向にしてみる

http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php

Function.prototype.applyTimeout = function (ms, self, args) {
  var f = this;
  return setTimeout(
    function () {
      f.apply(self, args);
    },
    ms);
};

Function.prototype.callTimeout = function (ms, self) {
  return this.applyTimeout(
      ms,
      self,
      Array.prototype.slice.call(arguments, 2));
};

Function.prototype.applyInterval = function (ms, self, args) {
  var f = this;
  return setInterval(
    function () {
      f.apply(self, args);
    },
    ms);
};

Function.prototype.callInterval = function (ms, self) {
  return this.applyInterval(
      ms,
      self,
      Array.prototype.slice.call(arguments, 2));
};

使い方は

this.timer_id = foo.bar.applyInterval(1000, foo, [ hoge ]); // setInterval & apply

セットした setInterval を解除するには

clearInterval(this.timer_id);

参考:http://blog.livedoor.jp/dankogai/archives/50714622.html

No.734
12/31 16:37

edit

HTML5のClient-side database(JavaScript Database)のSQL文サンプル

テーブルの作成

CREATE TABLE `test_dt ` (
  test_id   INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  test_name  TEXT    NOT NULL ,
)

データのINSERT

INSERT INTO
test_dt ( test_name, test_date ) 
VALUES ( "日本語データのテスト" , datetime("now","localtime") )

テーブルの削除

DROP TABLE test_dt;

No.730
05/02 11:42

edit

Database
HTML5

No.729
04/30 13:00

edit

HTML5のClient-side database storage(JavaScript Database)を試す

HTML5で導入されるClient-side databaseが使用できるブラウザは以下の通り

( 一部ブラウザではHTML5未対応でも GoogleGears をインストールすると使えます。)

http://gears.google.com/

Win + IE6,7,8(Gears使用)
Win + Firefox3.6(Gears使用)
Win + Chrome(Gears使用)
Win + Opera10以降
Mac + Safari 3.1 , Safari 4以降
Mac + Chrome

使用できないのは

Mac + Firefox 3.6(Google Gears 未対応)
Mac + Opera 10.10(Google Gears 未対応)

だけですね。


サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="http://gear5.googlecode.com/hg/src/javascript/gear5.js"></script>
    <script type="text/javascript" src="jkl-dumper.js"></script> 
	<title>HTML 5 DB</title>
	<meta charset="utf-8" />
</head>
<body>
<script>
var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      else{
        alert('db ok');
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    // ...
  }
// select
db.transaction(
    function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)');
        var id = 12113;
        var name = 'ziddy';
        tx.executeSql("INSERT INTO AddressList VALUES (?, ?)", [id,name] ,
            function(tx, rs) { 
                alert(rs.insertId);
                var dumper = new JKL.Dumper();
                alert( dumper.dump( rs ) );
            }
        );
    } ,
    function(error) {
        alert( 'transaction error : ' + error.message');
      }
);
</script>
</body>
</html>

http://builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/story/0,3800087566,20385468,00.htm

http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

No.727
03/23 18:46

edit

Database
HTML5

Javascriptで(GPS,Wifi)位置情報を検出する

Javascriptで(GPS,Wifi)位置情報を検出するには下記のようにします。

ただし、Firefox3、iPhone,iPadのSafariでないと動作しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>HTML 5 GeoLocation Demo</title>
<script type="text/javascript">
if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function(position) {  
   s = position.coords.latitude+","+position.coords.longitude;
    alert(s);
 }); 
} else {
  alert("I'm sorry, but geolocation services are not supported by your browser.");
}
</script>
</head>
<body>
</body>
</html>

http://labs.mapion.co.jp/blog/javascript/firefox35geolocation_api.php

No.724
04/05 14:40

edit

JavaScriptでCookie(クッキー)を簡単に扱う

■ jQuery.cookie.js

● ダウンロードはこちら(ZIPボタンをクリックでダウンロード開始)

https://github.com/carhartl/jquery-cookie

● CDNはこちら

<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

使い方は

var hoge = $.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // クッキーの削除
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
$.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days}
document.write($.cookie('cookiename'));//読み出し
No.700
05/16 15:23

edit

jQuery
Cookie

JavaScriptで半角カタカナを判別する

以下のようなコードを記述します。

var text = '半角カタカナです。';
if ( text.match(/[ア-ン゙゚]+/) ){
	alert('半角カタカナが使用されています');
}

No.691
08/06 21:48

edit

正規表現

JavaScriptで現在時刻を取得する

JavaScriptで現在時刻を取得するには下記のようにします。

var d  = new Date() ;
var dw = new Array('日', '月', '火', '水', '木', '金', '土');

var year  = d.getFullYear();
var month = d.getMonth()+1;
var day   = d.getDate();
var hour  = d.getHours();
var min   = d.getMinutes();
var sec   = d.getSeconds();
var dow   = dw[d.getDay()];

now_text = year + '/' + month + '/' + day + '(' +dow + ')' + hour + ':' + min + ':' + sec; 
alert(now_text);
No.687
04/20 14:48

edit

FlashのバージョンをJavaScript(SWFObject)で取得する

■ SWFObject

http://code.google.com/p/swfobject/downloads/list

FlashのバージョンをJavaScriptで取得するにはSWFObjectを使用します。

サンプルコード

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    alert(swfobject.getFlashPlayerVersion().major );
    alert(swfobject.getFlashPlayerVersion().minor );
    alert(swfobject.getFlashPlayerVersion().release );
</script>


No.677
03/20 12:22

edit

フォームに適当な値を自動で入力するブックマークレット(フォーム自動入力BookMarklet)

Firefox の WebDeveloper みたいなのを、Safari, Google Chrome で利用したいときに。
(下記リンクをブックマークバーにドラッグしてください)

フォーム自動入力Bookmarklet


登録できてもうまく動作しない時は ↑フォーム自動入力Bookmarklet のアドレスをコピーして
ブックマークレットのアドレスに再度ペーストしてください。


No.665
06/16 16:07

edit

Bookmarklet
フォーム

JavaScriptでURIをパースする parseuri.js

■ parseuri.js

http://blog.stevenlevithan.com/archives/parseuri

ここからparseuri.jsをダウンロードする。


使い方は parseuri.js を読み込ませた状態で

var p = new parseUri(location.href);
alert(p.host);

とします。

host の代わりに以下の文字列が使用できます

source:URI全て
protocol:プロトコル(http または https または....)
authority:ベーシック認証等のユーザー名、パスワード+ホスト名
userInfo:ベーシック認証等のユーザー名、パスワード
user:ユーザー名
password:パスワード
host:ホスト名(www.test.com)
port:ポート番号
relative:ドキュメントルートからのURI(getパラメーター含む)
path:ドキュメントルートからのURI(getパラメーター含む)
directory:ディレクトリ
file:ファイル名
query:getクエリー
anchor:ジャンプ先 (#top)
添付ファイル1
param.png ( 2.5 KBytes ) ダウンロード

ドロップダウンリストを動的にJavaScriptで生成する

ドロップダウンリスト( = プルダウンメニュー = オプションメニュー)の内容を動的にJavaScriptで書き換えます

このようなHTMLの場合

<form name="FM">
<select name="myselect" >
<option value="value_aaa">AAA</option>
<option value="value_bbb">BBB</option>
</select>
</form>

このようなスクリプトで変更出来ます。

opt_array = [
	{ text: 'メニュー1', value: 'menu1' } ,
	{ text: 'メニュー2', value: 'menu2' } ,
	{ text: 'メニュー3', value: 'menu3' }
];
_create_dropdownlist( 'FM', 'myselect', opt_array )

function _create_dropdownlist( form_name, select_name, select_array ){
	// length
	document[form_name][select_name].length = select_array.length;
	
	// text, value
	var i;
	for ( i=0; i<select_array.length; i++){
		document[form_name][select_name].options[i].text = select_array[i].text;
		document[form_name][select_name].options[i].value = select_array[i].value;
	}
}

起動方法は

_create_dropdownlist( フォーム名, selectタグのname, 設定したいメニューのハッシュの配列 )

です。

No.630
10/05 16:27

edit

ラジオボタン <radio name="form_name"></radio>の状態を変える

■ ラジオボタン

<input type="radio" name="radio_button_name" value="yes">はい
<input type="radio" name="radio_button_name" value="no">いいえ

の選択状態変更するJavaScript。


■ 関数名(_change_radiobutton)

function _change_radiobutton( form_name, value ){
	var element = document.getElementsByName( form_name );
	if (element.length == 0){ alert( '<input type="radio" name="' + form_name +'"> is not find.'); return; }
	

	var flag = false;
	for (var i=0; i<element.length; i++) {
		if(element[i].value == value){ element[i].checked = true; flag = true; }
		else{ element[i].checked = false; }
	}
	if(! flag){ alert( 'DATA [' + value + '] is not find in <input type="radio" name="'+form_name+'"> '); }
}

■ Usage

_change_radiobutton( 'radio_button_name', 'no' );

jQuery Mobile を使用すると次のようにも記述することができます

jQuery('input:radio').prop('checked',true).checkboxradio( 'refresh' );
No.593
03/03 10:01

edit

ドロップダウンリストの状態をJavaScriptで動的に変更する

ドロップダウンリスト(オプションメニュー)の状態をJavaScriptで動的に変更する

<select id="prefecture_id" name="prefecture_name" >
<option value="北海道">北海道</option>
<option value="沖縄">沖縄</option>
</select>

● 関数名(_change_dropdown_id)

function _change_dropdown_id( id_name, value ){
	var element = document.getElementById(id_name);
	if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }	
	var flag = false;
	for (var i=0; i<element.options.length; i++) {
		var option = element.options[i];
		if (option.value == value){
			if (flag){
				option.selected = false;
			}
			else{
				option.selected = true; flag = true;
			}
		}
		else{ option.selected = false; }
	}
	if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

● 関数名(_change_dropdown_name)

function _change_dropdown_name( form_name, value ){
    var element = window.document.getElementsByName(form_name)[0];
    if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }
    var flag = false;
    for (var i=0; i<element.options.length; i++) {
        var option = element.options[i];
        if (option.value == value){
            if (flag){
                option.selected = false;
            }
            else{
                option.selected = true; flag = true;
            }
        }
        else{ option.selected = false; }
    }
    if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

● Usage(使い方)

// IDでの呼び出し
_change_dropdown_id( 'prefecture_id', '沖縄' );
// フォーム名での呼び出し
_change_dropdown_name( 'prefecture_name', '沖縄' );

ちなみに ドロップダウンリストを 操作できないような状態にするには

document.getElementById('prefecture').disabled = true; // 操作不可能にする
document.getElementById('prefecture').disabled = false; // 操作可能にする 
No.592
06/15 18:24

edit

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

● 1.jQueryをダウンロード

http://jquery.com/ からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

● 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm から【jquery.field.js】をダウンロードします。

● 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

● 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。 とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}
No.591
08/07 10:06

edit

jQuery
フォーム

JavaScript(jQuery)でリッチテキスト編集(wysiwyg)エディタ

JavaScript(jQuery)でリッチテキスト編集できるライブラリを探してみる。

■ cleditor(jQueryプラグイン)

http://premiumsoftware.net/cleditor/

■ jwysiwyg(jQueryプラグイン)

https://github.com/akzhan/jwysiwyg (ダウンロード)

http://akzhan.github.com/jwysiwyg/help/examples/ (デモ)

■ Yahoo! UI (おすすめ)

http://developer.yahoo.com/yui/editor/

http://developer.yahoo.com/yui/examples/editor/flickr_editor.html

■ open wysiwyg (Safari2×)

http://www.openwebware.com/products/openwysiwyg/demo.shtml

■ FCKeditor(Safari2×)

http://www.fckeditor.net/

■ TinyMCE(Safari2×)

http://tinymce.moxiecode.com/index.php


No.589
04/28 12:46

edit

jQuery

prototype.js を使わずにDOMオブジェクトのスタイルを取得する

JavaScriptでのスタイルの取得は

prototype.js を使って

Element.getStyle(element, cssProperty)	

ですが、

Prototype.jsを使わず(JavaScriptだけで)行う場合は

var style = element.currentStyle || document.defaultView.getComputedStyle(element, '') 
alert(style.width);

でOKです。

参考:http://d.hatena.ne.jp/amachang/20070611/1181554170

No.586
12/05 13:22

edit

prototype.js

IE6 で<select></select>より上にレイヤーを配置する

IE6では <select>オブジェクトが常に最前面にきてしまうので、それより上にレイヤーを重ねることができない。

それを回避するにはレイヤーよりz-indexが小さいインラインフレームを挿入すればいいみたいです

参考:

http://programming-magic.com/?id=64

http://oshiete1.goo.ne.jp/qa2331121.html

No.584
02/13 18:08

edit

最も簡単な画像のロールオーバー導入方法 (jQuery)

■ jQuery用プラグイン jquery.easyrollover.js を使用します。

■ 1. scriptファイルを読み込ませます

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

■ 2. ロールオーバー画像ファイル名の最後に _on をつける。

例: 【image.gif】 の場合 【image_on.gif】

■ 3. HTMLの<img>タグに属性 class="rollover" を追加する

<img src="image.gif" >
  ↓
<img src="image.gif" class="rollover" >

以上の手順で完了。

簡単です。

jquery.easyrollover.js のダウンロードはこちらから↓

添付ファイル1
No.579
01/21 10:20

edit

添付ファイル

jQuery
画像

jQuery , prototype.js 用「ツールチップ(吹き出し説明)」表示ライブラリ

「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。

Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインメインで探してみました。

■ script.js ( prototype.js jQuery不必要 )

http://www.leigeber.com/2008/06/javascript-tooltip/

・おすすめ

・ツールチップがフェードして現れます

■ cooltips ( 要prototype.js , script.aculo.us )

http://okonet.ru/projects/tooltips/index.html

・フェードエフェクトで出現するツールチップ

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip ( 要 jQuery )

http://www.codylindley.com/blogstuff/js/jtip/

・Ajaxで動的にツールチップの中身を読み込んで表示します。

・日本語テキストを扱うにはハックする必要がありそう…。

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip ( 要 jQuery )

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

title属性やファイル名をツールチップとして表示させるというライブラリ。

オンマウスになった瞬間に表示されます。

使い方

<script type="text/javascript" src="jquery.tooltip.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" >
<script>
jQuery('img').tooltip({
    delay: 0, 
    track: true ,
    showURL: false
});
</script>

オプション

http://docs.jquery.com/Plugins/Tooltip/tooltip#toptions


その他 jQueryライブラリはこちらで取り上げられてます

http://coliss.com/articles/build-websites/operation/javascript/356.html

No.564
08/01 10:19

edit

jQuery
prototype.js

DOMプロパティ

DOMプロパティ一覧

attributes[]	〔ノードの属性リストを取得〕
childNodes[]	〔子ノードのリストを取得〕
className		〔クラス名の取得・設定〕
dir				〔テキスト・ディレクションの取得・設定〕
firstChild		〔最初の子ノードを取得〕
id				〔ID名の取得・設定〕
innerHTML		〔ノード内のHTML要素の取得・設定〕
innerText / textContent	〔ノード内のプレーンテキストの取得・設定〕
lang			〔言語コードの取得・設定〕
lastChild		〔最後の子ノードを取得〕
localName		〔ローカル名の取得〕
namespaceURI	〔名前空間のURIの取得〕
previousSibling/nextSibling	〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
nodeName		〔ノードの名前を取得〕
nodeType		〔ノードの型を取得〕
nodeValue		〔ノードの値を取得〕
ownerDocument	〔オーナードキュメントを取得〕
parentNode		〔親ノードを取得〕
prefix			〔名前空間の識別子を取得〕
tagName			〔タグ名の取得・設定〕
title			〔タイトル属性の取得・設定〕

JavaScript/DOM ? DOMプロパティ | PHP & JavaScript Room

No.557
05/28 01:07

edit

DOM

jQuery html()メソッドと DOM.innerHTML の違い

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意!

No.553
05/27 15:37

edit

prototype.js
jQuery

prototype.js のフォームシリアライズ(Form.serialize)をテストする

prototype.js の便利な機能に

Form.serialize('フォームのid名前');

というのがありますが、これをテストしてみます。(↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと)

実行してみてわかることは

<textarea name="text" rows="3" id="text_id">bbb
bbb
bbb
</textarea>

のところは

text=bbb%0Abbb%0Abbb%0A

という値が帰ってくるということ。調べたとろ

  • htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。
  • id ではなく name の値でシリアライズされる。

という事みたいです。

別ウィンドウのフォームをシリアライズするには。。。

別ウィンドウの DOM document インターフェイスは

var parent_document = window.opener.document

とすると取得できます。(openerの document を取得)

添付ファイル1
No.551
01/11 20:34

edit

添付ファイル

prototype.js

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

JavaScript で 動的に hidden属性<input type=”hidden” name=”name” value=”value”>を作成する

意外に登場する機会が多いので関数として登録しておく

● hidden属性を作成する make_hidden()

/**
 * make_hidden : hiddenを作成する : Version 1.2
 */
function make_hidden(name, value, formname) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
    if (formname) {
    	if ( document.forms[formname] == undefined ){
    		console.error( "ERROR: form " + formname + " is not exists." );
    	}
    	document.forms[formname].appendChild(q);
    } else {
    	document.forms[0].appendChild(q);
    }
}

使い方:引数は( '名前' , '値', 'フォーム名' )

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の<form>タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます

また作成した hidden 属性を削除するには以下の関数を使用します

● hidden属性を削除する delete_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}

● hidden属性を作成する make_hidden() (既にある存在するフォーム名で作成しようとするとスキップ)

function make_hidden(name, value, formname, override_flag) {
  var q = document.createElement('input');
  q.type = 'hidden';
  q.name = name;
  q.value = value;
  var form_dom;
  if (formname) {
    form_dom = document.forms[formname];
  } else {
    form_dom = document.forms[0];
  }

  if ( ! override_flag ) {
    if (form_dom[name]) {
      console.log('フォーム(' + name + ')が既に存在するのでhiddenを作成しません。');
      return false;
    }
  }

  form_dom.appendChild(q);
  return true;
}

● jQueryを使用してhidden属性を作成する

$('<input>').attr({
    type    : 'hidden',
    name    : 'redirect_url',
    value   : redirect_url
}).appendTo('#after12_form');
No.540
11/12 14:08

edit

DOM
フォーム

JavaScriptで四捨五入して小数点xxケタにする

JavaScriptで四捨五入して小数点xxケタにするには、

数値.toFixed(四捨五入後のケタ数)

とします。

■ 例

d1=( 1 / 3 ).toFixed(2);	// 小数点3ケタで四捨五入して、小数点2桁にする。
// 結果は 0.33 です

d1=( 3 / 2 ).toFixed(0);	// 小数点1ケタで四捨五入して、小数点なしにする。
// 結果は 2 です
No.539
04/19 17:52

edit

これは便利!好きなブラウザで JavaScript を即座に実行【jsbin】【jstests】

◆ jsbin

http://jsbin.com/

◆ jstests

http://www.3site.eu/jstests/jhp/


上記サイトを開くと上部にソースを書くエリアが表示されますのでそこにJavaScriptコードを書きます。

記述後に左下の白いエリアをマウスでクリックすると即座に実行されます。

便利!

No.534
04/09 18:22

edit


<input type="button">にname=”submit” は使用できない

JavaScriptでフォームの送信(submit)を行うときは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<body>
<form name="orderform" action="http://www.yahoo.co.jp/">
<input type="button" value="go" onclick="document.orderform.submit();">
</form>
</body>
</html>

このように記述しますが、このとき

<input type="button" value="go" onclick="document.orderform.submit();">

<input type="button" name="submit" value="go" onclick="document.orderform.submit();">

とするとエラーになるので注意。

<input name="submit" type="submit">とするとJavaScriptでエラーとなる

<form name="form1">
<input name="submit" type="submit" value="送信">
</form>

<script>
document.form1.submit();
</script>

は Object not found エラーとなります。

name="submit"

を削除するか別の名前に変更するとなおります。

No.526
10/02 11:08

edit

エラー対処

入力文字数によってテキストフィールド<textarea>のサイズを変える

● A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

https://github.com/janjarfalk/jquery-elastic

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

● B. テキストエリアを動的に変更する。【autoresize.jquery.js】

https://github.com/jackmoore/autosize
jQueryを使用したくない場合はこちら

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

● C. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/ ダウンロード: http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});
No.520
12/13 14:34

edit

prototype.js
jQuery

外部JavaScriptによるWindows IE7 の「ランタイムエラー」に対処する

JavaScriptを外部ファイルにしたり、別ドメインのJavascriptを

<script language="JavaScript" src="http://www.testserver.local/test.js"></script>

というふうに呼び出したりすると Windows版IE7 で「ランタイムエラー」が起きることがあります。

この場合の対処方法は

Javascriptが記述してあるファイルの

  • 文字コードを「UTF-8」
  • 改行コードを「CR」+「LF」

にする。

です。これで直ると思います。


またIE7 , IE8 では prompt を使うと

このWebサイトはスクリプト化されたウィンドウを使用して情報を依頼しています。このWebサイトを信頼している場合には、ここをクリックして、スクリプト化されたウィンドウを許可してください

という警告が出て、ユーザーに不必要な動作をさせることになるので気になる場合は使用しないように。

jQuery Alert Dialogs

http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

等で代用するのがいいでしょう。

No.519
02/18 11:59

edit

エラー対処

外部JavaScriptやcssファイルを動的に読み込み(遅延読み込み)HTMLページ描画を高速にする

外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう!

JavaScriptは通常の<head></head>タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。

そこで外部JavaScriptファイルを動的(HTMLレンダリングと同時、またはDOM Ready時)に読み込むよう変更します。


■ 方法1-1. async をつけて読み込む

今までJavaScriptは以下のように読み込んできました。

<script src="myfile.js"></script>

これに async を追加します

<script src="myfile.js" async></script>

これで非同期読み込みとなり、「Javascript読み込み」と「HTMLページ描画」が同時に行われ、高速にページを表示することができます。

ただしasync属性の特徴として

・.js ファイル読み込み完了と同時にその .jsファイルを実行する

・実行順序がバラバラ(読み込み完了順)になる

がありますので jQuery プラグイン等 jQueryの存在が前提となるスクリプトがある場合はオススメしません

また

document.addEventListener('DOMContentLoaded', function(){
// 何かしらの処理
});

を使うときも async で読み込まれたプログラムの場合はうまく動作しませんので注意が必要です。



■ 方法1-2. defer をつけて読み込む(とりあえずJavaScriptはよくわからないけど高速化したいという方にはこちらの方をおすすめします。)

async属性の代わりにdefer属性というのもあります。

違いは

async :  .jsファイル読み込み直後に実行。『複数の .jsファイルを読み込む場合に実行順序は保証されない』
defer :  DOMツリー構築完了直後(DomReadyハンドラ前)に実行。『実行順序は保証される』

です。どちらもDOM構築を妨げない(HTMLレンダリングが高速)のは同じです。

記述方法は

<script src="myfile.js"></script>

これに defer を追加します

<script src="myfile.js" defer></script>

簡単ですのでこちらをおすすめします。


■ 方法2. 遅延読み込みスクリプトで対応する(古いけど確実なやり方)

例:3つのJavaScriptファイル『aaa.js』『bbb.js』『ccc.js』と1つのCSSファイル『test.cs』を遅延読み込みする(要:jQuery)

// dom ready時に読み込み開始(事前にjQueryを読み込ませておいてください。)
$(function(){
		alert('js load start !!! ');
		require_onload( ['aaa.js', 'bbb.js', 'ccc.js', 'test.css'] );
});

function require_onload( arg ) {
	if (is_array(arg)){
		var element = [];
		for(var i=0; i<arg.length; i++){
			if ( arg[i].match(/\.css$/) ){
				add_child_css(arg[i]);
			}
			else if ( arg[i].match(/\.js$/) ){
				add_child_js(arg[i]);
			}
			else{ alert('check url : ' + arg[i]) }
		}
	}
	else{
		if ( arg.match(/\.css$/) ){
			add_child_css(arg);
		}
		else if ( arg.match(/\.js$/) ){
			add_child_js(arg);
		}
		else{ alert('check url : ' + arg[i]) }
	}
}
function add_child_js(src){
	var element = document.createElement("script");
	element.src = src;
	document.body.appendChild(element);
}
function add_child_css(src){
	var css_element = document.createElement('link');
	css_element.type = 'text/css';
	css_element.rel  = 'stylesheet';
	css_element.href = src;
	document.body.appendChild(css_element);
}
function is_array(obj) {
	return Object.prototype.toString.call(obj) === '[object Array]';
}

これを<head>〜</head>タグ内に設置します。(</body>タグ直前でなくてもOK。)

3行目に

		alert('js load start !!! ');

があるので、読み込み開始時にアラートが表示されます。(もうその時にはHTML描画(正確にはDOM構築)が終わっていることが確認できると思います。)

実際使うときにはこの行は削除してください。

このスクリプトを使うと全てのページ描画準備が終わった段階(DOM Ready)で .js .css を読み込みに行きますので高速になります。

またページレイアウトに関係ある .css を遅延読み込みするとHTML描画とCSSスタイルの読み込み・適用が同時に行われるので画面が一瞬乱れる可能性があります。

ですのでWEBフォントの .css など レイアウトに関係ない .css を遅延読み込みするといいでしょう。

No.517
02/13 14:37

edit

高速化
HTML5

JavaScriptソースコードを圧縮してサイズを小さくする。またはソースを整形する

JavaScriptのソースコードを圧縮してファイルを軽くしたい。

という時がたまにあります。(ブックマークレット作成時とか。)

そこでソースコード圧縮サービスサイト。

・YUI Compressor

http://refresh-sf.com

YUI Compressor などのアルゴリズムを使用してHTML, JavaScript, CSSの圧縮ができます。


・packer

http://dean.edwards.name/packer/

なお行頭が ;;; で始まっているコメントはデバッグ用コメントと見なされ圧縮時に削除されます。便利!

;;; alert('test!'); // この行は圧縮時に削除されます。

・Creativyst® JavaScript Compressor

http://www.creativyst.com/Prod/3/


・逆にソースコードを整形する場合はこちら

http://jsbeautifier.org/


No.513
07/07 12:55

edit

DOM要素(<div>タグ)をJavaScriptで削除する

DOM要素をJavaScriptで削除するには次のようにします。

次のような html 構造になっている場合

<div id="hoge">
 <div id="aaa">テストA</div>
 <div id="bbb">テストB</div>
 <div id="ccc">テストC</div>
</div>

id="hoge" を削除するには

_delete_element('hoge');

function _delete_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	var dom_obj_parent = dom_obj.parentNode;
	dom_obj_parent.removeChild(dom_obj);
}

子要素 id="aaa" id="bbb" id="ccc" を削除するには次のようにします。

_delete_child_element('hoge');

function _delete_child_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	while (dom_obj) dom_obj.removeChild(dom_obj.firstChild);
}

こちらにもっと詳しく書いてあります : ライブラリを使わない素のJavaScriptでDOM操作

No.512
06/14 09:36

edit

DOM

JavasScriptでウィンドウの幅、高さを取得する。

//-------------------------------- get_browser_width
function get_browser_width() {
	if ( window.innerWidth ) { return window.innerWidth; }  
	else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }  
	else if ( document.body ) { return document.body.clientWidth; }  
	return 0;  
}
//-------------------------------- get_browser_height
function get_browser_height() {
	if ( window.innerHeight ) { return window.innerHeight; }  
	else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; }  
	else if ( document.body ) { return document.body.clientHeight; }  
	return 0;  
}

参考:http://d.hatena.ne.jp/onozaty/20060802/p1

参考:http://www.sasaraan.net/program/js/jswndstate.html

No.511
04/05 17:03

edit

htmlソースからDOM生成用のJavaScriptコードを吐くツール【DOM Tool】

◆ DOM Tool

http://goo.gl/qz5UKT

便利です。

htmlソースを入力して【Create DOM Statements】ボタンを押すと

DOM生成用のJavaScriptコードを吐いてくれます。


例:<div id="text"></div>というhtmlコードを JavaScript で実行したい。

HTML:

<div id="test"></div>

OUTPUT:

var div1=document.createElement('div');
div1.setAttribute('id','test');

No.509
03/18 10:19

edit

DOM

Ajaxによって動的に書き換えられたhtmlソースコードを表示する方法。

Ajax(いわゆる)によってhtmlが動的に書き換えられることが最近多くなってきていると思います。 そこで動的に書き換えられたページを確認するブックマークレット
Kazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示する

Safari用ブックマークレット
Javascript で書き換えられた後の Webページの内容を表示する (groundwalker.com)

このページで表示されるリンクをブックマークに入れて、Ajaxなサイトに行きページが書き換えられた後にブックマークを起動すると新しいウィンドウでソースコードが表示されます。

No.498
02/09 14:32

edit

Ajax
Bookmarklet

n桁のランダムなIDを作成する

下記サイトより引用です。

function create_privateid( n ){
    var CODE_TABLE = "0123456789"
        + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        + "abcdefghijklmnopqrstuvwxyz";
    var r = "";
    for (var i = 0, k = CODE_TABLE.length; i < n; i++){
        r += CODE_TABLE.charAt(Math.floor(k * Math.random()));
	}
	return r;
}

◆ 使い方は桁数を指定して呼び出します。(下記の例の場合6桁のランダムなIDを取得します。)

id=create_privateid(6);
alert(id);

引用元:http://www.graviness.com/virgo/javascript/d010926.html

No.497
09/24 16:20

edit

ソースコードを色づけするJavaScriptライブラリ【google/code-prettify】

● google/code-prettify

すごくいいですこれ。
http://code.google.com/p/google-code-prettify/

使い方

1. js を cdnから読み込む

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2. スタイルをセット

<style type="text/css">
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal; }
pre.prettyprint {
	border: 1px solid #ccc;
	padding: 0;
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	font-size: 14px;
}
.prettyprint li {
	background: #f6f6f6;
	padding-left: 10px;
}
.prettyprint li:nth-child(1) {
	padding-top: 5px;
}
.prettyprint li:last-child {
	padding-bottom: 5px;
}
.prettyprint ol {
	background: #ededed;
}
</style>

3. ソースコードを貼り付けて表示

次のクラスをつけると適応されます
.prettyprint : ソースコードを色付けして表示 .linenums : 行番号を表示させる

<pre class="prettyprint linenums">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}</pre>

google/code-prettify の 表示例

添付ファイル1

prototype.js を使ってイベントを登録する。

javascript 実行イベントを毎回 <onload="testfunc();">みたいに入力するのは面倒なので

prototype.js を使って登録する。

Event.observe(window, 'load', testfunc, false);

又は無名関数を使うとこのように書ける

Event.observe(window, 'load', function(){
   alert('test');
});

書式は

Event.observe( 追加する要素 , イベント , 関数 , 段階 );

です。


No.461
09/08 12:46

edit

prototype.js

JavaScriptで数字3桁ごとにコンマを打つ

● JavaScriptで数字3桁ごとにコンマを打つ

<html><body>
<script>
var data1=123456789;
alert(data1);

data2=comma(data1);
alert(data2);

function comma(num) {
    return num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
} 
</script>
</body>
</html>
No.440
09/18 13:55

edit


JavaScriptでURIエンコード(URLエンコード)を行う

javaScriptでURIエンコードを行うには -encodeURI -encodeURIComponent -escape の関数を使う事ができる。 この3つの違いはエンコードしない文字に違いがあって

● encodeURI がエンコードしない文字列

;/?:@&=+$-_!~*.,()a#'

● encodeURIComponent がエンコードしない文字列

-_!~*.()a'

● escape がエンコードしない文字列

*+-_./

となっています。 なので(http://〜)を含むURLをエンコードするには、コロンやスラッシュを変換したい用途、したくない用途によって encodeURIComponent , encodeURI を使い分けるのがいいでしょう。

通常 encodeURIComponent を使うのがいいと思います。 また escape は 全角文字など文字コードが256以上の値を持つ文字は %uxxxx という形式に変換しますのでURLエンコード用途では使用しないほうがいいでしょう。

● 使い方

e_uri = encodeURIComponent( 'http&#58;//xxx.yyy.zzz/aaa.cgi?bbb=ccc' );

● 動作サンプルコード

[https://pgmemo.tokyo/data/filedir/438_1.html:title=こちらの動作サンプルコード]をご使用ください。

●注意 1.

これらの関数はUTF-8でエンコードするのでそれ以外の文字コードを使ったページの場合は 使えません。 shift_jis , euc-jp でurlエンコードを行いたい場合は http://www.junoe.jp/downloads/itoh/enc_js.shtml こちらの関数を使うといいでしょう。

●注意 2.

URLデコードするときには decodeURIComponent , decodeURI を使用しますが、これらの関数はデコードできない文字が含まれるときエラーでスクリプト自体を終了させるので、必ず try catch しましょう。

添付ファイル1

script.aculo.usを使ったフェードイン、フェードアウト エフェクト

script.aculo.usのフェード効果を使います。

<div id="test">テキスト</div>    

という要素に対してフェードイン効果を加えるには

と記述します。

またオプションで
>duration(フェードイン、アウトする時間(秒))デフォルト値:1.0  
>from:(開始する透明度 0.0〜1.0 の範囲内で指定)デフォルト値:0.0  
>to:(終了時の透明度 0.0〜1.0 の範囲内で指定)デフォルト値:1.0  

が使えるので、オプションを適用した記述は以下のようになります。

```Effect.Appear( 'test', { duration:3.0, from:0.0, to:0.5 } );```


No.426
08/23 12:42

edit

ある要素にCSS、スタイルシートプロパティをJavaScriptでセットする

■ 1. prototype.js を使います

id="test" な要素に プロパティを追加します。

  Element.setStyle('test', 
  { 
	"font-size" : "x-small" ,
	"line-height" : "20px"
  });


■ 2. prototype を使わずに記述します。

http://bmky.net/text/note/javascript-css.html


No.425
11/15 10:48

edit

prototype.js

htmlページ内のdiv のX,Y座標位置を取得する

■ ライブラリ bytefx を使用する

http://www.devpro.it/bytefx/

<script type="text/javascript" src="../js/lib/bytefx.js"></script>
objX = bytefx.$position(document.getElementById('ID名')).x;
objY = bytefx.$position(document.getElementById('ID名')).y;

で取得できます。便利。

■ prototype.js を使う。

1.6系
var offset = $('elementID').positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

1.5系
var off set = Position.positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

■ yui(Yahoo! User Interface Library)を使用する方法はこちら

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html

yui を使うとかなり簡単に座標位置を取得できます。

<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>

でyuiライブラリを読み込んでおいて

position = YAHOO.util.Dom.getXY("myBox");
alert( position );

で取得できます。

ただし Windows版IE は top,left 共に2pxずつ多めに取得されてしまいますので、

ブラウザ判別をして 2px 引いてあげる必要があります。

また座標位置が正確に取得できないことも多々ありますので注意

参考:ghostbass1.4β - 要素の位置を取得する(正解?)


No.424
03/16 14:04

edit

prototype.js
YUI

配列をランダムに並び替える

配列 array をランダムに並び替える。

for (i=0 ; i<array.length; i++){
var tmpA, tmpB, rnd;
rnd=Math.floor(Math.random() * array.length);
tmpA=array[i];
tmpB=array[rnd];
array[i]=tmpB;
array[rnd]=tmpA;
}

例:

<script language="javascript">
array=new Array(
'カリーニ' ,
'ロドリゲス' ,
'レコバ' ,
'フォルラン' ,
'エストジャノフ'
);
document.write(array+"¥n");
for (i=0 ; i<array.length; i++){
var tmpA, tmpB, rnd;
rnd=Math.floor(Math.random() * array.length);
tmpA=array[i];
tmpB=array[rnd];
array[i]=tmpB;
array[rnd]=tmpA;
}
document.write(array+"¥n");
</script>
No.395
09/04 20:14

edit

配列

JavaScriptのSetTimeoutで 疑似sleep(遅延実行) を実現する / 変数を渡す

● JavaScriptの setTimeout を使って遅延実行する

setTimeout を使った例 : 次のコードを実行すると結果はどうなるでしょう?

setTimeout( function() {
    console.log('aaa');
    console.log('bbb');
}, 1500 );
console.log('ccc');

結果 : 「ccc」→「aaa」→「bbb」 の順で表示されます。

ccc
aaa
bbb

※ 正確には setTimeoutは遅延実行です。(指定時間たってから実行するようタイマーをセットする。) 上記の例ですとブラウザのコンソールに 'ccc' と表示されてから 1.5秒後にaaa, bbb が表示されます。

● setTimeout に変数を渡す

setTimeout で 呼び出す関数に引数を渡すには遅延時間の後に引数を渡します。

for (var i = 0; i < 10; i++) {
	setTimeout( function(data) { document.write(data+"<br>\n"); }, i*500, i );
}

●settimeout に オブジェクトのメソッドを指定する

my_method : function() {
	var _this = this;
	this.timer_id = setTimeout( function(){ _this.method(); },500);
}
No.279
09/03 17:57

edit

jQuery, prototype.js でラジオボタンの値を取得する

jQueryでは次のように記述します

// <input name="myform" type="radio" value="yes" />の値を取得
val = $("input:radio[name='myform']:checked").val();

prototype.js では選択されたラジオボタンの値を取得する方法がないみたい。。。

なので↓のようにする

// フォーム name="FM"  ラジオボタン name="radio_flag" の値を取得する 
val = Form.serialize($(FM)).toQueryParams()['radio_flag'];

■ prototype.js を使わない方法

// ラジオボタン name="my_radio" の値を取得
function getRadio() {
    var radioGroup = document.forms[0].my_radio;
    for (i=0; i<radioGroup.length; i++) {
        if (radioGroup[i].checked == true) {
            return radioGroup[i].value
        }
    }
}
No.241
02/12 17:45

edit

prototype.js
jQuery

IEでどのレンダリングモードが適用されているか調べる

alert(document.compatMode);

(戻り値)

・CSS1Compat ( 標準準拠モードの時 )

・BackCompat ( 互換モードの時は )

Safariでは undefined が返ってくるみたい

No.152
04/12 18:01

edit