web制作の隙間問題

ウェブ制作で気づいたこととかを殴り書き。中の人は、デザイン、コーディング、ちょっとプログラミング、企画・設計・運用・SEO屋さん。

Google Analyticsでショートカットが無くなっててびびった

ショートカット便利っすよね。

「ショートカット」は「保存済みレポート」へ名称変更

名前が変わっただけだったー。

登録したものは残ってたから一安心。

f:id:bissybissy:20170817181424p:plain

GAはUIの変更がビシバシある点にちょっとつらみがあると思う。

というささやかな愚痴でした〜

 

ではね。

【モバイルアンカー広告】上から降りてくる広告・ふわっと出現する広告だけをブロック【iOS】

まずはじめにインターネッツでコンテンツを作っておまんまを食べているという意味での同業のみなさまへ、誤解ないように申し上げます…

私は広告大好きだ!

テレビCMも雑誌の広告もインターネッツの広告もアドバルーンも劇団が舞台の前に入れるタイアップコントみたいなのも。。

ただし良い広告・良い場所・良いタイミングのものに限る。

空気読めない接客のような広告は嫌われます。
少なくとも私は嫌いです。というかたくさんの人が嫌っています。

f:id:bissybissy:20170815070601p:plain

超嫌われてますね〜 わかるわかる〜

死ね とか広告は生命体じゃないのに入力して検索しちゃうあたり本物の憎悪を感じます。

メディアとして嫌われることをやっていては先が見え云々(キリがないのでこの辺で

で、嫌われているアンカー広告って?

スクロールするとスマホの画面下についてくるアレです。

と言っても、下にべたっとくっついて、はっきり広告とわかり、高さをそんなに取らなければ良いと思うんですよ。

私が嫌いなアンカー広告は、スクロールするにつれて透明な状態からふわ〜っと出現するアレです。めっちゃスケスケの状態だと気づかずにクリックしてしまう。

まさにだまし討ちです。卑劣です。

ちなみにそのふわーっと出てくるだまし討ちアンカー広告、名前は知りません。ほんとすんません。

降りてくる広告・ふわっと出現する広告だけを非表示にしたい!

夏休みでいろんなブログやメディアを見る機会が増え、イライラが頂点に達したので(見るのをやめれば良いんだけどそれじゃ根本的な解決にならないし)、とうとうアドブロッカー(iOSのコンテンツブロッカーアプリ)を導入しました。。

で、コンテンツブロッカーアプリの使い方を紹介する記事はたくさんあるんですが、そこで紹介されているのは「広告を全消しする方法」がほとんど。または「アドネットワークのURLを指定する」など。これでは「ふわっと出現する広告」だけを狙い撃ちにできませんし、広告を全消しにすると良い広告まで消えてしまう。。

そこで思案した結果、割と簡単な方法で解決しそうだったので紹介しますー

コンテンツブロッカーを使って、アンカー広告をcssセレクタで指定して非表示に!

今回使ったコンテンツブロッカーアプリは1Blocker。有名なアプリです。

1Blocker

1Blocker

  • Salavat Khanov
  • 仕事効率化
  • 無料

1Blockerの導入については以下のサイトがわかりやすいのでご参考に。。 

無料で使えるコンテンツブロッカー『1Blocker』の使い方 | AppBank – iPhone, スマホのたのしみを見つけよう

結論から書きますね。。

アプリの Hide Page Elements から、cssセレクタを非表示にするルールを追加します。

追加するルールは以下の画像の通り。

f:id:bissybissy:20170815074030p:plain

① 名前をつけます。自分がわかればテキトーでいいです。

CSS SELECTOR のところに以下のセレクタを書きます。

[style*=opacity]

SAVEすれば完了です!

 

理屈としては難しいことはひとつもございません。

ふわっと出てくるってことは最初は透明なわけなんで、透明度を表すopacityという値をもつstyle属性を非表示にしちゃえば言い訳です。それが [style*=opacity] な訳ですね。

非表示(display:none)の方はコンテンツブロッカーアプリがやってくれます。

 

以下、 2ちゃんねるまとめのまとめ  さんから被験体になっていただいたみなさん(嫌いな広告を出しているみなさん)。他にも色々あると思いますが。。

これらのサイトでふわっと広告が狙い通りにブロックされているのを確認しました。もちろん通常の適切な広告は表示されてます。

何か気になった広告があったらちゃんとクリックするつもりですヽ(´ー`)ノ

とりあえずコンテンツブロッカーのおかげで心に平穏が訪れました。心置き無くスクロールできるってことがこんなに快適だったなんて!

コンテンツブロッカーありがたし。

 

※ なおこの記事で紹介した方法は、ふつーに半透過の広告じゃない要素が巻き添えを食らって見えなくなる可能性があります。が、その数よりもこの広告の方が出現頻度が高いと思うので紹介しましたー。設定する際はあらかじめご了承くださいませ。

 

ではね。

 

【Mac】キーボードに猫が載ってくる対策🐈

かまってモードの猫って、お仕事中だろうが遊び中だろうがお構いなくキーボードガンガン載ってきますよねー。それが可愛いとこでもあるんですが、ウェブ屋なんてキーボードがメインな仕事な訳で結構困る。

だからと言って仕事中猫を隔離するのも困る(私情)。

というわけで対策アプリがないかなーと思ってディグってたらこんな記事を見つけたので早速設定!

www.mackungfu.org

アプリは不要!キーボード連打をできなくすればOK!

まずは「システム環境設定」へ。
そして「キーボード」。
で、「キーのリピート」のところをオフにしてしまいましょう。

私の設定画面はこんな感じ。

f:id:bissybissy:20170815024845p:plain

これにより「あ」キーを押し続けると「ああああああああああ」となっていたのが、「あ」で済むようになります。

もちろん「ポポポポポオポポPオポッポ」とMacちゃんが悲鳴をあげることもありません。

参考: キーの連続入力の速さを設定する - Mac ヘルプ

早速うちの猫様で検証

部屋を見回すと手頃な猫が落ちていたのでキーボードの上に載せてみました。実験に協力していただいたのはこちらのネロさん(♂)。

f:id:bissybissy:20170815025117j:plain

動画はこちら。のしのし歩かれたけど「q」一文字しか入ってない!やったー

(あと何度かやってもらったけど4-5文字程度で済んでいる模様)

 

これで「くぁwせdrftgyふじこlp」とか入力されたり、作業中のアプリ閉じられたりしなくて済みますネ!

もちろんこれで全ての問題が解決する分けじゃないですが、困ることは確実に減りますよ〜。

なお、deleteキー長押しで文字消す派の人は、色々スライダを調整してみてくださいね。。(私は control + Shift + ← でざっくり選択してから微調整するか、ダブルクリックで選択して単語のみ選択して消す派です〜)

 

ではね。

本日の謎用語メモ: Amazon Lightsail というサービス

お友達から聞いたのでメモ。

aws.amazon.com

以下引用。

数回クリックしてメニューから設定を選択し、SSDベースのストレージ、DNS管理、固定IPが事前設定された仮想マシンを起動することができます。好きなオペレーティングシステム(Amazon Linux AMI,Ubuntu)、開発環境(LAMP, LEMP, MEAN,Node.js)やアプリケーション(Drupal,Joomla,Redmine,GitLabなど)を立ち上げることができます。そして、それはデータ転送量の大きな容量を含む月額$5から始まる定額料金です。

ほう?

この記事からもうしばらく経っているので公式サイトは日本語対応したみたいだしTokyoリージョンもできたみたい。

amazonlightsail.com

ふつーのウェブサイト制作やってるとあんまり気にしない系サービスだけど、Webアプリ作るならこっちのがいいのかな?

安いしふつーのレンタルサーバー的なノリで使ってもいいのかもしれない。

あ、でも普通のレンタルサーバーでプリインストールされてるモジュールとかのインストールとかしなきゃいけないのかな?よくわかりまちぇん\(^o^)/

今プライベートでは Xserver を使っていて、それよりは Amazon Lightsail の方が安いわけ何だけど、 Xserver はモリサワのフォントの一部をwebフォントでつかえるし、あ、でも私そんなにモリサワ派じゃないし、とか何とか。

気が向いたら触ってみまーす!
(オススメの使い方とか、理解が浅いよとかいうツッコミをお待ちしておりますー)

web受注するときに確認しておきたいこと

いくら急ぎの案件だからってこれだけは欠かしちゃ帰って遅くなっちゃうよ、というお話。主に体験談なので参考まで…

  • 担当者=ステークホルダーではない
    しかも担当者がステークホルダーと意思疎通しているとは限らない。どんでん返しや仕様変更の爆撃を喰らわないように確認しておきたい。(例えばせっせと担当者さんと進めていたら、社長の鶴の一声でひっくり返ったなんてことがありますから)急ぎ案件でも、担当さん以外にステークホルダーを含めたキックオフMTGをしよう。
  • サーバーはファインなサーバーを使っているとは限らない
    Amazon EC2を切り売りしたりしている業者さんからレンタルされているケースも稀にある。その場合、やり取りに工数が発生するので進行管理費に入れよう。また、動かしたいサービスやプログラムに対応するためのモジュールが入っていない可能性も高い。
  • ダークホース・CGIはまだ生きていたりする
    若い子は知らないかもしれないけどCGIっていうのがあったんや…(かくいう私もCGI死滅期にwebに目覚めたので、パーミッションが面倒とかそういうことしかわからない。したがってCGIという拡張子を見つけた時は気をつけよう。大抵フォーム関連に関わっており、URLでその存在は確認できる。
  • IE11以前のブラウザ対応は別料金をとってデータも添えて諦めてもらう
    お客様の要望に応えることも重要だけど、お客様を安全でないジェットコースターにボロボロのシートベルトで乗らせる遊園地は閉園していいと思う。少なくとも古いブラウザ・OSを使うことの危険性を告知するべきだし、それでもなお、というなら工数結構発生するからそこはきちんと納得してもらおう。(すげー古い社内のイントラネットでしか使わないシステムの案件の場合はしょーがないので腹をくくって受注しよう。検証はmodern.IEで完璧に再現できると思ったら大間違い。また、偶然古いOSの古いIEを持っていたとしても、お客様の環境が同じとは限らない。お客様の方でしか発生しない事象もある。出張を覚悟しよう。実話。)
  • 担当者さんが使うナゾの業界用語・社内用語は無視してはいけない
    大事なことだったりする。なりふり構わず聞きましょう。
  • 「0時に公開してください」の雰囲気加減に注意
    0時指定された場合に、先方にも確認可能な担当者がいるのか聞いて諦めてもらう。理想は翌日が営業日の午前中。理由は簡単で対応可能性を高めるため。どうしても納得いただけず0時公開の場合は別料金(夜間対応費)をいただくべし。コンプラ
  • 運用は誰がやるのか。SNS・ブログ更新ちゃんとやれるのか。リテラシーはいかばかりか
    運用は命。ウェブ完成がゴールインじゃないですから!完成してからが墓場ですから!運用できそうにないなら運用費を提案するのもアリ。
  • リニューアル案件の場合、Google Analytics・サーチコンソールは提案前に見せてもらえるか
    当てずっぽうな提案するよりは…ね。
  • お客様の「こうして欲しい」じゃなくて「こうなるにはどうしたらいい?」を聞こう
    手段じゃなくて目的を聞こう。よく言われることだとは思うけど。解決策の引き出しは僕らの方が持っているはず(ちゃんと勉強しているなら)。
  • Google ドライブGoogle ドキュメントスプレッドシート)は使えるか
    大手さんはセキュリティが〜とかいう理由で使えない場合が多いが、Goolgeは Pマーク対応してるのにね…そしてこれが使えないだけでやり取りにロスが発生することを自覚しよう。もちろん使えないなら、進行管理費をいただくだけです。
  • とりあえずでもKGIを決めよう
    サイトが公開すると気が抜けてしまう担当さんがいたりするので、いつまでに申し込みを10件、とか、UUをいくつ、とか、SNSのフォロワーを何人にするとか具体的な数字を決めておこう。じゃないとやらなくなる。
  • 原稿や素材をいただいたり、こちらの納期などのスケジュールは時間単位まで指定しよう
    「今日まで」が今日の0時までなのか、今日の23:59までなのかを曖昧にするとあんまり良くないよ。

さてつらつらっと書き連ねて参りましたがここで一旦公開します。。
当たり前じゃん的なこともありますが一応…
またなんかあったら追記するかも。

ではね。

JetpackやAkismetの連携エラーはxmlrpc.phpの影響。

xmlrpc.phpはなんでそんな意地悪をするの?

数年前から悪い人たちがWordPressの改ざんをするという事件がありましたね。
その改ざんを防ぐために、xmlrpc.phpにアクセスできないようにするサーバー屋さんが増えました。なので意地悪じゃないんだよ。君を守るためなんだ…

ところがどっこい。

xmlrpc.phpが404や403だとJetpackやAkismetと連携できない…

連携に必要だったんですね、xmlrpc.php。ほー…。

Jetpackプラグインをインストールしwordpress.comと連携しようとするとエラーメッセージが出ます。

で、.htaccessを見てみて、xmlrpc.phpがアクセス拒否されてれば、あーなるほどねぇ、となるわけなんですが、サーバー屋さんが一元管理してる場合ちょっと混乱するわけです。

レンタルサーバーなら多分xmlrpc.phpの設定項目があります。
オフにして、.htaccessの方でアクセスを細かく制御してあげましょう。

AmazonEC2とかを使って切り売りしているサーバー屋さんの場合は、設定画面とか特になかったりするんで、担当の人にかくかくしかじかと言って解除してもらいましょう。.htaccessの方で頑張るから!といえばまぁ対応してくれると思います。

してくれなかったらさくらのレンタルサーバーへ引越しを(他意はない)。w

Jetpackと繋げるための.htaccessの記述はこう。

allow from Jetpack, Deny All. xmlrpc.php

Jetpackを開発しているとこのサーバーがここに羅列している範囲のIPらしいんですネ。

今のところ。

なのでこれをぺろっと.htaccessに追記しましょう。

 

ではね。

is_mobile()を便利にするプラグイン「mobble」で楽々デバイス判定

WordPressのis_mobile()便利。だけど…

WordPressの関数、is_mobile() 便利ですよねー。
スマホタブレットとPCを条件分岐してくれるアレです。

でもサイトによっちゃ、スマホタブレット・PCで分岐したかったりしますよね〜。
で、is_mobile()をfunctions.phpで再定義し直したり…

というのも面倒なので笑、プラグインで解決しようということでディグったらありました!

その名もmobble。モブル。かわいい。

ja.wordpress.org

is_mobileを使いたい人が欲しがるような便利機能付き!

さすがプラグイン化しているだけあって、単にis_mobile()を再定義しているだけじゃ無いんです。

プラグインのサイト見てもらえばすぐわかることではあるんですが一応紹介。

<?php
is_handheld(); // any handheld device (phone, tablet, Nintendo)
is_mobile(); // any type of mobile phone (iPhone, Android, etc)
is_tablet(); // any tablet device
is_ios(); // any Apple device (iPhone, iPad, iPod)
?>

is_tablet はもちろん、is_iOS とか便利!

さらに〜〜

<?php
is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();
?>

とかまで!is_nintendo() て!笑 いや、気にしないといけないのかな…ブルブル😱

ということは〜〜

<?php
if (is_ios()) {
    wp_enqueue_style('ios', get_template_directory_uri() . '/ios.css');
}
?>

的なことも余裕でできちゃうわけで!

しかもbodyに端末のclassをつけてくれます!(重要)

例えば今私はPCなChromeで見ているので、その場合bodyに .desktop .chrome のクラス名をつけてくれます!激しく便利!

<body class="page page-id-5 desktop chrome">

というわけで、これはもうWordPressでのサイト構築にはデフォで入れても良いプラグインなんじゃないでしょーか。オススメです!

ではね!(前のめり