2014年2月13日木曜日

Gitlab6.4をApacheで動作させようとした際にProxyErrorとなる場合の対応

gitlab-recipes/install/centosを参考にCentOS6.4上にGitlab6.4をApacheで動作させようとした際にProxyErrorとなり、ログインが出来なかった。

ググってみたらこんなIssueがあり、以下を実行しろと。

$bundle exec rake assets:precompile RAILS_ENV=production

上記でProxyErrorがなくなり、無事ログイン画面が出ました。良かった良かった。

2014年2月8日土曜日

Redmine Backlogsのカード印刷(card printing)設定が有効化できない場合の対応

RedmineのBacklogsプラグインでストーリーカードを印刷出来る機能があるのですが、RedmineBacklogsプラグインの設定で何故かラベルの設定が出来ない状況になっていました。

BacklogのGithubで同様にはまっている人がBacklogs printable card labels cannot be configured といタイトルでissueを投稿しており、この状態だと印刷が出来ないので以下を実施する必要がありました。

$cd REDMINE_HOME/plugins/redmine_backlogs/lib/labels
$cp labels.yaml.default labels.yaml
$/sbin/service httpd restart

選択可能なラベルリストがlabels.yamlなのですが、最初に配置されているものは何も指定されていない為、選択が出来ませんでした。上記のように複数のラベルが記述されたlabels.yaml.defaultをlables.yamlに上書きし、Redmine再起動でラベルの選択が出来るようになりました。

出力されるストーリーカードに日本語がある場合に文字化けしてしまう問題は

Redmine BacklogsでストーリーカードをPDF出力する時の文字化けを防ぐ方法

で対応方法が記載されており、助かりました。

2014年1月27日月曜日

VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

Gitのリモートリポジトリを作る必要がありそうな感じだったので、試しにVagrantのProvisioning機能を利用してVM起動時にGitのリモートリポジトリを作るshellを作って試してみたのでその時のメモ。

前提条件

ホストマシーンはMacOSX10.9.1で、Gitはインストール済み
仮想環境はCentOS6.4を利用
仮想環境にGitのリモートリポジトリを作成し、ホストマシーンでcloneしたり出来るまでを実施

1.Vagrantのインストール

Vagrantを利用する際にはVirtualBoxが必要なので予めインストールしておきます。

Vagrantの公式サイトのDownloadからOSにあったVagrantをダウンロードしてインストールします。(たしかOK連打でOKだったはず)

2014年1月26日現在以下のOSのものが配布されているようです。

MacOSX(32bit or 64bit)
Windows(32bit or 64bit)
Debian/Ubuntu(32bit or 64bit)
CentOS/Fedora/Redhat(32bit or 64bit)

インストールが完了するとTerminalでvagrantコマンドが使えるようになっているはずです。

$vagrant --version
Vagrant 1.4.3

2. Vagrantを利用したCentOS仮想環境の構築

注意:Boxの取得は大きなファイルのダウンロードとなる為、通信速度が早い所で実施するのがおすすめです

Vagrantで任意のOSの環境を構築する際に対応するOSのBoxというものが必要となります。

入手可能なBoxの一覧はこちらから確認できます。

取得したいBoxのURLが分かったらvagrant box addコマンドを利用してBoxを取得します。ざっくりの書式は以下の通りです。

vagrant box add {title} {url}

詳細を知りたいときはvagrant box add -hで調べて下さい。

titleにはvagrantで保存するBoxの名称を記載します。例えばcentos6_4という名称でBoxを保存したい場合は以下のようなコマンドを実行します。

$vagrant box add centos6_4 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130731.box

ダウンロード完了後、vagrant box listコマンドを使ってBoxの取得が出来ているか確認します。

$vagrant box list
centos6_4 (virtualbox)

上記のようになっていればダウンロードが完了しております。なお、Boxファイルの実態は~.vagrant.d/boxesにあります。

