MySQLのset型、enum型でインデックスを活用MySQL

まえだ | 2010年6月 9日 18:41
まえだです、こんにちは。

今回はMySQLのごくごく末端的な話。

MySQLの特徴的なデータ型に、皆さまご存じのset型、enum型があります。

実際には数値型で保存されているのですが、
selectでカラムを指定して呼び出した際には、
数値に関連付いた文字列が表示されます。

特にphpMyAdminを利用している際には、
idと関連付いた文字列テーブルを別途で用意する必要がなく、
joinしなくても直感的にデータを扱えるのがメリットです。

しかし、プログラム側で分岐処理をかける場合や演算を行いたい場合など、
インデックスをそのまま参照した方が便利な場合もあります。

その場合の引き出し方法は簡単です。
カラム名に「+0」を追加します。

例えば、カラム名=columnとして、
column+0

インデックスを参照する際に注意が必要なのは、
enum型→1～65,535の連続した数字
set型→1,2,4,8…の2進数ベースの数字
が割り振られることです。

必要に迫られなければ利用することはないですが、
頭の片隅にでもおいておくと、いざというときに便利です。

【参考】
・MySQL リファレンスマニュアル
http://dev.mysql.com/doc/refman/4.1/ja/enum.html
http://dev.mysql.com/doc/refman/4.1/ja/set.html
| | comments(0) | trackbacks(0) |

Fireworksで.icoファイル(ファビコン)を作成する方法Fireworks

けっつん | 2010年6月 8日 18:30
こんにちは、けっつんです。

こないだの土日、社長はミラコスタにお泊まりしていたようですが
私は実家に帰り、ひさしぶりにお菓子作りとかしちゃいました。
ちんすこう作りました。ちんすこうって作れるんですね。
ちょっと焦げましたがちゃんとちんすこうでした。

さて、今日のテーマです。

Fireworksで.icoファイル(ファビコン)を作成する方法

.ico形式のファイルを作成するのに、いちいちジェネレーターを使ったり
Photoshopにプラグイン入れて書き出してみたりなど
いろいろ方法はあるかと思いますが、
今回はサイブリッジのデザイナのように、普段のデザイン作業はFireworksで！
ほかのソフトをいちいち立ち上げるのメンドイんだよね
というひとにオススメのエクステンションをご紹介します。
 

インストールと使い方

ExportAsFavicon | johndunning.com

ここからダウンロードしたファイルをFireworksにインストールします。

まず、「コマンド」→「Favicon」→「New Favicon - 16X16」から、新規アートボードを作成します。
labo_favi1.jpg
ファビコンにする画像をつくったら...

labo_favi2.jpg「コマンド」→「Favicon」→「Export as Favicon」で書き出し先を指定。
Favicon.icoファイルが書き出されます！

ただ、まだモチーフの輪郭にアルファチャンネルが効かなかったりなど
痒いところに手が届かない感があるエクステンションですが...
今後に期待です!!!




| | comments(0) | trackbacks(0) |

HTML5のcanvas属性に触れるHTML + CSS

京茶華 | 2010年6月 3日 11:32

序章

甘い物は苦手なのですが、意外とものすごくジュースを摂取しており、
そういう流れのせいで、健康診断の尿検査にひっかかってしまったのだと反省し、
基本的にインスタントコーヒーのブラックのみ摂取しようと決めました。
京茶華です。

本日はHTML5で追加されたcanvas属性を利用し、円を描きます。

まず、結果は↓のようになりました。



HTML表示用

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 - SAMPLE</title>
</head>
<body>
　<h4>◇circle</h4>
　<canvas id="c1" width="140" height="140"></canvas>
　<h4>◇Circular arc</h4>
　<canvas id="c2" width="140" height="140"></canvas>
　<h4>◇paint</h4>
　<canvas id="c3" width="140" height="140"></canvas>
</body>
</html>

Javascript

onload = function() {
draw1();
draw2();
draw3();
};
/* circle */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
}
/* Circular arc */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 10 * Math.PI / 200, 100 * Math.PI / 180, true);
ctx.stroke();
}
/* paint */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; // set color
ctx.arc(70, 70, 60, 10 * Math.PI / 200, 100 * Math.PI / 180, true);
ctx.fill();
}

感想

Circleの指定に関しては、一応JSで記述されてはいますが、
ほぼCSSのような感覚で、実装できるようです。
今回に関しては静的な描画でしたが、複雑に記述することで、ダイナミックなインターフェースの実現もできます。
UIに関して、最近ですと大手サイト等ではかなり共通化してきているような印象がありますが、HTML5を用いることで、斬新なインターフェースがどんどん生まれそうで、楽しみです。
| | comments(0) | trackbacks(0) |

タグ:

GoogleAnalyticsの知っておくと便利な使い方（１）サイト内のコンバージョンを計るアクセス解析

acurry | 2010年6月 1日 12:15

こんにちは。
偶然にも本日6月1日が誕生日のacurryです。
今日で18歳（と108ヶ月）になりますが、これからもよきWebデザイナー＆ディレクターを目指して日々精進！します。

と、Webデザイナーという肩書きでこのラボブログを書いている私ですが、
サイブリッジでは実はWebインテグレーショングループ（開発・制作チーム）ではなく、 経営企画室という部署に所属しています。
Webインテグレーションの社員たちが主に受託案件に携わっているのに対し、
経営企画室では自社メディア運用や新規媒体の立ち上げを行っています。


さて、その自社メディアの運営で重要な「アクセス解析」。
弊社ではGoogleAnalyticsを利用しており、おそらく多くのサイト運営者が 使用しているアクセス解析の代表的なツールと言ってよいでしょう。

そんなGoogleAnalyticsですが、
「高機能すぎて何を見ていいかわからない」
「導入したは良いけどアクセス数を計る以外に何かできるの？」
という人もいるのではないでしょうか。
今日はそのGoogleAnalyticsについて、＋αでできる 基本的かつよく使う便利な使い方をご紹介します！


サイト内のコンバージョンを計る

「掲示板サイトでユーザーがレスした数を計測したい」
「見積もり機能のついたサイトで、ユーザーが機能を使った数を計測したい」
お客様からも、上記のような要望は多くあります。その場合の手順はこちら。

コンバージョンの結果となるページを、をコンバージョンとして設定

ga1.jpgコンバージョンを設定したいプロファイルの編集をクリックし,目標を設定。
ga2.jpg 各項目に必要な情報を入力したら、OK。

ユーザがコンバージョンの結果となるページに到達する前に経由するページの情報も取得したい場合には、目標到達プロセスの「はい、この目標の目標到達プロセスを作成します」をクリックしましょう。
ga3.jpg

設定したコンバージョンが発生した時点で、Analyticsのコンバージョンで率や数が調べられます。



この他にも、GAにはたくさんのカスタマイズ機能があって、 知れば知るほど便利だなーと感じます。
早速あなたのサイトにも色々導入＋カスタマイズしてみてください。
次回はまた別のカスタマイズ方法をご紹介します

ちなみに、サイブリッジにはハッピーバースデー制度 というものがあって、なんと誕生日は 定時より２時間早い17時で帰宅することができるんです♪

今日はこれを書き終わったら、 早めに退社して温泉＆マッサージにいってきます。
やりたいことが「温泉＆マッサージ」ってあたりに年を感じるacurryでした。

| | comments(0) | trackbacks(0) |

タグ:

ブラウザによって異なるフォントのサイズを「％」の表記で統一する方法HTML + CSS

ぴんしゃん | 2010年5月25日 18:24
こんにちは、ぴんしゃんです。

先週の土曜日はサイブリッジのみんなでディズニーシーに行ってきました。
集まった人数はなんと26人！タワーオブテラーは貸し切り！
さらにITS（関東ITソフトウェア健康保険組合）の優待で一人2,000円！
夢の国ですっかりリフレッシュをしてきました。


フォントのサイズを「％」で統一

さて今回はブラウザによって異なるフォントのサイズを
「％」の表記で統一する方法についてです。

私たちを常に悩ませるブラウザの違いですが、フォントサイズもその一つです。
例えば「font-size:80%;」としたものの、あれ何かこっちとこっちで大きさ全然違うな
みたいなことがあります。
px指定をしてしまうと文字サイズの可変ができなくなるし...
ハックを使うにしても、いちいち指定するのは面倒だし...

というわけで今回お手本にするのが
YUI（Yahoo! User Interface） Libraryのチャートです。

下記のようにbodyタグとtableタグにそれぞれ指定をします。
文字サイズの基本は13pxとなります。
body {
    font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
    *font-size:small;
    *font:x-small;
}
table {
    font-size:inherit;
    font:100%;
}


そしてそれぞれのフォントサイズは下記の数値を参考にして指定します。
10pxのサイズに指定をしたければ「font-size:77%;」といった形です。
10px         77%
11px         85%
12px         93%
13px         100%
14px         108%
15px         116%
16px         123.1%
17px         131%
18px         138.5%
19px         146.5%
20px         153.9%
21px         161.6%
22px         167%
23px         174%
24px         182%
25px         189%
26px         197%

このように指定すれば、どのブラウザで見てもサイズが統一されて
ハックを使う必要もなくなります。

| | comments(0) | trackbacks(0) |

タグ:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |