Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

3ページ目 | js

はみ出している要素を検出するためのブックマークレットを作ってみた

レスポンシブなサイトを作成するさいに、画面を縮めてみることがあるとおもいます。そのとき、意図しない水平のスクロールバーが表示されて、どの要素がそれを出現させているのか分からなくなることはありませんでしょうか?要素検証してもいまいちどれが原因なのかわからないんですよね。
そこではみ出している要素の背景を黄色にするブックマークレットを作ってみました。名付けてオーバーフロウディテクターです。


使い方


まずは上記のようにブックマークレットをドラッグしてメニューバーに追加してください。

はみ出している要素が黄色に


あとはブックマークに追加したブックマークレットをクリックするだけで上の図のようにはみ出している要素の背景を黄色にすることができます。些細な処理ですが、なにかとブックマークレットにしておくと便利なことがありますね。


gulpプラグインの作り方

今回はじめてgulpのプラグインを作成したので、どのようにプラグインを作ったのかをまとめておきたいと思います。流れは下のようになります。

  1. プラグイン用のフォルダを作成
  2. package.jsonを作成
  3. index.jsを作成
  4. README.mdを作成
  5. npmのアカウントを作ろう。

1. プラグイン用のフォルダを作成

はじめにプラグイン用のフォルダを作成します。フォルダ名は自分が配布したいパッケージ名にするとよいでしょう。私はgulp-less-to-scssというパッケージを配布したのでフォルダ名をgulp-less-to-scssとしました。

2.package.jsonを作成

次に作成したフォルダの中にpackage.jsonを作成しましょう。
パッケージ名やバージョン、パッケージの説明、依存ファイル等をJSON形式で書いていきます。
私の場合は下のようにpackage.jsonを作成しました。

{
  "name": "gulp-less-to-scss",
  "version": "0.0.1",
  "main": "./index.js",
  "description": "A gulp plugin convert less to scss",
  "author": {
    "name": "steelydylan",
    "url": "http://horicdesign.com"
  },
  "dependencies": {
    "through2": "*",
    "gulp-util": "*"
  },
  "licenses": "MIT",
  "readme": "gulp-less-to-scss\n=======\nA gulp plugin convert less files to scss files\n\nUsage\n-------\n\n```javascript\nvar lessToScss = require('gulp-less-to-scss');\ngulp.task('lessToScss',function(){\n    gulp.src('themes/system/less/*.less')\n\t\t.pipe(lessToScss())\n\t\t.pipe(gulp.dest('themes/system/scss'));\n});\n```\n\nLICENSE\n-------\n\n(MIT License)\n\nCopyright (c) 2014 [horicdesign](http://horicdesign.com)",
  "readmeFilename": "README.md",
  "_id": "gulp-less-to-scss@0.0.3",
  "_from": "gulp-less-to-scss@"
}

dependenciesに依存ファイルを書いておくと、npm installでそのフォルダ内に依存ファイルをダウンロードできるので便利です。

3.index.jsを作成

次に作成したフォルダ内にメインとなる処理を記述していきます。
下に作り方のポイントをまとめます。

1. through2というパッケージを使おう

through2というパッケージは、gulpのstreamまわりをサポートしてくれるプラグインです。
下が、gulpのプラグインを作る際のテンプレートになります。

module.exports = function(){
	var func = function (file,enc,cb){
		//fileオブジェクトに対しての処理
		this.push(file);
		cb();
	});
	return through.obj(func)
}

through2はstream周りをサポートしてくれるパッケージです。なので、fileに対する処理をするだけであとはthrough2がやってくれます。
下のようにgulpでpipe内に処理を記述する際にも使えますよ。

pipe(through2.obj(function(file,enc,cb){
	this.push(file);
	cb();
})

2.関数内で、fileを操作しよう。

pipe間で受け渡されるオブジェクトのコンテンツはBuffer化されているので、文字列に変換して処理し、再びBuffer化してから次のpipeに渡すという処理をしなければいけません。下がそのテンプレートになります。

var content = file.contents.toString();
//contentに対する処理がはいる
file.contents = new Buffer(content);
this.push(file);

4. README.mdを作成

最後にREADME.mdを作成しましょう。README.mdにはパッケージ名と使い方、ライセンスを明記すれば十分だと思います。
下が私の書いたREADME.mdになります。

gulp-less-to-scss
=======
A gulp plugin convert less files to scss files

Usage
-------

```javascript
var lessToScss = require('gulp-less-to-scss');
gulp.task('lessToScss',function(){
    gulp.src('themes/system/less/*.less')
		.pipe(lessToScss())
		.pipe(gulp.dest('themes/system/scss'));
});
```

LICENSE
-------

(MIT License)

Copyright (c) 2014 [horicdesign](http://horicdesign.com)

5. npmのアカウントを作ろう

作ったパッケージを公開するにはnpmのアカウントが必要です。下のサイトからアカウント登録をしましょう。


アカウントを作成したら、ターミナルからnpm adduserで自分のアカウントを登録し、作成したパッケージに移動して、npm publishを実行します。
これで問題なくnpmにモジュールを公開できるはずです。
自分の作ったパッケージがnpmでダウンロードできるなんて感動ですよね。


gulpプラグインをnpmに公開してみた


npmにモジュールを公開してみました。
gulp-less-to-scssというプラグインで、lessファイルをscssファイルに変換してくれるプラグインです。
gulpでlessからscssに変換してくれるプラグインがなかったので今回作ってみました。
なお、バグがないかと言われるといささか自信がないので今のところバージョンは0.0.2です。

1. インストール方法

npm install gulp-less-to-scss

2. 使用方法

var lessToScss = require('gulp-less-to-scss');
gulp.task('lessToScss',function(){
    gulp.src('themes/system/less/*.less')
		.pipe(lessToScss())
		.pipe(gulp.dest('themes/system/scss'));
});

3. npmパッケージのページ


みなさん是非、使ってみてください!!


gulpを使ってlessをscssに変換してみた

今回はgulpというストリーミングビルドシステムを使ってlessをscssに変換してみました。どうせそういったプラグインがあるんだろうなと思って、ググっても見つからなかったので、下のページを参考にして自分で変換するコードを書いてみました。


そのためにgulp-replaceというプラグインを使って、正規表現を駆使してlessからscssに変換しています。
正規表現を知らない方でも、lessとscssの勉強になると思うので是非おつきあいください。

ソースコード

まず、下が肝心のソースコードです。このソースコードで、lessファイルをscssファイルに変換することができました。
どのようなプロセスで下のようなソースコードに行き着いたのかを大まかに綴っていきたいと思います。

gulp.task('lessToScss',function(){
    gulp.src('themes/system/less/*.less')
		.pipe(replace(/\/less\//g, '/scss/'))
		.pipe(replace(/\.less/g, '.scss'))
		.pipe(replace(/@/g, '$'))
		.pipe(replace(/ e\(/g, ' unquote('))
		.pipe(replace(/\.([\w\-]*)\s*\((.*)\)\s*\{/g, '@mixin $1($2){'))
		.pipe(replace(/@mixin ([\w\-]*)\s*\((.*)\)\s*\{\s*\}/g, '// @mixin $1($2){}'))
		.pipe(replace(/@mixin ([\w\-]*)\s*\((.*);(.*)\)/g,function(all){
			all = all.replace(/;/g,',');
			return all;
		}))
		.pipe(replace(/\.(hook[a-zA-Z\-\d]+);/g, '@include $1();'))
		.pipe(replace(/\.([\w\-]*)\((.*)\);*/g,'@include $1($2);'))
		.pipe(replace(/\.([^\d\s\"]+);/g,'@include $1;'))
		.pipe(replace(/\$(import|charset|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes|-moz-keyframes|-o-keyframes|-moz-document)/g, '@$1'))
		.pipe(replace(/\$\{/g, '#{$'))
		.pipe(replace(/~("[^"]+")/g, 'unquote($1)'))
		.pipe(replace(/spin/g,'adjust-hue'))
		.pipe(rename({
			extname: '.scss'
		}))
		.pipe(gulp.dest('themes/system/scss'));
});

使用したgulpプラグイン

今回はgulp-replaceというプラグインを使ってファイルの文字列を置換しました。node.jsのパッケージで、npm install gulp-replaceでダウンロードできます。
基本的な使い方はJavaScriptの文字列を置換する時に利用するreplaceメソッドと同じで、引き数に変換したい文字列パターン、変換後の文字列を渡してあげます。

replaceメソッドの使用例

var string = "hori:godai".replace(/(.*):(.*)/,"$1 $2");
console.log(string);//hori godai

プロセス

1. パスをlessからscssに変換

文字列/less/を文字列/scss/に変換します

2.拡張子をlessからscssに変換

文字列.lessを文字列.scssに変換します

3. @マークを$マークに変換

lessは変数を@マークで宣言しますが、scssは$マークで宣言します。
そのため、replace(/@/g, '$')で@マークを$マークに変換しています。ただし、@keyframeや@charsetなどの文字には@マークが必要なので、後で個別に$マークに変換しなおしてあげる必要があります。

.pipe(replace(/\$(import|charset|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes|-moz-keyframes|-o-keyframes|-moz-document)/g, '@$1'))

4. mixinの変換

lessのmixinの定義例

.clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

scssのmixinの定義例

@mixin clearfix(){
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

このようにlessは.mixin名{}でmixinを定義しますが、scssでは@mixin mixin名{}でmixinを定義します。そのため、ドットマークを@mixinに変換する作業が必要です。

.pipe(replace(/\.([\w\-]*)\s*\((.*)\)\s*\{/g, '@mixin $1($2){'))

さらにlessのmixinでは引き数の区切りに;を付けますが、scssでは,です。そのため下のソースでmixinの括弧の中の;,に変換します。

.pipe(replace(/@mixin ([\w\-]*)\s*\((.*);(.*)\)/g,function(all){
	all = all.replace(/;/g,',');
 	return all;
}))

5. mixinの呼び出し方の変更

lessでは定義したmixinを利用する場合.clearfix()としますが、scssの場合は@include clearfix()です。よって下のように呼び出し方を変更します。

.pipe(replace(/\.([\w\-]*)\((.*)\);*/g,'@include $1($2);'))

6. spinをadjust-hueに変更する

lessで、spinという色調を調整するmixinがあるのですが、scssではadjust-hueです。
置換する必要があります。
.pipe(replace(/spin/g,'adjust-hue'))

最後に

以上が大まかな流れになります。これらの処理でlessをscssに変換することが出来ました。lessファイルによってはもう少し処理を書く必要があるかもしれません。
なお、正規表現に不慣れな人は下記のサイトに正規表現を貼付けるとビジュアライズ化してくれるので勉強になりますよ。



JavaScriptのガイドを簡単に生成するJSDuck

職場でCSSのガイドだけじゃなくて、JavaScriptのガイドも欲しいねという話になりました。そういったツールはないだろうかと探した所、JSDuckというツールを見つけました。


これを使うと下のようなJavaScriptのドキュメントが簡単に作成できます。ソースコードにコメントアウトでこれはコンストラクタだよとか、これはメソッドだよと明示してあげる必要はありますが。


導入方法

ターミナルより、sudo gem install jsduckと入力します。するとjsduckがインストールされるはずです。

実行方法

ドキュメント化したいJSファイルがあるディレクトリに移動し、jsduck ファイル名 --output docs --title "ドキュメントのタイトル"このように入力してください。私の場合はAtlas.jsという自分の作っているゲームライブラリをドキュメント化したかったので下のように入力しました。
jsduck Atlas.js --output docs --title "Atlas.js"

コメント文の書き方

クラスを明示する

直前に@class クラス名でコメント文を挿入します。

    /**
     * @class Atlas.Util
     **/
    Atlas.Util = Atlas.createClass({
	....
    });

メソッドを明示する

@method メソッド名でメソッド名を明示し、@param 引数名 型で引数名とその型を指定することができます。

/**
 * @method moveTo
 * オフジェクトを(x,y)の座標にframeフレームで移動させる
 * @param x {Number}
 * @param y {Number}
 * @param frame {Number}
 **/
moveTo : function(x,y,frame){
    ...
},

サンプル

試しに私が開発したAtlas.jsというライブラリも一部だけドキュメント化してみました。下のリンクからサンプルが確認できます。


感想

ドキュメント化されることを念頭に普段からコメント文をしっかり書いておくことで、第三者の人がソースを読んでも読みやすくなるんじゃないかなと思いました。そういった意味でJSDuckのコメント記法を勉強するのはありですね。
また自分がgithubで公開しているライブラリもドキュメント化したいなと思っています。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド