むかいちかメモ

webのお困り解決メモ

[chikamukai-memo]

遅延読み込みさせたiframeにcssを適応させたい

iframeで埋め込まれる外部サービス、よくありますよね。

ちょっとデザイン浮いてるし馴染ませたいねんけど、サービスが提供してるカスタマイズやと限界がある😭って時は、jQueryでiframeの中の要素findして上書きしたり。

ただ、これにもまた限界があります。 例えば意図的に遅延読み込みさせたとき。iframeの読み込み自体を自分で記述している場合はともかく、call backがもらえないAPIではなかなか難しい。 iframeが読み込まれる前に上書きが実行されて空発🔫💨などなど。

そんなお困りに、力技ではありますが対策を用意したのでご紹介します。

通常のスタイル上書き

まずは普通にiframeのcssを上書きする方法。 部分的ならこんな感じ_φ(･_･

$(function(){ $('iframe').contents().find('#hoge').css('color', '#000'); });

書き換え箇所が多い場合はcssファイル突っ込むのが楽ですね。 以後これでご紹介続けます。 ※cssファイルはパスにご用心。ドメイン異なる場合は絶対パスで！

$(function(){ $('iframe').contents().find('head').append(''); });

読み込み完了後の上書き

前掲の方法では空発が起こりかねないので、さらに一手間かけてiframeの読み込みを確認したのちの上書きにしちゃいましょう___φ(･_･

$(function(){ $('iframe').load(function(){ $('iframe').contents().find('head').append(''); }); });

遅延読み込み完了後の上書き

遅延読み込みさせた場合は、loadではiframeの存在を掴めないケースがありました。 そこで編み出したのがこれ。もっとスマートな方法があるかもしれませんが、間違っちゃいないのでよしとしましょう💓←

timer = setInterval("iframeChecker()", 100); function iframeChecker(){ if($('iframe').length){ $('iframe').contents().find('head').append(''); clearInterval(timer); } }

タイマーの宣言は、実際には遅延読み込み発火の直後に記述してくださいね。 定期的にiframeの存在を確認し続け、確認できたタイミングでcssを突っ込んでタイマーを破棄します。 力技ですが、確実に照準を定められますね🔫

100msecだと読み込み完了かつスタイル未対応なタイミングがほぼわからない程度かと思いますが、お好みで調整してください。

そうそう、外部サービスによってはスタイルの上書きが歓迎されないケースもありますので、規約などよくご確認の上、自己責任でよろしくお願いします🙇

[chikamukai-memo]

tawk.toでチャットサポートシステム導入

最近日本でも、チャットでリアルタイムに問い合わせができるサイトが増えてきましたね。ECサイトでよく見かける気がします👀 メールのタイムラグがストレスだとか、電話が苦手だとか、いろいろと歓迎される理由がありそうです。

さて、わたしもお客様にご要望いただき、tawk.toというサービスを使ってチャットサポートシステムの導入を経験させていただきましたので、軽くレポートします。

選択理由

いくつかあるチャットサポートシステムで、なぜtawkを選んだのか。 ずばり、お客様からのご指定です。 が、自分で比較検討してみても遜色ない感じ。特徴をいくつかあげておきます。

無料

簡単

日本語対応

ある程度ならデザインをカスタマイズできる

訪問者をモニタリングできる

自動メッセージのトリガーが仕掛けられる

よく使う文言をショートカット登録できる

複数人で管理ができる

チャットのヒストリーが残る

導入方法

現状、英語のサイトなのでちょっと構えちゃいますが、随分簡単でした😀💓

アカウントを作ってログイン

[Sites & Pages] -> [Add Site]

必要項目を入力し[Add] “Site Name”はtawk上で管理する名前なので実物と違ってOK。

“Successfully added site”の表示を見届け[Close]

戻った画面に先ほどのサイトが追加されているので、[Widgets] -> [Manage]へ

[Embed Code]の中身をコピーし、導入したいページの</head>タグ直前あたりにペースト

カスタマイズ

サイトを開いてみて導入が確認できたら、次はそのウィジェットのカスタマイズです。ここではユーザーの目に触れるところだけざっくりと紹介します。

導入方法で開いているページのまま[Settings]の[Modify]へ “Customize Widget”というモーダルが開く

[Appearance]タグで設定 色・サイズ・角丸・表示位置が設定できます。 BubbleをONにすると、チャットを呼びかける吹き出しが追加できます。色や文言の変更はもちろん、自作画像のアップロードや、既存の素材からの選択もできます。 設定が終わったら、タグの切り替え前に毎回[Save]しましょう。

[Behavior]タグで設定 クリックしたときの動作や、モバイル・オフライン時の表示／非表示などが設定できます。

[Content]タグで設定 チャットウインドウに表示させるテキストが変更できます。 少しわかりづらいですが、まずは言語を選択したのち、”Select a view to customize the widget content, and add a prechat form.”のプルダウンで状況（When Online = オンライン時、When Away = 退席時など）を選択し、それぞれに対し右側の”Content Editor”で文言を編集します。

[Save]できたら[Close]

挙動

tawkにログインしたまま、導入したサイトにアクセスしてみてください。左側にIPアドレスが表示され、[Dashboard]では滞在時間などの情報が閲覧できます。

次に導入したサイトでチャットを使用してみてください。電話かな！(◎_◎;)と思うぐらい激しくベルがなります🔔🔔🔔🔔🔔🔔🔔🔔🔔❗️ ※歯車マークから[Sound notifications]でON/OFFできます

通知をクリック、もしくは[Chats]ページへ移動し、[Join]でチャット開始するとベルが止まります。かなり焦りそうなので、まずは自分対自分で挙動を確認しておくと安心です🙆

以上、tawk.toのざっくり紹介でした。ぺこり。

[chikamukai-memo]

カラーミーの商品一覧ページで、商品１つずつにカートボタンを設置することは難しい

カラーミー案件を請け負っていたときのこと。 トップページで商品を一覧表示させ、それぞれにカートボタンを設置したいとのご依頼をいただいておりました。これがなかなか難しい😶

検索すると、カラーミー純正ではないコードで対応可能との記事がいくつか見つかります。 その通りに入れてみると、確かにカートボタンがつく🌟

ただ、わたしの担当サイトでは、初めてアクセスした状態（キャッシュクリアで再現可）で即カートボタンを使用すると、カート画面に遷移し中身も確認できるものの、再度トップページに戻った際には空っぽになっているというバグがどうしても解消できませんでした。

そのサイトのキャッシュを持っていたり、一度でもページ遷移したりすると再現しなかったので、関係者にとっては発見が難しいやっかいなバグ😂

結局のところ、解決の糸口が見出せずカラーミーに直接問い合わせをさせていただきました。そのご返答がこちら。

ご相談いただきましたところ大変恐縮でございますが、 一つのページに複数のカートボタンを設置されますと ご相談の事象のとおり、カートに商品が保持されない場合がございます。 誠に申し訳ございませんが、一つのページに複数のカートボタンを 設置する方法は現状なく、代替案のご案内もできかねてしまいます。 以上仕様となっており、ご解決までのご案内ができず 大変心苦しく存じますが何卒ご了承くださいませ。

ぬーん。残念ですが、カラーミー側で用意されていないことなので、やるならバグろうが自己責任ですね。 一覧表示にカートボタンのついたECサイト構築案件が発生した際は、仕様再検討、もしくはサービスの選択に注意が必要です。

以上、解決できなかったレポートでした🙇

[chikamukai-memo]

Search Consoleが「現在、発生している問題について確認中です。ヘルプフォーラムでおしらせください。」って言ってくる

Google Analyticsで検索クエリなどのレポートを得るためには、Search Console（旧：ウェブマスターツール）の統合を有効にする必要があるわけですが、これがうまくいかなかった😂

自分のうっかりが原因だったのですが、なかなか気づきにくい点だったのでメモ。

現象

サイトにGoogle Analyticsを入れたものの、一部のレポートが閲覧できない。 それもそう、Search Consoleの統合を有効にしていませんでした。ということで「Search Consolen のデータ共有を設定」をクリック。

アナリティクス設定画面に移動するので、さらに「Search Console を調整」をクリック。

Search Consoleの設定画面になるので、さらに「編集」をクリック。

Search Consoleが開くのですが、 現在、発生している問題について確認中です。 ヘルプフォーラムでお知らせください。 とのことで、なんにもできない😱

解決方法

それはそれは簡単な問題でした。 わたくし、Googleアカウントを複数使用しています。 メインでログインしているアカウントはプライベート用。解析で使っているアカウントとは違うものだったのです！

このサブ的な位置にあるアカウントでアナリティクスを開いていたのですが、そこからSearch Consoleを開くと、どうもメインのアカウントで開いちゃうんですね。アカウントは継承されない！

右上のプロフィールアイコンからアカウントを切り替えてみたら、無事に選択画面へ移動できました🙌