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

ゴールデンウィークはゴールデンに過ごせそうにない 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 の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読

今週末に劇場公開される『平成ライダー対昭和ライダー 仮面ライダー大戦 feat.スーパー戦隊』に草加雅人が登場するときいて期待よりも不安に駆られている kagata です。仮面ライダーが30人も出てくるお祭り映画で、彼の腐りきった性根もとい、複雑に屈折したキャラクターを描ききることができるのでしょうか。いきなりいい奴になってたらどうしよう…そう、たとえば劇場版ジャイアンのように…。 さて、今回は PHP とパスワードハッシュのお話です。パスワードを平文で管理していた時代は遠く過ぎ去りました（と思いたい）。またパスワードハッシュのアルゴリズムも、かつてよく使われた MD5 や SHA1 よりも安全とされるものが登場しています。そんな中、今現在のベストプラクティスはどうなっているのか、PHP マニュアルの公式（？）見解をひもといてみました。 PHP マニュアルの見解 PHP マニュアルにはその

4月になったので心機一転ダイエットします！ 思えば3月も心機一転しました。そういえば1月もしました。 …がんばります！ PHP 利用している人にはお馴染みの、「strtotime」という関数があります。 英文形式の日付を Unix タイムスタンプに変換してくれる、それはそれは便利な関数です。そしてこれがまた、凄く沢山の文字列をサポートしてて、上手くつかと色々を便利なのですが、ついつい忘れて毎回ググってしまっている自分がいます。 ということで、自分への備忘も兼ねて記事としてまとめてみようと思います。 基本 まずは strtotime の基本的な使い方。date 関数と組み合わせると便利ですね。 たとえばこんな感じ。 echo date("Y-m-d", strtotime("today")); これで「2014-04-02」が出力されます。まあこれは「date("Y-m-d")」と同じですね

桜を見ながら飲み食いしたいminamiです。 前回に引き続きJavaScriptで書くデザインパターンです。今回はシングルトンパターンについて調べてみました。 なぜ使うの？ シングルトン(Singleton)パターンは、以下のような特徴があります。 あるクラスのインスタンスを一つだけにする つまり同じクラスを使って新しいオブジェクトを再度作成すると、最初に作ったオブジェクトの参照になる。 作られたオブジェクトへのグローバルなアクセス方法を提供する 機能の重複する新規のインスタンスを作ることなく、一つのオブジェクトを使いまわすことができるのでリソースを無駄にしません。また、インスタンスを一つだけにすることでグローバルな関数や変数を無駄に増やすことがなくなるので競合の危険をなくします。このあたりは前回のモジュールパターンの考え方と同様です。 簡単な書き方 var Single = { myNa

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

横浜にタワーレコードが戻ってくる事に、大感激の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 バッジのシェイ

どちらの関数も不正な引数を渡した場合はNULLが返ってきます。 指定した日付が、その年の何週目かを取得する WEEK(date[,mode]) WEEK()関数を使用することで、引数に渡した日付式（YYYY-MM-DD）が その年の何週目なのかを取得することができます SELECT WEEK('2014-12-01',3); -> 49 modeには0～7の数値を渡すことができますが、渡す数値によって「最初の週を"0"として取得するか、"1"として取得するか」「日曜始まりか、月曜始まりか」 「どの週を最初の週として扱うか」といった部分の動作が異なります。 例えば、modeに「3」を渡した場合、「月曜始まり、最初の週を1として取得、1月4日を含む週を第一週として扱う」という動きをします。 SELECT WEEK('2014-01-01',3); -> 1 「1月4日を含む週を第一週として扱う

いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v

こんにちはfukasawaです。ダイエットのためにアンクルウェイトを購入したのですが、足首が太すぎて巻けませんでした。痩せねば。 さて、今回はMySQLの日付時刻関数を使用して、日付、時刻の差分を取得する方法についてです。PERIOD_DIFF(),DATEDIFF(),TIMEDIFF(),TIMESTAMPDIFF()を使用して日付や時刻の差分を求める方法について調べてみました。 ※MySQL 5.6.14で検証しています DATEDIFF(expr,expr2) 開始日 expr と終了日 expr2 までの日数を取得します。(v4.1.1以降) SELECT DATEDIFF('2013-12-31','2013-02-20'); -> 314 SELECT DATEDIFF('2013-12-31','2014-02-20'); -> -51 SELECT DATEDIFF('2

DJ NOBU 「 Dream into Dream 」がヘビロテのokadaです。 どうぞよろしくお願いします。 今回は、使える！Photoshopブラシを集めました。 よろしくお願いいたします。 追加方法 ダウンロードした.abrファイルをダブルクリックをして追加するか ブラシツールをクリックして、1から3をクリックし、ブラシファイルの読み込みで追加します。 ライティング系 光を表現したい時に使いたいブラシです。 Quantum Brushes Life Brushes Hyper Brushes Abstract 04 Light Beams + Rays Brushes グランジ系 グランジ＝汚れた感じを表現したい時に使いたいブラシです。 Grunge Ady's Splatter Brushes 3 Grunge Brushes Free Grunge Textured Phot

huluで特に見る予定のなかった映画を見てしまうminamiです。 JavaScriptにはいろいろな演算子があって便利に使えますが、~（チルダ）は今までほとんど使ってこなかったので使い道を探しました。 チルダは何をするもの？ JavaScriptのチルダ演算子はなにをするものでしょうか？調べてみます。 ビット演算子 ビットごとの NOT: オペランドの各ビットを反転します。 なるほど。わからん。かいつまんで説明すると、数値を10進数や16進数ではなく32ビットの集合（0と1）として扱います。2進数ですね。整数をビット反転させると必ず符号を反転して1引いた数になります。 console.log(~-4); // 3 console.log(~-3); // 2 console.log(~-2); // 1 console.log(~-1); // 0 console.log(~0); //

ソチってどっち？Latinです。今回は Google Analytics のイベントトラッキングの使い方についてです。コレ、毎回ググってる気がするんですよね･･･。なのでここらでまとめておこうと思います。 従来のクラシックアナリティクス（非同期型）とユニバーサルアナリティクス 従来のクラシック（非同期型）とユニバーサルアナリティクス版で実装の方法が若干違ってきますが、呼び出すメソッドが異なるだけで内容に大きな違いはありません。 今現在利用中のアナリティクスが従来型なのかユニバーサルアナリティクスなのかは、Google Analytics 画面の「アナリティクス設定→トラッキング情報」で確認できます。 また、実装されたトラッキングコードでも確認が可能です。 従来の非同期型のトラッキングコード例 _gaq.push(['_setAccount', 'UA-1234567-1']); ユニバーサ

初めまして、 kagata です。『バシャログ。』に記事を書く人を募集していると聞きつけて（？）、はるばる京都からここ横浜まで引っ越してまいりました。以後よろしくお願いいたします。 さて、記念すべきデビュー戦となる今回は、PHPで配列をいくつかに分割するという操作をするにあたって考えたことをご紹介します。そう難しくない話なのですが、どうぞおつきあいください。 例題：10個の要素を持つ配列を4個の部分配列に分割せよ はい。お察しのとおり、タイトルで「等分する」とうたっておきながら等分できっこない例題を立てました。余りが出る場合どうするかをあわせて検討しようということです。では始めます。 方法1. array_chunk() を使う PHPには配列を分割するビルトイン関数として、 array_chunk() が用意されています。 配列を、要素数が size の配列に分割します。 最後の部分の要

今月は徒歩通勤すると決めたminamiです。 今年のWebデザイントレンドの一つに、シングルページデザインや無限スクロールデザインなどがありました。そういったデザインに必須ともいえるあしらいが、画面全体を区切るページ分割の要素。それだけをやたらと集めてCSSも公開している記事がおもしろかったのでご紹介します。 :before,:after などの疑似要素や、SVGを使っていますのでモダンブラウザでの閲覧が前提になります。 A Collection of Separator Styles | Codrops 吹き出し風の下向き三角形。中央下向きに視線を誘導して使いやすい形ですね。 斜めにスパッと。別名「イアイ」っていうやつですね。 ポッチ。三角よりかわいい雰囲気。 これも使いやすい斜めの交差。下向きの矢印がエスカレートしたらこんな風なデザインになっていった感じですかね。 曲線を使って柔らかく

JOJOのアニメ第三部が正式に決まったそうですね！ 楽しみ～な、にわかファン Latin です。 最近のWordPress界隈ではAmazon Web Serviceが俄然盛り上がっておりますが、大好きなWordPressを守るため、セキュリティ対策をまとめてみました。 初期セットアップ・設定系の対策 データベースのプレフィクス（接頭辞）を変更する wp-config.php 内の「wp_」の接頭辞を任意のものへ変更します。 その場合、追加で以下の作業が発生します。 phpMyAdmin などを使い、データベースのテーブルネームを変更したカスタムプレフィクスに変更する。 options や usermeta テーブルなどの他のフィールドでも「wp_」プレフィクスが使われている可能性がある為、以下のクエリーを走らせてプレフィックスを変更する。 SELECT * FROM `myprefix_

先週末都内に用事があったので、まだ一度も見たことがない隅田川花火大会、行くぞ～(後半から)と思っていたら雷雨に遭い花火が見られなかった、tanakaです。 今日は時間のかかるコマンドを実行させるときに便利な nohup を紹介します。 それなりのデータ量を扱うアプリケーションを運用していると時間のかかるシェルタスクを実行しなければならないこともよくあります。そんなとき便利なのがnohupです。つい最近までこのコマンドを知らなかったのですが、もし必要があればGNU Screenでデタッチすれば同じことが実現できていました。しかしGNU Screenがない環境で実行する必要があり、調査して見つけたのがnohupです。 時間のかかる処理のサンプル まずはnohup を使わないでプログラムを実行してみます。以下は1秒ごとに標準出力に文字列を出力し、20秒で処理が終わるプログラムです nohup_t

パシフィック・リムは吹き替えが見たい。minamiです。 サイトの入力画面は基本的なinput要素やtextarea要素を使うことも多いかと思いますが、一味違う見た目にすることができるjQueryプラグインを集めてみました。 扱いにくいセレクトボックスを使いやすくする『Chosen』 セレクトボックスを使いやすくしてくれるプラグインです。検索ボックスや複数選択など、UIデザインの参考にもなりますね。 Chosen エクセル風のデータグリッドを作れる『Handsontable』 エクセルのような表形式の表示を簡単に作ることができます。かゆいところに手が届くカスタマイズやTipsが紹介されています。 Handsontable 日付だけでなく時刻もピックできる『pickadate.js』 デートピッカーライブラリはいろいろありますが、モバイルフレンドリー、レスポンシブ、軽量をうたっています。日付