bootstrapのGettingStartedについてメモ
Download
- Bootstrap
カスタマイズのためのLessやSass関連のファイルは入っていない
distというフォルダー。
- Source code
Lessによるカスタマイズのためのファイルが入っている。
LessからCSSを書き出すとdistというフォルダーに書き出される - Sass
Sassによるカスタマイズのためのファイルが入っている。
これはまだ試していないのでわからない。
Compiling Css and JavaScript
LessやSassをCSSに書き出すのにGruntというものをインストールする
手順(macの場合)
node.jsをインストールする
ターミナルを開いて
brew update
brew install nodebrew
nodebrew install latest
npm install -g grunt-cli
と打ち込んだらエラーがでた。
sudoがいるのかと思い
sudo npm install -g grant-cli
としてみたがやはりエラー...よく見たらスペルが間違っていた
grantじゃなくてgruntだった；
sudo npm install -g grunt-cli
無事にインストール
あとはブートストラップのフォルダに移動してgruntコマンドを実行する
cd bootstrap-less
移動して
試しにdistコマンド（このじてんでなんのコマンドかわかってない；）
grunt dist
エラーが出た
他のコマンドも試す
grunt watch
エラーが出た
Fatal error: Unable to find local grunt.
何かを忘れているっぽい
調べるとローカルにグラント関連ファイルがないということなので
入れてみた
npm install grunt
インストール完了
もう一度gruntコマンドを試す
grunt dist
エラーが出た
まだ何か忘れているっぽい。
bootstrapのGetting Startedを見直す
- Navigate to the root
/bootstrap/directory, then runnpm install. npm will look at thepackage.jsonfile and automatically install the necessary local dependencies listed there.
bootstrapフォルダーで npm installすればいいのかな、ということで
npm install
インストール完了
3度目の正直！gruntコマンドを試す
grunt dist
やっと成功！
ちなみにgrunt distは
grunt dist (Just compile CSS and JavaScript)
Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.
といっても英語よくわからないけれど
compiledはLessをCSSにかきだすことか？
minifiedは圧縮してくれるということのようなきがする
jsファイルにも実行されるみたいだ。
いろいろ試してみよう
grunt watch (Watch)
Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
こっちはSassを触っていたのでなんとなくわかる。
Lessファイルを編集して保存したら自動でCSSを書き出してくれる
こっちは保存するだけの作業なので楽。
ちょっと書き出しが遅い気もする...
ああ、もう１時だ...
いくらかbootstrapに慣れてきた。
最初は一つ一つやっていこうとおもって
ヘッダーを決めてしまおうと思い作業を始めたが
全然上手くいかない。
田中さんに聞いたらまずは全体のレイアウトを決めたほうがいいということだったので
細かいデザインは置いておいて、そっちの方に作業を集中することにしたら
だんだんと感覚がつかめてきた気がする。
意外とかかったラフの制作
今日は担当の方がいなかったので
簡単なイメージを制作した
一つはブラウザで動くもの
もう一つは画像によるもの
商品画像のレイアウトがPHPと絡んでいそうなので
どこまでいじれるのか聞きたかったけれども
また明日聞こう。
co-edoの田中さんからBootstrapを使えるようにしておくといいという話が
あったので今日のうちにざっくり頭に入れておこうと思う。
レスポンシブにはほとんど使われているものだそうなので
そう言われるとすごくやる気が出てきた。
ECサイトの制作が始まった! in co-edo
今回つくるサイトはiPhonケースなどの商品を販売するサイト！
しかもそれは登録しているデザイナーさんがデザインしたもの
ぼくのまわりには個人でいろいろなものを作っている人が多いので
こういうサイトは非常に面白いと思っていて
個人でやってるデザイナーさんや、作家さんの作品が検索できて
買い物できるサイトがあったらなんてことを考えてしまいます
話は戻って
グループワークになるので、個人で制作するのとはちがった
難しさがある。全体像の把握と、問題点、作業の進め方を整理しないと
なかなか進まないのかもしれない
デザインを考えるときに２つある気がしている
情報をどう整理してまとめるかという構造的なデザインと
それをどんなイメージでどうレイアウトするかというデザインで
2つを混同すると整理がつかなくなるかもと帰りの電車で思った
イメージ画も全員で共有するのにはやはり必要なのかとも思ったがどうなんんだろうか？
また話は変わって
qiita始めました！
http://qiita.com/SeijiNishiwaki/items/a1823ae62b4b906a04eb
忘備録に使っている人もいれば、かなりマニアックなことを書いている人もいて
結構面白いと思います。
今はスクリプト関連ばかりアップしてるので
HTML5とかCSS3関連のメモも整理してアップする予定です
企業実習1日目
午前中は今日の作業の説明。
午後はコワーキングスペースとco-edoについて調べて発表。
自宅では仕事に集中できないときに
自分のミニオフィスとして利用出来る共有スペース
使い方はドロップインと会員登録があって
会員は月1~2万円くらいで利用可能
ドロップインは週末だけ利用したいと言った一時的な利用で
1日1000円程度て借りることが出来る
個人で仕事をしている人が多様な職種や業種から集まってくるので
そのビジネス交流のために利用する人もいる
互いに刺激し合うことがコワーキングスペースを利用する一つの理由かもしれない
オフィスの住所としての利用もできるので
ビジネスでの郵便物の宛先として自宅の住所よりもはくがつく
気軽なシェアオフィスとしての利用
フロアをパーテーションでしきったエリアを
小さなシェアオフィスとして利用することも可能
一人でオフィスから何から全部揃えて起業すると
その手続きや、コストの面で大変なので
もっと気軽に安くオフィスとしての環境を手に入れるために
コワーキングスペースをつかう
シェアハウスのオフィス版という感覚
co-edoエキスパートソーシング
スターエンジニア、スターデザイナー
（技術力の高いフリーのエンジニア,デザイナー）を結びつけて
一つの開発チームとして仕事を受注する仕組みがある
co-edoの運営側は発注者とフリーのエンジニアやデザイナーの間に入って
発注者側目線で話がうまく進むようにサポートしてくれる
というのが僕の調べた結果。
しかし他の人の意見を聞いて面白いと思ったのは
コワーキングスペースというもの自体がどんどんと変化している
ということ。現在進行形でいろいろな人が出入りすることで形作られる場
なんだということ
５階にいる方がその雰囲気がわかる気がする
いろいろな人が出入りして時々仕事のやりとりをしていたり
して、活気があって交流しやすいような空気があって
いいなと感じた。
