随時更新していきます。
ベースにしている開発環境
https://github.com/kayac/kayac-html5-starter
初期設定
jadeを使用。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 : 127127
ogp_image_url : ogpは必ずフルパス 1200630
※ htmlタグを含んだ文字列の場合、エスケープされたくないので!=を使う
エンコード処理
- var encode_description = encodeURIComponent(sns_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(via);
SNSシェア
デフォルトのボタンなら以下を参照
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
まずはFBアプリ登録
https://developers.facebook.com/
- 本番用とテスト用のIDを取得
- 忘れないようにすぐに公開（AppReviewを'yes'に）
- ドメイン、url、emailなど設定
続いて、以下を外部ファイルにまとめてincludeするとよい。
#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画像シミュレータ」で表示の確認。
参考
https://developers.facebook.com/docs/javascript/reference/FB.ui
http://blog.bornknow.com/2011/02/sharedialog.html
エンコード方法は上記参照。
<a href="//twitter.com/intent/tweet?text=#{encode_description}&url=#{encode_url}&hashtags=#{encode_hashtag}&via=#{encode_via}" target="_blank"></a>
プロトコルは省略。
Google HTML/CSS Style Guide
複数のOGP,TwitterCardsを出し分ける場合はこちらを参照。
参考
フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...）
LINE
旧式
a.btn-line(href="//line.me/R/msg/text/?#{encode_description}")
最新
Using the “LINE it!” button on websites
PCブラウザからwebページを共有できる
<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>
オリジナルの画像を使う場合は・・・
.line-it-button {
opacity: 0;
}
ただし、ボタンの押下範囲が狭いときにスタイルを当てられないし、jsで操作もできない（？）ので、デフォルトのシェアボタンを埋め込むときだけにしておいたほうが良さそう。
OGPの更新
_ver2などで画像の名前を変更してあげることで、facebookはすぐに変更を認識してくれる。twitterは反映に時間がかかることがある。
公開したら改めてValidatorとDebuggerを通す。
解析タグ
GAタグ
Google Analytics
https://analytics.google.com/analytics/
通常は</head>の直前にトラッキングコードを設置するだけでok
Googleアナリティクス基礎：トラッキングコードの設置
SNSボタンのクリックデータも取得したい場合は、以下のコードを追加。
ラベルは目的ごとに細かく分けるとなお良い。
$('.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
adobeタグ
隙間が生まれるので任意の親要素で囲ったうえで、cssで飛ばす。
<div class="adobe">
<!-- SiteCatalyst code version -->
（中略）
<!-- End SiteCatalyst code version: H.6. -->
</div>
.adobe{
font-size: 0;
line-height: 0;
}
favicon
html以外を表示させるときのfaviconは/favicon.icoでブラウザが自動でアクセスするので、img/に入れないで直下におく。
それぞれのページが違う階層のディレクトリにある場合（特にブランドサイトなどの下層ディレクトリで作業する場合）、相対パスで書くと表示されないことがあるので絶対パスで書くこと。また、デザイナーはpng形式で渡してくることが多いが基本的にはicoにしたほうがよい。
参考
faviconがIEで表示されません。可能性のある表示されない原因を教えてください。
綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ
バリデーション
Markup Validation Service
CSS Validation Service
Can I use
同時にconsole.logを全て消す（IEだと止まることすらある）
画像圧縮
imagemin / tinypng
gulp-tinypng-compress
1ヶ月に500枚の制限はあるが、処理スピードはかなり早い。
gulp-imagemin
imagemin-pngquant
gulp-imageoptim
gulp-tinypng-compressを使いつつ、上限を越えてしまったら
上記の3つを組み合わせるのが今のところのベストプラクティス。
圧縮率はgulp-tinypng-compressと大差ないが、処理スピードが遅い。
参考
2分でできる、gulpとTinyPNGで画像圧縮を自動化する方法
ImageOptimを使って画像ファイルのサイズを小さくしてみる
TinyPNG / COMPRESS JPEG
gulpが止まった時にはこちらを使用
TinyPNG
COMPRESS JPEG
画像以外にページが遅い原因はPageSpeed Insightsで特定する
納品
公開後
Twitter 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