GameWith Engineering Blog

GameWith のエンジニア、デザイナーが技術について日々発信していきます。

DroidKaigi 2018に参加してきました

はじめまして。decoy0318です。

普段はGameWithアプリのサーバサイドエンジニアとして主にAPIの設計や実装を担当しています。 昔の職場で一時Androidアプリを担当していたこともあったことから、それ以来サーバサイドだけではなくクライアントサイドにも大変興味があります。

今回、弊社でDroidKaigi 2018にスポンサードを行い、スポンサー枠でチケットを頂いたので、初めて参加してきました。 (私を含めて弊社より2名参加させて頂きました。)

tech.gamewith.co.jp

DroidKaigiはエンジニアが主役のAndroidカンファレンスで、2015年の初開催から毎年行われており、今年の会場は去年と同じく「ベルサール新宿グランド」でした。

f:id:decoy0318:20180214185416j:plain

当日の様子

1日目のはじめのウェルカムトークでは、このように明示的に「Beginers are Welcome」と伝えてくれたことで、普段Androidアプリを業務で書いていない私も安心してセッションに臨むことができました。

f:id:decoy0318:20180216171954p:plainDroidKaigi 2018 WelcomeTalk

まずはひととおりブースを見てまわったのですが、各社ともいろいろな工夫がされており、純粋に見てて飽きませんでした。 個人的に以下のブースはグッときたりしました。

  • 転職ドラフトさんのブースの「ドロイド君」が当たるガチャ
  • eurekaさんのブースで「pairs」Androidアプリのソースコードが見れるようになっていたこと
  • XFLAGさんでモンスターストライクのステッカーを配布していたこと

コーヒーのサーブであったり、どら焼き、クッキーなどのお菓子が配布されていたりとかなり豪華に感じました。

f:id:decoy0318:20180216165425j:plain

聴講したセッションのうちいくつか抜粋しながら、簡単にコメントしていきたいと思います。

まだAPI定義管理で消耗してるの?〜Swaggerを用いた大規模アプリ時代のAPI定義管理とコードジェネレート

GameWithのアプリ開発ではSwaggerではなく、以下の理由からAPI Blueprintを使用しています。

  • 当時選定した際に Swagger あまり利用されていなかった印象があった(個人的な主観)
  • Markdown 記法で定義が可能
  • API Blueprint のほうが必要最低限の周辺ツールが充実していた(個人的な主観)
    • aglio連携で簡単にHTMLが生成可能
    • api-mockでモックサーバが立ち上がる

上記の歴史的な経緯もありGameWithの場合はAPI Blueprintを選択したという背景があります。 今回は、FOLIOさんのSwaggerを使ってのリアルな運用のお話を聞くことができ、参考になりました。

Swagger Codegenを使ってコードの自動生成を行うメリットも体系的に整理され改めてメリットが理解できました。

Dialogflow(API.AI) for Android 〜Dialogflow(API.AI)アプリ開発入門〜

チャットボットであったり、スマートスピーカーが一般家庭にも徐々に普及してきており、自然言語処理をうまくやりたいというニーズは今後も高まっていくはずです。 言語解析エンジンであるDialogflowが表現のゆらぎを吸収してくれることで、本来開発したいアプリケーションに集中できるようになるのはありがたいなと感じました。

Amazon Alexaのスキル作成を一度社内で行なったことがあるのですが、その際も命令セットの定義は固定されてしまい、決して人間にやさしいインタフェースではないなと感じていました。

発表のまとめをqiitaに公開されていたので、興味がある方はこちらをご覧になると良いかもしれません。

qiita.com

まとめ

最近は業務でAndroidアプリ開発に携わることがほぼなかったため、知らないことも多い状況での参加となってしまいましたが、セッションについた「初心者向け」ラベルを参考にしながら、聴講セッションを選択できました。

その結果、どれも自分のレベル感に合ったものとなり、どれも大変興味深く、Android開発への興味と意欲がより一層強くなりました。

今後、Androidアプリを開発する際には今回聞いた内容を活かしていきたいと思います。

弊社がスポンサードしたという意味でも、個人的にも非常に有意義なカンファレンスとなりました。

リリース前ゲームのレコメンドを検証してみた

GameWith エンジニアの @skagawa です。開発部の部長をしています。他には、騎空士、マスター、新人スタッフのお仕事もしています。

GameWithでは「リリース通知」というゲームがリリースされたことをユーザーにメールとおしらせ通知で知らせるサービスを提供しています。

ゲームタイトルは日々発表されているため、ユーザーが自分好みのゲームを見つけることが難しくなっています。
その課題を解決するため、GameWithでは「ゲームレビュー」でのゲーム情報の発信とは別に、

  • リリース通知対象タイトルのピックアップ
  • 登録数ランキング

というユーザーが新しいゲームを見つけられるためのコンテンツを用意しています。

ピックアップされるゲームタイトルは多腕バンディット(アルゴリズムはThompson sampling)を活用し、 新しく発表されたゲームタイトルの露出機会を設けつつ、ピックアップ枠経由での登録が多いゲームタイトルが最適に表示されるようにしています。

今後はよりユーザーが興味のあるであろうゲームタイトルをおすすめできるよう、レコメンド形式でのゲームピックアップの検証を進めています。
まだ実際のサービスとはなっていませんが、今回は検証中の仕組みを使ったゲームレコメンドを紹介します。

実装概要

以下の2つの観点で抽出したゲームタイトルを統合して、ゲームレコメンドとして提供する

  • 全ユーザがリリース通知登録したゲームを元に、協調フィルタリングでゲームを推薦
  • ユーザの行動履歴(リリース通知登録、ゲームプロフィール登録、ゲーム紹介記事閲覧(今回の検証では含まない))を評価点と仮定し、ALSでゲームを推薦

今回の検証対象ユーザー

GameWithで以下のゲームを登録しました f:id:skagawa:20180209163009p:plain f:id:skagawa:20180209163025p:plain

データのサンプル

協調フィルタリング用データ

...
889015  1218
889015  1219
889015  2174
889015  2372
889015  2460
...

ALS用データ

...
889015  256 4
889015  22  4
889015  1266    4
889015  1218    2
889015  1219    2
889015  2174    2
889015  2372    2
889015  2460    2
...

レコメンドデータの生成

今回は Amazon EMR を利用してデータを生成します。

協調フィルタリング(Mahoutのコマンド)

$ mahout itemsimilarity --input s3n://test-gamewith-recommend/input/xxxx.tsv --output s3n://test-gamewith-recommend/output/xxxx --tempDir /mnt/var/tmp/`date "+%Y%m%d%H%M%S%3N"` --maxSimilaritiesPerItem 10 --booleanData true --similarityClassname SIMILARITY_COOCCURRENCE

ALS(Spark Scalaのコード)

package jp.gamewith.recommend.als

import org.apache.spark.SparkContext
import org.apache.spark.SparkConf
import org.apache.spark.mllib.recommendation.ALS
import org.apache.spark.mllib.recommendation.Rating

object Recommend {
  def main(args: Array[String]): Unit = {
    val awsKey = "xxxxx"
    val awsSecret = "xxxxx"
    val trainFile = "s3n://xxxx/xxxx.tsv"
    val predictFile = "s3n://xxxx/prediction"
    val productsFile = "s3n://xxxx/target.txt"

    val conf = new SparkConf()
      .setAppName("alsRecommend")
      .setMaster("local")
      .set("spark.eventLog.enabled", "false")
      .set("spark.local.dir", "/mnt/var/tmp")
      .set(...) // 省略
    val sc = new SparkContext(conf)
    sc.hadoopConfiguration.set("fs.s3n.awsAccessKeyId", awsKey)
    sc.hadoopConfiguration.set("fs.s3n.awsSecretAccessKey", awsSecret)

    val seeds = sc.textFile(trainFile)
      .filter(_.nonEmpty)
      .map(_.split("\t") match { case Array(user, item, rate) =>
        Rating(user.toInt, item.toInt, rate.toDouble)
      }).cache
    val products = sc.textFile(productsFile)
      .filter(_.nonEmpty)
      .collect

    val rank = args.applyOrElse(0, (n: Int) => "10").toInt
    val numIterations = args.applyOrElse(1, (n: Int) => "10").toInt
    val alpha = args.applyOrElse(2, (n: Int) => "0.01").toDouble
    val lambda = args.applyOrElse(3, (n: Int) => "0.01").toDouble
    val model = ALS.trainImplicit(seeds, rank, numIterations, lambda, alpha)

    val usersProductsRdd = for {
      user <- seeds.map { case Rating(user, product, rate) => user }.distinct
      product <- products
    } yield (user, product.toInt)

    val predictions =
      model.predict(usersProductsRdd).map { case Rating(user, product, rate) =>
        (user, product, rate)
      } filter {
        f: (Int, Int, Double) => 0.0 <= f._3
      }
    predictions.saveAsTextFile(predictFile)

    sc.stop
  }
}

※ Scala初心者なので最適なロジックではないですがご了承を...

レコメンドデータを取り込み、おすすめゲームを表示する

実サービスとしては提供していないため、弊社の管理画面上で該当ユーザーのおすすめゲームリストを確認できるようにしました。 f:id:skagawa:20180209163134p:plain ※ 登録済みのゲームを除外しないといけないですね...

いかがでしょうか?
FFXFとワンダーグラビティ辺りは興味が湧いたので、精度はそれなりにあるのかなと思います。
今後はパラメータやデータのチューニングを行い、実サービスとして提供できるようにしていきます。

YAPC::Okinawa 2018 ONNASON にスポンサーとして協賛します

GameWith は YAPC::Okinawa 2018 ONNASON にゴールドスポンサーとして協賛します。

弊社では今のところ Perl 言語を多く使っていませんが(一部では使っています!)、弊社メイン言語である PHP と並んで、これまでインターネットの世界で多く採用され、その歴史を支えてきた言語であり、強くリスペクトしています。

イベント概要については、以下をご覧ください。

イベント概要

f:id:serimaryo:20180123120520p:plain

イベント名 : YAPC::Okinawa 2018 ONNASON

概要 : YAPCはYet Another Perl Conferenceの略で、一般社団法人 JPAが主催する、Perlを軸としたITに関わる全ての人のためのカンファレンスです。

日時 : 2018 年 3 月 3 日(土)

会場 : 沖縄科学技術大学院大学 OIST

公式 HP : http://yapcjapan.org/2018okinawa/

yapcjapan.org

Google オフィスで GCP ハンズオンを開催していただきました

こんにちは。エンジニア兼技術広報の @serima です。 GameWith では外部から講師をお招きして勉強会を行うということを定期的に行っています。

今回はなんと Google 様による GCP のハンズオン込みの勉強会でした。 GameWith のエンジニア陣が Google のオフィスに招待され、さらにランチまでご馳走になってしまうという展開になり、とてもありがたく、美味しい勉強会となりました。

同じビルにオフィスがあるため、すぐに到着できるだろうという目論見でしたが、思っていた入口から入れずタイムロスしてしまいました…申し訳ありません!

無事に合流し、早速会議室にご案内していただいたのですが、各所に遊び心が垣間見える素敵なオフィスでした。

Google Cloud Platform ガイダンス

まずは双方でご挨拶、簡単に自己紹介を済ませたあと、GCP の概要をご説明頂きました。

  • 開発者はインフラから解き放たれて、アプリケーションに集中できるようにする
  • 地球規模 (Planet Scale) のインフラを目指す
  • 2015 年頃から技術を公開して世界のエンジニアにイノベーションを起こしてもらうのを狙うようになった = Philosophyの 180 度変更
  • GCP のネットワークは AWS と大きく異なる
    • 自社でネットワークを持っているので、リージョンを跨いでの構築がしやすいのが AWS との違い
    • 後発のため、プライスリーダー戦略をとっているが、「個人開発者もエンタープライズも等しく Public Cloud を利用できるべき」という Philosophy でフラットに対応を行っている
  • プレウォーミング不要
  • 単一の IP Anycast で最適なリージョンに振り分けを行ってくれる
  • 全て自社の専用線を引いているため、遅くならない。YouTube は海外から配信している
  • GAE はデプロイからの立ち上がりが早い
    • Go はとにかく早い
    • 言語ごとの比較だと Go > Python, PHP >> Java
  • 他社事例
    • 導入するまではやり方に慣れるという意味で大変だったが、リリース後にインフラに関して何もしなくて良くなった
    • インフラのやり方を忘れてしまった by 中の人
  • ライブマイグレーション = 計画停止なし
    • IaaS の再起動祭りがなくなる
    • 切り替わりはあるが、ログを見ないと気づかないレベルで高速。
  • リザーブドインスタンスのようなものはあるが、インスタンス単位ではなくコアとメモリ単位で購入できる
    • x 年後に「このマシンじゃ非力で使えない」や「ビジネス要件的にそのときに必要なインスタンスタイプとマッチしない」ということがないように
    • マシンが利用状況に合ってないとアラートが出る(オーバースペックな場合など)
    • ユーザーから「これ出していいの?(Google さん損じゃない?)」と言われてしまう
  • 質問
    • ライブマイグレーションに関して、ハードウェア障害の時はどうなるか?
      • 計画停電と同様に、自動で対応されるが、計画停止時よりは長くなってしまう。

Google の内部で運用されていた環境をサービスという形で外に出していくという方針に切り替わったのはかなり大きいな、と感じました。 尋常ではないトラフィックをプラネットスケールで受けている実績が既にありますので、非常に安心感があります。 また、印象的だったのは、カスタマが何か能動的にアクションせずとも、請求時に自動で利用料金が割り引かれたり、オーバースペックだった場合にアラートを出してくれるなどの対応です。 リザーブドインスタンスなどの前払いでインスタンスタイプを予約する契約については、一定のリスクがあることについてこちらで言及しており、納得感があります。

午前の部はここで終了し、ランチにお誘いいただきました!

Break time

f:id:serimaryo:20171228132228j:plain

レストランに向かう途中のカフェスペースからの眺め。Google の次の渋谷オフィスが見えました!

f:id:serimaryo:20180105173116j:plain

Reserved のプレートに GameWith と入っており、おもてなし力の高さに感動しました…

f:id:serimaryo:20171228124013j:plain

いただきます!

弊社の開発チームやシステム構成、デプロイ体制をはじめ、Google 社での開発やオフィスについて、ざっくばらんにお話しました。 (カレーが美味しいという噂を耳にしたので頂いたのですが、本当に美味しかったです…!)

ランチのあとは、カフェスペースでコーヒーやお菓子をいただき、リラックスしたムードでハンズオン開始!

Google App Engine ハンズオン

シンプルな Python アプリケーションを各々構築し、App Engine を利用してインターネットに公開してみるという内容でした。

弊社のアーキテクチャにおいて、アプリケーションサーバのオートスケーリングをより最適化したいと常に考えており、折角の機会ということで GAE のスケーリングについて学びたいというリクエストをしておりました。

f:id:serimaryo:20180105172706j:plain

  • Google Cloud Shell
    • ブラウザから直接クラウドリソースにアクセスできるシェル
    • dashboard の右上のアイコンからログインできる
  • StackDriver
    • 監視、ログ、デバッグ、パフォーマンス、エラーレポート
  • リアルタイムデバッグ
    • 本番環境で stack trace を実現できる
  • バージョンコントロール
    • 任意のバージョンを 100% → 30%, 30%, 40% のような形で割合指定で露出できる
    • ファイアーウォール機能も最近つくようになった
      • ので、全世界に公開せず開発環境でバージョン切り替えて試したりもしやすくなった
      • この機能は以前から各方面から要望があったので、非常にホット
  • インスタンスのオートスケーリング
    • 完全オート、上限ありオート、マニュアルがある
    • automatic_scaling: 細かいトラフィックを大量にさばく
  • basic_scaling: 最大のインスタンス数を事前に設定
  • manual_scaling: 手動でインスタンスの数を決める
  • アクセスが落ち着いた後にどのくらいの速さでインスタンスを減らすかも設定で調整できる
    • 特に Go だと即時インスタンスが立ち上がるので、アクセスが少なくなったらすぐ台数を減らす設定にしておくとよい

エンドポイントに対して定期的に curl しながら、トラフィック分割設定で割合を切り替える瞬間の video です。

Hello World! が 100 %稼働している状態から、Hello Google! のバージョンを 30 %にしている場面。

Hello Google! が 30 %稼働している状態から、Hello Google! のバージョンを 100 %にしている場面。

GUI からワンクリックで、かつ瞬時に切り替わりを体感でき非常に興奮しました。ロールバックについても同様で、すぐに切り戻すことが可能です。

GUI から様々なことが簡単にでき、便利さを実感しました。 なかでも本番のコードに直接 Break point を設定して、ユーザが次にそこを通ったタイミングで stack trace を追えるというのは本当にすごいな…と思いました。

環境要因(主にデータ起因)で、なかなかローカル環境で再現が難しいバグなどもこれを使えれば特定がかなり容易にできるようになります。(現在は PHP は非対応とのことでした)

BigQuery のデモ

弊社ではすでに BigQuery を使用していますが、さらに使いこなしていきたいという思いから今回は事前にリクエストしていました。

  • Google は大量のデータがあったのでビッグデータは昔からやってた
  • Google が使ってよかったものが論文で外に出てオープンソースになったり GCP で提供されたりしてる
    • MapReduce + GFS => Apache Hadoop => Cloud DataProc
    • Dremel => Apache Drill => BigQuery
    • FlumeJava, MillWheel, Dataflow => Apache Beam / DataflowSDK => Cloud Dataflow
  • Dataflow = Apache Beam というプログラミングパラダイムのマネージドな実行環境
    • DataProc、AWS EMR と比較すると立ち上げが高速
  • データ分析系サービス一覧
    • BigQuery
    • DataProc
    • Dataflow
    • Datalab
    • Data Studio
    • Dataprep
  • BigQuery は DWH
  • fluentd から streaming insert で BigQuery に流せる
  • デモ
    • 生成したログを fluentd へ流して、BigQuery に streaming insert するデモ
    • ログ生成で使った gem パッケージ:
    • streaming insert したデータはリアルタイムで BigQuery の WebUI の preview には反映されない(少しラグがある)
    • streaming insert は有料なので、使い分けるのがベストプラクティス
      • 即時性を求められるデータ: streaming insert
      • 即時性を求められないデータ: 日次のバッチなどで対応
  • デモ 2
    • Dataprep
      • Dataflow の GUI コードビルダーのようなもの
      • 裏で使われる Dataflow に料金が発生し、Dataprep の使用自体は無料
      • 任意のデータソース(国が発行するフォーマットが揃っていない CSV など)を GUI で整形して BigQuery に流せる

Dataprep / Dataflow はとても革命的だな…と感じました。

今までだといったんデータソースをダウンロードしてきて、ローカルでデータを整形して再度 BigQuery に入れるということをしていましたが、その手間がゼロになると思うと胸熱です。

定形作業が一切不要になりますし、しかもそれが GUI で操作できるので、プログラマ以外の方にも使ってもらえるという点で、用途が一気に拡がりそうです。

デモをしていただいた後、社内のカフェにもご案内頂いたのですが、 レストランとはまた別の場所にあり、最早ここにないものはないのでは…と思いました。

自由にドリンクをオーダーして良いとのことで、弊社メンバー皆コーヒーを頂いてしまいました。ありがとうございます!

f:id:serimaryo:20180105173703j:plain

帰り際、Google カレンダーを模したリアルな Google カレンダーを頂いてしまいました!

非常に可愛く、早速愛用しています!

f:id:serimaryo:20171228152355j:plain

まとめ

Google の内部で培った知見を外部に公開し、社外でのイノベーションを狙っていくという Philosophy に感銘を受けました。 また、エンタープライズも個人開発者も等しく扱うというスタンスは、ある意味とても Google らしく、いちデベロッパとして好感でした。

「巨人の肩に乗る」というメタファがありますが、ユーザに対して真に価値を届けるために、ビジネスのコア以外を積極的にアウトソースしていく事は、限られたリソースを有効に活用する手段だと思います。

適切な箇所で GCP を利用することで、より早く、より良いサービスをユーザに提供することができるように、検討と実験を経てプロダクションで運用できるように推進していきたいと思います。

あらかじめリクエストしていた内容をハンズオンに盛り込んで頂いたことで、非常に身のある濃い時間となりました。 Google の皆様、本当にありがとうございました!

f:id:serimaryo:20180105172847j:plain

エンジニアブログ ブログプラットフォーム/CMS 別まとめ

エンジニア兼技術広報となりました @serima です。

GameWith では去年の 12 月から技術ブログを始めました。

その際、検討事項として

  • タイトルは何が良いか
  • URL は何が良いか
  • どこのブログプラットフォームを使うのがよいか

等が挙がりました。

他社のエンジニアブログとそのブログプラットフォームと CMS について調査したので、せっかくなので共有します。

ブログプラットフォーム観点でまとめられているものは、自分が探した限りでは見当たりませんでしたので、何かの参考になればと思います。

拾いきれていないものもありますが、他意はありませんのでご容赦ください!(こっそり教えてください…)

なお、すべて順不同です。

日本国内

はてなブログ

会社名 タイトル URL
ガイアックス Gaiax Engineers' Blog http://gaiax.hatenablog.com/
コネヒト コネヒト開発者ブログ http://tech.connehito.com/
クックパッド クックパッド開発者ブログ http://techlife.cookpad.com/
BASE BASE開発チームブログ http://devblog.thebase.in/
はてな Hatena Developer Blog http://developer.hatenastaff.com/
VASILY VASILY DEVELOPERS BLOG http://tech.vasily.jp/
メルカリ Mercari Engineering Blog http://tech.mercari.com/
Fablic inFablic | Fablic, inc. Developer's Blog. http://in.fablic.co.jp/
UZABASE UZABASE Tech Blog http://tech.uzabase.com/
KAYAC KAYAC engineers' blog http://techblog.kayac.com/
pixiv pixiv inside http://inside.pixiv.net/
Cybozu Cybozu Inside Out | サイボウズエンジニアのブログ http://blog.cybozu.io/
Gunosy Gunosy テックブログ http://tech.gunosy.io/
mixi mixi engineer blog http://alpha.mixi.co.jp/
クラウドワークス クラウドワークス エンジニアブログ http://engineer.crowdworks.jp/
dely dely engineering blog http://tech.dely.jp/
ぐるなび ぐるなびをちょっと良くするエンジニアブログ http://developers.gnavi.co.jp/
Chatwork ChatWork Creator's Note http://creators-note.chatwork.com/

WordPress

会社名 タイトル URL
Cygames Cygames Engineers' Blog http://tech.cygames.co.jp/
クラスメソッド Developers.IO http://dev.classmethod.jp/
MoneyForward Engineers' Blog | マネーフォワード エンジニアブログ https://moneyforward.com/engineers_blog/
Eureka eureka tech blog https://developers.eure.jp/
GREE GREE Engineers' Blog http://labs.gree.jp/blog/
DMM.com ラボ ツチノコブログ http://tsuchinoko.dmmlabs.com/
VOYAGE GROUP VOYAGE GROUP techlog http://techlog.voyagegroup.com/
ランサーズ ランサーズ(Lancers)エンジニアブログ https://engineer.blog.lancers.jp/

Medium

会社名 タイトル URL
FiNC FiNC Engineering Blog https://medium.com/finc-engineering

自前・不明

会社名 タイトル URL
CyberAgent CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ https://developers.cyberagent.co.jp/blog/
SmartNews SmartNews Engineering Blog https://developer.smartnews.com/blog/
Google Japan Google Developers Japan https://developers-jp.googleblog.com/
LINE LINE Engineering Blog https://engineering.linecorp.com/ja/blog
dwango dwango エンジニア ブロマガ http://ch.nicovideo.jp/dwango-engineer/blomaga
DeNA DeNA Engineers' Blog [ Technology of DeNA ] http://developers.mobage.jp/blog/
Yahoo! Japan Yahoo! JAPAN Tech Blog https://techblog.yahoo.co.jp/

海外

会社名 タイトル URL プラットフォーム
Slack Several People Are Coding https://slack.engineering/ Medium
Pinterest Pinterest Engineering https://medium.com/@Pinterest_Engineering Medium
Instagram Instagram Engineering https://engineering.instagram.com/ Medium
Spotify Spotify's Engineering and Technology Blog https://labs.spotify.com/ ワードプレス
Uber Uber Engineering Blog https://eng.uber.com/ ワードプレス
Facebook Engineering Blog https://code.facebook.com/posts/ 自前
Twitter Engineering https://blog.twitter.com/engineering 自前
GitHub GitHub Engineering | The Blog of the GitHub Engineering Team https://githubengineering.com/ 自前

(Slack のブログタイトルが「Several People Are Coding」というのが洒落がきいていて個人的にはとても好きです...)

まとめ

日本国内だとはてなブログ、海外だと Medium を利用している会社が多い印象です。

ちょうど調査をしている頃に、はてなブログの SSL 化へのマイルストーンが公開されたこともあり、弊社でははてなブログを利用することとしました。

エンジニアブログの界隈はすでに大いに盛り上がっておりますが、新参者の GameWith も引き続きコツコツと頑張ってまいりたいと思います。

PHPerKaigi 2018 にスポンサーとして協賛します

GameWith は PHPerKaigi 2018 にプラチナスポンサーとして協賛します。

PHP の大きなカンファレンスといえば、もちろん全国各所で開催される PHP カンファレンスが思い浮かびます。

しかし、今回の PHPerKaigi はチケット販売制いうことで、より質の高いイベントになるのではないかという期待と、PHP のコミュニティ発展に貢献したいという思いから協賛を決定いたしました。

弊社のエンジニアももちろん参加いたしますので、ぜひ会場でお会いしましょう!お気軽にお声がけください!

イベント概要については、以下をご覧ください。

イベント概要

f:id:serimaryo:20180115215750p:plain

イベント名 : PHPerKaigi 2018

概要 : PHPerKaigi(ペチパーカイギ)は、現在PHPを使用している、過去にPHPを使用していた、これからPHPを使いたいと思っているエンジニアが、技術的なノウハウを共有するためのカンファレンス(イベント)です。

日時 : 2018 年 3 月 9 日(木), 10 日(金)

会場 : 練馬区立区民・産業プラザ Coconeriホール

公式 HP : https://phperkaigi.jp/2018/

phperkaigi.jp

InVision謹製、DSMこと「DesignSystemManager」を使ってみて

 GameWith デザイナーの @guchitaka_ です。Web からアプリまで諸々デザインに携わらせていただいております。 inVision が2018年1月提供予定の DSMこと「DesignSystemManager」の EarlyAccess が出来るようになったので早速使ってみました。

www.invisionapp.com

InVision「DesignSystemManager」について

はじめに、そもそもデザインシステムとは

組織におけるデザインの共通言語となるものです。

従来はスタイルガイドやUIキットを作り、それを関係者が参照するような形で組織のデザインを制御していました。しかしながら少しでも更新が滞ったりすると参照する意味がなくなり、死んだガイドラインとなった経験をされた方も多いのではないでしょうか。メンテナンスにかけるコストも馬鹿にならなく、ガイドラインの整備に追われて作る時間がとれず本末転倒になる場合もありました。

デザインシステムはこれを解決するもので、それ自体が各プロダクトにエコシステムを提供するプロダクトとして運用されるというものです。

今回は InVisionDSM について言及するので詳しい説明は割愛します。

このあたりに詳しく書いてあります

InVision DSM で出来ること

  • スタイルやシンボルのバージョン管理
    • Color
    • Text Styles
    • Layer Styles(現在は項目だけ存在)
    • Icons
    • Components(Artboardも出来ます)
    • Fonts
  • Team 管理
  • DesignToken の出力

目次

  • 導入
  • 実践
  • バージョン管理
  • 出力
  • まとめ

導入

Early Access を申請されていた方はメールが届いているかと思いますので指示に従い導入します。 大まかな手順は以下の通りです。

  • 「CraftManger」をインストール(既にインストール済みの場合は一度アンインストール)
  • Organizations 作成
  • Libraries 作成

InVision DSMにアクセスすると以下のような画面が表示されます。

f:id:guchitakas:20171225183053p:plain

今回は適当な Library を作成します。

f:id:guchitakas:20171225183036p:plain

詳しくは以下を参照してください。

support.invisionapp.com

実践

Library の作成と CraftManager の準備が整ったところで実際にDSMを使ってみましょう。

まずは適当なアセットを用意します

Icons と Components は実際の運用を想定して Symbol 化しています。

f:id:guchitakas:20171225185804p:plain

次にDSMのパレットを開いて追加します。

CraftManager のツールバーに六角形のアイコンがあるのでクリックします。 まだ何も追加していないので No Hoge...と表示されるはずです。

f:id:guchitakas:20171225190042p:plain

次に、追加したいアセットを選択して「+」を押します

追加したいアセットを選択して、DSMのパレット右下にある「+」ボタンを押します。とても簡単でありがたいです。 パレットを見ると追加されているのが確認できます。

※ Layer Styles も表示されていますが、EarlyAccess版では未実装のようです。

追加したアセットのSketch 上での見え方

各アセット毎に分けられて表示されています。 階層を切れるので、役割ごとにグルーピングできるのは嬉しいですね。

Colors

f:id:guchitakas:20171225190505p:plain

Text styles

f:id:guchitakas:20171225190518p:plain

Icons

f:id:guchitakas:20171225190531p:plain

Components

f:id:guchitakas:20171225190543p:plain

Web上 での見え方

Colors

RBG/HEX/HSL/HSV が取得できるようです。

f:id:guchitakas:20171225190810p:plain

Text styles

Paragraph の設定は取得できないようです。 可能であれば TextColor も HEX などで見られると嬉しいですね。要望出しておきました。

f:id:guchitakas:20171225190857p:plain

Icons

Icon のダウンロードはここからは出来ません。後述する DesignToken から得られます。

f:id:guchitakas:20171225190907p:plain

Components

f:id:guchitakas:20171225190934p:plain

Fonts

f:id:guchitakas:20171225190945p:plain

アセットを利用する

使い方は簡単、Icon や Component の場合はパレットからドラッグ&ドロップで配置するだけ。 Color や TextStyle の場合は反映したいオブジェクトを選択してパレット内のスタイルをダブルクリックします。

f:id:guchitakas:20171225192306p:plain

アセットを更新する

オブジェクトを選択してパレット内の「+」ボタンを押すとアセットが更新できます。 変更点がダイアログで表示されますので、新規作成か更新を選んでください。 尚、Symbol Override も引き継ぐようですので、更新の際はご注意を。

f:id:guchitakas:20171225192604p:plain

アセットの更新を受け取る

異なるファイルで同じ Icon を DSM からドロップして配置しています。

f:id:guchitakas:20171225194041p:plain

DSM パレットの「↓」アイコンを押すと、ファイル内のアセットに変更内容が反映されます。とても楽ですね。

f:id:guchitakas:20171225194551p:plain f:id:guchitakas:20171225194107p:plain

バージョン管理

まずはバージョンをリリースします

Library 名 をクリックして「Release new version」を選びます。

f:id:guchitakas:20171225194632p:plain

Version 名と Description を求められるので入力して「Create Version」を選びます。 これで作成完了です。

f:id:guchitakas:20171225194644p:plain

バージョンを変更するには

先と同じように Library 名 をクリックして「Switch Version」を選びます。

f:id:guchitakas:20171225194655p:plain

バージョンの更新を共有するには

バージョンの更新だけでは不十分ですよね、それを関係者に共有する必要があります。 Web 版の DSM を開き画面右上の「Share」を押すとURLが出力されるので活用しましょう。

なお「Share」しなくてもDSMを開いた際には、更新された旨が通知される安心設計です。

f:id:guchitakas:20171225195202p:plain

出力

この機能が InVision DSM の真の価値ではないでしょうか、なんと DSM は Design Token の出力に対応しております。 DesignToken が唯一の正しいデザイン(Single source of truth)として機能し、各プロダクトで一貫性のあるデザインを提供できるようになります。

実際に出力する

Web 版の DSM 右上にあるアイコンをクリックします。

f:id:guchitakas:20171225195255p:plain

DesignToken が出力され、取得できるようになります。 対応形式は以下の通りです。

CSS/Sass/Less/Stylus/XML/JSON/YAML/Android/iOS

アイコンなども Resouces として取得できるようですが、余白として設定した透明ピクセルをカットされてしまうので現状はまだ使えません。

f:id:guchitakas:20171225195308p:plain

まとめ

スタイルガイドの作成やデザインのチーム内での共有、Artboardもシンボル化せずに登録できるため、画面単位での共有もできると、非常にありがたみを感じます。 そしてとどめの DesignToken ... SalesForce も採用していますが、これは可能性しか感じません。 ちょうど DesignSystem の構築を考えているところなので、GameWith でも導入を検討したいところです。

参考文献

www.invisionapp.com support.invisionapp.com Designing a Design System // Speaker Deck