2017-05-20

【jQuery】htmlページをパーツごとに分けて読み込む方法

jQuery HTML JavaScript

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

ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理
切り出したHTMLファイルをjQueryで動的に読み込む

PHPなしで制作するWEBページは管理が煩雑になりがち

HTMLでホームページを構築する際に気をつけたいのが作ったあとのメンテナンス。何にも考えずにガシガシ書いてるとあとあと更新するのが大変なんです。例えばヘッダーについてるグローバルメニューをカスタムした時には、グローバルメニューが入ってるページ全てを更新しなければならず大変な手間。

ヘッダー部分だけ全ページ共通で読み込ませることができれば楽だと思いませんか？

インラインフレームはレスポンシブデザインで使いづらい

インラインフレームで読み込む方法も良いかもしれませんが、今回の案件ではレスポンシブデザインということでフレーム読み込みは断念。高さの自動調整を実装するのも面倒ですし。データベースの扱えるサーバーならばPHPでヘッダーやサイドバーなどを読み込むのがスマートな方法なのですが、ECサイト（楽天やYahoo!ショッピング）などのサーバーサイド言語が扱えないような状況では出来ない芸当。

以下の条件のもと行き着いたのが今回紹介する方法です。

レスポンシブ対応
ヘッダーやフッターなどは全て共通化したい
PHPは使えない

jQueryのloadメソッドでhtmlを読み込む

いろいろ調べてみた結果行き着いたのはjQueryのloadメソッドでした。

楽天のGOLDやYahoo!ショッピングのトリプルは JavaScriptが使用可能なので使える！

この方法の概要としてはindex.html内のパーツを読み込みたい場所に、別途用意した「header.html」などを追記するというもの。

index.htmlを完成させる
共通パーツを切り分ける
読み込み用のscriptを記述

の手順で行うのがオススメ。

1. まずは普通にindex.htmlを作ろう

<!DOCTYPE HTML>
<html lang="ja">
<head>
</head>
<body>
<div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>

<div id="side">
サイドバー<br>
検索バーやカテゴリーリストなど
</div>

<div id="main">
メインコンテンツは直接記述
</div>

<div id="footer">
サイトのSNS情報や<br>
コピーライトなど
</div>

</body>
</html>

2. 共通パーツを切り分ける

※htmlとして保存する際にはやなどは不要。そのままコピペするだけでOKです。

header.html

   <div id="header">
タイトルロゴや画像<br>
グローバルメニューなど
</div>

<div id="header">の中身をコピーしてheader.htmlとして保存

side.html

   <div id="side">
サイドバー<br>
検索バーやカテゴリーリストなど
</div>

<div id="side">の中身をコピーしてside.htmlとして保存。

footer.html

   <div id="footer">
サイトのSNS情報や<br>
コピーライトなど
</div>

<div id="footer">の中身をコピーしてfooter.htmlとして保存。

3. index.htmlに各パーツを読み込むscriptを記述

head内にjQueryを読み込む

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

loadメソッドで各パーツを読み込む

<script>
//共通パーツ読み込み
 $(function() {
 $("#header").load("header.html");
 $("#side").load("side.html");
 $("#footer").load("footer.html");
});
</script>

これでそれぞれID指定した箇所にパーツとなるhtmlがそのまま読み込まれます。

完成形

<!DOCTYPE HTML>
<html lang="ja">
<head>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
//共通パーツ読み込み
  $(function() {
       $("#header").load("header.html");
       $("#side").load("side.html");
       $("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header">
ここにheader.htmlが読み込まれる
</div>

<div id="side">
ここにside.htmlが読み込まれる
</div>

<div id="main">
メインコンテンツは直接記述
</div>

<div id="footer">
ここにfooter.htmlが読み込まれる
</div>

</body>
</html>

loadメソッドで読み込んだページでjQueryが機能しない問題

JavaScriptでページを読み込んでくる際に注意すべき点があります。それは各パーツに適用するJavaScriptの実行順序。例えばheaderのグローバルメニューなんかはこだわってプルダウンメニューにしたかったりしますよね。

その時に使うのもやはりjQuery。そこで起きるのがこの問題。実行順序によってはページが読み込まれる前にグローバルメニューのjQueryが実行されてしまい。メニューが機能しないなんてことがあります。というか今回ありました。

対策方法

実行順序を考えてページ読み込み完了後に指定して・・・・っていう方法もあるにはあるがめんどくさい。

一番簡単な方法はパーツのhtmlの方にscriptを記述してしまうこと。

こうすればパーツを読み込まれる前に実行されることは無いので確実にパーツ内のhtmlにjQueryを適用できます。

（ここに行き着くのに1時間ほど悩みました　(´・ω・｀)）

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-02-03

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

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」と表示されます。

概ねこれらの２パターンで最終行の取得は可能なので、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自動化の教科書

作者: 吉田拳
出版社/メーカー: 技術評論社
発売日: 2016/06/08
メディア: 単行本（ソフトカバー）
この商品を含むブログ (1件) を見る

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
メディア: 単行本
この商品を含むブログを見る