3. 仮想環境のCentOSの作成、起動

準備が出来たのでいよいよCentOSの仮想マシンを作成します。

適当な場所にVagrant用のフォルダを作成し、移動します。

$mkdir -p ~/vagrant/centos64/
$cd ~/vagrant/centos64/

上記の場所でvagrant initコマンドを実行し、仮想環境で利用するBoxを指定します。先ほどダウンロードしたcentos6.4という名称のBoxを利用する場合には以下のコマンドとなります。

$vagrant init centos6_4

上記を実行するとカレントディレクトリにVagrantfileというものが作成されます。

中身を見ると分かりますが、このファイルの中で利用するBoxを何にするか記載してあります。

config.vm.box = "centos6_4"

また、その他仮想環境に関する設定情報などが本ファイルに記載してあります。

ちょっと話が逸れましたが、次にVMを起動します。カレントディレクトリにVagrantfileがある場所で以下のコマンドを実施します。

$vagrant up

少し時間が経つとVMが起動したことが分かります。

起動後、以下のコマンドでSSHログインが可能です。

$vagrant ssh

上記でvagrantユーザーでログインができます。簡単ですねー。

その他VMを操作するコマンドとしてはよく利用するのは、シャットダウンさせるvagrant halt、中断させるvagrant suspend、また再会のvagrant resume、環境を破棄するvagrant destory、Vagrantfileの変更を再読みするvagrant reloadあたりでしょうか。詳細やその他コマンドは公式ドキュメントVagrant Documentを見て下さい。

4. 仮想環境にプライベートIPアドレスを設定する

GitリポジトリをVagrant上に作成してアクセスしたいのでVagrant環境に任意のプライベートIPアドレスを指定したいです。

上記の方法は簡単でVagrantfileを編集すればOKです。

#config.vm.network :private_network, ip: "192.168.33.10"

という記述が27行目当たりにあるのでコメントアウトを外します。

config.vm.network :private_network, ip: "192.168.33.10"

上記実施後、Vagrantfileを再読みさせたいのでvagrant reloadコマンドを利用します。

$vagrant reload

とするとVagrantfileが再読み込みされ、VMが再起動します。

vagrant sshしてifconfigコマンドなどを利用するとIPアドレスが設定されているか確認できるかと思います。

上記を利用して例えばvagrant上にapacheを立てて、ホストからhttp://192.168.33.10などでアクセスも可能です。(iptablesを設定している時は解除が必要な場合があります)

なお、Vagrantfileが存在するディレクトリとVMの/vagrant/配下は共有フォルダになっているのでファイルの受け渡しはこちらを利用すると便利です。

5. 仮想環境にGitのリモートリポジトリ作成

基本的な設定は終わったのでVagrantのCentOS6.4にGitのリモートリポジトリの環境を作ります。

と言っても普通に作ってはVagrantでも意味ないよね、という事でVagrantの起動時に自動的にソフトウェアなどをインストールするProvisioing機能を使ってGitリモート環境を作ってみます。(ChefやPuppetとも連携できるみたいですが使った事ないので残念ながら今回はシェルで。。。)

という事でやりかたですが、起動時にシェルを実行する場合にはVagrantfileに以下のような記述を追記します。

config.vm.provision "shell", path: "provision.sh"

上記のような記述をするとカレントディレクトリに存在するprovision.shをvagrant upした時に実行してくれます。

という事で起動と同時にリポジトリを作るシェルを作成してみました。

# install git
sudo yum -y install git

# create git group
sudo groupadd git

# add git group
sudo usermod -a -G git vagrant

# create git repository
sudo mkdir -p /var/public_git/.test.git
sudo git init --bare --shared /var/public_git/test.git
sudo chown -R root:git /var/public_git

少し、説明を記載します。

2行目でGitをインストール
5行目でGit用のgitグループを作成
8行目でvagrantユーザー(sshでログインするユーザー)にgitグループを追加
11行目でGit用のフォルダの/var/public_git/test.gitを作成
12行目で作成したフォルダに共有リポジトリを作成
13行目で作成したフォルダのグループをgitグループに変更

上記によってgitグループのユーザーはcloneが出来るようになります。

試しにホストのMacからgitグループとなっているvagrantユーザーでcloneしてみます。

下記コマンドを実行するとvagrantユーザーのパスワードが聞かれるのでパスワードのvagrantと入力するとcloneが成功する事が確認できます。

$git clone ssh://vagrant@192.168.33.10/var/public_git/test.git
Cloning into 'test'...
vagrant@192.168.33.10's password: 
warning: You appear to have cloned an empty repository.
Checking connectivity... done

また、試しにpushもしてみます。

$cd test
$touch abc.txt
$git add abc.txt
$git commit -m "First Commit"
$git push origin master

ついでにgit用のユーザーを追加して確認してみます。

$vagrant ssh
# 以降仮想環境での操作
$sudo useradd git_user -g git
$sudo passwd git_user
$exit

では追加したユーザー(git_user)で適当なディレクトリに移動し、cloneしてみます。

$git clone ssh://git_user@192.168.33.10/var/public_git/test.git

先ほどpushしたabc.txtも確認できます。

まとめ

上記のように一度シェルを作ってしまえば、例えば設定を誤ってしまった時も

$vagrant destroy
$vagrant up

とすればまた同じ環境が手に入るので便利です。複製も何個でも出来ますし、便利。

Vagrantは単語は知っていたのですが、そんなに学習コスト高くない割に恩恵が大きい気がします。今後時間あるときはChefも勉強してみてもっと俺俺レシピを作りたいです！

参考サイト

2014年1月18日土曜日

CDN使う時にhttpとhttpsアクセスがある場合にエラーになった話

Herokuに昔デプロイしたアプリを久々に見にいったらhttpsアクセスも許容するようになったらしく、その場合にCDNからのjQueryなどの読み込みに失敗しており、コンソールを見ると以下のようなエラーが表示されていました。

混在アクティブコンテンツ "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" の読み込みをブロックしました

どうやらSSLアクセスの場合、CDNもSSLにしろって事らしい。

でも単純にhttpsとか書き換えるんではなくてhttpsアクセスの時だけhttpsのCDNを見に行くと一番嬉しいと思って調べてたら以下のようにhttpを消すとアクセスに応じて取得先を変更してくれました。

How to fix a website with blocked mixed content

変更前

<script src="http//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

変更後

<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

これで再デプロイしたらうまくできました。良かった。

2014年1月15日水曜日

ChromeDevToolsのMobile emulationを触ってみた

GoogleChromeのDevToolsの機能でMobile emulationなるものが出来ていたのでちらっと確認したのでそのメモ。

以下に出来る事の抜粋を記載します。もっと出来る事がありそうですが、詳細はMobile emulationを確認下さい。

各種スマホのエミュレーション
ピンチイン、ピンチアウト、スワイプ操作が出来る
画面サイズ及びピクセル比の変更が可能
メディアタイプの切り替えが可能
User-Agentの変更も可能
現在地の変更が可能

参考サイト

GoogleDevelopersのChromeDevToolsのページ

Mobile emulation

HTML5Rocksでの紹介ページ

Chrome DevTools for Mobile: Screencast and Emulation

1.準備

2014年1月14日現在では通常のMacのGoogleChrome(v31)では確認できなかったのでGoogle Chrome Canaryをインストールします。

インストール後、Chromeを起動し、右上の3本線のボタンを押下後、Tools→DeveloperToolsを起動させます。

DeveloperToolsを起動後、DeveloperToolsの右上の歯車のアイコンを押下します。

GeneralのShow ‘Emulation’ view in console drawer.の欄のチェックを有効化させます。

その後、画面下部にEmulationタブが出現しているのが確認できます。もし、画面下部のタブが表示されない場合にはEscキーを押下して表示させてください。

2.エミュレーターを起動させる

Emulatorタブの画面左にある

Device
Screen
User Agent
Sensors

をクリックする事でミュレーターの詳細を設定する事が出来ます。

とりあえずGoogle Nexus4のエミュレーションを起動します。

EmulatorタブのDeviceを選択し、セレクトボックスからGoogle Nexus4を選択します。
Emulateボタンを押下します。

上記２ステップでChromeの画面が選択したスマホのエミュレーションを行う画面となります。

3.操作

PCのスクロールでスクロールできますが、タッチイベントのエミュレートも出来るのでクリックしながらスクロールする事でスワイプも可能です。

また、Shiftキーを押下しながらスクロールさせる事でピンチイン、ピンチアウトの操作も可能です。

なお、以下でタッチ操作のエミュレーションを無効化出来ます。

EmulatorタブのSensorsを選択し、Emulate touch screenのチェックを外します

3.画面サイズ及び縦横サイズを変える

EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
Resolutionの値を変更する事で画面サイズを変更できます。

縦と横の画面サイズを設定する真ん中にあるボタンを押下する事で縦横のサイズを逆にする事が出来ます。

4.ピクセル比を変える

ピクセル比を変更できます。これでMediaQueryでratioに関する記述を行った場合の確認も簡単に出来ます。

EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
Device pixel ratioの値を変更します。

例えば以下のようなコードを書きます。(dataURIは略)

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #image {
        background-repeat:no-repeat;background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
    }
}

上記の場合、ratioが2の場合にはid属性がimageの箇所に表示されますが、1に変更すると表示されなくなる事が確認出来ます。

5.メディアタイプの切り替え

EmulatorタブのScreenを選択し、CSS mediaにチェックを入れます
セレクトボックスから任意のmediaタイプを選択します。

こちらについては実際動作は未確認となっております。。。

6.UserAgentの変更

EmulatorタブのUser Agentを選択し、Spoof user agentにチェックを入れます。
セレクトボックスから任意の端末名を設定するかテキストボックスの値を直接書き換えます。

User Agent String.Comにアクセスすると適当に設定した値が表示されているのが確認出来ます。

7.現在地(緯度経度)の変更

現在地(緯度経度)のが変更が出来ます。

EmulatorタブのSensorsを選択し、Emulate geolocation coordinatesにチェックを入れます。
Lat、Lonにそれぞれ値を入れます。

上記の状態でGPSを取得するようなページに遷移します。 Geolocation Demoに遷移するとブラウザから現在地取得して良いかの確認が表示されるので許可すると東京タワーの場所に移動した事が確認できます。

また、測位に失敗した(navigator.geolocation.getCurrentPositionでエラー)とさせたい場合にはEmulate position unavailableにチェックを入れます。

8.その他

加速度の設定だったり、ViewPortの設定?などその他色々出来るようですが、今日はとりあえずここまで。時間があったら調べよう。。

2014年1月13日月曜日

HTML5プロフェッショナル認定試験を受験してみた

HTML5プロフェッショナル認定試験のレベル1を受験してきて一応合格できたので自分のやった学習方法とか色々メモします。

以下参考サイトです。

LPI-Japanの公式サイト HTML5 Professional Certificaiton　HTML5プロフェッショナル認定試験

HTML5認定試験策定で利用されている(?)wiki HTML5プロフェッショナル認定試験 (HTML5 Professional Certification)　試験開発Wikiサイト

1.HTML5プロフェッショナル認定試験とは?

以下ざっくり記載します。詳細は公式サイトを見てください。

LPI-Japanがやっている。
受験料金は15000円(税抜き)。
受験申し込みは基本的にいつでも受験出来る。実際の試験はピアソンのテストセンターに行って受験する。
受験の際にLPI-IDとピアソンのIDが必要となる。(どちらもWebからID作成可能)
Level1とLevel2があるが、2013年1月時点では受験できるのはLevel1のみ。Level2は現在策定中。
試験時間は90分で問題数は約60問。
約7割正解で合格。
認定の優位性の期限があって5年間らしい。

