2016年3月25日金曜日

【参加レポート】第8回 スマホUXラボ 「ユーザーテストLive!見学会 ~無料学習アプリ編~」

  
こんばんは、舟橋です。

 今回は3/15（火）に参加した

第8回 スマホUXラボ 「ユーザーテストLive!見学会 ~無料学習アプリ編~」


の内容を簡単な感想を書きたいと思います。

今回の会場は、普段展示でしか訪れない「高円寺」。
駅前の飲み屋の多い通りから一本入ったところに会場である「val研究所」がありました。

（会場に着くと明るい声でペッパー君がお出迎えをしてくれました...)


内容はUX/ユーザビリティ評価法の第一人者である樽本徹也さんの監修のもと
「無料学習アプリShareWis(シェアウィズ)」のユーザーテストの見学と簡単なワークショップでした。
（ShareWis：３分動画と１問クイズの完全無料学習コース）


▼今回のユーザープロフィール


①男性　リテラシー（中）　
②男性　リテラシー（上）　
③男性　リテラシー（低）　

▼ユーザーテスト内容

シチュエーション：
「以前からなんとなく学んでみたかった“マーケティング”について、ShareWisのアプリで学んでみようと思っている。」

タスク：
１．学びたい理由を述べる
２．アプリを使ってコースを選ぶ
３．コースで学ぶ
４．他のコースを選ぶ
５．コースで学ぶ

本当に簡単にまとめるとこんな感じでした。

感想はと言いますと、、、
結論、ユーザーへのサービスの質（ここでは動画）が何よりも重要と感じました。
当り前のことですが、
“ユーザーのペルソナにフィットしていなければ、どんな内容でも正当な価値をもたない”
ということです。

ここでいう正当な価値というのも怪しいですが、
ふんわりと「マーケティングを学びたい」と感じている人に対していきなり「SWOT」やら「SECIモデル」という内容を、早口の3分間で学ぶことが本当にフィットしているのかという疑問です。

このことは、UIにばかり注目していた私にとって重要な発見でした。
接客の世界だけでなく、見目細やかなホスピタリティが結局のところ大事なのだと思いました。
（以前参加したサービスデザインのカンファレンスでも話題になった言葉、「エンパシー」と「エコシステム」について改めて考えさせられる内容でした・・）


ユーザーテストについてまだ勉強中ではありますが、
今回の内容で簡単なテストであればすぐできる！と確認できたので
遊びもかねて、友人で試してみようかと思います。。笑

それでは、本日もお疲れ様でした！











2016年3月22日火曜日

CASE式を使用して、主キーを入れ替える方法　SQL

  
こんにちは山田です。

気温もぐーんとあがり、
やっと春らしくなってきました。今日この頃。

さて、SQLの話題です。既存コードをリファクターできそうなものを見つけたので、その備忘録になります。

■目的
「主キー」もしくは「ユニークキー」の値を入れ替えて、
並び替え機能をつくります。

■テーブルの前提
　1. ソートキーはユニークである
　2. ソートキーが大きいものが上（降順）で並べる

表であらわすと↓こんな感じになります。
+-----+------------+--------+
| ID  | Name       | Sorter |
+------------------+--------+
| 1   | ｾﾞﾝｻｲ      | 100    |
| 2   | ﾒｲﾝﾘｮｳﾘ    | 10     |
| 3   | ｽｰﾌﾟ       | 1      |
+-----+------------+--------+
このソートキー「100」と「10」を入れ替えて登録して、並び替え機能をつくります
　　　　　　　　　↓
+-----+------------+--------+
| ID  | Name       | Sorter |
+------------------+--------+
| 2   | ﾒｲﾝﾘｮｳﾘ    | 100    |
| 1   | ｾﾞﾝｻｲ      | 10     |
| 3   | ｽｰﾌﾟ       | 1      |
+-----+------------+--------+
      　　　　　　　　　　※IDとNameは対応しています。

■仮数字を一時的に代入する方法（元々の方法）
update mst_data
   set Sorter = '-1'
　　where where ID = '1'  /*ID「1」のSoterを一時的に「-1」を代入*/
update mst_data
   set Sorter = '100'
　　where where ID = '2'　/*ID「2」のSorterに、空いた「100」を代入*/
update mst_data
   set Sorter = '10'
　　where where ID = '1'　/*ID「1」のSorterに目的の「10」を代入*/
この3つのクエリ文でトランザクションを作ってやっていました。
動作するものの、以下の懸念点がありました。
　・クエリ文が3つできてしまう
　・仮数字がすでに使われていた場合、ユニーク制約のため、-1が代入できなくなる


この解決方法として、CASE式を使用した方法をとります。

■CASE式を使って、ユニークキーを入れ替える方法
update mst_data
 set sorter = CASE WHEN sorter = '100' THEN '10'
      　　　　　　　　　 WHEN sorter = '10'  THEN '100'
　　　　　　　 　　　    ELSE sorter END
 where sorter in( '100' , '10');
CASE式を使用することによって、一度のUPDATE文で入れ替えが完了できてしまいました。
どうしてこんなことが出来てしまうかというと、
CASE式の分岐による更新は「一気」におこなわれるので、
ユニークキーの重複エラーを回避することができるのです。


実はこの方法、主キーを入れ替えるという荒業も簡単にできてしまいます。
■CASE式を使って、主キーを入れ替える方法

操作対応表　
・SQL Server： ○
・Oracle　　： ○
・MySQL　　： ×
update mst_data
 set sorter = CASE WHEN id = '1' THEN '2'
　　　　　　     　　　  WHEN id = '2' THEN '1'
　　　　　　　  　　　   ELSE id END
 where sorter in( '1' , '2');
その場合の実行結果
+-----+------------+--------+
| ID  | Name       | Sorter |
+------------------+--------+
| 1   | ｾﾞﾝｻｲ      | 100    |
| 2   | ﾒｲﾝﾘｮｳﾘ    | 10     |
| 3   | ｽｰﾌﾟ       | 1      |
+-----+------------+--------+
↓
+-----+------------+--------+
| ID  | Name       | Sorter |
+------------------+--------+
| 2   | ｾﾞﾝｻｲ      | 100    |
| 1   | ﾒｲﾝﾘｮｳﾘ    | 10     |
| 3   | ｽｰﾌﾟ       | 1      |
+-----+------------+--------+

■参考サイト
『達人に学ぶ SQL徹底指南書』サポートページ
http://www.geocities.jp/mickindex/database/db_support_sinan.html

2016年3月16日水曜日

Node.jsのスクレイピングモジュールcheerio-httpcliがとても便利

  
こんにちは。エンジニアのKです。

先日、自社サイト上にて静的HTMLで公開している100ページ近くあるコンテンツを、
改めてDBに登録したいという要望がありました。

幸い、対象のページはHTML的に似た構造をしていたので、スクレイピングで上手いことデータを抽出できないかと調べていたところ、
Node.jsで動く「cheerio-httpcli」を見つけ、とても便利だったので紹介したいと思います。

作者様のGitHubとか
GitHub - ktty1220/cheerio-httpcli
Node.js用のスクレイピングモジュール「cheerio-httpcli」の紹介

スクレイピングって？


ひとことで言うと、「ウェブサイトのHTMLを取得して、その中から必要な情報を取り出す」処理になるでしょうか。
再帰的にリンクを辿って行く場合、大量のリクエストが飛んでしまいますので、リクエスト間にインターバルを設けるなどしてDoS攻撃にならないようにしましょう。
また、取得したコンテンツには著作権がありますので取り扱いに注意しましょう。

cheerio-httpcliをインストール

今回はまっさらなCentOS 6にてインストールしていきたいと思います。
cheerio-httpcliはnpmでインストールするのが取ってり早いですが、
npmを使うためにはnodejsが必要となり、
さらにnodejsをインストールするためにはepelリポジトリをyumに追加する必要があります。
順番にやっていきます。

epelリポジトリ追加

$ yum install epel-release

nodejs/npmインストール

$ yum install nodejs npm --enablerepo=epel

# 確認
$ node -v                                                                        
v0.10.36

cheerio-httpcliインストール

$ npm install cheerio-httpcli


これでインストール完了です。

スクレイピングのサンプル

抽出したデータで特に何をするというわけではありませんが、サンプルとしてYahooトップページのトピックスの見出しとURLを取得してみたいと思います。

// test.js
var client = require('cheerio-httpcli');

client.fetch('http://www.yahoo.co.jp')
.then(function (result) {
    var $ = result.$;
    $('.topicsindex .emphasis a').each(function (idx) {
        var title = $(this).contents().filter(function () {return this.nodeType === 3;}).text(),
            url = $(this).attr('href');

        console.log(title + ',' + url);
    });
})
.catch(function (error) {
    console.log(error);
});

実行結果がこちら 

