Aggregator

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップを公開します。

• （1）谷 拓樹さん
• （2）森田 霞さん（アップルップル）
• （3）こもり まさあきさん
• （4）宇野 陽太さん（ピクセルグリッド）、坂巻 翔大郎さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）
• （5）小林 信次さん（まぼろし）、 宮地 存さん（エムティーアイ）
• （6）高津戸 壮さん（ピクセルグリッド）

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、小林 信次さん（まぼろし）、 宮地 存さん（エムティーアイ）の『music.jpのリファクタリングbefore / after』セッションのスライドなどをシェアします。

• スライド

フォローアップ

「music.jpのリファクタリング before / after」を担当した小林です。
Twitter上で、懇親会で、ページ表示速度の改善により、変わらなかったと紹介した代表的な数値（ページビューなど）にも影響があったのではないか？というご意見をいただきました。
具体的な理由はあかせませんが、もろもろありまして今回のリファクタリングではページ表示速度に大きな変化はありませんでした。

また、リファクタリングにかかった時間を知りたいというご意見がありました。
コーディング自体は1ヶ月もかかっていません（0.8人月くらいです）。

コーダー飲みもよろしくお願いいたします。

動画

CSS Nite LP39「music.jpのリファクタリング before / after」 from CSS Nite on Vimeo.

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、宇野 陽太さん（ピクセルグリッド）、坂巻 翔大郎さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）の『ビルドツールはじめの一歩（タスクランナー編）』セッションのスライドなどをシェアします。

• スライド（PDF、228ページ、18.4MB）

フォローアップ

Gruntとgulpについてのセッション、いかがでしたでしょうか？このセッションでお伝えしたかったのは、タスクランナーそのものもありますが、意外とコマンドラインで必要な操作は少ないということもお伝えしたい意図がありました。例えば、gulpのインストールまでに必要なのは、順に

```
node -v
npm install -g gulp
npm install
```

の計39文字です。これから導入したいと考えているかたはぜひ挑戦してみてください。インストール手順は動画にまとめていますので、以下の補足とあわせて参考にしてください。

「CSSNite LP 39 gulpのインストールから起動まで」

画面はMacですが、Windowsの場合はターミナルのかわりにコマンドプロンプトを使います。

テキストによる詳しい説明も用意しています。

• gulp用: https://github.com/cancer/get-started-gulp
• Grunt用: https://github.com/cancer/get-started-grunt

## 補足

セッション中、インストールに関しての説明不足が一部ありました。

### Windowsのかたへ

Nodeのインストーラを使いインストールしたあと、「node -v」と打ち込んでもうまくnode.jsが動かないことがあります。その場合には、以下のページを参考に、調整をしてみてください

http://webdev.jp.net/windows-nodejs-path/

### Macのかたへ

Nodeのインストーラを使いインストールしたあと、「npm install -g gulp」でエラーになってしまうことがあります。この場合、管理者権限でコマンドを実行します。そのためには、コマンドの前に「sudo」（Super User Doの意味）を付けてください。

つまりこのようになります
```
npm install -g gulp
```
ではなく、以下とします。
```
sudo npm install -g gulp
```
(この後パスワードを聞かれます)

## 質問への回答

アンケートのコメント、全て読ませていただきました。貴重な、参考となるご意見ありがとうございます。
いくつかコメントで質問をいただだきましたのでお答えいたします。

### プレビューサーバにGrunt/gulp設定ファイルを同期するメリットは？

小山田：基本的に、GitではSassから吐出されたCSSファイルや、結合後のJSファイルは管理しないようにし、元ファイル（scssや結合前のJS）のみを管理していました。そのため、プレビュー環境でもビルドする必要があり、プレビューサーバにもGruntやgulpを動かしていました。

### Gruntを使っています。gulpに変える必要はありますか？

小山田：ありません。Gruntとgulpはマリオとルイージのような関係で、できることはだいたい同じです。ただし、gulpのほうが後発ということもあり、処理が効率的(並列で処理してくれる)、スマートな書き方、不要な中間ファイルを出さないようにできる、というGruntにはないメリットがすこしあります。
もし余裕があればgulpも試してみるといいでしょう。

### ピクセルグリッドさん的に、Middlemanのことはどう思いますか？

小山田：個人的にはMiddlemanは大きすぎると考えています。Grunt/gulpのような小回りが効きづらいと考えているので必要がなければ使わないと思います。

### Rubyのバージョン管理にも困っています

小山田：僕もそうなんです！主にSassのためかと思います。個人的に、最近は本家Sassではなく、Rubyに依存しない、libsassを使うのがいいかなと思い始めています。grunt-sass, gulp-sassは、libsassのラッパープラグインでRubyなし、node.jsにのみ依存して利用できるので、こうした、依存をできるだけ少なくする手段をとってみるといいと思います。

### 静的ファイルのみを納品している時に、クライアント側で更新される際のルール

坂巻：HTMLに関しては、量産のためのテンプレートでしたので、クライアント側で更新されることはありませんでした。CSS/JSに関しては変更したい場合は依頼をもらって、変更ファイルを渡しました。またJSファイルの中でもクライアント側で編集したいと言われて、結合対象から外したJSファイルがあり、そのファイルがクライアント側で変更された時は、変更後のファイルと何が差分なのかがわかるものををいただきました。（といっても僕はGitを使っているので差分はGitで出せるのですが）

SCSSに関してですが、クライアント側でCSSを調整したいといった要望がある場合は、SCSSから生成したCSSとは別に、クライアント側で自由に書けるCSSを用意しておくのが良いかと考えています。

```html
<!-- SCSSから生成したCSS -->
<link rel="stylesheet" href="/path/to/file.min.css">
<!-- クライアント側で変更をするためのCSS -->
<link rel="stylesheet" href="/path/to/style-client.css">
```

このように、SCSSから生成されたCSSと、クライアント側でそのCSSにないものを追加したり、上書きしたりするためのCSSを読み込むようにします。メリットはSCSSがわからなくても問題がないこと。デメリットはクライアント側で追記されたCSSによってモジュールが壊れたりする可能性があることでしょうか。

### Gruntを使ったプロジェクトではベンダープレフィクスについては含めなかったのでしょうか

坂巻：ベンダープレフィクスはCompassによって付与されています。これもまた開発開始時期の話になり、Autoprefixerのバージョン0.1が登場したのが2013年4月なのですが、ある程度安定したバージョン1.0が出たのは2013年の12月頃でした。その頃はAutoprefixerの知見が無かったため、Compassを使用していました。

### compassはもう過去のものなのですね（；；）

坂巻：いえ、Compassは使用しています。ベンダープレフィクスで使うこともありますが、`background-image`プロパティなどで使える、`image-url()`や、画像の幅を取得できる`image-width()`をよく使っています。[grunt-contrib-compass](https://github.com/gruntjs/grunt-contrib-compass)を使うことで、GruntからCompassを使うことができます。（Gruntとは別に、compassのインストールが必要です）

### プロジェクトのディレクトリ構造をどうしているか知りたいです

坂巻：大規模サイトのリニューアルといっても、古いコンテンツを残しつつ、新しいものも追加される形でした。なので、基本的にはそのプロジェクトのディレクトリ構成と同じように揃えてたり、いろいろ事情があってのディレクトリ構成なので、参考になるかはわからないのですが、以下の様な形です。

```

    project

    ├ .editorconfig

    ├ .gitignore

    ├ Gruntfile.js

    ├ config_siteA.rb

    ├ config_siteB.rb

    ├ Gemfile

    ├ Gruntfile.js

    ├ package.json

    ├ README.md

    ├ htdocs_siteA/

    │ ├ _template

    │ ├ _styleguide

    │ ├ _jsprototype

    │ └ common/

    │      ├ css/

    │      │ ├ style.css

    │      │ ├ font/

    │      │ │ └ fontawesome-webfont.woff

    │      │ └ src/

    │      │      ├ style.scss

    │      │      └ partial/

    │      │           ├ _setting.scss

    │      │           ├ _base.scss

    │      │           └ _project-header.scss

    │      ├ img/

    │      │ ├ misc/

    │      │ └ project-header/

    │      │      └ logo.png

    │      ├ include/

    │      │ └ project-header.txt

    │      └ js/

    │           ├ modernizr.custom.js

    │           ├ script.min.js

    │           ├ lib.js

    │           ├ src/

    │           │ └ project-header.js

    │           └ vendor/

    │                └ jquery.js

    └ htdocs_siteB/

    └ htdocs_siteAとほぼ同様

    ```

動画

CSS Nite LP39「ビルドツールはじめの一歩（タスクランナー編）」 from CSS Nite on Vimeo.

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、こもり まさあきさんの『ゼロからテストサイトまで5分で立ち上げます！』セッションのスライドなどをシェアします。

• スライド（PDF、10ページ、8.3MB）

フォローアップ

「CSS Nite LP39」に参加された皆様、長丁場お疲れ様でした。セッション3のこもりフォローアップです。

5分でテストサイトを立ち上げるデモのみのセッションをおこないました。
ピンマイク＋10分の時間をいただいたこともあったとはいえ、細かな解説はおこなうことはできませんでしたので、以下簡単ですがフォローを。

今回使ったスタティック・サイト・ジェネレータは「Harp（http://harpjs.com/）」です。

こちら、Sass、Less、Jade、EJS、MarkdownにCoffeeScriptと、Harp本体をインストールするだけで動きます。プラグインとかそういった外部のツールをインストールしたり設定する必要はなく、サーバを起動すればすぐサイト制作に入れる優れものです。また、Dropboxを使った「Harp Platform（https://www.harp.io/）」があるので、制作したものをそのままDropboxホスティングすることもできます。

数ページ?数十ページ程度のサイトであれば、プログラム言語に不慣れな方が多機能化しまくっているCMSでサイトを作るより、Markdownをはじめとしたテキストファイルのインクルードや簡単な条件分岐やJavaScriptを使ってサイトを構築しやすいかもしれません。

当日実際に作成、公開したファイルは下記GitHubのリポジトリにあります。
https://github.com/gaspanik/cssnitelp39

スタティック・サイト・ジェネレータは古くからいろいろな言語で開発・公開されています。Ruby界隈で人気のMiddlemanやJekyllなども同じものです。「StaticGen（https://www.staticgen.com/）」には、GUIのツールも含めさまざまなジェネレータが公開されていますので、こちらご参考まで。

また、Twitterのハッシュタグ（#cssnite_lp39）でいくつかあげていただいてますが、デモ中に利用していたツールなどは以下になります。

• Fish（ターミナル内のシェル）
• Jade（HTMLテンプレートエンジン）
• Bootstrap Jade Snippets
• Divshot（PaaSホスティング）

今回は静的なサイトをホスティングできるDivshotを使いましたが、アカウントさえ作っておけばコマンドラインからあのようにサーバを起動することが可能です。当日時間の関係で省略しましたが、ファイルを編集して再度アップロードするのもコマンドで一発ですし、開発サーバ・ステージングサーバ・公開サーバと3段階で環境を用意して公開することもできます。

Harpなどはnode.jsで動くので、環境そのものをheroku.comでホスティングすれば、いちいちサイトを書き出してアップしなくても大丈夫です。PaaS系はテストぐらいは無料で試せますし、費用も大量なアクセスを処理する以外は安価で利用できます。以下はherokuでの動作サンプルです（無料モードで動かしているので、アクセスがないと数分でスリープするので初回アクセス時に時間がかかります）。
https://lp39harp.herokuapp.com/

以上、デモ中は時間の関係もあって詳しい手順を順追って説明することができませんでしたので、セッションそのものが何をやっていたか不明な部分も多々あったかと思います。ただ、ああこういう作り方もできるんだ、と気付いて頂けていれば幸いです。

フレームワークやタスクランナーも含め、制作する時間を短くする術は豊富に揃っています。頭を使う、コードを書く、本来時間をかけるべきところにきちんと時間をかけていただければなぁ、とこもりは思っております。ありがとうございました。

こもりまさあき

Development Environments for Web Designers ?Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方

以下は、セッション中に紹介した現在販売している電子書籍「Development Environments for Web Designers ?Webサイト制作の時流に乗り遅れないために、覚えておきたい開発環境の作り方」が、CSS Nite LP39に参加された皆様（とフォローアップ参加の皆様）向けとして39%引きで購入できるURLです。

https://gum.co/GFXe/cnlp39

コマンドラインの基本からnode.jsやRubyの環境の作り方、さまざまなツールの紹介、タスクランナーのgulpの基本から実際のコードまで幅広く内容を入れておりますので、当日のセッションで興味を持たれた方は内容を抜粋したサンプルをご覧ください。

http://hive.gl/5TtQl （100p超のサンプルPDF）

動画

CSS Nite LP39「5分でゼロからテストサイトまで立ち上げます！」 from CSS Nite on Vimeo.

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、森田 霞さん（アップルップル）の『理想のCSSフレームワークを探して』セッションのスライドなどをシェアします。

• スライド（PDF、83ページ、8.1MB）

フォローアップ

CSS Nite LP39 に参加された皆さま、お疲れさまでした。
セッション3「理想のCSSフレームワークを探して」を担当した森田です。

私よりも経験が多い方々の前でお話するということもあって、物足りないと感じた方もいたかと思いますが、最後まで聞いていただきありがとうございました。
中にはCSSフレームワークを使ったことがなかった方もいたようなので、少しでも今後のCSSフレームワークの使い方の参考になればと思います。

それでは、アンケートにありました質問と会場でしっかり回答できなかった質問への回答です。

＞フレームワークの組み合わせは重くなりそうですが、軽くする工夫やそもそも重くならない？

使わないパーツが多くなってしまうので、組み合わせないときよりも、もちろん重くなってしまいます。気になる場合は、スライドでもご紹介していた、サイトからカスタマイズしたり、CSSプリプロセッサーからカスタマイズするといった方法を使い、不必要な部分は削除して、必要な部分だけにしてCSSを使うと軽くなります。

＞他に面白かったコードはありますか？

こちらは質疑応答で出た質問です。
Bootstrap や Foundation のpullとpushのグリッドシステムの実装が変わっていて面白かったです。こちらはスライドでもご紹介しましたが、position: relative; を使って、HTMLの順序に依存せずにレイアウトを変更できます。例えば幅が25%のものを右寄せにしたい場合は、left: 75%;と記述することで、左から75%のところから始まるようにして、右に寄せています。

CSS Nite LP39「理想のCSSフレームワークを探して」 from CSS Nite on Vimeo.

2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、谷 拓樹さん（サイバーエージェント）の『基調講演：CSS設計の理想と現実』セッションのスライドなどをシェアします。

• スライド（PDF、129ページ、48MB）

フォローアップはこちらにまとめました。

動画

LP39-s1-tani from CSS Nite on Vimeo.

HCD-Netでは、人間中心設計を普及するために「HCDのヒント」というカタログを2015年のHCD-Netフォーラムで配布いたしました。この資料を企業の中で使用したいという要望が多くの方からいただきましたので、本Webサイトにてこの資料のPDFデータを配布することにしましたので、ご活用ください。

Computer vector designed by Freepik

こんにちは。ニューズ・ツー・ユー「ネットPR.JP」編集部です。

前回はWeb広告に関する米国法規制 について具体例を交えながらご紹介しました。 後編では、米国での「推薦・証言ガイドライン」違反事例と米国における口コミサイト動向についてレポートします！

＞＞前編はこちら

口コミサイトへの投稿に割引提供していた自動車運送ブローカーがFTC（連邦取引委員会）の措置命令受入れを合意 （2015年2月訴状、4月最終命令）

自動車運送ブローカーのアメリフレイト社は、サービス利用者に割引や報酬によって口コミサイトへ投稿を促し、その事実の開示をしていませんでした。さらに、同社ウェブサイトで「自動車運送業で最も高いユーザー満足ランキングとコメントを誇る会社」と宣伝していました。

FTCは2014年10月に同社を調査しFTC法違反の訴状を発行。FTCと同社は2015年２月末に合意し、30日間の一般からの意見募集期間を経て、同年４月20日に最終命令がでました。最終命令の中でFTCは、ユーザーコメントによるトップランキングといったウソの宣伝を禁止し、対価などがあればユーザーとの関係を明確に開示することを命じました。このケースはFTCが口コミサイトへの不正投稿をした会社に訴状を発行した初のケースとなりました。

関連URL：

• FTC Approves Final Order Barring AmeriFreight from Deceptively Touting Online Consumer Reviews and Failing to Disclose Incentives It Provided to Reviewers

• Advertisement Endorsements

口コミ情報サイトにやらせ投稿をしていた関連業者19社を摘発（2013年9月）

エリック・シュナイダーマンニューヨーク州司法長官は、Yelp（レストランなどの口コミサイト）やGoogle Local（地域情報検索サービス）、CitySearch（都市ごとの口コミサイト）などへの偽コメント投稿に組織的に関与していた業者19社をニューヨーク州法違反で摘発しました。この19社にはSEO（検索エンジン最適化）業者やそうした業者を雇っていた企業などが含まれました。

組織的なやらせ投稿問題の調査を１年にわたって進めてきたニューヨーク州司法局は、おとり調査としてブルックリンのヨーグルト店になりすましてSEO業者に相談を持ちかけたところ、投稿1件当たり1～10ドル程度の料金で偽装コメントを依頼できることを突き止めました。

摘発された各社は、2,500ドルから10万ドル弱の罰金を支払い、今後は偽レビュー投稿に関与しないことを誓約。罰金の総額は35万ドル以上に及びました。

• A.G. Schneiderman Announces Agreement With 19 Companies To Stop Writing Fake Online Reviews And Pay More Than $350,000 In Fines

以上がFTCによる訴状案件事例ですが、口コミサイトを持つ企業側の動きはどうなっているでしょうか？最後に米アマゾンとYelpの事例をご紹介します。

米国でも口コミサイトへのサクラ投稿の疑惑は続いており、2015年になってAmazonとYelpは組織的な偽造評価コメント投稿を続ける業者を相手に民事訴訟に踏み切りました。

Amazonの事例

Amazonは、2015年4月8日、Amazonの顧客レビューを売っている業者らに対して、商標権侵害や虚偽広告などで訴訟しました。

訴状によると、これらのサイトでは顧客コメント１件に対して19ドル～22ドルでAmazonのセラーに販売し、Amazonサイトに最高評価５つ星コメントを「スロードリップ」式（この方式だと同社の持つ偽造コメントの検出システムで発覚しにくくなる）で書き込んでいました。Amazonが同社サイトへの偽造コメント禁止に向けた初の訴訟となりました。

• Amazon sues to block fake reviews on its site（シアトル・タイムズ紙報道記事）

Yelp（レストランなどの口コミサイト）の事例

Yelp は、2015 年2月13日に、偽造評価書き込みにかかる訴状をカリフォルニア州北カリフォルニア連邦地方裁判所に提出しました。訴状によると、レビューを販売していた「Revleap」は、口コミのコメントを高評価の4つ星や5つ星として大量に作成してYelpのトップページに掲載し、3つ星以下のコメントがでてこないようにするというソフトウェアを販売していたといいます。

• Taking A Stand Against Misleading “Reputation Management” Companies （Yelp公式ブログ）

• Yelp sues companies promising positive reviews（CBSニュース）

一方、Yelp自身もFTCの調査対象となっていました。同サイトに掲載されるレストランや事業主らから、同社の営業活動と投稿操作に関連した苦情が2,000以上も寄せられていました。FTCは、同社の偽コメント検出技術や投稿の社内操作の可能性などを調査していましたが、Yelpの公式ブログ（2015年1月）によると、FTCは調査を終えてそれ以上の措置は取られなかったといいます。

• FTC Closes Investigation of Yelp, Takes No Action （Yelp公式ブログ）

• Yelp Says FTC Won’t Act on Complaints About Its Reviews（ウォールストリートジャーナル紙）

前編、後編を通じて、米国におけるステルスマーケティングやなりすましに対する法規制やその事例についてご紹介しました。この記事が少しでも皆様のお役に立てれば幸いです。

たくさんクロールさせても、そのページの評価が上がることはないし検索順位は上がらない。また、サイトマップの <priority> タグをクロールの重要度を示す要素としてはGoogleはほとんど利用しない。

- クロール頻度を上げてもランキングは上がらない -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

Web担当者Forumの連載コーナー、「海外&国内SEO情報ウォッチ」を更新。今週は、『スマホ版ページをnoindexにしてもスマホ検索には出る!?（スマホ対応ラベルも付く）』、『CAのエンジニアがAngularJSとSEOを両立させたテクニック』、『グーグル「遅いページにはモバイル検索結果でイエローカードを出そうかな」』など10記事+2記事。

- スマホ版ページをnoindexにしてもスマホ検索には出る!?（スマホ対応ラベルも付く）【海外＆国内SEO情報ウォッチ】 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki