雨ブロ【yusukixsのブログ】

アドテク関連の業界で働くエンジニアです。最近はKubernetesでコンテナクラスタを構築してサービス開発することに力を入れてます。

Kubernetesを用いてGoogle Container Engineでコンテナクラスタをデプロイする〜入門編〜

Qiitaに「Kubernetesを用いてGoogle Container Engineでコンテナクラスタをデプロイする〜入門編〜」というタイトルで記事を公開しました。

qiita.com

現在はGCP上でコンテナクラスタを構築してサービス開発・運用するベストプラクティスを模索している最中です。 そのノウハウを記事として公開しています。

「Dockerで開発したいけど、本番環境へのデプロイどーすんの?」っていう方の参考になるのを意識して頑張って書いていきます。

PHPカンファレンス2015に参加してきました

私が携わっている開発プロジェクトでPHPを使い始めて2年ほど。 最近はかなり使いこなれて、開発スピードもJavaに比べて速くなったように思います。

ということで、PHPの最新情報や活用法を取得してくるという目的で、10/3(土)に開催されたPHPカンファレンス2015に参加してきました。 今年はPHP生誕20周年でPHP7のリリースを控えているということで、参加者2000人以上の大規模イベントとなっていました。

PHPの今とこれから2015 廣川類(日本PHPユーザー会)

  • 今年はPHP20周年
  • 今年のテーマは「7」
    • PHP7が来月リリース

PHPとは

PHPのバージョン分布

  • 最新の5.6は3%
  • 5.5が12%
  • 5.4 31.3%
  • 5.3 38.1%
    • サポート切れの5.4以下が80%以上使われているのが現状

PHPリリースサイクル

  • リリースサイクル:1年
  • ライフライクル:3年(バグ修正:2年、セキュリティ対応:1年)
    • 5.4は2015年9月に開発終了
    • 5.5.26 OSコマンドインジェクション

PHP7.0改善のポイント

  • 大幅高速化
    • WordPress4.4のベンチマークでは、PHP7はPHP5.6よりも2倍高速
      • HHVMは3.9は更に10%高速
  • スカラー型宣言と戻り型宣言のサポート
    • デフォルト動作は従来と同じ
    • Strictモードにすると厳密な型チェックが有効になる
      • 整数型と文字列型を厳密に区別してエラーを出すようにするなど
  • 致命的エラーを例外補足可能に
    • エラーをtry / catchで取得可能
  • <=>演算子
  • パーサとコンパイラを分離
    • コード管理が容易になり、最適化・メモリ削減
  • エクステンション削除:ereg, mysql, mssql
  • SAPI削除:22種類 → 7種類
  • newオブジェクトの参照代入廃止
  • PHP4形式のコンストラクタは警告が出る
    • 将来的には廃止予定
  • エクステンションは要変更

PHPのこれから

  • PHP7.1開発が開始される
  • PCOPHP Cryptography Objects)
    • 暗号化のオブジェクトを実装するか議論中
  • JIT?

PHPの未来

  • Hack/HHVMリリースの持つ意味
    • PHP7は劇的に進化した、そしてこれからも…
  • 高性能かつ現実的な解を継続的に提供する

フリマアプリ「メルカリ」の急成長を支えるエンジニアリング 久保達彦

メルカリの提供環境について

  • インフラチーム:4人
  • 総エンジニア数:30人弱

  • イントラはさくらの専用サーバ

    • 一部はAWS
    • 全部AWSにしないのは、専用サーバはコスパが高いから
    • クラウドは突発的な負荷などに対する柔軟性が高いため、一部に利用している
  • PHPで高速なAPIサーバを実現

  • New Relicによるモニタリング

    • レスポンスタイムをグラフで可視化
    • PHP5.3から5.6にバージョンアップするとパフォーマンスが20%ほど向上

nginxの役割

  • nginxサーバにHTTPSかSPDYのリクエストがクライアントから飛んで来る
  • nginxは大量の同時接続数(数万)を軽快に捌ける
  • APIサーバのL7(HTTP)ロードバランスも兼ねる
  • 高速なHTTPS通信の提供
  • nginxはApache Solrサーバーに検索をリクエストするが、nginxは検索結果のキャッシュができるのでSolrの負荷を下げられる
  • キャッシュつきリバースプロキシとしても優秀

SlackでChatOps

  • デプロイ
  • 勤怠管理
  • アラート通知
  • CIの手動実行

Slackプロキシサーバ経由でどこからでもホスト

slackboard というプロキシサーバをGoで実装

ゼロタイムデプロイ

ngx_dynamic_upstream

プッシュ通知基盤

Gaurunというサーバーを作った

ログ分析

  • 一日ログ 200GB / day
    • 各サーバーのログをfutendで転送
  • サーバーサイドで起こるイベントを柔軟にロギングするツールを実装
    • データ集計、レポートメール、WebUIでグラフ化
    • 分析が容易になるログ基盤を一から構築した
  • Puree
  • 基本はBigQueryでアドホックに分析
  • Chartio等の分析ツールとも組み合わせて利用

まとめ

  • 色々工夫してPHPで高速なAPIサーバを実現
  • バックエンドではGoを採用する場面が増えている

いまどきのPHP開発現場 -2015年秋- 新原雅司

PhpStorm

  • JetBrains社のIDE(有償)
  • 動作が軽快、静的解析、オールインワン
  • Vimmerも納得のIdeaVIM
  • コード整形もコミット前に自動的にやってくれる

Vagrant

  • プロジェクト毎に独立した環境
  • 自動構築
  • チームで同じ環境を利用
  • 運用環境と同じ環境

Vagrant導入ポイント

  • PHPコードと一緒に管理
  • とことん自動化(vagrant upで管理)
  • プロビジョニングはVMの中で実行
  • Shell Scrpit -> Ansibleが楽

フレームワーク

Laravel

フレームワークの付き合い方

CI

Travis CI

  • GitHubとしか連携できない
  • git push / PRを検知して実行

Scrutinizer

  • コードフォーマットや静的解析のSaaS
  • 指摘表示
  • 有償ならテスト実行も可

PaaS(Heroku)

  • Platform as a Service
  • HerokuがPHPを正式サポート(2014)
  • Azure WebApps

PaaS

  • サーバセットアップは自動
  • Gitでデプロイして、すぐに使える
  • サーバメンテナンスが不要

まとめ

  • ツールやサービスに任せる
  • やるべきことに集中

PHPあるあるパフォーマンス対決 

メソッドチェーン vs 非メソッドチェーン

どっちが速い? 10万回計測

for ($i = 0; $i < $MAX; $i++) {
    $ca->testA()->testB()->testC();
}
for ($i = 0; $i < $MAX; $i++) {
    $ca->testA();
    $ca->testB();
    $ca->testC();
}

メソッドチェーンを使わない方が速い!

メソッドチェーンは、戻り値を使うために用意している一時変数の確保と解放にオーバーヘッドがかかっている

異次元配列書き込み

$list = array();
for ($i = 0; $i < $max; $i++) {
    for ($j = 0; $j < $max; $j++) {
        for ($k = 0; $k < $max; $k++) {
            $list[$i][$j][$k] = 1;
        }
    }
}
for ($i = 0; $i < $max; $i++) {
    $tmpJ = array();
    for ($j = 0; $j < $max; $j++) {
        $tmpK = array();
        for ($k = 0; $k < $max; $k++) {
            $tmpK[] = 1;
        }
        $tmpJ[] = $tmpK;
    }
    $list[] = $tmpJ;
}

↑こっちのほうが速い!

スカラー vs 配列 どっちが速い?

function tmp($a, $b, $c, $d, $e, $f, $g, $h, $i, $j) {
    $ret = $a + $b + $c + $d + $e + $f + $g + $h + $i + $j;
}

for ($i = 0; $i < $max; $i++) {
    tmp(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
}
function tmp($data) {
    $ret = $data['a'] + $data['b']
         + $data['c'] + $data['d']
         + $data['e'] + $data['f']
         + $data['g'] + $data['h']
         + $data['i'] + $data['j'];
}

$data = array('a' => 0, 'b' => 1, 
              'c' => 2, 'd' => 3, 
              'e' => 4, 'f' => 5, 
              'g' => 6, 'h' => 7, 
              'i' => 8, 'j' => 9);
              
for ($i = 0; $i < $max; $i++) {
    tmp($data);
}

↑こっちの方が速い! 引数が多くするよりも、引数を配列にして1つにしてしまったほうが速い。

※コードレビューをしていると、引数が多くなっていることに遭遇することが多い。 互換性を保つために引数が多くなっていることが要因。

所感

  • Webアプリケーションの開発コミュニティの活発さで言えばRailsであるが、やはりPHPのシェア(WordPressがあるから)というのはまだまだ圧倒的に高く、PHPカンファレンスの盛況っぷりには勢いを感じた。
  • 現在開発中のアプリではPHP5.5を利用しているが、PHP7はかなりの高速化が実現できるということで、将来的にはバージョンアップを前向きに検討したい。
  • Web上のPHPアプリケーションの80%ほどはセキュリティサポート切れの5.4以下ということで、将来的には脆弱性による脅威にさらされる危険性を感じた。
  • メルカリのサービス環境がすごい。やはり勢いのあるスタートアップの話は刺激的で参考になる。
  • 最近の勉強会では、今どきの開発環境というのがよく紹介されるが、ソースコードGithubにあって、本番環境がAWSで自動デプロイという前提が多く、セキュリティポリシーの厳しい環境でどのように自動化していくかというのかという問題にいつもぶつかる…
  • 徳丸先生のセッションには出られなかったので、後で読んでおこう。

プログラマーのための「Rubyの世界」に参加してきました

(プログラマーのための「Rubyの世界」)http://forkwell.connpass.com/event/20332/という勉強会イベントに参加してきたので、その内容をシェアしたいと思います。

Rubyの世界

松田 明(@a_matsuda)

自己紹介

  • Rubyコミッター
  • Railsコミッター
    • 日本では自分だけ
    • Rubyコミッターを兼任しているのは世界中で2, 3人くらい
  • Asakusa.rbを主宰
  • 好きなメソッド
    • Module#prepend

Rubyについて

  • Matz is nice.
  • 純粋なオブジェクト指向言語
  • スクリプト言語
  • 開発者にとって読みやすい/書きやすい
  • 多言語にあってRubyがない機能はない
  • Rubyの誕生日: 1993.2.14
    • 名前を決めた日
  • 歴代コミッターの総人数は80人くらい
    • 今でもアクティブなのは50人くらい
  • フルタイムコミッターは世界中で3名
  • Rubyの日々の改良はSalesForceのおかげ
    • 国産言語??

Rubyのリリースサイクル

  • 2.0以降は毎年1回クリスマスごろに機械的にリリースすることにした
    • 2015年クリスマス:2.3.0
    • 2016年クリスマス:2.5.0
    • 20XX年クリスマス:3.0.0

Rubyist

Railsについて

  • DHHが作ったフレームワーク
  • 設計思想
    • CoC(設定より規約)
    • DRY(Don't Repeat Yourself)
  • 2004年ぐらいに公開開始
  • Rails5.0は2015年秋にリリース予定だったが、たぶん出ない

なんでRubyなのか?

  • Rubyはソーシャルコーディングと相性が良い
  • ソーシャルコーディング(GitHub
    • 開発者同士がソースコードを投げ合ってコミュニケーションを取る
  • Ruby = 開発者にとって読みやすい言語
  • RUbyGems & Bundlerという優れたパッケージシステム
    • ライブラリ百花繚乱の時代には必須の仕組み
  • 新しいものたちはRubyコミュニティからやってくる
  • Rubyに触れていると新しいパラダイムに触れられるのが楽しみ

コミュニティ

  • *.rbという地域コミュニティが多い
    • Seattle.rb 2001年くらい〜が発祥
    • Asakusa.rb 2008年〜
  • 毎週どこかの国でカンファレンスが行われている
  • オフラインのコミュニケーションができるのが強み

なんでRailsなのか?

  • Rubyの仕事をしようとするとRailsしかないから
    • Rubyの仕様を壊さずにWebの世界で使えるのが良い

OSSについて

  • OSSを仕事で使うと楽ができる
    • 巨人の肩に乗る
    • 納品物の大部分は誰か頭の良い人がつくったもの
    • うまくやれば楽ができる
  • OSSを仕事で使う覚悟
    • 自分で選んだOSSもアプリケーションの一部
  • 自分が書いたアプリケーションとOSSの境界
    • 境界なんてない
    • ソースは全て公開されているが、他人のバグを引き受ける覚悟が必要
    • 自分が選んだものは自分で責任を持つ

じゃあどうする?

  • ソースは全て読むのが理想
  • OSSに貢献」という立派なものではなく、「部屋の片付け」くらいの感覚
    • 気がついたらメンテナーになっている…

OSSのバージョン

  • 「枯れたバージョン」なんてない
    • 安定しているものは最新版
  • バグもセキュリティホールも全てオープン
  • 常に最新のものを使う
    • アップデートのコストはしっかり払う
    • いつでもアップデートできるようにE2Eテストをしっかり書いておく
  • 常に最新のものを使う喜び
    • 数々の新機能
    • パフォーマンスの向上
      • 自分でパフォーマンスをチューニングするのではなく、アップデートするだけでパフォーマンスが上がる
      • Ruby2.3.0もパフォーマンスが改善する見込み
  • フレッシュなバグが踏める楽しみ

Rubyの歩き方

  • 一次情報を見る
    • Matz「仕様もバグもソースコードに書かれてる」
    • 最近はドキュメントを書くコミッターが増えた
    • 日本人同士のRubyコミッターでも英語でコミュニケーションをしている
    • Railsなら当然英語のものしかない
      • WEB+DB58号と74号には日本語の記事あり
    • Rubyはコア部分に関する一次情報が日本語で手に入る唯一のプラットフォーム
  • るびま
    • Hotlinks
  • RubyKaigi 2015
  • 地域Ruby会議
    • 大江戸Ruby会議
  • Asakusa.rb
  • Rails Tutorials

今どきのやり方でWebサービスを作ろう

後藤大輔(@idesaku)

  • 今どきのやり方って?

  • 結局はコミュニケーションの問題に行きつく

    • 一人だけではお金を生み出すWebサービスを作ることは難しい
  • プロフェッショナルとしてのコミュニケーションが必要
  • プロとしてやっちゃダメなこと
    • 口頭だけのコミュニケーション
      • 情報共有がなされていない
      • 口頭が一番ラクなので、ドキュメントが残らない
  • 状況は変わった
    1. ツール

      • メーリングリスト
        • 今まで口頭で行ってきたことをメールにするだけ
        • 時間が経つとメールを見なくなる
          • メールが増えすぎて、内容の分類ができなくなってくるため
      • チャット(Slack)
        • チャンネル
        • メンション
      • ドキュメント共有
        • ファイルサーバー
          • 変更管理でファイル名がグチャグチャになる
        • esa
        • Qiita:Team
      • コードレビュー
        • コードレビューは高コスト
        • Pull Request
      • ツールの連携
        • Qiita:Team + Pivotal Tracker + Slack
    2. 作法

      • emoji
      • HRT
        • Team Geek(Googleギークたちはいかにしてチームを作るのか)
          • 謙虚(Humility)
          • 尊敬(Respect)
          • 信頼(Trust)
      • Pull Requestでなぜその実装をしなければならないのかという背景を可視化する
        • 口頭だけで済まさない
    3. リモートワーク
      • 全てのワークがWebサービスなので、リモートワークが現実的になった
      • リモートワークにすることによって、オンラインで必要な作法が分かる
  • 組織を変えようと思ったら、ボスに相談

感想

Rubyがどういう言語かを紹介する初心者向けの内容であり、少し物足りなかった。

ただ、現役のコミッターの方の言葉でどのような思想でRubyRailsが開発されているのか、Rubyによってどのようなイノベーションが起こっているかなどという話は刺激があった。

後半のセッションでは、今どきの開発のやり方を紹介してもらったが、セキュリティの厳しい大企業(ソースが外に置けない、Webサービスの利用に申請や審査が必要など)では実現が難しいだろう。

うーん、その解決方法が転職しかないっていうのは答えとしては寂しいかな。

全社レベルでGithubを導入したり、Slackを利用するのは敷居が高いので、少人数のプロジェクトごとにボトムアップで導入していくことが現実的かと思う。というか、そうしてる。

具体的には、ソース管理をSubversionからGitLabに移行したり、Redmineでタスク管理をしたり、チャットをSlackに置き換えたりして、開発プロセスの効率化を図っています。その成果をもって、他のプロジェクトに展開していくことを狙っています。

ファイアーエムブレムif 成長率計算ツール インビジブルキングダム対応版を公開します

ファイアーエムブレムif 成長率計算ツールの新バージョンを公開します。

インビジブルキングダム公開から長らくお待たせしました。

ファイアーエムブレムif 成長率計算ツール V1.0

ファイアーエムブレムif 成長率計算ツール V1.0 Win32版

ファイアーエムブレムif 成長率計算ツール V1.0 Win64版

ファイアーエムブレムif 成長率計算ツール V1.0 OSX64版

修正点

  • インビジブルキングダムのデータに対応
  • 主人公の長所・短所を成長率に反映
  • 各種データミス、漏れを修正

インビジブルキングダムに対応しましたが、ユニットとクラス数の組み合わせがハンパないです。

お気づきの点などがありましたら、ブログのコメントかTwitterまでお願いします。

というわけで、これからFE祭に行ってきます。

スマートフォンアプリ時代のデザインワークフローに参加してきました

2015.7.21にLINE株式会社で開催されたスマートフォンアプリ時代のデザインワークフローという勉強会に参加してきました。

ウチの会社の開発はSI主体なのでデザイナーがおらず、エンジニアがデザインも兼務するので、ぶっちゃけデザインがショボいとよく言われます。

Web系サービスはデザイナーとどうやって開発をやっているのかが知りたくて参加しました。

The Way of the (Co-)Prototyping 株式会社グッドパッチ 藤井幹大氏

今日話したいこと

GoodpatchのスマートフォンアプリのUser Interfaceデザインワーク

User Interfaceって何だろう?

Interface=接触面

Interfaceは、それを挟む両側を深く理解し、どちらにも合うようにデザインされる必要がある。

iPhone3Gが登場した2010年頃にUXが注目されてきた。

Interfaceの向こう側に何(システム、社会など)を想定するかによって、デザインの範囲や捉え方が変わる。

モノづくりの敵は自分だ。

「内なる敵」:人は迷わずに行動するための仕組みを持っている。影響範囲の大きさが個人の領域を大きく越えるとき、自分が自分の敵になる。

  • 確証バイアス:間違いない
  • IKEA効果:がんばったからいいモノができた
  • サンクコスト効果:投資は無駄にしたくない

自分に打ち勝つ方法はあるのか(グッドパッチ社の事例)

prott:プロトタイプをチームにインストールするためのツール

https://prottapp.com/ja/

プロジェクトチーム

各チームは独立してプロジェクトを進める。メンバーはRole別に責任と権限を持つ。

メンバーの統計 - エンジニア:39% - デザイナー:35% - PM:26%

平均年齢は28歳。一人ひとりはスペシャリストではなく、集団でUIスペシャリストとなっている。

なぜやるのかという価値観を共有している

  • プロトタイピングによって検証をしている
  • アイディアをリアルな評価ができる状態にして、チームで試しながらモノを作っていく

デザインプロセス

  • チーム×プロトタイピング前提
  • チームも前提のチューニングをしながら改善を続ける
  • 発見→仮設→アウトプットを繰り返しながら常にレビューを入れていく
    • 制限時間を作って未完成でもレビューするのがコツ

三段階レビュー

  • チーム内レビュー
    • チーム内では常にオープンなSlackチャンネルとProttプロジェクトで共有して、職種関係なく意見を出し合う。
  • 全社レビュー
    • 毎週1回全プロジェクトを対象にしている
    • Qita:Teamで情報共有を事前に実施して、他プロジェクトの人がプロジェクト内容を理解できるようにする。
  • Role別レビュー
    • Roleごとの意見を出しあう。プロジェクト外のメンバーも参加可能

Sketchで変わるスマートフォンアプリのデザインワークフロー 山本麻美氏

Sketch3のすごいところ

  • Style
  • Symbol
    • パーツごとにまとめて色を変えたりできる。画面ごとに反映させる必要がない
  • Sketch Mirror
    • PCで作成中の画面をリアルタイムでiPhoneの画面に表示できる
  • Export
  • Plugin(便利なプラグインがたくさんある)
    • Androidアプリ用の解像度別の画像書き出しが一瞬でできる
    • ダミーテキストや写真を自動作成してくれる
      • 人名や電話番号などもある。日本語化プラグインもある

BizReachの事例

Sketchでワイヤーを300枚〜400枚作成し、Prottで配布

Sketchだから実現できた

Sketchを元にレイアウト指示書を作成

初心者であっても、企画→実装のブレがなく早くアプリを作成でき、学習により改善が高速化。 + メンバーの満足度も高まる

Prottによる体験の共有 Sketchによる圧倒的スピードで実現できた

UIのモジュール化と役割分担(コンポーネント化)

デザインをモジュール化することでUIの修正が1箇所で済む

Zeplinというツールを使うと、レイアウト指示書を作らなくて済む

Android向けのXMLiOS向けのSwiftObjective-C用のファイルを生成できる

インタラクションをデザインするツール

まとめ

  • 作業ではなく、UI設計に集中しよう
  • 全体を俯瞰してUIを設計しよう
    • Sketch + Prottでアプリを立体的に俯瞰できる
    • Excelはダメ!
  • 最低限の技術的知識を持とう

感想

グッドパッチ社のUIレビューは全社員で実施しているとのことだが、レビュー参加人数が多すぎて、かえって意見がまとまらないのではと思った。

結局は偉い人が気に入るデザインに偏りがちになるのではという懸念がある。

その辺の落とし所をどうしているのかを質問したかったのだが、時間の都合上質問ができず…

個人的考えとしては、意見が発散してまとまらないため、大人数のレビューはするべきではないと思っています。マネージャーなどへのレビューは、少人数レビューで充分に議論を仕切った後に段階を踏んでやります。

ただし、「俺の意見が絶対正しいんだ」系のマネージャーの場合はちゃぶ台返しをされて大幅な手戻りが発生するリスクがあるので、先にレビューをやったほうがいいですね。

後半の山本さんの話は、エンジニア目線で見ても非常に便利なツールの紹介でした。ぜひSketchとProttは使ってみたいと思います。

おまけ

勉強会の最後に「ダイアログ」というその日の振り返りを行うクロージングがあったのですが、そこで同席した方がこれからネイティブアプリの開発をやろうとしているとのことだったので、

「ネイティブの開発はiOSAndroidを個別にやると、学習コストがかかってツラいっすよー」

「今ならWebの技術使ってハイブリッドがオススメですよー」

「Cordova使えばスマホアプリ作れるし、NW.jsとかElectronならデスクトップアプリもつくれますよー」

というハイブリッド伝道師ぶりを発揮してしまいました。

ハイブリッドアプリの開発はまだまだ認知度も低いようなので、これからは個人的にハイブリッドアプリの普及活動をしていこうと思います。

ファイアーエムブレムif 成長率計算ツール(β版)を作りました

みなさん、『ファイアーエムブレムif』やってますかー?

僕は発売日にSPECIAL EDITIONを購入して、ハードクラシックでプレイを開始。 無事に白夜王国を全員生存でクリアしました。

ファイアーエムブレムif 白夜王国

ファイアーエムブレムif 白夜王国

ファイアーエムブレムif 暗夜王国

ファイアーエムブレムif 暗夜王国

前作の『覚醒』はゲームバランスや戦略性の崩壊したキャラクター育成ゲーでしたが、 『if』はその不満点を払拭するくらいマップの作り込みがされていますね。

と、詳細なレビュー記事は後日書くとして…

ところで、『if』ってレベルアップ時にHPが異常に上がりづらいと思いませんか?

それが気になって『if』の成長率を調べたところ、攻略Wikiには成長率は記載されておらず、 ROMデータを解析した海外サイトしか見つかりませんでした。

Fire Emblem Fates - Serenes Forest

キャラクターごとの成長率とクラスごとの成長率補正値は記載されているのですが、 最近のFEは兵種変更が可能になっているので、クラスチェンジした際の成長率がパッと見でよくわかりません。

計算するのマヂ無理…メンドクセ…リスカしょ…

「ああ、成長率を自動計算してくれるツールあればいいのに…」

f:id:world_daydream:20150705210525p:plain

ということで、ツールを自作しました。

ファイアーエムブレムif 成長率計算ツールβ Win32版

ファイアーエムブレムif 成長率計算ツールβ版 Win64版

ファイアーエムブレムif 成長率計算ツールβ版 OSX64版

3時間ほどで開発したツールであり、まだ発売直後でデータが不充分な状態であることから、ツールはβ版とさせていただきます。

NW.js」というWeb技術(HTML5 + CSS + Node.js)でデスクトップアプリケーションが作れるというフレームワークで開発したため、たいした機能がない割にはファイルサイズが大きくなっています。

これは「NW.js」の性質上、Webブラウザをアプリ内に丸ごと内包しているため、その分のファイルサイズがどうしても大きくなってしまいます。申し訳ありませんが、ご了承ください。

まだまだショボいツールですが、少しでもお役に立てば幸いです。

今後、主人公作成時の選択肢による成長率変動、ユニットとクラスのあり得ない組み合わせを非表示にするなどの機能追加をしていく予定です。

ツールのデータミスや不具合などがありましたら、Twitter@yusukixs)でリプライをお願いします。

追記

インビジブルキングダム対応版を公開しました。

world-daydream.hatenablog.com

構成管理ツールAnsibleを使い始めた

2015.06.23にヒカ☆ラボにて実施された、構成管理ツール「Ansible」の勉強会に参加してきました。

登壇したのはDMM.comラボの開発者の方です。

勉強会メモ

Ansibleで何ができるのか

2013年ごろからGoogle検索のトレンドになりつつある。

Ansibleは構成管理ツールだが、デプロイもできる。 JenkinsでAnsibleを使って自動デプロイをするといったようなことも可。

OS ミドルウェアの導入、設定でChefやAnsibleがよく使われる

ソフトウェアのデプロイ、OS/ミドルウェアの構成管理、開発端末のセットアップはAnsibleだけでできる。

Ansibleのユースケース

  • デプロイ
  • 構成管理
  • 継続的デリバリ

Ansibleのコンセプト

作者の言葉: Ansible's Architecture: Beyond Configuration Management

オーケストレーションというコンセプトもある。Ansibleはこれらを全部できる。

Ansibleは構成管理とデプロイのどちらかではなく、アプリケーションを完成させること。全てを自動化させる。

Ansibleの基本的な使い方

Ansibleの特徴

  • 冪等性
    • 複数回実行しても同じ結果になる
    • 構成管理するうえで非常に重要
  • シンプル
    • エージェントレス
    • 準備するファイルが少ない
    • タスクの定義はYAML形式
  • 標準モジュールが豊富
  • roleを共有する仕組み

Ansibleで準備するファイル

  • inventory
    • 実行対象のホスト軍を定義
  • playbook
    • 一連のタスクを定義
  • ansible.cfg

Ansibleコマンドを実行

ansible -i "127.0.0.1" all -m debug -a "msg=hello"

-i INVENTORY -m MODULE_NAME -a MODULE_ARGS

Ansible playbook

playbook.ymlという名前のファイルで作成

- hosts: local
  connection: local
  tasks:
    - name: ファイルの作成
      file: path=/tmp/helloworld/{{item}} state=touch
      with_items:
        - test1.txt
        - test2.txt

    - name: OSXの合成音声
      osx_say: msg="Hello World" voice={{item}}
      with_items:
        - whisper
        - kyoko
        - Zarvox

↑ Mac OSXのsayコマンドで合成音声ができる

(こんなコマンドがあったなんて知らなかった…w)

Moduleについて

対象ホスト or Playbookを通して実行されるもの

  • copy
  • filecommand
  • get_url
  • unarchive
  • template
  • service

Handlerについて

設定ファイルを書き換えた際の再起動といったユースケースではHandlerをつかう

処理が複雑になった場合

  • 対策
    • includeで他のファイルを読み込む
    • taskを分割する
    • 変数を定義する
  • ロールにまとめてしまう
    • playbookを構成する最適な方法
    • ファイル構成に従えば、自動的にvarsなどが読み取られる

DMMでの活用事例

  • Macの環境設定

    • homebrewモジュールで環境構築が一発でできる
  • 仮想マシンの環境構築

  • DevとOpsの共通言語になりつつある

勉強会に参加して

社内の別の部署でChefを使った調査を実施しているのは聞いたことがあったのですが、覚えることが多すぎて利用する気になれませんでした…

今回紹介されたAnsibleはエージェントレスで実行ができ、YAML形式で定義が可能で可読性が高いということで、一目で気に入りました。これはすぐに使えそうだと実感できたんですね。

そこで、実際にAnsibleを利用してみることにしました。

私が開発を担当しているサービスでは、無償のトライアル環境を提供する際にはサイトを手動で構築することが多く、その構築作業を面倒に感じていたため、その作業をAnsibleで自動化しました。

実際に自動化した作業は下記の通りです。

  • ソースのZIPファイル解凍
  • ディレクトリのリネーム、パーミッション設定
  • データベース作成
  • 設定ファイルの書き換え
  • 差分SQLの実行
  • 特定ディレクトリの上書き

これらの作業をコマンド1つで実行できるようになりました。なんでこれまで自動化しなかったんだろうというレベルですね…w

社内の勉強会でもAnsibleを紹介して評判がよかったので、これからAnsibleをうまく更に使いこなせるように勉強していきたいと思います。

第6回Cordova勉強会でLTしてきました

現在、仕事で参加しているプロジェクトでCordovaを使ってハイブリッドアプリを開発しています。

日本Cordovaユーザー会が月1回のペースでCordova勉強会を開催しており、私も第5回から参加しています。

6月19日(金)に第6回勉強会が行われまして、ライトニングトークをしてまいりました。 内容は自社で開発したハイブリッドアプリの開発過程についてです。

実は、社外の勉強会でライトニングトークをするのは初めてでした。 ライトニングトークをやろうとしたきっかけは、第5回勉強会で司会をしていたアシアルの岡本さんから

「もしよかったら、次回の勉強会からライトニングトークするのでやりませんか?」

という言葉をもらっていたことです。

(たぶん、本気でおっしゃっていたわけではないと思いますw)

ビールで乾杯した際、周りの方々と話す機会があったのですが、Cordovaを実際に利用して開発をしているという方はほとんどおらず、採用するかしないかの情報収集をしている方が大半でした。

実際に、私にはCordovaを使ったアプリ開発をしてリリースした経験があったため、もしかしたらその時の経験を話すことがCordovaを使おうか悩んでいる方々の助けになるのではないかと思いました。

ちょうど勉強会に本格参加している時期であり、いちエンジニアとして登壇できるレベルになりたいと思っていたので、今回チャレンジしてみようと決意しました。

内容も話し方も至らない点が多々あったと思いますが、なんとかやりきりました。幸いにも何名かの方から「これならCordovaを使えそうだ」「同じ悩みを抱えていたので参考になった」という感想をいただき、とても嬉しかったです。

今後はセッションもできるように勉強と自己研鑚を続けていきます。よろしくお願いします。

HTML5オールスターズ勉強会 - htmlday 2015 - 参加メモ

HTML5オールスターズ勉強会に参加してきました。

gloops株式会社にて、350人も収容できる大会場にて盛大に実施されたhtmlday 2015のお祭りです。

その講演内容とメモをまとめます。

『いつになっても議論が終わらないパフォーマンス関連のWeb標準たち』

川田 寛氏(@_furoshiki

スライドが見つからないので当日メモ

US、日本を含む10カ国ではモバイルからのGoogle検索者数は多種のコンピューターよりも多い。

モバイルWebを支える標準技術の進化

  1. アニメーション
  2. ネットワーク
  3. モニタリング

Android2系はIE6くらい大変

アニメーション

ロードマップ 過去)Animation Frame方式(JS→CPU) jQuery Mobile

現在)CSS Animation方式(CSSGPU) onsenUI, IonicFramework

未来)Web Animation方式(JS→GPU) が今年来るんじゃね?と思っている

SVGアニメーション(SMIL)も統合される

難点:Android5.x系にならないと使えない

ネットワーク

モバイルの読み込み処理の敵はネットワークインターフェースのパワーオン処理がボトルネックになっている

モバイルの消費電力を抑えるには、ネットワークインターフェースのパワーオン期間を短くしなくてはいけない Wi-Fiだと大丈夫

Resource Hints

Webページに含まれていないリソースを取得して先読みする。サーバと接続するためのスペック。IE11でも実装されている。

事前にサーバとTCP接続(鍵交換)することもできる。

だが、色々なツッコミがある Lazyload属性がなくなった

バッテリー消費を考えると、WebSocketではなくPUSH APIを使うようにシフトしていかないといけない。LINEはバッテリー消費が少ないので工夫されている。

モニタリング

Performance Group

The Performance Observer 特定のパフォーマンスが記録されたことを通知してくれる機能を追加しようとしている

Frame Timing API + Performance Observer でまともなFirst Paint時間計測APIができそうな気がしている

『まだまだ ServiceWorker のはなし。Background Sync も来るよ!』

安田 絹子氏(@kinu

メモ

Service Worker ネットワークのプロキシのようなことがJSでできるようになる

ページの裏側で動くイベント駆動型Yet another Javascript環境

  • ページのセットに対してインストールされ、バックグランドで動作
  • 対象ページからのロードリクエストをproxyで横取り

Push API

ServiceWorkerを使ってサーバからプッシュ通知を受け取れる。AndroidChromeだとブラウザを閉じていても受け取れる

Background Sync

今ネットにつながってなくても後でつながったときに通信してほしい

例)オフライン時に書いたツイートをオンラインになったら送る。

定期的にバックグラウンドで通信する'periodic sync'の仕様も策定中

Cordova 2.0でクロスウォークプラグインを使うと、Android4.0でもBlinkが使える

『オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavascript SQL-like database』

吉川 徹氏(@yoshikawa_t

オフラインWebアプリケーションとは?

  • かつてはHTML5の大きな目玉要素のうちの一つだったが普及しなかった
  • Application Cacheに課題があった

ServiceWorkerの登場でオフラインWebアプリケーションが盛り返してきている。

Indexed Databaseも普及してない

Indexed DBの特徴

  • 非同期APIでメインスレッドをブロックしない
  • 大量のデータ保存に向いている
  • JSオブジェクト(関数などを除く)やバイナリデータ(blob)が直接保存可能
  • トランザクション対応
  • Worker上で動作可能(ServiceWorkerでも)
  • APIが複雑で難解
  • RDBMSであいのでSQL的操作がNG
  • なにかのプロパティで検索したければ、あらかじめ索引を作っておく必要がある
  • 複合検索、ソートもあらかじめ)ry

LovefieldというGoogleのライブラリでIndexed DatabaseをSQLライクに扱うことができる

github.com

ServiceWorkder + Indexed Database(Lovefiled) = Offline Application

『ついに来たぞ!Polymer1.0!!!』

小松 健作氏(@komasshu

docs.google.com

Polymer 1.0とは

Google I/0 2015 Keynoteで紹介された数少ないWeb系技術の一つ

※ただし30秒しか触れられなかった(笑)

Web Componentsを使いやすくする

1.0になって速度が速くなった サイズがsmallになった。35%のコードを減らした。19kb - 42kb CSSのCustom Propertyを使って、色を変えたりできる Polymer0.5との互換性はない

Polymerはフレームワークではない。Web Compornent Built with Polymer

Polymer Starter Kitで実装すると、知らず知らずのうちにオフラインWebアプリに対応してる

『Reactがいかに素晴らしいか語る20分』

増井 雄一郎氏(@masuidrive

※スライド見つからず

AngulerJSやBackbone.jsにしっくりこない人にReactはオススメ

jQueryだとDOM操作は難しい

  • DOMはどこからでも変更可能
  • DOMが状態を持っている
  • DOMとソースが離れすぎ

JSの中でHTMLを生成する

ソースはcodepen/masuidriveで公開中

Yuichiro MASUI on CodePen

Reactはコード量は多いが、DOMをいじれないために可読性が高くなることがメリットとなる

VirtualDOMを作って、実際のブラウザ上のDOMは差分だけを更新するので、そこまで表示は遅くない

React.jsのDOMはWrite1回だけ。読み込みも変更もできない。その代わりコンポーネント化して再利用しやすく、保守性が高い。製品寿命の長いプロダクトには採用を検討してほしい。

『今からはじめるECMAScript6』

泉水 翔吾氏(@1000ch

色々な意見がJavaScriptに影響してきた CoffeeScript, node.js, AngularJS

現時点でIESafariはECMAScript6に対応していない

サポートしていないブラウザに対しては、トランスパイラを使って、ES6のコードをES5のコードに変換できる

ハードウェアこわい』

若狭 正生氏(@wks

たぶん、ハードウェアのことを色々と考慮して実装しないといけない時代になったから大変だねってことかと。

『Edge だけじゃない! Build 2015 で発表されたそれ以外の Web 関連技術まとめ』

物江 修氏(@osamum_MS

Universal Windows Platform

Windows10はPCもスマホタブレットもIoTもカーネルが同じになるので、アプリがそのまま動く

XcodeObjective-CのコードをVSでWindowsアプリ用コードに変換できたりする

Windows10ではDockerが動く

Visual Studio Code マルチプラットフォームで動作するコードエディタ

Vorloan.js リモートデバッグ用のツール

総評

色々とバラエティに富んだ内容で勉強になりました。 まだまだ自分のアンテナの張り方が足りていないことも反省。 もっとHTML5について詳しくなれるように、日々精進していきます。

Indexed DB使いたいけど、スマホの場合はiOS8以上とAndroid4.4以降に限定されるっていうのがネックですね…