投稿者「kei」のアーカイブ

Subversionで413レスポンスが返却された場合の対処

kei|2013年03月11日
DevOps

ご無沙汰しております。keiです。

Subversionで、大容量ファイルをコミットする際に遭遇した
エラーの対処方法について、共有の意味で記事化させて頂きます。

事象

開発が完了したプロジェクトのソースをまとめてコミットしようとした際に、
ステータスコード413:Request Entity Too Largeが返却されてきました。

 svn: サーバが、リクエストへのレスポンスとして予想外の戻り値 
  (413 Request Entity Too Large) を送信してきました

ログを確認した所、以下のログが出力されていました。

  request body exceeds maximum size (131072) for SSL buffer

SVNへのアクセスはHTTPS通信にしているのですが、SSLバッファの最大値が128KBに対して、リクエストボディのサイズが超えてしまっているようです。

対処

一時的に、SSLバッファの最大値を上げました。
SSLRenegBufferSizeディレクティブで最大値を変更できます。
本設定は、DirectoryかLocationブロック内に記述する必要があります。

  SSLRenegBufferSize 100000000

追記後、Apacheを再起動し、最コミットしたところ、無事にコミット出来ました。

importで対処すればいい話ではありますが、何か事情があってコミットが必要な場合にお試し下さい。

AWSのEC2 API Toolsをインストールなしで利用する方法

kei|2012年12月14日
AWS

こんにちは、ランサーズ インフラ担当のkeiです。
本日は、EC2 API Toolsをインストール作業をすることなく利用する方法をご紹介します。
ランサーズでは、試験環境から本番環境までAWS上でサーバ運用をしており、
先日、Amazon様の事例紹介ページに掲載して頂きました。

EC2 API Toolsとは

EC2 API Toolsは、EC2をAPI経由で操作するためのコマンドラインツールです。
最近は、Management Consoleからほとんどの操作が可能ですが、EC2 API Toolsを用いないとできない操作も存在します。
また、シェル等と組み合わせることで、より柔軟なサーバ運用が可能となります。

インストールなしで利用する方法

EC2 API Toolsは、AWS公式ページからダウンロードしてインストールが可能ですが、
Amazon Linuxには最初からインストールされています。
ちょっとした用途で使いたい場合、Amazon Linux AMIからインスタンスを作成し、設定をすることで利用可能です。以下に手順を示します。

Amazon Linuxインスタンスを作成する

EC2のManagement Consolにアクセスし、Launch Instanceを選択後、
AMI選択画面で、Amazon Linux AMIを選択します。

ゾーンやプライベートIP、セキュリティグループ等を設定後、鍵生成画面において「Create a new Key Pair」を選択します。

以上でインスタンスの作成は完了です。
VPS内にインスタンスを作成した場合、ローカル環境からアクセスするために、EIPを付与しておきます。

X.509 証明書の取得

AWSのサイト(要ログイン)より、API Toolsの実行に必要な証明書を取得します。
ページ中腹にあるX.509 証明書タブ内の「新しい証明書を作成する」リンクをクリックし、秘密鍵と証明書の両方をダウンロードします。
以下のようなファイルです。

  • cert-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pem
  • pk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pem

Amazon LinuxにSSHでログインする

  1. sshターミナルを開く
  2. インスタンス作成時にダウンロードした鍵の権限を変更する
  3. chmod 400 ec2key.pem
  4. sshで接続する
  5. ssh -i ec2key.pem ec2-user@PublicDNSName

    ※PublicDNSNameは、Management Consoleから確認可能
    ※VPS内に作成した場合は、PublicDNSNameをEIPに変更

  6. 秘密鍵、証明書をアップロードする

API Toolsの設定

  1. アップロードした秘密鍵、公開鍵をEC2_HOME配下にコピーする
  2. cp pk-xxxxxxxxxxxx.pem /opt/aws/apitools/ec2/
    cp cert-xxxxxxxxxxxx.pem /opt/aws/apitools/ec2/
  3. .bachrcに各種パスを追記
  4. vi ~/.bashrc
  5. 以下を追記
  6. export EC2_HOME=/opt/aws/apitools/ec2
    export PATH=$PATH:$EC2_HOME/bin
    export EC2_PRIVATE_KEY=$EC2_HOME/pk-xxxxxxxxxxxx.pem
    export EC2_CERT=$EC2_HOME/cert-xxxxxxxxxxxx.pem
    export EC2_URL=http://ec2.ap-northeast-1.amazonaws.com
    
  7. 反映
  8. source ~/.bashrc
  9. 動作確認(インスタンス概要を表示)
  10. ec2-describe-instances インスタンスID

.bashrcの最終行は、リージョンとして東京を設定しています。
指定しない場合は、コマンド実行時に–regionオプションでゾーンIDを指定します。

以上でEC2 API Toolsの利用が可能です。
コマンドリストはこちらのサイト等をご参考下さい。

★告知★
2013/1/21に、以下のイベントでお話させて頂くこととなりました。
AWS、MySQLの負荷対策 ~日本最大級クラウドソーシングサービス「ランサーズ」を支えるインフラ~
ランサーズでのAWS,MySQLの運用ノウハウについてお伝えできればと思います。
皆様のご参加をお待ちしております!

実装3分でクリック率UP!Google検索結果にパンくずリストを正しく表示する方法

kei|2012年10月16日
SEO

こんにちは。keiです。
今回は、パンくずリストをGoogleの検索結果に表示する方法をご紹介したいと思います。

パンくずリストとは

Wikipediaの説明は以下のようになっています。

パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

ユーザの利便性向上のためのナビであるパンくずリストですが、実は、SEOの観点からも効果的な実装であるといえます。
大きなメリットは以下の2点です。

  • サイトのリンク構造の最適化
  • 内部リンク数の増大

パンくずリストはGoogleの検索結果に反映される

2009年11月以降、Googleの検索結果には、URLの代わりにパンくずリストが表示されるようになっています。元記事はこちら
定量的なデータはありませんが、URLよりパンくずリストの方がクリック率が上がるような気がします。特に、長かったり複雑だったりするURLであればなおさらではないでしょうか。

ランサーズのページのGoogle検索結果

ランサーズのページのGoogle検索結果

パンくずリストの実装は、ulやdiv,span等を利用して記述するのが一般的ですが、
実装すれば必ずしもGoogleに認識してもらえるというわけでもないようです。
通常の実装では、以下の様な懸念があります。

  • 認識が不安定で検索結果から消えることがある
  • Googleボットがサイト構造を把握しにくい
  • 区切り文字を「>」以外にしていると認識されにくい

Googleに正しくパンくずリストを認識してもらうには?

先に挙げた懸念に対する解決策として、Microdataを用いて、Googleにパンくずリストの内容を的確に伝える方法があります。
Microdataとは、HTML文書にメタ情報を付与することができるHTML5の仕様です。
身近な例でいうと、Googleの検索結果での食べログの店舗情報がそれにあたります。
評価の★の数やレビュー数は、Microdataでマークアップされた情報をGoogleボットが解釈して表示しています。

私が大好きな鎌倉の海鮮料理屋さんの食べログ検索結果

私が大好きな鎌倉の海鮮料理屋さんの食べログ検索結果

Microdataパンくずリストの実装方法

例として、ランサーズでの実装方法を以下に示します。

    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/" itemprop="url">
            	<span itemprop="title">トップページ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design" itemprop="url">
            	<span itemprop="title">デザイン・クリエイター</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="/work/search/design/logo" itemprop="url">
            	<span itemprop="title">ロゴ</span>
            </a>&nbsp;&gt; 
    </span>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        Lancers 「激速会」 のロゴ作成の仕事        
    </span>

ポイントは以下の3点です。

  • spanタグ内に「itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”」を追加
  • aタグ内に「itemprop=”url”」を追加
  • アンカーテキストを「itemprop=”title”」を追加したspanで囲う

ランサーズはCakePHPで開発されていますが、今月からCakePHPを始めたエンジニアが3分程で実装できました。
配列にパンくず要素を入れて、for文で上記HTML出力を繰り返すだけです。

実装したHTMLは、Googleのリッチスニペットテストツールで、その妥当性を確認できます。

おわりに

SEO効果を見越したパンくずリストの正しい実装方法をご紹介させて頂きました。
Googleは、今後、セマンティック検索を強化していくと公表しています。
(参考:Googleのセマンティック検索、Knowledge Graphが全世界に拡大)

魅力的なコンテンツ作成と共に、サイトの論理構造を的確に伝える実装も意識していきたいと思います。

ランサーズでは鎌倉でランサーズを開発するWebエンジニア・デザイナーを募集しております。
くわしくは募集要項をご参照下さい。

手軽に美しく実装!ファイルアップロード用JavaScriptライブラリ4選

kei|2012年09月03日
JavaScript

ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。

こんにちは、keiです。
今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。
ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。

  • 手軽に実装できる
  • 見た目が今風
  • (大容量なので)アップロード中にプログレスバーが表示される

Uploadify

http://www.uploadify.com/
demos-uploadify
複数ファイルアップロードが可能なjQueryプラグイン。
HTML5バージョンとFlashバージョンがあります。

長所

  • 豊富なドキュメントとデモ
  • 高いカスタマイズ性

短所

  • HTML5はライセンスが必要

Plupload

http://www.plupload.com/
plupload-a-tool-for-uploading-files-using-flash-silverlight-google-gears-html5-or-browserplus
HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応しています。
features
画像のリサイズやチャンクアップロードも可能です。

長所

  • オプションが豊富
  • 高い柔軟性
  • Amazon S3に直接アップロードできるプラグインがある

短所

  • ライブラリを理解するのが難しい
  • Amazon S3プラグインでのアップロードはとても遅い(およそ2倍)

Fine Uploader

http://fineuploader.com/
fine-uploader
必要最低限の設定で、十分なアップロード機能を実装できます。

長所

  • 単純なアップロード機能を実装したい場合に向いている

短所

  • アップロード中のアニメーションが、IE6~8では動作しない

FancyUpload

http://digitarald.de/project/fancyupload/
queued-photo-uploader-c2bb-fancyupload-swiff-meets-ajax-showcase-c2bb-digitarald-harald-kirschner
JavaScriptフレームワークMooToolsをベースにしたライブラリ。

長所

  • とてもシンプル

短所

  • とてもシンプル
今回ご紹介した4つのライブラリは、手軽に実装できるだけでなく、ドラッグ&ドロップやプログレスバーをサポートするなど、ユーザフレンドリーな設計になっています。
ファイルアップロード機能を実装する際は、これらのライブラリを利用して、見た目にもこだわってみてはいかがでしょうか?
※注:ライセンスが必要なライブラリもありますので、使用の際はご確認をお願いします。

ランサーズのFacebookページでも色々な情報を発信しております。
よろしければ、いいね!をお願いします。

解析まで10分!最強のMySQLチューニングツール「Jet Profiler」

kei|2012年08月24日
DevOps

ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。

こんにちは、keiです。
今回は、MySQLのチューニングに大活躍な「Jet Profiler」というツールをご紹介します。

【2012/12/13 追記】
JetProfilerバージョン3がリリースされ、日本語対応しました。
この日本語化は、ランサーズ上で依頼されました。
http://www.lancers.jp/work/detail/69629
【追記ここまで】

Jet Profilerとは

Jet Profilerは、MySQL向けのクエリアナライザです。
クエリチューニングは、DBパフォーマンスチューニングの中でも重要な作業の1つですが、
Jet Profilerを使えば、その作業をGUIで直感的に行うことができます。

フリーウェアの形態で提供されており、機能限定版であれば無料で利用することができます。
購入する場合は、$499となります。
詳細情報、ダウンロードは公式ページからどうぞ。
http://www.jetprofiler.com/ja/

Jet Profilerの魅力

その1 導入のしやすさ

通常のWindowマシンに、普通のアプリケーションをインストールする感覚でインストールが可能です。
(追記)
ダウンロードページにはMac版、Linux版もあります。

インストール後は、接続情報を入力すればすぐに使い始めることができます。
インストールから接続までの間は10分とかからないでしょう。
※適宜、サーバ側のFWやユーザ権限(GRANT)の設定が必要です。
(追記)
パスワードなしでの接続はできません。
パスワードを設定するか、Jet Plofiler用にユーザを作成する必要があります。

その2 提供情報の豊富さ

クエリの内容や実行回数、Innodb cacheといった多岐に渡る情報を提供してくれます。
また、これらの情報は、表やグラフでグラフィカルに表示され、
情報の切り替え等の各種操作は、全てマウスで行うことが可能です。

使い方

実行結果を記録する

DBに接続ができたら、まずはクエリ情報の記録を始めます。
左上にある赤丸のアイコンをクリックすると記録が始まります。

しばらくアプリケーションをブラウザ上から操作すると、各種情報が記録・表示されはじめます。
thread_r2
上部右側の折れ線グラフは、接続されている、実行中である、実行に時間がかかっているスレッドをそれぞれ表しています。
下部には、アクセスの多いテーブルが円グラフで示されています。

クエリを解析する

下部にある「Top Queries」タブを選択すると、実行回数の多いクエリが表示されます。
クエリの内容やトータルの実行時間などを表形式で俯瞰することができます。
(追記)
無償版では、一部のクエリは見えないようになっています。。
query_r2

Rating欄にある「explain」と書かれたリンクをクリックすると、Explainの実行結果が表示されます。
explain_r2
最上部にJOIN時のサイズやExplain結果のExtra情報が、良し悪しと共に表示されます。
このクエリは、悪いJOINをしているしインデックスも効いていないのでBADだらけです。(笑)
中段には、所謂Explainの実行結果が記載されています。
一番下には、実際のクエリの内容が表示されます。

表示の切り替え

ただでさえ見やすく表示してくるJet Profilerですが、表示方法を色々と変更できます。

折れ線グラフの任意の箇所をドラッグすると、その時間帯のみズームで表示できます。
zoom_r2

折れ線グラフに表示するデータ項目の追加もできます。
adddata_r2

塗りつぶし表示にすることも可能です。
chagedisplay_r2

おわりに

Jet Profilerで確認できる情報は、スロークエリログやSHOW PROCESSLISTで確認できるものですが、それらを横断的にグラフィカル表示できること、マウス操作で簡単に切り替えられることが大きなメリットだと思います。
また、基本的にはクライアント側で動作するため、サーバが重くなることもないそうです。
コマンドラインでの解析に疲れたDB担当者の方、ぜひ導入をご検討下さい!

ランサーズのフェイスブックページでも色々と情報を発信しております。
よろしければいいね!をお願いします!

↓ツイートやはてブはこちらからどうそ↓

Web開発チームをタスクボードだけで見える化する 5つのコツ

kei|2012年07月11日
AWS

ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。

はじめまして。今月からランサーズにJOINしましたkeiと申します。

長らく更新が滞っていた本ブログですが、これから定期的に情報発信していこうと思ってますので、どうぞよろしくお願いします!

ランサーズでは、エンジニアの作業を見える化するために、タスクボードを導入しています。
今回は、社内で運用してみて効果的だった5つのコツをご紹介します。

タスクボードとは

ボードを作業予定、作業中、作業完了(ランサーズではToDo,Doing,Done)の3つのレーンに分け、タスクをその状態に応じて適切なレーンに置くことで、タスクの見える化とステータス管理を行うツールです。

ランサーズでは、ボードとしてホワイトボードを、タスクは付箋に書いたものを貼って運用しています。

ランサーズのタスクボード

ランサーズのタスクボード

運用ルール

ランサーズでは、以下の流れでタスクボードを運用しています。基本的な流れは、よくあるタスクボードの運用方法と同じです。

  1. 発生したタスクをToDoレーンに貼る
  2. タスクに着手したらDoingレーンの担当者のエリアに移動する
  3. タスクが完了したらDoneレーンに移動する

以前の記事にも書きましたが、ランサーズでは朝会での情報共有を行なっており、この朝会もタスクボードをベースに進めています。

効果的に活用するための5つのコツ

上記の運用ルールに加えて、使っていく中で改善を繰り返してきました。
その中でも、特に効果が大きかった5つのノウハウをご紹介します。

ToDoタスクを優先度で分類する

ToDoレーンを優先度の高、中、低で更に3分割しています。

新たに発生したタスクは、その優先度に応じて適切なエリアに貼り付けます。こうすることによって、手が空いた人が、どのタスクに着手すればいいのか判断がつきやすくなります。

優先度は、緊急度×重要度で判断しています。
ランサーズの傾向としては、構想段階の開発関連タスクが優先度低であがり、時間が立つに連れて中→高と移動していくことが多いです。

ToDoタスクを特定の人に割り当てない

ToDoの時点から特定の人に割り当てていると、柔軟性がなくなりタスクの消化速度が落ちることがあります。

そのため、ランサーズでは、ToDoの時点では優先度のみの分類にし、手が空いたら優先度高のところからタスクを拾っていくというスタイルをとっています。これにより、Aさんが書いたソースのレビュー修正をBさんが行うこともあります。

全体としては、優先度が高いタスクがスムーズに消化されるので、メリットが大きいと思います。

Doingレーン内にTodayレーンを設ける

先にも述べましたように、タスクボードの目的は、タスクステータスの見える化です。
特に、滞っているタスクを発見することに価値があると、私は思っています。
滞っているタスクを目立たせるために、DoingレーンにTodayサブレーンを設けています。

朝会時に、本日行うと宣言したタスクはTodayレーンに、昨日からDoingにあったものは、その隣りのレーンに移動します。

Todayレーンの導入によって、前日より前からDoingになっているタスクが、ひと目で分かるようになります。

Doingレーンに貼る枚数を制限する

ランサーズタスクボードには、Doingの文字の横に、赤字で「2枚目安」と書いています。
これは、Doingレーンに貼るタスクの数は、1人あたり2枚程度にして下さい、というメッセージです。

我々人間は、基本的には、一度に一つのことしか出来ません。従って、Doingレーンに5枚も10枚もタスクが貼ってある=その内何枚かはDoingではない、ということです。
そうなってしまっては、その人の本当のDoingなタスクが見えなくなってしまいます。

それを防ぐために、ランサーズでは、Doingレーンに貼れるタスクの枚数に制限を設けています。2枚しか貼れないため、1日のうち頻繁に、タスクボードの更新が行われるという副次的な効果もありました。

Todayレーンと枚数制限の記述

Todayレーンと枚数制限の記述

Doneレーンも人によって区分けする

一見無秩序にみえるDoneレーンですが、実は、人によって貼るスペースが暗黙に決まっています。
これにより、人毎の消化タスクの量が浮き彫りになり、以下の効果が見いだせています。

  1. タスクを完了した達成感が目に見える
  2. より多くのタスクをこなそうという積極性が芽生える
  3. 完了タスクを増やすためにタスクを増やす=細かいタスクもしっかり書き起こす

3つ目は特に重要で、突発的な作業もしっかり付箋に書き起こしてから着手するため、タスクボード使用の徹底が自ずと図られています。

おわりに

Doneレーンの右上に、文字が書いてある紙が貼ってあるのがお分かりいただけるでしょうか?この紙には、「Done is better than perfect」と書いてあります。
「完璧を目指すよりまず終わらせろ」というザッカーバーグ氏の言葉で、Facebook社の壁に書いてあるそうです。

スピードをモットーとするランサーズでは、この言葉に共感し、Doneレーンに貼っています。
やっぱり付箋がDoneレーンに溜まっていくのは気持ちいですよね!

以上、ランサーズでタスクボードによる作業の見える化が、うまく機能している5つのコツをご紹介させて頂きました。
今後も継続的に見直し、改善を続けていこうと思っています。例えば、付箋の色や大きさに意味を持たせたりと。

この他にも諸々のルールは設けていますが、基本的なことなのでここでは触れていません。
ご興味のある方は、ランサーズのTwitter,Facebookページでお気軽にお問い合せ下さい!
Twitter
Facebook

はてブ登録やつぶやく、いいねボタンはこちら↓