Windows XPのサポート終了、SONYのPC事業撤退、消費税増税というまさに時代の「買い替え潮流」によって、VAIOが売れに売れまくってるそうですね。私もVAIO Proを買おうか真剣に悩んでます、Latinです。 乗るしかない、このビッ･･･(略 さて今回は、WordPressの「投稿者変更をカスタム投稿タイプにも実装する方法」です。 記事の作成者変更が必要な運用ケース さて、企業サイトでもWordPressの導入が益々増えてきている昨今ですが、企業やサイトの規模によっては、コンテンツの更新担当者が複数いるケースも多く、部署ごとに担当コンテンツが割り当てられているような企業も多いかと思います。 そういったケースの場合、作成者（ユーザー）単位でコンテンツの出し分けを行ったりする事も多い訳ですが、そこで湧き上がる問題の一つが、WordPressのカスタム投稿タイプで作成されたコンテンツ

気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま

夕食で肉をほとんど食べない代わりにヨーグルトをよく食べているtanakaです。 WebStorm 7 がリリースされましたね。PhpStorm 7もそのうちリリースされると思います。今回はJavaScript開発支援機能の中でも特に重要なJavaScriptデバッガの使い方を紹介します。実は私も今のいままで使ったことがありませんでしたが、これは便利です。 インストール、事前準備 前提として、ブラウザはChromeを使うこととします。 ブラウザ拡張機能 まずは、Chrome拡張機能JetBrains IDE SupportをChromeにインストールしましょう。 ウェブサーバ もし、ウェブサーバが動いてない場合は、PhpStormのビルトインウェブサーバをセットアップします。(これはなくてもデバッガの利用は可能だと思いますが、別ドメインのスクリプト読み込みなどで制限があるようです。)[Php

昨日、娘と「ドキドキ プリキュア ミュージカル」を見に行ってきました ishida です。 アニメのエンディングテーマをかなりの回数踊っていたので、僕の踊れるようになったかも！？ さて、今回は jQuery モーダルプラグインのご紹介です。 これまで、モーダルウィンドウの実装は Colorbox でいいんじゃね？と思ってましたが、 モーダル内の要素が、ajax や iframe ではなくて ページ内にて非表示にしているパータンの場合には 以下のライブラリのほうがいいかも。 かなりざっくりですが、サンプルデモはこちら HTML/JS HTML/JSのコードは、以下です。 <h1>leadModal.js test</h1> <p><a href="#test" rel="leanModal">モーダル表示</a></p> <div id="test" class="modal"> <p>Lo

レーザー治療までしたのにくしゃみ出まくってるんですけど、いったい何なんですか。どうもこんにちは nakamura です。 PHP-5.3.x 系もだいぶ浸透してきた今日この頃ですが、今日はここ最近新規にウェブサーバを立てる際にいつもデフォルトでやっている PHP 周りの設定をまとめてみました（よくよく考えたら PHP-5.3.x 系とかあんまり関係ないけど）。環境は CentOS 5 or 6 の PHP-5.3.x です。remi リポジトリを使って最新版の PHP を入れてます。 /etc/php/php.ini 毎回さわっているのは大体この辺ですね。他はサイトの仕様にあわせて適宜。 [PHP] expose_php = Off [Date] date.timezone = Asia/Tokyo セッションの保存先を memcached に セッションの保存先はデフォルトで memca

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

プログラムの実行を一時停止(ブレーク)させて変数の状態をチェックしたり、関数の呼び出し階層(コールスタック)を調査できる機能です。 使いやすくなった機能 タブで複数のファイルを開けるようになりました(複数のコードを比較することはできないようです) ミニファイされたコードの展開(ボタン1つワンクリックでできるようになった) ブレークポイントやテキスト検索でヒットした位置がスクロールバーに表示されるようになった ブレークしたときのローカル変数、ウォッチ式、コールスタックが同時に見られるようになった トレースポイント トレースポイントはIE11で追加されたものです。ブレークポイントに似ていますが、設定した行で停止せず、コンソールに残す一時的なログを設定できます。 ソースコードにconsole.logを書かなくて済んだり、リロードしなくてもよくなるのでかなり便利な機能かと思います。 条件つきブレー

夏休みをとられている人が多いので電車が空いていて出勤が快適な週ですね。tanakaです。 今日はIDE PhpStormの機能のなかで既存のコードを包む機能「Surround Template」を紹介します。 プログラムのコードというのはなかなか最初から最後まで一直線に書いていくのはできなくて、あとでifブロックで囲んだり無名関数で囲んだりしたくなるものです。そんなときに使えるのが「Surround Template」。…といっても実際のところまだ使ったことがありません。 使い方 まず、Surround Templateで何ができるかというと、すでに書かれたコードをifブロックやforブロックで囲むことができます。JavaScriptなら無名関数で囲めますし、htmlファイルならタグで囲むことができます。 上記のように文字列を選択した状態でCtrl+Alt+Tを押します。すると次のような選

今回はJavaScriptで書くファサード（Façade）パターンについて調べてみました。 ファサードはフランス語で「建築物の正面のデザイン」という意味だそうです。 なぜ使うの？ ファサードパターン自体はとてもシンプルで、いくつかの機能の「窓口」になるクラスやオブジェクトを作り、利用しやすくするパターンです。 jQueryで一番よく使うであろう $() 関数もファサードパターンの一つです。 例えば要素の見た目を変える機能を実装するとして、個別の要素を制御するオブジェクトと、窓口になるオブジェクトを用意すると以下のようなコードが考えられます。 // 色を制御するオブジェクト function colorObj() { return { changeColor: function() { console.log('色を変えます'); } } }; // フォントを制御するオブジェクト func

JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',

iPhone 5s 手に入れました。発売当日予約しましたが手に入れたのは3週間後で大分乗り遅れ感のあるtanakaです。…と思ったら、次はiPadの発表が。 アップル関連のデバイスもタイムリーな話題ですが、PhpStormも最新版のバージョン7がリリースされました。PHP5.5対応を始め新機能が追加されていますが、今回はその中で強化されたデータベースツールを紹介します。 今回の記事はDatabase Tools and SQL Editor Changes in PhpStorm 7 | JetBrains PhpStorm Blogの内容を実際に試してみたものです。 前準備 前提としてデータベースツールを試す前に接続設定が必要です。SQLが書きやすい！PhpStormからMySQLに接続する方法 | karakaram-blogが参考になるかと思います。開発環境であればデータベースを作っ

こんばんは Latin です。 先週末、CSS Nite LP.29 In-house SEO に参加してきました。いや～勉強になりましたし、非常に面白かったです。 という事で今回は、SEOにも通ずる部分でもあるサイト表示の高速化に役立つ WordPress の画像圧縮プラグインのご紹介です。 プラグインをインストール まずは公式サイトからプラグインをインストールし、有効化。 http://wordpress.org/plugins/ewww-image-optimizer/ 試しにアップロード 画像容量が5.2%、軽くなりました。あれ？思ったより圧縮されてない･･･ 設定で画像のmeta情報を削除するよう再設定 プラグイン設定画面の Optimization settings の部分の「This wil remove ALL metadata (EXIF and comments)」にチ

この前の土曜日は、リーガ・エスパニョーラのバルサ vs レアルのいわゆる「クラシコ」をテレビ観戦したおかげで日曜が眠くて仕方なかった kimoto です。 ネイマールがすっかりフィットしてて驚きました。いやー、ジェフに来ないかなー。 さて本日は、世のウェブマスターの方々にはお馴染みだと思いますが、Fetch as Google をご紹介します。 Fetch as Google とは？ Fetch as Google とは、Google に対し、「クロールお願いします！」という申請をするツールです。 Google ウェブマスターツールを使っている人なら問題なく使えます。 どんな時に使うべきかと言うと、まずはやはり新規サイトを立ち上げた時。できてすぐだとなかなかクローラーが回ってきてくれないこともあります。まずはこれを使ってインデックスしてもらえるようにするといいでしょう。 また、既存のページ

逆転裁判5をやるためだけに3DSを買ったtanakaです。いいじゃん！3DS。 さて、PhpStorm7 はまだリリース前のPhpStorm Early Access Programです。ライセンス購入して使ってるPhpStorm6でアウトライン表示ができなくなったり、データベーステーブル表示でマルチバイト文字が化ける問題があったので、EAP版を導入したところ快適なので、すでにこちらを使っています。 PhpStorm7の新機能ではありませんが、ビルトインウェブサーバーを使ってみたので紹介します。 ビルトインウェブサーバーとは PhpStormをインストールするとすぐに使える標準付録のサーバです。Apacheとか入れなくても動きます。PHPを動かすには別途インストールが必要です。 インストール まず、PHPをインストールします。Zipをダウンロードして展開し、php.iniを設定します。 P

みなさんはじめまして。 シーブレイン、Webデザイナーの Latin です。 今回が初ブログとなります（汗）今後ともどうぞ宜しくお願いいたします。 早速何を書こうか非常に悩みましたが、まずは基本に立ち返り、"画像処理作業"などの日常のルーティンワークを格段に早く、効率的にする事ができる Photoshop のアクションコマンドをまとめてみました。 え？そんなもん既に使ってるって？ そうおっしゃらず･･･まだ使ってない方はぜひ一度試してみてくださいね！ 今回は私が個人的によく使っているアクションコマンドと、有用性の高そうなものをご紹介させていただきます。 その前に Photoshop アクションコマンドの簡単な説明を。 【 Photoshop のアクション】とは？ 例えば、写真のリサイズや色調変換などの作業を10回･･･100回と繰り返しやってると嫌気が差してきますよね＾＾； アクションはそ

ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな

新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで

iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img

「iPadが薄くて軽くなったら買うね」と言っておきながらiPad2を傍観しているminamiです。 今回は便利なjQueryのプラグインの紹介です。 Ajaxでも「進む」「戻る」ボタンを使いたい Ajaxを利用して、ページ遷移することなくコンテンツを展開するWebページも増えてきていると思いますが、URLが遷移しないので、ブラウザの「進む」「戻る」ボタンを使ってさかのぼることができないのがネックです。 そこで最近よく見かける手法が、URL中の"#"以下の文字列を元にページの情報を表示する方法です。TwitterのPCページなどでも取り入れられています。ちなみにこの方法の是非についてもいろいろと議論があるようですが（主に検索エンジン対策）、そこは割愛します・・・ jQuery hashchange eventを使う jQuery hashchange eventは、jQueryのプラグインと

こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery