投稿

ラベル（JavaScript）が付いた投稿を表示しています

スポンサー

【JavaScript】日付表示を最適化する(SNS、チャット等向け)

SNS等の日付表示を最適化 SNS等では、日付表示で少し工夫がされていますよね。 昨日の投稿に「昨日」や、今日の投稿は日付表示がなかったりと、見やすくなっていますよね。 なので、今回の記事では、JavaScriptで簡単に表示を最適化するプログラムを作ってみましょう！ 日付を取得 最初は日付取得から始まります。 年、月、日、時間、秒を一つ一つ取得していきましょう。 var today = new Date(); そして一つ一つ取得していきます。 //今日の年 var year = today.getFullYear(); //今日の月(1月が0なので+1) var month = today.getMonth()+1; //今日の日 var data = today.getDate(); //今の時間 var hours = today.getMinutes(); //今の分 var minutes = today.getMinutes(); //今の秒 var seconds = today.getSeconds(); 月だけ+1してあります。これはよくやってしまうミスで、あれ？と思うと大体1足していないのが原因です。 変換したい日付を用意 どのようなデータになっているかはその時次第ですが今回は日付の取得時と同様に一つ一つ変数に格納しておきます(時刻データが一つの文字列等になっている場合正規表現等でうまく抜き出してください。正規表現に関連する記事はこの辺で探してください: 正規表現 - Qiita ) 簡単に適当な日付を入れていきます。 今回は、昨日の日付を入れましょう。ソースコードは次のようになります。 読み込み中... ※このソースコードはJavaScriptで最新の日付になるよう更新しているため表示されない場合があるほか、一日などは前の日付が0日と表示される可能性があります。 全ての要素に「_2」を付けわけました。 ここから最適化するコードを書いていきましょう。 最適化するコードの記述 コードを書いていきますが、今まで記述したコードとは変数名等異なりますので注意してください。 まずはざっくり作ってみました。 var json={year:○○,month...
続きを読む

【JS】別ページ/別サイトに移動させる方法

HTMLで移動 aタグを指定して移動することができる <a href="パス名">テキスト</a> JavaScriptで移動 JSで移動するにはこのようになります。 // 通常の遷移 window.location.href = 'パス名'; // 新しいタブでページを開く window.open('パス名', '_blank'); また、HTMLとJavaScriptの応用として、このようにすることもできます。 <a onclick="window.location.href = 'パス名';">テキスト</a>
続きを読む

【JS】文字列から改行を削除する正規表現

改行を削除 コードはこのようになります。 変数名.replace(/\r?\n/g, ''); このコードでは、改行コード(\nや\r)を""(空白)に変換しています。 サンプルコードはこうなります。 var text="私はテスト太郎です。\nテスト太郎はとても元気です。\nとても。"; text = text.replace(/\r?\n/g, ''); //text=私はテスト太郎です。テスト太郎はとても元気です。とても。 このように改行が削除できます。 また、独自のOSやMacの古いバージョン等の場合うまく動作しない可能性があります。(このコードは\r\nと\nに対応しています) また、当サイトでは改行削除ツールもあり、そのツールも同様のコードを使用しています。 改行削除ツール
続きを読む

【JS】querySelector()の使い方

querySelector()とは querySelector()とは、Jquery(CSSセレクタ)のように要素を簡単に取得できるものになります。 JavaScriptにはほかにも要素を取得するgetElementById()や、getElementsByName()など要素を取得できる方法はいろいろとありましたが、querySelector()を利用することで、CSSのセレクタと同じように要素を取得することができます。 使い方 基本的な構文はこちらです。 document.querySelector( CSSセレクタ ); CSSセレクタの場所に要素を指定すると最初に合致した要素で止まります。 合致する要素を取得するにはAllを追加する必要があります。 document.querySelectorAll( CSSセレクタ ); この場合、結果が配列で返されるので繰り返し等で適用させる必要があります。(詳しくは後述) 例 簡単な例を挙げます。 まず、querySelectorのの例です。 <div class="test">未変更</div> <div class="test">未変更</div> <script> const elem = document.querySelector('.test'); elem.innerHTML="変更済み"; </script> この処理の場合、前にもありますが 最初に合致した要素 のみを取得します。 すべての要素に実行させるにはこのように記述する必要があります。 <div class="test">未変更</div> <div class="test">未変更</div> <script> const elem = document.querySelectorAll('.test'); elem.forEach(function(elems) { elems.innerHTML="変更...
続きを読む

超軽量DOM操作ライブラリdom_sen.js var2

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v2.js"></script> ※V1を利用したい方はV2のエリアを置き換えてください V2での変更点 d_属性の操作可能なCSSに新たに下記の指定をすることができます。 d_z_index() d_box_sizing() d_font_size() さらに、qsa関数はv1時点で操作可能なCSSがdisplayのみだったものに対し、d_関数と同様のCSSが利用可能となりました。 qsa関数とd_関数の両方にvalue、 qsa_value() d_value() (指定のみ)が追加されました。
続きを読む

超軽量DOM操作ライブラリdom_sen.js

dom_sen.js JavaScriptには、ライブラリが山ほどあります。 そして、今回私はとりわけ軽量なライブラリを作成しましたので説明します。 このライブラリは、dom操作を楽にするライブラリです。 dom_sen.jsの説明記事は下記にあります。 (バージョン別) dom_sen.js V2 dom_sen.js V1
続きを読む

超軽量DOM操作ライブラリdom_sen.js var1

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v1.js"></script> そして使用可能な関数一覧(使い方はのち) qsa() qs() qsa_html() qsa_text() qsa_display() d_html() d_text() d_CSS各指定()* *後程詳しく 関数の使い方 qsa( CSSセレクタ ) document.querySelectorAll() の省略です。 qs( CSSセレクタ ) document.querySelector() の省略です。 qsa_html( CSSセレクタ , HTML) Jqueryの $(CSSセレクタ).html(HTML); と同様です。 qsa_text( CSSセレクタ , テキスト) Jqueryの $(CSSセレクタ).text(テキスト); と同様です。 qsa_display( CSSセレクタ , CSS[display]の値 ); CSSセレクタで選択した要素のスタイルのdisplayを変更します。 d_html( 属性ネーム , 属性ネームの値 , HTML ) 属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のHTMLを変更します。 例: <span d_html="script1">変更前</span> <script> d_html("html","script1","変更後"); //属性d_htmlがscript1の要素のHTMLを「変更後」に変更 </script> d_text( 属性ネーム , 属性ネームの値 , テキスト ) 属性ネームは要素の属性に「d_...
続きを読む

JavaScriptを読み込みが完了してから実行

始めに JavaScriptを読み込みが完了してから読み込むことは大切です。 なぜなら、JavaScriptは「読み込まれているところ」までのHTMLを使用可能だからです。 読み込みが完了してから実行する方法 まず、このようなページがあるとします。 <html> <head> <title>サンプル</title> </head> <body> <span id="sample">JS未変更</span> </body> </html> 方法1:HTMLの最後で実行 このような感じになります。 <html> <head> <title>サンプル</title> </head> <body> <span id="sample">JS未変更</span> <script> document.getElemntById("sample").innerHTML="JS変更済み"; </script> </body> </html> 取得したい要素より下に記述することによりエラーなく実行することが可能です。 方法2:ブラウザのイベントを使用 この方法であれば、HTMLのheadで固定のスクリプトでも使うことができます。 <html> <head> <script> window.onload = function () { document.getElemntById("sample").innerHTML="JS変更済み"; }; </script> <title>サンプル</title> </head> <body> <span id="sample"...
コメントを投稿
続きを読む

簡単にブログなどにJavascriptのテストを埋め込む方法！

イメージ
利用するもの TamralJSestというもの。TamralWorldというサイトが運営しているもので、とってもシンプルなのが特徴です。 (リンク: TamralJSTest ) サイトはiframeで埋め込んで利用できます。 使い方 使い方までとても使いやすく、下にある「入力コード」というところにテストしたいコードを入力し、下の「ソースコード更新」ボタンを押すだけです。 ※コンソールに出力する際は、console.log(出力させるもの);に出力させれば大丈夫です。また、console.errorも使用可能です。 「スクリプトを実行」ボタンを押すと、実行する処理の確認(不正使用を防ぐため)が出てきますので、そのあと「実行」ボタンを押すと実行されます。 そして、ブログ等に埋め込む際は、「埋め込み用URLを取得」をクリックして、 次のURLを使用するサイトのiframeのsrc属性に指定してください。 https://tamralworld.com/web_javascript_test?************* と表示されるので太字のURLをコピーしiframeで貼り付けてください。 これが貼り付けた例です。 (この処理はただ単に計算結果をconsole.に出力するだけのものです。) そして、エラー等はこのように出力されます。 最後に どうでしょうか。通常のものより明らかに簡単にJavaScriptをテストすることができます。 ですが、localstorageやcookie等、一部使えないブラウザAPIがあるので注意してください。
コメントを投稿
続きを読む

Jqueryの使い方！覚えておいて、損はなし！！

イメージ
Jqueryとは？ Jquery。様々なサイトで利用されているJavaScriptのライブラリです。 簡単に言えば、「JavaScript」を使いやすくするためのものになります。 昔、Jqueryは超重要だった 昔は、JavaScriptは、様々な欠点がありました。 ブラウザごとに仕様が違っていたり、扱いが難しかったりと。 ですが、Jqueryを利用すれば、とても簡単にJavaScriptを扱えるため、とても利用されていました。 ですが、今は昔ほどJavaScriptは扱いにくくないため、Jqueryを利用しないサイトも増えてきていますが、今もなおJqueryは使われ続けているライブラリです。 コードの書きやすさ Jqueryを使うと、とても簡単にコードを書くことができます。 例えば、 docment.getElementById("test").innerHTML="TestCode"; というコードと同じ処理をJqueryを利用して書いてみると、 $("#test").html("TestCode"); というとても短いコードで済むのです。 他にも、要素のスタイルを変更するコードを比べてみましょう。 Javascriptのみで書くと、 docment.getElementById("test").style.display="none"; docment.getElementById("test").style.height="200px"; このようになります。ですが、Jqueryを利用して書くと、 $("#test").css({"display":"none","height":"200px"}); と、これほどにまで短縮することができます。 使う準備 HTMLのheadタグの最初に次のコードを挿入してください。 <script src="https://ajax.googleapis.com/ajax/l...
コメントを投稿
続きを読む

広告

このブログの人気の投稿

【CSS】アニメーション等動作がカクカクする時の対処法

始めに 参考にさせていただいた元記事 カクカクするのはブラウザごとに異なる アニメーション時のチラつきの原因はほとんどが「アニメーション」として処理されていないということです。 一般的なブラウザ(Chrome,Firefox,Safari,Opera)の最新バージョンであればあまり気にする必要もないのですが、一部のデバイス内のアプリ等(cordova等)では古いバージョンのブラウザを使用している場合や、古いデバイスであると古いブラウザになってしまうでしょう。 (IEでもチラつきが目立つ。また、Edgeの場合もIEとほぼ変わらずチラつきがみられる。) 今回は一般的な3つの対処法を見ていきます。 対処法 1 サイトによっては ○○{ transform: translate3d(0,0,0); } などというものもありますが、これはブラウザに無駄な処理を与えてしまっているため良い対処法ではない他、直らない場合もあるのでこれは軽く頭に入れておく程度でいいでしょう。 2 次の対処法は、will-changeです。 初めて聞く方もいると思いますが、will-changeを使用することで、要素にどのような変更を加えるかを先にブラウザに伝えることができます。 変形処理を伝えるときはこのようにします。 ○○{ will-change: transform; } また、アニメーションは次のようにします。 ○○{ will-change: animation; } さらに、複数の処理を同時に行うときはカンマ( , )で区切ることでまとめて記述することができます。 ○○{ will-change: transform,animation,position; } このようにすることで、translate3dのように不要な処理なく効率的に処理することができます。 3 また、この方法でも直る場合があります。 ○○{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } この要素について詳しくはこちらを見ていただくといいと思います。 backface-visibility 最後に 一番最適な対処法は2番目の...
続きを読む

超軽量DOM操作ライブラリdom_sen.js var2

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v2.js"></script> ※V1を利用したい方はV2のエリアを置き換えてください V2での変更点 d_属性の操作可能なCSSに新たに下記の指定をすることができます。 d_z_index() d_box_sizing() d_font_size() さらに、qsa関数はv1時点で操作可能なCSSがdisplayのみだったものに対し、d_関数と同様のCSSが利用可能となりました。 qsa関数とd_関数の両方にvalue、 qsa_value() d_value() (指定のみ)が追加されました。
続きを読む

超軽量DOM操作ライブラリdom_sen.js var1

始めに 説明は こちら をご覧ください。 使い方 まず、もちろんですが読み込み方です。ライブラリを使用するソースコードより早い位置にこのソースコードを記述します。 <script src="https://tamralworld.com/library/dom_sen_v1.js"></script> そして使用可能な関数一覧(使い方はのち) qsa() qs() qsa_html() qsa_text() qsa_display() d_html() d_text() d_CSS各指定()* *後程詳しく 関数の使い方 qsa( CSSセレクタ ) document.querySelectorAll() の省略です。 qs( CSSセレクタ ) document.querySelector() の省略です。 qsa_html( CSSセレクタ , HTML) Jqueryの $(CSSセレクタ).html(HTML); と同様です。 qsa_text( CSSセレクタ , テキスト) Jqueryの $(CSSセレクタ).text(テキスト); と同様です。 qsa_display( CSSセレクタ , CSS[display]の値 ); CSSセレクタで選択した要素のスタイルのdisplayを変更します。 d_html( 属性ネーム , 属性ネームの値 , HTML ) 属性ネームは要素の属性に「d_属性ネーム="属性ネームの値"」のように指定されている属性のHTMLを変更します。 例: <span d_html="script1">変更前</span> <script> d_html("html","script1","変更後"); //属性d_htmlがscript1の要素のHTMLを「変更後」に変更 </script> d_text( 属性ネーム , 属性ネームの値 , テキスト ) 属性ネームは要素の属性に「d_...
続きを読む