CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

jQueryを使わない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「超」入門 (確かな力が身につく「超」入門シリーズ)

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

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

シートの最終行番号を取得するユーザー定義関数 - VBA(エクセルマクロ)

最近仕事で受注・発注業務のオートメーション化をするにあたって、VBAで良く使う「シート内で利用している最終行番号を取得する」「特定のセルを基準に一番下のセルの行番号を取得する」ユーザー定義関数をメモとして残しておきます。

シート名を引数にユーザー定義関数を記述

Function maxRow(ByVal sheetName As String) As Integer 
    maxRow = Sheets(sheetName).UsedRange.Rows.Count
End Function

これで関数の定義はできました。

シートの名前を指定して関数を呼び出す

    Debug.Print maxRow("sheet1") 

定義した関数を呼び出すにはmaxRow()のカッコ内に最終行番号を取得したいシート名を入れる。

使用例

下記のようなワークシートで先程の関数を呼び出すと「5」が返されます。

f:id:maru0014:20170203220506p:plain

最終行まで間が空いていてもカウントされる

下記のような場合、6~8行目まで空白になっていますが9行目にデータが入力されているので戻り値は「9」となります。

f:id:maru0014:20170203221937p:plain

特定のセルを基準に一番下のセルの行番号を取得したい場合

先程のユーザー定義関数で最終行を取得する場合は行の途中で空白があっても飛び越えて一番下の行を取得します。 しかし、下記のようにA列の最終行番号を取得したいといった場合には別の方法を使いましょう。

f:id:maru0014:20170203222529p:plain

  今度はmaxRowCellという名前の関数を作ってみました。 シート名を指定した後ろが.range(rangeName).End(xlDown).Rowに変わっています。 こう記述すると指定したセルの列における最終行番号を返します。

Function maxRowCell(ByVal sheetName As String, ByVal rangeName As String) As Integer
    maxRowCell = Sheets(sheetName).range(rangeName).End(xlDown).Row
End Function

シートの名前とセル名を指定して関数を呼び出す

    Debug.Print maxRowCell("sheet1", "A1")

このように呼び出すとイミディエイトウィンドウには「5」と表示されます。

概ねこれらの2パターンで最終行の取得は可能なので、for文の繰り返し回数の指定などに応用すればかなり使い勝手のいい関数かと思います。

ついでなので、For文での繰り返し処理のやり方も書いておきます。

最終行まで繰り返し処理を行うFor文の書き方

下記のようなシートがあったとして、A列のアルファベットに応じてB列に1から順番に数字を入力していきたい場合。

f:id:maru0014:20170203224228p:plain

まずはA列の最終行番号を取得してB列の何行目まで入力すれば良いのかを計算します。

A列の最終行番号を取得したいのでmaxRowCellを使うことにします。

    For i = 1 To maxRowCell("sheet1", "A1")
        range("B" & i).Value = i
    Next

こんな感じですね。 For文の「i」は繰り返すごとに1づつカウントアップされていくのでrange("B" & i)と記述すれば繰り返すごとに B1→B2→B3 となっていくわけです。 そしてそのセルの中身に今回は数字を入れるだけなのでvalue = iで 1→2→3 と入力されていきます。

実行結果

f:id:maru0014:20170203225706p:plain

無事にB列に1~5の数字が入りましたね。

このようにシートや列の最終行番号を取得することでいろいろな繰り返し処理の変数へ当てはめることができるので、自動でデータの入力や数式の入力を行うマクロを作る際にはとても重宝しています。 ただ、もしこれよりも良い書き方などがあればコメントなどで教えてもらえると助かります。

 

↓これで勉強してます

たった1秒で仕事が片づく Excel自動化の教科書

たった1秒で仕事が片づく Excel自動化の教科書

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

f:id:maru0014:20170130225128j:plain

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

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

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

 

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

f:id:maru0014:20170130225652j:plain

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

 

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

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

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

 

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

中身はこんなかんじ

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

処理の流れとしては、

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

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

 

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

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

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

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

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

  • スマートフォンページ(トップページ・商品ページ・カテゴリーページ)などで任意の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の法則。

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

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

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

最新良くわからないウェブ用語とマーケティング用語 eコマースEXPO2016


f:id:maru0014:20160217144614j:image

2月16日と17日にeコマースEXPO東京2016に行ってきました。
さすがにビッグサイトでやるだけあってそれなりの規模。
そして感想を一言で言うならマーケティングオートメーション!マーケティングオートメーション!うるせー!
 

マーケティングオートメーションとは

読んだままの意味でマーケティングを自動で行うこと。

さらに細かく言うならば、今までの不特定多数を対象とした施策(マスマーケティング)からさらに進化したユーザーひとりひとり個別に最適化して行うマーケティングを行うにあたって膨大な作業が必要となるが、それを人の手で行えばいくら人員があっても足りなくなってしまう。

ならば自動化してしまおうというのがマーケティングオートメーションである。

 

今回のEXPOで行われたセミナーの内容もマーケティングオートメーションに関するものが多く

今までのマーケティング戦略では時代遅れ

ユーザーひとりひとりの関心や行動に基いてパーソナライズされたマーケティングが必要

ならば私の会社で提供しているマーケティングオートメーションツールを使ってください

人を雇う人件費と比べたら安いもんでしょ

 

というながれだった。

 

 

もうひとつのキーワードはオムニチャネル

オムニチャネルもこの二日間でなんども耳にしたワードである。

オムニチャネルとは、店舗やイベント、ネットやモバイルなどのチャネルを問わず、あらゆる場所で顧客と接点をもとうとする考え方やその戦略のことをいいます。 マルチチャネルはただチャネルを増やすだけの多角展開であることに対し、オムニチャネルは全てのチャネルを連携させて顧客にアプローチするという違いがあります。

例えばネットで商品を購入してくれた人に対して実店舗の存在もアピールしたり、逆に実店舗でネット販売側のクーポンを配布したりなど

 

 

この2つに関するブース・セミナーが多かった。

また来年はどんなワードが出てくるのか楽しみですね。

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

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

qiita.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のページなんかでは使えないんですけどね。

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

.hogehoge { pointer-events: none; }

例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を

.soldout {
  position: relative;
}
.soldout:after {
  content: ""
  display: block;
  background: (soldout.png) no-repeat;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}

とかで表示した場合。 商品画像リンクの上に画像があるためリンクをクリックできませんよね。

こんなときに売り切れ画像をすり抜けてリンクをクリックできるようにするのが pointer-events: none; です。

このスタイルを指定すると目には見えているけどマウスのカーソルは透過するようになります。

※ブラウザの対応状況に注意

スマートフォン向けならば問題ないですが、IE10以下未対応のプロパティです。 まだまだIE10以下を使っている人は多いので、PC向けのページでの利用はオススメできません。


jQueryならIE10以下も対応

CSSpointer-events: none;はIE10以下は機能しない。 ならばjQueryで実装する手もあります。

.soldout:afterの部分に透過させたい要素のクラス名を記述

<!--jQuery読込-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<!--クリック無効化-->
<script>
$(function(){
    $('.soldout:after').click(function(){
       return false;
    })
});
</script>

上記のタグを<head>内に記述すればOKです。

IE11~Edgeが主流になるまではjQueryでの実装がベストかと思います。