CSSスプライトを作ってみた

こんにちは山田です。

サイト内に、メニューやボタンなど細かい画像がバラバラとありますが、
それを、一枚の画像にまとめて、ページの読込速度を速める方法があります。
CSSスプライト　というのですが、作ってみたのでその備忘録になります。

■元画像
ペイントで簡単に作成

■HTML

 


TOP
NEWS
ABOUT
Contact Us
FAQ

■CSS

/*----------------------------------------------------------
ナビゲーション
------------------------------------------------------------*/

#navi{
 position:absolute;
}

#navi ul{
 list-style:none;
}

#navi li a{
 display:block;
 width:108px; 
 height:53px;　//←幅と高さを指定
 text-indent:-9999px;
}

#navi li#top{
 background:url(../images/menu.gif)no-repeat 0px 0px;　//←最初から表示したい画像
}
#navi li#top a:hover{
 background:url(../images/menu.gif)no-repeat -108px 0px;　//←マウスオーバー時の画像
}

/*-----------------
同じ要領で残りも書く
------------------*/
#navi li#news{
 background:url(../images/menu.gif)no-repeat 0px -53px;
}
#navi li#news a:hover{
 background:url(../images/menu.gif)no-repeat -108px -53px;
}
#navi li#about{
 background:url(../images/menu.gif)no-repeat 0 -106px;
}
#navi li#about a:hover{
 background:url(../images/menu.gif)no-repeat -108px -106px;
}
#navi li#contact{
 background:url(../images/menu.gif)no-repeat 0px -159px;
}
#navi li#contact a:hover{
 background:url(../images/menu.gif)no-repeat -108px -159px;
}
#navi li#faq{
 background:url(../images/menu.gif)no-repeat 0px -212px;
}
#navi li#faq a:hover{
 background:url(../images/menu.gif)no-repeat -108px -212px;
} 

■画像の数値について
以下のように画像の位置を指定しています。

Read More

アプリのプロトタイピングツールをいろいろ使ってみる③ - InVision -

こんにちは。岡田です。

３月に入って暖かくなったり寒くなったり雨が降ったり花粉が飛んだり、忙しいですね。
私は花粉症を発症していないのですが、毎年「今年こそはデビューするんじゃないか」とビクビクしながら下積み時代を送っています。
できるだけデビューが先送りになることを願ってやみません。


前回の記事、読み返してみると、雑だなぁ、、と思ったので、（ごめんなさい）
今回はちょっと丁寧に書こうと思います。

「InVision」

前回の「POP」は、かなりシンプルで、単純な機能を簡単に使うアプリのプロトタイプを作るのに

かなり便利な印象でしたが、今回さわってみた「InVision」は、結構細かい設定まで簡単に行えるので

画面の動きを高度に再現できると思いました。

「InVision」のいいところ

他のプロトタイピングツールではあまりないな～と思ったのが、

ボタンをタップしたときの挙動に「URLをひらく」を設定できることです。

全部が全部ネイティブでないアプリを作る場合、これがあることによって

ネイティブの動きとWEBを見せる動きのイメージが

かなりつかみやすいのではないかと思いました。

あとは、、圧倒的な機能の充実具合でしょうか。

ベータ版とありますが、他サービスとの連携でユーザーテストを録画できたり、

更新状況をリアルタイムでメンバーと共有できるようです。

リアルタイム性はInVisionにとってかなり大きな特徴のような感じがします。

「InVision」のちょっと不便なところ

日本語対応していないところでしょうか。。

アプリのプロトタイプを作って、チーム内であーじゃねこーじゃねをしたり

ユーザーテストを録画してみたり、端末に共有してみたりと

かなり至れり尽くせりで便利だと思いますが

また、"お絵かき"をアップして画面を設定した時に、

ステータスバー（電波とか時間とか出ているところ）が"お絵かき"と被ってしまうので

ナビゲーションバーをちゃんと見たい場合は、ステータスバー分の余白を

あらかじめ"お絵かき"に入れておく必要がありました。

画面によって適当に入れていると、画面遷移したときにちょっとずれちゃったりして

結構気持ち悪くなってしまうので、

ステータスバー、考慮してほしいな～と思いました。

おまけ？

チャット機能が充実しているInVisionですが、面白いなと思ったのが

「ホワイトボード」というツールです。

ちょっと人と一緒に試せていないのですが、お絵かきチャットができます。

これでお絵かきしりとり、、したいなーーー。笑

「InVision」。全体的に、情報を共有することにとっても長けているプロトタイピングツールだと感じました。

Read More

開発初心者がこれだけは知っておいた方が良いこと④

こんにちは！Sです。

今回はデータベースのロックについて書きたいと思います。

DBで行う主な操作としては
①新規登録　②更新　③削除　④参照
だと思いますが、同じテーブルに対して複数の人が同時に様々な操作を行うとデータの整合性がとれません。

そんなことにならないようにDBにはロックという機能が存在します。

ロックの粒度(行に対してのロックなのか、テーブルに対してのロックなのかなど)やルールは
使っているDBによって多少違うようですが、ここからはわたしが使っているSQL Serverについて書きます♪

◆ロックの種類
ロックには共有ロック、排他ロック、更新ロック、インテントロックなどがありますが、
難しいので詳細の説明は省きます。
初心者の方にまず覚えて頂きたいのは

①データの参照中は共有ロックがかかり、その間他の人が更新などできない
②削除などデータの書き換え中は排他ロックがかかり、他の人が何もできない
ということです。
(詳しく知りたい人はこちらやこちらを！）

バッチのスケジュールを組む際にはこれらのことを考慮しないといけないですね。

ちなみに排他ロックをどの粒度でかけるかは、SQL Serverが決めてくれます。
https://technet.microsoft.com/ja-jp/library/ms189286(v=sql.105).aspx

◆安全なおまじない
DBで行う操作の中で更新や削除はとても怖いですよね。。。
出来ればやりたくないですが、避けることはできません。
そんなとき上記のロックを利用して安全に操作を行うことができる魔法の呪文を教えてもらったので紹介します♪

1.まずはこれを書く
begin transaction

2.やりたいことをやる
update文 や delete文など

3.select文で思い通りの結果になっているか確認

4-A.やばい！思った通りの動きじゃない！というときは
ROLLBACK TRANSACTION
→これで元通り。なんの心配もいりません！

4-B.意図通り！成功！というとき
COMMIT TRANSACTION
→これを忘れずに！忘れると反映されません。


...余談ですが、わたしは今朝通勤途中に電車にすべての荷物を忘れてきました。
　(別に寝ぼけていたわけでもないのに。。。)

電車を降りるところからROLLBACKしたいです。。。

Read More

日々の学習

こんにちは、舟橋です。

今回は「日々の学習」についてです。

私は普段、ネットで情報収集をするのですが
最近では課題図書を設けて、通勤時間やお昼休憩で読んでいます。

昨日やっと１冊読み終わりましたので
忘れない為にも備忘録的に、まとめと感想を書こうかと思います。

今回読んだ本はこちら、

「こころの情報学」　西垣 通

（初めて新書を読んだのですが、、最初の方は専門用語と引用の多さに愕然としました。）

内容としては、21世紀になって急速に進んだ情報社会化によって変容した
「ヒトの心」についてのお話です。

意外なのが、割と冒頭で人工知能の話が出てきます。
私は最近映画で「her」という映画を見たばかりで、人工知能については必ず達成できる夢とさえ思っていたのです。

人口知能を搭載したOS（サマンサ）と、主人公が恋に落ちる話です。
（ラストはなんとも不思議でした。）

ですが、「こころ」というものは歴史的文脈からなるもので、人工知能で再現するには

そこらじゅうにあるもの（机、鉛筆、海、空気..）の概念（情報）を処理しなければいけなく、今の技術ではそのロードの為に固まってしまうとのことでした。

そもそもの処理の仕方が違うとのこと。

そんなショックな内容の多い本だったのですが、本の後半で出てきた「サイバーなこころ」についての内容が、とても印象に残りました。

現在われわれを取り巻く機械情報の量は、ヒトの処理できるレベルをとっくにこえています。そんななかで、子供たちは一種の「思考停止」という手段で自分を防御しているように思えます。

私たちの世代やその下の世代で最近「さとり世代」という言葉がありますが、それを彷彿させる言葉でした。
ヒトの心とは動物の心であり、身体的な感覚のないネットでは不満がたまっていくのは当たり前だとのこと。
確かに情報化も進んでいますが、大勢で集まって何かをしたり（ハロウィンなど）今までなかった新たなグループでの行動が出てきたりなど、どこかで発散をしようとする活動は意外と多いのではと思いました。

ここでUXに立ち返って考えてみると、身体的体験、動物としての基本的な部分を満たすものが
ヒトの心に一番響くのではということを思いました。
（昔マンモスを大勢で狩った記憶を再現するのは映画に任せるとして、コミュニケーションや自然の体験ということでしょうか。）


私にとっては難しい本でしたが、難しいなりに面白かったです。
この課題図書は、UXのサイト「U-site」というページで紹介されていました。
（こちらですhttp://u-site.jp/book/ux-books-2015）

ということで、感想でした！
みなさま、お疲れ様でした。

Read More

開発初心者がこれだけは知っておいた方が良いこと③

こんにちは開発者のSです！

今日はデータ分析について書こうと思います。
せっかくページを作ったらその反響も知りたいですよね♪

まずは分析に用いる指標について

■View数
ページが見られた回数。1人の人が10回見たらView数は10

■訪問数
何回訪問されたか。
1回の訪問で10ページ見られたとしたら、View数は10だけれど訪問数は1

■UU数
ユニークユーザー数。
何人の人が見たか。1人が何ページ見ても、何回訪問してもユニークユーザは1

■CVR
コンバージョンレート。
View数またはユニークユーザーの内、コンバージョン(商品購入や資料請求などの最終成果)に至った割合。
何をコンバージョンとするかはその人次第。

■回遊率
1人のユーザーがサイト内のページを何回閲覧したか

■離脱率/遷移率
ページに流入した人の内、どれだけ離脱したかが離脱率。
反対に離脱せず、他のページに遷移した割合が遷移率。

■直帰率
サイトに訪れたユーザーの内、最初の1ページだけ見てサイトから離れた人の割合。
一般的に40％前後なら良いとされている。



サイカタやGA(Google Analytics)を使えば、更に各デバイスのシェア率や流入、ユーザーの特徴なども見ることができます。
自分が作ったページについて、ぜひその反響を見てみてください！！

Read More