Macでsedコマンドが思うように動かなくてハマった

というメモ。

とあるディレクトリ以下の.gitディレクトリを除いた全ファイル内の

stringA

という文字列を

stringB

という文字列に置換したい場合、

Linuxだと



のようにすれば置換できるはずだが、Mac上で打ったら



こんな風にエラーが出てうまくいかなかった。

しばらくハマったが、



このように -i の後に "" を入れるとちゃんと動作した。

Linuxコマンド集 - 【 sed 】 文字列の置換,行の削除を行う:ITpro

LINE Notifyでコードから通知してみた

og_fb
以前からLINEではMessaging APIが提供されてましたが、最近また新たにLINE Notifyとかいうのが出たみたいです。

【LINE】chatbotの開発・普及に向けて新たな展開を発表、新たなMessaging APIを公開し、開発者への正式提供を開始 | LINE Corporation | ニュース

LINE、外部との通知連携サービス「LINE Notify」発表 GitHub、IFTTT、Mackerelと連携 - ITmedia ニュース

Messaging APIが出た時も一通り触ってみたりして、その時は結構使うの(というか使うまでの準備が)面倒だなーという印象があったのですが、今回は簡単に使えるようです。

LINEのAPIはツール用途というかあくまでビジネス用途がメインのイメージがあったのですが、いきなりハッカブルなものを出してきて驚きました。

面白そうなのでちょっといじってみます。

続きを読む

YouTubeをラジオ化するChrome Extensionを作りました

Listen Tube
YouTubeをラジオ化するChrome Extension(拡張機能) 「Listen Tube」 を作ってみたので、その流れを書こうと思います。




こんな風にYouTubeで動画を表示させずに音だけを流せるようになります。

スクリーンショット 2016-09-25 20.03.18











公開したChrome Extensionはこちら。

Listen Tube - Chrome ウェブストア




作業用BGMを聴くためにYouTubeを開いたのに、気がついたら関係ない動画を観ちゃってる問題



作業中にBGMを聴きたい時はYouTubeをよく利用する方は結構多いと思います。

簡単に曲が探せますし、勝手に次の曲が流れてくれますし便利ですよね。

ただ、使う上で一個問題が...

それは、

_人人人人人人人人人人_

> 気が散ってしまう <

 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

ということ。

BGMを探しにYouTubeを開いたつもりが、ちょっと気が緩んでプロモーションビデオやバラエティ番組の動画を開いてそのまま鑑賞してしまい、気がついたら◯時間経っていたという経験があるのは僕だけじゃないはずです。

あと、これは気が散るとは別の話ですが、BGMを聴くつもりでも、動画が大きく表示されてしまうので、会社で開くのは若干憚られるという場合もあるかもしれません。

動画を見られない(=音だけ聞こえる)YouTube、欲しいですよね。

調べてみた所、

SoundYouNeed.com - Music search engine & player

こんなサービスがあったので、しばらく使っていましたが、連続再生機能が微妙だったり、ちょいちょい挙動がおかしくなるので、自分で作る必要があると感じました。

最初はYoutubeAPI使ってWEBサービス的な感じにしようと思いましたが、APIリクエスト回数制限が結構厳し目で、作った所であまりスケールしなさそうだったので、本家YouTubeのインターフェース自体をいじるChrome Extensionを作ることにしました。

(YouTubeのAPIの上限リクエスト数って申請すれば簡単に緩めてもらえるんでしょうかね? ご存知の方いたら教えてください)

Chrome Extensionの作り方



今回、Chrome Extensionを作ったのは初めてですが、かなり簡単に作ることができました。

今回の記事では細かくは説明しませんが、作り方とかは以下のページが參考になると思います。

公式はこの辺



ブログとかだとこの辺



やることは単純で、今回くらい簡単なExtensionでしたら、


  • manifest.jsonという名前の設定ファイル (Chrome Extension説明だったり設定を記述します)

  • アイコン画像のファイル

  • 実装したcssファイル

  • 実装したjsファイル



を用意して、デベロッパー登録(US$5.00が必要)して、Chrome ウェブストアにアップロードすればもう公開が完了します。

Chrome ウェブストアで公開せず自分だけが使う場合はにはデベロッパー登録する必要すらありません。

作ってみた



というわけで早速Chrome Extensionを作っていきます。

まず、manifest.jsonファイルを用意します。



設定・説明や読み込みファイルを記述するだけです。

content_scriptsのmatchesを指定することで、youtube内でのみ動作するようになっています。

ここからCSSとJavaScriptを書いていくわけですが、始めに作る上で最低限のものしか作らないというルールを決めました。

意識したのは↓この辺です。

意識したこと



対象ページを絞る



あくまでYouTubeをBGMプレイヤーとして使うというユースケースを想定しています。

僕の場合、BGMを探すときはほとんど 検索→検索一覧→動画ページ という動線なので、通らないページ(チェンネルページとか)はそのままで問題ありません。埋込み機能にも対応しないことにしました。

デザイン面は多少妥協する



今回は元のYouTubeでマークアップされているid,classを利用して見た目をいじるので、挙動がYouTube側のマークアップに依存してしてしまいます。

