2014年1月27日月曜日

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

このエントリーをはてなブックマークに追加 はてなブックマーク - VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

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

前提条件

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

目次

  1. Vagrantのインストール
  2. Vagrantを利用したCentOS仮想環境の構築
  3. 仮想環境のCentOSの作成、起動
  4. 仮想環境にプライベートIPアドレスを設定する
  5. 仮想環境にGitのリモートリポジトリ作成
  6. まとめ
  7. 参考サイト

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アクセスがある場合にエラーになった話

このエントリーをはてなブックマークに追加 はてなブックマーク - 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を触ってみた

このエントリーをはてなブックマークに追加 はてなブックマーク - ChromeDevToolsのMobile emulationを触ってみた

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

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

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

参考サイト

GoogleDevelopersのChromeDevToolsのページ

Mobile emulation

HTML5Rocksでの紹介ページ

Chrome DevTools for Mobile: Screencast and Emulation

目次

  1. 準備
  2. エミュレーターを起動させる
  3. 操作
  4. 画面サイズ及び縦横サイズを変える
  5. ピクセル比を変える
  6. メディアタイプの切り替え
  7. UserAgentの変更
  8. 現在地(緯度経度)の変更
  9. その他

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のエミュレーションを起動します。

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

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

3.操作

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

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

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

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

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

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

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

4.ピクセル比を変える

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

  1. EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
  2. 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.メディアタイプの切り替え

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

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

6.UserAgentの変更

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

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

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

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

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

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

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

8.その他

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

2014年1月13日月曜日

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

このエントリーをはてなブックマークに追加 はてなブックマーク - HTML5プロフェッショナル認定試験を受験してみた

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

以下参考サイトです。

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

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

目次

  1. HTML5プロフェッショナル認定試験とは?
  2. やってみた勉強方法
  3. 受験をしてみて

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自体は興味あって勉強会や情報を仕入れたりは積極的にしている。つもり。

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

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

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

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

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

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

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

コードを書く

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

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

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

英語で覚える

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

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

3. 受験をしてみて

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

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

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

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

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

2013年10月6日日曜日

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

このエントリーをはてなブックマークに追加 はてなブックマーク - "Harp"ってフロントエンドエンジニアに良さげなWebサーバーを試してみた

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

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

以下参考サイトです。

Harp公式サイト Harp

Harpの紹介サイト(多分作者の人?) Introducing Harp

Harpの紹介YouTube Introduction to Harp Web Server

目次

  1. Harpって?
  2. インストールしてみる
  3. とりあえず試す
  4. Markdown見てみる
  5. BootstrapのLESSをコンパイルしてみる
  6. 最後に

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;
}

1行目で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とか使ってみたいけど敷居高そうだなーと考えている人には良いのでは?という感じでした。

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

2013年9月28日土曜日

[Tizen]よく使うsdb(Smart Development Bridge)コマンドの使い方メモ

このエントリーをはてなブックマークに追加 はてなブックマーク - [Tizen]よく使うsdb(Smart Development Bridge)コマンドの使い方メモ

Tizenのエミュレーターや実機へのアプリ転送などをコマンドライン上で行えるsdb(Smart Development Bridge)がTizen SDKに同梱されています。 これはAndroidでいうadbコマンドのTizen版になります。

上記を利用する事でIDEを介さず、エミュレーターや実機にして操作が出来るのでよく使う機能などをメモを記載します。 (詳細はsdb helpコマンドで見れます)

  • sdbコマンドの場所
  • 接続されているTizenデバイスの確認
  • sdbコマンドの対象デバイスの指定
  • Tizenデバイスへのアプリ(tpk,wgt)のインストール
  • Tizenデバイスへのリモートログイン
  • Tizenデバイスからのファイル取得
  • Tizenデバイスへのファイル転送
  • その他

sdbコマンドの場所

Macの場合、$TIZEN_HOME/tools/sdbです。 パスは忘れてしまいましたが、Ubuntu、Windowsでも同様にsdbコマンド自体は利用可能です。(Windowsの場合にはコマンドプロンプト)

