BLOG

Amazon dash

2016-12-19 16:56

takabayashi

著者:takabayashi(Planer / Designer)

スパム撃退記 『Vote for Trump!』編

2016-12-19 14:38

No more! SPAM放置

こんにちは、UPPER PROJECTの日暮です。
今回はGoogleAnalyticsにおけるスパムに触れることがあったので、書いておきたいと思います。

GoogleAnalyticsにてスパム発見!

当サイトでは、アクセス状況の確認のためにGoogleAnalyticsを使っています。
スパム自体は非常に様々な種類のものがあり、たくさんの対応がされている状況だと思います。
今回のものは、GAに溜まっている解析ログにURLを表示させ、アクセスさせるためのものになります。これらのURLは決してアクセスしないようにしましょう!

Vote for Trump!とは?

GAでは、アクセスした時間などはもちろんのこと、ユーザーの閲覧情報が記録されています。
その中で、ユーザーの言語を見ることができます。例えば、日本語なら「ja_JP」、英語なら「en_US」など。
これを使って、どんな言語の人が自分のサイトを見てくれているのかなどを調べることができます。

GAのスパムに多いのは、自分の言語情報などを偽装して、URLなどを表示させるものだと感じています。先ほども書きましたが、これらのURL先にはどんなウイルスなどが潜んでいるのか分かりませんので、絶対にアクセスはしないようにしてください。

最近多いと感じているスパムは以下のような感じです。

  • Secret.ɢoogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!
  • o-o-8-o-o.com search shell is much better than google!
  • Vitaly rules google ☆*:。゜゚・*ヽ(^ᴗ^)ノ*・゜゚。:*☆ ¯\_(ツ)_/¯(ಠ益ಠ)(ಥ‿ಥ)(ʘ‿ʘ)ლ(ಠ_ಠლ)( ͡° ͜ʖ ͡°)ヽ(゚Д゚)ノʕ•̫͡•ʔᶘ ᵒᴥᵒᶅ(=^ ^=)oO
  • Google officially recommends o-o-8-o-o.com search shell!

これらの文字列が、言語の欄に出てきます。通常は、「ja_JP」などが出ている場所になりますので、完全に異常なものですよね。
ネットワークの情報から見てみると、ロシアの人なのかなー?とも思われますが、こちらもどんな偽装がされているのかも分かりません。

ちなみに、「Vote for Trump!」については以下のサイトに詳しく書いてありました!
» これもリファラスパムの一種なのかな? 「Vote for Trump!」ってなにさ?

対応について

これらは、リンクとして表示されるわけではなく、通常のテキストとして表示されます。
テキストをコピペしてアクセスなどしなければ、実際に被害が出ることは少ないとは思います。
あまりこの辺りのリテラシーが高くない方がGAなどを見ることがある場合は、多少危険があるので、そもそも表示されないように対処などをしておいた方がいいかもしれません。

ちなみに、このサイトではGAのビュー設定でスパムっぽいアクセスについては除外することにしました。

GAの設定についてはこちらのサイトを参考にしています。
AnalyzeFindOut~アクセス解析を調べる

まとめ

今回は、言語の偽装によるGAスパムについて触れましたが、リファラーや検索キーワードなどを偽装するケースも多々あります。
自分一人で運営しているサイトならまだ気になりませんが、これらのスパムを放置することで様々な危険があるので、見つけ次第、可能な限り対応をしておいた方がいいと思います。

こういうことをする人たちがいなくなればいいんですけどね。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

Pokémon GO Plus GETだぜっ!!

2016-12-13 13:31

Pokémon GO Plus GETだぜっ!!

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

WEB解析士はじめました

2016-06-28 02:28

新米WEB解析士の日暮です。
先日、WEB解析士の資格を取得したので、今回はWEB解析について書いてみました。

これまで

WEBサイトを作る際に欠かせないものとして色々な要素がありますが、Googleアナリティクスもその一つだと思います。
サイトを見に来たユーザーが何人いたか、どこから来たのかなど、サイトを運営している人なら気になるところでしょう。
その計測の手法として、GAは非常に有効な手段の一つです。

近年、サイトを作る際にGAを入れないことはほぼ無くなったと言えるくらいです。
僕も良く自分のサービスや知り合いのサイトを作る際に、GAを毎回入れていたのですが、今回試験を受けたことで、全く考え方が変わりました。

WEB解析で大事なこと

まず、WEB解析で一番大事なことは、目的を明確にすることです。
何故サイトを作るのか、自分はそのサイトで何をしたいのかなど、そこをいつも忘れないようにすることが本質的なところなのを忘れてはいけません。

これまでは、どうしたらサイトをもっと見てもらえるか、というところを重視してサイトの運営をしていました。しかし、目的はサイトの運営ではなかったのです。
あくまでも、自分は「サイトの運営者」と言う位置付けがあったため、pv数や検索順位などが指標になっていました。
サイトを作る人は、大体の人が「WEBサイトはプロモーション手法の一つ」と言います。
しかし、WEBサイトの指標については、その効果の部分まで話す人をあまり見たことがないことに気がつきました。
この辺りが自分の立ち位置が「サービスの提供側」としての考えが足らなかったところだったのかと痛感しました。

GAの見かた

今回WEB解析を勉強をして、GAの見かたも変わりました。
今まではGAも要所要所を簡単に流し見ていただけでした。
しかし、実際に目的を作って見てみた場合、色々な面が気になるようになりました。

例えば、イベントを企画して、その告知や募集を目的としてWEBサイトを作ったとします。
今までは、PV数が伸びているか、どこのページからリンクして来たのか、などという部分を考えていました。
応募が少ない場合、もっとPVを伸ばさないと!とりあえずSNSでシェアさせよう!という考えのみでした。
もちろん母数が単純に少ない場合は、その施策でもいいのですが、TOPページの閲覧数と応募ページの閲覧数、そこから実際の応募数を確認することで、「単純に応募ページの構成が判りづらかったのではないか」ということも考えることができます。また、TOPページではなく、応募ページをシェアした方がいいなどということも考えるようになりました。

想像することが大事

WEB解析をする中で、GAのログなどからユーザーがどのようにサイトを閲覧したかを想像します。
どこから入ってきて、どのページを見たのか、目的は達成したのか、満足したのか、データとにらめっこしながら動きを想像します。
そして、こちらがユーザーに「こうして欲しい」という期待を合わせて、コンテンツを更に充実させていく必要があります。
WEB解析に必要なスキルは、データ解析に必要な知識と、データからユーザーの情報を読み解く想像力だと感じました。

WEB解析から学んだこと

最近いろいろなところで感じることではありますが、ものを作るということは、想像するということなんだと思います。
「これを作ることで何が変わるのか」「本当にこの通りに作っていいのか、もっとこうした方がいいんじゃないか?」など、様々な視点で考える必要があります。
また、もしチームを組んでいる状態なら、意見交換などをすることも非常に大事です。
考えたり、話したりすることで、自分では出てこなかった斬新なアイデアが意外と出てきます。
そして、それを続けていくことで、少しずついいアイデアが自分でも出せるようになってきました。
どうしても仕事をしていると、その範囲でどうするかを考えてしまいますが、本当はもっと大きなくくりで考えることが非常に大事なことです。
WEB解析士の試験では、そこに気がつかせてもらいました。

また、解析という分野ではWEBだけではなく、普段生活している全てのものに対して関係することなのかと思います。
データ人間になりたいというわけではありませんが、たまに物事の見方を変えてみてみるというのもいいかもしれませんね。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

AMPで爆速Webライフ

2016-05-23 12:28

Accelerated Mobile Pages

こんにちは、日暮です。
今回は最近巷で話題のAMPについて調べてみましたのでメモレベルに残しておきます。

AMPとは

AMPとは、Accelerated Mobile Pages(アクセラレイティッド モバイル ページ)の略で、モバイル環境でウェブページの表示を高速化するためのプロジェクトです。GoogleやTwitterが推進するプロジェクトになります。

2016年2月から本格スタートし、ニュースサイトを中心に少しずつ広がってきています。また、アメブロなどでもAMP対応が進んでいて、快適な閲覧をすることが可能となっています。
現在のところ、まだニュースサイトやブログなどに用途が限定されている感じですが、今後急激な広まりを見せると思われるので、調べてみました。

AMPの魅力

AMPの魅力は何と言ってもページの表示速度です。
AMPの仕様に沿ってサイトを構築すると、Googleのスマホ検索結果に表示されたAMPページが一瞬で表示されます。
ページの閲覧に対するストレスが非常に少ないので、もう少し一般的にAMPサイトという認識が広がれば、気軽に閲覧してくれるユーザーが増えるかもしれません。

また、Googleの検索結果ページで、「トップニュース」というエリアが表示されます。AMP対応のページはここに表示されます。
例えば、朝日新聞や産経新聞は現在AMP対応をしていて、読売新聞はまだAMP対応をしていません。ここで、「新聞」とGoogleで検索してみてください。
「トップニュース」エリアに朝日新聞や産経新聞の記事は出てきますが、読売新聞は出てきません。
競合他社に対抗するためにも、これだけでAMP対応をする1つの理由になるのではないでしょうか。

AMPの仕組み

AMPはどのように高速な表示を実現しているのでしょうか?
Googleの検索結果画面のHTMLを見てみたところ、「トップニュース」エリアが表示された際に既に1つ目のAMPページはiframeで読み込まれています。
ユーザーがリンクをタップすると、ページ遷移するのではなく、検索結果画面内のiframeでAMPページを表示しています。
AMPページはCDNにキャッシュされていて、これらの仕組みで瞬時のページ表示を実現しているようです。

AMPの実装

AMPの実装は技術的には、さほど難しいことはありません
AMPの書式に沿ってHTMLを記述し、そのHTMLにschema.orgで構造化マークアップをするします。
全体としては、記事のHTMLとは別にもう1つAMP用のHTMLを作成し、metaタグで互いにリンクをはっておく感じです。(AMP用のHTMLのみ作成することも可能です。)

以下のサイトで分かりやすく実装方法が紹介されていたので、参考にしてください。

AMPとは~対応HTMLを作ってみてわかったこと~ – Webマーケティングのブレインネット

AMPの今後について

現在は「ニュース」と「ブログ記事」などに用途が限定されていそうですが、今後は他の記事などにも対応していくのではないでしょうか。

先日、ZOZOTOWNもAMP対応をしたようですが、現在ではトップニュースエリアから姿を消しています。
これは、ZOZOTOWNが初期はschema.orgのページタイプを「記事」に設定していましたが、現在schema.orgの記述がないことが原因だと思われます。
ZOZOTOWNのページでは、実際は商品の紹介・売買のページのため、正確にはschema.orgのページタイプを「商品」に設定することになります。
(GoogleのトップニュースエリアにAMPページを表示するためには「記事」、「ニュース」、「ブログ記事」のいずれかに設定する必要があります)
このことがGoogleから指摘されたのか、ZOZOTOWNが自主的に直したのかは定かではありませんが、現状はschema.org自体がなくなっています。

個人的には商品のページが素早く見ることができるというのは非常に面白い試みだと思ったのですが、まだまだECサイトにAMP導入は早いということなのでしょうか・・・
いずれにしろAMPが今後広まっていくのはそう遅くはないと思います。

まだまだAMPが広まっていない今が、AMP導入の絶好の機会なのではないでしょうか。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

QRコード生成

2016-04-20 03:02

キービジュアル

QRコードを生成する

こんばんは、日暮です。今回はQRコード生成用のJSライブラリを試してみました。

仕事でWebサイトを作っていることもあり、テストサイトのアドレスをQRコードにしてスマホで読み込むということが度々あります。以前はMacのDashboardのウィジェットでやっていたのですが、OSをアップデートしたらDashboardが消えてしまったので、いいソフトがないか探していました。(後で気がついたのですが、Dashboardは普通にアプリケーションに入っているのですね・・・)
あまり気に入ったアプリが無かったので、どうせなら自分で作ってみようということで、いくつかJSのライブラリを探してみました。
すると、jQuery.qrcodeというライブラリが見つかりました。

ライブラリ選定のポイントは、QRコードの生成時に通信が発生しないことと、カスタマイズ性です。テストサイトということもあり、できるだけ外部に情報を送りたくないということがあります。また、今後QRコードを表示したいということがあるかもしれないので、デザインを色々いじれることもこのライブラリを選んだポイントです。

いざ実装!

実装は非常に簡単でした。
ライブラリを読み込んで、数行のスクリプトを記述するだけでQRコードを表示することができました。
オプションなども結構細かくでき、基本的にはこのライブラリだけで大体のことはできると思います。

オプション

QRコード生成時にオプションを設定することで、QRコードを細かく設定することが可能です。
オプションとしては、下記のようなものがありました。

  • QRコードに入れる情報(URLやテキストを設定)
  • QRコードの大きさ
  • QRコードの色
  • QRコードの背景色
  • QRコードの細かさ
  • QRコードの誤り訂正レベル
  • QRコードのエリアの大きさ
  • QRコードの丸み
  • QRコードの中に表示するテキスト
  • テキストエリアのデザイン
  • テキストサイズ
  • テキストの横位置
  • テキストの縦位置
  • テキストの色
  • QRコードの中に表示する画像

試しに自分で使いそうなものでデモを作ってみました。よかったら使ってみてください!
QRコードジェネレーター

まとめ

QRコードが非常に簡単に作れることが分かったので、今度何かに提案してみたいと思います。

レッツQRライフ♪

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

カーシェアリング始めました

2016-03-28 09:23

carshare

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

UBERを使ってみて

2016-03-22 20:43

UBERについて

日本では、まだ馴染みの少ないサービスUBER。
オースティンで開催されたSXSW2016に参加した際、移動は公共交通機関のほかにUBERをよく使いました。
(SXSW2016の内容については、後日記載します!)

アプリ上で乗車場所と行き先を指定し、車のアイコンが近づいてくるのを待ちます。
車が近づくのも確認できるので、安心です。

UBER画面サンプル

UBERのサービスについては、以下をご参照ください。
https://www.uber.com/

UBERの他にもlyftと言う競合サービスもあります。
競合とは言え、多くのドライバーはUBERとlyftを掛け持ちしていました。
https://www.lyft.com/

UBER poolについて

UBER poolとは、相乗りサービスです。
目的地が近いユーザを相乗りして運び、費用を抑えてくれます。
乗合する人数と、混み具合にもよりますが、2割~5割安い感じでした。
もちろん、相乗り(pool)しない選択肢もあります。

相乗りする人が酔っていたりすると少し大変ですね。。
実際「今から一緒に飲みに行こう!」と誘われることもありました。笑

UBER画面サンプル

おじいちゃんのドライバー

70歳後半のおじいちゃんの運転手が担当してくれたこともありました。
乗車早々に、おじいちゃんのiPhoneが動かないというハプニング。。

「道が良く分からないから、案内してくれる?」

と言われ、ナビゲーションをしながら、無事に目的地まで到着することができました。笑
楽しく移動できたから、これはこれで、いい経験でしたが。

副業としてのUBER

多くのドライバーは、副業としてUBERの運転手をしています。
例えば、車の整備士さんもいれば、プログラム開発者の人もいました。

ドライバーさんに話を聞いていると
「UBERはとても金額が安いから、副業ぐらいじゃないと、厳しいよ。」
と、言っている人がほとんどでした。

ナビゲーションについて

ドライバー、お客さんそれぞれのUBERアプリに目的地までのルートが表示されます。
UBER poolであれば、他のお客さんのPICK UP場所なども表示されます。

ドライバーはこの表示されたルート通りに運転をすることになっているようです。
そのため、別ルートを通ることもないので、お客さんもアプリでルートを確認しながら移動できます。

たまに、アプリがナビゲーションを間違えることもあるようで、
オースチン・バーグストロム国際空港に向かって移動した際に、
空港の裏側に到着してしまい、慌てて正面に移動したこともありました。

評価制度について

UBERの特徴の一つとして、評価制度があります。

・ドライバーがお客さんを評価
・お客さんがドライバーを評価

の2種類です。

UBER乗車後、評価画面が表示され★の数で評価を行います。
コメントも記入できます。

ある一定以下の評価のドライバーは、ドライバー登録を抹消されてしまうらしいです。。

IMG_8198

カスタマーサービスについて

乗車指定していた場所で、ドライバーと上手く落ち合うことができず、ドライバーから乗車をキャンセルされてしまったこともありました。
その際、キャンセル料として5ドル請求されましたが、ドライバーと上手く落ち合うことが出来なかった事をカスタマーサービスに送信しました。

結果として、
費用はお返しし、次回値引きますね。
と返事がありました。

