ウェブアプリを使用できるようになり、LINEボットが更に利用しやすく

2018年07月09日 :

Category :

以前の記事『LINEユーザー1人1人に合わせたユーザー体験を自動で提供できる「LINE Messaging API」』にて紹介しましたLINEボット上で、2018年6月よりウェブアプリを利用できる仕組み(LINE Front-end Framework [LIFF])が提供され、ユーザーとの多様なやり取りが可能になり、LINEボットが利用しやすくなりました。
この記事ではその概要と、私が作成したLINEボットデモをご紹介します。

>> 記事詳細へ

無料で導入できるリアルタイムなお問い合わせ 「Smallchat」

2017年09月29日 :

Category :

Webサイトでのお問い合わせと言えば、メールや電話によるお問い合わせが一般的でした。しかし、それは一昔前のお話です。近年増えているお問い合わせの手段は、「チャットによるお問い合わせ」です。しかも口で言葉を発する手間がなく、リアルタイムに返事が返ってくるというとても便利なものです。

「チャットによるお問い合わせ」機能の実装には外部のWebサービスが使われていることがほとんどですが、金銭的に負担のかかる有料サービスばかりです。

2017年の始め頃に突然現れた「Smallchat」がとても話題になりました。驚くべきことにこのSmallchatは無料であることに加え、とても簡単に「チャットによるお問い合わせ」機能を用意することができます。

Smallchatを使うために用意するもの

  • Slackのアカウント

たったのこれだけでSmallchatを使うことができます

Smallchatでできること

Smallchatには、十分な機能を使える「無料プラン」に加えて、さらに細かなことができる「有料プラン」があります。
それぞれの主な違いは下記の通りです。

【無料プラン】

  • 数に上限なく、オペレーターを追加することができます。
  • 数に上限なく、お客さんを相手することができます。
  • 見た目の設定も有料プランと変わりなく変更できます。

【有料プラン】

  • 無料プランの機能がすべて利用できます。
  • 複数のサイトに設置することができるようになります。
  • 自動返信を設定することができます。
  • Smallchatで収集したメールアドレスをエクスポートできます。
  • 複数のSlackチャンネルを追加できます。
  • JavaScript APIを使うことができます。

など… 以上が主な違いです。
メインとなる機能は無料プランで十分に揃っていると思います。

こだわったことをやりたい!ということになると有料プランを使うことになるでしょう。

機能を想像しているだけでは分かりづらいと思います。サンプルをご用意しましたので、無料プランでどこまでできるのか、ユーザー目線に立って体験してみてください。

> Smallchatを試してみる

いちユーザーとしましても、Webご担当者さまには是非ご検討頂きたい!と思う、とても便利なWebサービスのご紹介でした!

リンクページを先進的な感じ(SPAっぽく)で表示する

2017年08月24日 :

Category :

注意事項など、少しのコンテンツを見せたいがために別ページを表示させることが無駄ではないかなと考えるようになりました。
では、ページ遷移せずにSPAっぽく別ページをモーダルで表示させたらどうなるんだろうと思い、実装したものが今回のサンプルです。

aタグを使用しているので、JavaScriptを有効にしていないユーザーに対しても通常のページ遷移を提供しています。

実際に使用する際には、キャッシュを利用するなどのブラッシュアップが必要ではありますが、PC版ユーザー、またはSP版Chromeユーザーに対しては割りと有効な方法ではないかなという感じがしました。下記リンクよりサンプルをご覧ください!

リンクページを先進的な感じ(SPAっぽく)で表示する

【SP】YouTube再生をモーダル以外で表示する提案

2017年07月06日 :

Category :

YouTubeをWebページに埋め込むということついては、モーダルで表示するということが標準になっている印象です。
個人的には、モーダルで表示することが最適な方法だとは思っていません。なぜなら、動画再生中は本来見たかったはずのWebページの文言を見る機会を奪ってしまうからです。

今回、その問題を解決したサンプルを実装してみましたので体験してみてください。
メディアサイトを想定しています。「観ながら見る」をお試しください。

YouTube埋め込みをモーダル以外で再生するサンプル

背景色に応じて文字色を変更できるプラグイン「BackgroundCheck.js」

2017年05月29日 :

Category :

画像の上に文字を配置したいが、色が被ってしまい文字を読むことがない!ということがあります。この問題を解決するためには、文字に枠を作ったり、画像の明度を変更するなど何らかの調整が発生していました。

これではCMSを組み込んだメディアサイトなどを運営するにはとても面倒です。

そんな悩みを解決してくれる便利なプラグイン「BackgroundCheck.js」が公開されています。文字の下の背景色を判定し、文字の色を変更してくれる素晴らしいプラグインです。

BackgroundCheck – DEMOページ

メディアサイトだけではなく、スライダーなどのページャーにも使えそうですね!

画面が真っ二つに割れてメニューを開く

2017年05月15日 :

Category :

左上のハンバーガーアイコンをタップすると、画面が2つに避けてメニューが出現するサンプルです。ページ全体のキャプチャを撮っているため、動作開始までに時間がかかってしまうなど難点が多く、実用には向いていないなぁというのが正直な感想です。

短いページや簡単なLP程度での使用ならば問題は多少改善されるかもしれません。
使用をご希望されるようでしたら、一度ご相談ください。

>> 記事詳細へ