ブラウザのリロード要らず？ WebStorm/PhpStormのLiveEdit機能 | バシャログ。
全然Hotな話題ではなくなりましたがiPhone5をようやく手に入れました。LTEは速いです。リリースから1ヶ月以上経っていて、同じバシャログ。メンバーから「あ、まだ手に入れてなかったんだ」的な目で見られた…などということはありません。 本日はまだまだマイナーなWeb系IDE WebStorm / PhpStormの便利機能 LiveEditを紹介します。 LiveEditとはどんな機能か PhpStorm 5.0で組み込みの機能になったもので、もともとは"Instant HTML Editing" プラグインと呼ばれていたものだそうです。大きく分けて2つの機能があります。、1つ目はHTML/CSS/JavaScriptの修正を即座にブラウザ表示に反映させる機能、2つ目は、エディタのカーソルがある位置の要素をブラウザ上でハイライトさせる機能です。現時点ではChrome専用です。文で説明する
WordCamp Tokyo 2015 に行ってきました #wctokyo | バシャログ。
ねんがんの VAIO Z をてにいれた kagata です。おおむね満足しているのですが、本体色をシルバーにしたらキーボードが MacBook のぱちもんみたいで、人に見せるたびつっこまれています。これから購入を検討される方には順当にブラックをおすすめしたいです。 そんな VAIO Z をひっさげて、先週末10月31日（土）に開催された WordCamp Tokyo 2015に行ってきました。今回は参加したセッションについてご報告します。 参加したセッション 今回はエンジニアリング寄りのものを中心に以下のセッションを選びました。 【基調講演】「なんとなく」の壁を越えよう！自信を持って WordPress を選択するためのヒント オープンデータとオープンソース、そしてWordPress WordPressで行う継続的インテグレーション 入門編 -プラグイン開発・保守地獄から学んだこと- レス
【gulp】「gulp-htmlhint」でHTMLの文法をチェックする方法をメモメモ | バシャログ。
みなさま、こんにちは。hulu で「めぞん一刻」を見て、最終回でボロ泣きした kouraku です。記憶に残る思い出深い作品だったということと、大人になり結婚した今だからこそ分かる想いなんかが色々と重なって（単純に涙もろくなってきた、というのもありますが（苦笑））、最後の最後でどっと感情が溢れ出てしまった、といった感じでしょうか。いや～、名作はいつ見ても感動を与えてくれるものですよね。 さて今回は、前回までにご紹介したHTMLテンプレート「gulp-html-extend」で出力したコードに誤りがないか、例えば閉じタグが無い・・・とか、imgタグにalt属性が無い・・・とか、そんなものをチェックサイトにコピペして確認とか面倒なので、gulpにある程度任せてみたいと思います。そこで、白羽の矢が立ったのが「gulp-htmlhint」ですね。では、このプラグインの使い方についてメモメモ。 ※前
PSR-2に準拠した PHP コードを書いてみて気づいたこと | バシャログ。
現在ではロガーのインターフェイスに関する規約を定める PSR-3、PSR-0にとってかわる PSR-4、HTTP メッセージの取り扱いを定める PSR-7が追加されています。また、PSR-4の追加に伴って PSR-0は非推奨となりました。 PSR-3～7の概要については次の記事が参考になります。 PSR-3 Logger Interfaceの話: Architect Note PSR-4 Improved Autoloadingについて調べてみたメモ | kanonjiのブログ PHP - Psr7を使ってみた（というか不変オブジェクトを初めて使った感想） - Qiita さて、冒頭にも書いたとおり、ある長く続く開発プロジェクトで PSR-2をコーディング規約として採用することになりました。「採用する」というのは、これまで口約束や慣習で成り立ってきたものを明文化されたものに置き換えるという
jQuery 3.0 / jQuery Compat 3.0 alpha がリリースされたので調べてみた | バシャログ。
マッドマックス怒りのデスロードが面白すぎたのでアベンジャーズを見に行けてないminamiです。 先日jQuery 3.0とjQuery Compat 3.0 のalphaバージョンがリリースされたので内容を調べてみました。 jQuery 久々のメジャーアップデートです。今回のアップデートでjQuery2.x系はjQuery3.0に、レガシーブラウザ対応のjQUery1.x系はjQuery Compat3.0 になりました。 主な変更点を見ていきます。 .show(),.hide()メソッドの変更 地味ですが大きな変更です。 .hide() したjQueryオブジェクトにはCSSのdisplay: none がセットされ、.show() されるとその値がクリアになる。jQuery3.0 からはCSS側でdisplay: none が設定されている要素に.show() してもCSSを上書きはし
改行コードやインデントスタイルをEditorConfigで統一する | バシャログ。
横浜に5年以上住んでて新横浜ラーメン博物館に行ったことがなかったので週末行ってきました。ほとんど前情報なしで行ったので中の異空間っぷりが歩いてて楽しかったですね。 今日は、制作/開発プロジェクトで改行コードやインデントをEditorConfigというプラグインを使って行う方法について紹介します。 EditorConfigとは EditorConfig は改行コードやインデントスタイルをプロジェクト内で制御するためのプラグインです。".editorconfig" という名前の設定ファイルを置くと、プロジェクト内のファイルを作成・編集したときに ".editorconfig" の指示に従ってインデントを行ったり指定の改行コード・文字コードで保存できたりします。、有名どころのエディタ(ただし海外製)にプラグインが用意されているので、プロジェクトのメンバーでエディタを1つに共通化せず最低限テキスト
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
【WordPress 連載企画 第1回】Vagrant をインストールしてローカル開発環境を作ってみよう | バシャログ。
こんにちはエンジニアのtanakaです。今日からスタッフ持ち回りでWordPressの連載を始めることになりました。制作環境を作るところからサイトの体裁を整えるところまでやっていくのでよろしくお願いします。 今回はCentOS・Apache・PHP・MySQLのインストール・データベース作成を自動化することでWordPressの開発環境をカンタンに作る方法について説明します。 WordPressの開発環境を自分のPCに開発環境をつくるときにApache+MySQL+PHPがセットになったパッケージを利用して環境をつくることもできます。しかし実運用する環境がLinuxだと、ローカルPCからスクリプト群をアップロードしたときに想定外の挙動に悩まされる恐れがあります。 最近、開発環境をつくるツールとしてVagrantの名前を聞くことが多くなりました。Vagrantは仮想マシンを使った開発環境を構
ボーダーに画像を指定する CSS3 プロパティ「border-image」を試してみる | バシャログ。
もういくつ寝るとワールドカップですね。こんにちはLatinです。 さて、スマホサイト制作では CSS3プロパティが特に威力を発揮し、非常に便利ですよね。 そんな CSS3プロパティですが、今回は使った事のない「border-image」プロパティについて色々と調べてみました。 border-imageプロパティとは border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatの各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。 画像は上下左右それぞれのボーダー用に４枚必要となるわけ
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
【WordPress】ユーザーグループごとに投稿カテゴリーを制限する方法 | バシャログ。
来年のお正月は姪っ子にお年玉をあげて、「倍返しだ！」と言われたい Latin でございます。 さて、WordPress運用の中で、 ユーザーグループ（権限）を細分化して、ユーザーグループごとに投稿カテゴリーを制限したいケースなんかがたま～にあったりするかと思います。 そんな時に役立つ方法を備忘録がてらにまとめていきます。 想定する要件 投稿ユーザーを自由にグルーピングしたい ユーザーグループに応じて、投稿カテゴリーを制限させたい User Role Editor と User Access Manager の二つのプラグインを用いる まずはこの2つのプラグインをインストールします。 User Role Editor http://wordpress.org/plugins/user-role-editor/ User Access Manager http://wordpress.org/
【Photoshop】あると便利！無料パターンを集めました。 | バシャログ。
なかなかマリノスがACLで勝てないので、ヤキモキしているokadaです。 今回は、Photoshopパターンを集めました。よろしくお願い致します。 追加方法 ダウンロードした.patファイルをダブルクリックをして追加するか [レイヤー効果]→[パターンオーバーレイ]をクリックし、1から3をクリックし、パターンの読み込みで追加します。 {Patterns Triangles} 三角形をベースにしたジオメトリックパターン {Patterns Triangles} New Free Paper Patterns 紙のテクスチャパターン New Free Paper Patterns Handmade paper pattern set こちらも紙のテクスチャパターン Handmade paper pattern set Micro Patterns シンプルなシームレスパターン Micro Pa
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
【Photoshop】カスタムシェイプを集めました！ | バシャログ。
横浜にタワーレコードが戻ってくる事に、大感激のokadaです。 どうぞよろしくお願いします。 今回は、Photoshopカスタムシェイプを集めました。 追加方法 ダウンロードした.cshファイルをダブルクリックをして追加するか カスタムシェイプツールをクリックして、1から3をクリックし、シェイプの読み込みで追加します。 Speech Balloon Shapes 吹き出しアイコンのシェイプセット Speech Balloon Shapes 12 Pretty Chat Photoshop Shapes こちらも吹き出しアイコンのシェイプセット 12 Pretty Chat Photoshop Shapes ARROW SYMBOLS ICONS 矢印のシェイプセット ARROW SYMBOLS ICONS Free Label And Badge Vector Shapes バッジのシェイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【Sublime Text 2】改行タグ<br>をDreamweaverでのショートカットと同じようにキーバインドを設定する | バシャログ。