CSSフレームワーク『Rigging』を作ってみました。

プログラミング

WebアプリケーションのUI作成のためのCSSフレームワーク『Rigging』を作ってみました。
http://akira-miyake.github.io/Rigging/

フレームワークとはいっても、CSSリセットやタイポグラフィ、ボタン等の基本的なコンポーネントのスタイル定義とシンプルなグリッドシステムくらいの軽めな感じ。
アプリケーションのデザインに合わせて、基本となるスタイルは変数でカスタマイズ可能に、プロジェクト固有のコンポーネントを作るときになるべく邪魔しないように、という思想で作っています。

また、スタイルガイドの検証として、Docsの作成にFrontnoteを利用してみました。
最初はgulp-kssを試してみたのですが、//のコメントと/ /のコメントが混ざるとうまく動かなかったり、章番号をつけなきゃいけないのが煩雑だったりでFrontnoteを使うことに。
gulp-frontnoteを使ってgulpで簡単にスタイルガイドの作成ができました。

スタイルガイドの部分は別プロジェクトに切り出して、もう少し汎用化するかも。
マークアップしながらデザインして、それと一緒にスタイルガイドも出力して、実際にアプリケーションを開発するエンジニアにわたす、みたいなことができればと。

色を扱うJavaScriptライブラリ「ColourJS」

プログラミング

新年明けましておめでとうございます。
転職して3ヶ月がすぎ試用期間が終了しました。
2015年もぼちぼち頑張っていきたいと思います。

年末年始はギリギリまで仕事だったり大阪の実家に帰ったりでけっこうドタバタだったのですが、ColourJSという色を扱うJavaScriptライブラリを作成しました。

ColourJS

hexのカラーコードやRGBやHSVなんかの表色系の座標オブジェクトをから、「色」を表すcolourオブジェクトを得ることができます。
colourオブジェクトはRGBからHSV、CIELabなんかの座標を返すメソッドを持っていたり、明度や色相を操作したオブジェクトを生成するメソッドを持っていたりします。
生成したオブジェクトは基本的にイミュータブルで、新しい色オブジェクトを生成して返す仕様になっています。
色の操作は基本的にCIELab表色系をベースに行っているので、見た目の感覚に沿った色の操作ができるようになっています。

ざくっと作った感じなので、変換式まわりに不備があるかもしれませんが…ぼちぼち手を入れていく予定です。

MacへのAndroid Studioのインストール

プログラミング

1月からのプロジェクトで、Androidアプリを開発することになりそうなので開発環境構築のメモ。
12月に入りAndroid Studio 1.0が正式リリースされ、Googleは今後Eclipse向けのサポートを終了する意向のようなので、Android Studioを素直にインストールします。

Macの概要 * OS X Yosemite 10.10.1 * MacBook Air(13-inch, Early 2014) * Oracleのjdk1.8.0_25をインストール済み

ダウンロードとインストール

  1. 公式ページからdmgファイルをダウンロード。
  2. dmgを展開し、appをAplicationsフォルダに移動 以上

Android Studioの起動

appを起動しようとすると、「Java not found」のアラートが表示され起動せず。
どうやらIDEの動作にJava 6を使用しているためのよう。
$STUDIO_JDKで7や8のSDKを使用することもできるけれども、フォントレンダリングがうまく動かないかもねー的なことが書かれていたので、Java 6をインストールすることに。
ここからdmgをダウンロードして、JDK 6をインストール。
Java 6がインストールされていれば、IDEはそれを自動で選択して使うようです。

Herokuの勉強

プログラミング

今のプロジェクトではサーバサイドをほとんど触ってないけれども、使ってるアドオンとかのメモと参考になりそうなリンクのまとめ。

heroku全般

Add-ons

構築

Xcode6.1でSwiftのコード補完が効かない場合

プログラミング

このページを参考に。

  1. Xcodeを終了
  2. メモリのキャッシュをクリアするためにPCを再起動
  3. ~/Library/Developer/Xcode/DerivedDataを削除
  4. ~/Library/Caches/com.apple.dt.Xcodeを削除

これを行った上でXcodeを立ち上げると、無事にコードの補完がされるようになりました。

rbenv利用環境でのCocoapodsのインストール

プログラミング

久しぶりにiOSアプリの開発をしようと思います。 Yosemiteをクリーンインストールをしてまっさらにしたので、Cocoapodsのインストールから。 新しい環境ではrbenvでRubyのバージョン管理をしているので、Cocoapodsもその管理下に入るようにインストールする。

Cocoapodsのインストール

コマンドラインで以下のコマンドを実行。

$ rbenv exec gem install cocoapods

インストールが完了したら、rbenvのrehashを。

$ rbenv rehash

これで、pod --versionでバージョンを確認できるはず。 次のコマンドでCocoapodsのインストールされた場所を確認できる。

$ rbenv exec gem which cocoapods

Cocoapodsのセットアップ

インストールが完了したら、あとはデフォルトの手順通り。 セットアップを実行して、利用可能に。

$ pod setup

Setup completedと表示されれば、準備完了。

MacBook Proの開発環境の構築

プログラミング

この一週間くらいで行った作業について

Ruby

今までほとんどRubyを使ったことはなかったけど、今のプロジェクトでがっつり使いそうなのでプライベートのPCにも
Macはデフォルトでインストールされているけど、rbenvで最新バージョンをインストール

まずはrbenvとruby-buildのインストール

$ brew install rbenv
$ brew install ruby-build

インストール可能なバージョンを確認

$ rbenv install --list

現在の最新バージョンの2.1.3をインストール

$ rbenv install 2.1.3

デフォルトのバージョンを2.1.3に設定

$ rbenv global 2.1.3

続いてBundlerをインストール

$ rbenv exec gem install bundler

Heroku

プライベートでちょっと使ったことはあったけど、新しい会社ではがっつり使いそう
Herokuへの登録とかは以前に完了しているから、heroku toolbeltのインストールについて

herokuの公式ページからパッケージをダウンロードして実行

以下のコマンドを実行して、インストールされたことを確認

$ heroku version

herokuにアップロードするsshの公開鍵を生成

$ ssh-keygen

~/.sshに生成されたことを確認して、herokuにログイン

$ heroku login

ログインした段階では公開鍵は要求されない模様
試しにnode.jsのアプリを作成

$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started
$ heroku create

この段階で公開鍵が要求されたので登録

$ git push heroku master

Heroku上にアプリがデプロイされ、無事に起動

Node.js関連

yo

npmを使ってyoをインストール

$ npm install -g yo

プロジェクトでベースにしているジェネレータをインストール

$ npm install -g generator-gulp-ng

ジェネレートして、サーバを起動

$ yo gulp-ng
$ gulp

localhost:9000でアクセス可能