Webサイト公開時の設定諸々（SNSシェア、解析タグ、公開後 etc）


随時更新していきます。

ベースにしている開発環境
https://github.com/kayac/kayac-html5-starter

## 初期設定

jadeを使用。meta情報はjsonにまとめておく。

```json:meta.json
{
    "site_name": "sampleサイト",
    "description": "サイトの説明",
    "sns_description": "シェア文言",
    "hashtag": "sample,sample2,sample3",
    "url": "http://sample.com",
    "via": "sample",
    "favicon_url": "favicon.ico",
    "webclipicon_url": "apple-touch-icon.png",
    "facebook_app_id": "123456789",
    "ogp_image_url": "http://sample.com/img/ogp.png",
    "keywords": [
        "サンプル",
        "sample",
        "qiita"
    ]
}
```
>
hashtag : 複数登録は","で区切る
favicon_url : ルートディレクトリでない場合はフルパス
webclipicon_url : 127*127
ogp_image_url : ogpは必ずフルパス 1200*630
※ htmlタグを含んだ文字列の場合、エスケープされたくないので`!=`を使う

エンコード処理

```jade:index.jade
- var encode_description = encodeURIComponent(sns_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(via);
```

## SNSシェア

デフォルトのボタンなら以下を参照
[SNSのシェアボタンの設置方法まとめ (サンプルコード付き)](https://syncer.jp/how-to-setting-share-button)

### Facebook

まずはFBアプリ登録
https://developers.facebook.com/

- 本番用とテスト用のIDを取得
- 忘れないようにすぐに公開（AppReviewを'yes'に）
- ドメイン、url、emailなど設定

> 参考
[FacebookでDeveloper登録とアプリ登録](http://code-copilot.sacred-field.com/archive/?id=107)

続いて、以下を外部ファイルにまとめてincludeするとよい。

```jade:facebook.jade
#fb-root
script.
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '#{facebook_app_id}',
      xfbml      : true,
      version    : 'v2.6'
    });
  };
  function shareFB(){
    FB.ui(
      {
        method: 'share',
        href: '#{url}',
      }
    );
  }
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  $('.js-share_fb').on('click', function(){
    shareFB();
  });
```

OGPのmetaタグ設定は以下参照。
https://developers.facebook.com/docs/sharing/webmasters#markup

「[OGP画像シミュレータ](http://ogimage.tsmallfield.com/)」で表示の確認。

> 参考
https://developers.facebook.com/docs/javascript/reference/FB.ui
http://blog.bornknow.com/2011/02/sharedialog.html


### Twitter

エンコード方法は上記参照。

```html:html
<a href="//twitter.com/intent/tweet?text=#{encode_description}&amp;url=#{encode_url}&amp;hashtags=#{encode_hashtag}&amp;via=#{encode_via}" target="_blank"></a>

```

プロトコルは省略。
[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.xml#Protocol)

複数のOGP,TwitterCardsを出し分ける場合は[こちら](http://qiita.com/mo49/items/899df5a04569aae4a20f)を参照。

> 参考
[フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...）](http://kimizuka.hatenablog.com/entry/2016/04/18/165022)



### LINE

#### 旧式

https://media.line.me/howto/ja/

```jade:index.jade
a.btn-line(href="//line.me/R/msg/text/?#{encode_description}")
```

> 参考
[SNSのシェアボタンの設置方法まとめ (サンプルコード付き)](https://syncer.jp/how-to-setting-share-button)

#### 最新

[Using the “LINE it!” button on websites](https://developers.line.me/line-it/line-it-button-for-websites)

PCブラウザからwebページを共有できる

```html:html
<div class="line-it-button" style="display: none;" data-type="share-c" data-lang="ja"></div>

<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer"></script>
```

オリジナルの画像を使う場合は・・・

```css:css
.line-it-button {
  opacity: 0;
}
```

ただし、ボタンの押下範囲が狭いときにスタイルを当てられないし、jsで操作もできない（？）ので、デフォルトのシェアボタンを埋め込むときだけにしておいたほうが良さそう。


> 参考
[新しくなった「LINEで送る」について](http://rrlrlrll.org/line_it/)

### OGPの更新

`_ver2`などで画像の名前を変更してあげることで、facebookはすぐに変更を認識してくれる。twitterは反映に時間がかかることがある。

公開したら改めてValidatorとDebuggerを通す。



## 解析タグ

### GAタグ

__Google Analytics__
https://analytics.google.com/analytics/

通常は`</head>`の直前にトラッキングコードを設置するだけでok
[Googleアナリティクス基礎：トラッキングコードの設置](http://www.kagua.biz/help/gatrackingcodesetti2015.html)

SNSボタンのクリックデータも取得したい場合は、以下のコードを追加。
ラベルは目的ごとに細かく分けるとなお良い。

```javascript:javascript
$('.btn-facebook').on('click', function(){ 
    ga('send', 'event', 'share', 'click', 'facebook'); 
});
$('.btn-twitter').on('click', function(){ 
    ga('send', 'event', 'share', 'click', 'twitter'); 
});
$('.btn-line').on('click', function(){ 
    ga('send', 'event', 'share', 'click', 'line'); 
});
```

GAサイトの以下の項目から確認。

- 行動 > イベント > サマリー
- リアルタイム > イベント

ex) https://gyazo.com/c1f8a3855f8e7c02a42450c4f47a6845


Analyticsの送信状態をconsoleに出したい場合は・・・
[__Google Analytics Debugger__](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna)



### adobeタグ

隙間が生まれるので任意の親要素で囲ったうえで、cssで飛ばす。

```html:html
<div class="adobe">
	<!-- SiteCatalyst code version -->
	（中略）
	<!-- End SiteCatalyst code version: H.6. -->
</div>
```

```css:css
.adobe{
	font-size: 0;
	line-height: 0;
}
```


## favicon

html以外を表示させるときのfaviconは/favicon.icoでブラウザが自動でアクセスするので、img/に入れないで直下におく。

[ジェネレーター](http://ao-system.net/favicon/)

それぞれのページが違う階層のディレクトリにある場合（特にブランドサイトなどの下層ディレクトリで作業する場合）、相対パスで書くと表示されないことがあるので絶対パスで書くこと。また、デザイナーはpng形式で渡してくることが多いが基本的にはicoにしたほうがよい。

> 参考
[faviconがIEで表示されません。可能性のある表示されない原因を教えてください。](http://w3q.jp/t/1682)
[綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ](http://liginc.co.jp/web/design/material/16853)

## バリデーション

[Markup Validation Service](https://validator.w3.org/)
[CSS Validation Service](http://jigsaw.w3.org/css-validator/)
[Can I use ](http://caniuse.com/)

同時にconsole.logを全て消す（IEだと止まることすらある）

## 画像圧縮

### imagemin / tinypng

[gulp-tinypng-compress](https://www.npmjs.com/package/gulp-tinypng-compress)
1ヶ月に500枚の制限はあるが、処理スピードはかなり早い。

[gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)
[imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant)
[gulp-imageoptim](https://www.npmjs.com/package/gulp-imageoptim)
gulp-tinypng-compressを使いつつ、上限を越えてしまったら
上記の3つを組み合わせるのが今のところのベストプラクティス。
圧縮率はgulp-tinypng-compressと大差ないが、処理スピードが遅い。

> 参考
[2分でできる、gulpとTinyPNGで画像圧縮を自動化する方法](http://kuroeveryday.blogspot.jp/2015/10/gulp-tinypng-compress.html)
[ImageOptimを使って画像ファイルのサイズを小さくしてみる](http://dev.classmethod.jp/smartphone/tool_imageoptim/)

### TinyPNG  / COMPRESS JPEG
gulpが止まった時にはこちらを使用
[TinyPNG](https://tinyjpg.com/)
[COMPRESS JPEG](http://compressjpeg.com/)

画像以外にページが遅い原因は[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)で特定する

> 参考
[WEB ページの読み込み時間を短くしよう](http://qiita.com/tomochan154/items/2e2dc7b6eca006b41afb)

## 納品

http://qiita.com/mo49/items/e7acee3962825f39818e

## 公開後

### Twitter Validator
https://cards-dev.twitter.com/validator  

### Facebook Debugger
https://developers.facebook.com/tools/debug/og/object/  
"feach new scrape information"でキャッシュをなくす（ogpを最新のものにする）  
-> エラーがあればogpがフルパスで設定できていないなど疑う  

### Google Analytics  
https://www.google.com/analytics/  
取得できているか確認する（表示がおかしい場合は、日付に注意）

## おまけ

### Google案件

Google案件ではライブラリを使用できない（ことが多い）。
jQueryを使えないということ。
ライブラリやフレームワークに頼りすぎない。
https://help.googlegoro.com/index.html

innerHTML使うなとか いちゃもんをつけてくることもあるので、こちらも確認
https://partner-security.withgoogle.com/docs/webapp_requirements