LESSを使ってbootstrapをもっとデザインしてみた
またまた、twitterbootstrapネタです。
twitterbootstrapはデザイン初心者でも簡単にそれらしいデザインのものをつくれてしまうという賜物です。しかし、標準装備だけだとどうしても限界があります。bootstrap自体はCSSなのでベタで書き換えてもいいのですが、あまりかっこ良くないし、コードが長くなってしまい、可読性が落ちてしまいます。
そこで、もっと自由度を広げてくれるのが「LESS」です。
LESSとは
LESSはCSS拡張メタ言語です。LESSを使うことによってコードが複雑になることを抑え、かつ簡単にデザインすることができます。
コードの書き方はほとんどCSSと変わりませんが、変数などの概念が入ってきます。では、以下のような手順で実際にLESSを使ってデザインしていこうと思います。
- LESSの導入方法
- LESSのコンパイラ環境を整える
- LESSファイルの編集
- 確認
ちなみに、bootstrapのCSSファイルはLESSによって自動生成されています。
LESSの導入方法
それでは早速、LESSを導入して以下の写真のようなサイトに色をつけていこうとおもいます。
- こちらのgitからzipファイルをダウンロードします。
- bootmaster->lessに移動すると以下の写真のようにたくさんのlessファイルがあることを確認できると思います。今回編集するのはjumbotron.lessです。
_
LESSのコンパイル環境を整える
LESSはCSS拡張メタ言語なので、LESSファイルをコンパイルしてCSSファイルを生成してあげなければいけません。
- 該当するOSを選択してコンパイラをダウンロードしてください。
MAC OS
Windows - ダウンロードが終了したらコンパイラを起動してください。そうすると以下のようにディレクトリを選択する画面が出てくると思います。
- 先ほどダウンロードしたbootmasterの中のlessディレクトリを選択します。そうすると以下のようになると思います。
LESSファイルの編集
jumbotron.lessの編集
では、まず下の赤枠の部分から編集していこうと思います。背景色がグレーというのはどうにもいただけないので色をかえてみましょう。
- 編集対象LESSファイルを開く
jumbotron.lessファイルを開きます。開くと以下のようなコードが出てきます。ほとんどCSSのコードであることがわかると思います。 - 変数に値を格納する
このままだと、コンパイルをしても変数に値が入ってないと怒られてしまうので変数に値を入れる作業をします。今回はjumbtronの背景色を変え、立て幅もひろげてみます。コードは以下のような感じになります。 - コンパイル
コードの編集が終了したので、コンパイルしてみます。コンパイルの方法は上書き保存をした時点で自動にコンパイルされるはずです。
コンパイルがうまくいくとboot-master->lessディレクトリの中にjumbtron.cssという新しいファイルができるとおもいます。
このファイルをbootstrapが入ってるCSSディレクトリの中に移動すると使えるようになります。 - 確認
使用するに当たって気をつけるべき点
実際に使ってみて、注意点があるのであげていきたいと思います。
- テンプレートファイルの変数には全て値が入ってない
gitからダウンロードしたLESSファイルをみると変数はいたるところに出てるのですが、変数は宣言されてないし、値も代入しなければならないため、自分自身で変数を宣言しなければなりません。
まとめ
LESSを使ってCSSを効率的に作成する手法をやってみました。個人的な意見として、色を変えるくらいの簡単な作業であるならば、直接CSSをいじった方が早いとおもいます。
StartupWeekend Tokyoに初参戦してきた話
11月22〜24日の３日間でStartupWeekend Tokyoに参加してきました。
StartupWeekend Tokyoとは
週末５４時間でビジネスを実現させる企業支援イベントです。参加資格は、「世界をより良くかえていくために行動できること」と、あとは年齢、性別、国籍、職種など関係ありません。くわしくはこちら
今回は六本木の森タワー27階Googleさんのオフィスを使って行いました。夜景はきれいだし、六本木だしでなんか最高の気分でしたw
あと、NHKの取材が入っていて、三日間ずーっとカメラを回していました。私のところにもひっついて取材してきたのでもしかしたらテレビでるかもw
では、具体的に何をするのか
今回のStartupWeekend Tokyo(以下SWT)では大きく以下のようなアジェンダでプログラムを進めていきました。
- 自分のアイディアをピッチ
- 全員で投票を行い、チーム分けをする
- チームに分かれてMVPを作成する
- 最終日にチームごとに発表して一位を決める
勘違いしてほしくないのは、SWTはビジネス・コンテスト、ハッカソンではないということです。チームで考案したプロジェクトが本当に世の中のニーズに合っていて実際にどうだったかを確かめて、起業の一歩を踏み出すことができるのがStartupWeekendです。
どうやって参加したのか
SWTはすごい人気のイベントで１００人という枠に１７０人くらいの応募があるような超人気イベントです。
私は高専ベンチャーという高専生を応援してくれる団体が行っている特別な枠で参加することになりました。詳しい情報はこちら。
宿泊施設も提供してくれるとのことで、ほかの高専生２人とシェアハウスで文字通り２４時間一緒に作業に集中できる環境作りまでしてくれました。
自分たちは何をつくったのか
自分たちは「Cloud Clothes」というサービスを考案しました。
サービスの紹介ページはこちらにありますが、一言で説明すると
服を一週間分レンタルして、１週間後に洗濯もしないで返せる
というサービスを考えました。
このサービスでは一人暮らしの私服で仕事にいけるような男性をターゲットにしています。そういった一人暮らしの人から毎日の服選び・洗濯を代行してあげようというサービスです。
下の写真はチームのメンバー＋メンターと「Cloud Clothes」のロゴです。
３日間を振り返って
１日目 チーム作りとブレスト
残念ながら、自分がピッチした意見は採用されることはなかったため、どこかのチームに入る予定だったのですが、おもしろそうだなと思ったチームには既に８人も人がいたので、一緒にこのイベントに参加した高専生二人と私たち３人をこのイベントに招待してくれた高専ベンチャーの代表の人とチームを作ることになりました。
４人ともアイディアがパッとしなかったため、シェアハウスで徹夜でブレストしました。みなさんブレスト初心者だったため、ながながとだらだらとアイディア出しに時間を使ってしまいました。。。
上手にブレストできるようなスキルを備えた人になりたいですね。。。
２日目 アイディア決定と作り込み
徹夜でブレストした結果、おもしろそうなアイディア４つ出来上がりました。午前中にはその４つの中で一番どれが欲しいかというのを街頭アンケートなどを経て決定しました。
当初私たちは「イルミネーション」をつかったサービスを作る気でいたのですが、
その日の１４時からコーチにアドバイスをもらったところ「はぁ？なにそれくそじゃん」的なことをいわれてしまい、
チームは前日寝てないということもあって意気消沈しきってしまいました。
そこでメンターさんに相談しにいっていろいろあーだこーだしてるうちに４つのアイディアに入ってた服のレンタルサービスについてもっと考えてみようということで決定しました。
あとは、どういう構成にしていくのか、本当にニーズがあるのかという確かめ、どういったビジネスプランにするかなどを考え込みました。
また、疲れていたせいもあったと思うのですが、パソコンを落としてしまい下の写真のように壊れてしまったという大事件もおこってしまいました。
３日目 最終発表に向けて
２人ずつに分かれて、一方は発表資料作成、もう一つは街頭調査を行いました。
街頭調査班はアーリーアダプターを見つけたいという思いもあり、新宿と渋谷のコアーキングスペースに行き、聞き込み調査を行いました。
午後からはその結果を発表資料を手なおしする予定だったのですが、いろいろな問題から発表資料ができあがっておらず、発表１５分前にできあがったという超ギリギリでした。
振り返ってみて
私は夏休みに大江戸ハッカソンというイベントに参加してきました。
https://www.goodfind.jp/engineer/special/oedo-hackathon
このイベントは学生によるハッカソンイベントなのですが、このときweb言語を何もしらないまま参加してしまったため、後悔ばかり残ってしまう結果となってしまいました。
今回のイベントではrailsなどいろいろな言語をある程度触れるようにしていったりプロジェクトの進め方とかについて勉強していったため、その時の反省をいかせたかなとおもいました。
プロジェクトについても、なかなかおもしろいものができたなと自負もしてますし、これならいけるぞというよくわからない自信もあります。
ただ、悔しかったのが今回一番の敗因といっても過言ではないせっかく高専生３人が集まったのに発表までに見せれる状態のものが出来上がったということです。技術力を十分にみせることができなかったことはすごく悔しかったです。
懇談会
SWTにはハッカーだけでなくコンサルタントの人やマネージャーの方々などハッカーでない人たちがたくさん参加していました。
当初ハッカーがメインのイベントだと思っていたのですが、どちらかというとハスラーの方がたくさん参加していました。
そのため、普段の生活では接することのない人たちと接することで全然違う世界や価値観の違いなど本当にたくさんの刺激をうけることができました。
総じて
結果として賞を受賞することはできませんでしたけど、ここでしか味わえない体験や仲間をつくることができてとても楽しく、とても充実した三日間を過ごすことができました。
今まで私は技術は技術、ビジネスはビジネスといった具合に独立の存在としてとらえがちでしたけど、SWTを経てその両者に密接な関係があることを身を持ってしることができました。
どんなに技術的にすばらしいサービスであってもビジネスプランがしっかりしていなければなんにもならないし、
ビジネスプランがすばらしくても”もの”がなければ何にも評価されない。
ということを身をもって知りました。
SWTを経て自分に足りないなと思ったことを下に書き綴っていきます。
- ブレストなどのファシリテーションスキル（？）
- 社会人として未熟
- チームワーク
- 技術力
- ビジネスの知識
- 英語力
とかとか、ほかにもいろいろあります。
まだまだ勉強しなければならないことはたくさんあって今のところ何をとっても中途半端な状態であることを再認識することとなりました。
しかし、SWTに参加しなければ、そういったことにすらきづけませんでした。
謝辞
自分たちのサービスにいろいろアドバイスをくれたメンターの方々
食料やドリンクといった雑務の準備をしてくれたスタッフの方々
場所を提供してくれたGoogleさん
シェアハウスのみなさん、その他関係者
自分をすばらしいイベントに招待してくれて本当にありがとうございました。
日常よくみるケーブルの名称とその特徴についてまとめてみた。
自分は主にAndroidの開発をしています。開発する際にPCと端末をUSBケーブルでつなぐのですが、USBマイクロの先端に「B」と書いてあることに気づきました。
普段何気なく使ってるケーブルでも名称がわからなくて「このケーブル」とかみたいな曖昧な感じにしていたので今回は、身のまわりにある下のようなケーブル・端子について調べてまとめてみました。
今回するケーブルとその特徴の表を以下に示します。
| ケーブル名 | 特徴 | 実装端末 | 寿命 |
|---|---|---|---|
| USBマイクロ | データ通信 | スマフォなど | 10000 |
| USBミニ | データ通信 | 一昔前の 電子辞書・デジカメ |
1000~5000 |
| USBスタンダード | データ通信 | PC、プリンタなど | 寿命なし |
| IEEE1394 | 高速データ通信 | 一部のPC | 寿命なし |
| 光学型プラグ/光学型ジャック | オーディオ信号 | AV機器、デスクトップPC | 寿命なし |
| VGAケーブル | 映像信号 | PC、プロジェクタ | 寿命なし |
USBマイクロ
USBマイクロには「A」と「B」の2種類があります。以下にそれぞれの特徴を書いていきます。
USBマイクロA
PCとデジカメや電子辞書、スマートフォンなどの機器と繋ぎ通信を行うためのものです。差し込み回数(寿命)は10000回です。
USBマイクロB
USBマイクロAと用途は同じである。USBマイクロBの方がUSBマイクロAよりスマートに出来ているため、こちらの方が多用されています。
USBミニ
USBミニにも「A」と「B」の2種類があります。
USBミニA
USBマイクロと同じようにPCと小型電子機器と接続し、通信を行うためのものです。差し込み回数(寿命)は1000回です。
USBミニB
用途はUSBマイクロと同じです。ミニAと比べ差し込み回数(寿命)が5000回になりました。
USBスタンダード
USBスタンダードにも「A」と「B」の2種類があります。また、USB1.0〜USB3.1まで種類があります。一般的にこの３つの見分け方は以下の通りです。
USBのバージョンの見分け方
USBには1.0〜3.1まで分かれています。それぞれの見分け方を以下に示す。
方法１ 端子の数で判断する
この方法は一般的な見分け方だとおもいます。しかし、この方法だとUSB2.xとUSB1.xの見分けることはできません。
方法２ パッと見の見分け方
この方法は自分の帰納的な見分け方です。USBの先端の色によって見分けます。
- USB1.x → 白色
- USB2.x → 黒色
- USB3.x → 青色
USBスタンダードA
これは皆さんが一番目にするUSBの形だとおもいます。USBメモリなどはこの形ですね。
USBスタンダードB
プリンタなどで使用されています。
IEEE1394
データ転送を主目的にされたケーブルであり、高速な伝送速度です。なので、動画のやりとりなどに適しています。4ピン、６ピンなどがあります。
光学型プラグ/光学型ジャック
オーディオ信号をデジタルで伝送するインターフェイスです。このケーブルには光ファイバーが使われていて以下のような特徴があります。
- 電線と比べて電気的ノイズが少ない
- 外からのノイズに強い
VGAケーブル
パソコンとディスプレイなどをアナログ接続するためのケーブルです。
参考文献
端子やケーブルの画像
BUFFALO http://buffalo.jp/products/connect/sameport/#usb
ケーブル＆コネクタ図鑑 http://www.atmarkit.co.jp/fpc/cableconnecter/indexpage/index.html
VGA端子(アナログRGB) についてメモ
http://blog.goo.ne.jp/limited_terra/e/d940240558f7cd085b0d81a73164e6f8
File:UsbMicroA.jpg
railsの小技をあれこれ
railsを始めて日々勉強しています。
ここ数日でまなんだいろいろをメモっていこうとおもいます。中には小技といえないものもあるかもしれませんが。。。
下の項目についてメモっていこうとおもいます。
- bootstrapを使ってみる
- DBのテーブルに列を追加する。
bootstrapを使ってみる
railsでbootstrapを使う方法を紹介していきます。
- Gemfileに以下の項目を追加する
gem'less-rails'gem'twitter-bootstrap-rails'gem'execjs'
- Gemfileから以下の項目を削除する
gem'sass-rails'
- bundle installをしてから以下のコマンドを使ってbootstrapの設定をする
$ rails g bootstrap:install$ rails g bootstrap:layoutapplication
DBのテーブルに列を追加する。
テーブルを作るのはrails generate model ~~で出来るのですが、列を追加したいなと思ったときの方法を紹介します。
まず、コマンドラインから以下のコマンドを打ち込みます
rails generate migration AddXXXToYYY カラム名:データ型
この「AddXXXToYYY」のXXXには加えたい列の名前、YYYにはテーブル名を指定します。XXXについては適当な名前でもかまいません。
最後に「rake db:migrate」を実行すると無事に列が追加されます。
Ruby on Rails | scaffoldとはなにか
最近、Ruby on Rails の勉強を始めました。しかし、あまりにも魔法のようなことをやりすぎていてしっかり理解することができなかったので、少しずつrailsの謎をひも解いていこうと思います。まずはscaffoldについて謎を解明していこうと思います。
scaffoldとはなにか
railsで新しくプロジェクトを作成するとどの文献をよんでも次のコマンドを使っています。
rails generate scaffold ～～
では,scaffoldとはなんなのでしょうか。
scaffoldとはアプリケーションの基本的な機能の一覧、詳細、新規作成、編集、削除を行うモデル、コントローラー、ビューすべての雛形を生成してくれるgenerateコマンドです。
実際のコマンド
自動で生成してくれるのですが、モデルだけ、もしくばコントーローラだけなどのそれ単体の雛形を生成したいときもあると思います。下の表はgerate以下のコマンドとそれに対応する自動生成してくれるファイルの対応表です。
| コマンド名 | コントローラー | ビュー | モデル | マイグレーション |
|---|---|---|---|---|
| scaffold | ○ | ○ | ○ | ○ |
| scaffold_controller | ○ | ○ | × | × |
| controller | ○ | ○ | × | × |
| model | × | × | ○ |
○ |
| migration | × | × | × | ○ |
TechCrunch Tokyo 2013に行ってきました！
TechCrunch Tokyo 2013とは
TechCrunchJapanが主催するイベントです。このイベントでは主に下記の三つのセッションがあります。
- 偉い方々のトークセッション
- スタートアップバトル
- ハッカソン
この3つのセッション以外にもスポンサーブースやスタートアップデモブースなどがあります。今回はスタートアップバトルに出ていたプロダクトの紹介をしていこうかなとおもいます。
イベントの詳細はこちらです。
気になったプロダクト
スタートアップバトルの製品の中から特に気になった４つの製品を紹介していきたいと思います。
- VirtualCycling
- rankak
- ring
- planBCD
VirtualCycling
Virtual Cyclingはフィットネス自転車に接続することで世界中を仮想敵にサイクリングできるようになるクラウド連携型ハードウェアです。このプロダクトでは以下の問題を解決します。
以前、僕は友達と話している時にランニングマシーンで仮想世界を走れたらいいのにねっていう話をしてました。この製品ではサイクリングですが、実際にプロダクトとして作られてることにワクワクしました。ランニングマシーンでもでてきたらいいのになー
rinkak
rinkakは３Dプリンターを用いたマーケットプレイスです。「ものつくり」をする際に商品開発 → 製造 → 販売 → 発送という4つの段階を踏まなければなりません。しかし、その費用は莫大で軽い気持ちで行うことは到底無理でした。それを実現することができるのが「rinkak」です。公式サイトはこちら
良かった点
- だれでも簡単に絵を書くだけで製品にすることができる。
- 低コスト
懸念する点
- 電子回路などができない
- 製品にできるくらいの絵をきちんとかけるか
と、まぁいろいろ疑問は残りますが、３Dプリンターの可能性を広げてくれるすばらしいとおもいます！
Ring
Ringは指輪型のウェアラブルデバイスです。上の動画を見ていただければわかるとおもいますが、あらゆるものを指一本のジェスチャーで完結できます。公式サイトはこちら
Ringは先日行われたJapanNight、TechCrunchでも優勝を果たしていました。デモでは有線デバイスで実際に使われていました。
良かった点
- SF映画のような未来のデバイス
- どんなものでもジェスチャーでできるすばらしさ
懸念する点
- 電池はどうなっているのか
- 受け側の端末との関係はどうなっているのか
- デモを見るかぎり完成形にはまだ遠い(？)
などとたくさんの問題は残ってるとはおもいますが、是非とも実現してほしいなと思います。
planBCD
planBCDはWebサービスのUI改善を行うA/Bテストの管理プラットフォームです。公式サイトはこちら
良かった点
- A/Bテストが簡単にできる。
- UIを作ってもらえる。
- サービス開始3ヶ月でめちゃめちゃ稼いでる
懸念する点
- 学生には値段が高くて手がでない。。
実際につかってみたいなとは思うのですが、なにより値段が高いため自分には使えないというのが率直な感想ですね。もうすこし安かったらぜひ使ってみたいです！
総括
紹介した製品以外にもおもしろい製品がたくさんあったのですが、お金を管理する系のサービスとか自分とは無縁の世界すぎてよくわかりませんでしたw。
やはり、どこのチームも発表がうまかったですし、質疑応答もしっかりできていてとってもすごかったです。
なにより、会場は広いし、ご飯はおいしいしで夢のような2日間を過ごさせていただいてとても勉強になりましたし、幸せな思い出をつくることができました。
Tech Crunch Tokyo 2013でもらったもの
最後に今回のイベントでもらった沢山のものを紹介していきますw
この他にも
- 夜御飯×２、昼ご飯
- 水4本
- 同時通訳レシーバー
などととても沢山のサービスをうけとりとっても満足ですw
Android開発 | jqPlotを使ってグラフを描いてみた
JavaScriptを用いてAndroidアプリ上にグラフを描いてみようと思います。
ライブラリ選び
JavaScriptにはデータを可視化するためのグラフ用のライブラリ、プラグインが数多く存在します。有料のものもありますが、多くは無料で提供されていて、かつかっこいいデザインのものが沢山あります。今回はその中でも以下の2つのライブラリを使ってみました。
- Highcharts JS
- jqPlot
ちなみに、上記の二つのライブラリはJQueryを利用しています。
Highcharts JSを使ってAndroidアプリにグラフをいれてみる
Highcharts JSとは
Highcharts JSはJacascriptで実装されたグラフ用のライブラリです。下に主な特徴を列挙します。
- カッコイイグラフがかける。
- アニメーション付き
- グラフをjpegなどのexport機能付き
- リファレンス・サンプルコードが豊富
- グラフの種類がたくさんある
- プロット点の詳細情報表示
下の写真はサンプルコードをそのまま引用したものですが、キレイに表示されるのが見てわかると思います。
本当はアニメーションがついてたり、プロットされた点にカーソルを合わせると詳細データがでてくるのですが、スクショだけではわかりませんね。。。
Androidに組み込んでみる。
High charts JSがかっこよくて気に入ったので、早速Androidに組み込んでみました。が、結論からいうと失敗しました。
以下のような手順で行いましたので一応簡単に説明していきます
jqPlotを使ってAndroidにグラフを挿入してみる
jqPlotとは
jqPlotはグラフを書くためのJQueryのプラグインの中の１つです。下にjqPlotの特徴を列挙していきます。
- ライブラリの容量が少ないためとても軽い
- グラフの種類が豊富
- プロット点の情報詳細表示
- リファレンス・サンプルソースがまぁまぁ豊富
High charts JSほど魅力はありませんが、軽いというのはとても強みであるとおもいます。jqPlotで描いたグラフは以下のような感じになります。
Androidに組み込んでみる
結論からいいますと、成功しました。以下に手順を示していきます。
- jqPlotをダウンロードする。
公式サイトからダウンロードして、適当なところに展開します。 - HTMLファイルを作成する
展開したファイルの中から以下の４つのファイル・ディレクトリを最低限読み込む必要があります。
以下に今回のサンプルコードをのせます。以下のサンプルコードと上記の4つのファイル・ディレクトリをassetsの下にいれます(下写真参照)
- xmlファイル、javaファイルの編集
xmlファイルには先ほどと同様にwebViewだけを配置します。javaファイルも上記のソースのうちweb.loadurlの引数を以下のようにかえるだけです - 実行
表示までにすこしタイムラグがありましたが無事に表示されました。
まとめ
今回はJavascriptを使ってグラフを表示してみました。ずいぶん前にAchartEngineを使ってグラフを表示してみたことがあるとおもうのですが、個人的にはこちらの方がいろいろと自由がきくため、JavaScriptのグラフの方をおすすめします。
