2019-11-02

えいちつー_西葛西

行ってきました麺やえいちつー。西葛西に最近できたラーメン屋らしく、一発いってみようと。。妻と子供が実家に帰っている間にこっそり。麺やえいちつー

今回はえいちつーラーメンなるものをたべました。青ネギ、たまご、ちゃーしゅーがのったおすすめラーメン。普通のらーめんは「麺」というメニューですが、名前が悪いのか、たのみにくく、えいちつー麺にしました。味はとんこつと魚介のバランスの取れたスープとやや太めの麺で非常に美味しかったです。見た目はさっぱりなラーメンと思えたのですが、食べてみるとしっかり重みもあり、かといってくどくないスープでした。替え玉もあり、替え玉は味変玉といって、魚粉がまぶしてある細麺が替え玉となっており、味変にはもってこい。美味しくいただきました。

2019-11-02

Animate.cssで間隔を調整する

最近HPを作成する仕事が入ってきました。そこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、少し古いのですが、 Animate.cssで動きを付けました。

導入

導入は簡単。上記サイトの「Download Animate.css」をクリックすれば、CSSが表示されるので、それをlinkタグで読み込むだけ。

 <link rel="stylesheet" href="css/animate.css">

動かしたい要素にクラスを付与

<h1 class="animated flip" id="top_title">Enjoy</h1>

これだけで動きます。今回はflipにしてみました。ただし、これだけだといっかいぐるりと回るだけ。

永遠に動き続けるようにする

style当てます。animation-iteration-countをinfiniteにしてあげれば、ずっと動くようになります。

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

これだと、ひたすら回り続ける上、終了直後に開始され、しつこい動きになってしまいます。そこで、時間間隔をあけるようにします。

まずは、一回の動きが何秒かけて動かしたいかを考えます。いろいろ試したところ2秒だと綺麗な動きをたもてたまま、焦った印象もなく期待通りの1回の動きをしてくれましたので、animation-durationを2sにしました。

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;

}

次に、終了から開始の間隔を調整したいところですが、 animate.cssをみてみるとこんな記載が。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

40%⇨50％⇨80％⇨to(100%)で動きが調整されています。この割合のまま動いてくれた上で、終了から開始までの間隔を付けてあげればOKということで、表計算ソフト登場

duration(s)が2秒の場合の40%,50%,80%,100%の秒数はそれぞれ0.8秒,1秒,1.6秒,2秒ということがわかります。
duration(s)を仮に5秒、6秒、7秒、8秒にした場合も計算してみました。
格duration(s)の際に0.8秒,1秒,1.6秒,2秒が何％に当たるのかも計算。
duration(s)が5秒の場合は0.8秒は16%、1秒は20%.......
今回の場合は5秒と8秒が比較的綺麗な数値になったので、どちらかにしようと思います。
まぁ、5秒に1回動くようなものならOKなので今回は5秒のdurationでやってみます。

ということで、CSSを変更

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

}

さらにこの計算結果にあわせて@keyframes flipも変えてあげます。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  16% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  20% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  32% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

動きのイメージとしては、40％になったら、toと同じ値をぶこんであげれば、それ以降は動かないで残りの60％を過ごしてくれるイメージ

これで、ほぼほぼ完了。

動き出す秒数を考える。

私の場合、bootstrapを使って、読み込み時に画面サイズを調整していました。読み込み時点で、このアニメーションが動くと、それに合わせて、画面サイズを調整してしまっていたので、アニメーションが動き出す秒数をanimation-delayで調整。1秒あれば、読み込み完了するでしょうという適当名考えで1sにしました。

#top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

/* X秒おいてからアニメーションする */
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;

}

以上で終わり。

2019-09-07

LinkedInAPIを使う

Tech

LinkedInのAPIで何ができるの？

結論。大したことはできない。。。

とりあえずつなげるまで

appの登録

ここからアプリを作るキャプチャ.PNG

