Shoichi Matsuda's diary

このブログは移転しました。 https://shoma2da.net/ が新しいブログです。

続エンジニアだけでアプリアイコンを作る

tips 制作

昨日「エンジニアだけでアプリアイコンを作る」を書いたのですが、500はてブ以上と思わぬ反響をいただいて驚いています。

 

ほぼツールの紹介だったので大方予想はできていたのですが「で、結局絵はどう書くの？」といったコメントを多くいただきました。 

このあたりについてもどのようにやってきたかをざっくりですが紹介しておきたいと思います。

 

アイコンを書けるようになるまで

  1. 模写する
  2. 勉強する
  3. 自分なりに作る（ゴール）

 

ざっくり言うとこの３つの手順です。

 

あくまで「なんとか書けるようになるまで」なのでデザイナーさんから見ればまだまだなレベルにしか到達しないでしょうが、やれないよりはマシなはずです。

 

模写する

まずは今あるアイコンと同じものをとにかく作っていきます。

ここでの主な目的はツールの使い方を把握することです。（前記事ではInkscapeを紹介しました）

 

10個ほど作ればおそらくツールの使い方はほとんどわかってくるでしょう。

 

初めに模写するおすすめのアイコンを並べておきます。

アプリ名の横にどんな機能を使えば模写できそうかも載せておきます。

 

とにかくアイコンを作ってみる

以下の３つのアイコンは基本的には丸と多角形だけで作れるはずです。

さくさく作っていきましょう。

 

  • Yahoo!リアルタイム検索（四角、三角、角丸）
    f:id:shoma2da:20140506222440p:plain
  • Dropbox（四角、角丸、オブジェクトの差分（白い影））

    f:id:shoma2da:20140506222444j:plain

  •  Presso（四角、角丸、パスのノード（カップの下端））

    f:id:shoma2da:20140506222439p:plain

影の付け方を覚える

続いて影の付け方を学んでいきます。

影は以下のように黒くて少し透明な図形を重ねれば表現できます。（もっといい方法あれば教えて下さい…）

f:id:shoma2da:20140506223559p:plain

  • TED（文字の内側に影）

    f:id:shoma2da:20140506222437p:plain

  •  Flat TO-DO（アイコンの外側に影）

    f:id:shoma2da:20140506222446p:plain

  • Google Adsense（色んなところに影）

    f:id:shoma2da:20140506222441p:plain

曲線の使い方を覚える

これが一番むずかしいですが曲線の使い方です。

使うツールとしてはベジェ曲線やパス、ノードなどです。（Inkscape、Illustatorのどちらでも使えます）

 

難しければはじめはやらなくては良いでしょう。。。

  • Tumblr（「t」の左肩が曲線）

    f:id:shoma2da:20140506222511p:plain

  • Vine

    f:id:shoma2da:20140506222434p:plain

  • ボケて

    f:id:shoma2da:20140506222443p:plain

 

勉強する

上記のようなアイコンの模写をしていくとツールの使い方がだいたいわかってくるはずです。

 

このようなタイミングで一度「デザインってどうやるの？」を勉強しておくと自作する際の大きな足しになるでしょう。

 

ここは本を購入することをおすすめします。

「デザイナーじゃない人向けのデザイン本」というまさにドンピシャな本です。 

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

  • 作者: Robin Williams,吉川典秀
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/11/19
  • メディア: 単行本（ソフトカバー）
  • 購入: 58人 クリック: 1,019回
  • この商品を含むブログ (104件) を見る
 

 アプリアイコンに限らず、スライドやWebサービスのUI設計にも大きく活かせますので必読です。

 

内容は４つの大原則の説明です。それぞれ一行で説明します。

  • 近接
    関連の濃いものを近くに、関連の薄いものを遠くに配置する
  • 整列
    一つの直線を軸にして要素を配置する
  • 反復
    繰り返し同じ表現を使って統一感を出す
  • コントラスト
    意味を変えたい場合ははっきりと違いを表現する

一行で説明しましたがそれぞれかなり奥が深いです。続きは是非本で呼んでください。

 

自分なりに作る（ゴール）

模写と勉強が終われば、「ツールの使い方がわかる、かつ、なんとなくデザインのことを知っている」という状態になるでしょう。

 

ここまで来ればひとまずゴールです。

自分なりにアイコンを作っていきましょう！

 

それでもアイディアが全然浮かばない、という方におすすめなのは現実にあるものを極力シンプルに表現する方法です。

 

