Horic Design

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

2ページ目 | js

aTemplate.jsの紹介

a-blog cmsのテンプレートエンジンに非常によく似たテンプレートエンジンをJavaScriptで作成してみました。名付けてaTemplate.jsです。
今回は、友人に使い方を聞かれるので、現在出来る機能をまとめてみました。すべての機能は網羅できていませんが。


このテンプレートエンジンは、a-blog cmsのカスタムフィールドメーカーを一から作り直そうという話になって作ったテンプレートエンジンです。フロント側でもa-blog cmsのようなテンプレートエンジンを使いたいという人はこのままお読み下さい。これから、このテンプレートエンジンの導入方法、またどういったことが出来るのかを説明していきたいと思います。


「aTemplate.jsの紹介」の続きを読む

Pace.jsでローディング時にかっこいいエフェクトをつけてみた


Pace.js

こんばんは。stelydylanです。みなさん、Pace.jsをご存知でしょうか?Pace.jsを使うと、ページの読み込み時やAjaxによるデータの読み込み時にかっこいいエフェクトをつけることが出来ます。
現在このブログに使っているエフェクトにもこのPace.jsを使っています。
下記のようにJavaScriptとCSSを読み込むだけで使えますのでとても導入が簡単です!!

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

エフェクトの変更など

公式サイトよりダウンロードできるCSSはエフェクトごとに用意されていて、エフェクトを変えたければ読み込むCSSを変えることで別のエフェクトを実現できます。
ボールがバウンドするエフェクトや、ローディングバーが表示される物などバラエティ豊かなローディングエフェクトがあります。

また、エフェクトが物足りない場合、エフェクトのスタート時や終了時にフック処理を書くことができます。終わった後にクラスを追加するだとかそういった処理を使うことで、もうひと味加えることができます。

Pace.on("done",function(){
	$(".landLoadingBg")
	.addClass("done")
	.delay(300)
	.queue(function(){
		$(this).remove();
	});
});

詳しくはドキュメントをご覧ください



[JavaScript]デバイスの傾きを取得するAPIが面白い

Screen Orientation API


Screen Orientation APIをご存知でしょうか?Screen Orientation APIは画面が横向きか縦向きかを判定してくれるだけでなく、deviceorientationというイベントハンドラーが用意されていて、これを使うことで画面の傾き具合を取得することができます。ただし、iPhoneiPad一部のAndroidといった、モバイル端末に限られます。
イベントハンドラから引き数として取得出来るイベントオブジェクトはbetagammaというプロパティを持っています。左の図のように、betaは縦向き回転の角度,gammaは横向き回転の角度を取得できます。
下がそのサンプルコードになります。


window.addEventListener("deviceorientation",function(e){
    ball.sx += parseInt(e.gamma/10);
    ball.sy += parseInt(e.beta/10);
});

デバイスの傾きに応じてボールを転がしてみよう

このAPIを使ってゲームになりそうなひな形を作ってみました。画面の傾きに応じてボールを転がすことが出来ます。
下にサンプルのページを用意しましたので是非ご覧ください。


休日の楽しみとしてScreen Orientation APIで是非遊んでみてはいかがでしょうか?


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

レスポンシブなサイトを作る際によくオフキャンバスを使うことがあるので、今回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でダウンロードしてお使い下さい。


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド