tech.kayac.com

この記事は tech.kayac.com Advent Calendar 2013 24日目の記事となります

いよいよ、Advent Calendarも最終日ですね。人生を考えてしまう、不惑が目前となってきた@takihitoです。 「不惑の心構え」 について書きたいところですが、そこは孔子専門家に譲ることにして、今回はちょっと便利な自作ツ ールの紹介したいと思います(訂正:社内にいるのは老子の専門家とのことです、ごめんなさい;;)

APIレスポンスのJSONモックを作る際、Keyが多いと面倒だったりしますよね。 DBとテーブルが既にある場合、tsv2jsonを使うとカラムをキー名としたJSON形式に変換することが出来ます

$ mysql -u root game -e "select id,price,exp from monster limit 3" | tsv2json
[{"exp":"200","price":"150","id":"1"},{"exp":"200","price":"150","id":"2"},{"exp":"200","price":"150","id":"3"}]

DBにクエリを発行するとTSV形式のデータが返ってくるので、それを直接JSON形式に変換といった感じですね。 -n オプションを を付けることで値の形式を文字列から数値型に変更することも出来ます

$ mysql -u root game -e "select id,price,exp from monster limit 3" | tsv2json -n id,exp
[{"exp":200,"price":"150","id":1},{"exp":200,"price":"150","id":2},{"exp":200,"price":"150","id":3}]

csv2jsonもあるので、Excel→CSVにしてCSVファイルから変換することもできます。 xxx2xxx系のツールはネットのあちこちに落ちていたりもしますが、この程度であれば自作し手元に用意していてもいいですね。

jqを使ってみる

JSONといえば、 jqコマンドですね。絞り込みや成形を行うことが出来ます。

idが2以上のデータだけを表示させるにはこんな感じで。mapでリストをなめながら、selectの条件に一致する要素だけを絞り込みます。

$ mysql -u root bushiroadkr -e "select id,price,exp from monster" | tsv2json -n id,exp | jq "map(select(.id >= 2 ))"
[
  {
    "id": 2,
    "price": "150",
    "exp": 200
  },
  {
    "id": 3,
    "price": "150",
    "exp": 200
  }
]

SQLで条件書けば良いだけの話かもしれないですが、ファイルとして手元に落とした後でも、お手軽に絞り込めて重宝だったりします。

そういえば、今年はLTSV元年でした。社内の新規案件では、LTSV形式のログを吐き出す事が多くなってきています。 ltsview は-jオプションを使うことでjson形式で成形し吐き出すことが出来ます。

# レスポンスタイム0.5sec以上のログ
$ cat access_log.ltsv | ltsview -j | jq 'select( .response_time | tonumber >= 0.5 )'

ただし、lstviewだと行ごとの成形になるので、グループ分けしたい時にはちょっと不便なので自作のltsv2jsonを使ったりしています。

# URL毎に分類
$ cat access_log.ltsv | ltsv2json | jq 'group_by(.uri)' 

[
  [
    {
      "status": "200",
      "response_time": "0.028",
      "uri": "/api/mypage",
    },
    {
      "status": "200",
      "response_time": "0.033",
      "uri": "/api/mypage",
    },
  ],
  [
    {
      "status": "200",
      "response_time": "0.099",
      "uri": "/api/paly",
    },
# レスポンスタイム0.5sec以上のログ
$ cat access_log.ltsv | lstv2json -j | jq 'map(select( .response_time | tonumber > 0.5 ))'

他にも

  • csv2perl

csvをperlのデータオブジェクトに変換、ファイルに落とせばdoして取り込む事ができるので、スクリプトで集計処理する時には便利ですね

  • json2yaml

YAMLの形式がイマイチよく分からないとお悩みの方は、JSON形式で書いてjson2yamlで形式変換するとスッキリ解決しそうです

まとめ

さて、Advent Calendar 2013 はいかがだったでしょうか? 様々な職種、退職者の方もいたりして大変オープンな雰囲気が伝わっていただけたら幸いです。

香盤表では25日の欄があったので、トリではないと油断していたのですが 「 普通は24日までだよね」という空気になり、小ネタで25日にパスしようとした目論見が外れた感じです。 なかなか人生思い通りにならなうものですな

それでは、また来年のAdvent Calendarでお会いしましょう。

この記事は tech.kayac.com Advent Calendar 2013 23日目の記事です。

こんにちは!最近rubyを書かせていただいております@yumiyonです。

技術の話が続きましたので、今日は変わってSEO(Search Engine Optimization)の話をしたいと思います。

創ったサービスは、なるべくそのサービスに関連するクラスタの方々に知って使ってほしい . . . !

と思うのは世の常です。

というわけで、わたしが普段Webサービスを創るときにチェックしている「最低限」気にするべきSEOのチェックリストをご紹介いたします。(2013年12月現在時点での内部施策)

目次

  1. 検索エンジン向けのXMLサイトマップを作成する
  2. パンくずリストを作成する
  3. 狙いたいキーワードに沿った適切なページタイトルを設定する
  4. 1ページ1テーマを徹底する
  5. サイトの表示速度は最大限に高速化する
  6. 論理的に正しいHTML文書構造にする
  7. URLは1つに統一する

panpen.png

自分の創ったサービスにたどり着いて貰う為には

  1. 「ソーシャルメディア」で知ってもらう
  2. 「検索」で知ってもらう

という大きく分けて2つの方法が考えられます。

たとえ一時的にバズったとしても、その瞬間はある程度のアクセス数にはなりますが、継続的に新規ユーザーに流入してもらうためには「検索」で流入してもらう必要があります。そのためにSEOの中でもまずは基礎的な内部施策の話を7つほどします。

1. 検索エンジン向けのXMLサイトマップを作成する

検索で来てもらう時に最初にしなければいけない事は、検索エンジンに「インデックス」してもらうことです。そもそも検索結果に表示されなかったらわりと辛いです。

サイトマップ

サイトマップ(XMLサイトマップ)とは、簡単にいうと Google の通常のクロールでは検出できない可能性のある URL を含むサイト上のすべてのページを Google に知ってもらう手段のことです。

検索エンジンは通常、リンクを辿ってそこからURLのリストを見つけ出してくれますが、見つかりにくいものもあり(他のページからあまりリンクされていない場合など)上手くクロールされない可能性もあります。

そこで「sitemap.xml(クローラー向けのサイトマップ)」を作成してウェブマスターツールでアップしておくと、適切に評価してくれるようになります!

サイトマップを自動で創ってくれるツールもあるのでぜひご利用ください!
サイトマップを作成-自動生成ツール「sitemap.xml Editor」

作成したXMLサイトマップは、トップページと同階層に保存します。 あとはwebマスターツールからサイトマップの追加をして完了です。

ウェブマスター ツール - サイトマップの送信
googleの公式説明「サイトマップについて」

2. パンくずリストを作成する

昔から何かと大切といわれている「パンくずリスト」。

パンくずリストとは、ページ内で自分が今どのページにいるのかを表すナビゲーションの事ですが、適切なパンくずリストを配置することで、ユーザーにとってもクローラーにとっても親切になります。

家電 > 冷蔵庫 > 製品P

設置するメリット

  1. ユーザーがどの階層のどこのページにいるのかが瞬時にわかる
  2. 検索エンジンにサイトの階層構造やリンク構造を伝える事ができる

検索エンジンは「関連性のあるページからのリンク」をより高く評価すると言われています。 階層を構造化して下層ページを適切にカテゴリーで分ける事で、関連性のあるページをリンクで繋ぐ事ができます。

注意点

ただし、関連付けようとして階層をあまり深くしすぎると構造が深すぎるサイトを創ってしまいがちです。リンク構造を考えるとトップページから目的のページまでどれだけシンプルに到達できるかです。だいたい「3クリック以内」で到達できるようにしておくといいと思います。

マークアップ

階層を示しているので順序にも意味あるのだから ul じゃなくて、ol でマークアップするのが正しい!という話もありますが、詳細な答えは2013年現在は決まっていませんのでどちらでも大丈夫だとは思います。

ウェブマスターツール - パンくずリスト

3. 狙いたいキーワードに沿った適切なページタイトルを設定する

サイトへの流入はトップページからだけではなく、すべてのページから行うことが可能です。

一番狙いたいキーワードを決めて、不自然じゃない適切なページタイトルをつけると適切な人に伝わります。

例:バイトで狙いたい場合(社名だけだと何のサイトかわからない)

◯  バイトの求人情報!バイト探しに役立つモスエージェント
△  モスエージェント

そのページの「タイトル」がもっとも重要だといっても過言ではないので、しっかり時間かけてつくりあげましましょう。

狙いたいキーワード(知ってほしい人が検索しそうなキーワード)はタイトルタグに含めます。

4. 1ページ1テーマを徹底する

上記とも関連づいてきますが、たくさんのキーワードで訪れてほしいために、様々なテーマを設定してしまいがちなのが世の常です。

そのページで一体「何」がいいたいのか?をはっきりさせることが大切です。専門性を高くすることがそのサイトの価値を高めることにもつながります。

タイトルタグとは、そのコンテンツの最も重要な見出しとみなされます。

例:「飲食 バイト」「プログラミング バイト」で狙いたい場合

◯ : 飲食店のアルバイト/バイト募集情報〇〇エージェント
    プログラミングのアルバイト/バイト募集情報◯◯エージェント
× : 飲食店・プログラミング・デザイン・スポーツ・パソコンのアルバイト/バイト募集情報◯◯エージェント

現在は、基本的に「1つのページ」は「1つのテーマ」でやりましょう。

あげたいキーワードを何度もいれる行為は場合によってはペナルティになりますのでご注意を。

10個のキーワードで上位に表示してほしい!といった場合、それぞれのキーワードに沿ったページを10ページ作り、それぞれのページに対しSEO対策を実施することが重要です。

5. サイトの表示速度は最大限に高速化する

サイトの表示速度は高速なら高速なほどいいです。(ユーザーとしてもロードが遅いページは離脱率もたかまります)

  1. フロントエンド側での高速化
  2. バックエンド側での高速化

要するにソースコードをシンプルにして、速度をあげるということですね。 このあたりでチェックできたりもします。

Webサイトのページ表示速度チェックツールまとめ

6. 論理的に正しいHTML文書構造にする

W3Cに基づいた正しい文書構造で記述することは大切ですね。 タグをちゃんとした形で使用するということです!

論理的なHTML(文書構造)を意識してつくるWebデザイン(CSS)… とSEO

HTMLのアウトライン意識してますか? - QiitaのSEO事情(前編)

このあたりを読めばひと通りわかると思います。HTML5はまだ確定版が決まってませんが、とりあえずtitleとh1はちゃんと設定しておくとよいでしょう。

7. URLは1つに統一

忘れがちなのですが、ドメインの末尾の「/」があったりなかったりなど、同じコンテンツなのに複数のURLが創られていることがあります。

※複数のURL例

http://www.sample.com/

http://sample.com/

このURLは一見同じページに見えても、検索エンジンにとっては「全く別のページ」になります。

これは大問題で外部からの被リンクが分散してしまうし、複数のURLが存在していると「重複(複製コンテンツ)」になりマークされる可能性もあります。

このように2つに分かれてしまっている場合はリダイレクトして「統合」する必要があります。

詳細はこちらより

記事自体は2008年ですが、内容は2013年現在も変わっていないので大変参考になります。

301リダイレクトを使った「WWWあり」と「WWWなし」の統一

おまけ

技術と一緒でSEOは日々進化しています。

今回取り扱ったのは基礎的なところばかりでしたが、気にしているのとしていないのとでは色々変わってきますので何かの参考になればと思います。

特にGoogleが定期的に行う、パンダとペンギンアップデートなどのアップデート関連は気にしておくとよいかもしれません。 Google ウェブマスター向け公式ブログ

ただ絶対的なSEO施策みたいな裏ワザは存在せず、ユーザーのことを常に考えてコンテンツを改善していけば、それが一番良いSEOになるということです。

最後までお読みいただきありがとうございました。

最後に

明日の担当は、人生の先輩である @takihito 様です!!

このエントリーはtech.kayac.com Advent Calendar 2013の22日目のエントリーです。

こんにちは、サンタさんには給料三倍をお願いしました@hisaichi5518です。

Github使ってますか? そうですね、使ってますね。最高です。
カヤックも最近のサービスは、Githubを使って開発しています。最高です。

当然、イシューやプルリクを使って開発しているのですが、
ブラウザでイシューの新規作成画面を開くためにポチポチするのがめんどくさかったり、
ブラウザで現在のブランチのイシューを開くためにポチポチするのがめんどくさかったり、
イシューをプルリクに変えたりするのも、わざわざイシューを指定したりするのがめんどくさかったり、
イシュー番号からブランチを移動するのがめんどくさかったり、
とにかくめんどくさすぎると思ったので、そういうのを改善するスクリプトをちゃちゃっと書きました。

Macだとこういう感じです。イシューをプルリクに変えたりするためにghが必要なのでインストールします。

brew install gh
git clone git@github.com:hisaichi5518/git-scripts.git ~/src/git-scripts
export PATH=~/src/git-scripts:$PATH

というようにすると以下のコマンドが使えるようになります。

git new-issue           # イシュー作成画面をブラウザで開く
git look-issue          # 現在のブランチに紐付いたイシューをブラウザで開く
git pr                  # 現在のブランチをプルリクし、かつ紐付いたイシューも紐付ける
git sugoi-move (branch) # (branch)にブランチの名前の一部をいれるとそれっぽいブランチに移動する 
git push-current-branch # 現在のブランチをoriginにpushする

ブランチに紐付いたイシューというのは、単純に "feature/yureyure-oppai-iss100" というようなブランチを作っているだけです。
gitのサブコマンドとして、提供されていますが、githubにしか対応していません。
あとこんな長いのを打ってると手の骨が折れると思うので、aliasとか設定しておくとよいと思います。

というわけで、Acme::YurikoYoshitakaを書こうと思っていましたが、
めんどくさくなってやめて、10分くらいで書いたスクリプトでその場を誤魔化しました。

明日は面白サービスを作りまくってる@yumiyonくんが書いてくれます。楽しみ!