IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログでページ読み込み時のDOM操作をモジュール化する

はてなブログでページ読み込み時のDOM操作をモジュール化する

2018/12/08 javascript, はてなプラグイン, はてなブログ

はてなブログでページ読み込み時のDOM操作をモジュール化する

はてなブログで自分の思うようにカスタマイズしようとしますとDOM操作が避けられなくなります。そのコードを毎回コピペするのではなく、モジュール化して github.io などに上げておき、オプション指定で する/しない を選択するようにできないかという話です。

  • クラス、コンストラクタ、インスタンス、難しいね
  • やりたいことのサンプル
  • プロトタイプ
    • 参考サイト
  • さらに改良
  • ES6(ES2015)

クラス、コンストラクタ、インスタンス、難しいね

カスタマイズのためのDOM操作は、ページを読み込んだときに1回行えばいいわけですから即時関数で書けばいいのですが、考えてみれば、新しくテーマを作ろうとカスタマイズする度にコピペしたりと無駄なことをしているようにも感じます。

これまでいくつか書いてきた、たとえば、トップページを一覧表示にした時のサムネイル画像をオリジナルのものに変えたり、ページトップにスムーズスクロールするボタンを加えたりするコードをひとつにまとめてモジュール化出来ないかなあということです。

ただ、プログラミングの基本を学んでおらず、見よう見まねで書いていますので、なんとなく概念はわかっていても、こういう場合はどう書けばいいんだろうと、現実局面になると壁にぶつかってしまいます。

クラス、コンストラクタ、インスタンスってなんやねん? というほどではありませんが、具体的にどう書けばいいのかとなりますと難しいですね。

やりたいことのサンプル

やりたいことをよくあるサンプルコードで示しますとこういうことになります。

var Person = function(name, age) {
this.name = name;
this.age  = age;
// メソッド
this.setName = function(name) {
this.name = name;
}
this.getName = function() {
return this.name;
}
}
var taro = new Person('太郎', 20);
console.log(taro.getName()); // 太郎

これを応用して、

// コンストラクタ関数
var imzModules = function(){
this.chgFeturedImg = arguments[0].chgFeturedImg || false;
・
・
// メソッド
this.init = function(){
var page = document.body.classList;
// トップページならサムネール画像を元画像に入れ替える
// 実際には一覧表示かどうかも判断が必要
if(this.chgFeturedImg && page.contains('page-index')){
var elements = document.getElementsByClassName('entry-thumb');
var re = /https%3A%2F%2F.+\.(jpg|jpeg|gif|png|bmp)/i;
Array.prototype.forEach.call(elements, function(element) {
var imageUri = re.exec(element.getAttribute('style'));
if(imageUri !== null) element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
});
}
・
・
}
};
//  呼び出し
(function(){
var initialSetting = new imzModules({
chgFeturedImg: true,
・
・
});
document.addEventListener("DOMContentLoaded", initialSetting.init(), false);
})();

とすればモジュール化できそうに思います。

で、このコンストラクタ関数をネット上に上げておき、それぞれのブログでそれを読み込み、プロパティで何を使うかを指定してインスタンスを作成し、初期化メソッドを呼べばいいのではないかということです。

なお、イベントリスナーはHTMLドキュメントの読み込みが完了したらとしていますが、はてなブログの場合はフッタに入れますので、それ以前のドキュメントは読み込まれていると考えれば、initialSetting.init() を呼ぶだけでも問題なく動くはずです。

プロトタイプ

ということで、おおよそ構想はできたのですが、ただ、これですとイニシャライズメソッドを呼び出す度に、といってもこの場合1回だけですが、新しく関数が定義されメモリを消費してしまいますので、prototype を使いなさいということらしいです。

// コンストラクタ
var imzModules = function(){
this.chgFeturedImg = arguments[0].chgFeturedImg || false;
・
・
};
// メソッド
imzModules.prototype.init = function(){
var page = document.body.classList;
// トップページならサムネール画像を元画像に入れ替える
// 実際には一覧表示かどうかも判断が必要
if(this.chgFeturedImg && page.contains('page-index')){
var elements = document.getElementsByClassName('entry-thumb');
var re = /https%3A%2F%2F.+\.(jpg|jpeg|gif|png|bmp)/i;
Array.prototype.forEach.call(elements, function(element) {
var imageUri = re.exec(element.getAttribute('style'));
if(imageUri !== null) element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
});
}
・
・
};

こうすれば、imzModules.prototype.init は新しく定義されるのではなく参照で実行されることになるようです。

参考サイト

JavaScript 手軽にモジュール化する方法メモ – Qiita

JavaScript (ES5) でクラスを実現するための基本 – Qiita

オブジェクトモデルの詳細 | MDN

さらに改良

で、メソッドにプロトタイプを使っていますので、なんとなく関連性が見えにくいかなと思いいろいろググっていましたら、こちらのサイトがヒットしました。

【javascript】やさしいクラスの作り方 – Qiita

こういう書き方もできるということで、

var imzModules = (function(){
var imzModules = function(){
(略)
};
imzModules.prototype.init = function(){
(略)
};
return imzModules;
})();

これでいこうと思います。

で、今モジュール化しようと思っているDOM操作は、サムネール画像をオリジナルに変えるもの、カスタマイズ > ヘッダ > タイトル画像に貼った画像を付け替えるもの、トップへスムーズスクロールするボタン、カテゴリーの自動メニュー化、トップページに前に戻るボタンの追加などです。

完成しましたら、また記事にしようと思います。

ES6(ES2015)

ES6(ES2015)ではクラス構文が実装されているのですが、IE11 は対応していないようです。

ECMAScript 6 compatibility table

CSS Grid Layout の auto-fit を @mixin で実現
はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com