最初はミュージックプレイヤーっぽい見た目にしようかなとか思ってましたが、関係するclassが増えてしまうと保守性が著しく下がるので、あくまで気が散る要因を除外できれば良しとしました。

とはいいつつも、まあレイアウトがガタガタになってはテンションが下がるので、そのへんはバランスを考えつつという感じで。

作業の流れ



では何が我々の集中力を削いでいるんでしょう。

上でも書きましたが、自分がBGMを探す際は、

トップページを開く



検索ボックスにキーワード入力して検索



検索結果一覧で観たい動画(聴きたいBGM)を選ぶ



動画ページで動画を再生する

という順序の場合が殆どなので、上から順を追って対処していきます。

また、この時点で、デベロッパーモードでExtensionを読みこみ、以降ソースに変更がある度にリロードをして動作確認をしています。

※CSSを幾つかに分けて書いていますが、ファイルとしては1つです。

ソースはGitHubに上げてあります→ sfujimaki/ListenTube

トップページ



まず、トップページの「おすすめ」エリア。

スクリーンショット 2016-09-25 15.07.16

BGMを探すためにYouTubeを開いたのに、楽しげな動画を沢山出してきて、我々の集中力を削ごうとしてきます。
ここで動画をポチったら最期。そのまま数時間を失ってしまいます。

ということで、

消します。



スクリーンショット 2016-09-25 15.08.18

これですっきりしました。気を散らさずに検索アクションに入ることができそうです。

検索結果一覧ページ



スクリーンショット 2016-09-25 15.22.29

観たい動画を選ぶページですので、ここは消すわけにはいきません。

正直画像を小さくしたりしたいところではありますが...拘るとキリがないので、このままでよしとします。

動画ページ



スクリーンショット 2016-09-25 15.29.01

問題はこのページです。気が散る要素で満ち溢れています。

関連動画



まず、問題はこのサイドバーです。

スクリーンショット 2016-09-25 16.01.05

トップページと同じく、楽しげな関連動画を表示して、我々の回遊率を高めようとしてきます。

無意識のうちに目に飛び込んでくるので、気を許すといつのまにか動画を楽しんでいる自分がいます。

削除...しようかと思いましたが、一応次のBGM選ぶときにあったほうがいい気がしたので、あまり目につかないページの下に追いやります。



このようにCSSを当ててあげて、1カラムレイアウトにします。

スクリーンショット 2016-09-25 15.30.06

うん。気が散りづらくなった気がします。

コメント



スクリーンショット 2016-09-25 16.32.17

コメントもBGMを聴く上では必要ありませんね。
気が散るというほどのものでもないかもしれませんが、まあどちらかといえば気が散る要因になるので消しましょう。



スクリーンショット 2016-09-25 15.31.22

動画説明



スクリーンショット 2016-09-25 16.13.58

動画説明は...まあいいか。そのまま残しましょう。

スクリーンショット 2016-09-25 15.30.06

これでだいぶすっきりしました。

動画プレイヤー部分



最後に動画プレイヤー部分に手を加えます。

スクリーンショット 2016-09-25 16.29.58

まず最初にCSSを貼っちゃいます。



やってることはコメントに書いてある通りです。要するにプレイヤーの面積を小さくした上で、動画が表示されないようにしています。

プレイヤーを小さくしただけだと、広告動画が出た時に広告スキップボタンが押せなくなってしまうので、広告表示エリアも高さを合わせます。

(そういえば、広告ブロックするExtensionとかもあるらしいですよ。)

これでほぼ出来上がりました。

スクリーンショット 2016-09-25 15.32.38

ウィンドウ幅を変えても崩れなさそうです。

スクリーンショット 2016-09-25 20.45.16

サムネイルの挿入


ただ、このままではサムネイルが表示されません。

今回は最低限の物だけを作るポリシーで進めてきましたが、真っ黒のプレイヤーではちょっと寂しいので、サムネイルを表示する処理を書きます。

最初、「JSでog:imageを取得して表示すればいいかー」と思ってましたが、ここで罠が。

YouTube、動画間の遷移でPjax的なことをしているので、動画ページ内で別の動画をクリックして遷移した場合、Chrome ExtensionのJSを再読込してくれません。

なので、JSで普通にog:imageをサムネイル試してみたところ、別の動画に飛んでも最初に取得したサムネイルがそのまま残ってしまいました。

ソース上のog:image自体も書き換わらない模樣。

なので、何かしらの方法でページが遷移したことを検知して、画像URLを取得する必要があります。

今回はDOMの変更を検知できるMutationObserverを使って、head内の変化を検知し、変化があったら画像を取得&挿入することにしました。

MutationObserverの説明はこちら。

MutationObserver - Web API インターフェイス | MDN

タイトル等どこか一箇所の変更を検知するようにしたかったのですが、なんかうまくいかなかったので、ちょっと雑ですがhead全体をみてます。

ちょっと強引な気もしますが、プラグイン読み込んだりするのは面倒なので、あくまで素のJSぱぱっと書ける範囲に留めておきます。

遷移の度に何回か検知してしまうので厳密には「遷移を検知」とは違いますが...いいやり方ご存知でしたら教えてください。

画像はog:imageを取得しようと思ってましたが、どうやら変わらないようなので、開いている動画ページのURLから動画IDを抜き出して、画像URL(https://i.ytimg.com/vi/動画ID/hqdefault.jpg)を取得します。

遷移の度に、ビデオプレイヤー内にサムネイルを挿入します。

また、Pjaxではなく普通にページを開いた時も、DOM生成のタイミングのズレでうまくサムネイルが挿入されてくれなかったりするので、setIntervalを使って、サムネイルが取得できるまで取得をし続けるようにしました。

コードとしてはこんな感じです。



これでサムネイルが表示されます。

スクリーンショット 2016-09-25 15.33.31

バランス等ちょっと惜しい感が否めませんが、その辺を解消しようとしたらコードが膨らんできてしまったので、一旦これで完成とします。

(一応)ミックスリストでも崩れません。

スクリーンショット 2016-09-25 15.34.39

アイコンの準備



最後に、Chrome ウェブストアに登録する際に必要なアイコンを用意します。

YouTubeカラーの背景に、適当に見つけてきたフリー素材のヘッドフォン画像を組み合わせました。

icon

公開



あとは、

デベロッパー ダッシュボード - Chrome ウェブストア

こちらから公開するだけです。

公開の仕方は、この辺を參考にしてみてください。



基本的に、作業フォルダをzipに固めてアップロードして、幾つか情報を入力するだけで公開できます。
どれくらい情報を作り込むかにもよりますが、今回は最低限の項目だけ埋めたので、10分もかからず公開まで完了しました。(後からいつでも編集できるっぽいです)

今回作ったChrome Extensionはこちらで公開されてるので是非使ってみて下さい。

Listen Tube - Chrome ウェブストア




※拡張機能管理ページに行かないとOn/Offできませんが、どうしても動画を観たい時はシークレットウィンドウで観るか別ブラウザで観るといいと思います。

あと、自分でも登録してみましたが、特にデータ吸い上げたりしてなくてもこんな表示がでちゃうんですね...これは紛らわしい気が。

スクリーンショット 2016-09-25 20.15.01

データ吸い上げたりしてないので、安心してください。

最後に



実際に書いたコードは大した量じゃありませんが、一応GitHubにも置いておきました。

sfujimaki/ListenTube

以上、いかがでしたでしょうか。

作ったばかりなので僕自身まだそんなに使っていませんが、今のところ結構便利な気がしているので、皆さん是非使ってみてください。

使っていて、不具合とか、「こうしたらいいんじゃない?」というのがあったら@macky256宛に是非お知らせください!

こういう、「実装は楽だけど結構便利」的なものはどんどんつくっていきたいですね。

映画『ほしのこえ』(新海誠) を観て

51pt-bueHoL._SX940_
※一応ネタバレ注意

先日「君の名は」で初めて新海誠作品を鑑賞しました。
恥ずかしながら、新海誠作品を観るのはこれが初めてだったので、もっと色々観てみたいと思いTwitterで聞いてみたところ、「ほしのこえ」から観るのが良いのではとの声をいただきました。



 

Amazonビデオだと200円だったので、Amazonビデオで鑑賞。



「君の名は」の感想が上手く言語化できなくてちょっと悔しかったので(近々また観たい)、「ほしのこえ」の感想を書いてみたいと思います。

どんな作品かというと


携帯メールをモチーフに、宇宙と地上にわかたれた少年少女の超遠距離恋愛を描いたSFロボットアニメ作品
Other voices-遠い声- » 「ほしのこえ」


という感じなのですが、なかなかぶっとんだストーリーなので多分観てみないと分からないと思います笑

予告編はこちら



Amazonビデオ版では最初は短編「彼女と彼女の猫」が流れて、その後に「ほしのこえ」がはじまります。

新海さん自身が


「一人で作った」等の話題性からか思惑をはるかに超えるヒットとなりましたが、今となっては自分では見返すのも忍びないとても稚拙な作品です。
Other voices-遠い声- » 「ほしのこえ」


と述べている通り、画は「君の名は」等最近のアニメに比べると粗い感じはしますが、背景は今と比べても劣らない美しさで、このときから既に自身の世界観をを確立していたんだなぁーと驚かされます。

ストーリーはこちらにある通りです。
ほしのこえ - Wikipedia

2047年の話だけどガラケーを使っていたり、いきなり戦闘シーンになったり、戦闘シーンで制服を着ていたり、ストーリーについてはかなり突っ込みどころがあったのですが、所々での「切なさ」の描写が上手いなぁーと思いました。

自分的には以下の2つが切なさのハイライト。

ミカコが宇宙に旅立ってしまうところ。


主な登場人物は中学の同級生のミカコとノボルで、中学生の頃からお互い淡い恋心を抱いていたものの、高校進学を機に、ミカコは宇宙軍の選抜メンバー。ノボルは普通の高校生としての道を歩みます。
これにより、2人は立場的にも物理的にも離れてしまいました。切ない。
女の子のほうだけエリートコースを進んでいくという作品は少し珍しい気もしますが、これにより、ノボルの葛藤に感情移入しやすくなったように思います。
そして、物理的な距離が離れる度に、メールの通信にかかる時間も長くなり、お互いの時間軸にもズレが生じ、さらに2人の距離は離れてしまいます。
観てる側としては、このままどちらかの心が離れてしまうのではないかとハラハラしました。(ノボルの心は離れかけていそうな描写でしたね)

8光年ワープし、更に離れ離れになってしまうところ


その前にもワープによって1光年離れてしまうタイミングがあり、2人の時間軸も1年離れてしまっていましたが(メール送信に1年かかる)、
2度めのワープによって、地球と8光年離れてしまったことにより、2人は完全にバラバラになってしまいました。
1年の時間のズレならまだギリギリ相手の存在を意識できるような気もしますが、8年もズレてしまうと、相手はいなくなってしまった(≒死んでしまった)と近い感覚なのかなぁと。
その絶望感を考えると切なすぎます。

8年の月日を超えて最終的にノボルにそのメールは届きますが、ノボルの気持ちはその時までミカコに向いていたのか、作品中では明かされていなかったので、答えが非常に気になります。(携帯を持ち続けていたのが答えだったのかな)

「君の名は」でも感じましたが、新海タッチの美しい風景とポエム調で語りかける登場人物の少々クサいナレーションが切なさを加速させます。

そして最後に、何よりすごいのはこの作品を新海誠さんが一人で作り上げたということです。


25分のフルデジタルアニメーションの監督・脚本・演出・作画・美術・編集のほとんどを、新海誠監督が一人で行なった。制作環境はPower Mac G4 400MHz、使用されたソフトはAdobe Photoshop 5.0・Adobe After Effects 4.1・LightWave 6.5など。
ほしのこえ - Wikipedia


すごい… 最近知ったのですが、新海さんはサラリーマン(といっても全く関係ない所でもなさそうですが)やりながら初期のアニメーションを作っていたとのこと。
新海誠 - Wikipedia
このバイタリティは今の自分に欠けているので、もっと頑張らないとなーと思いました。

色々書きましたが、なんていうか、「これを一人で作ったのか!」と感じるだけでも観る価値はあるような気がします。レビュー観ても賛否両論はあるようですが、この少し浮遊感のある切なさはこの人以外の作品だとなかなか感じたことがないひょうな気がします。

うーん、やっぱり感想が書きづらい。
他の新海作品も観て、もっとその世界観に触れたいと思います。


Slim(PHP)を使う時のリサーチメモ

11195762
Slimを使う時に調べたページのメモ



作ってみた系記事





その他色々





參考になりそうなGitHub Repository



このへんを一通り眺めれば使い方とかが何となく分かると思います。
色々まとめてみましたが、↓の検索結果を一通り眺めるとかでも良さそう。
Search · slim


Doctrineを使う時に參考にしたページのメモ

209254
Doctrineを使う時に調べたページのメモ。

使い方






最近PHPのマイクロフレームワークであるsilexを使っていて、そろそろORMも使っていきたいので、symfonyでもおなじみのDoctrine ORMのチュートリアルを英語の勉強も兼ねて和訳・実行していくことにしました。





Slim×Doctrine






Provides support of ENUM type for Doctrine in Symfony applications.Slim 3 with Doctrine 2
I have recently started looking at using a PHP microframework to build a simple REST API for an app I’m working on. I was looking for something well supported/documented which would be easy to integrate with Doctrine 2. I’d heard good things about Slim 2 so thought I would check out the new version and maybe write a bit about it.



型の設定とか





その他色々





參考になりそうなGitHub Repository




ユーザーテストの見学会に参加して知った、テストの一連の流れ・コツをまとめました

13308552_1217209734970372_4745815642412042004_o
先日、友人に誘われてこのイベントに行ってきました。

【5席増席】ユーザーテストLive! 2周年記念「UTライブの『舞台裏』ライブ見学会」 | Peatix





イベントの趣旨はこういったものになります。(イベントページから引用)


ユーザーテストLive! 見学会』は、仕事帰りに・手軽に・気軽にユーザーテストを体験できる機会を提供して、製品/サービス開発の現場にもっとテストを普及させることを目的にしています。そのため、専用の施設と特殊な機材を使った立派なテストではなく、普通のオフィス環境と身近にある機材を活用したDIY方式のテストをお見せしています。

では、どのようにして、普通の会議室をUXラボに仕立て上げ、身近な機材を使ってユーザーテストを実施しているのか?---2周年記念の今回は、普段の見学会の会場では目にすることがない、「控室」や「テスト室」で行われている『舞台裏』の活動を実際にお見せしようと思います。


要するに、実際に存在するアプリのユーザーテストを第三者視点で見学してみようという会です。場所はmixi社でした。

ユーザーテスト自体に凄く興味がある!というわけではないのですが、人にインタビューするとき(「こういうサービス考えてるんだけどどう思う?」みたいなやつ)のテンションやら質問内容がいつも定まらないので、何かしら參考になるかなーと思い参加してみました。

ユーザーテストの一連の流れを第三者視点で見学できる機会はなかなかないですし、気づきも多かったので、その内容をブログに残しておきます。
(有料イベントですが、主催者の方からOKはいただいています)

恐らくユーザーテストにも色々なやり方があると思うので、他のやり方も調べてみたほうが良いとは思いますが、実際にやったことがないと気付けないようなノウハウ(机にガムテでスマホ操作位置をマーキングしたほうが良い・画面ロックは解除したほうがいい等々)も結構あったので、これからユーザーテストをされる方の參考になればと思います。

※ ちなみに今回の話に出てくる"ユーザーテスト"はコンセプト検証のためのテストではなく、UI/UXの検証のためのテストです

最初の30分くらいはこのイベント立ち上げの経緯等や、これまでのイベント内容のご紹介をされていましたが、そのへんはメモってなかったので、実際にユーザーテストの流れについての部分のみ書きます。

それではどうぞ。

ユーザーテスト環境の準備



控室・テスト室(被験者にアプリを触ってもらう部屋)・観察室(被験者の様子を観察する部屋)の3つが必要なようですが、今回はデモ用に仕切りを設けず以下のようなレイアウトで行っていました。(超ざっくりですが)



ユーザーテストのためには主に以下の準備が必要です。


  • 手元を写すWEBカメラ&スタンドを用意する

  • 別室でやるので、観察室とテスト室でSkypeをつないだりしている。

  • 部屋が近ければSkype等を使わず有線でOK

  • 観察室側のPCは基本マイクとカメラをオフにしておく。
    (観察者のリアクションが被験者に伝わると、自然な動きがだしづらくなる。同様の理由で被験者と観察者があまり会わないないようにする)


  • テストをしていると被験者が使っているスマホとカメラの位置関係がずれてしまうので、ガムテープをテーブルに貼り付けたりして、操作位置をマーキングする


  • 被験者が他の被験者の様子・リアクションを見なくて済むよう導線を考える

  • 控室にお茶とかお菓子とかも置いておくと良い

  • (当たり前ですが) ユーザーテスト時のシチュエーションとタスクの準備

  • 例えばECアプリの場合だと「夏で暑くなったのでハーフパンツがほしくなりました - このアプリでハーフパンツを探してください」というようなもの。

  • 口頭で被験者に伝えてもテスト中に忘れてしまうので、紙に印刷しておく。



今回のテスト室はこんな感じになっていました。


(写真もっ撮っとけばよかった...)

Skypeを活用するのは面白いなーと思いました。部屋が離れていても見学ができるので便利ですね。

カメラを固定するスタンドは、




こういうアームクリップを使うと良いとのことです。

被験者のリクルーティング条件



今回は

シュフーチラシアプリでお買い物 お得で便利を App Store で





こちらのシュフーというアプリのテストを観察したのですが、デモなので被験者を参加者の中から募っていました。
その際の募集条件として挙げていたのがこちらです。
* iPhoneもしくはAndroidを今日もっている
* 普段スーパーやドラッグストアで自分で食料品等を購入している人
* 新聞の折込チラシを利用している・利用していた
* シュフーというアプリ(今回のテスト対象のアプリ)を使ったことがない

ちなみに、ユーザーテストにおいてある程度重要な項目を判定するには被験者が5人は必要だそうです。
(主催者の経験則ではそれより多いと項目が被ってくるとのこと)

ここから実際のユーザーテストの流れに入っていきます。

控室にて



リクルーティングした被験者に会場に来てもらったら、まず控室に入ってもらい以下のことをします。


  • 簡単なアイスブレイクを行う
    — 被験者は慣れていないのでいきなり思考を口に出すことがが難しい。なので口ならしが必要。

  • (必要があれば)NDA署名してもらう

  • アプリのインストールをしてもらう
    — 端末の設定のところで、自動ロックがかかってしまうことが多いので、ユーザーテスト中にロックがかかると面倒なので、自動ロックの解除をしてもらっている。
    — 被験者端末が通信制限かかってることがあるからW-iFiをつなげるようにしておいたほうが良い。


  • ユーザーテストの説明
    — ユーザーテスト被験者の経験はありますか?
    — 何のためにするかしってますか?
    — 一般ユーザーに使ってもらって改善をするために行う(= 変な用途に使うものではない)ということを理解してもらう


  • テスト中は5~10秒以上沈黙が続かないように、考えていることを声に出すようにして欲しいと伝える


  • イメージがわきづいらい人もいるので、お手本の動画(他のアプリver.)があると良い
    — シチュエーション・タスクの読み上げ(ECアプリの場合「夏で暑くなったのでハーフパンツがほしくなりました - アプリ上でハーフパンツ探してください」)の正しい例や、思ったことを口に出しながらタスクを実行する様子を見せてあげる

  • よくあるNGも見せてあげると良い


  • 他のアプリでその場でちょっと発話デモとかもしてもらう。
    (「いつも使っているブラウザで明日の天気をしらべてください」みたいな感じで)
    → 発話が足りなかったり違ってたりしたら本番テストに入る前に指摘する。


  • LINEとかSlackの通知がテスト中に表示されると気になるので、通知をオフにしてもらう。


  • テストの流れでカメラロールを開く必要がある場合は事前に伝えて、プライベートな写真がみえないようにする(被験者が気にしてしまう)

  • 始める前に、不明点がないか聞く。不明点があれば解消する。



以上が完了したら、テストルームに入ってもらいます。
(テストルームのセッティングはここまでに完了させておく)
ケースにもよりますが、控室での談話はだいたい10-15分とのとです。

テストルームにて



テストルームに入ったら、被験者に椅子に座ってもらいます。
※ タスク(テスト時にやってもらう内容)は口頭での説明だけだと忘れてしまうので、紙に印刷して被験者の手元においておきます

被験者に質問



タスク実施に入る前にデモではこんな質問を最初にしていました。


  • どんな時買い物しますか?

  • どれくらいの頻度でいきますか?

  • 普段からつかっていると。

  • 新聞の折込とかご覧になりますか

  • どれくらいの頻度で

  • どういったチラシを読みますか

  • だいたい毎回みるチラシは同じですか?

  • チラシを見たあとはどういう風にしていますか?



この辺の質問も事前に用意しておいたほうがよさそうです。

被験者にタスクを実施してもらう



ここからタスク実施に入っていきます。
被験者にシチュエーションとタスクを書いた紙を渡し、声にだして読んでもらいます。
不明点ないか確認し、実際にタスクを開始します。
(ここで被験者がスマホ上で行っている動作を、カメラ越しに別室で観察するイメージです)
タスクの回数分だけ、
タスク読み上げ→タスク実行
を繰り返し、テストを終了します。

事後インタビュー



これも内容についてはケースによると思いますが、今回はテスト後にこのようなことを被験者に質問していました。


  • 率直なアプリの感想を教えてください

  • 今日アプリを利用して、このアプリに対しての評価はApp Store or Google Play Storeの5段階評価だといくつですか?

  • このテストが終わってからアプリをどうしようと思ういますか?(プッシュ通知設定を切る・アプリ削除するかetc.)

  • その理由は?

  • 例えば新聞がこなくなって、チラシがこなくなったらこれを使いますか?

  • 本日のテストとインタビューは以上です。ありがとうございました。



という形でユーザーテストは終了。
その後被験者に謝礼を渡しますが、相場は1時間で交通費込で4000円とかが多いようです。

Q&A



ユーザーテストの後に、主催者と参加者間のQ&Aがあったので、そちらのメモも書いておきます。


  • タスクの設定の仕方はどうしてるか?
    →内部でパイロットテストをして精査する。


  • アプリを使うのを放棄する(離脱)という選択肢を許すかどうか?
    → タスクの完遂を目標におく。普段だったらやめるというタイミングで言ってもらうようにするのもあり。


  • ユーザーが迷ってどうしようもなくなったらどうするか?
    → 制限時間をもうけて、終わらなかったらヒントをあげて次に進んでもらう


  • ラポール(相互信頼)形成・アイスブレイクのこつは?
    → 被験者は意外と頑張ってくれるから(謝礼もあるし)、あまり気にしなくても大抵問題ない。
    ビジネスの関係であることはお互い分かっているので、仲良くならなくても大丈夫。(大人の場合はまず大丈夫だが、子供の場合は大変)


  • テスト時のスマホの持ち方は考える必要があるか?
    → 電車内で使うもの(つり革を掴んでいて片手しか使えない)等、特定の利用シチュエーションを想定していた片手制約を設けたりするが、だいたいは机に固定でOK


  • 被験者が緊張しそうな気がするが、どうなのか?
    → 意外とみんなフランク。観察されていることを忘れて素直にアプリをdisる人もいる。


  • プロトタイピング段階のテストでもいいか
    → プロトタイピングとしての評価はできるので、コンセプトの検証としては良い。ただ、非アクティブな導線(押せないボタンがあったり等)が多くなるので、モデレータが逐一説明する必要がでてきてしまう。
    — ただ、サンプル数を増やしたほうがいい。5人だと少ない。
    — 一般的に質的な調査は10~15人。そのくらいになると飽和してくる。(統計学的な話ではなく、経験則)
    — 10-15人にきいて、1人くらいしか良いといってなければ多分それはうまくいかないプロダクト
    — 謝礼を払うのはある意味リスク、ネガティブな意見が出づらい。 本当にコンセプトを検証したければ、対象となる人をみつけて、お金を払わず検証。(ただ、人が集まらずそうはいってられないことも多いのでその場合は仕方ない)
    — コンセプト検証ではなく、ユーザーテストに関しては謝礼を払って全然構わない。お金を払ったからといって上手く操作できるわけではない。
    — ユーザーテストで評価するのは離脱とかではなく、インタラクション(ユーザーとコンピュータの対話)なので、そこを見誤らないように。統計的な信頼性はないが、質的なものとして大事。離脱についてはは計測でわかる。




最後に



全部がっつりメモをとったわけではないので抜け漏れもあるかもしれませんが、内容としては大体こんな感じでした。
ユーザーテストの流れやインタビュー方法は本やWEBにも載っているとは思いますが、「じゃあどんなテンションで話しかければいいの?」という点は結構気になっていたので、今回第三者の視点で生のユーザーテストを観ることができて良かったです。
また、第三者の視点で見ていると、質問が誘導的だなーと感じてしまうところも所々あったので、その辺も気をつける必要がありそうです。

イベントの最後に主催者の方が告知をしていたのですが、、見学会でアプリのテストをしてほしい企業(無料。4週間くらいで実施までもっていけるそうです)・また会場提供スポンサーは随時募集しているとのことなので、興味がある方はこちらから主催者の方にご連絡してみてはいかがでしょうか。

【5席増席】ユーザーテストLive! 2周年記念「UTライブの『舞台裏』ライブ見学会」 | Peatix





また、今回の内容に興味をお持ちでしたら、主催者の方が執筆された本を読むと理解が進むと思いますので、ご紹介しておきます。

Kindle版





単行本版





それでは。

【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でFacebook Messenger Botを作る方法

facebook-ogpsd_02

はじめに



Facebook Messenger Apiが開放されて、Bot作ってみた系を沢山見かけるようになりましたが、作り方がよくわからないという方も結構らっしゃるのではないでしょうかでしょうか。 Messenger Botを動かすには、プログラムを書く必要があるのは勿論のことながら、 サーバーを用意しなきゃだったり、 SSL証明書を用意しなきゃだったり、 等々色々やることがあり、この辺の知識がない状態で必要な環境を自分で用意するとなると結構骨が折れます。(とはいっても調べながらやればなんとななるとは思いますが!) 色々調べてみたところ、技術的な前提知識がなくてもとりあえずMessengerで遊べる方法があったので、まとめてみました。 実現したいゴールは先日書いたこちらのLINE版の記事と一緒ですが、

【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でLINE BOTを作る方法 – FJMK.jp





【宣伝】Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです ↓↓↓



この記事で目指すゴール



プログラミング未経験/初心者の方でも、お金をかけずに最短距離でとりあえず動くFacebook Messenger Botを作って遊ぶことをゴールとして記事を書きました。 こんな風に、ある文字列を送信したら、予め決めておいた返事が返ってくるようなBotを作ります。

動作画面

利用するサービスの都合上、マイナーな言語を使うので正直ベストな方法ではありませんが、難しいことをしなくてもこの通りやればMessenger Botをすぐに作れるよくらいに考えていただければと思います。 ※ 無料サービスを使うので、7日間しか動かないです (作りなおせばまた7日間使えます) ※ エンジニアじゃなくても分かるとかいたものの、多少はITの前提知識がないと厳しいかもしれないです…笑

Facebook Messenger APIでできること



この記事を見ておけば、Facebook Messenger APIでできることを一通り把握できると思います。今回はこの辺を読まなくても作れますが、時間があるときにでも読んでみてください。

Facebook Messenger Platform BETAでできる全ての事を試してみた(LINE BOT APIとの比較あり) - Qiita





Messenger Platform





作り方



それでは順を追って説明していきます。 Facebook Pageの作成と、Facebook Appの作成、そしてWebscriptというサービスにコードを書いてAPIを作成します。

WebScript登録



上記の通り、Facebook Messenger Botを動かすには、BotのAPIを用意する必要があります。 普通にやろうとすると自分でサーバーを立てたり環境構築をしたりSSL証明書を取得したりと面倒なので、今回はWebScriptというサービスを使います。 webscript - scripting on the web Lua言語というあまり使われない言語ですが、基本的な書き方については他の言語と大して変わりません。 まず、webscriptにアクセスしてください。

webscript - scripting on the web





enter image description here

右上のlogin/signupをクリック

enter image description here

sign up for free を押します。

enter image description here

メールアドレスとパスワードを入力して Sign Upをクリック

enter image description here

これでwebscriptにアカウント登録がされました。右上のLogin/Signupを押してログインに進みます。 (正しく入力しててもこんな風にエラーがでてしまうことがあるのですが、気にせずログインできるか試してみてください。)

enter image description here

enter image description here

ログインしたら利用規約確認画面が出るのでAcceptをクリック。 それでは実装に入っていきます。 `

enter image description here

利用規約を承諾するとこの画面になると思うので(なってなかったらScriptと書いてある上部のタブを押してください)、左側にある "Create New Script"をクリックします。

enter image description here

するとこんなポップアップが出るので、お好きなアルファベット文字列を入力してください 。ここではmessenger-exampleとしています。(他の人と被った文字列は使えません) これが今回作るAPIのURLになります。 入力したら"Create"を押して下さい。

enter image description here

こちらのコードを入力して、saveを押してください。


こんな風に所々解説を書いていますが、-- (ハイフン2個)に続く文字列は"コメント"といってプログラム上では無視されます。 (Lua言語では -- ですが、他の言語では // や # や /* */ が使われることが多いです)

Facebook Page作成



まず以下のリンクに飛んでFacebookページを作ります。

Facebookページを作成




Facebook Page新規作成

ページの種類はどれでもいいのですが、今回はBrand or Productを選択します。 (記事を書いてから、MessnegerではなくMessngerになってることに気づきました笑)

Facebook Page新規作成

ページのタイプ(ここではApp Pageを選択)とページ名(ここでは Messenger Bot Test に)を選択し、Get Startedを押します。

Facebook Page About設定

入力してもいいですが、今回はテストなのでSkipします。

Facebook Page アイコン選択

アイコン選択も同様にSkip。 ちなみに、ここで選択した画像がBotのアイコンになるので、設定したい方は設定してください。

Facebook Page お気に入り追加

お気に入り追加するかどうか設定。こちらはお好きにどうぞ。

Facebook Page Audience

対象ユーザーの設定。入力してもいいですが、今回はスキップします。

Facebook Page 作成完了

これでFacebookページができました。




FB App登録



次にFacebookアプリを作成します。 まず、こちらのページにアクセスしてください。

Quick Starts - 開発者向けFacebook





FB App作成初期画面

どのプラットフォーム上でのFacebookのアプリを作るかきかれるので、wwwを選択してください。(どれでも大丈夫といえば大丈夫ですが、今回はこれでいきます)

FB App名前設定画面

アプリ名を適当に入力してCreate New Facebook App IDをクリック。

FB App連絡先Page登録画面

メールアドレスを入力して、Categoryを選択。 どれでもいいですが、今回はApps for Pagesを選択しました。 Create App IDをクリック。。



こんな画面に遷移するので、下にスクロールしてください。



webサイトのURLを聞かれるので、URLを入力します。 自分のサイトを持っていたら自分のサイトのURLで。なければ適当なURLでも大丈夫です。

FB App 初期設定完了画面

これでFacebookアプリができたので、Skip To Developer Dashboardをクリックすると、アプリのダッシュボードに飛びます。

FB App ダッシュボード

これでFacebook Appができました。 ダッシュボードはこちらから飛べるので、見失ったらこちらをクリックしてください。

All Apps - Facebook for Developers- - -

疎通確認



Botを使うにはFacebook Appと自作APIの間でリクエストが通るかどうかチェックする必要があるので、その作業を行います。



まず、Facebook Appのダッシュボードでmessengerタブを開く(左下のMessengerを押して下さい)



Get Startedをクリック



webhooksをクリックします。



webscriptで設定したURLと、tokenとして適当な文字列(ここではtokenexample)を入力し、messagesにチェックを入れVerify and Saveを押します。 もしここでtokenexampleから他の文字列に変えていたら、webscript上の



ここでtokenexampleとなっているところも変更してください。 この時に裏で設定したCallback URLに対してGETリクエストが飛ばせれ、webscriptに入力した



この部分が呼ばれ、Facebookと自作のAPIが正しく疎通できているか確認されます。



問題なく疎通確認できたらこの通りCmpleteが表示されるので、次はその下のSelect a Pageで今回作ったFacebook Pageを選択



こんなダイアログがでるのでOkayをクリック。



次もOkayをクリック。



ページが選択されたので、Subscribeをクリックします。



最後に、ダッシュボード上部のToken Generationの欄の Select a Pageで今回作ったFacebookページを選択し、表示された長い文字列をコピーします。(クリックするとコピーされます。) そして、webscriptの編集画面で



ここのXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXとなっているところに貼り付けてください。 そして、Saveを押します。

動作確認



ここまで上手くいっていればBot動くはずなので、動作確認をしようと思います。 まず今回作ったFacebook ページにアクセスしてください。

Facebookページ

Messageをクリック

メッセージ

チャットボックスが表示されるので何か文字を入力してください。

完成



返事がきたら成功です!

動作画面

スマホでも勿論動作します。

動作画面



コードのこの辺をいじるとメッセージの条件を変えられるので色々いじって遊んでみましょう (変更したらsaveを押すのを忘れずに!)

最後に



作ったBotはちゃんと動きましたでしょうか? webscriptはあくまでプロトタイプ用なので、これが上手くうごいたら次はサーバーを用意するなりして他の言語 (rubyとかphpだと情報源が多そうです)でもうちょっと高度なBot作成も試してみてください。 また、Botに関する情報共有用のFacebookグループを作ってみました。 記事の内容についてやBotについての質問があれば、ここに書いていただければ分かる範囲でお答えするので、興味がある方は是非入って下さい! こちらです
↓↓↓


【エンジニアじゃなくてもできる】一切お金をかけずにブラウザ上で10分でLINE BOTを作る方法

db2099d69c3dc937091b34c67cf8e31a
LINE Bot Trial Apiが開放されて、Bot作ってみた系を沢山見かけるようになりましたが、「1万人限定らしいからアカウントとってみたけど、BOTの作り方とかよくわかんない」という方も結構いるんじゃないでしょうか。

LINE BOTを動かすには、プログラムを書く必要があるのは勿論のことながら、


  • サーバーを用意しなきゃだったり、

  • SSL証明書を用意しなきゃだったり、

  • 固定IPを用意しなきゃいけなかったり



等々色々やることがあり、この辺の知識がない状態で必要な環境を自分で用意するとなると結構骨が折れます。(とはいっても調べながらやればなんとななるとは思いますが!)

色々調べてみたところ、技術的な前提知識がなくてもとりあえずLINE BOTで遊べる方法があったので、まとめてみました。

続きを読む