Horic Design

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

3ページ目 | js

仕事でよくオフキャンバスを使うのでプラグイン化した。

レスポンシブなサイトを作る際によくオフキャンバスを使うことがあるので、今回jQueryプラグイン化してみました。hg-offcanvas.jsです。このjQueryプラグインの特徴としては以下のものがあります。

  • 両サイドオフキャンバスが可能
  • 固定ヘッダーが可能

特にこの固定ヘッダーが可能という点にこだわりました。ヘッダーを固定したままオフキャンバスできるプラグインがネット上を探してもなかなかみつかりませんでした。

デモ

まずは下のURLから今回私の作ったjQueryプラグインがどれだけ使いやすいかを確認してみてください。
スマートフォンでも確認できます。

サンプルへ移動

ダウンロード

以下のページよりダウンロードできます。


使い方

1.依存ファイルの読み込み

上記のリンクよりダウンロードして頂いたパッケージの中に、hg-offcanvas.csshg-offcanvas.jsがあるのでそれらを読み込みます。jQueryのプラグインですので、必ずjQueryも読み込んでください。

2.$("要素名").offcanvas()で、オフキャンバスの設定

下記のソースコードのように、オフキャンバスを開閉するためのボタン、固定したいヘッダー、そしてオフキャンバスを開閉する方向を指定します。btnにオフキャンバスを開閉するボタンのIDもしくはクラス名を指定します。この際、directionがrightだと右側にオフキャンバスが開閉し、leftだと左側にオフキャンバスが開閉します。

$("#offcanvas").offcanvas({
	btn:"#offcanvas-btn",
	fixedHeader:"#header",
	direction:"right"
});

わかりやすいように全体のソースコードを載せておきます。

<!DOCTYPE html>
<html>
<head>
	<title>hg-offcanvas</title>
	<link rel="stylesheet" type="text/css" href="hg-offcanvas.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="offcanvas">
	<!-- ここにオフキャンバスのコンテンツを記述します -->
</div>
<button id="offcanvas-btn">オフキャンバスを開閉します</button>
<script src="/sample/hg-offcanvas/jquery.js"></script>
<script src="/sample/hg-offcanvas/hg-offcanvas.js"></script>
<script>
$(function(){
	$("#offcanvas").offcanvas({
		btn:"#offcanvas-btn",
		direction:"right"
	})
});
</script>
</body>
</html>

CSSやJavaScriptをあまり意識しなくてもオフキャンバスが簡単に実装できますね。
とても便利だと思います。是非使ってみてください。


フォルダにWebページのURLをドラッグするとそのページのスクリーンショットを保存してくれるgulpのプラグインを作った

自分の作った作品の事例等を載せたりするとき、スクリーンショットを取ったりするのって意外とめんどくさいですよね?今回はそういった面倒な作業を軽減するためのgulpのプラグインを作りました。
gulp-webloc2pngです。今回はこのプラグインの概要と導入方法をご紹介します。

概要

下のように検索バーからスクリーンショットを生成したいページのURLを特定のディレクトリに放り込むと、指定したディレクトリ内にそのページのスクリーンショットを生成してくれます。


できあがったスクリーンショット


導入方法

1.webkit2pngをダウンロード

ターミナルで以下のコマンドを実行します

brew install webkit2png

brewがインストールされていない人は以下のコマンドを実行してください

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.gulp-webloc2pngをダウンロードしてください


上のGithubページより、下のようにDownload ZIPをクリックしてください。


3.gulpを起動

ダウンロードできたら、Zipファイルを展開し、そのフォルダ内で、gulpと入力してください。
フォルダ内のurlsというフォルダを監視して、その中にURLがドラッグアンドドロップされるとscreenShotというフォルダにスクリーンショットを生成してくれます。

オプション

今回作成した、gulp-webloc2pngには下記のオプションを用意しておりますのでよかったらご利用下さい。

webloc2png({
	browserWidth:1280,//撮影するブラウザの幅
	browserHeight:720,//撮影するブラウザの高さ
	clipWidth:1280,//画像のクリッピング幅
	clipHeight:720,//画像のクリッピング高さ
	scale:1,//クリッピング時の拡大縮小
	zoom:1,//ブラウザのViewの拡大縮小
	name:"filename",//ファイルネーム
	datestamp:false,//ファイルに日付を追加
	useragent:"Mozilla/5.0",//ブラウザのユーザエージェント
	dir:"screenShot"//スクリーンショットを保存するフォルダ
})

npm install

なお、今回のプラグインはnpmにも公開しておりますので、プラグイン単体で使いたい方は、npm install gulp-webloc2pngでダウンロードしてお使い下さい。


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

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


使い方


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

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


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


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パッケージのページ


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


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド