【Gmailのメールをチャットワークにも投稿!】Zapierを使ってみた

1707zapier

 

社内で使用している連絡ツール、チャットワーク。日本語でのUIが使いやすくて、ちょっとした記録なんかにも活用している今日この頃です。
出社するとまず立ち上げてチェックするツールでもあるのですが、受信した内容が、チャットワークにも投稿される「メール確認ツール」としても使えないだろうかと、ふと思ったのです。
特にGmailでは複数アカウントがあるため、それを都度確認していくのはちょっと面倒…。
たまに来る、でも目は通しておきたいメルマガなんかのチェックができたらいいなと思ったのが始まりでした。

チャットワークとGmail。違うサービスの連携ができるハブツールとして、真っ先に思いついたのがIFTTT。いろいろなサービスを対象としているこのIFTTTですが、残念ながらチャットワークはサポート外。
ほかにチャットワークが使えるハブツールはないかと、探してみたらありました!
その名もZapier

今回は、そのZapierというWebサービスについてご紹介したいと思います。

Zapierって?

以前ブログでもご紹介しているIFTTTmyThingsのように、異なるWebサービスなどを連携させることができるツールです。
何かが起こったとき(トリガー)に何かが起こる(アクション)。このサービスの組み合せを「ZAP」といい、無料プランでは5つまで作成することができます。
対象アプリはなんと500以上!もちろんチャットワークも入っています。

ZapierでGmailとチャットワークをつなげよう

ということで、さっそくZapierでZAPを作ってみました。
今回はGmailで特定のラベルがついたメールがくると、チャットワークのグループチャットにメールの内容が投稿されるという、ZAPを作成してみます。

01 チャットワークでの準備

まずZapierでチャットワークを使用するには、ChatWork APIが必要なのですが、それを発行してもらうのにチャットワークへの事前申請が必要です。

チャットワークにログインした状態でChatWork API申請ページへアクセスし、発行を申し込みます。
※ビジネスプラン、又はKDDI ChatWorkでのご利用の方は、管理者経由でのみ申請が可能です。
※申請からAPIの発行に3~5営業日かかるそうです。

発行完了のメールがきたら、チャットワークの「動作設定」で「API発行」というタブが新たに表示されるので、チャットワークのpassを入力し、APIを確認します。

20160713

 

20160712

Zapierでの操作でこのAPIが必要になりますので、コピーをしておきましょう。

02 Zapierに登録

Zapierからアカウントを登録します。
登録には名前・メールアドレス・パスワードが必要です。

20160700

03 ZAPを作成

ページ上部の「MAKE A ZAP!」をクリックし、トリガーとなるアプリ「Gmail」を選択します。

20160714

 

次に、Gmail上でトリガーにしたいできごとを選択します。
今回は「ラベルがついたメールを受信したとき」をトリガーにしたいので、「New Labeled Email」をチェックします。

20160702

 

「Connect New Account」をクリックし、対象となるメールアカウントを選択します。

20160703

 

対象のラベルを選択。

20160704

 

選んだラベル、トリガーの内容が正しいかの確認が表示されるので、問題なければ「Fetch & Continue」をクリックして次に進みましょう。

20160705

 

Gmail上に該当ラベルがあるかどうかがZapier上でチェックされ、問題なければ、これでトリガーのGmailの設定は完了です。「Continue」でさらに続けます。

20160706

 

次にアクションとなるチャットワークを選択します。

Edit Step Zapier27

 

 

チャットワーク上でアクションにしたいできごとを選択します。
今回は「グループチャットにメッセージを投稿」をアクションにしたいので、「Send Message」をチェックします。

20160707

 

「Connect New Account」をクリックし、次の表示画面でコピーしておいたチャットワークのAPIを入力し、アカウントを設定します。

20160701

 

投稿するグループチャットと、投稿するメッセージの内容を設定。
投稿内容は独自タグを使用して「メールタイトル」「送信先アドレス」なども選べますが、今回は「タイトル(Subject)」と「内容(Raw Payload Body Data)」を選択しました。

20160709

 

設定した内容で、実際にチャットワークへのテスト投稿が行われます。

20160716

 

テストに問題がなければ下記の画面が表示され、「Finish」をクリックするとZAPの完成!名前をつけて、保存しましょう。

20160710

 

もし変更がある場合は、サイドメニューから変更箇所を選択し、再度設定します。

20160717

終わりに

今回はチャットワークと連携できるという点に着目しましたが、他にもZapierでできることはたくさんあるようです。
ZAPのエラーチェックや、2つ以上のサービスをつなげられるマルチステップ(有料プランのみ)、複数のアカウントの切り替えなどなど…
無料プラン内では制限がありますが、シンプルに2つのサービスをつなげるIFTTTなどのハブツールと、良い具合に使い分けができたらと思っています。

参考にさせていただいたサイト


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【2】無料サーバーにサイトを設置編

~前回までのあらすじ~
  • 格安で独自ドメインのサイトを立ち上げてみるとしてスタート。
  • ドメインはお名前.comで格安のxyzドメインを32円で取得。niigata360.xyz
  • サーバーは比較的品質の高そうなxdomainを選択。
  • ドメイン取得後、ネームサーバーの設定を済ませて反映されるのを待つ。
    ここまでやりました。
今回は、実際にHTMLコンテンツをアップし、サイトを公開してみます。
■サイトを設置
テストサイトをHTMLで用意します。内容は特にありませんが、仕掛けとしてスライドショーと、google mapsのiframeによる埋込みくらいは盛り込んでおきます。
今回設置するxdomainの無料サーバーは広告はつきませんが、下記の制限があります。
  • 1ファイルあたり3MB
  • DB無し(別サーバー・広告あり)
  • PHP不可
  • CGI不可
  • 他社で取得したドメインのメール設定は不可
    このあたりの制限が大きな制約になりそうです。こうやって書くと何もできなさそうですが、逆に
  • 独自ドメイン10個OK
  • 容量1GB
  • FTPが使える。(ファイルマネージャーも別途用意されている。)
    と言うように、保存容量が比較的大きかったり、無料でもマルチドメインで設定していけることは大きなメリットです。個人的にはFTPでアップできるのも管理が楽で便利です。
※xdomainの無料サーバーは広告を受け容れることでPHPやMySQLが使えたりWordPressの設置も可能なサーバーも使えます。WordPressでの広告はスマートフォンやタブレットなどモバイル環境のみでの表示と、結構控えめですね。ひとまず今回は広告無しにこだわってみたいと思いますので、WordPressはあきらめ上記制約内で作ってみます。
ということで、シンプルな構成のWEBサイトを用意します。
あとはUPするだけです。FTPの設定だけ載せておきます。図はFileZillaです。
・ホスト ・ユーザー ・パスワード をいれてログオンの種類を通常にしておけば繋がります。
WEBベースのファイルマネージャーも用意されているので、そちらからUPしてもいいでしょう。接続先が直で公開用のルートフォルダになりますので、そのままHTMLファイルをアップすればOKです。
blog_free02
では実際にファイルをアップします。
■実例 テストサイト→http://www.niigata360.xyz/サンプルサイト
 ■結果
ブラウザが対応していればスライドショーなどのコンテンツの表示も特に問題ありません。やはり有料のレンタルサーバーに比べると画像の表示などにもたつきが見られます。値段相応と言った所です。(無料ですが)
■余談
実はここまでは、順調に用意できたのですが、google chromeでは表示できず「無効なURLです。」との表示が続いていました。FirefoxやIE、Edge、さらにMacのsafariでも正しく表示されます。chromeだけドメインの名前解決ができてない印象でした。原因がわからず難儀したのですが、結局は、chromeのDNSキャッシュが原因だったようで、クリアすると表示できるようになりました。chromeのDNSキャッシュクリアは設定からはできないので、アドレスに「chrome://net-internals/#dns」を入れて設定画面を出し、そこから消してください。
blog_free04
■感想
過去に、無料WEBサイト制作サービスが流行って廃れた時期がありましたが、ここに来てふたたび盛り返してきている感があります。無料サーバーも思ったより使えそうですし、選択肢もいくつかあり、組み合わせ次第でランニングコストを極力かけずにWEBサイトを構築できます。テストサイトの構築や個人の学習には十分かと思います。しかし実際に使ってみて無料サーバーと格安であっても有料サーバーには大きな隔たりを感じました。コストに問題なければ、個人のテストであっても有料サーバーを借りた方が面倒が少ないかと思います。(目的によります。)特にドメイン関連の設定に自信の無い方は、ドメインとサーバーは同じ会社から借りましょう。別々の会社から借りた場合、今回のようにトラブルがあると、原因の切り分けと追求に難儀します。
■注意点
ドメインは今回安く取得できましたが、2年目以降は普通に通常料金が掛かります。安くて飛びつくと、維持費が高く付くドメインもありますので、長く使う予定でしたら、一般的な
.comや.net、.jpなどを取得しましょう。今回30円で取得したxyzは2年目以降は1480円です。
また、無料サービスはいつ停止しても文句が言えません。そのあたりのリスクをよく考えてご利用ください。

もう少し続きます。

.net/0.gif?a8mat=2NOT2E+D44RHU+CO4+15THJ5″ alt=”” width=”1″ height=”1″ border=”0″ />


Macawでデザイン→即HTML化

どうも、Kazです。

この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか?」と思ってしまうくらいのアプリでしたので紹介したいと思います。

そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
macaw_1607_00

 

記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。

続きを読む Macawでデザイン→即HTML化


独自ドメインのサイトを広告無し100円以下で立ち上げてみる【1】ドメインとサーバー編

最近、各種無料ウェブサイト制作サービスについて調べています。
近々、弊社のサービスの一部として取り入れる予定もあります。

その一環で現在「独自ドメイン」のウェブサイトを立ち上げるのに最低いくら掛かるのか、
調べて、最安プランを実行してみました。一応「広告無し」で考えます。
(注:人件費は考慮しておりません。)

■必要な物
ウェブサイトを立ち上げるには、サイトのHTMLデータの他に、
・ドメイン
・サーバー
が少なくとも必要です。通常はどちらも有料です。

■ドメイン
まずはドメインです。ウェブサイトのアドレスですね。
ドメインはサーバーを契約すると無料で1つもらえたりする所も多々あります。
(この場合サーバー代がそこそこ必要です。)
今回の実験にあたり、お名前.comの格安ドメインを取得してみました。
お名前.comはマイナーなドメインのセールをよくやっています。
今回は実験用のにxyzドメインを取得してみました。税込32円!安い!
予算100円でしたので、大幅な節約となりました♪
クレジットカードかデビットカードがあればさくっと取得出来ます。

と言うわけで取得してみました。niigata360.xyzです。
お名前.comでの取得画面

■レンタルサーバー
次にサーバーです。ウェブサイトを置く場所ですね。
今回はxdomainの無料レンタルサーバーを使ってみます。なんと無料にもかかわらず広告がありません。
おそらく有料サーバーやドメイン契約への宣伝目的の為のサービスかと思います。
個人的にxserverはレンタルサーバーの中でもかなり信頼しているサービスなので、
xdomainにも期待大です。

■ドメインの設定
ひとまず先に取得したドメインを使えるように設定します。
お名前.comのドメイン設定でネームサーバーをxdomain指定のものにしておきます。
ネームサーバー設定

次にxdomain側で他社ドメインの登録作業を行います。
今回はwhois認証を選びました。ちなみにドメインは10個登録出来るようです。
ドメイン設定追加

設定後、数時間でネームサーバーの情報が行き渡り、FTPでのアクセスも可能になります。
xdomainでは数時間から2日と書いてあります。
これを書いている現在、数時間たってますが、いっこうにアクセスできません。
もしかして、これは2日コースか。
続きは使えるようになってから書きます。ひとまず初回はここまで。

続きます。


最近ちょっと変わってきてる?ログイン画面について考えてみた

blog160705

SNS、Webサービス・・・
ログインする機会って結構頻繁にありますよね?
それで最近思ったのです、何か前と変わった気がする。。。
ログイン画面ではユーザー名(もしくはメールアドレス)とパスワードがワンセット。
だいたいテキストボックスが2個ならんでいるのが普通でした。

わかりやすいのはGoogleですね。
ちょっと前まで他と同じくテキストボックスが2個ならんでいる形でしたが、現在はメールアドレスの入力をして「次へ」でパスワードの流れになりました。


login_google01login_google03
初めのメールアドレスで入力ミスがあるとそんなアドレスは登録されていませんと怒られます。

login_google02

 

画面の遷移数とボタンを押す回数は多くなりましたが、一層手順の流れはわかりやすくなったように感じます。
また、項目が1個ずつになったので、自分がミスした場所が明確にわかるようになりました。

なんでこんな仕様になったのでしょうか?
中の人に聞かないとわかりませんが、この変更によってスマホの時にミスったときの操作がしやすくなっているように感じます。
メールアドレスとパスワードを入れてログインしようとしたら、メールアドレスにミスがあってログインできない。
こんなときPCだったらタブキーを利用したり簡単にカーソルを合わせられますが、スマホの場合もう一度タップしてテキストボックスをアクティブにして間違えた文字を選択して・・・
ちょっと面倒です。
ミスが起こった時に判定してくれれば、早めに修正して次の行動(パスワードを入力する)に行けるので、ログインする時には自分が成功したといういい気分でサービスに入っていける。
そういう心理的な達成感があるというのは深読みし過ぎでしょうか?

ちなみにYahoo!ではYahoo! Japanはこれまで通りメールアドレスとパスワードですが、yahoo.comの方では「メールアドレス」→次へ→「パスワード」になっています。

それではいろいろなログイン画面を見てみましょう。

Yahoo!

login_yahoojapan
Yahoo! Japan
login_yahoocom
Yahoo!

上述の通りYahoo! Japanとyahoo.comでは違います。

Facebook

login_facebook

位置がちょっと特徴的ですよね。Facebookは携帯番号を登録していればそちらでもログインできます。

Twitter

login_twitter

Twitterも「ユーザー名」+「パスワード」ですね。Twitterも携帯番号もしくはユーザー名でOK!

Instagram

login_instagram

Instagramも「ユーザー名」+「パスワード」。

Pinterest

login_pinterest

Pinterestも「メールアドレス」+「パスワード」。

Tumblr

login_tumblr01

login_tumblr02

Tumblrは「メールアドレス」→次へ→「パスワード」です!
Tumblrはオートコンプリート機能でパスワードまで一気です。

Evernote

login_evernote

Evernoteも「メールアドレス」+「パスワード」。

Simplenote

login_simplenote

Simplenoteも「メールアドレス」+「パスワード」。
実はログイン機能で引っかかるようになったのがこのSimplenoteなんです。
Simplenoteの場合、メールアドレスとパスワードを入力して不備があると、メールアドレスもパスワードも消去されてしまって1からやり直しになるのです。
これがまた面倒!!(←自分のメールアドレス間違うなって話)
Simplenote大好きなのに、ここがちょっと残念…

まとめ

思ったより「ユーザー名orメールアドレス」+「パスワード」の形が多かった結果になりました。
自宅のパソコンやスマホだと一度ログインしたらあまりログアウトすることもないかもしれませんが、会社のパソコンなどだとセキュリティを考えるときっちりログアウトしておくことが必要だったりします。(必要ならブラウザをシークレットモードで立ち上げましょう(笑)遊ぶのはダメですよー)
ログインの機会の多いサービスだと、ストレスなく使える方がいいですよね。
みなさんはどちらの方式がお好みですか?

自分で入力画面作るときも、使い勝手や心理的なストレス考えたらどちらがいいのか考える必要がありそうです。
ちなみにこのブログはWordPressですが、WordPressのログイン画面も「ユーザー名orメールアドレス」+「パスワード」ですね。