例としてクマを挙げておきます。

f:id:shoma2da:20140506225720j:plain　（これが）→　f:id:shoma2da:20140506225741g:plain（これ！！）

このようにアプリに関連のあるものを極力シンプルに表現するアイコンにしてみましょう。

 

この他良い方法などがありましたら是非教えて下さい！

以上です。

エンジニアだけでアプリアイコンを作る

tips Webサービス 制作

エンジニアが自分一人でアプリ開発などをしているとかなり困るのが画像素材の作成。（もっというとデザイン全般ですが。。。）

その中でもアプリアイコンを作る際に個人ではどうしているかを晒してみようと思います。

 

アイコンを作る手順

ざっくり手順を言うと以下２つです。

  1. Inkscapeで元アイコン作成
  2. makeappiconで全サイズのアイコン画像作成

Inkscape

アイコン作成といえばIllustratorやPhotoshopを使うのが一般的かと思うのですが、非デザイナーにとってこれらのソフトはまだまだ高価で簡単に手を出せるものではありません。

 

そこでこのInkscapeです。

公式サイトはこちら。

f:id:shoma2da:20140505232240p:plain

 

Inkscapeはオープンソースの無料のベクター画像編集ソフトです。（ものすごく簡単に言うとIllustatorと同じことができる無料のソフトです）

 

無料ですが、基本的なアイコン作りには困らない機能が揃っているので、エンジニアが手を出すには丁度いいソフトではないでしょうか。

 

アイコンを作る 

こちらのソフトを使って幅1024、高さ1024のサイズのアイコンを作成していきます。

f:id:shoma2da:20140505232531p:plain

検索すると日本語の情報もたくさん出てくるので、使い方に困ることは少ないでしょう。

 

アイコン画像を書き出す

アイコンができあがったら画像に書き出していきます。

ファイルメニュー内に書き出し項目があるのでこちらから書き出しましょう。

f:id:shoma2da:20140505232737p:plain

 

makeappicon

アイコンができあがったら各アイコンサイズにリサイズしていきます。

このときに非常に便利なのがmakeappiconです。

f:id:shoma2da:20140505234250p:plain

 

このmakeappicon、1024✕1024の画像を渡すだけでiPhone/Androidアプリに必要な全てのサイズの画像を作成してくれます。

 

手順は非常に簡単です。

画像をドラッグ＆ドロップしてメールアドレスを入力するだけ！

f:id:shoma2da:20140505233350p:plain

↓（画像をドラッグ＆ドロップ）

f:id:shoma2da:20140505233430p:plain

↓（完成！）

f:id:shoma2da:20140505233512p:plain

 

会員登録なども一切必要ないので使わない手はないかと思います。

 

その他

たまにですが「これこれのサイズの画像が欲しい！」なんて思うことがあります。

 

そんなときはPlacehold.jpを使ってます。

画像サイズを入力するだけでダミー画像を用意してくれるサービスです。

f:id:shoma2da:20140505234130p:plain

 

これまためちゃ便利！

-------

ここ１年ぐらいはこんな感じの環境で作業してますが、みなさんの画像素材などの作成環境も知りたいです。

是非コメントなどで教えて下さい。 

 

追記：続きの記事を書きました→続エンジニアだけでアプリアイコンを作る

少人数チームにおすすめ！無料で使える便利ツールまとめ

Travis CI heroku 継続的インテグレーション GitHub チーム 効率化

私事ですが会社とは別に少人数チーム（〜３、４人前後）でチーム開発してます。

これまでもいくつかのプロジェクトをやってきたのですが、少しずつ使うツールが固まってきたので一度まとめておきたいと思います。

お気に入りのツールたち

今回は以下の６個のツールを紹介したいと思います。

  • Facebook
  • Line
  • Trello
  • GitHub
  • Travis CI
  • Heroku

連絡系

連絡のためのツールは「ほぼ必ずみんなが普段から使っているもの」というのを意識して選ぶことが多いです。

こうしたツールであればコミュニケーション手段の導入コストはほぼ０です。

最近流行りのChatWorkやHipChatも確かに便利なのですが、やはり普段使いのものではないので中にはレスポンスが遅くなってしまう人も現れてしまうでしょう。

 

Facebook

f:id:shoma2da:20140417190906p:plain
http://facebook.com/
まずはみなさんご存知のFacebookです。

使い方としてはチーム名を付けたグループを作成してメンバー間でコミュニケーションします。
後からチームメンバーが増えても過去のログは全て追えます。また、ファイル管理/整理ができる点もポイントです。

LINEやChatWork、HipChatとの違いとしては会話がスレッド単位で進みます。

プロジェクト内で話す内容は常に一つとは限らないので（例えばDB実装の話とプロモーションの話、みたいな感じです。）、そんな時にはスレッド単位であることにありがたみを感じます。

LINE

f:id:shoma2da:20140417191246p:plain

http://line.me/ja/
もはやインフラ、LINEです。

こちらもFacebookと同じくグループを作って管理します。

LINEの場合はFacebookよりもスピードが求められる場面で使うことが多いです。
「ログインidなに？」「あれって誰が知ってるんだっけ？」といったちょっとした疑問や「レビューお願い！」という取り急ぎのお願いなどです。

ソースコード系

続いてソースコードや、リリース周りのお話です。

主にエンジニアが担当する部分ですね。

個人的には以下に紹介する３つはどれも欠かせない必須のツールです。

GitHub

f:id:shoma2da:20140417193746p:plain

https://github.com/
まずはGitHubです。

無料だとソースコードは公開されます。ただ、公開といってもほとんどの場合誰も見てませんw（後述しますがTravisのことを考えるとむしろ公開されていたほうが都合が良いです。）

個人的にはプロダクトが小さいうちは減るものも特に無いので公開でも全く気にしていないです。

あとは意外と使っている人が少ないような気がするのですが、複数人で進める場合はOrganization機能が便利です。グループ機能のようなものですね。
→Introducing Organizations

複数人をOrganizationの管理者や開発者として権限登録できます。

heroku

f:id:shoma2da:20140417210340p:plain

https://heroku.com/
無料で使えるPaaS（平たく説明するとアプリケーションを動かすための環境を用意しているサービス）です。

開発者がやることとしてはソースコードを書いてherokuのサーバにpushするだけです。これだけでアプリケーションを動作させられます。
メール送信やDB、Cron処理などもプラグインを使って自由自在です。

無料の範囲は月あたりの使用時間やデータ量などで決まっていますが、相当なユーザが集まらない限り無料の範囲を超えることはほとんどありません。

Ruby、Java、Python、Clojure、Scala、Node.js、Playなど様々な言語に対応しているので特別言語を使った開発をしていなければほとんどの場合に対応可能でしょう。

Travis CI

f:id:shoma2da:20140417211900p:plain

https://travis-ci.org/
CI、と名の付いている通り継続的インテグレーションサービスです。

GitHubのリポジトリを監視していて自動テストや自動ビルド、herokuと連携して自動デプロイまでできます。

GitHubの公開リポジトリが対象の場合はずっと無料です。素晴らしい！

設定も非常に簡単でかなりの使いやすさです。

タスク管理系

最後にタスク管理です。いくつか試したのですが以下に紹介するTrelloが一番しっくりきています。

Trello

f:id:shoma2da:20140417213010p:plain

https://trello.com/
かんばん風のインタフェース（Trello内ではBoardと呼んでいます）を提供しているサービスです。サクサク操作できてかなり心地よいです。

もちろん複数人で同じBoardを操作できるので、チームでの管理もお手のものです。他の人が何をやっているのかがわかるだけでかなりスムーズにプロジェクトは進むはずです。

Board内の各列には以下のような使い方をしています。１つのタスクは長くても２〜３日以内で終わる大きさのイメージですね。

  • アイディア：思いついたことをとにかく誰でも入れていく場所。タスクに分解前
  • やること：終わりが明確になった、これからやるタスク
  • やってること：たった今着手のタスク
  • レビュー中：作業が終わってレビューしているタスク
  • 終わったこと：レビューも終わって作業終了したタスク

Android / iPhoneアプリも出ているので手軽にチームの状況を把握できます。

gruntを使ってnodeのnpm testを自動化する

効率化 Node.js

誰向け

nodeを使っている人向けです。

何がしたいのか

nodeプロジェクト内のjsファイルが更新される度にnpm testを自動で実行したいです。

方法（手順）

gruntを使います。

以降の作業は全てプロジェクトのルートで進めます。 --save-devは開発時に必要なモジュールである、という意味です。package.jsonのdevDependenciesの部分に追加されるはずです。

まずはgrunt-cliをインストールします。gruntのCUIインタフェースです。

$ npm install grunt-cli --save-dev

次にgrunt本体をインストールします。

$ npm install grunt --save-dev

Nodeクックブック

Nodeクックブック

gruntの核となるパッケージは導入したのでここからは必要なプラグインをインストールしていきます。 今回はファイル変更によるnpm testの実行をおこないたいのでgrunt-contrib-watchとgrunt-shellをインストールします。

$ npm install grunt-contrib-watch --save-dev
$ npm install grunt-shell  --save-dev

いよいよ具体的な設定を書いていきます。設定ファイルはjavascriptとcoffeescriptのどちらかが使えるようですが、今回はjavascriptを使います。

以下のような中身になるようにファイルを作成してください。

$ cat Gruntfile.js
module.exports = function(grunt) {
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-shell');

  //設定
  grunt.initConfig({
    shell: {
      test: {
        options: { stdout:true },
        command: function() { 
          return "npm test";
        }
      }
    },
    watch: {
      files: ['*.js'], //変更監視したいファイルのパスを書いてください
      tasks: ['shell']
    }
  });
}

最後にgruntコマンドを実行します。 今回、grunt-cliをグローバルインストールしなかったので以下のコマンドで監視を開始できます。

$ node_modules/grunt-cli/bin/grunt watch
Running "watch" task
Waiting...

ここまで設定作業は終了です。 あとは監視対象になっているファイルに変更がある度にnpm testが実行されるはずです。

適度な雑音を利用して集中力を高める

効率化 ライフハック

今回は僕個人が普段のPC作業の中で集中力を高めるためにしている「雑音作り」を紹介したいと思います。 環境はMac OS X(Mavericks)です。

NoisyTyper

まずは一つ目。NoisyTyperです。

簡単に説明すると「キーボードを打つ度に音を出すMacアプリ」です。とってもシンプル。

具体的にどのようなものかはこちらの動画を見ていただくとわかります。

動画では少しうるさく感じてしまうかもしれませんが、実際に使ってみるとかなり心地よい音です。

カチカチカチ、チーンという音にやみつきになること間違いなしでしょう。

導入方法

NoisyTyperのdownloadリンクからzipファイルをダウンロードします。

f:id:shoma2da:20140330231700p:plain

zipを展開するとアプリ本体が入っています。Applicationディレクトリなどに移動しておくと良いでしょう。

f:id:shoma2da:20140330231847p:plain

ここまで来たら起動だけして終了、といきたいところですがあと一歩。
Mavericks用の設定が少しだけ必要になります。
（こちらの記事で情報を見つけました。ありがとうございます！）

f:id:shoma2da:20140330233318p:plain

上記図のとおり、環境設定→セキュリティとプライバシー→アクセシビリティの欄にNoisy Typerをドラッグアンドドロップして、チェックマークを入れましょう。
意味合い的には「Noisy Typerはキーボード入力によって音を出して良い」という権限を与えたイメージです。

この設定については公式サイトに記載がないのでつまづきがちです。注意しましょう。

準備は整いました。あとはNoisy Typerを起動するだけです！（もしかしたらOSの再起動が必要かも？）
アプリを終了する際はおもむろにqaz123と打てばOKです。

Coffitivity

続いてはCoffitivityです。
こちらは様々なサイトで取り上げられていたのでご存知の方も多いかもしれません。

f:id:shoma2da:20140330235231p:plain

類似のサービスはいくつかありますが、Coffitivityを選ぶ理由として挙げられるのは様々なプラットフォーム用のクライアントを提供している点です。

iPhoneやAndroidアプリだけでなくMacアプリも提供しています。導入が簡単、ということで個人的にはよく使用しています。

導入方法

Noisy Typerに比べてかなり簡単です。

  1. App Storeで「Coffitivity」を検索
  2. ダウンロード
  3. アプリを起動

ステータスバーにコーヒーカップアイコンが表示されるので再生/停止もらくらくです。

f:id:shoma2da:20140330234149p:plain

以上２つのアプリを併用して何が良いのか

Noisy Typerはコーディングやブログを書く作業など能動的な作業の中で、Coffitivityは情報収集など受動的な作業の中で適度な雑音を流してくれます。

ぜひともお試しください。

GitHubを使ってるならhubコマンドを使うべし

Git GitHub 効率化

前回の「今さら聞けないgit pushコマンド」に続きGitネタです。
今日はGitHubを使う全てのユーザの方におすすめしたいhubコマンドを紹介します。

hubコマンドとは

GitHub社が公開しているコマンドです。
リポジトリはこちら。https://github.com/github/hub

gitコマンドをラップしていて、GitHub上の操作をCUIから行うことができるようになります。

導入

導入はとっても簡単です。

インストール

Homebrewならコマンド一発です。

$ brew install hub

alias設定

hubを直接打たなくても良いようにgitにaliasします。(.bash_profileなどに記載してください)
hubはgitをラップしているので今まで素のgitで使っていたコマンドは全て使えます。

eval "$(hub alias -s)"

いきなりコマンドを置き換えるのが少し気持ち悪い方はやらなくても良いでしょう。hubって直接打てばいいだけですし。

特に便利なコマンド

hubには独自のコマンドがかなりたくさん用意されていますが、個人的に好きなコマンドを紹介していきます。
alias設定している前提でコマンドを載せています。alias設定していない場合はgitをhubに置き換えて実行してください。

GitHub上のリポジトリを見る

現在のリポジトリをGitHubで見ます。 地味に一番便利かもしれません。

$ git browse

Pull Requestを出す

普通はGitHubのWebページでPull Request操作をすると思いますが、これもhubコマンドで一発です。
今回は省略しますが、オプションを使ってマージ先の選択やissueとの関連付けなどもできます。

$ git pull-request #現在のブランチからmasterへのPull Requestを作成

cloneする

素のgitコマンドでは完全なURLを指定してcloneしますが、hubではかなり省略した書き方ができます。

$ git clone github/hub

#自分のリポジトリなら更に省略できます。
$ git clone myrepo

Pull Requestから直接checkout

Pull Requestを出しているブランチを直接チェックアウトできます。 こちらも地味にかなり便利。

$ git checkout https://github.com/defunkt/hub/pull/73

Pull Requestをマージ

Pull Requestをマージできます。
checkoutやこれもマスターすれば、GitHubを開くことはかなり少なくなると思います。

$ git merge https://github.com/defunkt/hub/pull/73

GitHub上でdiffを表示

GitHub上でdiffを見ることができます。
このコマンドに関してはdiffではなくてcompareなので少し覚えづらいのがつらいところです。

$ git compare before_branch..after_branch

GitHub Enterpriseを使ってる人は

ホストをデフォルトのgithub.comから変更しましょう。（なかなかいないとは思いますが...。）

$ hub config --global hub.host hostname

$ hub config --list --global #設定を確認

今さら聞けないgit pushコマンド

git

id:koogawaさんのgitの記事を読みました。
これを読んでそういえばみんな知ってるのかなと思った点があるので書いておきます。

取り上げるのはgitのpush周りのお話です。
（これ以降の記事中のリモートは全てoriginとします。）

このコロンは何？？

リモートブランチの削除で以下のようなコマンドを実行すると思います。

git push origin :hoge

コロンが付いていますがこのコロン正体、正しく説明できますか？

実用Git

実用Git

  • 作者: Jon Loeliger,吉藤英明(監訳),本間雅洋,渡邉健太郎,浜本階生
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2010/02/19
  • メディア: 大型本
  • 購入: 7人 クリック: 287回
  • この商品を含むブログ (44件) を見る

pushコマンドの実体

普通、ローカルブランチをリモートに反映する際のコマンドはこんな感じです。

git push origin hoge

実はこのコマンド、省略されていることをご存知ですか？？
省略される前のコマンドは以下のとおりです。

git push origin hoge:hoge

コロンが出てきました！！これはどういうことなのでしょうか。

実は以下のような意味になります。

ローカルのhogeブランチをリモートのhogeブランチにpush！です。

コマンドに落としこんでみましょう。

git push {ローカルのhoge}:{リモートのhoge}

２ヶ所あったhogeは前者がローカルブランチ、後者がリモートブランチです。
（git push origin hogeはリモート・ローカルのどちらもhogeを指定する、という省略した書き方だったのです！）

これさえわかれば、例えばこんなことも。

git push origin master:test

ローカルのmasterブランチをリモートのtestブランチにpushしています。

ローカル作業中に間違えてmasterブランチでコミットしていた！といった場合に使えそうです。
（ローカルでブランチ整理してからpushするほうが安全そうではありますが...）

でブランチの削除って結局...？

では最初のリモートブランチ削除コマンドをもう一度見てみましょう。

git push origin :hoge

ここまでを理解していただいていればピンとくるのではないでしょうか。

そうです。実はこのコマンド、以下のような指定です。

git push origin {何もない！}:{リモートのhoge}

「何もないものをリモートのhogeにpushする ＝ hogeの存在を何もないものにする ＝ hogeを削除」です。

スッキリですね！！