カテゴリー: CSS

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。
また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。
が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに
「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です!
また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。
もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。
従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで
確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような
状態になってしまうという問題が起こります。
また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって
しまうことがあります。
課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
<table class="table">
...
</table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに”overflow-x: scroll;”が適用され、スクロールしてテーブルを
確認することが出来るようになるという仕様でした。
この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。

CSSの個別性について

私はフロントエンドとして日々業務に追われています。
基本的には個人での作業なのですが、共同でコーディング作業を行うということもあります。
その場合、作業の規則を設けていないと、つまずくことがあります。

CSSファイルに定義しているのに効かない

プロパティを間違えているわけでもなく、見直しても問題ないのに機能しない…ということが稀にあります。

そういった場合には、諸々思わぬ原因が潜んでいるやもしれません。

個別性

CSSを適用する場合、様々な記述方法があり、それにより優先されるスタイルが変わります。

div {color: #000;}
div {color: #F00;}

ごく単純に上記のように書くと、基本的には後に記述された「color: #f00;」が優先され適用されます。

しかし、下記のように記述すると

div.text {color: #000;}
.text {color: #F00;}

後から記述されたスタイルではなく、上の「color: #000;」が優先されます。

こうなる理由は、セレクタには個別性というものが決められており、
その個別性を計算し、優先されるスタイルが適用されるからです。

個別性の計算

セレクタにはidやclassなどを様々に設定し、適用させることができます。
そして、セレクタには個別性の優先度があり、それを計算した上でスタイルが適用されます。

計算の値をまとめると下記の通りです。

  • タグに直接style属性がある場合は、1000
  • idセレクタは、100
  • id以外の属性と、擬似クラスは、10
  • 要素、擬似要素は、1

これを値を基に下記のコードを考えると、

div.text {color: #000;}
div {color: #F00;}
  • 「div.text」: 1 + 10 = 11
  • 「.text」: 10

となるので、先に記述された「color: #000;」が優先され適用されます。

まとめ

個別性については、キチンと把握するには計算の値も覚えておくべきなのかもしれませんが
上記のように、最初に作業チーム内でCSSの記述ルールを設けておけば
そこまで気にしなくても思った通りのデザインにできると思います。
もし、CSSに記述したスタイルが効かないという状況があれば、今回の記事が解決に繋がるかもしれません。

追記

今回この記事を書くに至ったのは、自分の備忘録というのもあるのですが、
業務でどうしてもスタイルが効かないという状態に陥ったからです。
ですがその原因は、無理やりスタイルを適用させるため、
ほぼ全てに”!important”が付けられていたというオチで、個別性とかは関係ありませんでした…
楽ではあるのですが、”!important”は個別性など関係なく最優先されるので、
多用するのもよろしくないなと思いました。

「HTML5 スタンダード・デザインガイド」購入しました。

XPのサポート終了により、IE6、7がほぼ実務での対応がなくなってきており、
そして来年、2016年1月にはIE8、10のサポートが終了することが既に話題になっています。

スマートフォンの普及により、スマホサイトを扱うことによりHTML5やCSS3の導入が多くなり、
PCへの導入も増加してきました。

そこで、再度HTML5を見直すために、参考書を購入しました。

「初心者用」のHTML、CSSの本は多く、本屋を数件回ってもいい本に出会えず、
amazonレビューに「HTML4.0」を理解している人ならさらっと読めるのでは
というレビューを発見し、
表題にもある通り「HTML5 スタンダード・デザインガイド」を購入しました。

HTML5の最大のよくわからない要素。
「section」と「article」を丁寧に説明していただいているのがありがたいです。

ネットの溢れる情報では色んな見解があり、定義があっているか
みるページを増やせば増やすほど混乱していったので、、、。

・「section」は「article」の中に入れてもいいのか
・「article」は「section」の中に入れてもいいのか
・「article」はどういった働きに使う要素なのか
・「section」はどういった働きに使う要素なのか

上記の様なあやふやに使っていたものが理解できたのは大きな収穫です。

こういった技術書は本によって意見が偏りがちなので
数冊HTML5の本は欲しいのですが、中々、基礎を詳細に書いている本がなくもう少し
普及して欲しいところです。

HTML5 スタンダード・デザインガイド

まだ読んでない方は是非読んで見てください。

CSS Nite in KYOTO, Vol.3「Web制作業界最前線」に参加してきました!(その1)

11月14日(金)に開催された、CSS Nite in KYOTO, Vol.3「Web制作業界最前線」に参加してきたのでご紹介します。

CSS Nite in KYOTO, Vol.3「Web制作作業最前線」

タイムテーブル

セッション1:
ディレクションが苦手な人のための、「Webディレクション」の処方箋(Webデザイナーだったら編)
高田 信宏さん(クリエイター育成協会)

セッション2:
コンテンツマーケティングは恋のライセンス
成田 幸久さん(インフォバーン

セッション3:
Webプログラミングの今とこれから 〜最新Web技術の紹介とそこから考えるWebクリエイターの可能性〜
村岡 正和さん(バスタイムフィッシュ)

セッション4:
Evernoteでも採用されたMaterial Designの概要と導入方法
阿部 正幸さん(KDDIウェブコミュニケーションズ)

セッション5:
UIデザイナーとは何者なのか?
土屋 尚史さん(グッドパッチ)

Session1:
ディレクションが苦手な人のための、「Webディレクション」の処方箋(Webデザイナーだったら編)

講師:高田 信宏さん(クリエイター育成協会

まさかの信号の故障により、電車が大幅に遅れて途中からの参加。
そのため全部聞くことが出来なかったのですが、サンプルのヒアリングシートを紹介して、その重要性を説明されてました。
詳細は、Webディレクション教科書(通称「黒本」)で確認してね!とのことwww

実際の業務に一番近い内容だったのですが、残念。。。
また機会があれば参加します!

Session2:
コンテンツマーケティングは恋のライセンス

講師:成田 幸久さん(インフォバーン

とてもいい響きのナイスなセッションタイトル。

京都にも支社を置かれてから、業務でもお世話になっているインフォバーンさんですが、企業紹介の中で、「GIZMODO(ギズモード・ジャパン)」や、「lifehacker(ライフハッカー)」、「roomie(ルーミー)」といった、メディアも運用されているとのことを(今更?)知りました。
すみません。いつもお世話になっているのに、全く知りませんでしたw

(正確には、グループ会社「メディアシーン」が運営)

コンテンツマーケティング=恋愛戦略

コンテンツマーケティングとは、「顧客にとって価値のあるコンテンツを提供していくこ­とで、興味を惹き、共感をしてもらい、結果として売上げにつなげる」というマーケティング戦­略とのこと。
この戦略を、恋愛に例えて分かりやすく紹介してくださいました。

5つのメリット

1.あなたに恋を持った人だけが訪れる
2.アプローチしたい人だけに絞れる
3.あなたの優位性をアピールできる
4.あなたの評判が拡散する
5.あなたをどう思っているのか分かる

戦争の時代から、恋愛の時代へ

これまでのコンテンツは、ターゲットに向けてどのように情報を発信していくか、コンテンツを届けるかというSEOをベースとした一方通行の奪い合い(戦争)のようなものだったが、もうそんな時代が終焉を迎えようとしている。
これからは、ターゲットに届けることはもちろんだが、双方向に「愛」が芽生えない限りそのコンテンツに成功は望めない。
そう、これからは「恋愛」の時代なんだ。

--まとめると、こんな感じの設定でした。うん、分かりやすい。

地道な努力と、「愛」が求められる

とはいっても、恋愛はそうはかんたんに成就するものではありませんよね。
「恋愛は一日にして成らず」
愛を持った、地道な努力が必要なのだそうです。

「恋というのは一つの芝居なんだから、筋を考えなきゃだめだよ」by 谷崎潤一郎

そこで、次のような「成功に導く7つのステップ」を紹介してくださいました。

1.目標設定(KPIとKGI)

・KPI(重要業績評価指標)を明確化し、各プロセスごとのKGI(重要目標達成指標)を設定することで、顧客とのつながりを長期的に維持

2.状況分析とトピックの設定

・情報なくして戦略なし
SWOT分析(強み、弱み、機会、脅威)

3.ペルソナ設定と購買ファネル

・ターゲットは1人!
30%ではなく、「30倍」!インフォバーン総研)

4.コンテンツの編集計画

・コンテンツカレンダーを作成し、PDCAをスケジュール化して管理

5.心を動かすコンテンツの制作

アリストテレスの「ストーリー三幕」(状況設定 > 葛藤 > 解決)インフォバーン総研)
・「変化」、「対比」が重要!
インパクトを与え、自分ゴト化させる!

6.コミュニケーションの管理
7.達成度の測定(SMART goal)

・Specific(具体的に)
・Measurable(測定可能な)
・Achievable(達成可能な)
・Related(経営目標に関連した)
・Time-bound(時間制約がある)

日々やっていることだったり、なんとなく分かっていることなんですが、「恋愛」という状況に照らしあわせて考えていくことが出来るため、ペルソナを設定することと同じように、チーム内でその重要性を共有しやすくなりそうだと感じました。
楽しく、とてもためになるお話をありがとうございました!


(長くなってしまったので、セッション3移行は次回に紹介しようと思いまーす。興味ある方はお楽しみに!)

isucon3 予選で敗退しました(うさぎ工房)

isuconは初回からずっと出ているのでこれで3回目。

いつもは同僚の@shokiri @memememomo (Uchiko) 、僕、の3人で出場するのですが
お互いの予定の折り合いがつかず、僕は出場できない可能性が出てきました。
でも僕はどうしても出場したい・・・!

そこで、いつもの社内メンバーは「進撃の超大型パティスリー兄弟」
僕は一人ソロ活動で社外の友人(@gom_oh)や元社員(ttoz)を誘って「うさぎ工房」として予選登録しました。

僕自身がOps側である所や、メンバーのプログラマPerlPSGI/Plackは初めて触る二人だったので
集まって過去ISUCONで自家製ISUCONしたり、クエリ最適化について勉強したりといった準備をしました。

結果はスコア的には5300でfinish。見事敗退となりました。

ちなみに弊社の本チームである「進撃の超大型パティスリー兄弟」チーム側は
なんと総合4位で予選通過!さすがです!
若干悔しさもあるけど、弊社から本戦にいく人がいて、本当に嬉しかったです。おめでとうございます!
そちら側の詳細はきっと彼らが記事にしてくれるはず。本戦でもばっちり頑張ってください!

こちらの記事は点数の低い僕らがやった事なので、
アンチパターンとして楽しんでいただければ。

最終構成

最終的には varnish perl mysql とちょっとだけmemcached の構成でした。

phpMyAdminを立ち上げる

まず、MySQL関連の操作でphpMyAdminしか使えない僕はphp5.5をソースコンパイル
ビルドインサーバーとして立ち上げました。これ便利ですね

/usr/local/lib/php -S 0.0.0.0:3000

my.cnfを設定

APIキー登録して初回ベンチが確認する。たしか800くらいでした。
初回ベンチですぐにDBボトルネックとわかったので、my.cnfを以下に変更。
(ええ、もちろん find / -name my.cnf しました。)

key_buffer = 512M
max_allowed_packet = 10M
table_open_cache = 10240
sort_buffer_size = 1M
read_buffer_size = 1M
read_rnd_buffer_size = 4M
myisam_sort_buffer_size = 1M
thread_cache_size = 128
query_cache_type= ON
query_cache_size= 16M
thread_concurrency = 8
innodb_flush_log_at_trx_commit = 0
innodb_file_per_table
innodb_additional_mem_pool_size=40M
innodb_log_buffer_size=32M
innodb_log_file_size=256M
innodb_buffer_pool_size=8000M
max_connections = 2048
max_connect_errors = 10000
tmp_table_size=1342177280
max_heap_table_size = 1342177280

インデックスを張りました

最終的にはcreated_atとか使ってなかったので無駄だった。

ALTER TABLE `memos` ADD INDEX ( `created_at` ) ;
ALTER TABLE `memos` ADD INDEX ( `user` ) ;

ここらへんで1500くらいだったかな。

フロントエンドはVarnish

フロントエンドはVarnishを使用。
編集や削除はされないようだったので、なんとかリクエストヘッダの値から「ログインしているか否か」を判別して全体キャッシュできないか考えてましたが、リクエストヘッダで判断できる材料がなく、また、Plackとか全然わからないのでヘッダーの修正とかはできませんでした。

結局フロントエンド側での大規模なキャッシュは僕の力では厳しそうだったので
静的ファイルだけvarnishでキャッシュ。設定の主要部分だけだけど以下のような感じ。

backend web1 {
.host = "127.0.0.1";
.port = "5000";
}
sub vcl_recv {
set req.backend = web1;
if (req.url ~ "\.(jpg|png|gif|css|js|ico)$") {
return (lookup);
}
return (pass);
}
sub vcl_fetch {
set beresp.ttl = 86000s;
return (deliver);
}

スキーマとかSQLの改修

ここらへんで2500くらいだったかな。
この時でもDBボトルネックはまだまだ明らかでしたので
ここでメンバーの@gom_ohがDBに以下の改修を行いました。

内容は公開IDの一覧だけのテーブルを作ってtopページやrecentページのDB負荷を削減する、といった感じの修正となります。

CREATE TABLE `public_id` (
`memo_id` int(11) NOT NULL,
PRIMARY KEY (`memo_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;'

public_idというmemosテーブルでパブリックに公開しているだけのmemo_id一覧を入れるテーブルを作成しました。
それから、ベンチ実行後のスクリプトで現在公開中である記事のIDをインサート

INSERT INTO public_id (memo_id) SELECT id FROM memos WHERE is_private = 0 ORDER BY id DESC;

上記は初期スクリプトで実行。

#公開ページの総数
SELECT count(*) FROM memos WHERE is_private=0SELECT count(memo_id) FROM public_id
#TOPページ
SELECT * FROM memos WHERE is_private=0 ORDER BY created_at DESC, id DESC LIMIT 100SELECT m.id, u.username, m.created_at, m.content
FROM memos m
JOIN (
SELECT p.memo_id
FROM public_id p
ORDER BY p.memo_id DESC
LIMIT 100
) t
ON m.id = t.memo_id
JOIN users u
ON u.id = m.user;
#recentページ
SELECT * FROM memos WHERE is_private=0 ORDER BY created_at DESC, id DESC LIMIT 100 OFFSET %d", $page * 100

SELECT m.id, u.username, m.created_at, m.content
        FROM memos m
        JOIN (
          SELECT p.memo_id
          FROM public_id p
          ORDER BY p.memo_id DESC
          LIMIT 100 OFFSET %d
        ) t
        ON m.id = t.memo_id
        JOIN users u
        ON u.id = m.user',
        $page * 100);

これでスコアが5000くらいになりました。

Markdownの結果をmemcacheでキャッシュ

その他はMarkdownの処理が重かったので、ここだけmemcacheでキャッシュとか、ちまちまして5300くらいに。
まんまとポート11211につないでましたが。

あとどこかのタイミングでStarmanからStarletに変更しましたがスコア的に動きはなし。
最終的にはまだまだDBがボトルネックなまま5300でフィニッシュとなりました。

感想

初日に「1位の人とか人間なの?」と思ってたのですが、
2日目の弊社メンバーが1位に輝いてて、出先からの発表見てのけぞった。
どんな事をしたのか聞くのが楽しみです。

競技中も楽しかったのですが、普段なかなか会えない友達や元同僚と集まって
お菓子ほおばりながら共通の目的をもって取り組んだ時間が勉強になったし楽しかった。
特に普段は他の二人にまかせていた所を本腰を入れて取り組まないといけない状態だったので、
今まで以上にソースを見たりDB構造を見たり、という部分に入っていけたのがよかったです。

反省点としては、

[READMEをしっかり読んで意識を共有しておけばよかった]
workloadがAMI提出時のコマンド入力で気づきました。「ただボトルネック調査の為に負荷を大きくできる」くらいの認識しか持ってなくて(んなわけないのに)、、、試せる事はちゃんと試すべきでした。結果、一度もWorkloadを変更してなかった!!

[とりあえずperlだろみたいな雰囲気になってた。]
やりたい事をちゃんとやれる言語でやる道も検討したらよかったと。PHPで着実なボトルネック修正で予選抜けたところもあってそう思いました。「こうしたら早くなりそう!」→「Perl、、というかPlackって奴でどうやんの。」→「わからん」、のコンボが多かった。

ISUCONは参加者は楽しいけど、運営の方々は本当に大変そうで少し申し訳ない気持ちに。
運営の皆様本当にありがとうございました。

そして「進撃の超大型パティスリー兄弟」、本戦がんばれー!

おまけ

終了後に本番ベンチが解放されていたのでWorkload 5くらいでまわした結果

Result:   SUCCESS
RawScore: 8285.3
Fails:    0
Score:    8285.3
[OK] 結果を管理サーバに送信しました

ちょっとあがった。

HTMLのコードからCSSセレクタを自動出力してくれるジェネレーター

CSSセレクタの入力って、結構面倒ですよね。

私の場合、これまでは、まずHTMLコードをコピーしてCSSファイルに張りつけ、そしてそのコードの中から必要なセレクタを残していくという作業を行っていました。

この方法が、タイピングに自信のない私ににはピッタリで、かつタイプミスによってスタイルが効かないなどのトラブルも起こりにくい方法だと思っていたのですが、もっといい方法を見つけました。

知っている方も多いかもしれませんが、便利なのでご紹介。

 

CSS Selector Generator

 

使い方は簡単で、

 

Step1: まずは、HTMLのコードをまるごとテキストエリアに貼付けます。

 

Step2: つぎに、文字コードや、あらかじめ除外しておきたい要素などを設定して、「CSSを出力」ボタンを押すだけ。

 

Step3: あとは、出力されたコードをありがたくコピーさせていただきます。

 

CSSファイルに貼付けたあとは、Zen-codingなどで楽しくマークアップしちゃいましょう。
作業効率アップ間違いなしの「CSS Selector Generator」。ホントお世話になってます。

© SEEDS Co.,Ltd.