Vagrantで複数仮想マシンを起動できるようにする | バシャログ。
iPhone 6 Plus を予約して発売2日後に手に入れたtanakaです。それまでケースは付けないで使う派でしたが、落としてガラスを割りそうだったので、早々にケースを購入しました。 今日は、Vagrantで複数の仮想マシンを起動してmysqlコンソールログインできるまでを試してみましたので紹介します。 やってみたこと web と db の 2台の Linuxサーバーを起動して、webからdb上のMySQLサーバーにMySQLコンソールログインできるようにする 動作環境 Vagrant 1.6.5 VirtualBox 4.3.16 boxファイルはopscode-ubuntu-14.04を使います Vagrantfile 適当なフォルダを作成(multivmtestなど)し、以下のテキストをVagrantfileというファイル名で保存します。 コマンドプロンプトで、作成したフォルダに移
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
RWD のレイアウト変化をまとめてみた。 | バシャログ。
こんにちは、 連日の雨に身も心も萎え気味なmackyです。ビアガーデンで横浜の夜景を見ながらビールを飲むことを夢みてあと1か月はのりきろうと思う今日このごろ。 さて今日は、「レスポンシブウェブデザイン」のレイアウトの変化パターンをまとめてみました。 レスポンシブウェブデザインのレイアウトパターンまとめ。 この前、知ったのですが「レスポンシブデザイン」ではなく「レスポンシブウェブデザイン」もしくは「RWD」と略すのが正しいそうです。はい。「RWD」も口に出すと十分長いですけどね^^;私は「RWDで」といわれると、ついついMedia Queriesを思い浮かべてしまうんですが、RWDにもいくつかパターンがあるので今回調査＆まとめてみました。（ここでいうパターンとは最終的に１カラムになるまでの変化の仕方をいっています。） Column Drop Column Drop??って思う人もいるとおもう
RSSフィードからFacebookページへ自動投稿してくれるWebサービス「dlvr.it」 | バシャログ。
一蘭は好きなんですが、もはや気軽に行けるレベルの値段ではなくなってきたので味噌ラーメン屋を探す事にしました。こんにちは Latinです。 さて今回は、Facebookページの運営に日頃から四苦八苦されていらっしゃるWeb担当者の方も多いかと思いますが、ブログやニュースリリースなどのRSSフィードを使って、Facebookページへ自動投稿してくれるWebサービス、dlvr.it（デリバー・イット）をご紹介したいと思います。 実際に使ってみると本当にこれは便利です。 Facebookページを作成 今回はあらかじめ、テスト用のFacebookページ（非公開）を作成しておきました。 dlvr.it へアクセス 今回はFacebookでログイン。 dlvr.it 配信ルールの追加 「+Add Route」を選択（ルールを追加する場合もこちら） 管理用の配信ルールの名前を入力 「Sources」にフィ
Vagrant を PhpStorm から使う | バシャログ。
仕事でチャットツールをよく使うようになって大分立つのですが、チャットによるコミュニケーションでは顔文字が大事とかいう話をどこかで読んだ気がするので顔文字をよく使うようにこころがけているtanakaです。 今日は PhpStorm を使ってVagrant 経由で仮想マシンを起動する方法を紹介します。30分から1時間半くらいで開発環境が用意できるので、試してみてください。 前提 以下のツールがインストール済みか確認してください。 PhpStorm (有償・30日無料お試し可能) VirtualBox for Windows hosts Vagrant 新しくプロジェクトを作る 空のプロジェクトを作ります。以下のような感じで。 仮想マシンを起動するのに必要なファイル Vagrantfile を用意する。 メニューバーからTools→Vagrant→Init in Project Rootをクリッ
デザイナー・コーダー注目の Advent Calender 2013 まとめ | バシャログ。
キッチン泡ハイターってスゴい汚れが落ちるらしいですよ！こんばんはLatinです。 さて、2013年も終わろうとしている訳ですが、今年のアドベントカレンダーも盛り上がっております。デザイナー・コーダー寄りで個人的に気になるアドベントカレンダーをまとめてみました。 デザインツール系 Fireworks Lover Advent Calendar 2013 UI Design Advent Calendar 2013 #LOVEFONT Advent Calendar 2013 X'mas Card Design Advent Calendar 2013 HTML/CSS Frontrend Advent Calendar 2013 HTML5 Advent Calendar 2013 CSS Property Advent Calendar 2013 WordPress/Movable Typ
災害時に役立つ・災害に備えるサイトまとめ | バシャログ。
先週夏休みもらったんですが、そのうち9割7分くらいは家にいた kimoto です。 最近は高気温だったり、竜巻発生したり、ゲリラ豪雨が降ったり、さらに今朝は地震があったり。 どうにも落ち着かない日々が続いていますね。 また、9月頭は防災の日ということで、弊社シーブレインでも防災訓練を行いました。 詳しくは弊社の社長ブログでも記事となっておりますので良かったら見てみてください。 そんなわけで、自然災害などの察知や備えに役立つサイトをいくつかご紹介します。 まあ有名ドコロばかりなので、知らなかったらラッキー程度に思って読んでいただければ。 関東で雨の状況が知りたければ東京アメッシュ 東京アメッシュ 言わずと知れた超有名サイト。2 時間前から 5 分刻みでの雨の降り具合を確認できるので、「あと○○分後くらいに大雨来そうだな」みたいな予想ができます。 iPhone アプリ もあります。GPS で自
[WordPress]オリジナルのカスタムメニューを作成する | バシャログ。
川に行きたい！Latinです。 こう暑い日には、中途半端に汗をかくよりも思いっきり汗をかく方がスッキリする！という持論のもと、週末ジョギングにでも行こうと思ってます。 みなさんも熱中症には気をつけてくださいね。 さて今回は、WordPressのオリジナルのカスタムメニュー作成についてまとめようと思います。 管理画面からメニューを作成 管理画面の「外観」→「メニュー」を選択し、メニューを作成していきます。 メニューの名前を決め、対象のコンテンツをドラッグ＆ドロップで選んでいきます。 メニューの名前は日本語でも英語でも構いません。ここではひとまず「Menu Books」として作成していきます。 メニュー項目の構成についてですが、ここではわかりやすいよう「カスタムメニュー」という名前の項目でメニューを作ってみます。 作成が終わったら「メニューを保存」を押し、保存しておきます。 テンプレートファイ
![[WordPress]オリジナルのカスタムメニューを作成する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b53dec6a802a8894496962b618bea8a7e8829438/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_wordpress.png)
GitHubでプロジェクトページを公開する手順メモ | バシャログ。
ヒノキ花粉アレルギーの疑いが浮上したhakoishiです。 さて、今回はGitHubでリポジトリをプロジェクトページとして公開する手順のご紹介。 ユーザーページ（http://(アカウント).github.io/）は作っていなくても良いようです。 さて、手順。 ページとして公開したいリポジトリで 「gh-pages」という名前のブランチを作ります。 図はGitHub上で作成していますが、もちろん作業コピー上での作成、プッシュで問題ありません。 そして、下記のURLにアクセス。 http://(アカウント).github.io/(リポジトリ名)/ ※アカウントが「basha-log」、リポジトリ名が「sitetest」なら http://basha-log.github.io/sitetest/ になります。 （アカウントは架空のものです） おや。早すぎたようだ。 10分ほどかかるそうなので
【当たり前を疑ってみる】新着情報をdlでマークアップするのは妥当なのでしょうか？ | バシャログ。
Windows8、シャットダウンまでの道のりの険しさに空を仰いだhakoishiです。 終了させないで、スリープ状態をデフォルトにして使う想定なのかなー。タブレットみたいに。 さて、今回はちょっと当たり前を疑ってみたお話。 新着情報をdlでマークアップする定番テクニック、果たして妥当なのでしょうか？ この話題、ブログやtwitterなんかでちょいちょい見かけますね まずはよくある形を確認。こういうのですね。 『dlで問題ないかも。』という意見 新着情報としての意味合いが強いなら、日付がキーになるのは自然。 形に与えられた意味を考えるに、日付がキーになっているという判断もできる。 『dlで、ってのはどうなんだろう。』という意見 dl要素の意味を考えると、ニュース見出しは日付について説明していることになってしまう。 なら、新着情報はどんな情報を持っていて、どんな意味と構造を与えるべきなのでしょ
ライブラリを使わないでDOMにアクセスするJavaScriptを書いたときにはまった2つのこと | バシャログ。
タスク管理するのに手帳を使おうとして2週間で挫折したので、iPhone & Mac でできないか挑戦している tanaka です。 最近、諸事情により jQuery などのライブラリ を使わずに DOM を操作する JavaScript コードを書く機会がありました。ある程度はライブラリなしで書いたこともあるし、そんな大変じゃないだろう…と思っていたら、想定外に時間がかかってしまいました。(多くはレガシーなIE対応ですが…)そんなわけで、ライブラリを使わないで JavaScript を書いたときに遭遇した問題2つを紹介します。サンプルコードはQUnitでテストを書き、テスト実行＋コードリーディングすることでIEとそれ以外のブラウザの違いが理解できるようにしました。 IE 7以下で setAttribute('class', [classNames])/getAttribute('class
JavaScriptで金額の表記にコンマを付ける | バシャログ。
まだカーテンがこないminamiです。 金額をサイトで扱う場合、コンマを使った表記が必要になる場面もあると思いますが、JavaScriptで自動的に追加する処理を作ってみました。 3桁ごとにコンマをつける サンプルは下記になります。 3桁ごとにコンマをつけるサンプル 肝になるのは下記の処理です。入力した数字（文字列）に対して、（任意の数字）+（下3桁が数字）にマッチする限り繰り返し処理を行います。 // 3桁ずつコンマが振られるまで再帰的に処理 function addComma(num) { var _num = num.replace( /^(-?\d+)(\d{3})/, "$1,$2" ); if(_num !== num) { return addComma(_num); } return _num; } 下記の部分では正規表現を使ってマッチしています。 var _num = n
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
[Mac]Sublime Text2を使い始めたときにカスタマイズした、最低限のこと | バシャログ。
Sublime Text 3 ベータ版が出た、というニュースが飛び込んできましたが、Sublime Text 2、あまり使い倒せてないので、すぐ食いついてないtanakaです。Personal License買ったのでインストールしましたけれども。 Sublime Text 2、常用はしてないですが、とても気が利いてるエディタですし、シェルから開く方法もあるということで、さっとテキストを編集するときは便利ですね。今回は正月休みにおこなった、プログラムを書くための設定についてまとめます。 Vintage(Vimライク・キーバインド)を有効に IDE系のVimキーバインドは使い勝手に難があるため有効にしてませんが、とりあえず、オンにして見ます。メニューバーのSublime Text 2→Preferences→Settings Userを選択すると、テキストファイルが開きます。ユーザごとの設定
![[Mac]Sublime Text2を使い始めたときにカスタマイズした、最低限のこと | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
【 Modern UI 】を感じさせるWEBサイト10選 | バシャログ。
年明けですね。今年もよろしくお願いします。 年末ギリギリに見たレ・ミゼラブルの影響を少々受けつつ、年明けからドラマのgleeにハマってます。歌の力って凄い･･･！seki です。 おススメのドラマなので、皆さんもハマって一緒にgleekになりませう。 さてさて。昨年の、Windows8 の発売が噂されていた頃より、じわじわと流行っている Modern と呼ばれるUIですが、今年もまだまだ熱の冷めない人気っぷりが予想されますよね。今回は、このタイルのようなデザインを感じさせるWEBサイトを集めてみたのでご紹介です。 Modern UI っぽいデザインのWEBサイト10選 【no.01】 http://www.rockwerchter.be/ 【no.02】 http://www.bricoleur.co.jp/ 【no.03】 http://www.acer.co.jp/ 【no.04】 h
Chrome Developer Tools を使いこなす！必読エントリー5つ | バシャログ。
こんにちはLatinです。もうすぐ世界が終わるらしいのでバシャログ。も今回が最後のエントリーになりそうです･･･。 あ、万が一終わらなかったらもちろんブログは継続していきます。（汗） 今回はChrome Developer Tools のエントリーのまとめです。 私自身はこれまで Firefox の Firebug を使っていましたが、やはりあの重たいブラウザ動作がイヤになり、 自然と Chrome を立ち上げる機会が増えていきました。 Firebug も Chrome Developer Tools も基本的に出来る事は同じなのですが、UI が変わっただけで結構最初は使い辛い印象をもったりしますよね。 そんな使い初めの時に参考にさせていただいたエントリーを紹介とともに、まとめさせていただきました。皆様、ありがとうございますです。 ～入門編～ 動画レッスン Chrome Developer
MS-Word tips 7：改ページする複数の方法 | バシャログ。
今日はMS-Wordで強制的に改ページをする方法をいくつかご紹介します。 方法1 改ページを入れる 最もオーソドックスな方法です。改ページしたい位置に「改ページ」を入れます。 改ページしたい位置にカーソルを置き、[挿入]-[改ページ]をクリックします。 →次の行から次ページへ強制的に送られます。 方法2 段落スタイルに「改ページ」の属性を指定する もう少しスマートな方法です。物理的な改ページを入れるのではなく、「この段落は新しいページから始める」という設定をします。 改ページしたい段落のどこかにカーソルを置き、[書式]-[段落]をクリックします。 →「段落」ダイアログが表示されます。 「改ページと改行」タブで、「段落前で改ページする」にチェックを入れ、[OK]をクリックします。 →カーソルのある段落が、必ずページの冒頭に来るようになります。 方法3 改ページの条件を指定する 今度は、必ず改
フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ（EFO） | バシャログ。
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
商用可！アイコン,イラスト素材検索・配布サイトまとめ【海外編】 | バシャログ。
お布団から出るのがだんだん辛くなって来ました seki です。 今回は私が普段利用している、無料＆商用でも使える、素材を配布、または検索できるサイトをご紹介します。ブックマークしておくと、いざという時大変便利。かなり有名所なので、これ知ってる！というのも多々あるかと思いますが、お付き合いくださいね。 引出しに入れておきたい海外の無料素材検索サイト 商用利用可である事がサイト内で判断しやすいサイトのみを集めてみました。 ※念のため、ご利用の前に各サイトの素材ページにあるライセンスを確認の上、ご利用下さい。 【all-silhouettes】 商用可のシルエットベクターデータを配布しています。 有料サイトも顔負けな種類と量、質の良さ。欲しい素材を見つけたら、広告ゾーンをスクロールで抜けた所にある[Download free …]の地味なボタンからダウンロードできます。 http://all-s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Sublime Text 2】改行タグ<br>をDreamweaverでのショートカットと同じようにキーバインドを設定する | バシャログ。