Web&Peace

インターネットを自動化する「ifttt」

2012-05-11T13:34:28Z

大変ご無沙汰しております。中尾です。

しばらくこちらに投稿せぬ間に春が終わりました・・。
さらにゲリラ的な雷雨や雹がふる日々。いかがお過ごしでしょうか。

今回はiftttというサービスを紹介したいと思います。

iftttをご存知でしょうか？
if this then thatの略称がサービス名になっているようです。
小さい頃お母さんやおばあちゃんに「ほら、コレしたら、アレしといて！」
と言われ、食後の洗い物をしたり、醤油の補充を手伝わされたりしませんでしたか？

そんな「食べ終わったら片付ける」、「瓶が開いたら補充する」を特定のウェブサービス同士で自動化できるサービスです。

SNSや各種ウェブサービスの濫用で散らばった写真、メモ、日記、リンク・・・
一箇所にまとめたり同期をとったり整理するのは大変です。

そんな面倒だけどやりたいことをiftttなら自動化が可能です。

「タスクを作成し、トリガーを与え、アクションを起こす」

という3つのステップで実行できます。

たとえば

instagramで撮影した写真のデータをDropboxに追加する
Facebookのプロフィールが更新されたらTwitterのプロフィール写真も更新する
スターをつけたGmailのメールはEvernoteに保存

などなど、自由度が高いカスタマイズが可能で

これらが「レシピ」として公開されています。

ちなみに私のタスクでおすすめは↓です。

GoogleリーダーでスターをつけたらPocket（旧Read It Later）に登録
Pocket（旧Read It Later）で既読したらはてなブックマークに登録（Gmail経由）

散らばった物は片づけて快適に！

おすすめ記事

Photoshopをバッチ処理でもっと便利に。

2012-03-09T13:32:30Z

3月9日。レミオロメンの日かサンキューの日なのか・・・少し迷うところですね。村上です。

さてさて先日、大量のデジカメ写真データをトリミングするのに
気が遠くなりそうな思いをしました・・・

画像を開く→「画像解像度」→横300px→保存！

これだけの過程だったのですが
手作業だとなかなかしんどいもの。。

同じ作業が別の日にもう一度きてしまったので
Photoshopの便利な機能のひとつである、
「アクション」を触ってみました。

まずはPhotoshopの画面で
ウィンドウから（もしくはAlt＋F9）「アクション」パネルを呼び出します。

そしてパネル右下の「新規アクションを作成」をクリック。

そして新規アクションのダイアログが出てくると思いますので、
任意のアクション名をいれ（私はプロジェクト名を入れています）、記録をクリック。

すると、上の図のようにビデオの録画ボタンのようなもの（？）が
オンの状態になります。
これでこれから行う作業を記録することができます。

たとえば、30枚の写真を全て横幅300pxの大きさする
という作業を例にあげてみます。

先ほどと同じようにアクション名を入力し、記録をクリックすると
自動的に記録が始まります。

そして対象の写真が入っているフォルダのどれでもいいので一枚を開きます。
そのまま「画像解像度」→横幅300px→上書き保存
そして最後に閉じます。

ここで一回の作業は終わりなので、
アクションパネルの録画ボタンの左隣にある「再生/記録を停止」ボタンを
クリックし、録画を終了します。
これで準備はととのいました！

早速バッチを使ってみましょう！ということで
ファイル→自動処理→バッチ　をクリック。

すると上のようなダイアログが出てきますので
アクションのプルダウンで先ほど作成したアクション名を選びます。
今回の作業だと残りの設定は上の図のようなもので大丈夫です。

そして選択のボタンをクリックし、対象の写真が入っているフォルダを選択し
そのままOKをクリックします。

すると自動でフォルダにはいった写真がトリミングされ
一括で横300pxの画像が作成されます。

ただこのバッチ処理。。
すごく便利なのですが少し重いので、処理をする際には他のアプリケーションを落としたほうがよさそうですね＾＾；

タブ＋スムーズスクロール＝バッティング

2012-02-17T13:19:30Z

前回と同様、またもやタブに悩まされました。

今回はタブを切り替ると
aが#の時（ページ内リンク）、反応するスクロールが邪魔してくるという件です。

こんな感じで、画面から切れてしまっているタブ。
こちらをクリックすると･･･

スムーズスクロールが反応し、
強制的にタブエリアごと上にスクロールしてしまう。

一見便利に思えますが、
たくさんのタブエリアが存在しているページだと
すこしうざったらしく思えます。

スムーズスクロールは機能させたまま、
その機能からタブだけ除外する！
そんないい方法はないのかと模索したところ。

数行で解決できることが判明！

まず、スクロールの記述の上に

$(function(){
$('.タブエリア').find("a").addClass('適当なクラス名');
});

このような、タブのエリアのa要素にクラスを追加させます。

そして次にスクロールにこちらのフィルタを追加。

('a:not(.適当なクラス名[href*=#]')

こちらは先ほどつけたクラスがついている
要素は選択しないという意味です。

たったこれだけでスクロールとタブの機能の
バッティングを防ぐことができました。

上記のフィルタにもJQueryにはたくさんの
フィルタがあります。

スクリプト同士がバッティングして困ったときは
まずフィルタを駆使して解決法を導いてみることにします。

参考：
http://alphasis.info/2011/10/jquery-api-jquery-not/

FB.Event.subscribe.edge.create

2012-01-31T03:56:07Z

近頃Facebookに時間を割いている中尾です。いかがお過ごしでしょうか。
Facebook内で模索しながらの実験を行なっているなかで、先日知った「FB.Event.subscribe.edge.create」について。

「FB.Event.subscribe.edge.create」を使うと「いいね！」をクリックした際のイベントの発生時に関数を実行することが可能。
「いいね！」した後に「ありがとうございます。」といった文言を掲載したり、別の画像を掲載したり、別のページに遷移させたり・・・・夢は拡がります。

他にもこんなイベントがあります。

auth.login - ユーザがログインした時に実行
auth.logout - ユーザがログアウトしたとき
auth.prompt - ログインを促されたとき、もしくはLikeボタンのクリック後にログインした時
auth.sessionChange - セッション状態が変わったとき
auth.statusChange - ステータスが変わったとき
xfbml.render - FB.XFBML.parse()の実行が完了したとき
edge.create - ユーザがlikeしたとき(fb:like)
edge.remove - likeを取り消したとき(fb:like)
comment.create - コメントを足したとき(fb:comments)
comment.remove - コメントを削除したとき(fb:comments)
fb.log - メッセージをログ出力したとき

こんなことができるのか、と盛り上がったものの如何せん情報が少ないです。
いくつか紹介したいと思います。

公式ドキュメント
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

facebookの「いいね」ボタンを押した時のアクション
http://nex.xrea.jp/?s=770

スマートフォンの修理屋さん

2012-01-13T10:28:03Z

お正月にお餅を食べすぎて、●kg太ってしまった村上です。。
なんであんなに美味しいんでしょうね。お餅...。
数年ぶりに体が重くなった感じが自分でも分かってしまい
これはさすがにヤバい！と思いまして、、体重を記録できるアプリを導入しました。

でもうちには体重計がなかったというのは別のお話です（T-T）

さてさて。アプリと言えばスマートフォン！なのですが...

先日、一年ほど愛用していたAndroidがお亡くなりになりました。。
前々から一日に何度もフリーズしたり、メールが受信できなくなったり
予兆はあったのですが。。壊れたのが連休中でよかったものの。

とにかくこのままではまずいと思い、すぐにショップにいきました。
ちょうどキャンペーン中でお得な値段で手に入るということで、機種変更。そして念願のiPhoneに。
前に使ってたAndroidの動きがスムーズでなかったので、iPhoneの「気持ちよさ」に驚愕しました。

ですが一年も使っているとどんなものでも愛着がわくもの。
直して使えればよかったなあとちょっぴり後悔。
そんな中、外出先でこんなものを見つけました。

スマホステーション：
http://sma-sta.com/

私が発見したのは大手町駅の改札口の傍でした。
今まで駅で靴や合鍵などの修理屋は見かけたことがあるのですが
スマートフォンの修理屋は初めて見ました。
お店自体の大きさは駅の売店ぐらい。
スマートフォンの修理は有料ですが、
なんと！メールを登録するだけで充電やWi-Fi設定を無料でやってくれるそうです。

スマホステーションは現在二号店まであるそうなので、
よく充電を忘れてしまう私の最寄駅にもいつか出来たら便利だろうなあ、と思いました。

2011年、iPhoneが変えた私の生活を振り返る。

2012-01-10T10:28:23Z

明けましておめでとうございます。
本年もよろしくお願いいたします。

さて、2010年の12月に購入したiPhone。
遅まきながら使用し始めて一年以上経ちます。
持ってなかった頃に比べると情報のインプットがケタ違いに。
昨年の個人的iPhone元年を振り返り、情報入手のビフォーアフターを考えてみました。

ビフォー：
会社や自宅のPCを使用しGoogleリーダーでRSSを閲覧。
あとで読む記事、気になった記事ははてなブックマークへ保存。
帰宅してあとで読む。
ガラケーを使用していたのは天気とサッカーのテキスト速報程度。

アフター：
PCは変わらずGoogleリーダー。気になった記事は「Read it later」へポスト。
iPhoneでは「Reeder」を利用し、気になった記事は「Read it later」へポスト。
ほかTwitterやMobileSafariなど気になった記事は全て「Read it later」に
保存されていくようにしており、移動中や待ち時間などの時間に
キャッシュされた記事をiPhoneでチェックするように。
「HTMLビューワー」を使いソースを眺めることも可能に。

もはやガラケーには戻れまい・・・そう思う今日この頃です。

全てを変わりました。そう、iPhoneならね

「そう、iPhoneならね」のＣＭは実在するのか？

たった3分でスマホサイトのワイヤーフレームがつくれる？！

2011-12-28T02:48:24Z

いよいよ年越し間近ですね。村上です。

弊社は真に勝手ながら、12/29(木)から1/4（水）まで休業となります。
年始は1/5（木）からとなりますので、ご了承くださいませ。

本日の夜にバスに揺られて実家へ帰るのですが
実家のある関西が今年大寒波だそうで；
滅多に雪なんか積もらないのに、今年は銀世界！なんてこともあったそうです（そういえばまだ今年は雪を見ていないなあ...）
関西だけでなく、今年の年末年始は全国的に冷え込むそうなので
皆様あったかくして風邪をひかないようにしてくださいね。

さて、それでは本題です。

近年「スマートフォン」が当たり前のツールとなってきました。

HTML5、CSS3でより細かな実装ができるということ。PNG画像が使えること。
WEB製作者の敵（？）でもあるInternet Explorerの挙動を気にしなくていいこと...など。いいことだらけでもありますが、ただ現状のPCサイトをスマートフォンに最適化するだけでは、なかなか成果を出すことが難しく...
弊社でもスマートフォンサイトがどうあるべきか？本当に必要なのか？など連日議論をしております。

そんな中、スマートフォンサイトを製作するにあたって
便利なWEBサービスをご紹介したいと思います。

Cacoo(カクー): https://cacoo.com/

こちらはなんと、、
WEB上でサイトのワイヤーフレームを作れてしまうツールです。
とにかく簡単。しかも無料！

利用するにはアカウント登録を行うのですが、これも簡単。
メールアドレスと名前など五項目を入力するだけ。
しかもTwitter、Facebookなどのアカウントを使ってログインすることもできます。

さて実際にどう製作するのか？
実際に作ってみました。

Cacoo(カクー)では下記のようなオブジェクトが用意されていて、
それが道具箱のように収納されています。

こちらをドラッグ＆ドロップで出し入れして、動かしたり、大きさを変えたり、文字を入れたりして
サイトのワイヤーフレームを作成することができます。

実際に作ってみたのがコチラ。

うーん。簡単。
ちなみにソーシャルボタンも用意されてました。
私もこれからどんどん便利なものは利用していきたいと思います。

最後になりましたが、
今年も大変お世話になりました。
2012年もWEB&PEACEをよろしくお願いいたします。

それではよいお年を！

埋め込んだGoogleマップをタブで切り替えると表示がずれる。

2011-12-16T11:14:51Z

だんだんと寒くなってきましたね。村上です。

冬はイベント事が多いので大好きなんですが（笑）やっぱり寒いもんは寒い！ひやっこい！
乾燥もするから加湿器も買わなきゃなあと思いつつ、、まずはこたつかなあ。

そんなこんなで今回はタイトル通り、複数のGoogleマップを表示させる場合にJavaScriptのタブを使うと発生しまう問題。

わたしは普段、こちらのタブを使用しているのですが↓

タブ切替をサクッと実装：
http://archiva.jp/web/javascript/tab-menu.html

先日こちらのタブとGoogleマップ（埋め込み）を使って、
タブを切り替えると別のマップを表示させるというものを作っていたのですが

↓タブを切り替えると・・・

こんなかんじで表示させたい！

はずが････

実際は2個目以降のタブは上の図のようにずれて表示がされてしまいます。。マップ同士が干渉しているのかな...とにかくこまった！

調べてみるとこちらのサイトでは、原因がタブを切り替えるときの display:none;が影響しているのでは？と書かれています。。

また同サイトでこの問題の解消法が書いておりましたので、ご紹介させていただきます。

方法としては2通り。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する

方法 (2): クリックファンクションで HTML を読み込んで表示する

ということで、実際に今回は　方法 (1)　を試してみました！

まず、Googleマップのソースの中の

src=（省略）

こちらのsrcをrelにします。

そしてあとはjsでクリックを押したときにrelがsrcに変わるようにすればOK。

例）
jQuery('#クリックするタブ').click(function(){
var rel = jQuery('#クリックするタブのエリア').find('iframe').attr('rel');
jQuery('#クリックするタブのエリア').find('iframe').attr('src',rel);
});

というかんじ。あーすっきり！

●参考サイト

・埋め込みGoogle マップの座標がズレる場合のメモ。
・jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる
・埋め込みGoogleマップをdisplay: none;にすると座標がズレる件。

JPEG圧縮サービス「JPEGmini」

2011-12-12T03:24:53Z

大変ご無沙汰しております。
久々の更新です。

色々とありまして、過去記事を一掃した当ブログ、張り切って再スタートしたいと思います。

そんな復活第一弾記事でご紹介するのは「JPEGmini」というウェブサービスです。

http://www.jpegmini.com/

クリスマス仕様になっているのがニクいこのJPEGminiは、簡単にアップするだけで最大5分の1まで圧縮できるという便利なウェブサービスです。

試しに当ブログのヘッダー画像で圧縮してみました。

【使用前】オリジナルデータ（107KB）

↓

【使用後】圧縮データ（39KB）

107KB　が　39KBに！（68KB圧縮）

半分以下になってしまいました。
拡大しても目視ではそこまで違いがわかりませんが、ファイルサイズからは大幅に軽量化されていることが分かります。それでもこの圧縮率はスゴイ。

通常PhotoshopやFireworksなどでの書き出しの段階で目視で気をつけてはいるものの、一枚一枚吟味して圧縮率を設定は大変です。

このサービスを使えば簡単な操作でファイルを軽量化することができますね。アカウントを作るとアルバム単位でのアップロードも可能。「Cloud Services」「Desktop App」のサービス追加も予告されています。

ユーザーのストレスにつながらないようスマートフォン+ナローバンド（3Gなど）での閲覧には特に気をつけたいところ。データの書き出しに重宝しそうです。こうしたサービスはどんどん活用していきたいですね。

［ウェブサービスレビュー］JPEG画像を最大5分の1まで圧縮できる「JPEGmini」

]]>