ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし

2018年3月29日 iOS Test Night #7に「アプリを十数個作った僕が初めて書いたテストの話」という内容で登壇してきました！ iOSエンジニアの小菅です。 2018/03/26（月）に行われたiOS Test Night #7に登壇してきたので、スライドを紹介しつつまとめ記事を書きました。 公の勉強会での登壇は久しぶりで、しかも80人以上の方が参加されていたのでとても緊張しました。 当日は�Youtubeのリアルタイム配信も行われていたらしく（当日知った）賑やかで楽しい会でした！ 自分は�５分のLT枠で発表させて頂きました。 他の登壇者の発表タイトルを見て、テストのテクニックやらTDDやらがある中で�初心者向けのネタで大丈夫かなと不安にもなりましたが、問題なかったです。 みんな優しかったです。 発表内容 Speaker Deckにあげさせて頂きました。 当日話した内容にプラス

はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹

2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><

こんにちわ、Nagisaのデザイナーリーダーの川畑です。 最近FramerやInvisionSTUDIOを筆頭にインタラクション・アニメーションデザインのツールが続々登場して賑わっていますね。 弊社でも各デザイナーが新しいツールを手に取り、どのような制作ができるのかとワクワクしながら積極的に試しています。 その試みの一環として“Protopie”というツールを触っていたのですが、 評判通りとても使い勝手がよく、せっかく触るなら!と公式チュートリアルで紹介されていない動きもチャレンジしてみたので、その作例と手順を紹介したいと思います。 ProtoPieの概要や優れている点を知りたい!という方は公式サイトやこちらの記事をご覧になってください。 ・ProtoPie – 公式サイト ・“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた 今回紹介するもの ス

2018年1月16日 iOSアプリの画像ライブラリ、NukeのWebP対応版を本家からForkして公開しました 2018/01/19 更新 この記事で紹介しているNuke+WebPをdeprecateして、plugin形式にした Nuke-WebP-Pluginを作成しました。 詳しくはこちらをご覧ください。 はじめに iOSエンジニアの小菅です。 今回の記事は、去年末くらいから名前を聞くようになったNukeをForkして、WebPのデコード処理を組み込んだモノを開発して公開したので、それの紹介と作業手順などを書いていきます。 余談ですが、Nuke[ニューク]の意味を調べたら核兵器って意味らしいです。 Nukeと作ったものの紹介 先にNukeの紹介と作ったもののインストール方法を紹介します。 本家のNukeのレポジトリ 今回、本家がWebP対応をする予定がないとのことだったので、Forkし

今回のブログでは求人媒体別の数値と共に、多くの採用担当者さんが苦労するであろう複数媒体の管理方法について書きます。 組織体系について 媒体を使用する目的は「短期での採用目的の充足」です。事業予算が決まり、人員計画が出た後に複数媒体で展開し各ポジションを3ヶ月以内をめどに採用する場合に使用しております。 中長期ではこの外部媒体比率を下げていき、リファラルと自社メディア経由の応募者比率が過半数を超える事をテーマとして持ちつつ、短期での目標充足の為に媒体への出稿をしておりました。またここでは掲載時点で報酬が発生する媒体は除いております。 現在の開発メンバーはスモールチームでどのポジションもリーダー、マネージャーのようなスキル、マインドを求めております。 上記組織体型ではなく こちらに近い開発体制だからです。 有料掲載型の媒体はどちらかというと母集団を確保し、上記でいう同職種メンバーA,B,C〜の

はじめに iOSエンジニアの小菅です。 社外向け勉強会を初めて開くにあたって発表資料を作りましたが、相次ぐキャンセルなどの影響で中止にせざるを得なくなってしまいました…。 ただせっかく作ったスライドと発表内容なので記事に残そうと思います。 私が担当しているマンガZEROの広告の売り上げをマネタイズ担当者と一緒に地道にあげていった時に当たった施策の紹介になります。 スライド 要点を整理して書いていこうと思います。 初期のマンガZEROの広告実装 初期は１つのSDKで実装していました。 そもそも２〜３年前だったのでiOSアプリ向けの広告SDKも少なく、またフォーマットもレクタングル(300 x 250) or バナー(320 x 50) くらいしかなかったので、迷うことなく使用していました。 ただ、それの実装だけだと思ったように売り上げもあがらず、またマネタイズ担当も手を出しづらいものになって

2017年12月13日 PrometheusでNATを越えよう！ – 1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わせて導入した話~vol3~ PrometheusでNATを越えよう！！ どうもNagisaのインフラエンジニア 榎戸です。 ついに、Prometheus2.0がリリースされました！ もっとPrometheusユーザが増えてくれると 色々な記事が上がったりして情報が増えるので嬉しいのですが・・・ 今回も下記記事の続編ということで PrometheusのNAT越えについて書いていきます。 こちらはよく個人的に聞かれたり、 多くの人が気になっているところではないでしょうか。 1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わせて導入した話 1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わ

前回記事で書いたトピックの中からブログのアクセス比率について公開したいと思います。その前に11月の振り返りです。 11月トピック 記事更新数と頻度 技術×クリエイティブ×過程の共有で900はてブ獲得 SEOアクセスの積み上げ トピックは上記です。まずは下記から。 記事更新数と頻度 前月と同様、月間8記事前後の更新を続けました。メンバーを職能毎の4チームに分けて2記事前後を目処に執筆しています。 iOS Android デザイナー フロント/バックエンド その他(ビジネス、バックオフィス、HR) 上記チーム毎に記事トピックをディスカッションしてもらいながら、執筆。 狙いとしては最低でも2名以上のレビューは通る事になるので、フィードバックを受けた状態で公開されます。また各職能毎に満遍なく記事を出せるので、言語や技術毎の記事への反応を確かめる事もできます。副次的ですが、ネタで困った際もチームで相

そうだ！いらすとやを動かそう！！ こんにちは。にしやまです。 突然ですが、皆さんは「いらすとや」をご存知でしょうか？ 某大型家電量販店の店内ポスターに使用されていたり、SNSで拡散されたり、目にする機会が多いのでご存知の方も多いかと思います。 可愛いイラストのフリー素材サイトなんですが、中には「こんなのいつ使うんだろう」っていうようなネタ画像もあって見てまわるだけでも面白いです。 こんなのとか。 こんなのまで。 ある日のことです。 いつものように「いらすとや」を巡回していたぼくはふと思いました。 この愛すべきゆるキャラ(？)たちがイキイキと動いているところを見てみたい！それも超ヌルヌルに！！…と。 というわけで、今回はSpineを使って「いらすとや」をヌルヌルと動かしていきます！ ※Spineについては前回の記事「Spineを使って２Dキャラクターを３Dのように動かす」を参照ください。 ま

はじめに こんにちは、インキュベーション事業部所属 iOSエンジニアの葛山です。 タイトル通り、WebRTCを用いた生放送iOSアプリを開発し本日リリースしましたので、使った技術や苦労した箇所などをプロジェクト振り返り的な感じでまとめられればと思います。 WebRTCを触ってみた的な紹介記事は多いと思うのですがiOSアプリでがっつり採用した事例は少ないと思うのでそちらも踏み込んで書ければなと。 先日リリースした101 LIVEです! また、これからiOSアプリを新規開発しようとする人たちにとっても参考になる記事になれば良いなと思います。 WebRTCとは？ WebRTCはWeb RealTime Communicationの略で、ブラウザが直接通信し、映像・音声といったデータをリアルタイムにやりとりすることを可能にした技術です。 通信の特徴としてP2P方式でユーザー間で直接通信を行うためレ

NagisaでAndroidエンジニアをしている@sekitobaと申します。現在マンガZEROというアプリのAndroid版をピュアKotlinで実装しています。 現在、Nagisaで開発しているマンガZEROのアプリの実装をKotlinで行うに当たり、Kotlinの言語仕様はドキュメント等を読んで一通り押さえていたのですが、いきなり業務で利用するのは少し怖いと感じ、ウォーミングアップとしてKotlin KoansというKotlin例題集(ブラウザがあれば試せるオンライン版もあります)をやってみたところ、なかなか良かったのでKotlinを始めてみようかなという方にお勧めしています。現在、問題文に英語しか用意されていないため、Introduction章を日本語訳してみました。(おかしな点がありましたら指摘いただけると嬉しいです！) Koansに解答のベースとなるコードがある場合は、 //回

2017年10月24日 1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わせて導入した話~vol2~ どうもNagisaでインフラエンジニアをしております榎戸です。 今回は下記記事の続編ということで 実際にPrometheusのインストールや設定について書いて行こうと思います。 1万台のサーバを監視できると話題のPrometheusをGrafanaと組み合わせて導入した話 ※2017-10-05にv2.0.0-rc.0がリリースされておりましたので v2.0.0-rc.0を使用して説明を行なっていきます。 また光栄な事に意外と反響が大きく、こういうことを知りたいなどのコメントを頂けたので その辺りはまた次回以降に書かせて頂こうと思っております。 今回紹介する内容 導入 Prometheusインストール node_exporterインストール AWS/EC2イン

はじめに こんにちは！ 社長室インキュベーションチームで新規サービスのデザインを担当しています田村です。 先日、デザイナーリーダーの川畑が執筆した記事にある通り、Nagisaではデザイン手法としてAtomic Designを採用しています。 Atomic Designは、コンポーネント指向のデザイン手法です。 コンポーネント指向はパーツの再利用と効率の良い運用を可能とし、デザインの追加・変更が容易であり作業の効率化に繋がります。 また、React Storybookなどを使用すれば「あのボタンがない」「カラーが違う」などの実装段階での抜け漏れも防げますし、デザイン変更のハードルも下がるかと思います。 コンポーネントの粒度がしっかりと定義できていれば、エンジニアさんとの共通言語が増えてコミュニケーションの質が高まることも期待できます。 このようにAtomic Designはデザイナーの作業効

GoogleAnalyticsを昔から利用しているアプリでの計測方法の紹介 Google AnalyticsはもともとはWebサービスの計測ツールとして出ていましたが、ネイティブアプリの計測もサポートしています。 私がアプリ開発を始めたとき（約３年ほど前）はGoogle Analytics一択だった気がします。（違かったらすみません） 今現在ではFirebase AnalyticsやMixpannelなどイベントログベースのネイティブアプリに特化した計測ツールが有名ですが、未だにGoogle Analyticsから離れられないサービスがたくさんあるかと思います。 例えば 長期的にサービスを運用していて過去のデータを捨てられない ディレクターやプロデューサーがGoogle Analyticsでの分析方法のノウハウが豊富 サービスの指標がGoogle Analyticsベースで作成されている

2017年10月11日 [動画解説付き]デザイナーがUI実装時に伝えるべき5つのSketchTips！ 〜エンジニアの困っている声に応えました〜 Sketchで困っているコトがないかエンジニアに向けた社内アンケートを実施 こんにちわ、デザイナーリーダーの川畑です。 現在NagisaのUIデザイン開発では主にデザイナーがSketchで制作し、エンジニアが参照しながら実装しています。 今回は更なるエンジニア-デザイナー間の効率良い伝達のために、Sketchを参照する上でエンジニアが困っていることをヒアリング→デザイナーチーム全員で解決策を回答したので、記事として公開したいと思います。 Sketchの基本的な操作や機能は理解しているが、もっとうまく使いこなしたいデザイナーやエンジニアの参考になれば幸いです。 こちらの困っている声に応えました Lineheightが設定されたテキストボックスのマー

2017年9月29日 Workbox で Service Woker のキャッシュを導入してみた話し、Webpack を添えて はじめに Webkit の ServiceWorker (以下 SW) in develop 事件以来、SW にも希望が持てるようになってきました。PWA という言葉もちょっとバズワードっぽくなっているのでここで PWA というワードもさり気なく入れてみます。 Nagisa でも マンガZERO というサービスの Web 版で Workbox を使って SW を使ったクライアントキャッシュを導入してみたので、Workbox の使い方など紹介します。 環境 マンガZERO Web の環境はざっくりこんな感じです。 Vue.js 2.0 Vuex SPA Webpack でビルド Express で SSR UA 判定でのデバイス切り替え (PC・SP) Webpac

2017年9月27日 AtomicdesignとSymbol機能でUIデザイン制作効率化！Sketchファイル1つで完結するデザイン制作と伝達のツボ はじめに こんにちわ、デザイナーの川畑です。 現在Nagisaではゲームを除いたwebやアプリのUI開発ではデザイナーがSketchファイルを作りエンジニアが参照して実装します。 (ありがたいことにエンジニアさんがSketchを触ってくださっています) そんなSketchを中心にデザインが伝達されるのであれば、とことんファイル1つを見やすく、作りやすくしてしまおう！ ということで今回の記事では、 全体の統一感を持ちつつデザイン制作 実装するエンジニア、共同制作するデザイナーに設計意図を伝達 を効率よくできるファイル制作と管理方法を紹介したいと思います。 上記を目指すにあたって、 Atomicdesignの デザインパーツを合体させて、繰り返し

2017年9月20日 Firebase Cloud FunctionsでFirebase Analyticsのカスタムイベントをリアルタイムで扱う方法 試した動機 クライアントサイドはAPIのアクセスログやらを直接触る機会がないと思いますが、ふとユーザーの垂れ流しになっているイベントログを使ってあそんでみたいなと思ったのがきっかけです。 なので色々探したところ、FirebaseのAnalyticsでイベント計測をしてCloud Functionsで出力をする方法が見つかったので、そちらの手段を紹介します。 Analyticsにイベントを送信する方法はiOSで書きますが、イベント送信処理以降はAndroidも同じようにできるので、参考にしていただければと思います。 軽くFirebaseなどの紹介 Googleのサービスはとにかくドキュメントを読み込むことをおすすめします。 このサービスが今回