Labs

JavaScriptでテキストを一文字ずつ分割。

2023.05.18 / Labs

JavaScriptでテキストを一文字ずつ分割するためのスクリプトです。

あらかじめ対象のテキストには「split-text」というクラスをつけておいて、
splitText()を実行すると、一文字ずつタグで囲まれて分割されます。
囲むタグの変更には、splitText({tag:”span”})とパラメータを与えることで任意のタグを反映できます。

上記の「!text.match(/[\s ]/)」の箇所で、半角スペースと全角スペースは対象外としています。

JavaScriptでシンプルなタイマーのサンプル。

2023.04.30 / Labs

JavaScriptで一定時間ごとに処理を実行するための、シンプルなタイマーのサンプルです。

使い方は「setTimmer」オブジェクトを作成して、引数に実行したい関数と時間を設定します。

上記では5秒ごとに、コンソールログに「テスト」と出力されます。
タイマーの一時停止には「pause()」、経過時間のリセットには「reset()」、再開には「resume()」を実行します。

FullCalendarバージョン4の設置サンプル。

2019.08.14 / Labs

カレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。
FullCalendarのJavaScript、CSSの各ファイル(計4点)はCDNから読み込んでいます。
サンプルはこちら

日本語化には標準で各言語に対応(ドキュメント)していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。
イベント情報のJSONファイル(events.json)は次のように記述しています。外部ファイルではなく、直接記述でもOKです。

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

 

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

jQueryで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

 

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

 

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

「test.svg」ファイルの中身はこちら

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。