2017-02-07

jQueryを使わないjavascriptでの要素取得方法とテキストの書き換え

JavaScript

今までなんとなーくで書いて、動くからまぁいいか。でやってきてたjavascriptをきちんと勉強しようと思うので、少しずつメモ書きをためていきます。今回はhtmlドキュメントツリー内の「id」、「class」、「name」を指定して要素取得します。

IDでテキストを取得

getElementById

var test = document.getElementById('aaa').textContent;

idを指定して単一の要素を取得.textContentで要素内のテキストを抽出しています。

テキストを書き換え

document.getElementById('aaa').textContent = '書き換えしました';

=の左右を入れ替えることで要素内のテキストを書き換えることができます。

CLASSでテキストを取得

getElementsByClassName

var test = document.getElementsByClassName('bbb')[0].textContent;

classを指定して要素のコレクションを取得し、[0]で何番目の要素かを指定し、.textContentで要素内のテキストを抽出しています。 getElementsというふうに複数形になっているため、何番目の要素を取ってくるのかを指定する必要があるわけです。プログラミングにおいては[0]から順にカウントしていくので、[0]で上から1番目の要素となり、[1]なら上から2番目の要素となります。

テキストを書き換え

document.getElementsByClassName('bbb')[0].textContent = '書き換えしました';

タグの名前を指定してテキストを取得

getElementsByTagName

var test = document.getElementsByTagName('a')[0].textContent;

タグ名で取得する場合もClassNameと同様にコレクションを取得するので、[0]で何番目かを指定します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

親要素を指定して子要素のテキストを取得

getElementById.getElementsByTagName

var test = document.getElementById('ccc').getElementsByTagName('a')[0].textContent;

まず親要素を指定、さらにその中に含まれている子要素を取得します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

nameでテキストを取得

getElementsByName

document.getElementsByName("ddd")[0].textContent;

テキストを書き換え

document.getElementsByName("ddd")[0].textContent = '書き換えしました';

↓この本で勉強中！

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

作者: 狩野祐東
出版社/メーカー: SBクリエイティブ
発売日: 2015/10/30
メディア: 単行本
この商品を含むブログを見る

あくまで自分用のメモ書きのつもりですが、使えそうだったらコピペで使ってやってください。なにか間違ってたりもっと良い方法があったら教えてくださいな。

2017-01-30

Google Analytics の文字化けしたURLを日本語に変換するブックマークレット

JavaScript

f:id:maru0014:20170130225128j:plain

Google Analyticsの画面では日本語URLは文字化けしてしまう

参考画像はこのブログのアクセス解析結果ですが、3番目のページはURLが文字化けしていますね。これはURLに日本語などのマルチバイト文字のURLが使用されているためです。

この状態ではどのページなのか全くわかりませんね・・・。超不便。そこで、ボタン一つでこの文字化けしたURLを日本語に変換して書き換えるブックマークレットを作ってみました。

変換ブックマークレットの実行結果サンプル

f:id:maru0014:20170130225652j:plain

実行するとこのようにテキストを書き換えます。これで何のページなのか一発でわかるようになりました！

変換ブックマークレット利用方法

このリンクをブックマークへ登録 → [日本語URL化]
Google Analyticsのページで登録したブックマークを実行

これだけで変換されます。ただし、思いつきでテキトーに作ったのでバグとかあると思います。もし変なところや、こうした方が・・・という事があればコメントください。

変換ブックマークレットのソース

中身はこんなかんじ

$.each($('td'), function() {
    if ($(this).text().match(/\%/) && $(this).text().match(/\//)){
        var strUrl = decodeURI($(this).text());
        $(this).text(strUrl);
    }
});

処理の流れとしては、

ページの中からtdタグを探す
タグ内に「%」と「/」が含まれるかチェック
trueの場合は変換を実行
変換したテキストに書き換え

の1-4を各td要素に対して繰り返し実行しています。

以上、「文字化けしたURLを日本語に変換するブックマークレット」でした。 javascriptはまだまだ勉強中。というか基礎も抑えず雰囲気で書いてみて動いたらラッキーみたいな感じでやってるので、そのうち本でも読んでマスターしたいですね。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

作者: Ethan Brown,武舎広幸,武舎るみ
出版社/メーカー: オライリージャパン
発売日: 2017/01/20
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

作者: 山田祥寛
出版社/メーカー: 技術評論社
発売日: 2016/09/30
メディア: 大型本
この商品を含むブログを見る

何となくJavaScriptを書いていた人が一歩先に進むための本

作者: 五十嵐肇,多良間斎
発売日: 2016/04/30
メディア: Kindle版
この商品を含むブログを見る

2016-05-26

楽天市場RMSページでscriptタグ（禁止タグ）を有効にする方法（スマートフォン限定）

JavaScript EC

この記事でできるようになること

スマートフォンページ（トップページ・商品ページ・カテゴリーページ）などで任意のscriptを実行

（楽天GOLDで実行したscriptのhtmlをフレーム読込するとか茶地なものではありません。）

楽天市場のRMSで管理しているページ（商品ページ・カテゴリーページなど）は scriptタグが使用禁止となっており

<script src="aaa.js"></script>

などと記述しても編集確認画面へ移行できずエラーとなります。

スマートフォンページ限定ではありますが、このエラーを回避しscriptの実行を可能にする方法をご紹介します。

※楽天市場ではセキュリティ面での保安のため禁止タグが指定されています。 ※禁止タグ利用は自己責任でお願いします。　　

scriptタグのエラーを回避する記述方法

1.まず読み込ませたいjsファイルをGOLDにアップロード

2.商品ページページ設定の商品ページ共通説明文などに以下のタグを挿入

<script src="http://www.rakuten.ne.jp/gold/●●●/□□.js" type="text/javascript" =""=""></script 　　　　　　　　　　　　　　　　　　>

3.エラーを回避して実際のページでscriptが正常に実行されます。

　 ※再度言いますが、禁止タグ利用は自己責任でお願いします。

売れるネットショップ開業・運営 eコマース担当者・店長が身につけておくべき新・100の法則。

作者: 坂本悟史,川村トモエ
出版社/メーカー: インプレス
発売日: 2010/05/14
メディア: 単行本（ソフトカバー）
購入: 15人クリック: 437回
この商品を含むブログ (14件) を見る

成功するネットショップ集客と運営の教科書

作者: 染谷昌利,鈴木珠世
出版社/メーカー: SBクリエイティブ
発売日: 2014/03/19
メディア: 単行本
この商品を含むブログを見る

2016-02-14

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

JavaScript jQuery

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。

http://qiita.com/dribble13/items/3eb39726aba33add6c0aqiita.com

これがすごく便利！

このscriptでできること

指定した日時になったら要素を表示する
指定した日時になったら要素を非表示にする
指定した期間だけ要素を表示する

このscriptの利点

jQueryなので記述が簡単に済む
日時指定が要素のタグ内に記述できるので管理が簡単

導入方法

1.jQueryライブラリを読み込む

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>

を <head>~</head>内に記述。

2.下記scriptを記述もしくは読み込む

直接html内に記述する場合は

<script>
$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
</script>

をに記述

jsファイルとして読み込むには

$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    } else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

を view_timer.jsなどの名前で保存。

html内に<script src="js/view_timer.js"></script>として読み込む。

3.表示/非表示を切り替えたい要素をspanで囲んで日時指定

指定方法は3パターン

記入例

指定した時間まで表示する（2/15 0:00 から非表示にする）

<span class="view_timer" data-end-date="2016/2/15 0:00"></span>

指定した時間までは非表示（2/15 0:00 から表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00"></span>

指定した期間だけ表示する（2/15 0:00 ～ 2/16 0:00 の間だけ表示する）

<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00"></span>

以上で設定は完了。これで時限式に要素の表示と非表示を切り替えることができます。

しかもタグに個別で直接設定できるため複数のタイマーの管理が分かりやすい。

あとがき

今後のセールページ製作には欠かせないscriptになりそうです。

タイムセールに使ったり、休みの日の自動更新につかったり、まぁscriptである以上はRMSのページなんかでは使えないんですけどね。

2015-10-19

ページ内リンクをすべて滑らかにスクロールさせるjQuery

jQuery JavaScript

f:id:maru0014:20151019221044p:plain ページ内でのリンクを貼る場合

<a href="#pagetop">ページトップへ戻る</a>

などと書きますよね。
Q&Aのページなどの場合大変便利。

でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない！

ちょっとこだわったサイトだとすーーっとスクロールして表示されます。

上に行ったのか下に行ったのか分かりやすく、何より今風でいいですよね。

これを簡単に実装できるようにコピペできるソースを公開！

上記を

<head> ～ </head> 内もしくは</body>直前に挿入。

これだけで滑らかにスクロールされます。

※「リンクが＃で始まる場合」という指定なので別ページ間でのスムーズスクロールは不可です。

自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

jQueryを使わないjavascriptでの要素取得方法とテキストの書き換え

IDでテキストを取得

テキストを書き換え

CLASSでテキストを取得

テキストを書き換え

タグの名前を指定してテキストを取得

テキストを書き換え

親要素を指定して子要素のテキストを取得

テキストを書き換え

nameでテキストを取得

テキストを書き換え

↓この本で勉強中！

Google Analytics の文字化けしたURLを日本語に変換するブックマークレット

Google Analyticsの画面では日本語URLは文字化けしてしまう

変換ブックマークレットの実行結果サンプル

変換ブックマークレット利用方法

変換ブックマークレットのソース

楽天市場RMSページでscriptタグ（禁止タグ）を有効にする方法（スマートフォン限定）

この記事でできるようになること

scriptタグのエラーを回避する記述方法

1.まず読み込ませたいjsファイルをGOLDにアップロード

2.商品ページページ設定の商品ページ共通説明文などに以下のタグを挿入

3.エラーを回避して実際のページでscriptが正常に実行されます。

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

このscriptでできること

このscriptの利点

導入方法

1.jQueryライブラリを読み込む

2.下記scriptを記述もしくは読み込む

3.表示/非表示を切り替えたい要素をspanで囲んで日時指定

記入例

あとがき

ページ内リンクをすべて滑らかにスクロールさせるjQuery

これを簡単に実装できるようにコピペできるソースを公開！