また、以下にLevel1の試験範囲を記述します。

Webの基本知識
CSS3
要素
レスポンシブWebデザイン
オフラインWebアプリケーション（概要とマニフェスト）

詳細は出題範囲（案）Detailed Objectivesを見てください。なお、それぞれに重要度があるので、勉強する際に確認しておくと良いと思われます。

また、上記の通り、Level1の場合、JavaScriptに関する詳細は範囲外です。(JSの読み込み方法とかは出てきますが)

2.やってみた勉強方法

上記を書く前に自分の状況を。

所謂フロントエンジニアではないのでゴリゴリHTML/CSS書いた経験はない。たまに書く時はググりながら何とか書けるレベル。
Webシステムの作成経験はあり。(主にサーバーサイド)
HTML5自体は興味あって勉強会や情報を仕入れたりは積極的にしている。つもり。

以下に実際に僕がやった勉強法などを記載します。

勉強期間は１ヶ月程度
勉強のベースは公式テストHTML5プロフェッショナル認定資格　レベル１　教科書を読みながら知らなかった事や詳細はググってもっと調べてみる。
挙動を確認する場合には実際にコード書いてみる。
飽きたときはHTML5クックブック読んだり。(本試験とは関係ない事も書いてあるけど面白い。)
これまた飽きた時はドットインストールのHTML,CSS,CSS3を見たり。

また、以下に学習する上で大切だと思うポイントを記載します。

自分の実力と試験範囲を把握する

受験する人のスキルでどれぐらいどこの箇所を学習すれば良いか全然違ってくるのでまずは自分の実力を確認しましょう。

例えばフロントエンジニアの人でHTML/CSSゴリゴリ書いてますって人はwikiで試験範囲などを確認して少し復習するだけで良いかもしれません。

逆にWebシステム作成経験がない、HTML/CSSなどをほとんど書いた事がない人などの場合は、Webの基礎知識からまず学習した方が良いと思いますし、いきなり公式テキストをやるのではなく、ドットインストールの動画を見ながら初歩的な所から学習した方が良い気がします。(ドットインストールは初心者向けに説明してくれているので)

自分の場合、Webの基礎知識はある程度知っていたのであまりやらず、それ以外の箇所(特にHTML5要素/CSS3)を重点的に学習しました。

コードを書く

ただ内容を暗記してもそれはただの受験勉強になってしまって、全く意味がないのでしっかりコードを書いて、挙動を確認しましょう。

実際に書いてプロパティを変更するとどのような挙動になるかなど確認した方が頭にも入りやすいかと思います。(animationやtransitionら辺はコード書くと面白いです)

個人的には書くときのテキストエディタはSublime Textがおすすめです。 GruntのLiveReload機能を使って書くとエディタで保存するタイミングでブラウザが自動更新されたりするので便利ですが、そもそもGrunt何って人ははまりそうですし、別にやらなくて良いかと思います。

英語で覚える

タグ名やプロパティは基本的に英語の名称(または略語)だったりするのですが、その名称もしっかり覚えるべきだと個人的には思います。

例えば<ol>、<li>要素もそのまま覚えるのではなくてそれぞれOrdered list、Unordered listと覚えるとそれぞれの要素の挙動も忘れる事がないと思います。

3. 受験をしてみて

78点(えっ!)というそこまで余裕ではない点数ではありましたが、合格できました。

HTML5の試験だけどそれだけに特化してる訳ではなく、Webの基礎知識だったり、HTML/CSSの基礎も学習をする事が出来るのでその辺りの知識を整理出来たのは良かった。
本資格を持っている=書ける、という訳ではない。実際の業務ではレガシーブラウザへの対応だったり、JavaScriptを使うことがほとんどあると思われるがその辺りの話はないため。また、試験内容も基本的には知識を問うものが中心となっているため。(知識は知識で大切)

また、受験を踏まえ、どのような人が受験すると良いと思ったかも記載しておきます。

HTML5に興味ある人
デザイナーだったりフロントエンジニアの人
サーバーサイドエンジニアでたまにHTML/CSS書いたりする人でもっと知識を整理したい人

資格の有用性?という意味ではまだ試行された日が経ってないので、よく分かりませんが、個人的には勉強するきっかけになったので良かったかなーと。

2013年10月6日日曜日

"Harp"ってフロントエンドエンジニアに良さげなWebサーバーを試してみた

HarpってWebサーバーがイケてそうなのでとりあえず試してみました。 YouTubeで紹介された奴を割とそのまま試しただけなので何もすごくないですが。

少し確認してみたのですが、インストールも１コマンドで出来て手軽だし、Markdown,LESSとかTwitterBootstrap使ってるWebエンジニアにとってはかなり有用なのではないかと思いました。

以下参考サイトです。

Harp公式サイト Harp

Harpの紹介サイト（多分作者の人？） Introducing Harp

Harpの紹介YouTube Introduction to Harp Web Server

1.Harpって?

Webサーバーですよ
インストールはNodeのnpm使うよー
Markdown,EJS,CoffeeScript,LESS,Stylusとか解釈してくれますよー
コンパイルしてPureなHTMLとかCSS生成できるよー

他にも色々あるのかもしれませんが、とりあえず自分が試してみたのは上記機能のみです。

2.インストールしてみる

npm使うのでNodeを予めインストールしておく必要があります。どのバージョンが必要であるかという明記はなかったような気がしましたが、とりあえず自分はv0.10.11とかでとりあえず動きました。

以下のコマンドでOKです。

$sudo npm install harp -g

終わり!!!

3.とりあえず試す

公式に従ってharpコマンドを使ってテンプレートプロジェクト作ってみます。

$harp init myproject

とするとカレントディレクトリにmyprojectってフォルダが出来て、中に色々ファイルが出来てます。

-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 404.jade
-rwxr-xr-x  1 toshihirock  staff   81 Oct  6 08:08 _layout.jade
-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 index.jade
-rwxr-xr-x  1 toshihirock  staff  259 Oct  6 08:08 main.less

まあ、とりあえずWebサーバー起動して見てみると。

$harp server myproject

          _____                    _____                    _____                    _____          
         /l    l                  /l    l                  /l    l                  /l    l         
        /::l____l                /::l    l                /::l    l                /::l    l        
       /:::/    /               /::::l    l              /::::l    l              /::::l    l       
      /:::/    /               /::::::l    l            /::::::l    l            /::::::l    l      
     /:::/    /               /:::/l:::l    l          /:::/l:::l    l          /:::/l:::l    l     
    /:::/____/               /:::/__l:::l    l        /:::/__l:::l    l        /:::/__l:::l    l    
   /::::l    l              /::::l   l:::l    l      /::::l   l:::l    l      /::::l   l:::l    l   
  /::::::l    l   _____    /::::::l   l:::l    l    /::::::l   l:::l    l    /::::::l   l:::l    l  
 /:::/l:::l    l /l    l  /:::/l:::l   l:::l    l  /:::/l:::l   l:::l____l  /:::/l:::l   l:::l____l 
/:::/  l:::l    /::l____l/:::/  l:::l   l:::l____l/:::/  l:::l   l:::|    |/:::/  l:::l   l:::|    |
l::/    l:::l  /:::/    /l::/    l:::l  /:::/    /l::/   |::::l  /:::|____|l::/    l:::l  /:::|____|
 l/____/ l:::l/:::/    /  l/____/ l:::l/:::/    /  l/____|:::::l/:::/    /  l/_____/l:::l/:::/    / 
          l::::::/    /            l::::::/    /         |:::::::::/    /            l::::::/    /  
           l::::/    /              l::::/    /          |::|l::::/    /              l::::/    /   
           /:::/    /               /:::/    /           |::| l::/____/                l::/____/    
          /:::/    /               /:::/    /            |::|  ~|                       ~~          
         /:::/    /               /:::/    /             |::|   |                                   
        /:::/    /               /:::/    /              l::|   |       Harp v0.9.3                 
        l::/    /                l::/    /                l:|   |       Asset Pipeline Framework    
         l/____/                  l/____/                  l|___|       By Chloi Inc. 2012-2013     

Your server is listening at http://localhost:9000...

デフォルトだと9000ポートでWebサーバーが起動するみたいなのでhttp://localhost:9000早速アクセス。

すごい、簡単だー。

4.Markdown見てみる

今度はテンプレート使わずやってみましょう。

$mkdir markdowntest
$cd markdowntest
$vi index.md

#Hello World
##Hello World2
    
+ test
+ test

$harp server --port 9000

これで同じくアクセス。

すばらしい。

5.BootstrapのLESSをコンパイルしてみる

YouTuebの紹介でもBootstrapのLESS使ってコンパイルしてーみたいな事をやっていたので、全く同じ方法でやります。

とりあえずTwitter Bootstrapをダウンロードしてくる。

Bootstrap

で解凍。

あと今回用にサンプルプロジェクト作って解凍したBootstrapからLESSを持ってきます。あと名前も変えます。

$mkdir bootstraptest
$cd bootstraptest
$cp -r ~/Downloads/bootstrap-3.0.0/less ./_bootstrap

TwitterBootstrapのLESSを読み込む用のlessを作成します。

$vi main.less

@import "_bootstrap/bootstrap";
body {
  background: @brand-primary;
}

１行目でBootstrapのすべてのLESSをインポートしているbootstrap.lessを読み込んでいます。 3行目ではBootstrapで定義してる変数を利用して背景色を指定しています。

テスト用のHTML作ってみます。

$vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

見てみます。

おー、しっかり背景色が変わっています。

さて、compileコマンドを使ってコンパイルします。

$harp compile --output ../www

終わるとwwwディレクトリが出来ています。

$ll ../www/
-rw-r--r--  1 toshihirock  staff     224 Oct  6 08:55 index.html
-rw-r--r--  1 toshihirock  staff  100869 Oct  6 08:55 main.css

綺麗にコンパイルされてます。あら、素敵！

6.最後に

個人的にですが、Gruntとか使ってみたいけど敷居高そうだなーと考えている人には良いのでは？という感じでした。

上記ぐらいの利用法であれば特に詰まる事なくできたので、そいう手軽さもすごい良いなと。

登録: 投稿 (Atom)

2014年2月13日木曜日

2014年2月8日土曜日

2014年1月27日月曜日

前提条件

目次

1.Vagrantのインストール

2. Vagrantを利用したCentOS仮想環境の構築

3. 仮想環境のCentOSの作成、起動

4. 仮想環境にプライベートIPアドレスを設定する

5. 仮想環境にGitのリモートリポジトリ作成

まとめ

参考サイト

2014年1月18日土曜日

2014年1月15日水曜日

参考サイト

目次

1.準備

2.エミュレーターを起動させる

3.操作

3.画面サイズ及び縦横サイズを変える

4.ピクセル比を変える

5.メディアタイプの切り替え

6.UserAgentの変更

7.現在地(緯度経度)の変更

8.その他

2014年1月13日月曜日

目次

1.HTML5プロフェッショナル認定試験とは?

2.やってみた勉強方法

自分の実力と試験範囲を把握する

コードを書く

英語で覚える

3. 受験をしてみて

2013年10月6日日曜日

目次

1.Harpって?

2.インストールしてみる

3.とりあえず試す

4.Markdown見てみる

5.BootstrapのLESSをコンパイルしてみる

6.最後に