リンクバル

2017.03.31

Pagespeedapiを使ってみた

funayoseyoshito

リンクバルの船寄と申します。
web系の開発者なら、誰もがお世話になっているPageSpeed Insightsを
apiから利用してみたので、ご紹介させて頂きます。

やりたかったこと

PageSpeed Insightsを利用して、画像の最適化について指摘されている項目を抽出し、日本語かつsjisでcsvファイルとして保存したい。
URLを記載したリストファイルを準備し、リストに記載されているURLをANALYZEしたい。
実行時間をなるべく短縮したい。

やったこと

golangで使って簡単なコマンドツールを作ってみました。

実行環境は以下の通り

macOS Sierra 10.12.3
go version go1.8 darwin/amd64

事前準備

公式clientを準備する
https://github.com/google/google-api-go-client/tree/master/pagespeedonline/v2

[code lang=text] go get google.golang.org/api/pagespeedonline/v2
[/code]

sjisでcsvへ保存したかったので、エンコーディングパッケージを準備する

[code lang=text] go get golang.org/x/text/encoding/japanese
[/code]

ANALYZEするURLを記載したリストを準備する

ソースコード

結果

結果はresult.csvへ出力されます
ツールを実行することにより、下記の形式でcsvファイルを出力することができました。

実行日時	2017-03-30 13:59:22.807444599 +0900 JST
mobile/desctop	mobile
対象ページのURL	http://hogehoge.com
対象ページのTITLE	hogehoge title
対象ページのSPEED SCORE	56
指摘ルール名	画像を最適化する
指摘内容サマリ(Summary)	画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます。
指摘内容詳細	http://hogehoge.com/assets/fuga.jpg を圧縮すると 113.4 KB（74%）削減できます。
指摘画像URL	http://hogehoge.com/assets/fuga.jpg

※１ PageSpeed Insightsで画像の最適化について指摘されている箇所のみが、一行づつ出力されます。
※2 表が長くて収まらないので、縦向きに記載しております。

サイトからポチポチするより断然効率化できますよ。
ご興味ある方は使ってみてください。

リンクバルではエンジニアを積極募集中です。
興味のある方は、こちらからご応募ください!

2017.02.28

LogStashでElasticSearchにlogを送る

sinoue

リンクバルの井上です。
ElastcSearch, Kibana, Logstashの使用例の定番といえばアクセスログなどのログ収集と可視化かと思います。
今回はログ収集からKibanaでの可視化までの簡単なsampleをご紹介します。

Logstashのインストール

今回はbrewでinstallしてみたいと思います

brew install logstash

log収集のためのconfファイルの作成

今回は簡単な設定ファイルを作成します

この設定ファイルを使用してlogをelasticsearchへ送信します。

設定ファイルの解説

input

読み込むファイルを指定する今回は標準入力の設定です

[bash] input {
stdin { }
}
[/bash]

下記のように直接ファイルを指定することも可能

[bash] input {
file　{　path="/var/log/apache2/access.log" }
}
[/bash]

filter

logファイルから取得したログをelasticsearchように整形する

[bash] filter {
grok {
match => { "message" => "%{COMBINEDAPACHELOG}" }
}
date {
match => [ "timestamp" , "dd/MMM/yyyy:HH:mm:ss Z" ] locale => "en"
}
mutate {
replace => { "type" => "apache_access" }
}
}
[/bash]

output

ログの送信先を設定今回はローカルのElasticsearchを指定している

[bash] output {
#stdout { codec => rubydebug }
elasticsearch { hosts => ‘127.0.0.1:9200’ }
}
[/bash]

logをElasticSearchへ送信

下記のようにファイルを指定してコマンドを実行してみます

/usr/local/bin/logstash -f logstash.conf < -f logファイルのpath

kibanaでの確認

kibanaを開くと下記のように画面が表示されてますが緑色のCreateボタンを押下します

すると下記のような画面になるかと思いますので次にDiscoverを押下します

logstashから送信されたデータが確認できました。

いかがでしたでしょうか？意外と簡単にログ送信できるイメージできたでのではないでしょうか

リンクバルではエンジニアを積極募集中です。興味のある方は、こちらまでご応募ください。もちろん、社内の人間と面識があるのでしたら、直接にご連絡いただいてもかまいません。

2017.02.28

OpenLDAPでSSH公開鍵を管理

Masaru Kawabata

リンクバル技術部の川畑です。サーバーのログインユーザーのSSH公開鍵についてOpenLDAPで管理できないか調査しました。OpenSSHをソースからコンパイルしてとかいろいろ情報がありましたが、Ubuntu 14.04.1 LTSではOpenSSH 6.6.1p1がapt-getで入手できるのでスキーマファイルをダウンロードしてincludeするだけで簡単に設定できそうなので検証してみました。

検証環境

OS:Ubuntu 14.04.1 LTS
OpenSSH:6.6.1p1
OpenLDAP:2.4.31

LDAPサーバ側の設定

まずLDAPサーバでの設定手順

2017.02.28

新人プログラマが迷うであろう英語スラングを少々

hsato

こんにちは. エンジニアの佐藤です。
皆さん、勉強中や仕事中「あれどうすんだこれ…」な時はどうしますか?
Google先生ですよね。自分もいつもGoogle先生か、あるいはとなりの関くんに聞いてみたりします。弊社の場合,関さんですが。
先日もgoogleにてStack Overflowに行き着くと、見慣れない略語がありました。
そこで、自分がエンジニアになってから見かけた英語略文字を晒します。あくまでWebエンジニアになってから見た英略字だけです。
‘lol’,’WTF’,あるいは’ggrks’とかはエンジニアじゃなくても見かけますので紹介しません。

PR

Pull Request
意味プルリクエスト

githubにて使われます。ローカルブランチをリモートリポジトリにpushすることです。ブランチを切らずに行う ‘git push origin master ‘は他のメンバーに迷惑をかける危険な呪文です。もし双子のウィーズリー兄弟がエンジニアなら、頻繁にスネイプのリモートリポジトリにpushしてると思います。

LGTM

looks good to me
意味: よさげやん＾＾ｂ

これもgithubにて。他人のPRを確認し、私からは問題ないように見えますよ、という時に使われます。 GIF画像でもたくさんありますね。新人エンジニアには他人のPRに”LGTM”と書き込むのは少々ハードルが高いと思われますので、MergeされたPRにでも書き込んで練習しませう。
http://giphy.com/gifs/cravetvcanada-community-cravetv-3osxYgwe4L44McZWKs

RTFM

read the f***** manual
意味ここで聞くなよ! マニュアルに書いてあるだろ

先日stack overflowで見かけたのはこいつです。こっちは読んでもわからないから聞いてるんだよ!(全部は読んでなかったけどな) 新人はおとなしく先輩に聞くのがよいかと思います。
別なものでUTSL(use the source, Luke)もあるらしいが見たことない。

nginx

エンジンエックス
意味フリーかつオープンソースなWebサーバ¹

いや、これは別に略語ではないんですけど、自分は読めなかったので書きます。皆さんは堂々と「エンジンエックス!」と覚えてください。

本当はもっとあった気がしたのですが、思い出せません。
そもそも、単語は読めても何を指すのかわからない、ということも多々あるわけで、、
勉強と実践の繰り返しですね。何事も。

見つけたら追記していきます。

リンクバルでは英語に堪能でruby on railsが得意なエンジニアを募集しています。
リンクバルに興味を持った方は是非こちらからご応募ください。
では。

https://ja.wikipedia.org/wiki/Nginx ↩

2017.02.27

山本（♀）が”お局さん”になりかけた（なった）事件

yamamotoyukari

女性が若い会社で働くって結構勇気いることですよ。
なんで、って？
それはいわゆる”お局さん”になるスピードも速いからなんです。
このブログを書いている山本（♀）は25歳。
まだまだチヤホヤされたいお年頃。

「山本はまだ、25歳だから～♪」
25歳なんて、世間的に言うと「ひよっこピヨピヨ」レベルですが、
設立5年目のリンクバルで今年3年目に突入する私は、株式会社リンクバル内では、”お局さん”の領域に入ってきました。
そんな山本（♀）のエピソードをどうぞ鼻で笑ってやってください。

ある日のこと・・・
後輩Y（23歳）（山本美月似）が、こういってきた。

すると私はこう答えた。

すると後輩Y（23歳）（山本美月似）が、
更にびくびくしながら、

このやりとりを一部始終を見ていたエンジニアのMが、

え、これって怖い？←もはや感覚も狂い始めている。

こういう時、「全然大丈夫よ」とどうして素直にいえないものか。
※実際全然大丈夫だし。
最近なんか一癖文句言ってやんないときが済まなくなってきているのが自分でも怖いところ。

そういえば、こんな事も起こったのよ。

昔だったら

ソレが今や・・・

いや、おっしゃるとおりなんですよ。
でもさ、なんか味気ないじゃない。
人とつながっていたい時ってあるじゃない？

そんなこんなで、エンジニアで後輩Sに相談してみた。

するとエンジニアで後輩Sがバッサリ。

センチメンタルジャーニー~♪

チヤホヤされたい女子の皆さん、
会社の平均年齢を調べておくのはとっても大事よ。
だってチヤホヤされる時期ってただでさえ貴重なんだもの。

さて今日はこのへんで。
え、山本美月似の後輩Yの写真を出せって？
なら実際に来てみたらどうかしら。
でも後輩Yに確実に会えるかは保証しないわよ。

株式会社リンクバルで
一緒に働くエンジニアを募集中です！
新しい事にチャレンジしたい、もっともっと成長したい、そんな
フロンティアスピリットをお持ちの方が生き生きと働ける会社です。
詳細はコチラ

2017.02.27

私が愛してやまないUI/UXデザインツール「Adobe Experience Design」

Hoge Fugao

プロトタイピングツールは、超大雑把に言うと以下の２種類に分けることができます。

画面遷移を作るやつ
インタラクションを作るやつ

調べてみたところ、上記２種の合いの子みたいな製品もあるようですが、
中途半端なヤツは嫌いなので見なかったことにしました。

私の用途はアプリよりもWebが多く、インタラクションよりも画面構成と遷移を作って
「こんな感じっす」とお披露目することが多いので、前者に属するものをよく使います。
その中でも、以下の２点においてAdobe Experience Design （Adobe XD）を上回るものは無いと思っています。

簡単（初見で使える）
速い（サクサクアウトプットできる）

XDはなぜ簡単なのか

ひとことで言えば「Adobeだから」です。
XDは、Adobe CCに含まれる製品であり、操作性も非常に似通っています。
そのため、Adobe製品に慣れ親しんだデザイナーやフロントエンドエンジニアなら、初見でプロトを作り込んでいくことができます。

デザインモードの画面。Photoshop等と比べるとシンプルだが、痒いところに手が届く感じ。

XDはなぜ速いのか

XDは、UIデザインツールでもあるからです。
PhotoshopやSketchで作ったデザインをエクスポートして、ProttやInVisionで読み込んで…という流れに対して
手間というか、「なんでここシームレスじゃないの？」という違和感を覚えたことはないでしょうか。
私はいつも軽くイラッとしておりました。

XDには「デザイン」と「プロトタイプ」の２つのモードを素早く切り替えることで、２つの作業を同時並行で進められます。
厳密には並行していないのですが、「並行感」が大事なのです。
プレビュー用の URLひとつで他のメンバーに共有もできるため、この点においてもスピーディーです。

プロトタイプモード。初見でも直感的に操作できる。

そして無料！

Adobe IDを持っていれば無料で使えます。
ぜひ一度試してみてください。

クリック！株式会社リンクバルでは一緒に働くエンジニアを募集中です！クリック！

2017.02.27

Twitter APIとMeCabで街コンのエゴサーチをした話

hseki

社会人2年目エンジニアの関です。

突然ですがリンクバルの主要サービスと言えば・・・そう「街コン」ですね。
日頃街コンジャパンという街コンのサイトを保守・運用しているわけですが、やはり一般ユーザからのサービスへの評価が一番気になるところです。
しかしユーザ一人一人にインタビューするわけにもいかないですし、Twitterとかでエゴサーチをしようにも情報量が多すぎていまいち価値のある評価が良く分からない。
そこで今回は、Twitter APIとMeCabを使って「街コン」に関するツイートの中からより重要な単語・ツイートを分析・発見していきたいと思います。
続きを読む

2017.02.03

Athenaを使ってS3のログファイルを検索してみる

maedakazuki

AWSのサービスにS3のログ解析ツール「Athena」について書かせて頂きます。

Athenaとは？

https://aws.amazon.com/jp/athena/

Amazon Web ServiceのS3にある大量のログをSQLのクエリを書いて抽出できるサービスです。
大量のファイルが分割されていると解析するのが大変なのですが、

これらのファイルの入っているパケットを指定してAthenaの設定を完了すると、
以下のようにSQLクエリを実行するだけで検索できてしまいます。

SQLクエリは業務で良く書きますので、データベースを触っていたサーバーサイドエンジニアでも使いやすいのではと思いました。

Athenaの設定方法

１、データベースを作成する

２、データフォーマットを指定する

※CSVやJSONのデータフォーマットも指定できます。

３、カラムを指定する

4、パーティションを指定する

※CreateTableを押すとAthenaで利用するデータベースの完成です。

Athenaを使ってやってみたかったこと

json形式でファイル出力されたS3のログをキーベースで検索して、簡単にS3のファイルからデータを抽出したかったのですが、結果できませんでした。
なぜかというと、ファイル転送を挟んだログファイルだったためにファイル自体がtsv形式だったので、json形式のデータフォーマットに適用できなかったためです。
カラム型にjson型があると嬉しいなと思いました。

TSV形式での検索

LIKE検索ができますので、ログ自体の検索はできましたし、レスポンスも遅いわけでもなく使い勝手は良かったです。

下記、簡単なクエリ例です。SQLと変わらないですね。 SELECT * FROM table_name WHERE column_name LIKE '%xxxxx%' LIMIT 100;

まとめ

AWSを使ってS3に溜まっているログをAthenaを使うだけで抽出できるので、今後も使っていきたいと思います。
導入も簡単なので、まだ使ったことのない方は試してみるとどうでしょうか。

最後に

リンクバルではエンジニアの採用を募集しています。採用はこちら

2017.02.02

JMeterによるもっとも簡単な負荷テスト方法

sinoue

リンクバルの井上です。
今回はJMeterで誰でもできるもっとも簡単な負荷テストをやってみます

JMeterの起動

まずJMeterを起動してみますすると下記のような画面が表示されるかと思います

テストは基本的にはこのテスト計画に対して作成していきます。

スレッドグループ設定

まずテスト計画を選択した状態で「編集」を押下し「追加」の「Threads」と見て行くと下記のようにスレッドグループが表示されますのでスレッドグループを選択しましょう

スレッドグループを追加すると下記のような画面が表示されます

ここではどのくらいの負荷をかけるか設定をします。

例えば「10のスレッドを20秒の時間をかけて処理開始し、スレッド毎にシナリオを1回だけ実行する」だと下記のようになるのでこの辺をいじれば基本的な負荷は大丈夫です

スレッド数: 10
Ramp-Up期間(秒): 20
ループ回数: 1 (無限ループのチェックボックスはオフにしてください)

GETリクエストの設定

次にスレッドグループを選択した状態で「編集」から「追加」、「サンプラー」と見て行くと下記のようにHTTPリクエストが表示されるので追加します。

追加したHTTPリクエストに下記のように今回は自分のローカルアプリケーションの設定をしていきます

今回は単純なページアクセスの負荷をかけるのでサーバ名、メソッド、パスのみ設定します

試験結果の表示

そして負荷をかけたら当然結果を見たいかと思いますので結果表示の設定をします。

また同じ手順でスレッドグループを選択した状態で「追加」、「リスナー」と見ていくと下記のように表示されるので「結果を表で表示」を追加します

さてようやく準備が整ったので負荷試験を実行します

実行する際は上のメニューにあるので緑の再生ボタンのようなボタンを押下すると実行されます。

すると結果は「結果を表で表示」で以下のように表示されるかと思います。

いかがでしたでしょうか？簡単な負荷試験ならこんなに簡単にテストが作れるんです！

2017.01.31

【WordPress】投稿を集計するただひとつのプラグイン「Site Posts Stats」