「DAN」様サイトリニューアル

dan.jpg

本業の制作会社に務めるかたわらで、ちょこちょこWeb制作をしており、本日「DAN」様のリニューアルサイトを公開しました。

大阪のまちづくりシンクタンク ダン計画研究所

僕は今回、フロントエンド・バックエンドを担当。
シンプルな構成・デザインの割に意外と作業時間かかってしまいましたわ。
まだまだ作業効率化が求められますね。

しかし、公開時の達成感はなんとも言えない気持ちいいものがあります。
これがあるからクリエイターは激務にも耐えられるんです。

▼プロジェクトチーム
ディレクション:Tsuij
デザイン:やっさん
フロントエンド・バックエンド:坂本

(さらに…)

続きを読む

スマホ用ページ

VVSESFW1MS.jpg

だいぶ遅れましたがスマホ用ページを作りモバイルフレンドリー対応しました。

今回、「pjax」という技術を使い、ページ遷移時にエフェクトを加えてみたのですが、これが思っていたより難しく、また別途このブログでエフェクトの付け方やデバッグなど、まとめていきたいと思います。

スクリーンショット 2015-05-23 15.03.16.jpg

ユーザーエクスペリエンスも満点!

スクリーンショット 2015-05-23 15.02.59.jpg

(さらに…)

続きを読む

リファラスパム除外その後

先日、本サイトでアクセス解析で正しいトラフィックの集計を妨げる「リファラスパム」の除外設定方法を紹介しました。
「リファラスパム除外」

私自身もこのブログを開設してしばらくは、設定をしないままでだいぶトラフィックを乱されました。
今回は、リファラスパム除外設定後の状況と、実際に施したフィルタリングを紹介します。

除外設定前と設定後の変化

グラフを見て分かるとおり、設定後はリファラスパムからのトラフィックはまったく無くなりました。
除外設定は正規表現のコードで設定していくので、コピペで使い回しできるよう、コードをまとめておきます。

リファラスパムフィルタ用正規表現コード

正規表現でのフィルタリングはトップレベルドメイン毎に設定していきます。
フィルタ名はご自由に、フィルタの種類をカスタム→除外→参照と設定して、フィルタパターンにコピペしていきます。
スクリーンショット 2015-05-16 15.11.33.jpg

リファラスパム.com系

(sanjosestartups|ilovevitaly|theguardlan|free-share-buttons|forum\.topic61784245\.darodar|editors\.choice61784245\.hulfingtonpost|googlsucks)\.com

リファラスパム.ga系

(youporn-forum|pornhub-forum|depositfiles-porn|rapidgator-porn)\.ga

リファラスパム.info系

buy-cheap-online\.info

リファラスパム.me系

youporn-forum\.uni\.me

リファラスパム.org系

generalporn\.org

正規表現で除外できないスパムへのフィルタリング

中には上記の設定方法で除外できないスパムも存在します。
それらに対しては、以下のようにブラウザ、言語設定が「not set」のパターンに一致した時に除外するよう設定しておきます。
スクリーンショット 2015-05-16 15.23.02.jpg
スクリーンショット 2015-05-16 15.24.25.jpg

ひとまず上記の設定をしておけば今のところ完全に除外が確認できていますが、今後新たなスパムが出てくるであろうと思うので、こまめにチェックして更新をかけていく必要がありますね。

(さらに…)

続きを読む

Twitterカードの設定

スクリーンショット 2015-05-07 8.38.15.jpg

ブログの更新をTwitterと連動させている皆さん。
Twitterカードはきちんと設定していますか?
今回はTwitterカードの正しい設定方法を紹介していきます。

Twitterカードとは

ブログの更新など、リンク付きツイートが投稿された時に、そのリンク先ページの概要、アイキャッチ画像などをツイート上に表示させてくれる機能です。

スクリーンショット 2015-05-07 8.18.54.jpg

「概要を表示」をクリックすると

2015-05-07 8.19.19.jpg

記事のタイトル、概要、アイキャッチ画像が表示されます。

