2016年3月25日金曜日

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

こんばんは、舟橋です。

今回は3/15(火)に参加した

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


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

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

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


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


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


①男性 リテラシー(中) 
②男性 リテラシー(上) 
③男性 リテラシー(低) 

▼ユーザーテスト内容

シチュエーション:


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

タスク:


1.学びたい理由を述べる
2.アプリを使ってコースを選ぶ
3.コースで学ぶ
4.他のコースを選ぶ
5.コースで学ぶ

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

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

ここでいう正当な価値というのも怪しいですが、
ふんわりと「マーケティングを学びたい」と感じている人に対していきなり「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;
} 
■画像の数値について
以下のように画像の位置を指定しています。

2016年3月14日月曜日

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

こんにちは。岡田です。

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


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


InVision

前回の「POP」は、かなりシンプルで、単純な機能を簡単に使うアプリのプロトタイプを作るのに
かなり便利な印象でしたが、今回さわってみた「InVision」は、結構細かい設定まで簡単に行えるので
画面の動きを高度に再現できると思いました。


「InVision」のいいところ

他のプロトタイピングツールではあまりないな~と思ったのが、
ボタンをタップしたときの挙動に「URLをひらく」を設定できることです。

全部が全部ネイティブでないアプリを作る場合、これがあることによって
ネイティブの動きとWEBを見せる動きのイメージが
かなりつかみやすいのではないかと思いました。


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

ベータ版とありますが、他サービスとの連携でユーザーテストを録画できたり、
更新状況をリアルタイムでメンバーと共有できるようです。

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


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

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

アプリのプロトタイプを作って、チーム内であーじゃねこーじゃねをしたり
ユーザーテストを録画してみたり、端末に共有してみたりと
かなり至れり尽くせりで便利だと思いますが


また、"お絵かき"をアップして画面を設定した時に、
ステータスバー(電波とか時間とか出ているところ)が"お絵かき"と被ってしまうので
ナビゲーションバーをちゃんと見たい場合は、ステータスバー分の余白を
あらかじめ"お絵かき"に入れておく必要がありました。

画面によって適当に入れていると、画面遷移したときにちょっとずれちゃったりして
結構気持ち悪くなってしまうので、
ステータスバー、考慮してほしいな~と思いました。


おまけ?

チャット機能が充実しているInVisionですが、面白いなと思ったのが
「ホワイトボード」というツールです。

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

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



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


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

こんにちは!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したいです。。。




2016年3月11日金曜日

日々の学習

こんにちは、舟橋です。

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

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

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

今回読んだ本はこちら、


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




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

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

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


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

ですが、「こころ」というものは歴史的文脈からなるもので、人工知能で再現するには
そこらじゅうにあるもの(机、鉛筆、海、空気..)の概念(情報)を処理しなければいけなく、今の技術ではそのロードの為に固まってしまうとのことでした。
そもそもの処理の仕方が違うとのこと。

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

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

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

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


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

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