ただいまのトレンドは #フォロワーの大半ヤリたい #RPGステータスはいくつかな #あなたの変態度と純白度 #さ行でわかるリア充度 #今年の夏休みに行った都道府県マジック12 発売中止 ASOKO フライングタイガー泉田知事さんま御殿ハルジオングランツーリスモ...

2016-08-30

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

初期設定

pugを使用。meta情報は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タグを含んだ文字列の場合、エスケープされたくないので!=を使う

↓meta情報まとめはこちら
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

index.pug(エンコード処理)

- var encode_description = encodeURIComponent(sns_description);
- var encode_hashtag = encodeURIComponent(hashtag);
- var encode_url = encodeURIComponent(url);
- var encode_via = encodeURIComponent(via);

SNSシェア

デフォルトのボタンなら以下を参照
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

Facebook

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

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

参考
FacebookでDeveloper登録とアプリ登録

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

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タグ設定は以下参照。

tweetdig.net

2016-08-30

JavaScript中級TIPS

文字列リテラル

HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよい

セミコロン

末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する

ES6のclass記法のメソッド末尾にはセミコロン不要

同値比較

基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。

短絡評価

hogeFuncの引数にtrue相当の値が入ってきた場合、
||の右側は読まれない。

hogeFuncの引数にfalse相当の値が入ってきた場合、
（false, null, undefined, NaN, "", 0）
||の右側を読みにいく。

function hogeFunc(e){
    e || console.log('piyo');
}
hogeFunc(1); // 何も出力されない。もし短絡評価がなければ右側も評価されるのでpiyoが出力される
hogeFunc(); // piyoが出力される

こういう使い方も

function hogeFunc(e){
    var hoge = e || 1;
    console.log(hoge);
}
hogeFunc(5); // 5
hogeFunc(); // 1

FGlo開発日誌

FGlo開発日誌/PHP MYSQL HTML HTML5

#ASOKOの最新ニュース