ユーザーにとっても、記事にどんな内容が表示されるか、概要を見ることができる嬉しい機能ですね。

Twitterカードの設定方法

設定方法は以下のソースを</head>の直前にコピペし、「@アカウント名、記事のタイトル、記事の概要、記事のアイキャッチ画像URL」部分を編集するだけ。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:creator" content="@アカウント名">
<meta name="twitter:title" content="記事のタイトル">
<meta name="twitter:description" content="記事の概要">
<meta name="twitter:image" content="記事のアイキャッチ画像URL">

私の場合、MovableTypeで記事を出力させているので、テンプレートはこのようなソースになりました。

<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:creator" content="@アカウント名">
<meta name="twitter:title" content="<$MTEntryTitle$>">
<meta name="twitter:description" content="<$MTEntryBody remove_html='1' trim_to='200'$>">
<meta name="twitter:image" content="<$MTGetVar name='og_image'$>">

はじめに記事の中から一番最初に登場する画像URLを取得し、後の「twitter:image」に取得したURLをセットさせています。
MovableTypeを使っている人は、上記のソースをそのまま使えますのでぜひお試しあれ。

(さらに…)

続きを読む

リファラスパム除外

Google_Analytics.png

サイトのアクセス解析に必須のツール「GoogleAnalytics」
高機能で誰もに愛されるツールなのですが、これを導入するだけで正しいアクセス解析ができると思ったら大間違いです。
ここでは正確なトラッキング情報を得るために、「リファラスパム」を除外する方法を紹介していきます。

リファラスパム

「リファラスパム」とはなにか?
深く解説するとこの記事では収まらないので大まかな解説になりますが、要するにGoogleAnalyticsの集計を大きくかき乱すいたずら者って感じですね。

Analyticsのメニュー「集計」→「参照サイト」を見ると、見たこともないドメインが表示されていることがあります。

スクリーンショット 2015-05-03 12.44.54.png

このドメイン、気になりますよね。
気になってこのドメインにアクセスしてしまうとリファラスパムの思うつぼです。
リファラスパムの目的は、上記のように気になったユーザーを引っ掛けることにあるからです。
最悪の場合、ウィルスに感染してしまうことも。。。

そんなヘマはしなくとも、関係のないデータが集計されているだけでも迷惑ですね。
次はこのリファラスパムを除外する設定方法を学んでいきましょう。

フィルタを設定する

GoogleAnalyticsのトラッキングコードを設置して終わり。って人も結構多いのではないでしょうか?
正しいアクセス解析を行う上で、このフィルタの設定は設置後の必須作業です。

この記事では紹介しませんが、まず自分を含む関係者からのアクセスを除外しておきましょう。
サイトの管理者は当然アクセスが多くなりますので、これも集計を乱す原因ですね。
これについてはまた別途紹介します。

さて、「リファラスパム」ですが、2015年より急増したらしく、対象のドメインは

《IPアドレス》
54\.186\.60\.77
78\.110\.60\.230
193\.227\.240\.37
193\.227\.240\.38

《参照元》
4webmasters.org
76brighton.co.uk
7makemoneyonline.com
7secretsearch.com
adcash.com
adsensewatchdog.com
adviceforum.info
addons.mozilla.org
aliexpress.com
amanda-porn.ga
best-seo-offer.com
best-seo-solution.com
bestwebsitesawards.com
blackhatworth.com
buttons-for-website.com
buttons-for-your-website.com
buy-cheap-online.info
cenokos.ru
cenoval.ru
cityadspix.com
cyprusbuyproperties.com
darodar.com
depositfiles-porn.ga
descargar-musica-gratis.net
econom.co
econom.com
edakgfvwql.ru
etc.com
europages.com.ru
filmhill.com
forum20.smailik.org
free-share-buttons.com
Get-Free-Traffic-Now.com
generalporn.org
gobongo.info
googlsucks.com
hulfingtonpost.com
humanorightswatch.org
ilovevitaly.co
ilovevitaly.com
ilovevitaly.ru
iskalko.ru
kallery.net
kambasoft.com
Lomb.co
Lombia.co
lumb.co
luxup.ru
makemoneyonline.com
meendo-free-traffic.ga
myftpupload.com
o-o-6-o-o.com
o-o-8-o-o.ru
ourmeets.com
paparazzistudios.com.au
powitania.pl
priceg.com
prodvigator.ua
r-e-f-e-r-e-r.com
ranksignals.com
Ranksonic.info
rapidgator-porn.ga
resellerclub.com
s.click.aliexpress.com
savetubevideo.com
screentoolkit.com
see-your-website-here.com
semalt.com
seoexperimenty.ru
sharebutton.net
sharebutton.org
simple-share-buttons.com
slftsdybbg.ru
social-buttons.com
socialseet.ru
srecorder.com
star61.de
superiends.org
tasteidea.com
textelle.ee
ticimax.com
topblogstories.com
torontoplumbinggroup.com
torture.ml
uglystat.com
vampirestat.com
villainstat.com
vodkoved.ru
waterfallscanopy.com
websocial.me
windstream.net
ykecwqlixx.ru
youporn-forum.ga
zombiestat.com

《ページタイトル》
Apple
Co.lumb
FF
Home page
Sale

(アルファベット順にソート)

これくらいあるそうです。(2015. 4月27日更新
上記ドメインにはくれぐれもアクセスしないでください。

Googleの公式除外機能

まずはGoogleが提供している公式の除外機能でフィルタリングを行います。

画面上のメニュー「アナリティクス設定」を選択し、「ビュー設定」を選択します。

スクリーンショット 2015-05-03 13.11.57.png

すると「ビュー設定」画面へ移動し、下にスクロールしていくと「ボットのフィルタリング」という項目が表れます。
デフォルトではこのチェックが外されていると思いますので、チェックを入れ、保存ボタンを押しましょう。

スクリーンショット 2015-05-03 13.15.01.png

これでGoogleが認知するリファラスパムや、ボット、クローラー等の不要なアクセスを除外することができます。
しかしここ最近スパムが急増しているため、Googleも全てを把握しきれていないようです。
その分に関しては、次の除外設定を行っていきます。

リファラスパム除外の手動設定

次に「アナリティクス設定」→「すべてのフィルタ」を選択します。
画面が遷移し、「+新しいフィルタ」という赤いボタンが表れるのでクリック。
すると編集画面が表示されます。

スクリーンショット 2015-05-03 13.26.20.png

まず「フィルタ名」は自由に入力してください。
私の場合は、トップレベルドメインごとにフィルタを設定しているので、「.com系」としています。

次に「フィルタの種類」を「Custom」にしておきます。

画像のとおり「除外」にチェック、フィルタフィールドを「参照」にします。

フィルタパターンに対象のドメインを入力します。
基本的にコピペで結構ですが、ここでは正規表現での入力となっているため、「.(ドット)」は「\.」とバックスラッシュを前につけてください。
一例として「youporn-forum\.uni\.me」こんな感じですね。

ドメインを一つ一つ設定するのが面倒な人には、トップレベルドメインごとの設定をオススメします。
「.com」の場合は「.com」より前のドメイン名を「( )」かっこで囲み、「|」パイプで区切ります。
最後に「\.com」を入力して完成です。

最後に「ビューにフィルタを適用」の「使用可能なビュー」から「すべてのウェブサイトのデータ」を選択し、「追加」をクリック。
すると隣のボックスに移動しますので、「保存」を押します。
これで新しいフィルタが完成しました。

スクリーンショット 2015-05-03 13.36.59.png

多少面倒ではありますが、正しいアクセス解析を行う上で必ずやっておくべき設定なので、特にWeb担当者の方はしっかり設定しておくべきです。
今後もまだまだスパムは増えてくると思いますので、定期的に参照トラフィックをチェックし、怪しげなドメインがあれば逐一フィルタリングしていきましょう。

(さらに…)

続きを読む