良くできていますね。

IMG_8367

移動インフラ

サンフランシスコにおいて、Google Mapで行き先を指定すると、車、公共交通機関、徒歩、自転車に加え、公共交通機関の画面上にUBERという選択肢も表示されます。
まさに移動インフラになりつつあるサービスです。

UBER画面サンプル

自動運転とUBER

運転手はUBERアプリの提示する道順を走行します。
そのため、多少なりスマホの画面を見ながら(操作しながら)の運転となります。

自動運転が可能となることで、ドライバーというある意味で最大のリスクを回避することができます。
自動運転とUBERの今後に注目しています。

takabayashi

著者:takabayashi(Planer / Designer)

レーザーカッター講習を受けました

2016-03-22 18:23

レーザーカッター習得に向けて!

以前より触れてみたいと思っていたレーザーカッターに、ようやく触れてきました。ひと昔前では精密な工作などは非常にハードルの高いものでした。
まず、工房などは専門的な場所であり、素人が入ることすらできなそうなイメージすらありました。しかし、最近では色々なところに工房ができ、それが比較的低価格で使えるようになってきました。また、プロトタイプの文化が少しずつ根付いてきたこともあり、今まで手を出していなかった人たちもやってみようという流れになっているように感じます。

レーザーカッターとは

名前の通り、レーザーによる加工ができる機械です。加工プロセスには「カット」「彫刻」「マーキング」などがあり、非常に多岐にわたる加工をすることができます。
その魅力はなんと言ってもレーザーによる正確な加工ではないでしょうか。また、アクリルやガラスから木材まで、多くの素材を扱えることも魅力だと思います。

はじめてのレーザーカット

使い方も非常に簡単で、1時間程講習を受けたら大体覚えることができました。
実作業に必要なものは、カットする素材とデータ(.ai)です。本職がweb系なこともあり、データの形式なども馴染みがあってとっつきやすかったです。

色々な設定値で試してみました。ちょっと焦げたものもあります笑

まとめ

レーザーカッターを使うことで、ほとんどデジタルの知識しか持っていない僕が実際に「もの」を作ることができました。もちろん、いいものを作るためにはもっと練習が必要となると思われますが、ディスプレイの外側で物体を作ることができることは、とても大きな喜びがありました。
今後、IoTや展示コンテンツなど、色々なところに導入していけたらと考えています。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。

PhotoSwipeがすごい!

2016-03-17 08:30

JavaScriptの画像ビューアライブラリのPhotoSwipeが素敵だった。

仕事でJavaScriptの組み込みなども行っているのですが、画像を拡大させる様な見せ方を求められることが多々あります。
簡単な方法では、画像をblankで開くとかもあるのですが、あまりスマートではないですね。別途作っても良いのですが、PCやスマホ、タブレットなどと考えていくと、なかなか大変な話です。

「ここまで要望のある機能なら」と言うことで調べてみたら凄いのが出てきましたので紹介したいと思います。

PhotoSwipe

ページ内の設定された画像をタップすると、かっこいいアニメーションで画像が拡大されます。更に、拡大後の画像をスワイプすると、次の画像に移動できます。
他にも画像の拡大縮小やキャプション、シェアなど機能などもあります。

使ってみる

実際に組み込んでみると、非常に軽快な動作です。若干古めのiPhoneやAndroidでも問題なく動作します。
また、PCでも非常に綺麗に表示をしてくれるので、今後はこのライブラリを重宝することになりそうです。

組み込み方

こちらでは実際の組み込み方などについての説明は省略します。
以下のサイトが非常にわかりやすく解説をしてくれていたので、そちらを紹介させて頂きます。

PhotoSwipeの使い方!Light Boxの決定版を導入しよう!

まとめ

スマートフォンが普及してから、Webサイトでもアプリライクな動作を求められることが非常に多くなってきました。
フロントエンドでもやることが非常に多くなってきているので、便利なライブラリなどを上手く使いこなしていくことも大事だと感じています。
また、ライブラリを使う際には色々と気をつける点もあるので確認は忘れないようにしましょう。
ライセンスや動作環境、etc・・・

ときにはライブラリの中身を見てみるなども、とても勉強になるのでオススメです。

またいいライブラリがありましたらこちらで紹介させて頂きます。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。