$ node test.js
大阪女児焼死 母ら無罪確定へ,http://rdsig.yahoo.co.jp/...
原子力規制委 朝日記事を批判,http://rdsig.yahoo.co.jp/...
北 米学生に15年の労働教化刑,http://rdsig.yahoo.co.jp/...
6人殺害 妻と娘失った夫苦悩,http://rdsig.yahoo.co.jp/...
「尿鑑定不採用」で無罪判決,http://rdsig.yahoo.co.jp/...
福山雅治 健さん映画で主演,http://rdsig.yahoo.co.jp/...
内海また炎上 開幕ローテ絶望,http://rdsig.yahoo.co.jp/...
足に30cmボルト 新城幸也の今,http://rdsig.yahoo.co.jp/...

たったこれだけのコードで簡単なスクレイピングができてしまいます。便利ですね。
result.$にはjQueryオブジェクトが渡されるので、セレクタによるDOM操作も簡単に行えます。便利ですね。

githubのドキュメントにもまだまだ便利そうなAPIがありそうなので、色々試してみたいですね。



ASP.NET MVCをOSXで動かしてみる

  
最近暖かかったり寒かったりと、春が着実に近づいているなと感じますよ。あとは何と言っても花粉でしょうか。辛いですよね。あ、フロントエンド担当のふみえです。

そんなこんなで、本日は昨年リリースされた Visual Studio Code の OSX ベータ版をインストールしつつ ASP.NET MVC を OSX でちょこっと動かしてみたいと思います(^^)ノ



Visual Studio Code インストールから起動

まずはこちらのページの「Download for OSX」というボタンをクリックして zip ファイルをダウンロードして解凍します。
展開した「Visual Studio Code」を Application フォルダに移動させます。すると Launchpad に追加されていることが確認できると思います。そこから起動してみましょう！
当たり前ですが、ここまではあっという間です。

ASP.NET をインストールしていく

ASP.NET ドキュメントやドキュメントなどを参考にしながら進めていきます。

1. DNVM と DNX をインストール（前提条件: npm インストール済み）

DNXとは….NET Execution Environment の略。引用になりますが、要するに
.NETアプリをクロスプラットフォームで実行するために必要な要素をまとめた環境
だそうです。 （引用元: http://www.atmarkit.co.jp/ait/articles/1505/19/news016.html）
そして、その DNX のバージョン管理パッケージが DNVM（DNX Version Manager）です。
そんなこんなでドキュメント通りに DNVM をインストールします。
$ curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh
DNVM を有効にします。 
$ source /Users/toyooka/.dnx/dnvm/dnvm.sh
すると、DNVM を最新にしろと怒られるのでそれに従います。 
$ dnvm upgrade
無事 DNVM がインストールされました。
さて、次は DNX を .NET Core にインストールするために DNVM を使用できるようにします。
$ dnvm upgrade -r coreclr
こちらを実行後、.bash_profile に下記を追記し、ターミナルを再起動します。
source dnvm.sh
export MONO_MANAGED_WATCHER=disabled
そして、下記を実行して dnvm を再度アップグレードします。 
$ dnvm upgrade


2. yeoman をインストールする

ここまできたら、本家の推奨する yemoman を使用して scaffold で新しいアプリケーションを作成します。その際に ASP.NET のジェネレータとなる gulp とbowerも一緒にインストールしています。
$ sudo npm install -g yo generator-aspnet gulp bower
うまく行った！！

3. yo aspnet を実行するぞ！

ということで、下記コマンドを入力します。 
$ yo aspnet
すると、対話形式でどんなアプリケーション作成するのか訊かれますので、ただの "Web Application" を選択してみます！ 下記の画像のようにかわいいのが表示されます！イケメてる！！


4. いよいよビルドするよー！！！！

先ほどのコマンド実行後、最後の方に下記のような説明があるので、その通りにしていきます！ 

$ cd WebApplication
$ dnu restore // 結構時間かかります！
$ dnu build
$ dnx web
これで、localhost:5000 にアクセスしてみましょう！！すると・・・ じゃじゃーん！

めでたしめでたし☆
これで、OSX 上で ASP.NET の開発環境を整えることができました！Visual Studio Code はまた今度いじってみます！scaffold って便利すぎて困る時もあるけど、初学者にとっては本当にありがたい。。。
それでは、ふみえでしたー！！ばいびー！！

2016年3月15日火曜日

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

  
こんにちは山田です。

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

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


■HTML
■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;
} 
■画像の数値について
以下のように画像の位置を指定しています。
登録: 投稿 (Atom)