適当に設定。とりあえず動かすにはなんでもいいので頑張らない
設定すると「Client ID」と「Client Secret」が払い出されるので、メモっとく
「RedirectURL」を求められるのでちゃんと入れる。アプリからLinkedInの認証画面に飛んでOKとなった後に遷移する画面。とりあえず適当にエントリーポイント作っておく。

キャプチャ.PNG

自分のアカウントでアプリの許可

CLIENT_IDとREDIRECT_URIを使って、Appの許可を行う。

https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&state=987654321&scope=r_basicprofile

許可すると、REDIRECT_URIにcodeパラメータが付与されてリダイレクトされる。

トークンを取得

   curl -X POST \
        --data "grant_type=authorization_code" \
        --data "code={code}" \
        --data "redirect_uri={REDIRECT_URI}" \
        --data "client_id={CLIENT_ID}" \
        --data "client_secret={CLIENT_SECRET}" \
        "https://www.linkedin.com/oauth/v2/accessToken"

するとトークンが返ってくるので、それを使って各APIをたたく。
本当はprofileAPIとか使いたかったが、パーミッションがなくてたたけない。
パーミッションを追加するにはここからいろいろ登録が必要とのこと。審査も必要なので残念。。。

APIをたたく

せっかくなので、goで書いておく

    reqURL := "https://api.linkedin.com/v1/people/~?format=json"
    token := "{token}"
    req, err := http.NewRequest(
        "GET",
        reqURL,
        nil,
    )
    if err != nil {
        fmt.Println(err)
    }
    req.Header.Set("Authorization", "Bearer "+token)
    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        fmt.Println(err)
    }
    defer resp.Body.Close()

    respBody, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        fmt.Println(err)
    }
    fmt.Println(string(respBody))

こんな感じ
本当はつながってるユーザの情報がとりたかったが、いけてない。。。。

2019-09-05

バチェラーカードリリース

Tech

この度、バチェラーカードというサービスをリリースしました。

概要

019年秋から始まるバチェラー3シーズンに向けたツールです。

私自身バチェーラーが好きで、シーズン1、シーズン2を観ている際に、こんなのがあったらもっと楽しめると思ったので、作ってみました。

メンバーの見た目、性格、バチェラーとの相性を個人的に評価する機能と、並び替え可能にすることで、ランキング付け可能にしました。

バチェラーカード

技術

技術的には認証とストレージはfirebaseに任せ、デプロイはNetlifyに任せ、フロントはNuxe.jsで実装しています。

頑張りどころ

TwitterやFacebookなどのSNSでシェアできることを一つの売りにしています。シェア自体はこちらのブログ記事の通りSNSのシェアボタンとSNSのログインボタンをサクッと作るさくっとできましたが、facebookやtwitterのアプリケーション登録やOGP設定の登録の認識が漏れていたので一苦労しました。

また、SEO対策などもできていないので、これからどのように訴求していくかが、課題となっています。

目指しているところ

前述のとおりシーズン２までを見ていてほしいと思ったツールです。ユーザがメンバーの評価を簡単に共有できTwitterなどでばずればいいな。そこから少しばかりアフィリエイトで収入を得ることができればなんて。
サーバー代もわずかながらかかっているので。ちなみにデプロイ先はAWSのS3のため、かなりリソースは抑えられているはず。エレ方のコント太郎で取り上げてほしい。

2019-09-05

SNSのシェアボタンとSNSのログインボタンをサクッと作る

Tech

サクッと認証ありのサービスを立ち上げたい。そんな想いから、Nuxtで実装をはじめました。

Nuxtで作って何がいいかというと、generateして静的サイトにしてあげれば、AWSのS3にデプロイできる。 S3へデプロイしてしまえば、ECSやEC2を使うより、格段に安い。

概要

そこで今回はSNSのシェアボタンとSNSのログインボタンをサクッと作る方法を書きます。実際のSNSでの認証はfirebaseに任せて、providerを変えるだけで様々なSNSに認証させます。今回はあくまでUIの作成のみ。

まずはシェアボタン

こんなサービス見つけました。

すごい！すごい！これを使えば一発でできます。

シェアしたいURLとTextを入力、シェアするSNSを選んで、下部のHTMLとCSSをソースに貼り付けるだけ。それだけでできちゃいました。

つぎにログインボタン

シェアボタンとほとんど同じなんだけどなーと思いつつ、まずは似たようなサービスがないかをググる。⇨見つからない。自分で作るのは勘弁。よし！シェアボタンをいじいじしちゃおう。

facebookのシェアボタンをサンプルに

<!-- Sharingbutton Facebook -->
<a
  class="resp-sharing-button__link"
  href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
  target="_blank"
  rel="noopener"
  aria-label="Share on Facebook"
>
  <div
    class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"
  >
    <div
      aria-hidden="true"
      class="resp-sharing-button__icon resp-sharing-button__icon--solid"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
        />
      </svg>
    </div>
    Share on Facebook
  </div>
</a>

ふむふむ。aタグか。扱いづらいのでbuttonに。「href、targetいらないな。」ということで消す。 [Share on Facebook]これは[Login on Facebook]にしておこう。あとはクリックイベントを拾ってよしなにやればOK。

<!-- Sharingbutton Facebook -->
<button
  class="resp-sharing-button__link"
  rel="noopener"
  aria-label="Login on Facebook"
>
  <div
    class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"
  >
    <div
      aria-hidden="true"
      class="resp-sharing-button__icon resp-sharing-button__icon--solid"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path
          d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
        />
      </svg>
    </div>
    Login on Facebook
  </div>
</button>

そのほかがダサいけど、こうなります。今回はFacebookとTwitterだけ。

2019-09-05

鈴屋_館山

Gourmet

行ってきました。竹岡式ラーメン鈴屋

館山にある、元祖竹岡式ラーメンと言われている梅乃屋の近くにあっても、常に混み合っています。

そもそも竹岡式ラーメンとは

竹岡ラーメンの特徴は独特の作り方にある。スープは、醤油ダレに麺茹でに使用した湯（または何も入れず沸かした湯）を入れるのみである。その醤油ダレにはしっかりと肉のうま味が溶け込んでおり、湯を加えることで見た目は濃いがまろやかな味のスープとなる。薬味には玉葱の角切りを使う。　by　ウィキペディア

とのこと。

店内では、数名のおばちゃんが活気よく厨房や店内で作業しています。

味はかなり濃口の醤油味。チューシューの油たっぷりのスープと脂身たっぷりのチャーシュー。

このチューシューがうまい。ねぎもたっぷり入っていて、脂っぽさを中和しようとしてくれる。だが、チャーシュー脂の勝利。

しょっぱくておいしいとはまさにこのことと行ったラーメンでした。

2019-09-05

吉村家_横浜

Gourmet

行ってきました、吉村家。
学生の時は横浜に住んでいたので、家とつくラーメン屋には頻繁にいきました。

家系ラーメンが、私のラーメン好きを作り上げたと行っても過言ではありません。
あまり時間がなかったのですが、そこは勝負！！と並んできました。5名ほどしか並んでいなかったので、次のターンで入れることは確定。

今回は海苔増しにしました。
もちろん「かため、濃いめ、多め」

やっぱりうまい。というか原点の味がする。このかえしの聞いたスープ。臭くなる一歩手前のとんこつ加減。
おいしかったです。

LUCK!

こんにちは、初めまして。エンジニアの杉本翔平です。

えいちつー_西葛西

Animate.cssで間隔を調整する

導入

永遠に動き続けるようにする

動き出す秒数を考える。

LinkedInAPIを使う

LinkedInのAPIで何ができるの？

とりあえずつなげるまで

appの登録

自分のアカウントでアプリの許可

トークンを取得

APIをたたく

バチェラーカードリリース

概要

技術

頑張りどころ

目指しているところ

SNSのシェアボタンとSNSのログインボタンをサクッと作る

概要

まずはシェアボタン

つぎにログインボタン

facebookのシェアボタンをサンプルに

鈴屋_館山

吉村家_横浜