IFTTTでFacebookとブログの連動をする時にすこしハマったことをまとめる

ブログとFacebookなどの連動で、最近はやりのIFTTTこのブログでも以前紹介しましたが、こちらの設定でいくつかハマッてしまったことがありましたので、まとめておきます。

1.複数のFacebookページを管理している時にFacebookページが選べない

一つのIFTTTアカウントで複数のFacebookページの管理をしている時、新規でレシピを作った時にはじめに設定したFacebookページの連携しか選べないことありませんか?

僕はありました。困りました。調べたら変更できました。

「Channels」から変更が可能です。
ifttt01

手順としては、まずレシピを作る前に「Channels」にいき、Facebookページの項目を選んで、

ifttt02
「Edit Channel」から連携するFacebookページを選びます。

ifttt03

この状態で、新規レシピを作って、ブログとFacebookページを連動させます。

2.Facebookページへの投稿パターン

しっかり英語を読めば、間違えることはあまりないかもしれませんが…
Facebook(ページ)への投稿パターンは3つあります。

status message
シンプルなテキストのみの投稿

link post
下記のようなリンクの投稿。
アイコン画像は、OGPで定義したものが表示される。
link

Upload a photo from URL
エントリー内の画像を拾って、Facebookのアルバムに投稿してくれます。
photo

status messageであっても、投稿のリンクなどを入れることは可能ですが、はやり反応率的には
link postかUpload a photo from URLの方がいいのではないかと思います。
もちろん、OGPを設定してあるという前提ですが。

自動で連動するのがいいか悪いかは別として、連動させるのであれば、どのようにするのがベストなのか、きちんと効果測定をして、軌道修正をしていかなければならないのかなと感じている日々でございます。

scssとかのコンパイルにはkoalaがいい感じな件

最近はめっきり、scssを使ってcssを書く事が増えています。
特に、css spriteなんかは、compassの機能で画像まで吐き出してもらうようになって、かなり効率が良くなっています。
って使っていると言ってもそれくらいなんですが、それでもこういったメタ言語をつかうときコンパイルという処理が必要なことには変わりありません。

僕みたいなライトユーザーにとっては、「無料or低価格で、最低限の処理を楽にできる」というのが必須条件になるわけであります。

勉強を始めた当初は、scoutを使っていましたが、案件ごとに設定をするのがめんどうで・・・
いや、シンプルで使いやすかったんですけどね。

そこに登場したのがkoala
windows、macでも使えて、設定も超楽チン。
アプリを立ち上げて、プロジェクトのフォルダをドラック&ドロップするだけ。
koala02

フォルダ構成を自動で判別して、設定してくれます。
koala03

直感的というか、プロジェクトをセットするだけであとは何もしなくていいくらいです。この使ってる感ゼロの感じ素敵です。
compassにも対応してますし、僕は使っていませんが、CoffeeScriptにも対応しています。
立ち上げておけば、自動でコンパイルもしてくれるし、ファイル毎に書き出しの形式を設定できたり、エラーがあればアラートしてくれます。

Sublime Text2でもできますが、しばらくはこれを使いそうです。

それしても、web系のツールって、動物をモチーフにしたものが多いっすね。

TinyPNGはパンダだし、
SpriteCowはうしだし、
Koalaはコアラだし。

次はペライチサイト簡単作成ツールで、KIRINとかでるとか、でないとか。

Sublime Text2を再インストールしたら、パッケージが使えなくなっちゃった話

最近、会社のパソコンの調子がすこぶる悪く、如何しがたい状態でございました。
まー、それは解決せずに、だましだまし使っているのですが(今日はなんか調子いいですけどね、なんだか使っている人間の調子にシンクロするみたいですね。ある意味ヒューマノイドPC的な)
その流れでSublime Text2がかなりダメダメになってしまいまして・・・原因もわからないので再インストール(2.02)をしてみたりしたところ

インストール済みのパッケージが動かない。
なぜ?

ファイルの種類選択からSCSSがない。
なぜ?

という、怪現象に見舞われてしまいました。
それでも、立ち止まっている暇もないもので、自分をごまかしながら使っていたのですが、決定的だったのが、jqueryの$(document).ready(function()…の自動展開。
これまで使えなくなってしまっては、もはやSublime Text2を使う意味すら疑ってしまいます。

はい、ちゃんと調べましたよ。そして、解決しましたよ。
簡単なことでした。

ユーザー設定のjsonファイルをみたら、

"ignored_packages":
 [
     "Vintage",
     "SFTP",←これはつかってなかったからそのままでもいいけど
     "SASS Build",←これもつかってなかったからそのままでもいいけど
     "jQuery",←これとか
     "SCSS",←これとかほんと困りますので。
     "Sass"
 ]

無視するパッケージリストなる定義がしてあって、そこに該当するパッケージが入っているじゃありませんか。
ってか、いれてねーし、勝手に決めんなよ・・・
きっと、再インストールした段階でパッケージはインストールされていたけど、初期化されてしまったんですね。

ちーん。

ここから使いたいパッケージを削除したら、問題なく動いていたということは言うまでもありませんでした。

カンプを作る時に便利なツール「Placehold.jp」

htmlベースのカンプを作る時にダミー画像を使うことが多いと思いますが、
そのダミー画像を生成してくれるツール「Placehold.jp」が地味に便利だったのでご紹介します。

Placehold.jpでは、数値を入力するとそのサイズのダミー画像を作ってくれます。

http://placehold.jp/600×150.png

こんな感じ。

便利なのが、いちいち画像を生成しなくても、urlの数値を変更すれば、そのサイズの画像に変更されるということです。

http://placehold.jp/500×150.png

さらに、テキストを入れることもできます。

http://placehold.jp/500×150.png?text=ダミー画像

すごい。

スタイルシートを適用させることもできますので、ボタンっぽいダミー画像にしてみたりとか色々できます。
(そこまでする必要があるかは別として)

カンプのダミー画像っていちいちサイズを切り出すのも面倒だし、無駄にグラデーションをかけたり、人物用の画像だったら、シルエットを入れてみたりと、無駄な作業をしてしまっていたり、しませんか?

僕はしていました・・・

こうゆうサービスをうまく利用すると、カンプ作成の手間が大幅に削減されます。浮いた時間をコンテンツ制作にまわしたり、カンプの精度をあげたりと有効に使えると思いますので、覚えておきたいですね。

地味に便利…と言ったら大変失礼ですが、僕の制作ツールブックマークに速攻で登録させてもらいました。

モバイル決済乱立の巻

ここ数日の間で、スマホを使ったモバイル決済のサービスがいくつかスタートしています。
Square

Coiney

どちらもiphoneなどのスマホに専用のカードリーダーを付けて、カード決済をしてもらうというものです。
実店舗でのカード決済導入に使うものですね。

さっそく、他のサービスも含め料金などを比較している方がいました。
キャズムを超えろ!|初期費用ゼロ、手数料最安、支払い最速!モバイル決済の本命Squareと、Coiney, PayPal here, 楽天スマートペイとの比較表を作ってみた

僕の実務としては、ほとんど提案する機会がないかと思いますが・・・
カード決済の導入って、審査とか大変で小規模店舗だとなかなか導入できないと聞いています。
モバイル端末を使って今まで出来なかったようなことが実現されてくるとワクワクしますね。

これからもっともっと色んなサービスが増えてくると思うと楽しみ過ぎます。
自分もそうゆうサービス提供者になれるように・・・がんばります!

Google Analyticsで簡単にABテストをしてみた

タイトルのまんまです。実務としてではなくて、実験的にというお話なので、どちらかというと使い方の説明です。

Google Analyticsには、ウェブテストという機能があります。これを使うといわゆるABテストというのが簡単に実施できます。
ABテストというと、どうもマーケティングよりな話になってきそうで、本当に苦手なのですが、ウェブサービスであれば、UIのテストをしてみたりと、一概にマーケティング屋さんだけの分野でも無いと思いますし、どう云う形で関わるにせよ、webで成果を出すためにテストをするというのは、とても大切なことだと思うので、覚えておいても損はないか。
※Google Analyticsのwebテストは単一ページのテストしかできないので、ウェブサービスのUIとなると少し違うかもしれませんが・・・

使い方は非常に簡単です。

まず、テストしたいページを用意します。
テストしたい事柄によって異なりますが、バナーを変えてみたり、文言を変えてみたりetc
パターンは複数登録できます。

ページの用意ができたら、あとはGoogle Analyticsに登録するだけです。

ウェブテストのページを開いて、テストしたいページを登録して

指標などを設定します。
本来ならお問い合わせなどのコンバージョンを設定しておいて、それを評価するべきかと思いますが、単純にページビューや滞在時間などをはかることも可能です。

テスト対象のトラフィックという項目の数値を変えると、テストしたいページの出現率を比較できます。
既に運用しているページの場合、テストしたいページの出現率をあげてしまうと、最悪コンバージョンが大幅に低下するということも予想されるので、状況に合わせて慎重に決めたほうがいいです。

次にテストしたいページを設定します。

試していませんが、動的に生成されるページもテストできそうなので、CMSでサイトを構築していても問題なさそうですね。

最後にコードを取得して、オリジナルページに貼り付けます。
この時、テストしたいページにもGoogle Analyticsの解析コードが入っていないとエラーになりますので、要注意です。

とここまでの登録は、画面の通り行うだけで、簡単に出来てしまいますし、不備があると(解析するページのコードがおかしいとか)アラートを表示してくれるので、間違えることはほぼないかと思います。

実際にテストを仕込んでみたページはこちらです。
DEMO
何回かアクセスすると、ページ下部のバナーが切り替わるかと思います。

実際の解析結果はこんな感じ。

ブログを書いている時点で僕しかURLしらないので、解析も何もない結果となっておりますが・・・

こんな感じで、簡単にABテストを導入することができました。
きちんとテストを行えば、Google Analyticsが最適なパターンを教えてくれるようですし、ここぞという時には、こういったツールをうまく利用して、webページの精度を上げていきたいですね。

Google Reader終了に寄せて

Google Reader今年の7月でサービス終了してしまいますね。
昨日、今日と、この話題で持ちきりでした。
僕も使っていたサービスですし、メジャー級のサービスなので、ショックは大きいですね。

トレンドに乗っかってこの話題に関してつらつらと書いてみたいと思います。

実は最近はほとんど使っていなかった・・・

ごめんなさい。実は最近はほとんど使っていなかったです。
それは、情報収集を怠っているわけではなくて、Gunosyとかtwitterとかfacebookのフィード購読に取って代わられている感が強いです。実際に僕自身、それらのツールを使って情報を集めています。

【使わない理由1】RSSを整理していない

これは自分の問題なので、論外ですorz
使っていなかったのもありますが、全然更新されていない5年も前のRSSフィードが登録されていて我ながら引きました。

【使わない理由2】Google Readerって使いやすかった?

Google Readerって使いやすかったですか?僕はあまりそう思っていませんでした。googleのアカウントで使えるってことは大きなアドバンテージでしたが、PCブラウザでいうと、それほど使いやすいとは思わないのですが・・・
あ、もちろん、Google Readerと他のアプリを連携させてそっちでさばくという場合は別です。

【使わない理由3】そもそもRSSってどうなのよ

冒頭でも書いたように、最近はSNS系でリアルタイムな情報に重きが置かれているように思います。

かなり乱暴な書き方をすると、僕がGoogle Readerに登録してた情報は大抵twitterなどでも収集できる情報でしたし、ブログにならないような軽い話題もSNSにはあるので、必然とそちらへと比重が高くなっていました。
SNSだとリアルタイム性が強く、逆にインデックス性に欠けるというデメリットがあります。
いくら、SNSで同等の情報が得られるからいって、SNSをチェックし続ける訳にはいかないので、当然情報の取りこぼしはあります。
まー、僕の処理能力から考えても、拾えなかったらそれはそれでいいかと・・・気楽に考えています。

【使わない理由4】未読件数が1000以上になるともはやどうでもよくなる

Google Readerを始めた頃、これ見よがしにろくに興味もないようなニュースサイトのRSSなどを大量に登録していました(ついさっきまで登録していました)当然のことながら、1日でも読むのをサボると未読件数が100とか200とか倍々で増えてしまいます。しっかり情報を管理できる人ならちゃんと消化していくんでしょうが、僕みたいなずぼらな人間はだめです。
その時の罪悪感といったら・・・もう。
情報の波に取り残された負け犬感がたまらなく辛かったんです。

それを味わってから、僕はGoogle Readerを開かなくなりました・・・

こんな状況じゃ終われません。

この記事を書くにあたって、Google Readerの情報を整理しました。
そしたら、意外と良い感じで使えそうにまとまってきた感じです。
今更なんですが、RSSも悪く無いかなと。
最近だとスマホなんかもありますので、スキマ時間にささっと情報を収集して、必要なものは後で読めるように別のサービスに振り分けるなんて感じで。おぉ、なんと今風だ。

これで情報の波で優雅にサーフィンできちゃいます。

ポストGoogle Readerは?

そうはいってもGoogle Readerは終わってしまいます。代わりになるツールは無数にありますが、僕的にはfeedlyというツールが良い感じであります。

ポストGoogle Readerとして最有力候補のようですが、僕はもっと前から使っていましたよ。

Google Readerの情報をそのまま引き継げますし、snsやpocketなどの外部アプリとの連携もできるので、情報をさばいて、snsにポストしたり、ソーシャルブックマークに放り込むなどの情報の共有も可能です。
スマホアプリですと、使い勝手もモダンで良い感じです。
PCでは、chromeのアプリとしても利用可能ですが、こっちはもう少しという感じですorz

今回の騒動で改めて「やっぱ今ならRSSでしょ」って人が増えるんじゃないかと密かに想像しています。
まー、そんな人が増えてもGoogle Readerは終わっちゃうんでしょうけどね・・・

さよなら、Google Reader。僕に大切な事を思い出させてくれてありがとう・・・

最近使っているアプリやらウェブサービスをまとめ

ライフハックというわけではないのですが、最近良く使っているツールをご紹介します。

チャットワーク


最近にやっと少し使えるようになってきました。
言わずと知れた、ビジネスチャットです。
一度慣れてしまうと、メールが面倒くさくなります。

初対面の人は別として、仕事上の付き合いがある人との連絡は、余計な常套句を省いてもいいと思います。
それをメールでやると、ちょっとビジネスマン的にあれなんですが、「チャット」であれば許されるんじゃないかと。

メールは本当に届いているか不安ですしね。
社内の連絡やメンバー間での情報共有にはすごく便利だと思います。

チャットワーク - iPhone/iPad版 - ChatWork Inc.

って、それほど使いこなしていないのですが・・・

Any.DO


iOSのtodo管理アプリです。clear的な操作感と超シンプルなUIが気に入っていて使い始めました。
電話帳と同期してくれるので、○○さんに電話とタスクを入れると、このアプリから電話がかけられたりします。
また、chromeとも同期できるので、パソコンからtodoを管理することも可能です。
もちろん、アラート機能もついています。

感覚的には、iOSアプリのclearみたいな感じでしょうか。
clearほど斬新ではないけど、割りと似た使い勝手で一般的なtodoアプリの機能も兼ね備えているので使いやすいです。
また、chromeの場合、Gmailとも連携してくれるので、メールの閲覧画面から直接Any.DOへ投稿ができたり、そのTodoからメールを参照することもできます。
これは、かなりいい感じ。

個人的かつ短期的なタスクとかはここに入れるようにしています。

タスクの時間設定も「今日」「明日」「近日中」とかざっくりしてていいです。

Any.DO To-do list - Any.DO

Pocket

いわゆるソーシャルブックマークです。
以前は、evernoteに入れてたり、もっと前は、今はなきdeliciousを使ってたりと、迷走中だったブックマークですが、最近はもっぱらpocketです。
使いやすいかどうかは別として、一番はchromeのプラグインで一発でブックマークできることですかね。

整理ができない人間なんで、特にタグ付けせずにポンポン入れるだけですが、こうゆうinbox的なものがないとかなり困ります。
ブックマーク系は、一度ここに収納して、制作のツール系は精査していいものはchromeのブックマークへ入れたり(会社と自宅は同期してあります)、ブログのネタとしてevernoteへ入れたり、読む系の記事はiphoneで処理したりという感じです。

個人的には、もう少しiphoneのアプリから共有が簡単にできるといいんですけど・・・

Pocket (Formerly Read It Later) - Idea Shower

CloudMagic

これも最近入れたアプリです。
メールや、連絡先、SNSなどを横断検索できるアプリです。
メールは基本的にGmailアプリを使っているのですが、これ何気に検索がいまいちです。
昔もらったあのメールにアクセスするときは、CloudMagicの方が断然楽です。
CloudMagic - CloudMagic

と、羅列してみました。
仕事はあまり早くないのですが、こうの手の話題は大好物です。うまく効率化して、生産性を高めていきたいですね。

Adobe Edge Reflowを試してみたよ

先日リリースされたレスポンシブデザインを作れるツールAdobe Edge Reflowを試してみたのでレビューを書きたいと思います。
このAdobe Edge Reflowを使うと、簡単にレスポンシブなデザインを作る事ができたり、css3のスタイルを作ったりする事ができます。

作ってみたサンプルがこちら。
DEMO
※Chrome以外のブラウザでみると怒られます。

400pxでレイアウトが変わるようにブレイクポイントを設定してありますので、ブラウザを小さくしてみてください。こんなのレイアウトがものの数分で作れてしまいます!

adobeの中の人の話だとあくまでプレビュー版なので、広い心でつかってほしいとの事ですが、確かにちょっと使いにくいですね(^^;
簡単にモックアップを作ってみたりするのにはいいかもしれません。
あと、css3の勉強とか。
styleタブを開くと、パラメータで角丸とか、テキストシャドーなどが適用できるので、その辺のジェネレータ的につかってもいいかもしれませんね。

これで、完全にレスポンシブなサイトが作れるかというと難しいのですが、これだけ簡単にできてしまうと、これが正式版の正式版に期待してしまいます。あれですね、webサイトは、一部の人間が作れる物って時代は、もう少しで終わってしまうかもしれない。既にそうなりつつあるかもしれないけど・・・

schooで見た「色を変えれば、その資料はもっと伝わる」がとても参考になったので、自分のデザイン工程を検証してみた

昨晩のスクーの授業 オバラ ツカサさん「色を変えれば、その資料はもっと伝わる」を受講しました。この授業は、どちらかというと、一般的なビジネスマンを対象にプレゼン資料などの色の扱いについて、配色の基礎的な事を中心にレクチャーするというものでした。仕事柄、デザインのようなこともしている僕としては、とても興味深い内容です。

詳しくは、スクーでアカウントを作ってもらって録画授業をみてもらうといいかと思いますが・・・
(無料アカウントでも月一回分の録画授業のチケットが付いてきます)

schoo(スクー)

いくつか教えてもらったテクニックのうち、一つだけご紹介したいと思います。

色の作り方

色を何パターンか作らなければならない時、色々な方法があるかともいます。
例えば、使う写真素材から拾うとか、少し経験がある人なら、補色がいいだの、3色のパターンがいいだのetc

それらの方法はどれも正しいのですが、それだけで使うと「感覚=センス」に依存してしまいます。
センスって・・・それがないから困っているんですけど。

もう少しテクニカルに考えると、配色が楽にできるというのが、オバラさんの考え方です。
色選びをする時にカラーパレットで、ついつい視覚的に選んでしまうのですが、そうではなくて、
「HSB」を使って選ぶと失敗しにくくなるよとの事でた。

色相(Hue)、彩度(Saturation・Chroma)、明度(Value・Lightness・Brightness)

色相:色の種類。360度で表します。「青」とか「赤」とかを決める部分。

彩度:これを100%にするといわゆる純色になります。眩しくなるという事ですね。
状況にもよりますが、あまり上げすぎない方がきれいです。

明度:明るさです。0に近づくと暗くなり、100に近づくと明るくなります。

で、1色決めたら、彩度、明度はそのままで、色相を調整して、色を作っていくと全体を同じ雰囲気に保てるということのようですし、数値による配色なので、それほど「センス」に依存しないと!

その他、色々なテクニックをご紹介いただけました。

で、僕はどうやっていたか?

僕は、体系的にデザインを学んだ人間ではないのですが・・・
最近は、chromeのプラグインChromaを色づくりの際によく利用しています。

数値による指定はできないので、感覚勝負な部分は多いにあるのですが、一応、「HVB」で色がつくられていますね。例えば「緑」を作りたい時、適当に緑っぽいのを選ぶとこれだけの色サンプルを表示してくれます。

ベースカラーが決まったら、他の色を色相環で選ぶ事もできます。更に色サンプルをクリックするとカラーコードもコピーできるという。

Photoshopのカラーパレットから適当に選ぶよりは、それなりの色を作る事ができると思いますが、やはり感覚に依存していますね。

せっかくすぐに使えるテクニックを教えてもらったので、今日から実践してみたいと思います。