仮Assemble(≒Handlebars)

ほとんどHTMLと同じhandlebars記法でかかれた.hbsファイルをHTMLに変換する。

例えば{{変数名}}で囲まれた変数名を、jsonファイルから参照して、埋め込むことができる。

また{{#if}} {{/#if}}で囲まれた範囲の記述の有無を条件式で指定できる機能もある。

現在主に関わっているプロジェクトでは正確にはassembleを使用しており、その記法にHandlebars記法を使用している。

{{#is}}はその機能。

詳しくは次の記事

https://app.codegrid.net/series/assemble

読み込むJsonファイルは以下のファイルで指定している。(その中ではさらにconfig.jsonから値を取得している)

gulp/tasks/assemble.js

 

仮OGPの設定

LIG社さんの記事を参考にしました

 

{
	"title": "title",
	"meta": {
		"description": "title site"
	},
	"ogp": {
		"enabled": true,
		"siteName": "サイトの名前",
		"type": "website、blog、article等を入れる",
		"url": "http://www.example.com/そのアイテムのページURL",
		"imageUrl": "http://www.example.com/images/ogp.jpg",
		"title": "ページのタイトル",
		"description": "My ogp description"
	},_
	"facebook": {
		"admins": "個人アカウントと結びつけるためのもの。通常の企業サイトでは使わない",
		"appId": "インサイト機能等を使うための企業用のID"
	},
	"twitter": {
		"enabled": true,
		"imageUrl": "http://www.example.com/images/twitter.jpg",
		"title": "My twitter card title",
		"description": "My twitter card description"
	},
	"mixi": {
		"content-rating": false
	},
	"link": {
		"appleTouchIcon": false
	}
}

画像についての注意

画像パス、またURLパスは絶対ですること(仕様)

twitter

1MB以下。

facebook

1200 x 630pxが推奨。縦横比1.91:1の比率。

 

自分が主に参加するプロジェクトでは、テンプレートが使用されており、website.jsonファイルの変数を参照している。{{#is 値 true~}}{{/is~}}で条件式が定義されており、jsonファイル側で値がtrueになっている場合のみ記述される。

{{#is website.ogp.enabled true~}}
<meta property="fb:admins" content="{{website.facebook.admins}}">
<meta property="fb:app_id" content="{{website.facebook.appId}}">
<meta property="og:site_name" content="{{website.ogp.siteName}}">
<meta property="og:type" content="{{website.ogp.type}}">
<meta property="og:url" content="{{website.ogp.url}}">
<meta property="og:image" content="{{website.ogp.imageUrl}}">
<meta property="og:title" content="{{website.ogp.title}}">
<meta property="og:description" content="{{website.ogp.description}}">
{{/is~}}
{{#is website.twitter.enabled true~}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{website.twitter.title}}">
<meta name="twitter:description" content="{{website.twitter.description}}">
<meta name="twitter:image:src" content="{{website.twitter.imageUrl}}">
{{/is~}}