予め、.bashrcなどでパスを通しておくと便利です。 私の環境では以下のような感じ。

$export PATH=$PATH:/Users/toshihirock/tizen-sdk/tools

接続されているTizenデバイスの確認

エミュレーターや実機で現在PCに接続されていると認識しているTizenデバイス一覧を表示するにはsdb devicesコマンドを利用します。

$ sdb devices
* daemon not running. starting it now on port 26099 *
* daemon started successfully *
List of devices attached 
emulator-26100  device  mini
emulator-26110  device  abc1

List of devices attached配下に端末一覧が表示されています。 上記例ではminiabc1という名称のエミュレーターを2つ起動しています。

実機の場合にも、上記と同じように表示されます。 もし、実機が表示されない場合、端末のUSBデバッグモードが有効化されていない、もしくはUSBドライバがインストールされていない可能性があります。

なお、上記例ではdaemon not running. starting it now on port 26099ということでsdbサーバが同時に起動しています。

コマンドで明示的に起動する場合、sdb start-serverとすることで対応できますが、上記のように起動していなければ勝手に起動してくれるみたいなので個人的にはあまり使いません。(逆に停止する場合にはsdb kill-serverコマンドを利用します)

sdbコマンドの対象デバイスの指定

複数のTizenデバイスを接続している場合、どの端末に対してsdbコマンドを発行するか指定する必要があります。

対象が実機であるか、エミュレーターの違いかである場合にはオプションで-d-eを利用するのが便利です。(installコマンドについては後述)

$sdb -d install example.wgt
$sdb -e install example.wgt

-dオプションで実機(device)、-eオプションでエミュレーター(emulator)に対して指定したコマンドを実行しています。

実機を2台以上接続してる、エミュレーターを2台以上接続してる時はどうするかというとsdb devicesコマンドを利用してそれぞれのSerial Numberを取得し、オプションで-sを利用して指定します。

$sdb devices
List of devices attached 
emulator-26100  device  mini
emulator-26110  device  abc1
$sdb -s emulator-26100 install example.wgt

上記例ではまず、sdb devicesコマンドでそれぞれのSerial Numberを確認しています。 Serial Numberは一番左の名称が該当しています。(この例ではemulator–26100とemulator–26110)その後、-sオプションんを使用してSerial Numberが「emulator–26100」の方にアプリをインストールしています。

Tizenデバイスへのアプリ(tpk,wgt)のインストール

作成したtpk、wgtをTizenデバイスにインストールする場合にはsdb installコマンドを利用します。

$sdb -e install example.wgt

上記例ではexample.wgtというアプリをエミュレーターインストールしています。 既に上記アプリがインストールされている場合にも上記コマンドで上書き更新してくれます。

Tizenデバイスへのリモートログイン

Tizenデバイスにリモートログインする場合、sdb shellコマンドを利用します。なお、TizenIDEのConnection ExploerでもGUIでファイル構成などが確認できます。

$sdb -e shell
sh-4.1$

上記例ではエミュレーターにリモートログインしています。

普通にコマンドも使えます。

sh-4.1$ ls -la
total 88
dr-xr-xr-x  24 root root  4096 2013-07-17 20:38 .
dr-xr-xr-x  24 root root  4096 2013-07-17 20:38 ..
dr-xr-xr-x   2 root root  4096 2013-07-17 20:37 bin
dr-xr-xr-x   2 root root  4096 2013-06-14 10:38 boot
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 cache
drwxr-xr-x   2 root root  4096 2013-08-03 23:36 csa
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 data
drwxr-xr-x  15 root root  3700 2013-09-28 06:17 dev
drwxr-xr-x  39 root root  4096 2013-08-03 23:36 etc
lrwxrwxrwx   1 root root     9 2013-07-17 20:36 home -> /opt/home
dr-xr-xr-x   9 root root  4096 2013-07-17 20:37 lib
drwx------   2 root root 16384 2013-07-17 20:36 lost+found
drwxr-xr-x   2 root root    40 2013-09-28 06:17 media
drwxr-xr-x   9 root root  4096 2013-07-17 20:37 mnt
drwxr-xr-x  14 root root  4096 2013-07-17 20:37 opt
dr-xr-xr-x 108 root root     0 2013-09-28 06:17 proc
lrwxrwxrwx   1 root root    14 2013-07-17 20:36 root -> /opt/home/root
drwxr-xr-x  12 root root   340 2013-09-28 06:17 run
dr-xr-xr-x   2 root root  4096 2013-07-17 20:38 sbin
lrwxrwxrwx   1 root root     8 2013-07-17 20:36 sdcard -> /mnt/mmc
drwxr-xr-x   2 root root     0 2013-09-28 06:17 smack
drwxr-xr-x   2 root root  4096 2013-06-14 10:38 srv
dr-xr-xr-x  12 root root     0 2013-09-28 06:17 sys
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 system
drwxrwxrwt  12 root root  1700 2013-09-28 06:43 tmp
drwxr-xr-x  16 root root  4096 2013-07-17 20:38 usr
drwxr-xr-x  16 root root  4096 2013-07-17 20:36 var

suコマンドでスーパーユーザーにもなれます。

上記より、例えばIDEのコンソールなどでhogeっていうファイルを吐き出したよって言っているけどそれってどこなんだって言うときにはsdb shellでリモートログインしてfindコマンドで探すっていうのが手っ取り早いです。

sdb shell -ls -laなどとコマンドを指定するとリモートログインすることなく、コマンドの実行も可能なようです。

Tizenデバイスからのファイル取得

Tizenデバイスからファイルを取得する場合、sdb pullコマンドを利用します。

$sdb -e pull /opt/usr/media/Images/Default.jpg ~/Downloads/
1 file(s) pulled. 0 file(s) skipped.
/opt/usr/media/Images/Default.jpg   5834 KB/s (632118 bytes in 0.105s)

上記例ではTizen端末の/opt/usr/media/Images/Default.jpgファイルをローカルPCの~/Downloads/においてね、という操作をしています。

Tizenデバイスへのファイル転送

Tizenデバイスへファイルを配置する場合、sdb pushコマンドを利用します。

$sdb -e push ~/Downloads/icon.jpg /opt/usr/media/Images/
1 file(s) pushed. 0 file(s) skipped.
/Users/toshihirock/Downloads/icon.jpg   210 KB/s (2799 bytes in 0.013s)

上記例ではローカルPCの~/Downloads/icon.jpgというファイルをTizen端末の/opt/usr/media/Images/においてね、という操作をしています。

sdb pullとsdb pushでは第1引数と第2引数の意味が違うので注意です。

その他

上記以外でもsdb uninstallでアプリをアンインストールしたり、やsdb dlogでログを見たりできますが、個人的にあまり使わないので割愛します。その他にもコマンドなどありますが、詳細はsdb helpで確認下さい。

[TIzen]アプリ転送時に「There is no device to launch」というダイアログが表示される場合

このエントリーをはてなブックマークに追加 はてなブックマーク - [TIzen]アプリ転送時に「There is no device to launch」というダイアログが表示される場合

エミュレーターを起動しているにも関わらず、IDEからRun Asでアプリをエミュレーターに転送しようとした際にThere is no device to launchというダイアログが表示される事があります。

上記の場合、Tizen IDEでConnection Exploerウィンドウを開けば問題が解消されます。

Tizen IDEをインストールした場合にはデフォルトで上記Windowは表示している状態だったと思いますが、消してしまった場合、Tizen IDEのWindow→Show View→Other→Tizen→Connection Exploerで再表示可能です。

また、上記ウィンドウでエミュレーターを含む現在sdbで認識しているデバイスが表示されるので、そこにエミュレーター(実機)があるかも確認できます。

sdbコマンドを利用することでアプリの転送も可能ですが、別の機会に!