鼻水吸引器スマイルキュート
電動の鼻水吸引器「スマイルキュート」を買いました。
鼻水吸引器 スマイルキュート KS-500 ロングノズル付き鼻水吸引キット付セット
- 出版社/メーカー: 新鋭工業
- メディア: Baby Product
- この商品を含むブログを見る
子ども(2歳)がけっこう鼻水を出す方で、人力で吸い取るママ鼻水トッテを買っていたのですが、
- 出版社/メーカー: 丹平製薬
- メディア: Baby Product
- 購入: 13人 クリック: 41回
- この商品を含むブログ (29件) を見る
結構大変なわりに吸引力が弱い。子どもは嫌がって、押さえつけて、泣く。で、吸うのが面倒に。でも詰まると苦しそうだし中耳炎も困るので、頻繁に耳鼻科に通って吸ってもらってました。そこで電動のメルシーポットが良いという話を聞いたので、よし買おうと。
電動鼻水吸引器 メルシーポット S-502 鼻水吸引マニュアル付き
- 出版社/メーカー: シースター
- メディア: Baby Product
- この商品を含むブログ (2件) を見る
で買おうとしたところ、前述のスマイルキュートも登場。吸引力等にあまり差はないようなんですが、タンクが透明で取れた鼻水が見えるってことで、スマイルキュートにしました。しばらく使ってみたのですが、吸引力は十分、音もそれほど大きくない。あと、子どもは最初怖がって泣いていたんですが、3回目くらいから慣れて平気になりました。そして、選んだ理由の透明タンクですが、これに付いている鼻水吸引キットなるものに鼻水が貯まるので、タンク全く汚れず。メンテナンス楽！ということで、かなり気軽に鼻水吸入ができるようになりました。買ってよかった。
あと、大人もそれなりに取れます。これからの季節にいいかも。
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万以下て…安。
大事なものを見つめるということ
同意という意味で印象に残っています。私も子どもが生まれたために自分の時間を減らさざるを得なくなり、何かを捨てて何かを選ぶという選択をすることになりました。他者が恨めしいという気持ちで生きていくことになるのかなぁとか思っていたのですが、取捨選択をしてしばらく過ごした結果、わりとスッキリした自分が居て、びっくりしています。
まあそれはそうと、地方で働くことも視野に入れるとさらなる取捨選択を迫られることになるので、より深く考えることになりそうです。ただ、選択の余地なく移ってしまうことになる前には考えておきたい。
「しなければならない」の呪縛
よくよく考えてみるとその呪縛を産んだのは自分の選択であることに気がつくと、状況を変えることもできるかもよ、と。色々思い当たるところがあるので、見つめなおしてみます。
エンジニアだけでは多様性がない
私はツッコミ対応の面倒臭さから多様性を避けようとする癖があり、それで物事を先に進めて後ほどツッコミを喰らい被害を大きくする傾向があるので、耳が痛いです。
リモート勤務について
やっぱりコミュニケーションは難しくなる。それを増やそうと努力するのではなく、コミュニケーションが少ないという前提でうまく回す方法を考えたほうがいいかも、とのこと。 市谷さんもリモートワークではコミュニケーションが取れなくて、色々やってみたがダメだった、といっていたのも印象的。
