C-brains Life - プログママー（ママプログラマー）の一日 | バシャログ。
昨日よりスタートした、「C-brains Life」。 第 2 回目は プログラマであり3児のママでもある（＝プログママー、だそう。余談ですが、ママというよりお母ちゃんのほうがしっくりきます。） inoue の慌ただしい 一日をご紹介します。 inoue のパーソナルデータ シーブレイン入社3年目。エンジニア歴10年。 33歳。同い年の夫と7歳の息子、3歳の娘、0歳の坊やと5人暮らし。 プログママー inoue の、ある一日のタイムテーブル 起床坊やのぐずり声が目覚まし代わりの毎日。 赤ちゃんのお世話をしつつ、朝食作り。 基本は和食なので、ごはんとみそ汁と、なんか1品（今日はレンコンとブロックベーコン、水菜の炒め物）。あとはふりかけ、納豆、しらすなどをそろえておけばOK！としてます。 5:00
WordPress 2.6.2 で使える10のプラグイン | バシャログ。
2008年9月9日にリリースされた WordPress 2.6.2。 Version 2.6 以降では新たに、編集履歴を管理できるようになりました。 編集履歴が使えるとなると、企業サイトでの導入も検討してみてもいいかもと思い、ローカル環境に WordPress 2.6.2。をインストール。 Version 2.5 までは使えていたプラグインが Version 2.6 で使えないものが多かったので、 今回はVersion 2.6.2 で動作確認がとれたプラグインをご紹介します。 1. Category Order カテゴリの並び替えプラグイン ページ下部の「WordPress Plugins」からダウンロード 上下の矢印で並び順を変更、左右の矢印でインデントの調整ができます。 あくまでインデント、入れ子の関係ではありません。 2. Contact Form 7 日本語を送受信可能な送信フォー
Web 開発におけるディレクトリ構成 | バシャログ。
Web サイトを開発する際、みなさんはどのようなディレクトリ構成で進めてますか？ 今日は、シーブレインはこんな感じでやってます、というディレクトリ構成をご紹介してみようと思います。 なお、名称などは実際と少々異なる部分もありますし、この形式が全てというわけではありません。 ┬ [app] ────┬ [functions] ├ [bin] └ [classes] ├ [config] ├ [cgi-bin] ├ [documents] ├ [html] ├ [lib] ├ [smarty]───┬ [templates] └ [tmp] └ [templates_c] ■ app 実際に動く部分です。「functions」に関数群を、「classes」にクラス群を格納しています。ちなみに、MVC で言うところの M の部分、すなわち「モデル」に相当するものも、ここに置いています。 ■ bi
パンくずリストのマークアップについて | バシャログ。
階層構造を持つ WEB サイトの場合、垂直方向のナビゲーションとして「パンくずリスト」が有効です。 「採用情報 ＞ 中途採用 ＞ 募集要項」のように表現するのが一般的で、閲覧中のページが階層構造上のどの位置なのかを確認したり、上位のページを辿っていくことができるようになります。 今のところ「パンくずリスト」のマークアップ方法に正解といえる決定的なものはありません。「パンくずリスト」というくらいなのでリストだという解釈はできます。いくつか妥当と思われる例を挙げてみます。 ケース 1） パンくずリストは階層構造のリストだからマークアップも階層を意識したい…… <ul> <li><a href="/recruit/">採用情報</a> <ul> <li><a href="/recruit/career/">中途採用</a> <ul> <li>募集要項</li> </ul> </li> </ul>
Movable Type4.2 を使ってみた | バシャログ。
これまで弊社では、MovableTypeをお客様のサイトで使用する際にはMT3.36をお勧めしていました。 その理由は、 ・MT4の管理画面がとてつもなく重い ・このバージョンならだいたいのことは把握している、 ・日々の作業に追われ、MT4のスキルがない です。 このたびMT4.2にがっつりと触れる機会がありましたのでその印象などを。 うまい！早い！ MT3.36の頃、エントリ数が200件とかを超えたぐらいで再構築時にものすごく時間がかかっていました。 それがMT4.2になったらサクサクになってます。 以下は http://www.movabletype.jp/ から引用 ブログのサイト内検索にかかる時間は2ケタ減 Movable Type 4.1 から 4.2 にアップグレードするだけで構築処理速度は 33% アップ。さらに テンプレートモジュールのキャッシュ機能を使用すると、45% 以
国内の大手サイトが採用しているHTMLのバージョン | バシャログ。
最近は立て続けに WEB サイトの CSS コーディング（※コメントで間違いをご指摘いただいたので修正。書いたらちゃんと読み返せですね。お恥ずかしい…）の設計をやっていまして、毎回最初に悩むのが採用する HTML のバージョンです。 弊社では XHTML1.0 Transitional か XHTML 1.0 Strict のどちらかを要件によって使い分けることが多いですが、実際のところ世の中の大手といわれているサイトではどのバージョンが採用されているのか。 調べてみました。 全て日本国内サイトのトップページで、2008年8月4日現在のものです。調査対象の選定は良く言えば「柔軟」、悪く言えば「適当」に選びましたので、若干の偏りはご容赦ください。 IT大手
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
Fireworks と Photoshop 、フォントの見え方をくらべてみた | バシャログ。
シーブレインに入社する以前は、ウェブサイトの画面デザインはもっぱら Photoshop を使用していました。 現在は いろいろな事情から Fireworks を使って制作を行っています。 Fireworks を使い始めて最初に感じたことは、「なんかフォントが荒れてない？」ということでした。 今までなんとなくそんな気がするというだけで確認してなかったな、ということで、ちょっと比較してみます。 とりあえず、お仕事でよく使わせてもらっている「新ゴ Pro B」で比べてみようと思います。 色は #000000 。それぞれ Photoshop CS3 と Fireworks CS3 で文字を打ち、キャプチャしたものを並べてみました。あえて文字間のチューニングは行っていません。 あれ、思ったより違いがわからないな。 15px で打ったフォントを拡大ツールを使って 150% 大きく伸ばしたりしてるのに、
【Fireworks】Favicon を回してみる。 | バシャログ。
ドット絵職人たちが腕を競い合い、鎬を削る Favicon。今回は Favicon を回してみます。 まずは、普通の favicon.ico を作成します。 Favicon のサイズはドット絵職人が燃える 16×16 です。 Created by TOYAMA Fireworks で gif を作って ＠icon変換 で ico ファイルに変換するのが手軽なので好きです。 次に Fireworks で favicon.gif を作成します。アニメーション gif です。 作成した favicon.ico と favicon.gif を両方ともサイトのドキュメントルートにアップロード。 そして、下記のコードを html の head の中に記述します。 <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type=
[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai
![[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
Flashで動画を再生しよう！第 3 回 FLVプレーヤーをつくろう1/2。 | バシャログ。
集中連載「Flash で動画を再生しよう！」の第 3 回です。 今回は FLV ファイルをブラウザで表示するための、swf ファイルを Flash CS3 のコンポーネント「FLVPlayback」を使って説明します。とても簡単です。 STEP1 まず新規ドキュメントを作成し、ツールから [ウィンドウ(Ｗ)] → [コンポーネント(Ｃ)]を選択します。 コンポーネントはこんな感じです STEP2 コンポーネントの [Video] → [FLVPlayback]をドラック＆ドロップしてステージに配置。 STEP3 パラメータの設定をします。 パラメータの詳細は以下の通りです。 scaleMode が「MAINTAIN_ASPECT_RATIO」と「NO_SCALE」の場合で、FLV ファイルのサイズがプレイヤーよりも小さい時に表示する位置の設定。 align
[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
3日で作るPHPアプリケーション | バシャログ。
暑い日が続きますね。いかがおすごしでしょうか？ 本日ご紹介させていただく本は、「3日で作るPHPアプリケーション」です。 3日ですよ、3日！ この本は、PHP初心者の遠藤さんとPHPプログラマーの秦さんの対話形式で始まります。 対話形式といっても、偉い先生が初心者の子供をあやすようなゆるいテンポではありません。 生徒さんが優秀なのでサクサク進みます。 レンタルサーバーを使うことを前提としているので、インストールなどのPHPの動作環境の設定なども省かれています。 PHPは数百円で借りられるレンタルサーバーでも動きますし、実際何冊か本を持っていると、どの本も始めは「インストール」でこの部分要らないなーと思うこともしばしば。 基本的な事柄が載っている本をすでに持っていて、「なにか動くもの作りたい！」という人にはぴったりではないでしょうか。 まったくのプログラムはじめて！な方の場合、分からない部分
Ajax 通信を JSON でシンプルに実装するデモ | バシャログ。
Ajax といえば、最近の地図サービスはだいたいドラッグするとページを読み替えることなく移動することができて、便利というか、当たり前のものとして受け入れられるようになったと思います。 さて、そんな Ajax でサーバとやりとりする方法なんですが、JSON という表記形式を利用すると、最低限の通信だけならシンプルに実装できます。本日は、JavaScript ライブラリの jQuery と PHP ( 5.2.0 以上、または PECL で json をインストール ) を使い、データのやりとりに JSON を使う方法を紹介します。ソースコード部分だけなら JavaScript と PHP で10行程度ですので、興味のある方はぜひお試しください。 サーバからプロフィールデータを受け取ってリストで表示するデモです。Firebug等で通信内容をチェックしてみてください。 JSON demo サーバ
【Photoshop】簡単に写真の一部をカラーにする方法 | バシャログ。
今回は簡単に一部だけカラーで表示するPhotoshopのTipsをご紹介します。 STEP1 画像を用意します。 STEP2 メニューから[イメージ]→[色調補正]→[彩度を下げる]を選択。 STEP3 ツールから[ヒストリーブラシツール]を選択。 STEP4 カラーにしたい部分をなぞる。 たったコレだけで実現可能です。是非お試しを。
ちょっとした工夫でユーザビリティを向上させる4つのコツ | バシャログ。
Webサイト製作をする上で、ユーザビリティはとても重要な要素です。 AjaxやFlashを駆使し、大いにユーザビリティを向上させるサイトも多く見られます。 そういった派手なエフェクトも良いですが、注意しないと気づかない、でも重要な仕掛けというのも存在します。 そんなちょっとした心遣いでユーザビリティを向上させるコツをまとめてみました。 人はそれを優しさと言う。 フォームにラベルをはる 基本ですが見落としがちですね。 ラベルをはることで、クリックしやすさを向上します。 <input type="radio" name="r" value="1" id="r_1"><label for="r_1">前田</label> <input type="radio" name="r" value="2" id="r_2"><label for="r_2">鬼塚</label> <input type=
【Fireworks】5分で懐かしい液晶画面風の画像を作る方法 | バシャログ。
今や懐かしい液晶画面風の画像を素早く作成する TIPS です。 使用するソフトは Fireworks8 です。 STEP1 まず適当な大きさの矩形に、塗り（#919E91）とフィルタ（シャドウ 内側）を設定します。 パネルに適度なノイズ感を出すため、塗りに薄くテクスチャ（水平線2）を設定します。 STEP2 同じ大きさの矩形を重ね、塗りを無くしてストローク（太さ 4px）を設定することで枠にします。 ストロークにもフィルタが有効ですので、ここではベベル（内側）をかけています。 STEP3 適当に文字を書きます。文字色は真っ黒だと不自然なので #333333 です。 テキストのアンチエイリアスをオフにするのがポイントです。 STEP4 そのままだと味気ないので、いかにもなパーツを配置したり一部の文字を白抜きにしたりします。 白抜きにする文字の色は背景色と同様に #919E91 です。 STE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
C-brains Life - Webプログラマーの作り方（ichikawaの場合） | バシャログ。
C-brains Life - WEB制作アシスタント nakayama の一日 | バシャログ。
C-brains Life - WEBディレクター sakai の一日 | バシャログ。