1. /
  2. リンクバル

リンクバル

リンクバル新規サービス開発チームにおけるSlack活用事例

PC

リンクバルの新規サービス開発チームで、チャットツールのslackがどのように活用しているかを、技術部中村が紹介致します！

リンクバルの開発メンバーは、積極的に新しいツールの導入・検討を行い、開発効率のUPに勤めています。

Slackを導入してよかったこと

  • PJを成功させる上で一番重要なのは、コミュニケーションです。
  • 席が離れたメンバーや、オフサイトの開発パートナーとのやりとりを行う時に、Slackを使うと気軽に簡単に連絡が取れるので、コミュニケーションが活発になりました。
  • 各種Webサービスとの連携が容易なので、簡易的なシステム監視が簡単にできるのもメリットですね。
  • PJチーム内のコミュニケーションにemailを使うことが少なくなり（特にエンジニア同士は皆無
    ）、結果、メールの誤配信も起こらなくなりました。

Slackを導入するときに気を付けたこと

  • 導入にネガティブなメンバーもいるので、まずは、お試しで導入してみましょうということで、やってみることが重要です。他のチャットサービスも使用していたのですが、開発者は翌日からSlackばかり使うようになりました！
  • 必要なチャンネルを整備して、ある程度投稿ガイドラインを設ける。
  • 導入時は特に、賑やかしが必要です。導入起案者は、自ら積極的に書き込んだり、書き込んだら誰かが突っ込んでくれるという場の雰囲気をつくることが重要ですね。

    • 運用フェーズで気を付けたこと。

  • チャンネル作成を個人の自由にしたことろ、トータルで40チャンネルくらいになってしまい、どのチャンネルをウォッチしたらよいか、分からないカオスな状態に。１ヶ月書き込みが無いチャンネルは基本はアーカイブするようにしています。
  • ビジネスサイドも巻き込んで使う。英語表記のアプリで抵抗を示すメンバーも居るのですが、レクチャーをして、使って貰えるようにすると、使用するコミュニケーションツールが減り便利です。
  • #general で専門的な話しが始まってログを埋めるような場合は、Share機能を使って、適切なチャンネルに誘導します。#generalは、基本的には脱退できないので、必要以上に専門的すぎる話しで埋まらないように気を付けています。

    • チャンネルの使い分けについて

  • よく利用するチャンネルの一部について、紹介致します！

    • 共通系

    #general

    挨拶、勤怠連絡、全体連絡を行うチャンネルです。
    オンサイト・オフサイト混在のチームだと、お互い本当に仕事をしているのか、不信感を持ちやすかったりすることもあるので、存在感をお互いにアピールするためにも挨拶は重要だと思います。

    #current_status

    制作チームのメンバーが、現在やっていること、やっことをつぶやくチャンネルです。
    オフサイトとオンサイトで、作業が被っていたことがあり、対策として導入しました。
    簡易的な日報もこのチャンネルに投稿します。

    #voice

    思いついたアイデアはここにつぶやきメンバーに共有します。これが、メールやチケットで共有する仕組みだと、ハードルが高く、あとで書こうとおもったときには、忘れてしまうことが多々あります。

    職種別

    #dev

    開発に関する内容を投稿します。エンジニア同士で技術的なことを議論する場合はこのチャンネルです。デザイナーも使います。

    #design

    UI/UXDに関する内容を投稿します。

    #biz

    ビジネスサイドに依頼をするときは、このチャンネルを使います。

    #infra

    インフラエンジニアに依頼をするときは、このチャンネルを使います。

    運用・監視

    #reports

    デイリーで新規会員数や、売上をシステムから投稿します。
    目的は日ごろから指標を大まかに把握して、異常値が投稿された時には、すぐに気づいて調査が行えるようにするためです。

    #alert

    システム異常が発生したときには、このチャンネルに通知されます。
    CloudWatch, PagerDuty, New Relicと連携していて、異常が起きたときに、すぐに気づけるようにしています。
    Slackは、各種サービスとの繋ぎ込みが簡単なところが、良いですね。

    #notifications

    各種Webサービスの更新通知を投稿します。
    githubやbacklog, トレロと連携すると、開発チームのおおよその動きがつかめるので便利です。
    通知が多過ぎても見なくなるので、どの程度通知するかは、試行錯誤が必要です。

    #logs

    定期実行バッチが止まっていたことを経験に、バッチの処理結果ログを流すようにしています。時々眺めて、Cron処理が止まっていないかを簡易的に把握します。

    おわりに

    リンクバルでは、自社サービスを一緒に開発するエンジニアを募集しております。興味がありましたら、ぜひお問い合わせください！

    開発プロジェクトで「Trello」を使ってみた！

    リンクバルの開発プロジェクトで使用している課題管理ツール「Trello（トレロ）」をご紹介したいと思います。

    Trelloを採用した理由
    開発プロジェクトが稼働し始めた当初、開発メンバー同士でまずは大きい機能単位の課題を洗い出し、テキストベースでGoogleDocに書き込んでいました。
    当初は課題を記入するのも簡単で全体像が見えやすかったのですが、開発が進んでいくにつれて課題が先延ばしになるものや完了していくものなど、GoogleDocでの管理では大変になってきました。
    そこで、課題をカードとして作成て優先度の高いカードはリストの上に配置するという運用をカード操作だけできる「Trello」を採用し現在も使っています。

    Trelloの使い方
    まず、ボード（Board）を作ります。ホワイトボードのような位置づけです。
    次に、リスト（List）を作ります。ホワイトボードに縦線を引いて枠を作ったイメージです。
    最後に、カード（Card）を作ります。ホワイトボードに付箋紙を貼るイメージです。
    ボード上に複数のリストを作って、そこにカードを入れて運用します。

    例えば、「やること」「着手中」「完了」というリストを作成したなら、
    「やること」リストにカードを追加し、着手したらカードを「着手中」に移動し、完了したら「完了」に移動する。

    このように操作することで、どんなやることが残っていて、今何をやっていて、何が終わったのかを一つのボードで管理するができます！

    運用ルールのピックアップ
    現在、開発プロジェクトで使っている「Trello」です。
    mj2trello

    Trelloを使い始めた当初は私がボード（Board）のリストに課題を追加していましたが、
    気づいた人が誰でも登録できる「新着」というリスト（List）がとても役に立っています。
    %e6%96%b0%e7%9d%80

    とにかくまずは「新着」リストにカードを登録する。
    いつ誰が対応するか、優先度付けを出来るだけ早めにカードを移動することで、
    やるべき課題のボリューム感、対応時期がビジュアルで分かるようになります。

    今後の課題
    「Trello」を使ってみて課題だと感じることは、開発プロジェクト開始当初と比べて細かい課題の登録が多く、さらに20人近く同じプロジェクトを使っていますので、カードがとても多い状況になるリストが存在したり、優先度付けの運用をしている時に量が多く、並び替えが大変だったりします。

    この辺りを改善するために、一部のリストは別プロジェクトに移動させて管理したりなどの工夫もされていますが、その反面、一つのボード（Board）で全体の課題を全メンバーが目視で確認できる利点もありますので、状況に応じて「Trello」の柔軟性の強みを活かして上手くやっていく必要があると感じています。

    つぶやき
    背景を単色ではなく「いい感じ」に変えてビジュアル的にも良くしていきたいな。

    現行世代と旧世代のインスタンス比較（性能&コスト）

    リンクバルでエンジニアをしている高島です。

    最近EC2上でApache Jmeterを利用しての負荷テストを実施していて、いろいろなインスタンスタイプ・サイズやOSで試したりしています。
    AWSではインスタンスタイプごとに現行世代と旧世代の2種類のインスタンスが選べますが、現行世代の方がベースの物理マシンも新しいため性能がよかったりします。

    ただ、マシン買い切りのオンプレミスとは異なり、時間単位でコストが掛かってくるAWSでは性能のよいインスタンスをとにかく投入するのではなくランニングコストも視野に入れて選定が必要となってきます。
    そこで、新旧で性能およびコストの比率をチェックしてみたいとおもいます。

    ###性能測定実施

    測定にはUnixBenchを利用してみました。
    まずはインストールです。

    実行に必要なパッケージを先に導入します。

    [bash] # yum install perl-Time-HiRes
    # yum install gcc
    [/bash]

    公式からソースコードをダウンロードし、展開します。

    [bash] $ wget https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/byte-unixbench/UnixBench5.1.3.tgz
    $ tar zxvf UnixBench5.1.3.tgz
    $ cd UnixBench
    [/bash]

    実行するとコンパイルされた後に処理が開始されます。

    [bash] $ ./Run
    [/bash]

    ###比較対象
    比較対象はvCPU数とメモリ容量をあわせたいので、c4.4xlargeとc3.4xlargeを選択しました。
    ともにvCPU数が16、メモリ容量が30GiBになります。

    ###性能比較

    c4.4xlarge c3.4xlarge c4/c3
    1vCPUのスコア 1950.3 1793.7 約108%
    16vCPUのスコア 8805.8 7753.3 約113%

    物理CPUが（c4インスタンス）E5-2666 v3 @ 2.90GHzと（C3インスンタンス）E5-2680 v2 @ 2.80GHzのため、CPU世代が進んでいてクロック差もあるため妥当な差だと思います。
    テストケースごとのスコアの掲載は省略していますが全体的にc4インスタンスが上回る結果となりました。

    ###コスト比較

    c4.4xlarge c3.4xlarge c4/c3
    $1.061/h $1.021/h 約104%

    c4インスタンスの方が上ですが、ほとんど気にならないレベルです。

    ###総括
    性能差に対して、コストの差が小さいため新しくインスタンスを選択する際には素直に現行世代インスタンスを選んだ方が無難だと思います。
    ただし、新しくリリースされたインスタンスについてはリリース直後は物理サーバの絶対数が少ないためか、オートスケールなどで起動できる台数が制限に引っかかってしまうことがあるようで、大型システムではそのあたりについて考慮する必要がありそうです。

    私が愛してやまない用途不明のFont Awesomeアイコン5選

    近頃Font Awesomeを利用することが多いです。
    適当なアイコンは無いかとリストを眺めていると、妙に心惹かれるアイコンを見かけます。
    でもそういうのに限って、ピクトグラムとしての使い道はなさそうです。
    そんな謎アイコンたちの中から、私のお気に入り５つをご紹介という誰得エントリーでございます。

    ※fa-○○というのは、HTML上でアイコンを指定するためのクラス名です。

    fa-fighter-jet（戦闘機）

    fa-fighter-jet

    使用するシーンは、あまり思い浮かびません。
    でも見た目はかっこいいです。そしてcssのクラス名もかっこいい。

    fa-space-shuttle（スペースシャトル）

    fa-space-shuttle

    何か宇宙的なコンテンツに使えるかもしれません。
    これと似ているfa-rocket（ロケット）は、より抽象的かつ可愛いデザインで好きなのですが
    今回は、より使いづらそうなこちらを選びました。

    fa-hand-spock-o（スポックの手）

    fa-spock-o

    『スタートレック』に出てくる、バルカン星人の挨拶で「長寿と繁栄を」という意味だそうです。
    日本では一般的に通用するものではありませんね。
    spockというのは登場人物のバルカン星人、ミスタースポックのことです。

    fa-bomb（爆弾）

    fa-bomb

    何かしら使い道がありそうだけど、私はまだその機会に恵まれておりません。
    見た目的には一番のお気に入りです。かわいいですね。

    fa-lemon-o（レモン）

    fa-lemon-o

    個人的には、これが一番意味不明です。
    なぜレモンなのか。よく見ると少し歪んだ形をしていることが分かります。
    サイズが小さすぎると、レモンの絵であることすら分かりづらいです。
    色を付ければもっとレモンっぽくなるのでしょうが、-oが付いている通り線画なので「塗り」がありません。

    以上になります。
    最後になりますが、私の好きなガリガリ君の味は「梨」です。
    ありがとうございました！

    VagrantとAnsibleを使ってサーバ構築自動化！

    リンクバルの川畑です。リンクバルでは各自PCでローカルに開発環境を構築して開発をしております。環境構築手順書なるものはあるのですが、環境構築が自動されていないので新しく加わってくれたメンバーは開発環境構築に苦戦を強いられているような気がしております。それを改善するため、Vagrant＋Ansibleで環境構築を自動化して簡単に共有できないか検証しました。

    続きを読む

    黒(偽)革の手帳～ITアレルギーな私のWEB部奮闘記～

    こんにちは。
    リンクバルの山本(♀)です。25歳です。

    リンクバルの看板商品「街コン」のイベントプランナーでしたが、ひょんな事からリンクバルのシステム系の部署であるWEB部に異動となり、今はシステム開発のディレクターになるべく修行中です。

    私、ITたるものにアレルギーをもっています。
    「ヤバイ」と思って勉強しようと思ったこともあったのですが、トライ＆エラーの繰り返しです。
    理由としましては、根性があまりないほかに、「～入門」「初心者のための～」が読めないからです。もうお手上げ状態です。
    こんな私ですが、今日からリンクバルWEB部の日常をたくさんアップしていきます。
    どうぞ、お付き合いください。

    リンクバルWEB部はこんな感じ。
    IMG_20160829_115459 (2)
    よく見ると赤く〇がついているでしょう？
    そこが私の席。エンジニアの中に、ポツン。
    何であなたがいないかって？
    撮影者が私だからです！

    現在はWEB部の事務系の仕事をこなしつつ、IT用語の勉強中。
    仕事をしながら、勉強なんて偉いね～ですって？
    いやいや、とんでもない。日々の仕事でもうクタクタですよ。
    私、あまり根性が無いので、頑張ることには限界があります。
    私の長所は、自分の限界を知っていること。

    そんな私の為に活躍中なのが、黒(偽)革の手帳。
    IMG_20160829_124247 (4)

    いつも持ち歩くこの手帳に、分からないIT用語を全て書きなぐり、スキマ時間に見て、覚える、といった勉強をしています。
    私のような(あまり根性のない)方にオススメです。
    IMG_20160829_125322 (1)

    時々お買い物リストになったりもする。
    IMG_20160829_150051 (1)

    効果はどれくらいかというと・・・よく分かりませんね。
    こんな私ですが、どうぞよろしくお願いします。

    では、今日はこの辺で。

    NewRelicのTransactionTrace機能がとても便利な件

    NewRelicの便利な機能を紹介します

    NewRelic公式サイト
    https://newrelic.com/

    このAPMの「Transaction Trace」というAPMのPro版の機能がソースコードのメソッド単位でレスポンスタイムが分かるので、サイトのチューニングやボトルネックを発見するのにとても役に立ったことがありましたので、記事にさせて頂きました。

    ライセンス料金
    https://newrelic.com/calculator

    Transaction Trace
    TransactionTrace

    Transaction Trace Detail
    TransactionTraceDetail

    このような具合でソースコード単位でボトルネックになっている箇所を見つけ出し、
    パフォーマンスのチューニングをすることができます。
    またデータベースで実行されたクエリを確認することもできます。

    最後に
    もしサイトが重く悩んでいましたらNewRelic APM Pro版を導入してみるのも良いかもしれません。
    フリーで登録後、14日間はPro版をトライアルできるようですので、NewRelicの導入がまだの方は試してみてはどうでしょうか。

    私が愛してやまないSassの関数5選

    Sassの関数には数値や文字列を操作するものもありますが、私が愛してやまないのは専ら色を操作する関数たちです。
    どのような関数か、といった解説は今更感が半端ではないため割愛させていただきます。

    rgba

    CSSでは16進数での色指定ができませんが、Sassではできます。地味に便利です。
    また変数での指定もできるため、単に透明度を上げたい時にもよく使います。

    Sass
    .button {
  background-color: blue;

  &.disabled {
    background-color: rgba(blue, 0.25);
}
    CSS
    .button {
  background-color: blue;
}

.button.disabled {
  background-color: rgba(0, 0, 255, 0.25);
}

    lighten, darken

    メインカラーの明度だけ調整したサブカラーを作りたい、といった時に使います。

    Sass
    .button {
  background-color: blue;

  &:hover {
    background-color: lighten(blue, 20%);
  }
    CSS

    .button { background-color: blue; } .button:hover { background-color: #6666ff; }

    saturate, desaturate

    こちらは明度ではなく彩度を変更する関数です。
    同系色のバリエーションは明度を変える方が作りやすいですが、こちらも時々使用します。

    Sass
    
.button {
  background-color: blue;

  &.secondary {
    background-color: desaturate(blue, 90%);
  }
    CSS
    .button {
  background-color: blue;
}

.button.secondary {
  background-color: #73738c;
}

    scale-color

    上記を含めたあらゆる色の値を操作できます。
    全てこの関数に統一してしまうのも良いかもしれません。

    Sass
    .button {
  border: 1px solid blue;
  background-color: scale-color(blue, $lightness: 80%, $saturation: -50%);
}
    CSS
    .button {
  border: 1px solid blue;
  background-color: d9d9f2;
}

    complement

    指定した色の補色を返します。補色のアクセントカラーを入れたい時に便利です。

    Sass
    .button {
  background-color: blue;
  color: complement(blue);
}
    CSS
    .button {
  background-color: blue;
  color: yellow;
}

    私がSass（CSSプリプロセッサ）を初めて導入した時に最も感動したのは、長期にわたって運用されるWebサイトにおいても、デザインの一貫性が保ちやすくなったことです。

    jpgの画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

    そういう残念な状況を見なくなったことの喜びを噛み締めていたら、無性にガリガリ君が食べたくなった為これで終わりにします。

    ご愛読ありがとうございました。俺たちの戦いはこれからだ！

    Mobile VR Jam in Tokyo に参加してきました

    概要

    Mobile VR Jam in Tokyo

    Mobile VR ヘッドセット（モバイル端末を利用するタイプのヘッドマウントディスプレイ）向けのアプリケーションを開発する30時間のハッカソンです。

    場所はドワンゴさんのセミナールーム（銀座松竹スクエア13F）で開催されました。
    協賛はmerge社さん。
    普通は賞金などは出ない(らしい)のですが、今回は最優秀作品には賞金がでるとのことで、若干色めき立ちました。

    参加チームは6チーム、1チーム5人の30人くらいの予定でしたが、雨の影響か7割くらいしかいなかった気がします。
    チームは運営の人が事前のアンケート内容を考慮して割り振ってくれていました。

    スケジュール

    日 時 内容
    8月27日(土) 10:00 会場オープン
    11:00〜 Mobile VR Jam スタート
    8月28日(日) 〜17:00 Mobile VR Jam 終了
    17:00〜 発表会

    Mobile VR Jam とは？

    おおよそ Global Game Jam の Mobile VR 版だと理解していただければよいのですが、ゲームに限らずさまざまなアプリケーションやツール・サービスなどを開発いただいてもOK

    Global Game Jam とは？
    ハッカソンって何？

    ハッカソン歴

    自身としては3回目のハッカソン参加となります。
    過去に参加したハッカソン
    ・Hack Day 2016 (Yahoo!さん主催)
    ・Japan VR Hackathon (MoguraVRさん主催)

    チーム編成

    ・Oさん　Unity歴2年。仕事でバリバリUnityを使った開発をしている。
    ・Hくん　大学生でUnityを趣味で触ってる。
    ・自分　Unity歴1年くらい。仕事でちょろっとだけ触ったこともある。

    以上の三人

    人が多くいると作業の分担などできて完成度も高くなる、と思うかもしれませんが、30時間という制限の中で企画、設計、開発となると3人くらいが丁度良かった気がします。
    欲をいえば3Dのモデリングができる人が欲しかった。

    ハッカソンやゲームジャムでは企画する時間も当然ながら作業時間に含まれているので、アイデアがまとまらないで時間が過ぎていくのは致命的です。
    開発も企画もスピードがとにかく大事です。
    細かいことは後！！まずは手を動かす！！
    これは仕事にも言える。

    そういえば昔は自分も3人のチームでゲーム開発してたなぁ…(遠い目)

    企画/アイデア

    すんなり1時間くらいで企画の大枠が固まり、モバイルVRで脱出×ホラーゲームを作成することに、、、！

    アイデアはこんな感じ
    ・ゲームがはじまるとプレーヤーは真っ暗な部屋にいる
    ・唯一最初に持っているのはペンライトだけ
    ・ペンライトで照らして部屋を見渡す(360度ぐるぐる動かす)
    ・ペンライトの明かりは段々弱くなってくる(時間がなくなると心拍音が大きく強くなる)
    ・ペンライトの明かりが完全になくなって真っ暗になる前に外に脱出する
    ・部屋にある鍵を見つける
    ・鍵で部屋の扉の一つを開く
    ・別の部屋に移動する
    ・謎のうめき声が聞こえて来るのでその声から逃げる
    ・不安感を煽るBGMと効果音で演出を盛り上げる

    とりえあえずはアセットストアで雰囲気にあう素材を手分けして探す…
    https://www.assetstore.unity3d.com/en/#!/content/21789
    有料ですがこちらのホラーゲームで使える音のアセットを購入して使うことに。

    こちらの音を聞いてグッドイメージが固まりました。
    ホラーコンテンツ作るなら音の素材は超重要！今後もどっかのハッカソンで使えそうです。

    自分以外のメンバーはホラーゲーム作ったことあるようで、他にもいくつかすでに持っている素材を持ち寄って早速開発に着手！

    開発

    開発の様子は長いので割愛

    今回の開発で得た知見

    ・Mobile向けのVRにはMobile向けの素材を使わないと処理落ちしまくります。素材はできる限りローポリで。アセットストアにある素材はMobile向けに作られていないのでそのままでは全然使えない。
    ・オブジェクトを纏めてMeshを1つに扱えるEditor拡張(MeshCombiner)は使える。テラシュールブログに記事があります。
    ・ライティング貼ったステージ素材のビルドが超重い。(1時間とか平気でかかる)
    ・設定でライティングをリアルタイムレンダリングじゃなくすればビルドがかなり短くなる
    Unity->Window->Lightingで設定可能
    ・PCで動いてもMobileでは全然予期した動作にならない事態多発！こまめに実機で確認したいところ。(PCでは動いていたが、デモ用にビルドしたら特定のイベントが発火しないバグ)

    結果発表

    試遊会で動作しなかった事もあり、あえなく撃沈しました。次回(あれば)必ずリベンジしたい。。。
    優勝はVRでRPG/アクションゲームを作ったチームでした。
    このチームは素直に完成度が高かったです。無念。。。

    まとめ

    ゲームジャムやハッカソンは都内では頻繁に開催されているので、興味があれば一度参加してみるといいと思います。
    エンジニアやデザイナーの参加が多いですが、基本的にはその分野に興味があれば誰でも参加可能なイベントが多いようです。
    勿論、学生もOKです。学生オンリーのハッカソンイベントもあります。

    素材探しやストーリー作成、デバッグ、発表会用の資料作成などいろんな参加の形態があるので、プログラムできない、絵もかけないという人も是非参加してみてください。
    プログラミングでわからないことがあれば他のチームの人でも丁寧に教えてくれる人が多いです。

    他のチームが作ったものを体験したりするのも楽しいですし、なにより、ここで一緒に開発をしたメンバーは戦友みたいなものなので、その後飲みに行ったりするのもまた楽しいです。

    【WordPress】「get_posts」関数を使ってみた

    はじめまして！社会人２年目エンジニアの関です！
    今回は、WordPressで開発をする上でなくてはならない「get_posts」について簡単に説明していきたいと思います。

    はじめに
    get_postsって実際どんなときに使えばいいの？というと、

    get_posts の最も適切な使い方は、パラメータに基づいて投稿データの配列を作成することです。最近の投稿あるいはパラメータに一致した投稿を取得します。
    参照：WordPress Codex テンプレートタグ/get posts

    だそうです。

    この条件で記事を取得してきたい。
    でもSQLを書くのは苦手。負荷もSQLインジェクションも気になる。
    という人にぜひオススメしたい関数です。

    続きを読む

    © Copyright 2024 LINKBAL Blog. All rights reserved.