やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

ハンバーガーメニュー

なんだかんだ言っても、

ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであれば

まだまだハンバーガーメニューは有効だと思うのです。

ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。

仕様
  • 右上に固定
  • クルッと回ってバツになる、それを丸で囲う
  • メニューをクリックしてジャンプしたらデフォルトの非表示状態に戻る

HTML

<nav>
<a class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</a>
<ul class="navmenu">
	<li><a href="#">top</a></li>
	<li><a href="#menu1">menu1</a></li>
	<li><a href="#menu2">menu2</a></li>
	<li><a href="#menu3">menu3</a></li>
	<li><a href="#menu4">menu4</a></li>
</ul>
</nav>

CSS

.menu-trigger {
	position: fixed;
	top:14px;
	right:24px;  
	width: 30px;
	height: 26px;
	z-index: 999;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 14px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
/***hover**/
.menu-trigger:not(.active):hover span:nth-of-type(1) {
  top: 3px;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
  bottom: 3px;
}
/***動き***/
.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-315deg) scale(.8);
  transform: translateY(12px) rotate(-315deg) scale(.8);
}
.menu-trigger.active span:nth-of-type(2) {
  width: 34px;
  height: 34px;
  background-color: transparent;
  border: 1px solid #333;
  border-radius: 50%;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(315deg) scale(.8);
  transform: translateY(-12px) rotate(315deg) scale(.8);
}
nav ul{
display:none;
position: fixed;
top:0;
right:0;
height:100vh;
max-height:400px;
width:600px;
max-width: 600px;
z-index: 100;
background-color:rgba(255,255,255,0.85);
}

jQuery

$(function(){
//ハンバーガーメニュー
    $(".menu-trigger").on("click", function() {
        $(this).toggleClass("active");
        $(this).next("ul").slideToggle();
    });

//メニューを選択したら閉じる
    $('.navmenu li a').click(function() {
	$('nav ul').hide();
	$('.menu-trigger').removeClass("active") 
	});
	$('nav').click(function() { event.stopPropagation(); });
});

おまけ

スムーススクロール

jQuery
  • #をダブルクォーテーションで囲いましょう。
$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 800; 
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

iPhone 5Sから8plusに、ソフバンから格安SIMに乗り換えメモ

iPhone5S、電源ボタンが時々しか押せなくなったり、

電池残量が17%からいきなり0%になったりするので、

潮時です。

作業順序の確認

参考にしたサイト

www.survive-m.com

  1. SIMフリーiPhone 8 plusをAppleStoreから買う
  2. MNP予約番号をゲットする
  3. 格安SIMを申し込む
  4. iPhoneバックアップをとる
  5. MNP開通作業をする
  6. 新しいiPhoneを設定する

1. SIMフリーiPhone 8 plusをAppleStoreから買う

ポチっとな。

www.apple.com

色はゴールドです。

スペースグレイのつもりだったけど、店頭で実機を持ってみたところ

背面につく指紋がエグい

ガラスだもんね・・・。

 

ヤマトの営業所での受け取り を選択できたので、そうします。

ちなみに、10/16までの申し込みで12回分割払い金利0%

だけどローン生理的に無理マンなので一括で支払うことにした。ひゃー

5〜7日くらいで届くみたい。楽しみ。

2. MNP予約番号をゲットする

docomoの場合
0120-800-000に電話(受付時間9:00~20:00)して「MNP予約番号をください」と言うと、番号を教えてもらえます。
auの場合
0077-75470に電話(受付時間9:00~20:00)して「MNP予約番号をください」と言うと、番号を教えてもらえます。
SoftBankの場合
0800-100-5533に電話(受付時間9:00~20:00)して「MNP予約番号をください」と言うと、番号を教えてもらえます。

SIMフリーのiPhoneを最安で買う&運用する方法

Softbankの上記番号にかけてみた。
途中まで自動通話だったが、暗証番号を一度間違えたところ即刻オペレーターに繋がれて、
計12分ほどの通話になった。

  • 説明されたこ
    • ホワイトプランの3年目になっていたので、解約金=10,260円かかる
      • 知らなかった。2年以上なら解約金かからないのかと思ってた
      • 正解は2年ごとに約2ヶ月間、解約金0円期間がおとずれる。それ以外はかかる
    • MNP利用料?として 3,240円
      • これは知ってた
    • パケ放題フラット月額6600円は日割りできないので解約日に関わらず1ヶ月分かかる
      • そうなのか… まぁそりゃそうか

あとは次の乗り換え先を根掘り葉掘り聞かれたり、
キャンペーンの案内をされたりしたが、スルー。

通話終了後、SMSで予約番号が送られてきた。
(なのでメモは不要)

3. 格安SIMを申し込む

LINEモバイルにしました。
mobile.line.me


MNP予約番号とクレジットカード、本人確認書類を手元に置いて、いざ申し込み。

途中で「本人確認書類の写真をとってファイル添付で送る」というステップがあるぞ!

それ以外は普通に着々と入力していくだけ。カンタン。

翌日に「審査OKでした」のメールが届き、

翌々日にSIMカードが届きました。

ちなみにiPhone8PlusはナノSIMです。

4. iPhoneバックアップをとってお引越し

わー、いよいよだぜ

iPhoneのバックアップをとる
  1. Macにつなぐ
  2. iTunesを立ち上げる
  3. iPhone > 概要 からバックアップをとる。

くそチキンなので、

  • iCloud
  • このコンピュータ

両方でバックアップをとっておく。

LINEの引き継ぎ設定をする

これをやらずに泣きをみる人が私の周りには多かった。

  1. 右下の3点マーク→歯車マーク(設定)
  2. アカウントを引き継ぐ をオンにする
    • 有効時間24時間のカウントダウンが始まり、謎の緊張感がある。
  3. 「アカウント」メニューから、登録メールアドレスを確認しておく
キャリアメールで最近やりとりした人に「メアド変わりましたメール」を送る

もはや懐かしいこの行為…。

5. MNP開通作業を行う

ここで事件、起こる

LINEモバイルのマイページから、申し込み完了!!

おや、何か書いてあるな…。

■注意事項
MNP開通はお申し込みをいただいたお客様から順次手続きを行います。ただし19時以降のお手続きの場合、翌日から順次開通手続きを行います。


現在時刻
f:id:ajicolor:20171016190804p:plain


あああああああああああああああああああああああ

翌日までお預け、しかもいつ開通作業が行われるかわからない、スリリングな状態に…。

気にせず進めます。

6. 新しいiPhoneを設定する

SIMカードをぶっ刺して、

電源をオン。

iPhoneたんに言われるがままに、

言語を設定し、
Touch IDを設定し、
iTunesバックアップから復元し…。

(一度間違えて2014のバックアップを復元してしまい、昔の壁紙画像・元彼のメールなどがいきなり出てきて、何とも言えない気持ちになったのは秘密)

そしてバックアップからの復元が

何回やってもエラーになるので苦戦していたが、

一度工場出荷状態に戻して、(iTunesから「iPhoneを復元」)

セットアップと復元やり直したら出来た!!YATTA!!!

その後

MNP開通の申請をした翌朝9:30頃、

気がついたらiPhone5Sが圏外になり、

iPhone8Plus、無事開通してました。

8Plusもしばらく圏外のままだったので心配したけど、

再起動したら無事に「docomo」の表示が。

めでたしめでたし・・・。

Let's Encrypt やっぱり自動更新されてなかった

期限切れちゃってた。証明書の作り直しです。

古いやつバックアップ

# mv /etc/letsencrypt /etc/letsencrypt.back

certbot-autoがインストールされてなかったようなので

ここに書いてある通りに

# yum install epel-release
# wget https://dl.eff.org/certbot-auto
# chmod a+x certbot-auto

と、ここで

# ./certbot-auto

してもエラーが出たので、メッセージに従ってこうする

# ./certbot-auto certonly

あなたが落としたのは金の斧ですか?銀の斧ですか?

How would you like to authenticate with the ACME CA?
1: Apache Web Server plugin - Beta (apache) [Misconfigured]
2: Spin up a temporary webserver (standalone)
3: Place files in webroot directory (webroot)

わかんないので、インターネットを信じて2を選ぶ


あとはA(Agree)とかY(Yes)を押したり、メールアドレスやドメインを入力したりする

できたっぽいので

# service httpd start

自動更新の設定を、今度こそやっておこう

crontabというのを編集するのだが、

# crontab -e

で開くと憎たらしいviエディタが現れたので

# EDITOR=nano
# export EDITOR

ってやっておく。これでnanoエディタがデフォになる

こうですか、わかりません

0 6 1 * * /etc/init.d/httpd stop && ./certbot-auto renew --force-renew && /etc/init.d/httpd start

来月1日の朝6時に、ちゃんと更新されてたら正解