frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

モバイルフレンドリー対策とは?

近年モバイルファーストが叫ばれていますが、googleではモバイルファーストではない(スマートフォン対応していない)サイトには検索結果で「ページがモバイル フレンドリーではありません。」という文言が表示されるようになってしまいました。

SEO順位も影響するようですね。

自分はサイト制作を仕事にしているので、このコメントはピンときますが、そうでない人からしたらセキュリティ的に問題あるのかなと直感が働いてアクセスが減少する可能性もありますよね。

スマートフォン対応しておくのは、言わずもがなですが今後必須の作業であると言えるでしょう。

ではスマートフォン非対応サイトを作ってしまったらどうするか?

そう簡単にはレスポンシブデザインに仕様変更できないですよね。

モバイルフレンドリーのテスト項目は4つあります。

テキストが小さすぎて読めません

googleが定める推奨テキストサイズは16pxです。
しかしPCの状態で16pxにしていたらその分縮小している為意味はありません。
縮小しない状態でのテキストサイズが望まれます。

  • コンテンツの幅が画面の幅を超えています

画面の幅というのはiphone5であれば320pxでしょう。
PCのコンテンツサイズが320pxよろ大きいことは明白なので、max-widthを使用してレスポンシブ対応しなければいけないということです。

  • ビューポートが設定されていません

つまりはこんなやつです。表示領域をデバイスに合わせることができます。
こちらもレスポンシブデザインでは必須のソースですね。

<meta name="viewport" content="width=device-width,initial-scale=1"> 
  • クリック可能な要素同士が近すぎます

クリック可能な要素が近いとミスタップが起きてユーザビリティが損なわれてしまいます。

そのためスマホサイズに合わせたデザイン設計が必要となります。

まとめ

スマートフォン非対応サイトを作った場合のモバイルフレンドリー対策をしようと思いましたが、上記4つはレスポンシブデザインにシフトしないと解決できなそうでした。。

もちろんSP専用にマークアップしても構いません。

スマートフォンユーザーを意識したコンテンツ作りを心がけましょう!

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できないという話

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できない、それはSSLのレベルに原因がありました。

SSLとは

インターネット上でのデータのやりとりを暗号化し、第三者に情報をのぞかれたり盗まれたりしないようにするのがSSL(Secure Sockets Layer)です。
近年では、GoogleがSSL化を推奨したり、ブラウザのアドレスバーに「保護された通信」と表示するなど、SSLへの優遇措置がとられ、さらに注目が高まっています。

独自SSLについて / セキュリティ / マニュアル - レンタルサーバーならロリポップ!

事案

知り合いのWebサイトを作ることがありました。
システムの入ってないhtml,css,JSのみの簡単なサイトでしたが、先方の関連会社に大手企業がありその会社のPCで制作したサイトが閲覧できないという連絡がありました。

始めは、SSL化してなかったので慌ててSSL化しました。
ロリポップでは、一番安いエコノミープランではSSL化できないので注意が必要です。

しかし、それでもセキュリティレベルが中の為サイトが閲覧できないという連絡があったのです。

ロリポップに問い合わせ

たまらず今回のサーバー会社であるロリポップに問い合わせました。

回答はこのようなことです。

独自SSLをご利用いただいても
セキュリティによってサイトがブロックされる場合、
有料の独自SSL(PRO)と独自SSL(無料)との
認証レベルの差による可能性がございます。

つまり、SSL化にもレベルがあり、独自SSL化しても有料のプランでなければセキュリティにひっかかる可能性があるということです。

企業・団体でご利用の方は、認証レベルの高い独自SSLで、より訪問者の安心を確保するのがおすすめです。
ロリポップ!では、独自SSL(PRO)として、GMOグローバルサイン株式会社提供のクイック認証SSL、企業認証SSL、EV SSLを提供しています。 企業認証SSL、EV SSLは、認証フローに法人の実在証明が含まれるため、なりすましによる独自SSLの取得を防ぎます。

独自SSLについて / セキュリティ / マニュアル - レンタルサーバーならロリポップ!

現状まだ有料SSL化はしていないので、確証はできませんが恐らく独自SSL(PRO)を契約すれば閲覧できるようになるでしょう。

しかし、利用料がなかなかのもの。

金額

クイック認証SSL
2,000円/月~

企業認証SSL
59,800円~/年~

EV SSL
128,800円~/年~

サーバー代より高いですからね。。
こちらを基に本当にSSL(PRO)を利用する費用対効果があるかを考えてもらう必要があります。

まとめ

制作ばっかりしていたので、この辺のサーバー情報は疎く反省でした。
特にセキュリティ意識が高まってる昨今、SSLの仕様に関してもよく先方と話し合っておくことが大切ですね。

ケンカしないれこーず


スタートした日

ケンカしてない継続日

ケンカしてない最長記録




ケンカが多い友人夫婦の為にケンカしてない記録を取るためだけのwebアプリを作ってみました。

機能

  • カレンダー
  • ケンカしてない継続日
  • ケンカしてない最長記録
  • ケンカした日(赤枠)(今後予定)
  • ケンカ原因(今後予定)

ペルソナ

ターゲット:男女30代~
ケンカしたくないのにケンカが絶えない
ケンカを減らしたいと考えてる夫婦、カップル

フロー

1.ケンカしてない継続日0日でスタート、初めて更新した日がスタートした日
2.ケンカしたら「ケンカした」ボタンをクリック
3.カウントを止める
4.ケンカしてない最長記録を更新
5.リスタートボタンで継続日0日でカウントスタート
6.スタートした日が更新

トグルのarea-*は何を指定するか。

area-*属性はJSで変更された要素の役割と状態をブラウザに伝える働きをします。

トグルでの使用例

トグルでは主に下記を使用します。

  • aria-controls・・・ボタンと開閉要素の関連付け
  • aria-expanded・・・開閉の状態

主に下記のようにします。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>

また、JSオフ時も考慮し、JSでボタンと開閉要素にaria-expanded="true"(開いてる場合)を指定します。

<div class="toggle-01 js-toggle is-open">
<button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01" aria-expanded="true"><span>閉じる</span></button>
<div id="toggle-content-01" class="toggle-content js-toggle-content" aria-expanded="true">
<p>トグルコンテンツ</p>
</div>
<!-- toggle-01 --></div>

全てのフォーカス要素を無効にしたい

JSなどで対象エリア内のフォーカスを全て無効にしたい時があると思います。

全てのフォーカス要素は?

フォーカス要素一覧は下記です。

  • a[href]
  • area[href]
  • [onclick]
  • [tabindex]
  • input
  • button
  • select
  • option
  • textarea
  • output
  • summary
  • video
  • audio
  • object
  • embed

フォーカスさせない

要素にフォーカスさせたくない場合はtabIndex="-1"にします。

<a href="#" tabindex="-1">a要素</a>

nodeをアップデートしたらgulpが動かない時の対処法

nodeをアップデートしたらgulpが強制終了するようになりました。
意外と忘れそうなので備忘録用にメモします。

node-sassを使用しているのですが、node-sassはバージョンごとにインストールが必要なのでコマンドプロンプトにて下記を実行しました。


npm install gulp-sass --save-dev

こちらのみで動きました。

これで動かないときはこちらを試してみると良いそうです。

npm cache clean && node ./node_modules/node-sass/scripts/install.js

参考:https://qiita.com/rinoside/items/d9c911cc8d0c5db114c9

css3でコイントスのように水平に回転するアニメーション

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。

マウスオーバー時も回転します。

<div class="coin-wrap">
 <div class="coin">
  <div class="front"><h2>コイン:表</h2></div>
  <div class="back"><h2>コイン:裏</h2></div>
 </div>
</div>
.coin-wrap .coin {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: all 3s ease;
}
.coin-wrap .coin div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
}
.coin-wrap .coin .front {
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;
}
.coin-wrap .coin .back
{
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;

}
.coin-wrap .coin {
    transform: rotateY( 720deg );
    animation: coin 3.5s;
    transition-timing-function: cubic-bezier(.01, -.105, .43, 1.59);
}
.coin-wrap .coin .back {
    transform: rotateY( 180deg );
}
@keyframes coin {
    0% {
        transform: rotateY( 0deg ) ;
    }
    100% {
        transform: rotateY( 1440deg ) ;
    }
}
.coin-wrap .coin:hover {
    transform: rotateY( 1440deg );
}

See the Pen QqPpBW by funclur (@funclur) on CodePen.