web制作の隙間問題

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

本日の謎用語メモ: 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でのサイト構築にはデフォで入れても良いプラグインなんじゃないでしょーか。オススメです!

ではね!(前のめり 

 

レスポンシブの確認に役立つ!Viewport Resizerブックマークレット(非アドオン)

レスポンシブデザインなどをやっていると必携の、ウィンドウリサイズ系のブラウザのアドオンや拡張をお探しの方へ、こういうのもありまっせということでご紹介!

Viewport Resizerというブックマークレットです!

使い方は簡単、ブックマークツールバーに、"CLICK OR BOOKMARK"のボタンをドラッグ&ドロップするだけです〜

lab.maltewassermann.com

アドオンには無いこのブックマークレットの魅力

ブラウザ問わず使えるのがブックマークレットの魅力なことは言わずもがなですが、なんとこのViewport Resizer、自分のPCのディスプレイ以上のサイズもシミュレートできるんですよ〜!すごい。

そもそも大きいディスプレイの人にはわかりづらいと思うので、どういうことなのかがわかる動画を作ってみました。。(なおわたくしMacBook Air 11インチ)↓

Viewport Resizerで大きい画面をシミュレート

なおこの動画はgifアニメではなくapngだよ〜apngについてはまた今度。(はてブロはapngを普通のpngに変換しちゃうようなのでimgurでアップしたのを貼ってますー) 

じわじわ画面のサイズを変えてくれるアニメーション機能も楽しい

いかにエレガントにレスポンしてるかが一目でわかる機能ですねー。楽しいなー。

Viewport Resizerでビューポートをアニメート

きっかけはChromeプラグインが動かなくなったから…(未解決)

経緯としては、Chromeプラグイン(ポップアップ系)が全部動かなくなった事件を受けて、こういう記事とか色々あさって頑張ったけど直らず。どこに問題があるのか不明だが、そこにこれ以上時間かけるわけにもいかないので…

ということでブックマークレットとかならあるんじゃね?と探して見つけたのがこれ。

怪我の功名ですなぁ。

ではね。

Macってカット&ペーストできるんだぜ…

知らない人が多めなので書いておこっと。

コピペができるのは周知の通り。

でもカトペ(?)したいことの方が多くないですかー?

Macでカット&ペーストする方法

まずフツーにコピーします。⌘+C

そして移動したい場所に行って alt+⌘+V

普通のペーストに alt が増えるだけだね!

もう、ドラッグ&ドロップなんてしなくても良いんだよ…✨

ではね。

 

サイトをSSL対応したらSNSのシェア数がリセットされる対策

SNSボタンのシェア数をキャッシュしてくれる「SNS Count Cache」。

wordpress.org

これっすね。WordPress限定ですが、日本の方が作られたプラグインなんで、はてブとかPush7にも対応しているのが素敵!(余談だけどPushCrewよりPush7の方がオススメだぜ)

公式SNSボタンは表示が遅いのが致命的。

公式ボタンの最大のデメリットは表示が遅いことですよねー。
サイトの表示速度が遅いことはUX的にもSEO的にもダメージが。

私としましては、サイトのユーザー層によっては公式ボタンの方が認識されやすいため*1、あまりオリジナルデザインボタンは使わない方なんですが(作るにしてもめっちゃ本物そっくりに作るw)
状況によっちゃ、表示が遅くてSNSボタンの存在に気づかれない…なんてなったら本末転倒もいいところwやっぱオリジナルボタン導入した方がいいっすね!(結論)

SNS Count Cacheプラグインの導入方法

設置については以下の記事が参考になります。。あえて私が書くまでもないほど丁寧なのでリンク紹介にとどめさせていただきます。感謝。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cacheの使い方

便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効的な使い方

また、プラグインの仕組みについては作者さんがサイトで丁寧に書かれているんで、WordPress以外のサイトにも対応できるかもですね。その時はエンジニア陣に頑張ってもらおうw

SNS Count Cache | 試行錯誤ライフハック

 

不具合やSNSの仕様変更にも臨機応変に対応されてるので安心して使えるプラグインだと思います!

つーわけで今度弊社のサイトにもこっそり入れてみる予定。

ではね。ハッピー七夕!🌌

*1:デザインによって差があるかはABテストはした方がいいよね、なんにせよ。サイトの目的によってどちらがいいかは変わってくると思われるため