Rachet試してみた(2) 各種部品を使ってみる
Rachetにはモバイルっぽくみえる部品があるので、それをいくつか試してみました。
部品はComponents · Ratchetから確認できます。
使い方はBootstrapと同様、特定のclassを使うだけと簡単です。
ヘッダ関連
いかにもそれっぽいアイコンを使う
<header class="bar bar-nav"> <a class="icon icon-left-nav pull-left"></a> <a class="icon icon-compose pull-right"></a> <h1 class="title">Ratchetテスト</h1> </header>
a要素のclassにicon
と使いたいアイコンの種類(Ratchiconにあります)を指定して、さらに左に置きたいならpull-left
、右ならpull-right
を指定するだけ。
それっぽいのがこんなに簡単に!
アイコンと同じ容量でボタンを置けたりもします。
タブバー
画面下のタブバーも簡単に作れます。
classにbar
をつけるだけでバーが作れるのですが、さらにbar-tab
を追加するとタブバーになります。
タブバーの各アイテムはa要素にして、classをtab-item
としてあげます。配下にはspanでアイコンをおくとともに、アイコンラベルもspanでつけることができます。classはtab-label
です。
<nav class="bar bar-tab"> <a class="tab-item active" href="#"> <span class="icon icon-home"></span> <span class="tab-label">Home</span> </a> <a class="tab-item" href="#"> <span class="icon icon-person"></span> <span class="tab-label">Profile</span> </a> <a class="tab-item" href="#"> <span class="icon icon-star-filled"></span> <span class="tab-label">Favorites</span> </a> <a class="tab-item" href="#"> <span class="icon icon-search"></span> <span class="tab-label">Search</span> </a> <a class="tab-item" href="#"> <span class="icon icon-gear"></span> <span class="tab-label">Settings</span> </a> </nav>
こんな感じに。タブバーは前にきて、コンテンツは後ろに回ってくれます。
が、コンテンツの一番下がタブバーに隠れて見えなくなってしまうので、そこは調整が必要です。
コンテンツ関連
'>'付きテーブルビュー
'>'が右側についている、見覚えのあるテーブルビューも簡単に作れます。
ulのclassをtable-view
にして、liのclassをtable-view-cell
にすればテーブルビューとその中のセルが作れます。
右側の'>'は、a要素でclassをnavigate-right
にし、アイコンを右寄せしているだけですね。
<ul class="table-view"> <li class="table-view-cell"> <a class="navigate-right"> Item 1 </a> </li> <li class="table-view-cell"> <a class="navigate-right"> Item 2 </a> </li> <li class="table-view-cell"> <a class="navigate-right"> Item 3 </a> </li> </ul>
こんな感じです。これまた簡単。
>
の代わりにいわゆるバッジやボタン、トグルスイッチを置くこともできます。
ボタン関連
普通のボタン
a要素もしくはbutton要素のclassをbtn
にすると、ボタンになります。
後はクラスを追加することで色が変わります。
<button class="btn">Button</button> <button class="btn btn-primary">Button</button> <button class="btn btn-positive">Button</button> <button class="btn btn-negative">Button</button> <button class="btn btn-link">Button</button> <button class="btn btn-outlined">Button</button> <button class="btn btn-primary btn-outlined">Button</button> <button class="btn btn-positive btn-outlined">Button</button> <button class="btn btn-negative btn-outlined">Button</button>
たくさん。
幅いっぱいのボタン
ボタンのclassにbtn-block
を追加してあげると、幅いっぱいのボタンになります。
<button class="btn btn-block">Button</button> <button class="btn btn-block btn-primary">Button</button> <button class="btn btn-block btn-positive">Button</button> <button class="btn btn-block btn-negative">Button</button> <button class="btn btn-block btn-link">Button</button> <button class="btn btn-block btn-outlined">Button</button> <button class="btn btn-block btn-primary btn-outlined">Button</button> <button class="btn btn-block btn-positive btn-outlined">Button</button> <button class="btn btn-block btn-negative btn-outlined">Button</button>
このとおり。
フォーム
普通のフォーム
フォームは何も考えなくともいい感じに使えます。
<form> <input type="text" placeholder="Full name"> <input type="search" placeholder="Search"> <textarea rows="5"></textarea> <button class="btn btn-positive btn-block">Choose existing</button> </form>
こうなります。
スマホっぽいフォーム
いかにもスマホっぽいフォームも作ることができます。
form要素のclassをinput-group
にして、各行をdivで囲み、そのclassをinput-row
にします。その中にlabel要素でラベルを、input要素で入力場所を作ればOKです。
<form class="input-group"> <div class="input-row"> <label>Full name</label> <input type="text" placeholder="Mister Ratchet"> </div> <div class="input-row"> <label>Email</label> <input type="email" placeholder="ratchetframework@gmail.com"> </div> <div class="input-row"> <label>Username</label> <input type="text" placeholder="goRatchet"> </div> </form>
こんないかにもな感じになります。
他にも色々とあるので、Components · Ratchetから見てみるとよいでしょう。本当に簡単便利ですね。
次回は画面遷移を伴うもの(push.jsを使うもの)を試してみます。
Ratchet試してみた
モバイル向けのそれっぽい画面を作る必要があり、そこでちょろっと試したRachetが結構いい感じだったので、少し時間かけて触ってみることにしました。対象はv2.0.2です。
Ratchetとは
モバイル向けアプリに特化した画面フレームワークです。Bootstrapみたいなものです。
プロジェクトとしても実際にBootstrapプロジェクトの一部となっています。
デモはExamples · Ratchetから見られます。
特徴
- モバイルに特化しているのでファイルサイズが小さい
- CSSを入れ替えるだけで、AndroidとiOS両方に似せた見た目にできる
- ネイティブっぽくするために、AjaxとHistory APIを使ったSPAが簡単にできる
なんともいい感じです。
触った感想
ほんとうに短時間でモバイルアプリっぽい画面が簡単に作れてびびる。んですが、できることも少なめではあるので、凝ったことをやろうとすると色々作らないとダメそう。デモやモックアップ作成用途にはかなーり良さげ。
ちょっと触ってみよう
準備
とりあえずRatchet公式サイトからブツをダウンロードするなり、twbs/ratchet · GitHubからcloneするなりします。
そこのdist
配下にあるcss
,fonts
,js
を配置しましょう。
HTMLを作る
. ├── css ├── fonts ├── js └── index.html
上記構成と仮定して、次のようなHTMLを作ります。
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="utf-8"> <title>タイトル</title> <!-- Sets initial viewport load and disables zooming --> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="mobile-web-app-capable" content="yes"> <!-- Include the compiled Ratchet CSS --> <link href="css/ratchet.css" rel="stylesheet"> <!-- Include the compiled Ratchet JS --> <script src="js/ratchet.js"></script> </head> <body> <header class="bar bar-nav"> <h1 class="title">Ratchetテスト</h1> </header> <div class="content"> <div class="content-padded"> <p>Hello, Ratchet!</p> <button class="btn btn-positive btn-block">こんにちは!</button> </div> </div> </body> </html>
基本的にはratchet.css
とratchet.js
を読み込んであげるだけでよいです。meta要素も上記の用な感じで。
タイトルバーはheader要素のclassをbar
とbar-nav
にして、h1要素で書きます。
<header class="bar bar-nav"> <h1 class="title">Ratchetテスト</h1> </header>
コンテンツはdiv要素のclassをcontent
にして、その中に書きます。そうするとスクロール可能になります。左右パディングが必要な場合は更にcontent-padded
なdiv要素を置いて、その中にコンテンツを書いてあげればOK。
これで、
こんな感じの画面になります。簡単!ちなみに確認は実機でやるか、Chrome Developer ToolsのDevice Modeでモバイルデバイスをエミュレートしてやればよいです。僕は後者で。
画面をiOS/Android風に
iOS風の画面にしたい場合は、次のようにratchet-theme-ios.css
を追加で読み込んであげるだけでよいです。
<link href="css/ratchet.css" rel="stylesheet"> <link href="css/ratchet-theme-ios.css" rel="stylesheet">
今回のだと見た目がかわんないのでキャプチャはなしで。Androidだと、ratchet-theme-android.css
ですね。
これまた簡単。いいですね。
今日はこのへんにして、次は主要パーツをさらってみようと思います。
2014振り返りと2015
すっかり出遅れた感がありますが。意識高い系と見せかけた覚え書きのようなもの。
2014振り返り
2014は家庭中心でやろうということでやってて、まあうまくいったんじゃないかと。その分色々と取り残されていますが、しゃあない。
2015どうしましょう
2014に引き続き家庭中心で行くつもりですが、慣れも出てきたので、少しづつ自分の時間を作るつもり。
あと、慣れって書いたけどなんかパターン化しちゃってるので、何か一つ新しいことに手をつける。ぼんやり格闘技かボルダリングを考えてるけど、まだ定期的に通うのは難しそうなので、後者?新しいことに限らず、外に向けてって感じで。
あと、寝る前にストレッチを習慣に。
ノンアルコールビール2014
身体の都合でわりとノンアルコールものを飲用しておりますが、約2年前のエントリ(カールユング リースリングとプロシュテル ピュアアンドフリーを飲んでみた)から愛飲対象が変わってるので、アップデートのエントリ。ちなみに今は外だと少しアルコールもありにしてます。
で、少し前からのおすすめはこれ。
ヴェリタスブロイ ピュア&フリー
ヴェリタスブロイ ピュアアンドフリー /パナバック(ノンアルコール) 330ml缶 330ML × 24缶
- 出版社/メーカー: パナバックコーポレーション
- メディア:
- この商品を含むブログを見る
2ケースまでは同送料。ビールの本場ドイツ直輸入ノーアルコールビール!ノンアルコールビール ... |
前飲んでたプロシュテルが手に入らなくなり、別のを探したらこれに行き当たりました。モルト・ホップ・水・酵母のみを原料にするというドイツの「ビール純粋令」を守っているというところは同じです。ので、国産ノンアルのような変な味はしません。そしてプハァ感があります。もちろん普通のビールと比べちゃうと物足りなさはあるんですが、なかなかいけます。しかも安いという。ということで、今はこれか炭酸水を愛飲しております。
アルコールを制限している方の参考になりましたら。
読書メモをメディアマーカーからブクログへ移行
時間を作ってなるべくエントリ書いていこうかな、と。
ということで、読書記録に使用していたサービスを、メディアマーカーからブクログ - web本棚サービスへ移行しました。そのメモです。
移行理由
特に1つ目ですね。使い勝手があまりよくなかったので。
移行作業
メディアマーカーからブクログへ移行 - おもに洋ゲー日記を参考に、過去データを移行しました。おかげであまり時間をかからず完了しました。
OSXでLibreOfficeもなかったので、以下の流れでやりました。
- メディアマーカーからUTF-8でCSV出力
- NumbersでCSVカラム編集
- Numbersでは項目のダブルクオートくくり出力ができなかったので、UTF-8で再度CSV出力
- テキストエディタでダブルクオート追加
- nkfでShift-JISに変換
- ブクログにCSVで一括登録
移行後の感想
ありゃ?って、事前に試して移行しろよ自分。
まあ、しばらく気になっていたことができたのでスッキリしました、ということで。
DevLOVE「とあるアジャイル実践者の愛媛での話」参加メモ
昨日の話ですが、DevLOVE「とあるアジャイル実践者の愛媛での話」に参加してきました。
とあるアジャイル実践者の愛媛での話。 - DevLOVE | Doorkeeper
話の運び方や話題のチョイス等々素晴らしく、有意義で楽しい時間を過ごすことができました。ありがとうございます!
上記イベントに関しては文字起こしもある素晴らしいエントリがありました(ありがとうございます!)。
Cuppa Coffee: 勉強会参加メモ:DevLOVE「とあるアジャイル実践者の愛媛での話」
詳細は上記をみていただくとして、私は参加のきっかけおよび印象に残った点のみ書きたいと思います。
きっかけ
一番の理由は私が愛媛出身であり、何らかの理由で愛媛に移ることがあるかもしれないからです。少しでも情報を掴んでおければと。また子どもが生まれたことにより価値観が変わりつつあり、愛媛に限らず、地方で働くということが少し気になっていたというのもあります。
印象に残った点
松山の家賃が安い
私の認識では松山は都会だったのですが、80平米のマンション賃貸料金が月7万以下て…安。
大事なものを見つめるということ
同意という意味で印象に残っています。私も子どもが生まれたために自分の時間を減らさざるを得なくなり、何かを捨てて何かを選ぶという選択をすることになりました。他者が恨めしいという気持ちで生きていくことになるのかなぁとか思っていたのですが、取捨選択をしてしばらく過ごした結果、わりとスッキリした自分が居て、びっくりしています。
まあそれはそうと、地方で働くことも視野に入れるとさらなる取捨選択を迫られることになるので、より深く考えることになりそうです。ただ、選択の余地なく移ってしまうことになる前には考えておきたい。
「しなければならない」の呪縛
よくよく考えてみるとその呪縛を産んだのは自分の選択であることに気がつくと、状況を変えることもできるかもよ、と。色々思い当たるところがあるので、見つめなおしてみます。
エンジニアだけでは多様性がない
私はツッコミ対応の面倒臭さから多様性を避けようとする癖があり、それで物事を先に進めて後ほどツッコミを喰らい被害を大きくする傾向があるので、耳が痛いです。
リモート勤務について
やっぱりコミュニケーションは難しくなる。それを増やそうと努力するのではなく、コミュニケーションが少ないという前提でうまく回す方法を考えたほうがいいかも、とのこと。 市谷さんもリモートワークではコミュニケーションが取れなくて、色々やってみたがダメだった、といっていたのも印象的。
Gruntの復習(5) 色々なタスクを追加しよう
Gruntの基本的なところはおさえられた気がするので、他にどのようなことができるか見てみることにします。
grunt-contribを見てみる
前回書いたように、contrib
と付いているプラグインはいわば公式プラグインのような扱いなのですが、その中で初めての人向けによく使いそうなものをまとめたプラグインがあります。その名もgrunt-contribプラグイン。ありがたい。
gruntjs/grunt-contrib · GitHub
ということで、まずはこのgrunt-contribプラグインに入っているものを見て、その中から自分に必要そうなものを選ぶのがよさげです。ということで見てみましょう。
- grunt-contrib-clean ファイル・フォルダの掃除
- grunt-contrib-coffee CoffeeScriptコンパイル
- grunt-contrib-compass Sass+Compassコンパイル
- grunt-contrib-compress ファイル・フォルダの圧縮
- grunt-contrib-concat ファイル結合
- grunt-contrib-connect Webサーバ起動
- grunt-contrib-copy ファイル・フォルダのコピー
- grunt-contrib-cssmin CSSの圧縮
- grunt-contrib-csslint CSSのLint
- grunt-contrib-handlebars Handlebarsコンパイル(JST)
- grunt-contrib-htmlmin HTMLのminify
- grunt-contrib-imagemin 画像のminify
- grunt-contrib-jade Jadeのコンパイル
- grunt-contrib-jasmine Jasmine実行
- grunt-contrib-jshint JSHint実行
- grunt-contrib-jst UnderScoreコンパイル(JST)
- grunt-contrib-less LESSコンパイル
- grunt-contrib-nodeunit NodeUnit実行
- grunt-contrib-qunit QUnit実行
- grunt-contrib-requirejs RequireJS最適化
- grunt-contrib-sass Sassコンパイル
- grunt-contrib-stylus Stylusコンパイル
- grunt-contrib-uglify UglifyJSでJSのminify
- grunt-contrib-watch watch
- grunt-contrib-yuidoc YUIDocコンパイル
逆の観点から見ると、これらのツールがよく使われている、ということになりますね。
grunt-contribを使う
今までと同様にnpm install grunt-contrib --save-dev
を実行して、Gruntfile.coffeeにgrunt.loadNpmTasks 'grunt-contrib
と書くだけ。これで上記がすべて使えるようになります。上記はnpm一発で入りますし、個別に書く必要がないので、楽ですね。
ということで、grunt-contribを使って用途にあったものを作るのがよさそうです。
grunt-contribで気をつけるところ
すでにgrunt-contribほげほげプラグインを使っているところにgrunt-contribプラグインをnpm install
すると、他プラグインとのバージョン依存でエラーになったりすることがあります。以下はgrunt-contrib-cssminを入れていたところにgrunt-contribを入れて出たエラーです。
npm ERR! peerinvalid The package grunt-contrib-cssmin does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2 npm ERR! System Darwin 13.0.0 npm ERR! command "node" "/Users/masataka/.nodebrew/current/bin/npm" "install" "grunt-contrib" "--save-dev" npm ERR! cwd /Users/masataka/src/grunt-test npm ERR! node -v v0.11.10 npm ERR! npm -v 1.3.23 npm ERR! code EPEERINVALID npm ERR! npm ERR! Additional logging details can be found in: npm ERR! /Users/masataka/src/grunt-test/npm-debug.log npm ERR! not ok code 0
Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2
とありますので、npm install grunt-contrib-cssmin@~0.6.2 --save-dev
とバージョン指定インストールを実施するか、npm uninstall grunt-contrib-cssmin
とアンインストールしてしまうのも手です。そして再度npm install grunt-contrib --save-dev
すると。
現場からは以上です。