AlmondlabAlmondlabNotesLabsTagsProfileContactHomeLabsJavaScriptでテキストを一文字ずつ分割。LabsJavaScriptJavaScriptでテキストを一文字ずつ分割するためのスクリプトです。content;});}あらかじめ対象のテキストには「split-text」というクラスをつけておいて、splitText()を実行すると、一文字ずつタグで囲まれて分割されます。囲むタグの変更には、splitText({tag:”span”})とパラメータを与えることで任意のタグを反映できます。]/)」の箇所で、半角スペースと全角スペースは対象外としています。JavaScriptでシンプルなタイマーのサンプル。LabsJavaScriptJavaScriptで一定時間ごとに処理を実行するための、シンプルなタイマーのサンプルです。Date();callback();}}使い方は「setTimmer」オブジェクトを作成して、引数に実行したい関数と時間を設定します。5000);上記では5秒ごとに、コンソールログに「テスト」と出力されます。タイマーの一時停止には「pause()」、経過時間のリセットには「reset()」、再開には「resume()」を実行します。timmer.resume();123timmer.reset();timmer.pause();timmer.resume();FullCalendarバージョン4の設置サンプル。LabsJavaScriptJSONカレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。FullCalendarのJavaScript、CSSの各ファイル(計4点)はCDNから読み込んでいます。//有効期間を当月1日から12ヶ月後(1年後)に設定します。date_now,//有効期間を当月1日から12ヶ月後(1年後)に設定します。id="calendar"></div></body></html>日本語化には標準で各言語に対応(ドキュメント)していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。イベント情報のJSONファイル(events.json)は次のように記述しています。外部ファイルではなく、直接記述でもOKです。event-05"]}]フォームのデザインのまとめ。LabsCSSCSS3Formフォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。サンプルはこちらデザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。フォームのHTMLはこちら。value="送信ボタン"></form>CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。10px;}jQueyで埋め込まれたSVGを操作する方法。LabsJavaScriptjQuerySVGベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。サンプルはこちら下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。r="50"/></svg>注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。